/* case-play.css — THE ROUND. Case V10.
 *
 * Design law: docs/design/NIKOLEARN_DESIGN_CONSTITUTION.md. Owning JS: niko/games.js (gameShell at :190,
 * every `.prompt` / `.options` / `.opt` render site from :655 to :1679).
 *
 * WHY THIS FILE EXISTS. The 2026-08-22 journey walk measured the child's six unavoidable states and found
 * five of them at 0%: not one rule in any case-*.css matched anything on them. `play` is the worst of the
 * five, because it is not a screen a child passes through. It is the screen the product mostly IS. A child
 * meets a painted jungle banner, taps into the round, and the world stops at the banner: below it sat a
 * ~320px band of empty cream, a cream-on-cream question card, four flat white rectangles, an emoji owl
 * directly beneath the painted one, and a blue system ⏫.
 *
 * WHY IT IS ONE FILE AND NOT ONE PER SUBJECT. `.prompt` + `.options` + `.opt` is the SHARED anatomy of
 * every mode this app ships — math, counting, english, kings, shapes, money, clock, calendar, patterns,
 * reasoning, story, listen. About twenty-five render sites build the same three classes. So the round is
 * ONE case, and a fix here reaches every subject at once (§14 root-cause escalation). A per-subject copy
 * would be twenty-five chances to drift.
 *
 * WHY IT IS TOKENS AND NOT THE WARM HEXES case-alphabet.css USES. That file paints ONE fixed world and
 * hardcodes #2A1C12 on #FFFDF6 because the scene behind it never changes. The round is the opposite: it
 * renders under every theme in styles.css (sunlit, and the two cooler sets at :93 and :125). Copying the
 * alphabet world's literal hexes here would look correct in exactly one theme and wrong in the other two,
 * which is how a case layer becomes a regression. Everything below mixes from the live tokens instead.
 *
 * WHAT IT DELIBERATELY DOES NOT TOUCH. The READ-vs-PRESS law (styles.css:698): the question must not look
 * pressable and the answer must. This file STRENGTHENS both sides rather than flattening the gap — the
 * prompt gets seated deeper, the tiles get lifted higher. And every rule here excludes .correct / .wrong /
 * .dim, so answer feedback keeps its own colours: a case layer that eats the green tick is not a redesign,
 * it is a broken round.
 */

/* ── 1. THE TRACK. §2.4 „state must be visible". ─────────────────────────────────────────────────────
   The segmented track (styles.css:521) is a good mechanism reading almost nothing: `.bar` fills with
   --card-2, which on the sunlit theme is within a hair of the page behind it, so the pending blocks were
   invisible and the row said „1/5" in text and nothing in picture. The mechanism is untouched, only the
   contrast it is drawn with. */
.bar.segd{background:color-mix(in oklch,var(--ink) 13%,var(--card-2));
  box-shadow:inset 0 1px 2px color-mix(in oklch,var(--ink) 16%,transparent)}
.bar.segd > i{background:linear-gradient(90deg,color-mix(in oklch,var(--sun) 82%,var(--card)),var(--sun))}
.bar.segd::after{background:color-mix(in oklch,var(--sun) 80%,var(--card))}

/* ── 2. THE OWL SPEAKS, and it is the app's own owl. ─────────────────────────────────────────────────
   niko/journey.js:4 states the rule the app set for itself: the REAL owl (owl-logo.png), never the 🦉
   emoji, on every screen of the journey. The round broke it in the loudest possible place — the emoji sat
   directly below the painted owl in the toolbar, same screen, two different owls, one of them a system
   glyph the child's phone draws in its own house style. games.js now emits tutorFace(profile), the shared
   source at core.js:289, so a child who chose 🦊 still gets 🦊 and the default gets the painted bird.
   The line stops being grey chrome and becomes someone talking. */
