/* Maze: game window, maze and readouts. The page around the game follows the site theme
   (/assets/site.css); the hack window itself is always dark, like the FiveM hack it imitates.
   Everything inside the window is the approved prototype's look; only the sizing makes room for the
   site header (var(--hdr)) and the leaderboard status after a round. */

:root {
  --hk-win: #121316;
  --hk-edge: #2a2c33;
  --hk-board: #0b0b0c;
  --hk-ink: #f2f3f5;
  --hk-muted: #8b8f99;
  --hk-icon: #a3a5ab;
  --hk-track: rgba(255, 255, 255, 0.12);
  --hk-red: #e3202e;
  --hk-red-hot: #ff3845;
  --hk-green: #34d27a;
  --hk-green-glow: rgba(52, 210, 122, 0.5);
  --hk-amber: #f0b04d;
  --hk-scrim: rgba(6, 6, 7, 0.52);
  --hk-focus: #ffffff;
}

.desk {
  box-sizing: border-box;
  flex: none;
  min-height: calc(100vh - var(--hdr));
  padding-inline: 16px;
  padding-block: 16px;
  display: grid;
  place-items: center;
  background-image: radial-gradient(circle, var(--desk-dot) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
@supports (height: 100dvh) {
  .desk { min-height: calc(100dvh - var(--hdr)); }
}

/* ---------- The hack window ---------- */
/* Width follows the viewport height so the whole window fits under the site header. --arn is the maze's
   columns / rows (set per round by the script); the rest of the window is about 232px tall and 82px wide. */
.window {
  --arn: 1.7368;
  box-sizing: border-box;
  width: min(100%, 1240px, max(300px, calc((100vh - 232px - var(--hdr)) * var(--arn) + 82px)));
  display: flex;
  flex-direction: column;
  background: var(--hk-win);
  color: var(--hk-ink);
  color-scheme: dark;
  line-height: 1.45;   /* the prototype's text rhythm (the site's body uses 1.5) */
  border: 1px solid var(--hk-edge);
  border-radius: 12px;
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
@supports (height: 100dvh) {
  .window { width: min(100%, 1240px, max(300px, calc((100dvh - 232px - var(--hdr)) * var(--arn) + 82px))); }
}
.window.is-opening { animation: win-in 0.22s ease-out; }
.window.is-closing { animation: win-out 0.16s ease-in forwards; pointer-events: none; }

.titlebar {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px 48px 10px;
}
.title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 17px/1 "Michroma", "Arial Black", Impact, sans-serif;
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.title svg { flex: none; color: var(--hk-icon); }
.icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hk-muted);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--hk-red); color: #fff; }

/* ---------- The board ---------- */
.board-wrap { flex: none; padding: 0 14px; }
.board {
  --cell: 40px;
  position: relative;
  padding: 24px 26px;
  border-radius: 8px;
  background: var(--hk-board);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.board.is-grab { cursor: pointer; }
.board.is-play { cursor: crosshair; }
.maze {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ar, 33 / 19);
}
.maze canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* GET READY: dims the maze until the green dot is pressed. Presses go through to the board. */
.ready {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(8px, calc(var(--cell) * 0.3), 14px);
  padding: 16px;
  border-radius: 8px;
  background: var(--hk-scrim);
  text-align: center;
  pointer-events: none;
}
.ready-icon {
  width: clamp(26px, calc(var(--cell) * 1.1), 46px);
  height: auto;
  color: var(--hk-icon);
}
.ready-big {
  margin: 0;
  font: 400 clamp(18px, calc(var(--cell) * 0.92), 38px)/1 "Michroma", "Arial Black", Impact, sans-serif;
  -webkit-text-stroke: 0.035em currentColor;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hk-ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.ready-small {
  margin: 0;
  max-width: 100%;
  font: 400 clamp(9px, calc(var(--cell) * 0.3), 12px)/1.6 "Michroma", "Arial Black", Impact, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--hk-muted);
}

/* A ring over the green dot so it stands out through the dimmed maze */
.start-ring {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid var(--hk-green);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--hk-green-glow);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.start-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--hk-green);
  border-radius: 50%;
  animation: ring-out 1.6s ease-out infinite;
}

