/* ════════════════════════════════════════════════════════════════════════
   Cascade — satisfying / juicy / FULL-SCREEN.
   Every screen is a flex/grid column that fills 100dvh edge-to-edge: no dead
   space (CEO directive: "maximize all screen space"). Portrait, iPhone-SE-safe,
   safe-area aware. The board is sized as large as the width allows and the
   layout distributes the rest so it always reads as designed, never floating.
   ════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/fredoka-500.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/fredoka-600.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/fredoka-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/nunito-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('./assets/fonts/nunito-800.woff2') format('woff2'); }

:root {
  --bg-0: #24104f;          /* candy grape */
  --bg-1: #7b5be8;
  --ink: #fff9ff;
  --ink-dark: #2c1a55;
  --ink-soft: #7c6aa8;
  --muted: rgba(255,255,255,.86);
  --faint: rgba(255,255,255,.62);
  --accent: #ff4d8d;        /* candy pink */
  --accent-deep: #d9367b;
  --accent-2: #2fd08a;      /* mint */
  --accent-2-deep: #14b274;
  --accent-3: #ffc93c;      /* gold */
  --accent-4: #8b5cf6;      /* violet */
  --accent-5: #4dd0ff;      /* sky */
  --tangerine: #ff8a3d;
  --panel: rgba(255,255,255,.32);
  --panel-strong: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,242,249,.78));
  --panel-bd: rgba(255,255,255,.52);
  --panel-shadow: rgba(78,22,92,.26);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tap: 48px;              /* >=44px tap targets */
  font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; }
/* The [hidden] attribute must always win over class-level display (e.g. .overlay{display:grid}). */
[hidden] { display: none !important; }
html, body {
  height: 100%; width: 100%;
  background:
    radial-gradient(circle at 50% -5%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(62,16,86,.18)),
    url("assets/art/cascade-candy-bg.png") center center / cover no-repeat,
    linear-gradient(165deg, #7b5be8 0%, #ff4d8d 55%, #ff8a3d 100%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  overscroll-behavior: none; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
#app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }

/* A screen is a full-height column. Side padding respects the notch; top/bottom
   add the safe-area inset. Each screen lays its zones out to fill the height. */
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column;
  padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 16px)
           calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px);
}
.screen.is-active { display: flex; }

/* ───────────────────────── BUTTONS ───────────────────────── */
.btn { display: flex; align-items: center; justify-content: center; flex-direction: column;
  min-height: var(--tap); padding: 12px 24px; border: 0; border-radius: 18px; font-size: 17px;
  font-family: Fredoka, Nunito, sans-serif; font-weight: 700; cursor: pointer;
  transition: transform .09s cubic-bezier(.2,.9,.25,1.4), filter .15s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.965); }
