/* Learning Gem - game screens "Storybook" pass (design slice 5,
   lg-v136). Visual layer only, loaded after subj-lg1.css.
   game-lg1.js puts .lgg-root on the shared activity shell's
   root and html.lg-game on the document while - and only
   while - an activity page (#/activity/...) is the screen
   shown, and tags the two pieces of shared framing inside
   main: .lgg-intro on the intro screen, .lgg-result on the
   result screen and .lgg-result-card on its score card. Every
   rule in the first part of this sheet is scoped to those
   tags, so no other screen can be touched. The FIX ROUND
   section at the end is the one deliberate, documented
   exception, and it is narrow in a different way: it recolours
   only (a) small label and heading texts that the engines
   print DIRECTLY on the page background - progress, timer,
   score, round and hint lines, and the title lines of the
   engines' own start and end screens - which the navy sky
   left unreadable in the app's muted greys and deep hues, and
   (b) two interactive states of the default quiz engine's
   answer tiles (hover, and the dim applied to unchosen tiles
   after an answer) whose app paint is a translucent tint and
   a dropped background that only ever worked over a light
   page. Nothing else in any playing area is matched: no
   resting tile, question card, input, picture or canvas, and
   no colour that carries lesson meaning or marks a state
   (correct/wrong greens and reds keep the app's exact paint,
   proven in game-test.js). The games' engines otherwise keep
   the app's own colours throughout.

   What the frame gains, in the established storybook recipe:
   - The page's own background layer is repainted to the deep
     navy sky the welcome screen, dashboard, shop and subject
     pages already share (the identical gradient recipe), so a
     game is played under the same sky as everything else. The
     white cards the engines paint their questions on stay
     exactly as they are and read on the navy the way the
     shop's treasure cards do.
   - The shared header bar - Back button, activity title and,
     while playing, the question progress - deepens to the
     dashboard's navy bar with a gold hairline under it; the
     Back button's muted text lifts to the dashboard's
     #aeb8e8, and the "Question N of M" progress line under
     the bar takes the full page ink (round 2: at the muted
     value the small progress line still read faint, exactly
     like the engines' own small rows).
     The progress bar itself keeps the app's own gold track
     and violet fill, which already read clearly on the navy.
   - The intro screen: its title takes the lifted page ink,
     its muted lines (the description, the how-gems-are-earned
     lines, the standards line) lift with it, the activity
     icon tile gains a gold rim, and the big Start button turns
     to the shop's gold with navy text (the pairing the shop
     tabs proved at better than 7:1; the emerald it replaces
     carried white at under 3:1).
   - The result screen: its heading takes the page ink, the
     score card becomes a treasure card (the warm light card
     with the dashboard's violet ink and a gold rim, its muted
     Score line deepening to the shop's dark slate), Play
     Again takes the same gold as Start, and More Activities
     becomes dark glass with a gold rim, the subject pages'
     grade-pill treatment.
   - The celebration and points overlays at the end of a game
     are already dark, self-contained designs; they are not
     restyled and their behaviour is untouched.

   The chrome is one calm navy-and-gold for every subject: a
   game's subject still shows in the places the app itself
   puts it (the header's subject icon, the intro's subject
   pill), which this sheet does not touch.

   This sheet adds no motion of its own at all - no keyframes,
   nothing that loops or moves - so there is nothing new to
   gate for reduced motion; the only motion on these screens
   remains the app's own. Contrast is proven, not eyeballed:
   game-test.js runs the cascade method over the real
   stylesheets, checks background-image winners as well as
   colours (the lg-v134 lesson), proves every chrome text
   element at 4.5:1 or better on its painted background, and
   proves the playing area's own elements keep byte-identical
   winners with and without this sheet loaded. Colour,
   background, border and shadow only - no layout geometry,
   no behaviour. */

/* The sky and the page base: same recipe as the dashboard's,
   the shop's and the subject pages'. */