/* CLEARED / FAILED / TIME UP over the middle of the maze */
.hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hud-box {
  display: grid;
  justify-items: center;
  gap: calc(var(--cell) * 0.2);
  padding: calc(var(--cell) * 0.4) calc(var(--cell) * 0.8);
  border: 1px solid var(--hk-edge);
  border-radius: 8px;
  background: rgba(10, 10, 12, 0.88);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.hud-big {
  font: 400 clamp(16px, calc(var(--cell) * 0.78), 30px)/1 "Michroma", "Arial Black", Impact, sans-serif;
  -webkit-text-stroke: 0.04em currentColor;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hud-big.is-bad { color: var(--hk-red-hot); }
.hud-big.is-ok { color: var(--hk-green); }
.hud-small {
  font: 700 clamp(10px, calc(var(--cell) * 0.32), 13px)/1.2 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hk-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Time remaining ---------- */
.time {
  display: grid;
  gap: 7px;
  padding: 12px 14px 0;
}
.time-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.time-label {
  font: 700 11px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hk-muted);
}
.time-left {
  font: 400 13px/1 "Michroma", "Arial Black", Impact, sans-serif;
  color: var(--hk-ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.time-left.is-urgent { color: var(--hk-red-hot); }
.time-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--hk-track);
  overflow: hidden;
}
.time-fill {
  height: 100%;
  background: var(--hk-red);
  transform-origin: left center;
  will-change: transform;
}
.time-fill.is-urgent { animation: urgent 0.8s ease-in-out infinite; }

/* ---------- Footer: message, best, leaderboard status, end-of-round actions ---------- */
.footer {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 64px;
  padding: 12px 14px 14px;
}
.readout { display: grid; gap: 3px; flex: 1 1 220px; min-width: 0; }
.message { margin: 0; font-weight: 600; color: var(--hk-ink); }
.best {
  font: 600 11px/1.3 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hk-muted);
  font-variant-numeric: tabular-nums;
}
/* "· won 12 of 30 · 40%": this device's rounds that cleared, kept on one line */
.best-win { white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
/* Leaderboard status after a round: saving, saved and rank, held for review, not saved, log in, or a
   phone maze (not ranked) */
.lb-note {
  flex: 0 1 auto;
  max-width: 42ch;
  margin: 0 6px 0 0;
  font: 600 12px/1.35 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--hk-muted);
  text-wrap: pretty;
}
.lb-note.is-saved { color: var(--hk-green); }
.lb-note.is-held { color: var(--hk-amber); }
.lb-note.is-failed { color: var(--hk-red-hot); }
.lb-note a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.lb-note.is-guest a { color: var(--hk-amber); }
.btn {
  font: 700 13px/1 "Figtree", system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--hk-red);
  border-radius: 8px;
  background: var(--hk-red);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.btn:hover { background: var(--hk-red-hot); border-color: var(--hk-red-hot); }
.btn:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--hk-ink); border-color: var(--hk-edge); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--hk-muted); }
.btn:focus-visible,
.icon-btn:focus-visible,
.lb-note a:focus-visible { outline: 2px solid var(--hk-focus); outline-offset: 2px; }

@keyframes ring-out { 0% { opacity: 0.9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes urgent { 50% { opacity: 0.45; } }
@keyframes win-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes win-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* Short screens: the footer can wrap to two rows once the leaderboard status shows, so budget for it */
@media (max-height: 612px) {
  .window { width: min(100%, 1240px, max(300px, calc((100vh - 259px - var(--hdr)) * var(--arn) + 82px))); }
}
@supports (height: 100dvh) {
  @media (max-height: 612px) {
    .window { width: min(100%, 1240px, max(300px, calc((100dvh - 259px - var(--hdr)) * var(--arn) + 82px))); }
  }
}

/* Phones */
@media (max-width: 480px) {
  .title { font-size: 14px; letter-spacing: 0.16em; }
  .window { width: min(100%, max(300px, calc((100vh - 250px - var(--hdr)) * var(--arn) + 40px))); }
  .board-wrap { padding: 0 8px; }
  .board { padding: 10px; }
  .time { padding-inline: 10px; }
  .footer { padding-inline: 10px; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
  .lb-note { flex-basis: 100%; max-width: none; margin: 0 0 2px; }
}
@supports (height: 100dvh) {
  @media (max-width: 480px) {
    .window { width: min(100%, max(300px, calc((100dvh - 250px - var(--hdr)) * var(--arn) + 40px))); }
  }
}
/* The smallest phones: keep the title clear of the close button */
@media (max-width: 360px) {
  .title { gap: 8px; font-size: 12px; letter-spacing: 0.12em; }
}

/* Landscape phones: the timer and footer move beside the board */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
  .desk { padding-block: 8px; }
  .window {
    width: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(170px, 230px);
    grid-template-rows: auto auto 1fr;
  }
  .titlebar { grid-column: 1 / -1; box-sizing: border-box; height: 36px; padding-block: 0; }
  .board-wrap { grid-column: 1; grid-row: 2 / span 2; padding: 0 0 10px 10px; }
  .board { padding: 10px 12px; }
  .maze { width: min(calc((100vh - 94px - var(--hdr)) * var(--arn)), calc(100vw - 298px)); }
  .time { grid-column: 2; grid-row: 2; padding-top: 0; }
  .footer { grid-column: 2; grid-row: 3; align-content: end; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
  .lb-note { flex-basis: 100%; max-width: none; margin: 0 0 2px; }
}
@supports (height: 100dvh) {
  @media (orientation: landscape) and (max-height: 540px) and (min-width: 560px) {
    .maze { width: min(calc((100dvh - 94px - var(--hdr)) * var(--arn)), calc(100vw - 298px)); }
  }
}

/* Windows High Contrast: colours get replaced, so keep the bar and ring visible */
@media (forced-colors: active) {
  .time-fill { background: Highlight; }
  .start-ring, .start-ring::after { border-color: Highlight; }
}

/* Reduced motion: only decoration stops. The round's clock and the line are the game and run as usual. */
@media (prefers-reduced-motion: reduce) {
  .window.is-opening,
  .window.is-closing,
  .time-fill.is-urgent { animation: none; }
  .start-ring::after { display: none; }
  .btn, .icon-btn, .time-left { transition: none; }
}