.btn-primary {
  color: #45102f;
  background: linear-gradient(180deg, #ffe7f1 0%, #ff6aa8 46%, var(--accent) 72%, var(--accent-deep) 100%);
  box-shadow:
    0 8px 0 #b8316e,
    0 18px 30px rgba(255,77,141,.34),
    inset 0 3px 0 rgba(255,255,255,.72),
    inset 0 -6px 0 rgba(150,30,70,.24);
}
.btn-primary:active { box-shadow: 0 3px 0 #b8316e, 0 10px 18px rgba(255,77,141,.30), inset 0 2px 1px rgba(255,255,255,.62); }
/* "End run" (no-moves + pause overlays). Lives only on the white .overlay-card, so it uses the
   dark ink — the old light --muted blended into the white card (CEO: "too blended in"). */
.btn-ghost { background: transparent; color: var(--ink-dark); box-shadow: none; font-weight: 700; min-height: 44px; }
.btn-ghost:active { filter: brightness(1.3); }

/* ───────────────────── SVG ICONS (no emoji in UI) ───────────────────── */
.svg-ico { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.svg-ico.flame { width: 17px; height: 17px; color: #ff9a4d; }
.svg-ico.star { width: 17px; height: 17px; color: var(--accent-3); }
.icon-btn .svg-ico { width: 25px; height: 25px; }
.chip-btn .svg-ico { width: 18px; height: 18px; }
.btn .svg-ico { width: 20px; height: 20px; margin-right: 2px; }
/* audio toggles (music / sfx): show one glyph at a time + dim when off */
.chip-btn .ico-off { display: none; }
.chip-btn.muted .ico-on { display: none; }
.chip-btn.muted .ico-off { display: inline-block; }
.chip-btn.muted { opacity: .55; }
.icon-btn .ico-off { display: none; }
.icon-btn.muted .ico-on { display: none; }
.icon-btn.muted .ico-off { display: inline-block; }
.icon-btn.muted { opacity: .62; }

/* ════════════════════════════ HOME ════════════════════════════
   3-zone column: brand (top) · animated hero board (flexible middle) ·
   CTA stack (bottom). Fills the whole screen — no empty void. */
#screen-home { justify-content: space-between; gap: 8px; text-align: center; }

.home-top { padding-top: 14px; flex: 0 0 auto; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.logo {
  font-family: Fredoka, Nunito, sans-serif; font-size: clamp(50px, 17vw, 92px); font-weight: 700; letter-spacing: 0; line-height: .88;
  background: linear-gradient(180deg, #ffffff 0%, #ffe4f2 34%, #ff7db3 68%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 #ffd8ec)
    drop-shadow(0 6px 0 #5b3fd0)
    drop-shadow(0 15px 28px rgba(50,10,60,.42));
}
.tagline { color: var(--muted); font-family: Fredoka, Nunito, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-shadow: 0 2px 8px rgba(70,14,80,.3); }

/* Hero: the animated candy-gem medallion fills the flexible middle. No framing box — the
   medallion swirls/pulses directly on the living background (CEO: the translucent box read
   tacky). The whole hero is the tap target for Stats (the standalone streak chip was removed). */
.home-hero { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; width: 100%; padding: 6px 0; position: relative; cursor: pointer; }
#home-board { width: min(78vw, 340px); height: min(78vw, 340px); display: block; filter: drop-shadow(0 18px 26px rgba(60,14,74,.22)); }

.home-bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 6px; }
.btn-play { width: min(86vw, 420px); gap: 1px; padding: 14px 24px; border-radius: 22px; }
.btn-play-label { font-size: 19px; font-weight: 700; letter-spacing: .4px; }
.btn-play-sub { font-size: 12px; font-weight: 700; opacity: .7; letter-spacing: .3px; }
/* Solved state (one board/day): the play button is hidden, so this glassy card is
   the terminal "come back tomorrow" centerpiece — confident mint "Solved today" over
   a muted live countdown. Sits where the play button was so the column reads balanced,
   not empty. Hidden via the [hidden] attribute (see the !important rule above). */
.home-solved {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 28px; border-radius: 20px;
  background: rgba(54,230,192,.10); border: 1px solid rgba(54,230,192,.30);
  box-shadow: 0 10px 24px rgba(70,16,84,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.home-solved-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .2px;
  color: #36e6c0; text-shadow: 0 1px 10px rgba(54,230,192,.35);
}
.home-solved-check .svg-ico { width: 20px; height: 20px; }
.home-countdown {
  font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .2px;
  color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums;
}
.home-controls { display: flex; gap: 10px; }
.chip-btn {
  display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.52); background: rgba(255,255,255,.28); color: var(--ink);
  border-radius: 999px; font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54), 0 9px 18px rgba(70,16,84,.14);
}
.chip-btn:active { transform: scale(.96); filter: brightness(1.2); }
/* Stateful "on" tint for toggle chips (e.g. reminder enabled) — subtle mint matching the accent. */
.chip-btn.is-on {
  border-color: rgba(54,230,192,.85);
  background: rgba(54,230,192,.20);
  color: #0f5f51;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 9px 18px rgba(54,230,192,.18);
}
.chip-icon-only { padding: 0; width: 46px; justify-content: center; }
.chip-ico { font-size: 17px; line-height: 1; }

/* ════════════════════════════ GAME ════════════════════════════
   Grid: header (auto) · board-stage (1fr, centers the board) · tray (auto).
   Fills 100dvh; the 1fr stage absorbs slack so the board is always centered
   and the tray is pinned to the bottom — never a void. */
/* Board-high layout (the proven puzzle pattern): header (top) · play-area (1fr,
   board pinned high & as large as the width allows) · game-bottom (stats + tray,
   pinned to the thumb zone). The animated background fills the space between.
   NOTE: scope the grid to .is-active — an unscoped `#screen-game{display:grid}`
   (ID specificity) would beat `.screen{display:none}` and render the game screen
   on top of home/results. Tighter side padding here so the board can be bigger. */
#screen-game {
  padding: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 8px)
           calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 8px);
}
#screen-game.is-active { display: grid; grid-template-rows: auto 1fr; gap: 6px; }

/* 3-column grid so the score is ALWAYS centered and the undo slot is reserved —
   no lopsided header and no jump when undo appears after the first placement. */
.game-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  width: 100%; max-width: 560px; margin: 0 auto; padding: 2px 2px 0;
}
.game-actions { display: flex; align-items: center; gap: 8px; min-width: var(--tap); }
.game-actions-left { justify-self: start; }
.game-actions-right { justify-self: end; justify-content: flex-end; }
.game-top > .score-block { grid-column: 2; }
.game-top > .game-actions-right { grid-column: 3; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); border: 0; background: var(--panel-strong);
  border: 1px solid rgba(255,255,255,.62); color: var(--ink-dark); border-radius: 15px;
  font-size: 26px; font-weight: 700; line-height: 1;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.76),
    inset 0 -4px 0 rgba(120,60,140,.12),
    0 12px 22px rgba(70,16,84,.22);
}
.icon-btn:active { transform: scale(.94); filter: brightness(1.2); }
.icon-btn-pause { color: var(--accent-2); }
.icon-btn-pause.is-active { background: rgba(54,230,192,.14); border-color: rgba(54,230,192,.34); }
.icon-btn-undo { color: var(--accent-3); }
.score-block { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.score-label { font-family: Fredoka, Nunito, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--faint); margin-bottom: 2px; }
.score-line { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; }
.score {
  font-family: Fredoka, Nunito, sans-serif; font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: linear-gradient(180deg, #fff, #ffeaa4 68%, var(--accent-3)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; transition: transform .12s cubic-bezier(.3,1.6,.5,1);
  filter: drop-shadow(0 3px 10px rgba(70,16,84,.28));
}
.score.pop { transform: scale(1.28); }
.timer-pill {
  min-width: 56px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.52);
  background: linear-gradient(180deg, #eafff6, #c4f7e2); color: var(--accent-2-deep); font-size: 13px; font-weight: 900;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.timer-pill.is-low { color: #fff; background: linear-gradient(180deg, #ff86a4, var(--accent) 56%, var(--accent-deep)); border-color: rgba(255,255,255,.44); }

/* Play group (Block-Blast pattern): board anchored high right under the SCORE,
   stats + tray pinned to the bottom thumb zone; the animated background breathes
   in the space between. Board high keeps SCORE visually attached to the board and
   maximizes the playfield. */
/* Board-high: board hugs the SCORE at the top (so SCORE "owns" the board, never
   floats detached), stats + tray pinned to the bottom thumb zone, the animated
   background breathing in the single zone between. */
.game-main {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 14px; min-height: 0; padding-top: 2px;
}
.game-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.coach {
  font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.3;
  padding: 8px 16px; max-width: 92%; border-radius: 14px;
  background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
}
.board-frame {
  position: relative; padding: 6px; border-radius: 22px;
  background:
    radial-gradient(circle at 18% 7%, rgba(255,201,60,.16), transparent 27%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.48);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -14px 30px rgba(80,20,90,.16),
    0 20px 42px rgba(70,16,84,.28);
}
#board {
  display: block; touch-action: none; border-radius: 16px;
  background:
    radial-gradient(115% 115% at 50% 0%, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(120% 120% at 50% 0%, rgba(73,42,132,.48), rgba(34,16,73,.72));
  /* As large as fits INSIDE the chrome: screen padding (16) + frame padding (12)
     + margin (2) = 30; capped by height so header + stats + tray always fit (SE-safe). */
  width: min(calc(100vw - 30px), calc(100dvh - 258px));
  height: min(calc(100vw - 30px), calc(100dvh - 258px));
}

/* Live stats strip under the board — fills the (inherent, square-board) slack
   with useful feedback that reinforces the satisfying-clear loop. */
.game-stats { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.stat {
  display: flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px;
  background: var(--panel-strong); border: 1px solid rgba(255,255,255,.56); color: var(--ink-dark);
  box-shadow: 0 10px 20px rgba(70,16,84,.16), inset 0 2px 0 rgba(255,255,255,.72);
}
.stat-ico { font-size: 16px; line-height: 1; }
.stat-val {
  font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--ink-dark);
  transition: transform .12s cubic-bezier(.3,1.6,.5,1);
}
.stat-val.pop { transform: scale(1.35); color: var(--accent); }
.stat-key { font-size: 10px; font-weight: 900; letter-spacing: 1px; color: var(--ink-soft); text-transform: uppercase; }

/* Tray: a defined panel spanning the width with 3 generous slots. */
.tray {
  width: 100%; max-width: 560px; margin: 0 auto; min-height: 116px;
  display: flex; align-items: center; justify-content: space-around; gap: 8px;
  padding: 12px 8px; border-radius: 22px;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,201,60,.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.48), 0 14px 28px rgba(70,16,84,.20);
}
.tray-slot {
  flex: 1; display: grid; place-items: center; min-height: 94px; border-radius: 16px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.tray-slot.empty { opacity: .35; }

/* No-moves overlay (covers the board stage). */
.overlay {
  position: absolute; inset: 0; background: rgba(58,18,84,.58);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  display: grid; place-items: center; z-index: 40; padding: 24px; border-radius: 20px;
}
.overlay-card {
  background: linear-gradient(180deg, #ffffff, #fff2f9); border: 1px solid rgba(255,255,255,.70);
  border-radius: 24px; padding: 28px 24px; width: min(86vw, 360px); text-align: center;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 56px rgba(40,10,50,.42), inset 0 2px 0 rgba(255,255,255,.9);
  color: var(--ink-dark);
}
.overlay-card h3 { font-size: 23px; font-weight: 900; }
.overlay-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.pause-card { border-color: rgba(54,230,192,.26); }

/* ════════════════════════════ RESULTS ════════════════════════════ */
/* Scrollable column: centers when the stack fits, but `safe center` falls back to
   top-align (never clips the score/back button) when it doesn't, and overflow-y lets
   the WATCH-AD button at the bottom always be reached on short phones (iPhone SE). */
#screen-results { justify-content: safe center; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Absolutely anchored back-to-home — outside the centered stack so it costs no vertical
   budget. Mirrors the in-game / stats .icon-btn. Safe-area aware. */
#btn-results-home {
  position: fixed; z-index: 3;
  top: calc(var(--safe-top) + 10px); left: calc(var(--safe-left) + 16px);
}
.results-wrap {
  text-align: center; display: flex; flex-direction: column; gap: 14px;
  align-items: center; width: 100%; max-width: 460px; flex: 0 0 auto;
}
.results-title { font-size: 28px; font-weight: 900; }
.results-scoreline { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.results-score {
  font-family: Fredoka, Nunito, sans-serif; font-size: clamp(52px, 18vw, 96px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  background: linear-gradient(180deg, #fff, #d9fff2 48%, var(--accent-2)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 20px rgba(47,208,138,.36));
}
.results-streak { color: var(--muted); font-weight: 700; font-size: 16px; }
/* Transient celebratory callout — gold candy pill, only shown on a personal-best
   official run. Hidden via the [hidden] !important rule above. Kept compact so
   the results screen never overflows on iPhone SE. */
.results-newbest {
  align-self: center; font-family: Fredoka, Nunito, sans-serif; font-weight: 900;
  font-size: 15px; letter-spacing: .2px; color: #5a3b00;
  padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a 0%, #ffd23f 52%, var(--accent-3) 100%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 6px 18px rgba(255,201,60,.42), inset 0 1px 0 rgba(255,255,255,.7);
  animation: newbest-pop .42s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes newbest-pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* Height-driven 9:16 so the WHOLE card always shows (never clips its score on
   short phones); width derives from height, capped so it never gets too wide. */
.clip-frame {
  height: clamp(180px, 40vh, 420px); aspect-ratio: 9 / 16; max-width: 78vw;
  border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.18); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.42); box-shadow: 0 18px 38px rgba(70,16,84,.28), inset 0 1px 0 rgba(255,255,255,.36);
}
.clip-frame video, .clip-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
#screen-results .btn-primary { width: min(82vw, 380px); }
#btn-again { flex-direction: row; gap: 8px; width: min(82vw, 380px); font-size: 14px; letter-spacing: .4px; }
#btn-again .svg-ico { margin-right: 0; width: 18px; height: 18px; }
.btn:disabled { opacity: .58; pointer-events: none; }
.ad-status {
  width: min(82vw, 380px); min-height: 28px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.20);
  color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.25;
}
.ad-status[data-state="busy"] { color: #dffdf5; border-color: rgba(54,230,192,.28); }
.ad-status[data-state="success"] { color: #dffdf5; border-color: rgba(54,230,192,.42); background: rgba(54,230,192,.10); }
.ad-status[data-state="error"] { color: #ffe1ef; border-color: rgba(255,94,168,.42); background: rgba(255,94,168,.10); }
.overlay-card .ad-status { width: 100%; }

/* ════════════════════════════ STATS ════════════════════════════
   Header row (back button left · centered title) over a scrollable column:
   a 2-up grid of glossy deep-purple value/label cards, a candy sparkline,
   and the (later-filled) achievements grid. SE-safe: no horizontal overflow. */
#screen-stats { gap: 12px; }
.stats-top {
  flex: 0 0 auto; display: grid; grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto; padding: 2px 0 4px;
}
.stats-top-spacer { width: var(--tap); height: 1px; }
.stats-title {
  grid-column: 2; text-align: center; font-family: Fredoka, Nunito, sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: 1px; color: var(--ink);
  text-shadow: 0 2px 10px rgba(70,14,80,.34);
}
/* Scroll container so tall content (cards + spark + achievements) is reachable
   on short phones without breaking the fixed-height app shell. */
.stats-scroll {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 8px;
}
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 80px; padding: 14px 10px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(73,42,132,.62), rgba(34,16,73,.72));
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.20), inset 0 -10px 24px rgba(20,8,46,.30), 0 12px 24px rgba(40,10,50,.28);
}
.stat-card-val {
  font-family: Fredoka, Nunito, sans-serif; font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #ffeaa4 70%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(70,16,84,.30));
}
.stat-card-key {
  font-family: Fredoka, Nunito, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--faint); text-align: center;
}
.stats-spark-wrap {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
#stats-spark { display: block; width: 100%; height: 120px; }
.stats-spark-cap {
  font-family: Fredoka, Nunito, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--faint); text-align: center;
}
/* Achievements grid — one non-interactive cell per milestone (all 8 always shown).
   Unlocked cells render full-strength; locked cells are desaturated + dimmed. Wrap
   grid stays readable on iPhone SE (320px) without horizontal overflow.
   Badge art: when the build stamps CASCADE_HAS_BADGES, .ach-badge-sprite shows a slice of
   the 3×3 badges.png sheet; otherwise .ach-badge renders the SVG chip fallback. */
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px;
}
.ach-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 7px; min-width: 0; padding: 12px 6px 11px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(73,42,132,.58), rgba(34,16,73,.70));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -8px 20px rgba(20,8,46,.26), 0 10px 20px rgba(40,10,50,.24);
}
.ach-badge {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(180deg, #ffe27a 0%, #ffd23f 50%, var(--accent-3) 100%);
  border: 1px solid rgba(255,255,255,.66);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 6px 14px rgba(255,201,60,.36);
}
.ach-badge .svg-ico { width: 24px; height: 24px; color: #5a3b00; }
/* Real candy-gem emblem from the 3×3 sprite sheet. The gems carry their own gloss + shape on
   transparent pixels, so drop the gold disc/ring/shadow and let the emblem stand on its own.
   inline style sets background-position per cell (col*50% / row*50%). */
.ach-badge-sprite {
  background: transparent center / 300% 300% no-repeat;
  background-image: url(assets/art/badges/badges.png);
  border-color: transparent; box-shadow: none;
}
.ach-label {
  font-family: Fredoka, Nunito, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.15;
  letter-spacing: .2px; color: var(--muted); text-align: center; overflow-wrap: anywhere;
}
/* Locked: muted + desaturated so progress reads at a glance (non-interactive). */
.ach-cell.locked { opacity: .5; }
.ach-cell.locked .ach-badge {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  filter: grayscale(1);
}
.ach-cell.locked .ach-badge .svg-ico { color: rgba(255,255,255,.7); }

/* ════════════════════ ACHIEVEMENT UNLOCK TOAST ════════════════════
   Floating glossy candy panel near the top, above all content. Slides + fades in
   on unlock, auto-dismisses (JS). Hidden via the [hidden] !important rule above.
   Centered + width-capped so it never overflows iPhone SE. */
.achievement-toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-14px);
  top: calc(var(--safe-top) + 14px); z-index: 80;
  width: min(92vw, 360px); display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fff2f9);
  border: 1px solid rgba(255,255,255,.72); color: var(--ink-dark);
  box-shadow: 0 22px 44px rgba(40,10,50,.40), inset 0 2px 0 rgba(255,255,255,.9);
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.achievement-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.ach-toast-row { display: flex; align-items: center; gap: 12px; }
.ach-toast-row .ach-badge { width: 40px; height: 40px; }
.ach-toast-row .ach-badge .svg-ico { width: 22px; height: 22px; }
.ach-toast-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ach-toast-head {
  font-family: Fredoka, Nunito, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent-deep);
}
.ach-toast-name {
  font-family: Fredoka, Nunito, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1;
  color: var(--ink-dark); overflow-wrap: anywhere;
}