html.lg-game body { background-color: #0b1130; }
.lgg-root { background-color: #0b1130; }
html.lg-game #root .lgg-root > .fixed.inset-0.-z-10 > div:first-child {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(124, 58, 237, .34), rgba(124, 58, 237, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(13, 148, 136, .26), rgba(13, 148, 136, 0) 60%),
    linear-gradient(180deg, #0b1130 0%, #141c42 46%, #172554 100%) !important;
}

/* The shared header bar: the dashboard's navy bar with the
   gold hairline. Its title and subject icon inherit the
   lifted ink set here; the Back button's muted text lifts
   to the dashboard's muted-on-navy, and the Back button
   keeps that clarity when hovered instead of dropping to
   the app's dark foreground. (The progress row the shell
   prints under the bar while playing is a small playing
   label, not chrome: it takes the page ink via its own
   rule in the fix-round section below.) */
html.lg-game #root .lgg-root > header {
  background: linear-gradient(90deg, #2b1a6d 0%, #1b2350 55%, #0f2f52 100%);
  border-bottom: 2px solid rgba(245, 183, 0, .45);
  color: #eef1ff;
}
html.lg-game #root .lgg-root > header .text-muted-foreground { color: #aeb8e8; }
html.lg-game #root .lgg-root > header button[data-testid="button-back"]:hover { color: #eef1ff; }

/* The intro screen: title in the storybook display font and
   the lifted page ink; its muted lines lift the same way.
   (The subject pill keeps the subject's own colours, the
   gem-tier pills keep their amber, and the grown-ups'
   learning-goals panel keeps its own light card - none of
   them are touched.) */
html.lg-game #root .lgg-intro { color: #eef1ff; }
html.lg-game #root .lgg-intro h1 { font-family: 'Fredoka', 'Nunito', sans-serif; }
html.lg-game #root .lgg-intro .text-muted-foreground { color: #aeb8e8; }
/* The activity icon tile: its own light tile, gained a gold
   rim and a deeper resting shadow so it sits in the sky like
   the landing's framed pictures. */
html.lg-game #root .lgg-intro > div.w-28.h-28 {
  border-color: rgba(245, 183, 0, .6);
  box-shadow: 0 0 0 3px rgba(245, 183, 0, .28), 0 12px 26px rgba(3, 6, 20, .45);
}

/* The shared primary buttons - Start on the intro, Play
   Again on the result: the shop's gold with navy text, the
   pairing proven on the shop's tabs and Buy buttons, with a
   gold-deep rim and a calm navy shadow in place of the old
   coloured glows. */
html.lg-game #root .lgg-root [data-testid="button-start-game"],
html.lg-game #root .lgg-root [data-testid="button-play-again"] {
  background-color: #f5b700;
  background-image: linear-gradient(135deg, #f7c948, #f5b700, #f59e0b);
  color: #172554;
  border-color: rgba(180, 83, 9, .55);
  box-shadow: 0 8px 20px rgba(3, 6, 20, .35);
}

/* The result screen: heading in the display font and the
   lifted ink (the mascot and its speech bubble keep their
   own white bubble, untouched). */
html.lg-game #root .lgg-result { color: #eef1ff; }
html.lg-game #root .lgg-result h2 { font-family: 'Fredoka', 'Nunito', sans-serif; }
/* The score card becomes a treasure card: the warm paper
   gradient and violet ink of the shop's and subject pages'
   cards, a gold rim and ring, and its muted Score line in
   the shared dark slate. The percentage keeps the app's own
   violet, the gem row keeps its gold and grey. */
html.lg-game #root .lgg-result-card {
  color: #37305e;
  background-color: #fff8e1;
  background-image: linear-gradient(180deg, #fffdf7 0%, #fff3d6 100%);
  border-color: rgba(245, 183, 0, .65);
  box-shadow: 0 0 0 2px rgba(245, 183, 0, .45), 0 10px 26px rgba(3, 6, 20, .4);
}
html.lg-game #root .lgg-result-card .text-muted-foreground { color: #5b5885; }
/* More Activities, the result's secondary button: dark
   glass with a gold rim and the lifted ink - the subject
   pages' grade-pill treatment - instead of the pale outline
   it wore on the light page. */
html.lg-game #root .lgg-root [data-testid="button-more-activities"] {
  background-color: rgba(9, 13, 36, .45);
  color: #eef1ff;
  border-color: rgba(245, 183, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* ============================================================
   FIX ROUND (lg-v136, after the preview play-test)
   Two defects, both from the navy sky sitting under elements
   the engines paint for a light page. Colour only, as
   everywhere in this sheet; each rule names the engine and
   the exact element it lifts, and game-test.js proves every
   lifted text at 4.5:1 or better on the worst sky zone (3:1
   for the one large bold feedback line), proves the elements
   that must NOT move (card interiors, state colours, the
   correct tile) keep byte-identical winners, and audits this
   section selector by selector.

   Defect 1 - label and heading texts printed directly on the
   sky. The engines set these in the app's muted grey
   (--muted-foreground, a mid lavender-grey), in Tailwind
   greys, or in deep hues, all of which fall to roughly
   1.4-3.6:1 on the navy. Each is lifted to the page ink
   #eef1ff - title lines and small labels alike; two
   engine-accented small texts step within their own hue
   instead (the picture-match end heading, the writing
   prompt's hint toggle), and the default engine's two rose
   feedback lines step within rose. Wording, size and
   layout are untouched, and any text sitting on a card,
   chip, tinted box or other surface of its own is NOT here:
   the selectors are built from the engines' real DOM chains
   so they can only land on the on-sky element named.

   ROUND 2 (still lg-v136): round 1 lifted the small labels
   only to the chrome's muted ink #aeb8e8. That cascade was
   provably correct - a real-Chromium audit of every chain
   below, rebuilt from the bundle's verbatim class strings,
   computed exactly #aeb8e8 for each label (see the round-2
   note in game-test.js) - but #aeb8e8 is a pale
   lavender-grey, and at 12-14px over the gradient sky it
   still READ as faint muted grey in the browser play-test.
   The small labels therefore take the full page ink too
   (about 11.5:1 on the worst sky zone). Only the colour
   value changed; no selector moved.

   ROUND 2, SECOND PASS (still lg-v136): the value sweep
   above reached only the rules in this section - every one
   of them scoped to main - and one small label lives
   outside main: the shared shell's own progress row (the
   default engine's "Question N of M / 💎 f/p" line, the
   "Rhyming Words" line of the play-test note). Verbatim
   from the bundle, that row is the header element's second
   child, in its own max-w-3xl block under the bar, so its
   only lift was the header's chrome rule and it stayed at
   #aeb8e8. It takes the page ink via the first rule below.
   The Chromium audit's skeleton now carries the shell
   header as well as main, with a verbatim spec for this
   row, so the blind spot cannot recur. The Back button in
   the same header is chrome, not a playing label, and
   keeps #aeb8e8. */

/* The shell's own progress row: the "Question N of M /
   💎 f/p" line the shared shell prints while playing, in
   the header's own block under the bar (see the second-pass
   note above). No other element in the header carries both
   of these classes - the bar above it is items-center and
   wears no muted class, the Back button is not
   justify-between - so this lands on the progress row
   only. */
html.lg-game #root .lgg-root > header .flex.justify-between.text-muted-foreground { color: #eef1ff; }

/* Phonics (DX) and times-tables (WX) progress rows: the
   "N/8 questions / 💎 N correct" and "3× Table — Q N/M / 💎 N"
   lines, the row the two engines share shape and muted
   class in. (The shell header's twin row is inside header,
   not main, and keeps the header rule above.) */
html.lg-game #root .lgg-root main .flex.justify-between.text-muted-foreground { color: #eef1ff; }
/* Times-tables timer row: the clock icon and the seconds
   count inside WX's header block (both wear the muted class
   when the count is not in its red low-time state, which
   keeps the app's red). */
html.lg-game #root .lgg-root main .w-full.space-y-2 .text-muted-foreground { color: #eef1ff; }
/* Default quiz engine: the spelling hint line ("Hint: ...")
   under the question card. */
html.lg-game #root .lgg-root main .space-y-3 > p.text-muted-foreground { color: #eef1ff; }
/* Word search (VX): the "N of M words found" count beside
   the Clear button. */
html.lg-game #root .lgg-root main p.text-muted-foreground.self-center { color: #eef1ff; }
/* Read-aloud (UX): the "Page N / M" line and the settings
   icon in the story header row. (The story words and the
   "Tap any word" line sit on the card's white band and are
   not touched.) */
html.lg-game #root .lgg-root main .max-w-2xl.space-y-4 > .flex.items-center.justify-between .text-muted-foreground { color: #eef1ff; }
/* Writing prompt (NQ): the word-count line (in its not-done
   state) and the "New prompt" ghost button, both muted and
   both printed on the sky inside NQ's column. */
html.lg-game #root .lgg-root main .flex.flex-col.gap-4.max-w-2xl .text-muted-foreground { color: #eef1ff; }
/* Times-tables personal bests (BX): the attempts cell. */
html.lg-game #root .lgg-root main table .text-muted-foreground { color: #eef1ff; }
/* Picture match (gQ): the "Round N of 8" row. The row wears
   the grey; the 💎 count inside it wears its own yellow and
   keeps it. */
html.lg-game #root .lgg-root main .w-full.max-w-md > .flex.items-center.justify-between.mb-1.text-gray-500 { color: #eef1ff; }
/* Adaptive math facts (iQ): the timer and "N/M correct"
   spans of its header row (the row twin of gQ's, told apart
   by the grey living on the spans, not the row). */
html.lg-game #root .lgg-root main .w-full.max-w-md > .flex.items-center.justify-between.mb-1 > span.text-gray-600 { color: #eef1ff; }
/* True/false (MX): the "Question N of M" line. (Its "Score:"
   twin is amber-500, already clear on the navy.) */
html.lg-game #root .lgg-root main .flex.items-center.justify-between.mb-2 > span.text-gray-500 { color: #eef1ff; }
/* Memory match (OX): the timer and "Attempts: N" labels. */
html.lg-game #root .lgg-root main .flex.items-center.justify-between.mb-6 > .text-gray-600 { color: #eef1ff; }
/* Timed race (_X): the timer and score labels of its header
   row, and the "/" between the score counts. (The timer's
   red low-time state wears red-500 instead of the grey and
   is not matched.) */
html.lg-game #root .lgg-root main .flex.items-center.justify-between.mb-8 > .text-gray-600,
html.lg-game #root .lgg-root main .flex.items-center.justify-between.mb-8 > .text-gray-700,
html.lg-game #root .lgg-root main .flex.items-center.justify-between.mb-8 .text-gray-400 { color: #eef1ff; }
/* Letter tracing (XX): the letter's description line under
   the Listen button. */
html.lg-game #root .lgg-root main .text-center > p.text-gray-500.mt-2 { color: #eef1ff; }
/* Times-tables personal bests (BX): the average-time cell. */
html.lg-game #root .lgg-root main table .text-slate-700 { color: #eef1ff; }
/* Timed race (_X) end screen: the "N correct out of M" line
   (its colour lives on the wrapping line block) and the
   small "Accuracy: N%" line under it. The stat chips beside
   them sit on their own grey chips and are not matched. */
html.lg-game #root .lgg-root main .text-center.py-8 .space-y-1.text-gray-600 { color: #eef1ff; }
html.lg-game #root .lgg-root main .text-center.py-8 .space-y-1 > p.text-gray-400 { color: #eef1ff; }
/* True/false (MX) end screen: the "You got N out of M
   correct!" line. */
html.lg-game #root .lgg-root main .text-center.py-8 p.text-lg.text-gray-600 { color: #eef1ff; }
/* Fluency drill (nQ): its playing header row - the seconds
   and the count inherit the row's colour, so the row is
   lifted and both inherit it (the green tick keeps its own
   green). */
html.lg-game #root .lgg-root main .max-w-md.space-y-4 > .space-y-1 > .flex.justify-between { color: #eef1ff; }
/* Times-tables (WX) table picker: the "Pick a table to
   drill..." line under its title. */
html.lg-game #root .lgg-root main .flex.flex-col.gap-5.max-w-lg > .text-center > p.text-muted-foreground { color: #eef1ff; }
/* Adaptive math facts (iQ) start screen: the "Answer as
   many math facts..." description. */
html.lg-game #root .lgg-root main p.text-gray-600.max-w-sm { color: #eef1ff; }
/* Fluency drill (nQ) start and end screens: the heading
   inherits the screen's ink, so the screen takes the page
   ink (its score card keeps its own card colours - they are
   set by class and beat inheritance), and its start-screen
   description line lifts with the other muted lines. */
html.lg-game #root .lgg-root main .text-center.space-y-4.py-8 { color: #eef1ff; }
html.lg-game #root .lgg-root main .text-center.space-y-4.py-8 > p.text-muted-foreground { color: #eef1ff; }

/* Title lines printed on the sky: each engine's own screen
   title in a deep hue (or, for the story and slides headers,
   the inherited dark ink), lifted to the page ink. Large
   text all - each clears 4.5:1 anyway on the worst sky
   zone, proven in the harness. */
/* Timed race (_X): the question line and the "Time's Up!"
   heading (the answer tiles under them wear white and are
   not matched - only the h2 is). */
html.lg-game #root .lgg-root main .relative.w-full.max-w-lg h2.text-gray-800 { color: #eef1ff; }
/* True/false (MX) end screen: "Quiz Complete!". (Its
   playing statement sits on a white card and keeps its
   dark ink - it is not inside the end screen's centred
   block this selector requires.) */
html.lg-game #root .lgg-root main .w-full.max-w-lg > .text-center.py-8 h2.text-gray-800 { color: #eef1ff; }
/* Adaptive math facts (iQ): "Math Facts Blitz!" and its
   "Time's Up!". */
html.lg-game #root .lgg-root main h1.text-purple-700,
html.lg-game #root .lgg-root main h2.text-purple-700 { color: #eef1ff; }
/* Times tables (WX + BX): the table-picker title, the
   "N× Table Done!" heading and "Personal Bests". */
html.lg-game #root .lgg-root main p.text-violet-700,
html.lg-game #root .lgg-root main h2.text-violet-700 { color: #eef1ff; }
/* Sentence builder (SQ): "✏️ Sentence Builder" and "All
   Done!". */
html.lg-game #root .lgg-root main h2.text-indigo-700 { color: #eef1ff; }
/* Virtual manipulatives (uQ): "🧰 Math Tools". */
html.lg-game #root .lgg-root main h2.text-teal-700 { color: #eef1ff; }
/* Read-aloud (UX): the story title in its header row. */
html.lg-game #root .lgg-root main .max-w-2xl.space-y-4 > .flex.items-center.justify-between h2 { color: #eef1ff; }
/* Learn-first slides (QX): the slides' title in its header
   row. (UX's title in the twin row is an h2, above; QX's is
   a bold span - the two rules cannot cross.) */
html.lg-game #root .lgg-root main .max-w-2xl.space-y-4 > .flex.items-center.justify-between span.font-bold { color: #eef1ff; }
/* Sentence builder (SQ): the "N ✓" count beside its title. */
html.lg-game #root .lgg-root main .flex.items-center.justify-between > span.text-indigo-500 { color: #eef1ff; }
/* Letter tracing (XX): the "Letter N of M" line. */
html.lg-game #root .lgg-root main .flex.items-center.justify-between > span.text-blue-700 { color: #eef1ff; }
/* Picture match (gQ) end screen: "Game Over!" steps within
   rose (rose-600 to rose-300) - its score card below keeps
   the app's paint. */
html.lg-game #root .lgg-root main h2.text-rose-600 { color: #fda4af; }
/* Writing prompt (NQ): the "Show hint / Hide hint" toggle
   steps within amber (amber-600 to amber-400). */
html.lg-game #root .lgg-root main button.text-amber-600 { color: #fbbf24; }
/* Default quiz engine feedback lines on the sky: "Not
   quite!" steps within rose (rose-500 to rose-400; it is
   large bold text and clears its 3:1 bar, while its green
   "Correct!" twin already reads at 4.18:1 and is left
   exactly as the app paints it), and the small "The answer
   was: ..." line steps to rose-300 for the full 4.5:1. */
html.lg-game #root .lgg-root main .py-3.rounded-xl.font-bold.text-rose-500 { color: #fb7185; }
html.lg-game #root .lgg-root main .space-y-3 > p.text-rose-500 { color: #fda4af; }

/* Defect 2 - the default quiz engine's answer tiles. The
   app paints the resting tile white and its hover as
   bg-primary/5: the tile's white is REPLACED on hover by
   primary at 5% alpha, a tint that only reads over a light
   page - over the navy the tile all but disappears and its
   dark word goes with it. And the state after an answer
   drops the white entirely and keeps only opacity-50, so an
   unchosen tile becomes the dark sky itself at half strength
   with its text halved over it. Both states are restated
   here, state-only: the resting tile, its border and text,
   and the correct (emerald) and wrong feedback paints keep
   the app's exact winners - the hover rule cannot reach an
   answered tile (they are disabled, and it says so), and
   the dim rule asks for the dim's own opacity class. */
/* Hover (live tiles only): a warm paper tint instead of the
   5% wash - the tile stays light, its word stays dark. */
html.lg-game #root .lgg-root main button[data-testid^="option-"]:hover:not(:disabled) { background-color: #fff8e1; }
/* After an answer, the unchosen tiles: give them their
   white back under the app's own half-strength dim, so the
   dim reads as a dim of a light tile (its word composited
   at 4.5:1 or better against the tile, proven in the
   harness) instead of a hole in the sky. */
html.lg-game #root .lgg-root main button[data-testid^="option-"]:disabled.opacity-50 { background-color: #ffffff; }