/* ============================================================
   If I Fits I Sits — the game
   Depends on css/styles.css for tokens and the button base.
   Deliberately self-contained rather than sharing a stylesheet with
   cats.css: the two games only overlap on a handful of chrome rules, and
   pulling them into a common file would mean editing the live game's CSS
   for no gain. Worth revisiting when a third game turns up.
   ============================================================ */

:root { --gold: #ffd88a; }

.game-main { padding-top: calc(var(--header-h) + 56px); padding-bottom: 90px; }
.game-wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.game-head { margin-bottom: 26px; }
.game-head h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.08; letter-spacing: -.025em; margin-bottom: 14px;
}
.game-head p { color: var(--text-dim); font-size: 1rem; max-width: 64ch; }

.hud{display:flex;align-items:flex-end;gap:22px;margin-bottom:14px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat span{font-family:var(--font-head);font-size:.66rem;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}
.hud-spacer{flex:1}
.lives{display:flex;gap:3px;align-items:center;height:22px}
.life{width:18px;height:18px}
.life.gone{opacity:.18}

.stage-wrap{position:relative}
canvas#stage{display:block;width:100%;aspect-ratio:16/10;border:1px solid var(--border);border-radius:18px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(125,216,255,.05),transparent 60%),var(--surface);
  /* A held finger otherwise starts a text selection and a drag preview,
     which hijacks the tap. Same fix as the other game. */
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none}
canvas#stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.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:46ch;margin:0 auto 20px}
.overlay .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}
.overlay .final-label{font-family:var(--font-head);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:20px}

.note{margin-top:26px;padding-left:16px;border-left:2px solid var(--border);color:var(--text-faint);font-size:.88rem;max-width:74ch}
.note b{color:var(--text-dim);font-weight:500}
/* On a phone the game was 354x221 sitting 534px down the page: you had to
   scroll past the whole introduction to reach it, and then the page scrolled
   under your finger while you played. The intro comes off (the overlay
   explains the game anyway), the padding tightens, and the canvas gets a
   taller ratio, so the board lands on screen at a usable size. */
@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}
  .life{width:13px;height:13px}
  /* The board goes edge to edge on a phone. Twenty-four pixels of page
     padding is seven per cent of the vessel row, which is worth more to the
     game than the margin is. */
  .stage-wrap{margin:0 -12px;max-width:none}
  canvas#stage{aspect-ratio:1.42;border-radius:14px}
  .overlay{padding:18px;border-radius:14px}
  .overlay p{font-size:.86rem;margin-bottom:14px}
  .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 - 430px) * 16 / 10)); 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 - 232px) * 16 / 10)); }
}