/* ============================================================
   Hat in the Cat — the game
   Depends on css/styles.css for tokens and the button base,
   and css/board.css for the leaderboard panel.
   ============================================================ */

:root { --gold: #ffd88a; --warn: #ff9d9d; }

.game-main { padding-top: calc(var(--header-h) + 56px); padding-bottom: 90px; }
.game-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.game-head { margin-bottom: 24px; }
.game-head h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.07; letter-spacing: -.025em; margin-bottom: 13px;
}
.game-head p { color: var(--text-dim); font-size: 1rem; max-width: 64ch; }
.hud{display:flex;align-items:flex-end;gap:22px;margin-bottom:11px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat span{font-family:var(--font-head);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.stat strong{font-family:var(--font-head);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.stat-time strong{color:var(--accent)}
.stat-time.low strong{color:var(--warn)}
.hud-spacer{flex:1}
.timer-track{height:4px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:14px}
.timer-fill{height:100%;width:100%;background:var(--gradient);border-radius:999px}
.timer-fill.low{background:linear-gradient(120deg,#ffd88a,#ff9d9d)}

.stage-wrap{position:relative}
canvas#stage{display:block;width:100%;aspect-ratio:4/3;border:1px solid var(--border);border-radius:18px;
  background:radial-gradient(130% 90% at 50% 0%,rgba(125,216,255,.05),transparent 62%),var(--surface);
  cursor:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
canvas#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.dragging,body.dragging *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important}

.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:28px;border-radius:18px;
  background:rgba(10,13,24,.9);backdrop-filter:blur(5px);text-align:center;overflow-y:auto}
.overlay[hidden]{display:none}
.overlay h2{font-family:var(--font-head);font-size:clamp(1.4rem,4vw,2rem);letter-spacing:-.02em;margin-bottom:12px}
.overlay p{color:var(--text-dim);font-size:.94rem;max-width:48ch;margin:0 auto 20px}
.final{font-family:var(--font-head);font-size:3.2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.final-label{font-family:var(--font-head);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px}
.tally{display:grid;gap:5px;margin:0 auto 20px;max-width:280px;text-align:left}
.tally div{display:flex;justify-content:space-between;font-size:.86rem;color:var(--text-dim)}
.tally b{font-family:var(--font-head);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}

/* The key sits above the board, not below it. Underneath, it was pushed off
   screen by the board itself, so you could see the timer or the key but never
   both — and the key is what tells you a shining thing is worth grabbing. */
.legend{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.lg{flex:1 1 auto;min-width:0;padding:6px 10px 6px 7px;border:1px solid var(--border);border-radius:9px;
  background:var(--bg-alt);display:flex;gap:8px;align-items:center}
.lg canvas{flex:0 0 auto;width:26px;height:26px}
.lg b{display:block;font-family:var(--font-head);font-size:.74rem;font-weight:600;line-height:1.2;white-space:nowrap}
.lg span{font-size:.66rem;color:var(--text-faint);line-height:1.2;display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.note{margin-top:24px;padding-left:16px;border-left:2px solid var(--border);color:var(--text-faint);font-size:.87rem;max-width:74ch}
.note b{color:var(--text-dim);font-weight:500}

/* Same reasoning as the other game: get the board on screen at a usable size
   on a phone rather than parked below a screenful of introduction. */
@media (max-width:640px){
  .game-main{padding-top:calc(var(--header-h) + 16px);padding-bottom:44px}
  .game-wrap{padding:0 12px}
  .game-head{margin-bottom:12px}
  .game-head h1{font-size:1.5rem;margin-bottom:0}
  .game-head .eyebrow{margin-bottom:6px}
  .game-head p{display:none}
  .hud{gap:14px;margin-bottom:8px}
  .stat strong{font-size:1.2rem}
  /* Square board, so the width cap is also the height cap — on a short phone
     that is what keeps the key, the timer and the whole cat on one screen. */
  .stage-wrap{max-width:min(100%, calc(100dvh - 292px));margin:0 auto}
  canvas#stage{aspect-ratio:1/1;border-radius:14px}
  .overlay{padding:18px;border-radius:14px}
  .overlay p{font-size:.86rem;margin-bottom:14px}
  .legend{gap:5px;margin-bottom:9px}
  .lg{flex:1 1 44%;padding:5px 7px 5px 5px;gap:6px}
  .lg canvas{width:22px;height:22px}
  .lg b{font-size:.68rem}
  .lg span{font-size:.6rem}
  .note{margin-top:18px;font-size:.82rem}
}

/* Keep the whole board on screen at once. At 1280x720 the canvas was 624px
   tall with only ~347px of room below the timer, so playing meant scrolling —
   and scrolling took the timer off screen mid-round, which is no way to run a
   game against a clock. The stage is capped to what the viewport can show,
   and on a short window the introduction stands down to give it more room. */
@media (min-width: 641px) {
  .stage-wrap { max-width: min(100%, max(430px, (100dvh - 500px) * 4 / 3)); margin: 0 auto; }
}
@media (min-width: 641px) and (max-height: 860px) {
  .game-main { padding-top: calc(var(--header-h) + 26px); padding-bottom: 56px; }
  .game-head { margin-bottom: 14px; }
  .game-head h1 { font-size: 1.7rem; margin-bottom: 0; }
  .game-head p { display: none; }
  .stage-wrap { max-width: min(100%, max(430px, (100dvh - 284px) * 4 / 3)); }
}