.owl-why{display:flex;align-items:flex-start;gap:10px;
  background:linear-gradient(172deg,color-mix(in oklch,var(--sun) 17%,var(--card)),color-mix(in oklch,var(--sun) 8%,var(--card)));
  border-left-width:5px;border-left-color:color-mix(in oklch,var(--sun) 62%,var(--card-2));
  padding:12px 16px;font-size:.95rem;color:color-mix(in oklch,var(--ink) 88%,var(--muted));
  box-shadow:0 8px 18px -14px color-mix(in oklch,var(--ink) 60%,transparent)}
.owl-why .owl-face{flex:0 0 auto;margin-top:1px;
  filter:drop-shadow(0 2px 3px color-mix(in oklch,var(--ink) 30%,transparent))}

/* ── 3. THE QUESTION IS PAPER. ───────────────────────────────────────────────────────────────────────
   It was a cream card on a cream page, i.e. the one thing the child must READ had the weakest edge on the
   screen. Deeper tint, a real rim and a wider seat, so it separates from the page without borrowing the
   raised edge that means „push me". Plain `.prompt` on purpose: `.prompt.spell` and `.prompt.alpha-q`
   (styles.css:722) are more specific and keep their compact padding. */
.prompt{background:linear-gradient(172deg,color-mix(in oklch,var(--sun) 26%,var(--card)),color-mix(in oklch,var(--sun) 9%,var(--card)));
  border:1.5px solid color-mix(in oklch,var(--sun) 46%,var(--line));
  padding:clamp(20px,3.4vh,34px) 20px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),
             inset 0 -14px 24px -20px color-mix(in oklch,var(--ink) 70%,transparent),
             0 14px 26px -20px color-mix(in oklch,var(--ink) 60%,transparent)}
/* The numeral or word IS the question. It carried the body ink at body weight; it now carries the
   app's display face and a soft carve, the same idea as the alphabet world's 3D letter at a calmer
   amplitude, because here it must stay readable next to running Georgian text. */
.prompt .p-word{font-family:var(--f-display);color:color-mix(in oklch,var(--ink) 94%,var(--sun));
  text-shadow:0 1px 0 rgba(255,255,255,.65),0 2px 5px color-mix(in oklch,var(--ink) 26%,transparent)}
.prompt .p-word.en{font-family:var(--f-en)}
.prompt .p-word.num{font-weight:800;
  text-shadow:0 2px 0 rgba(255,255,255,.7),0 4px 10px color-mix(in oklch,var(--ink) 34%,transparent)}
.prompt .p-sub{color:color-mix(in oklch,var(--muted) 85%,var(--ink))}

/* ── 4. THE ANSWER IS THE ONE DOMINANT ACTION (§2.2). ────────────────────────────────────────────────
   Depth first, and for EVERY mode: this rule sets box-shadow only, so nothing that sizes its own tile
   (.opt.emoji, .shape-pic, .opt.letter, .yn-opts .opt) is disturbed. The exclusion list is the idiom
   styles.css:1896 already established — answered, ruled out and yes/no tiles own their own surface, and a
   later-loading layer must not eat them. */
.options .opt:not(.correct):not(.wrong):not(.dim),
.opt-list .opt:not(.correct):not(.wrong):not(.dim){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             var(--press) color-mix(in oklch,var(--ink) 26%,var(--line)),
             0 12px 22px -14px color-mix(in oklch,var(--ink) 62%,transparent)}
/* The lift is a promise, so pressing must still cash it. Without this the rule above would out-specify
   styles.css:802 and the tile would stop moving under a finger. */
.options .opt:not(.correct):not(.wrong):not(.dim):active,
.opt-list .opt:not(.correct):not(.wrong):not(.dim):active{transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 color-mix(in oklch,var(--ink) 26%,var(--line)),
             0 6px 12px -10px color-mix(in oklch,var(--ink) 62%,transparent)}
/* Surface, only where the tile does not already own a considered one. .cnum is the counting jungle's
   number tile (V07, the case this project set as its own standard) and .yn-* carry semantic green/red. */