/* Short viewports (iPhone SE 2/3 = 375×667, etc.): the board is width-bound so it
   can't shrink by height — claw back the few px by trimming the bottom chrome so
   the tray never overflows the screen. */
@media (max-height: 700px) {
  .game-main { gap: 8px; }
  .game-stats { gap: 8px; }
  .stat { padding: 6px 14px; }
  .tray { min-height: 92px; padding: 8px 8px; }
  .tray-slot { min-height: 76px; }
  .coach { padding: 6px 12px; font-size: 12px; }
  .stat-card { min-height: 70px; padding: 11px 8px; }
  .stat-card-val { font-size: 26px; }
  #stats-spark { height: 104px; }
  .ach-cell { padding: 10px 5px 9px; }
  .ach-badge { width: 40px; height: 40px; }
  .ach-badge .svg-ico { width: 21px; height: 21px; }
  /* Results: shrink the on-screen card preview + score and tighten gaps so the WHOLE
     stack (back / score / SHARE / WATCH-AD) fits a short phone without clipping. The
     preview is cosmetic only — the exported share card (clip.js) is unaffected. */
  .results-wrap { gap: 10px; }
  .results-title { font-size: 22px; }
  .results-score { font-size: clamp(40px, 13vw, 64px); }
  .clip-frame { height: clamp(150px, 28vh, 300px); }
}
/* Extra-short phones (e.g. iPhone SE 320×568, landscape-ish): tighten a touch more. */
@media (max-height: 600px) {
  .results-wrap { gap: 8px; }
  .results-score { font-size: clamp(36px, 12vw, 52px); }
  .clip-frame { height: clamp(132px, 24vh, 240px); }
}


