/* ============================================================
   Catstatic — the game
   Depends on css/styles.css for tokens and the button base, and on
   css/board.css for the leaderboard panel and the initials entry.
   Self-contained otherwise, matching how the other four games are built.
   ============================================================ */

: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:12px;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}

/* The charge meter is the game's main readout, so it gets a bar rather than a
   number: it is meant to be read out of the corner of your eye while you are
   watching the cat. The ticks say what each balloon colour costs, which saves
   a legend. */
.charge{margin-bottom:14px}
.charge-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.charge-label span{font-family:var(--font-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.charge-track{height:10px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border);overflow:hidden}
.charge-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#7dd8ff,#b48bff 55%,#ffd88a);
  transition:width .08s linear}
.charge-ticks{position:relative;height:14px;margin-top:4px}
.charge-ticks i{position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--font-head);font-size:.6rem;font-style:normal;font-weight:600;letter-spacing:.1em}

.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 drag game cannot let the browser take the gesture for panning, so this
     is `none` rather than the `manipulation` the tapping games use. */
  touch-action:none;
  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:50ch;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;color:var(--gold)}
.overlay .final-label{font-family:var(--font-head);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:18px}
.ov-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.note{margin-top:18px;color:var(--text-dim);font-size:.86rem;line-height:1.7;max-width:72ch}
.note b{color:var(--text)}

@media (max-width:640px){
  .game-main{padding-top:calc(var(--header-h) + 34px)}
  .game-wrap{padding:0 16px}
  /* Taller than it is wide on a phone, so there is room to skid a cat around
     without your thumb covering half the room. */
  canvas#stage{aspect-ratio:4/5}
  .overlay{padding:18px;border-radius:14px}
  .overlay p{font-size:.86rem;margin-bottom:14px}
  .hud{gap:14px}
  .stat strong{font-size:1.25rem}
}