.options .opt:not(.correct):not(.wrong):not(.dim):not(.cnum):not(.yn-yes):not(.yn-no){
  background:linear-gradient(178deg,var(--card),color-mix(in oklch,var(--sun) 9%,var(--card)));
  border-color:color-mix(in oklch,var(--sun) 34%,var(--line))}

/* ── 5. THE DEAD BAND, and why the answer grid is what fills it. ─────────────────────────────────────
   Measured at 390x844: about 320px of empty cream between the toolbar and the question. The mechanism is
   NB-243's class — `.game` is flex:1 and #garea centres (styles.css:692) — so short content leaves a gap
   wherever you anchor it: top-anchored moves the emptiness to the bottom, centred splits it in two. The
   emptiness is the symptom; the content being small is the defect. A 7-year-old answering with a thumb
   deserves that space, so the ANSWERS take it.

   The first attempt sized the tiles with `min-height:clamp(72px,13vh,104px)` and that was wrong in a way
   worth keeping written down: vh is the whole viewport, and the tiles do not get the whole viewport. On a
   375x667 phone about 200px is already spent on the lesson strip, the toolbar and the owl's line before
   the first tile is drawn, so 13vh asked for 87px per tile when there was room for about 70, and the
   round overflowed by 12px — measured, one variable, layer off vs on. A clamp cannot know that; it is a
   guess dressed as arithmetic.

   So the tiles are not sized against the viewport at all. The grid claims the leftover flex space of
   #garea and splits it into equal rows, which means the answers are exactly as large as the phone can
   afford, at every geometry, with no number for anyone to tune. It also retires the dead band as a
   side effect: once a child of #garea takes the slack, there is no free space left for justify-content
   to centre, so the PI-183 rule at styles.css:692 stays exactly as written and quietly stops mattering. */
#garea{gap:clamp(12px,2.2vh,20px)}
#garea > .options{flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch;gap:clamp(10px,3vw,14px)}
/* the floor only. The ceiling is whatever the phone has left. */
.opt.num,.opt.cnum{min-height:64px;font-size:clamp(1.5rem,7vw,2.05rem);font-family:var(--f-display);font-weight:800}

/* ── 6. „გამირთულე" — the last system glyph on the screen. ───────────────────────────────────────────
   It read „⏫ გამირთულე": a blue OS emoji on a warm page, drawn by the phone, not by us. C8 exempts emoji
   in utility chrome so this is craft, not a violation — but it was the single coldest pixel in the round.
   Drawn here instead, in the page's own ink, and lifted off 44px onto the 48px floor the rest of the app
   holds. */
.btn-quiet.harder{display:inline-flex;align-items:center;gap:9px;min-height:48px;
  color:color-mix(in oklch,var(--ink) 62%,var(--muted));
  border-color:color-mix(in oklch,var(--sun) 40%,var(--line));
  background:color-mix(in oklch,var(--sun) 7%,transparent)}
.btn-quiet.harder::before{content:'';width:13px;height:13px;flex:0 0 auto;
  border-left:2.5px solid currentColor;border-top:2.5px solid currentColor;
  border-radius:2px;transform:rotate(45deg) translate(1px,1px)}

/* ── 7. Narrow phones. §8.3 names 320/375/390/430, and only the CHROME gives way here.
   This block first also clamped the tiles to 56px, which was a fix aimed at the wrong phone: the
   overflow was measured at 375, and 375 is not ≤359, so the clamp never touched the defect it was
   written for. Its only real effect was to shrink the answers on the one phone with the least room —
   measured, 320x640, tile 67px before the layer and 56px after it. The tiles keep the section-5 floor
   at every width; what shrinks is the question's padding and the owl's line, which cost the child
   nothing to read. */
@media (max-width:359px){
  .prompt{padding:16px 14px}
  .owl-why{padding:10px 12px;font-size:.88rem}
}