/* Game Center daily standings — stats screen (replaces the old sparkline) */
.gc-standings { margin: 2px 0 4px; }
.gc-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 14px 14px 12px; }
.gc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gc-eyebrow { font: 800 11px/1 Nunito, system-ui, sans-serif; letter-spacing: .14em; color: rgba(255,255,255,.5); }
.gc-rank { font: 800 18px/1.1 Nunito, system-ui, sans-serif; color: #ffd23f; text-align: right; }
.gc-name { margin-top: 3px; font: 800 14px/1.2 Nunito, system-ui, sans-serif; color: #36e6c0; }
.gc-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.gc-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; font: 700 13px/1 Nunito, system-ui, sans-serif; color: rgba(255,255,255,.82); }
.gc-row.is-me { background: rgba(54,230,192,.16); color: #fff; }
.gc-rk { color: rgba(255,255,255,.45); }
.gc-row.is-me .gc-rk { color: #36e6c0; }
.gc-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-sc { font-variant-numeric: tabular-nums; }
.gc-empty { margin-top: 8px; font: 600 13px/1.45 Nunito, system-ui, sans-serif; color: rgba(255,255,255,.55); }
.gc-btns { margin-top: 12px; display: flex; gap: 6px; }
.gc-btn { flex: 1; min-height: 38px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); border-radius: 10px; font: 800 11px/1.1 Nunito, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; }
.gc-btn:active { background: rgba(54,230,192,.2); }