<!--
  story-builder-v1.2.html
  V1.2 — multi-category expansion built on top of the frozen v1.1 pilot file.
  v1.1 (app/story-builder-v1.1.html) is UNTOUCHED and stays the pilot-test
  build. This is a separate file per explicit instruction.

  What's new vs v1.1:
  - 11 categories instead of 1 flat pool: Animals, Numbers, Shapes, Vehicles,
    Sports, Hobbies, Food, Places, Family, Body Parts, Feelings.
  - Colour modifier (10-colour bank). Shapes render as true recolourable SVG
    (exact colour match — this was the curriculum's own recommended pilot
    category for colour). Everything else keeps its emoji and shows a solid
    colour-swatch chip next to the word instead of trying to recolour the
    emoji glyph itself — Unicode emoji are fixed multi-colour bitmaps, so
    "make the car icon blue" can't be done accurately with a CSS filter.
    Flagging this rather than shipping a fudged, muddy-looking recolour.
  - Verb choice is no longer an equal-weight tile grid shown up front (that
    was flagged as a real design mistake in
    curriculum/verb-bank.md §6 — Tomasello's Verb Island Hypothesis: a verb
    is the predicate, not a decorative modifier, and presenting it with
    identical card styling to size/colour swatches tells a child it's the
    same *kind* of choice, which it isn't). 喜欢 is now the fixed anchor verb
    for a noun's first sentence; a single, differently-styled "try another
    word" pill appears after that sentence and cycles one verb at a time.
  - Family: sibling pairs (哥哥/弟弟, 姐姐/妹妹) that share one emoji are
    disambiguated by rendering the same emoji at two sizes (60px / 40px)
    side by side with the target one highlighted — per
    content/family/family-pack.md's resolved design, not a new invention.
  - Places: hospital (医院) and 看医生 removed from this build per explicit
    instruction, even though a sourced resolution existed for the "want vs.
    need" framing (curriculum/places-pack.md) — dropped anyway, not
    silently kept.
  - Food primarily uses the new SF1 state/evaluation frame (X很Y。) for
    taste ("苹果很好吃" reads as how a 5-6 year old actually talks about
    food) rather than F1's "我喜欢X" for everything.
  - Feelings uses SF1 (我很X。) for person-state words.
  - Numbers is a standalone rote-counting strand (no noun pairing — Mandarin
    numerals need a per-noun classifier, e.g. 三只兔子 not *三兔子, which
    hasn't been reviewed yet; see curriculum/numbers-1-10.md).
  - Category picker replaces v1.1's single flat 20-of-30 random sample —
    with the biggest category now 16 items, a full grid fits without
    needing the sample/refresh mechanic, so it was dropped rather than
    carried forward unnecessarily.

  Audio engine (voice ordering, cancel-guard, utterance persistence,
  retry-on-error) is carried over UNCHANGED from the validated v1.1 fix —
  see that file's comments for the full diagnosis. Not re-derived here.

  Still open / not attempted this pass (same standing gaps as before):
  - No native-speaker review of any new vocabulary (colours, vehicles,
    shapes, sports, hobbies, food, places, family, body parts, feelings,
    numbers, cooking, cleaning, daily habits, weather).
  - No child testing of category picker, colour swatches, verb-choice
    chips, sibling pair interaction, or any of the fixed-chunk categories.
  - assessment-signals-spec.md (retention/recognition logging) is NOT
    implemented here — stars remain an engagement reward only, same as
    v1.1, not a proxy for learning. That's a separate backend-logging task.
  - Skin-tone/representation question for generic person emoji (family,
    body parts) is still unresolved — not a curriculum-layer decision.

  DEFERRED FOR A FUTURE BUILD (not started, flagged for later, not
  silently dropped):
  - Cross-word association / semantic webbing — e.g. tapping 学校 (school)
    also surfacing related words like 老师 (teacher) or 学习 (learning).
    Raised 2026-08-19; deliberately NOT built now. Two reasons: (1) SLA
    research on vocabulary clustering (Tinkham; Finkbeiner & Nicol) finds
    thematically-related words shown together during EARLY acquisition
    increase interference rather than reduce it — semantic webbing pays
    off once individual words are independently solid, not at first
    exposure, which is where this app's tap-a-word flow sits. (2) It
    overlaps with the still-unbuilt F3/F4 noun-pairing frames
    ("chain any two nouns," curriculum/category-taxonomy-and-sentence-
    architecture.md) — building two different half-finished
    word-relationship mechanisms would be worse than building one,
    properly, later. If this gets picked up, resolve it together with
    F3/F4 rather than as a separate feature.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Little Cloud | Mandarin Learning for Kids</title>
<meta name="description" content="A playful Mandarin learning app helping children build a lasting connection with Chinese through everyday moments, curiosity and meaningful use.">
<link rel="canonical" href="https://hellolittlecloud.org/">
<meta property="og:type" content="website">
<meta property="og:title" content="Hello Little Cloud | Mandarin Learning for Kids">
<meta property="og:description" content="A playful Mandarin learning app helping children build a lasting connection with Chinese through everyday moments, curiosity and meaningful use.">
<meta property="og:url" content="https://hellolittlecloud.org/">
<meta property="og:site_name" content="Hello Little Cloud">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hello Little Cloud | Mandarin Learning for Kids">
<meta name="twitter:description" content="A playful Mandarin learning app helping children build a lasting connection with Chinese through everyday moments, curiosity and meaningful use.">
<!-- No og:image / twitter:image yet — there's no dedicated share/preview
     image asset in this project. Without one, most platforms fall back to
     the favicon or a blank preview; worth a real 1200x630 image later, not
     invented here. -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Hello Little Cloud",
  "url": "https://hellolittlecloud.org/",
  "description": "A playful Mandarin learning app helping children build a lasting connection with Chinese through everyday moments, curiosity and meaningful use.",
  "applicationCategory": "EducationalApplication",
  "operatingSystem": "Any (web browser)",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "audience": {
    "@type": "EducationalAudience",
    "audienceType": "children ages 4-8"
  }
}
</script>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2230%20-30%20240%20240%22%3E%0A%20%20%3Cg%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%233F7FB8%22%20stroke-width%3D%224%22%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22150%22%20cy%3D%22112%22%20rx%3D%2292%22%20ry%3D%2242%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2292%22%20cy%3D%2288%22%20r%3D%2240%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22150%22%20cy%3D%2268%22%20r%3D%2248%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22208%22%20cy%3D%2288%22%20r%3D%2240%22/%3E%0A%20%20%3C/g%3E%0A%20%20%3Ccircle%20cx%3D%22128%22%20cy%3D%22102%22%20r%3D%227%22%20fill%3D%22%233A4A66%22/%3E%0A%20%20%3Ccircle%20cx%3D%22172%22%20cy%3D%22102%22%20r%3D%227%22%20fill%3D%22%233A4A66%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%22114%22%20r%3D%229%22%20fill%3D%22%23F6D8E0%22/%3E%0A%20%20%3Ccircle%20cx%3D%22190%22%20cy%3D%22114%22%20r%3D%229%22%20fill%3D%22%23F6D8E0%22/%3E%0A%20%20%3Cpath%20d%3D%22M132%2C118%20Q150%2C131%20168%2C118%22%20fill%3D%22none%22%20stroke%3D%22%233A4A66%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22/%3E%0A%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --bg-base:#F3F8FD;
    --panel:#FFFFFF;
    --ink:#3A4A66;
    --soft:#57708F; /* darkened from #8FA3BF — old value was ~2.6:1 contrast on white, fails WCAG AA (needs 4.5:1); this is ~5.1:1 */
    --accent:#5B9BD3;
    --accent-deep:#3F7FB8;
    --success:#6FCF97;
    --success-deep:#4CAF77;
    --coral:#F0A8A0;
    --coral-deep:#DE897F;
    --gold:#F3C969;
    --gold-deep:#D9A83E;
    /* category level gets its own accent family (purple) so it's visually
       distinct from word tiles (blue) without needing a dark/saturated
       background — a light tint by default, this colour only appears
       solid on the one tile that's actually selected. */
    --cat-accent:#9B7FC7;
    --cat-accent-deep:#7A5FAE;
    --cat-tint:#F3ECFB;
    --cat-tint-border:#E2D3F5;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh; padding:28px 16px 48px;
    background:
      radial-gradient(circle at 15% 8%, rgba(207,232,250,0.9), transparent 45%),
      radial-gradient(circle at 85% 12%, rgba(227,217,243,0.8), transparent 48%),
      radial-gradient(circle at 50% 100%, rgba(246,216,224,0.55), transparent 55%),
      var(--bg-base);
    font-family:'Baloo 2',sans-serif; font-weight:500; color:var(--ink);
    display:flex; justify-content:center;
    position:relative; overflow-x:hidden;
  }
  .deco{position:fixed; font-size:26px; opacity:0.45; animation:float 6s ease-in-out infinite; pointer-events:none;}
  .d1{top:5%; left:5%;} .d2{top:10%; right:6%; animation-delay:1.2s; font-size:20px;}
  .d3{bottom:6%; left:8%; animation-delay:0.6s; font-size:18px;} .d4{bottom:14%; right:9%; animation-delay:1.8s; font-size:18px;}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-8px) rotate(2deg);}}
  header{text-align:center; position:relative;}
  .mascot-wrap{display:flex; justify-content:center; margin-bottom:2px; position:relative; cursor:pointer;}
  .mascot-svg{width:130px; height:auto; animation:mascotBob 3.6s ease-in-out infinite;}
  @keyframes mascotBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
  /* Mascot reacts to what the child does instead of being purely
     decorative — a small bounce on picking a category, a bigger
     celebratory bounce + sparkle burst on picking a word. These override
     the idle bob animation for their duration (more specific selector),
     then JS removes the class so the gentle idle bob resumes. */
  .mascot-svg.reacting-happy{animation:mascotHappyBounce .6s ease-in-out;}
  .mascot-svg.reacting-excited{animation:mascotExcitedBounce .9s cubic-bezier(.34,1.56,.64,1);}
  /* On first load, before any interaction, the idle bob alone is too
     subtle to register as an invitation — this runs a bigger, repeating
     "hey, look at me!" loop instead, until the child's first tap
     anywhere clears it and the gentle idle bob takes back over. */
  .mascot-svg.greeting{animation:mascotGreet 1.8s ease-in-out infinite;}
  @keyframes mascotGreet{
    0%,100%{transform:translateY(0) rotate(0deg);}
    15%{transform:translateY(-16px) rotate(-6deg);}
    30%{transform:translateY(-2px) rotate(4deg);}
    45%{transform:translateY(-12px) rotate(-4deg);}
    60%,100%{transform:translateY(0) rotate(0deg);}
  }
  @keyframes mascotHappyBounce{
    0%,100%{transform:translateY(0) rotate(0deg);}
    30%{transform:translateY(-14px) rotate(-4deg);}
    60%{transform:translateY(-2px) rotate(3deg);}
  }
  @keyframes mascotExcitedBounce{
    0%{transform:translateY(0) scale(1) rotate(0deg);}
    20%{transform:translateY(-24px) scale(1.08) rotate(-6deg);}
    45%{transform:translateY(-4px) scale(1.02) rotate(5deg);}
    65%{transform:translateY(-14px) scale(1.05) rotate(-3deg);}
    85%{transform:translateY(0) scale(1) rotate(2deg);}
    100%{transform:translateY(0) scale(1) rotate(0deg);}
  }
  .mascot-sparkle{
    position:absolute; top:45%; left:50%; font-size:20px; pointer-events:none; z-index:2;
    animation:sparkleBurst .8s ease-out forwards; animation-delay:var(--delay, 0s);
  }
  @keyframes sparkleBurst{
    0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(0.4); opacity:0;}
    25%{opacity:1;}
    100%{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-75px) scale(1); opacity:0;}
  }
  h1{font-family:'Baloo 2',sans-serif; font-weight:700; text-align:center; font-size:clamp(24px,7vw,32px); margin:4px 0 6px; color:var(--accent-deep);}
  .tagline{text-align:center; font-size:17px; font-weight:600; color:var(--soft); margin:0 0 18px;}
  .panel{background:var(--panel); border-radius:28px; padding:24px; margin-bottom:16px; box-shadow:0 12px 30px rgba(58,74,102,0.08); animation:panelPop .35s cubic-bezier(.34,1.56,.64,1);}
  @keyframes panelPop{0%{opacity:0; transform:scale(0.96) translateY(6px);} 100%{opacity:1; transform:scale(1) translateY(0);}}
  .panel h2{font-family:'Baloo 2',sans-serif; font-size:18px; color:var(--accent-deep); margin:0 0 14px; font-weight:700;}
  .panel .sub{font-size:16px; color:var(--soft); font-weight:600; margin:-8px 0 14px;}
  /* category grid — light pastel by default so the emoji always sits on a
     pale backdrop (a dark/saturated tile was swallowing contrast for a
     lot of emoji glyphs); the white icon badge underneath every icon
     guarantees a clean background regardless of the glyph's own colours.
     The purple accent only becomes a solid fill on whichever tile is
     actually selected, so "this one is chosen" reads as a clear colour
     pop at the moment of the tap, rather than every tile competing for
     attention all the time. */
  /* category zone — ONE shared soft surface holds both the tab row and
     the selected-category header, instead of two separately-boxed
     sections stacked on top of each other. Individual tabs no longer
     carry their own border/fill (that was 10 competing boxes fighting
     for attention); only the active tab gets a highlight, same as how
     the OS emoji-picker's category bar shows plain icons with just the
     current one picked out. The header sits directly beneath the tabs
     inside the same surface, separated only by a hairline rather than
     its own box, so it reads as "this surface's title," not a third
     stacked block. The word grid then begins right after this single
     surface ends — tabs → header → grid, one continuous flow instead of
     tile → block → item. */
  .app{width:100%; max-width:560px; position:relative; z-index:1;}
  @media (min-width:700px){ .app{max-width:860px;} }
  /* World picker — the true entry point now. Deliberately bigger, bolder,
     and more colourful than anything else in the app (categories/words
     stay in the established pastel system) since this is the very first
     thing a child sees and needs to actively invite that first tap. */
  #worldPicker .sub{margin:0 0 14px;}
  /* Flexbox, not CSS grid — 5 tiles ÷ 3 per row leaves 2 tiles alone on
     the second row; a strict grid would leave that row looking like a
     broken/incomplete slot (the exact "empty gap" problem already fixed
     once for the category sidebar). justify-content:center means that
     trailing row centers itself instead, reading as intentional. */
  .world-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
  /* ============================================================
     HOMEPAGE — "Garden World". Replaces the tile-grid entry screen
     with one continuous scene the six categories live inside, in the
     same spirit as the recital discovery scenes (flat SVG/CSS/emoji,
     ambient idle motion, no glowing "buttons"). Ground-level
     destinations use a FLEX ROW rather than hand-positioned percentages
     — flexbox guarantees even, non-overlapping spacing at any viewport
     width automatically, sidestepping the exact category of positioning
     bug (elements overlapping, hints landing in the wrong place) that
     took many rounds to resolve across the recital scenes. The winding
     path is purely decorative, not a seventh interactive element, per
     the earlier explicit decision to keep it visual-only.
     ============================================================ */
  .world-tile{
    border:none; border-radius:22px; padding:8px 6px; cursor:pointer; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font-family:'Baloo 2',sans-serif; text-align:center;
    /* 2 columns by default — covers all phones, where a longer pinyin
       string (数字和形状's "shù zì hé xíng zhuàng," 4 syllables, longer
       than any other world's) was getting clipped by overflow:hidden at
       3-per-row on a narrow screen instead of the tile growing to fit
       it. 6 worlds ÷ 2 = exactly 3 rows, no remainder either way. */
    flex:0 0 calc((100% - 12px) / 2); aspect-ratio:1/1; overflow:hidden;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
    box-shadow:0 5px 0 rgba(58,74,102,0.1);
  }
  @media (min-width:700px){
    /* Same breakpoint already used elsewhere in the app for "there's
       real extra room now" (tablet/desktop) — 3-per-row only once each
       tile has enough width to fit the longest pinyin without clipping. */
    .world-tile{flex:0 0 calc((100% - 24px) / 3);}
  }
  /* Slight alternating tilt + idle wobble — same "not a rigid grid,
     something with a little life in it" principle already used for the
     word tiles, now applied here too since flat/static tiles were read
     as boring even with illustrations and colour. */
  .world-tile-0{animation:worldWobble0 4.2s ease-in-out infinite;}
  .world-tile-1{animation:worldWobble1 3.8s ease-in-out infinite .3s;}
  .world-tile-2{animation:worldWobble2 4.5s ease-in-out infinite .6s;}
  .world-tile-3{animation:worldWobble3 4s ease-in-out infinite .15s;}
  @keyframes worldWobble0{0%,100%{transform:rotate(-1.5deg) translateY(0);} 50%{transform:rotate(-1.5deg) translateY(-4px);}}
  @keyframes worldWobble1{0%,100%{transform:rotate(1.5deg) translateY(0);} 50%{transform:rotate(1.5deg) translateY(-4px);}}
  @keyframes worldWobble2{0%,100%{transform:rotate(-1deg) translateY(0);} 50%{transform:rotate(-1deg) translateY(-4px);}}
  @keyframes worldWobble3{0%,100%{transform:rotate(1deg) translateY(0);} 50%{transform:rotate(1deg) translateY(-4px);}}
  .world-tile:active{transform:translateY(3px) scale(0.96) rotate(0deg) !important; box-shadow:0 2px 0 rgba(58,74,102,0.1); animation:none;}
  .world-tile::before{
    content:''; position:absolute; top:-10%; left:-10%; width:55%; height:45%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.55), transparent 70%);
    border-radius:50%; pointer-events:none;
  }
  .world-ic{width:clamp(40px, 13vw, 60px); height:clamp(40px, 13vw, 60px); display:block; filter:drop-shadow(0 3px 2px rgba(58,74,102,0.1));}
  .world-tile .native{font-size:clamp(12.5px, 3.6vw, 15px); font-weight:700; line-height:1.15; color:inherit;}
  /* pinyin + English combined onto one line (was 2 separate lines) —
     verified by computation that 4 stacked elements (icon + 3 text
     lines) at readable sizes physically don't fit inside a square tile
     on a real small phone (checked: overflows by ~40px at 375px
     viewport); 3 stacked elements does fit, with margin, at 375px+.
     Below 375px (now-rare legacy devices) this can get slightly tight —
     a deliberate, documented trade-off rather than a silent gap. */
  .world-tile .sub-label{font-size:clamp(10px, 2.6vw, 11.5px); font-weight:600; color:inherit; margin-top:1px;}
  /* Pale, muted tints matching the app's EXISTING palette (same colours
     already used for word-tile texture and the category-tint wash),
     rather than the more saturated gradients used before — those didn't
     match the soft, gentle palette everywhere else in the app. Text is
     now dark (theme-specific deep colour) instead of white, since white
     only worked against the old saturated backgrounds. */
  /* Text colours verified against WCAG AA (4.5:1 minimum for this text
     size — none of it qualifies as "large text," so the relaxed 3:1
     threshold doesn't apply). The original colours here only reached
     2.8–4.5:1 against their pale backgrounds and would have failed for
     most users; these pass at 4.8–7.1:1, checked with the same contrast
     formula used earlier in this project, not just eyeballed. */
  .world-theme-green{background:#EAF7F1; color:#245C3B;}
  .world-theme-pink{background:#FCEEF2; color:#96475A;}
  .world-theme-orange{background:#FBF3EC; color:#A6551C;}
  .world-theme-blue{background:#EAF3FB; color:#265876;}
  .world-theme-purple{background:#F3ECFB; color:#5A4380;}
  .world-theme-yellow{background:#FFF6E0; color:#7A5C18;}
  /* Reuses the same spotlight/tap-hint invitation pattern already built
     for the first category tab — now applied to the first WORLD tile
     instead, since worlds are the true first screen. */
  .world-tile.spotlight{animation:worldSpotlightPulse 1.6s ease-out infinite;}
  @keyframes worldSpotlightPulse{
    0%,100%{box-shadow:0 5px 0 rgba(58,74,102,0.1), 0 0 0 0 rgba(243,201,105,0.7);}
    50%{box-shadow:0 5px 0 rgba(58,74,102,0.1), 0 0 0 10px rgba(243,201,105,0);}
  }
  .world-tile .tap-hint{top:-4px; right:2px;}
  /* Back button — a solid, distinctly-coloured circle rather than white,
     since the active category tile also turns white when selected; a
     white circle risked reading as "another tile state" despite the
     shape difference. Plain arrow, not a house icon — the house emoji
     was visually competing with the house icons already used nearby
     (the My Home world tile, the 家 Places item). */
  .back-arrow-btn{
    flex:0 0 auto; height:56px; padding:0 16px 0 12px; border-radius:28px; border:none;
    background:var(--cat-tint); color:var(--cat-accent-deep); position:relative;
    display:flex; align-items:center; gap:6px; cursor:pointer;
    box-shadow:0 3px 0 var(--cat-tint-border); transition:transform .15s cubic-bezier(.34,1.56,.64,1);
    animation:emojiPopIn .4s cubic-bezier(.34,1.56,.64,1);
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px;
  }
  .back-arrow-btn svg{width:22px; height:22px; display:block; flex-shrink:0;}
  .back-arrow-btn:active{transform:translateY(2px) scale(0.94);}
  /* One-time discovery hint — same pulsing-glow + bouncing-hand pattern
     already used to teach the first world tile and first category tab,
     applied here since a bare directional icon relies on a convention
     (arrow = go back) a young child may not have learned yet, unlike a
     concrete picture. Cleared permanently after the first real tap of
     this control (see hasUsedBackButton), not shown again per session. */
  .back-arrow-btn.spotlight{animation:backSpotlightPulse 1.6s ease-out infinite;}
  @keyframes backSpotlightPulse{
    0%,100%{box-shadow:0 3px 0 var(--cat-tint-border), 0 0 0 0 rgba(122,95,174,0.5);}
    50%{box-shadow:0 3px 0 var(--cat-tint-border), 0 0 0 9px rgba(122,95,174,0);}
  }
  .back-arrow-btn .tap-hint{top:-8px; right:-4px;}
  /* Category tiles now sit directly on the page background as a row
     above the content — no side column, no white card wrapper. Each
     tile carries its own light background (rather than relying on a
     shared sidebar wash) since there's no longer a container behind
     them providing that. Tiles now also show pinyin + English (not just
     the Chinese label), so the white header bar that used to repeat this
     same information a second time is no longer needed — see
     renderBrowsePanel, which no longer renders that header at all. */
  .category-tiles-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px;}
  .cat-tab{
    width:auto; min-width:84px; border:none; border-radius:18px; position:relative;
    background:var(--cat-tint); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:10px 10px; font-family:'Baloo 2',sans-serif; flex-shrink:0;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease;
    box-shadow:0 3px 0 rgba(58,74,102,0.08);
  }
  .cat-tab .ic{font-size:26px; line-height:1; opacity:.7; transition:opacity .15s ease; margin-bottom:2px;}
  .cat-tab .lbl{font-size:12.5px; font-weight:700; color:var(--cat-accent-deep); line-height:1.15; text-align:center; opacity:.9; white-space:nowrap;}
  .cat-tab .lbl-pinyin{font-size:14px; font-weight:600; color:var(--cat-accent-deep); opacity:.75; text-align:center; white-space:nowrap;}
  .cat-tab .lbl-en{font-size:14px; font-weight:600; color:var(--cat-accent-deep); opacity:.7; text-align:center; white-space:nowrap;}
  .cat-tab:active{transform:translateY(2px) scale(0.94);}
  /* Same chunky, pressable button language used everywhere else (size
     buttons, verb chips) instead of a flat highlight — every tappable
     surface in the app should feel like the same kind of thing to touch. */
  .cat-tab.active-cat{background:var(--panel); box-shadow:0 3px 0 rgba(58,74,102,0.12), 0 0 0 2px var(--cat-accent);}
  .cat-tab.active-cat .ic{opacity:1;}
  .cat-tab.active-cat .lbl, .cat-tab.active-cat .lbl-pinyin, .cat-tab.active-cat .lbl-en{opacity:1;}
  /* Signals "tap me to see all the words again" — without this, the
     active tile just looked like a static "you are here" label with no
     hint that tapping it does anything once a word's been picked. Blue,
     not purple — this action is about seeing WORDS again, matching the
     app's own colour split elsewhere (purple = category-level, blue =
     word-level), even though it's sitting on a category tile. */
  .cat-tab .return-badge{
    position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%;
    background:var(--accent); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 4px rgba(58,74,102,0.25); animation:returnBadgePulse 1.4s ease-in-out infinite;
  }
  @keyframes returnBadgePulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.15);}}
  /* "Start here" invitation — a pulsing glow + bouncing pointer on the
     very first tab, visible only until the child's first tap anywhere in
     the app. Nothing else on the screen was inviting that first touch. */
  .cat-tab.spotlight{animation:tabSpotlightPulse 1.6s ease-out infinite;}
  @keyframes tabSpotlightPulse{
    0%,100%{box-shadow:0 3px 0 rgba(58,74,102,0.1), 0 0 0 0 rgba(155,127,199,0.5);}
    50%{box-shadow:0 3px 0 rgba(58,74,102,0.1), 0 0 0 9px rgba(155,127,199,0);}
  }
  .tap-hint{
    position:absolute; top:-6px; right:-2px; font-size:22px; pointer-events:none;
    animation:tapHintBounce 1.1s ease-in-out infinite;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,0.15));
  }
  @keyframes tapHintBounce{
    0%,100%{transform:translate(0,0) rotate(-8deg);}
    50%{transform:translate(-4px,-6px) rotate(-16deg);}
  }
  .cat-tab.active-cat:active{transform:translateY(2px) scale(0.97);}
  .cat-tab.active-cat .ic{opacity:1;}
  .cat-tab.active-cat .lbl{color:var(--cat-accent-deep); opacity:1;}
  /* emoji noun grid — the flowing gallery itself, sitting directly under
     the category header so it reads as belonging to it */
  .emoji-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .emoji-tile{
    border:none; border-radius:18px; aspect-ratio:1/1; font-size:clamp(30px, 9vw, 50px); cursor:pointer;
    background:#EAF3FB; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
    box-shadow:0 3px 0 rgba(58,74,102,0.08);
  }
  /* Break up the uniform-grid "spreadsheet" look with gentle alternating
     tilt and subtle colour variation, like a sheet of stickers rather
     than identical spreadsheet cells — pure CSS, no image assets needed.
     Same trick applied to .num-tile below for consistency. */
  .emoji-tile:nth-child(6n+1), .num-tile:nth-child(6n+1){ transform:rotate(-2deg); background:#EAF3FB; }
  .emoji-tile:nth-child(6n+2), .num-tile:nth-child(6n+2){ transform:rotate(1.5deg); background:#EAF7F1; }
  .emoji-tile:nth-child(6n+3), .num-tile:nth-child(6n+3){ transform:rotate(-1deg); background:#F5F0FB; }
  .emoji-tile:nth-child(6n+4), .num-tile:nth-child(6n+4){ transform:rotate(2deg); background:#EAF3FB; }
  .emoji-tile:nth-child(6n+5), .num-tile:nth-child(6n+5){ transform:rotate(-1.5deg); background:#FBF3EC; }
  .emoji-tile:nth-child(6n+6), .num-tile:nth-child(6n+6){ transform:rotate(1deg); background:#EAF3FB; }
  .emoji-tile::before{
    content:''; position:absolute; top:6%; left:10%; width:40%; height:30%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,0.7), transparent 70%);
    border-radius:50%; pointer-events:none;
  }
  .emoji-tile:active{transform:scale(0.92) rotate(0deg) !important; box-shadow:0 1px 0 rgba(58,74,102,0.08);}
  .emoji-tile.active-noun{box-shadow:0 0 0 3px var(--panel), 0 0 0 6px var(--accent);}
  .emoji-tile:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
  .cat-tab:focus-visible, .num-tile:focus-visible, .sib:focus-visible, .mini-speak:focus-visible, .world-tile:focus-visible, .back-arrow-btn:focus-visible,
  .mod-btn:focus-visible, .word-chip:focus-visible,
  .big-btn:focus-visible, .sentence-card:focus-visible,
  .discovery-target:focus-visible, .recital-hotspot:focus-visible, .discovery-action-btn:focus-visible, .bonus-cycle-btn:focus-visible{
    outline:3px solid var(--accent); outline-offset:2px;
  }
  .story-caption{font-size:20px; line-height:1.6; font-weight:600; text-align:center; margin-bottom:16px; color:var(--ink);}
  .story-caption .big-emoji{font-size:40px; display:block; margin-bottom:6px; animation:emojiPopIn .5s cubic-bezier(.34,1.56,.64,1);}
  @keyframes emojiPopIn{
    0%{transform:scale(0.3) rotate(-15deg); opacity:0;}
    60%{transform:scale(1.15) rotate(5deg); opacity:1;}
    100%{transform:scale(1) rotate(0deg); opacity:1;}
  }
  .story-caption .big-emoji svg{display:block; margin:0 auto;}
  .wordrow{display:flex; align-items:center; gap:12px; background:#EAF3FB; border-radius:18px; padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:transform .12s cubic-bezier(.34,1.56,.64,1);}
  .wordrow:active{transform:scale(0.97);}
  .wordrow .emoji{font-size:30px; display:flex; align-items:center; justify-content:center; width:34px; animation:emojiPopIn .5s cubic-bezier(.34,1.56,.64,1);}
  /* Persistent small icon, pinned to the top of the card as it grows
     through size/colour/verb/sentence steps — without this, the big
     hero icon (the only visual anchor a pre-reader has) scrolls out of
     view by the time the sentence itself appears, which is exactly the
     least reading-independent step in the whole flow. Sits as a direct
     child of .panel (not nested inside .hero-word's own small box) so
     its sticky containing block spans the WHOLE growing card, not just
     the hero card's own short height — that nesting is what actually
     makes the stickiness span the full scroll region. aria-hidden since
     it's a pure visual echo of the hero icon, which already carries the
     real accessible name via its own speak button. */
  .sticky-word-icon{
    position:sticky; top:10px; z-index:6; width:44px; height:44px; border-radius:14px;
    background:#EAF3FB; display:flex; align-items:center; justify-content:center;
    font-size:26px; box-shadow:0 3px 0 rgba(58,74,102,0.08); margin:0 0 10px;
  }
  .wordrow .txt{flex:1;}
  .wordrow .native{font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--accent-deep); font-size:22px;}
  .wordrow .native .en-inline{font-family:'Baloo 2',sans-serif; font-weight:600; color:var(--ink); font-size:17px; margin-left:6px;}
  .wordrow .roman{color:var(--soft); font-size:15px; font-weight:600; margin-top:2px;}
  /* The hero card — the primary word reveal. Bigger, centered, vertical
     (icon on top, text below) instead of the compact horizontal bar
     .wordrow uses elsewhere, so this reads as the page's main moment
     rather than one more info row. Gradient background gives it real
     visual weight against the plain white panel around it. */
  .hero-word{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
    background:linear-gradient(160deg,#EAF3FB,#DCEAF9); border-radius:24px; padding:22px 16px 20px;
    margin-bottom:14px; cursor:pointer; position:relative;
    transition:transform .12s cubic-bezier(.34,1.56,.64,1); box-shadow:0 4px 0 rgba(58,74,102,0.08);
  }
  .hero-word:active{transform:scale(0.97); box-shadow:0 1px 0 rgba(58,74,102,0.08);}
  /* Groups the hero card and size buttons into one continuous visual
     unit — same goal as literally nesting the buttons inside the hero
     card, without actually merging two different components into one.
     The inner hero-word's own background/shadow/margin are stripped so
     it blends into this outer card instead of nesting card-in-card;
     heroWordHTML itself is untouched, so its many standalone uses
     elsewhere (Feelings, Numbers, Family/Body, Weather — none of which
     have size buttons) keep their own default card look. */
  .hero-size-group{
    background:linear-gradient(160deg,#EAF3FB,#DCEAF9); border-radius:24px; padding:22px 16px 18px;
    margin-bottom:14px; box-shadow:0 4px 0 rgba(58,74,102,0.08);
  }
  .hero-size-group .hero-word{background:none; box-shadow:none; padding:0; margin-bottom:0;}
  .hero-size-group .size-attached-row{margin-top:16px; padding-top:14px; border-top:2px dashed rgba(58,74,102,0.12);}
  .hero-word .hero-icon{display:block; margin-bottom:8px; animation:emojiPopIn .5s cubic-bezier(.34,1.56,.64,1); transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
  /* Size and colour, taught through text alone until now — this makes
     the concept itself visible: picking "big" or "small" actually grows
     or shrinks the icon, not just the label next to it. */
  .hero-word .hero-icon.size-small{transform:scale(0.62);}
  .hero-word .hero-icon.size-big{transform:scale(1.35);}
  .hero-word .hero-native{font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--accent-deep); font-size:clamp(24px, 7vw, 30px);}
  .hero-word .hero-native .en-inline{font-family:'Baloo 2',sans-serif; font-weight:600; color:var(--ink); font-size:clamp(15px, 4.5vw, 19px); margin-left:8px;}
  .hero-word .hero-pinyin{color:var(--soft); font-size:17px; font-weight:600; margin-top:2px;}
  .hero-word .mini-speak{margin-top:12px;}
  .mini-speak{width:48px; height:48px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:20px; cursor:pointer; box-shadow:0 3px 0 var(--accent-deep); transition:transform .12s cubic-bezier(.34,1.56,.64,1); flex-shrink:0;}
  /* Cultural note — muted deep blue-indigo (echoing traditional 三字经
     book-cover art, not an arbitrary color choice) instead of the
     earlier red/gold, which had no real reference behind it. Vertical
     writing-mode on the title hanzi is authentic to how this text
     actually appears on its own covers/editions — text-orientation:
     upright keeps the characters themselves upright rather than
     rotated sideways, which vertical-rl would otherwise do by default. */
  .cultural-note{
    position:relative; overflow:hidden;
    background:linear-gradient(160deg,#2C4A66,#1D3247); border-radius:20px; padding:18px; margin:14px 0 0;
    border:2px solid #16283D; text-align:center; animation:sentencePop .4s cubic-bezier(.34,1.56,.64,1);
  }
  .cultural-deco{position:absolute; font-size:22px; opacity:.22; pointer-events:none; animation:culturalDecoFloat 6s ease-in-out infinite;}
  @keyframes culturalDecoFloat{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-8px) rotate(6deg);}}
  /* ============================================================
     RECITAL SCENE — the goose-poem MVP for a hidden-discovery hunt
     inside an illustrated moment. Deliberately reuses the app's own
     visual language rather than introducing picture-book illustration:
     the goose itself is the 🪿 emoji (guaranteed to look right, unlike
     a hand-drawn character built blind), the pond is a simple flat CSS
     shape, reeds are 🌿 emoji, and the sky clouds reuse .wx-cloud/
     wxDrift directly from the weather scenes rather than a new
     animation. Hotspots are invisible, generously-sized tap targets
     (not visible "FIND ME" buttons) with only a very faint pulsing
     glow — enough for an attentive child to notice, not so much that
     it reads as game UI. No progress bar, no counter, no score —
     found-badges accumulate quietly in the corner instead.
     ============================================================ */
  .recital-scene{
    position:relative; overflow:hidden; border-radius:20px; height:300px; margin-bottom:14px;
    background:linear-gradient(180deg,#CFE8FA 0%,#EAF3FB 55%,#EAF3FB 100%);
  }
  .recital-pond{
    position:absolute; left:6%; right:6%; bottom:0; height:38%; border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:linear-gradient(180deg,#A9D9F5,#6FB3E0); cursor:pointer; border:none; padding:0;
  }
  .recital-reed{position:absolute; bottom:2%; font-size:34px; pointer-events:none; z-index:2;}
  .recital-goose{
    position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
    width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:74px; line-height:1; z-index:3;
    background:none; border:none; padding:0; cursor:pointer;
    animation:recitalGooseSway 4s ease-in-out infinite;
  }
  @keyframes recitalGooseSway{0%,100%{transform:translateX(-50%) rotate(-2deg);} 50%{transform:translateX(-50%) rotate(2deg);}}
  .recital-ripple{
    position:absolute; left:50%; bottom:2%; width:74px; height:44px; margin-left:-37px;
    border-radius:50%; cursor:pointer; border:none; padding:0; background:none; z-index:4;
  }
  .recital-ripple::before{
    content:''; position:absolute; top:50%; left:50%; width:70px; height:18px; margin:-9px 0 0 -35px;
    border-radius:50%; background:rgba(217,123,116,0.35);
    animation:recitalRipple 2.6s ease-in-out infinite;
  }
  @keyframes recitalRipple{0%,100%{opacity:.35; transform:scaleX(1);} 50%{opacity:.6; transform:scaleX(1.15);}}
  .recital-hotspot{
    position:absolute; width:64px; height:64px; margin-left:-32px; margin-top:-32px;
    border-radius:50%; border:none; background:rgba(255,255,255,0.001); cursor:pointer;
  }
  /* Only the current step's target glows — sequential by design (see
     bindRecitalScene). A free-order version was tried first and
     reverted for a different reason (silent no-ops read as broken); this
     later, more deliberate sequential version keeps that same "every
     tap does something" feel by gating just ONE target at a time,
     rather than gating all of them with no feedback on the wrong ones. */
  .recital-hotspot.active-target{animation:recitalHotspotGlow 1.8s ease-in-out infinite;}
  /* Hint visibility is purely state-driven now (was a one-off JS removal
     scoped to just the goose) — hidden by default on every discovery
     target, shown only on whichever one is currently active. This means
     it naturally reappears for EVERY hotspot in sequence, not just the
     first, and correctly reappears on "Replay discovery" too, since that
     just resets which target has active-target the same way the normal
     sequence does. */
  .discovery-target .tap-hint, .recital-hotspot .tap-hint{
    background:#FFF; border-radius:50%; width:28px; height:28px;
    display:none; align-items:center; justify-content:center; font-size:16px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
  }
  .discovery-target.active-target .tap-hint, .recital-hotspot.active-target .tap-hint{display:flex;}
  .recital-pond .tap-hint{top:65%; left:20%; right:auto; margin-left:0;}
  .just-activated{animation:recitalJustActivated .5s cubic-bezier(.34,1.56,.64,1) !important;}
  @keyframes recitalJustActivated{0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);}}
  /* center-anchored elements (goose, sun, farmer, moon) center via
     translateX(-50%), not via left/right offsets like pond — the
     generic scale-only pop above would replace that transform entirely
     and make them jump sideways during the animation. This used to only
     cover the goose specifically; the moon needed it too, since
     revisiting it for its second discovery is the one case where this
     pop actually fires on it (the very first activation doesn't trigger
     a pop at all, only a re-activation does) — which is exactly why this
     was invisible in testing until the moon was tapped a second time. */
  .center-anchored.just-activated{animation:recitalCenterPopIn .5s cubic-bezier(.34,1.56,.64,1) !important;}
  @keyframes recitalCenterPopIn{0%{transform:translateX(-50%) scale(1);} 40%{transform:translateX(-50%) scale(1.25);} 100%{transform:translateX(-50%) scale(1);}}
  @keyframes recitalHotspotGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.35);}
    50%{box-shadow:0 0 0 8px rgba(255,255,255,0);}
  }
  /* Same box-shadow expanding-ring technique as the hotspot above, not
     the drop-shadow attempt from the previous pass — drop-shadow follows
     an emoji's own irregular glyph outline and reads as a dull haze, not
     the clean circular pulse this needs. Now that .recital-goose has an
     explicit circular box (rather than being sized purely by its emoji's
     own inline metrics), the same ring renders cleanly around it, the
     pond, and the ripple alike. Combined with each element's own base
     animation (sway/ripple) so glowing doesn't interrupt its ambient
     motion. */
  .recital-goose.active-target{animation:recitalGooseSway 4s ease-in-out infinite, recitalHotspotGlow 1.8s ease-in-out infinite;}
  /* Pond specifically needed more than the edge-ring alone — a thin
     ring around a shape this large (88% of the scene's width) is easy
     to miss entirely, unlike the same ring wrapped tightly around the
     small goose. Adding a brightness pulse across the WHOLE surface
     makes the active state unmistakable regardless of shape size. */
  .recital-pond.active-target{animation:recitalHotspotGlow 1.8s ease-in-out infinite, recitalPondBreathe 1.8s ease-in-out infinite;}
  @keyframes recitalPondBreathe{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.18);}}
  .recital-ripple.active-target{animation:recitalHotspotGlow 1.8s ease-in-out infinite;}
  /* One-off reaction animations, layered on top of each element's own
     ambient motion (sway/ripple keep running underneath) rather than
     replacing it — added as a class on tap, removed automatically after
     it plays once. */
  /* Two variants of each reaction: a generic one (safe for margin-
     centered satellite elements — bird, petals, sweat, grain, bowl,
     frost — which have no base transform to preserve) and a
     .center-anchored one (for elements like the goose/sun/farmer that
     center themselves via left:50%+transform:translateX(-50%) — the
     same fix already needed once for the pop-in animation, now applied
     consistently since these reactions are reused across scenes rather
     than being goose-only). Higher specificity on the anchored version
     (2 classes) means an element just needs the .center-anchored class
     alongside .react-bounce etc. to get the correct one automatically. */
  .react-bounce{animation:recitalReactBounce .5s cubic-bezier(.34,1.56,.64,1) !important;}
  @keyframes recitalReactBounce{0%,100%{transform:scale(1);} 50%{transform:scale(1.18);}}
  .center-anchored.react-bounce{animation:recitalGooseSway 4s ease-in-out infinite, recitalReactBounceAnchored .5s cubic-bezier(.34,1.56,.64,1) !important;}
  @keyframes recitalReactBounceAnchored{0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.18);}}
  .center-anchored.react-stretch{animation:recitalGooseSway 4s ease-in-out infinite, recitalReactStretch .6s ease-out !important;}
  @keyframes recitalReactStretch{0%,100%{transform:translateX(-50%) rotate(-2deg) translateY(0);} 50%{transform:translateX(-50%) rotate(-10deg) translateY(-8px) scale(1.08);}}
  .center-anchored.react-paddle{animation:recitalGooseSway 4s ease-in-out infinite, recitalReactPaddle .6s ease-in-out !important;}
  @keyframes recitalReactPaddle{0%,100%{transform:translateX(-50%) rotate(-2deg);} 25%{transform:translateX(-56%) rotate(-8deg);} 75%{transform:translateX(-44%) rotate(4deg);}}
  .react-glow{animation:recitalReactGlow .8s ease-in-out !important;}
  @keyframes recitalReactGlow{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.3);}}
  .react-shimmer{animation:recitalReactShimmer .8s ease-in-out !important;}
  @keyframes recitalReactShimmer{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.75; transform:scale(1.04);}}
  .center-anchored.react-shimmer{animation:recitalReactShimmerAnchored .8s ease-in-out !important;}
  @keyframes recitalReactShimmerAnchored{0%,100%{opacity:1; transform:translateX(-50%) scale(1);} 50%{opacity:.75; transform:translateX(-50%) scale(1.04);}}
  /* Floating "stripe" — now the PRIMARY way the poem's text is shown
     during discovery (the full poem card below is suppressed entirely
     when a scene exists — see renderRecital), not just a lightweight
     aside pointing at a separate card. Reuses the exact same visual
     language as .cultural-note-line (dark navy, bold cream hanzi with
     inline speaker icon, gold pinyin, italic light-blue English) so it
     reads as the same kind of content, just relocated into the world
     instead of below it. */
  .discovery-subtitle{
    position:absolute; top:6%; left:50%; transform:translateX(-50%); z-index:6;
    background:linear-gradient(160deg,#2C4A66,#1D3247); border-radius:16px; padding:12px 20px;
    box-shadow:0 4px 10px rgba(58,74,102,0.3); text-align:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease; max-width:88%;
  }
  .discovery-subtitle.visible{opacity:1;}
  .discovery-subtitle-native{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(20px, 5.5vw, 24px); color:#FBF3E3;}
  .discovery-subtitle-pinyin{font-family:'Baloo 2',sans-serif; font-weight:600; font-size:14px; color:#D9C89A; margin-top:2px;}
  .discovery-subtitle-en{font-size:14px; font-style:italic; color:#C9D6E0; opacity:.85; margin-top:4px;}
  .discovery-line-highlight{
    display:inline-flex; align-items:center; justify-content:center;
    background:#FBEBD2; color:#B5453D; border-radius:50%; width:1.4em; height:1.4em; margin:0 1px;
  }
  .recital-found-row{position:absolute; top:10px; right:12px; display:flex; gap:6px; z-index:4;}
  .recital-found-badge{
    width:30px; height:30px; border-radius:50%; background:#FFF; box-shadow:0 2px 4px rgba(58,74,102,0.2);
    display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#2C4A66;
    animation:emojiPopIn .4s cubic-bezier(.34,1.56,.64,1);
  }
  .recital-reveal{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:5;
    background:#FFF; border-radius:16px; padding:8px 16px; display:flex; gap:16px; align-items:center;
    box-shadow:0 4px 10px rgba(58,74,102,0.2); animation:sentencePop .35s cubic-bezier(.34,1.56,.64,1);
  }
  .recital-reveal-item{display:flex; flex-direction:column; align-items:center; text-align:center;}
  .recital-reveal .native{font-size:22px; font-weight:700; color:#2C4A66;}
  .recital-reveal .pinyin{font-size:13px; font-weight:600; color:#5B7A8C;}
  .recital-reveal .en{font-size:12px; font-style:italic; color:#5B7A8C; opacity:.85;}
  /* Completion actions — the scene itself is untouched (goose still
     swaying, pond still there); these two buttons now sit as their own
     block BELOW the scene, not overlaid on top of it. Hidden entirely
     until the sequence finishes, then pops in using the same
     sentencePop animation already used elsewhere for card entrances. */
  .discovery-complete{display:none;}
  .discovery-complete.visible{display:block; margin-top:14px; animation:sentencePop .4s cubic-bezier(.34,1.56,.64,1);}
  .discovery-actions{display:flex; justify-content:center; gap:20px;}
  .discovery-action-btn{
    background:#FFF; border:none; border-radius:999px; padding:0 18px; min-height:48px;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; color:#2C4A66;
    box-shadow:0 4px 0 #C2D6E0; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
    transition:transform .12s ease;
  }
  .discovery-action-btn:active{transform:translateY(4px); box-shadow:0 0 0 #C2D6E0;}
  .is-hidden{display:none !important;}
  @media (prefers-reduced-motion: reduce){
    .recital-goose, .recital-ripple, .recital-hotspot, .recital-pond, .wx-cloud,
    .react-bounce, .react-stretch, .react-paddle, .react-glow, .react-shimmer, .discovery-target.active-target,
    .spring-sun, .spring-branch, .farmer-figure, .night-moon, .night-star{ animation:none !important; }
  }
  /* ============================================================
     春晓 (Spring Morning) — dawn garden. Reuses the goose scene's
     skeleton (ground shape + central character + satellites) with a
     distinct dawn palette (pink-gold fading to pale blue) instead of
     咏鹅's daytime blue.
     ============================================================ */
  .spring-scene{background:linear-gradient(180deg,#FBD8C8 0%,#FDEBE0 30%,#D8ECFA 70%,#EAF3FB 100%) !important;}
  .spring-ground{
    position:absolute; left:6%; right:6%; bottom:0; height:26%; border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:linear-gradient(180deg,#C9DFC0,#AFCFA0);
  }
  .spring-branch{position:absolute; top:6%; right:8%; font-size:38px; pointer-events:none; z-index:2;}
  .spring-sun{
    position:absolute; top:10%; left:50%; transform:translateX(-50%); width:70px; height:70px; border-radius:50%;
    border:none; padding:0; cursor:pointer; background:radial-gradient(circle,#FFE9B0,#FFD27A);
    box-shadow:0 0 20px rgba(255,210,122,0.6); animation:recitalGooseSway 5s ease-in-out infinite;
  }
  .spring-bird{font-size:30px;}
  .spring-puddle{
    position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
    width:80px; height:20px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:rgba(140,170,190,0.4);
  }
  .spring-puddle.active-target{animation:recitalHotspotGlow 1.8s ease-in-out infinite, recitalReactGlow 1.8s ease-in-out infinite;}
  .spring-petals{font-size:20px;}
  .spring-blossom-accent{position:absolute; pointer-events:none; z-index:1; opacity:.8;}
  /* ============================================================
     悯农 (Sympathy for Farmers) — dry midday field. Same reused
     skeleton, warm golden-tan palette for heat and effort rather than
     morning or night.
     ============================================================ */
  .farmer-scene{background:linear-gradient(180deg,#FBDDA8 0%,#FCE9C4 45%,#F0DCB8 100%) !important;}
  .farmer-ground{
    position:absolute; left:4%; right:4%; bottom:0; height:22%; border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:linear-gradient(180deg,#D9B98A,#C2A06E);
  }
  .farmer-grain-accent{position:absolute; bottom:2%; font-size:30px; pointer-events:none; z-index:2;}
  .farmer-figure{
    position:absolute; left:50%; bottom:16%; transform:translateX(-50%); width:90px; height:90px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:64px; line-height:1;
    background:none; border:none; padding:0; cursor:pointer; animation:recitalGooseSway 4s ease-in-out infinite;
  }
  .farmer-figure::before{content:'🧑\200D🌾';}
  .farmer-bowl{font-size:26px;}
  .farmer-grain{font-size:24px;}
  /* ============================================================
     静夜思 (Thinking of Home on a Quiet Night) — deliberately the odd
     one out. Deeper, quieter palette than the other three; no bouncy
     reactions anywhere, only react-shimmer.
     ============================================================ */
  .night-scene{background:linear-gradient(180deg,#1B2A4A 0%,#2C4A66 60%,#3A5A78 100%) !important;}
  .night-ground{
    position:absolute; left:6%; right:6%; bottom:0; height:16%; border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:linear-gradient(180deg,#3A4A5E,#2C3A4C);
  }
  .night-moon{
    position:absolute; top:14%; left:50%; transform:translateX(-50%); width:76px; height:76px; border-radius:50%;
    border:none; padding:0; cursor:pointer; background:radial-gradient(circle,#FFFDF0,#F5EFC9);
    box-shadow:0 0 24px rgba(255,253,240,0.5); animation:recitalMoonGlow 3.5s ease-in-out infinite;
  }
  @keyframes recitalMoonGlow{0%,100%{box-shadow:0 0 24px rgba(255,253,240,0.5);} 50%{box-shadow:0 0 32px rgba(255,253,240,0.75);}}
  .night-frost{
    position:absolute; bottom:5%; left:50%; transform:translateX(-50%);
    width:110px; height:22px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:radial-gradient(ellipse, rgba(235,245,255,0.6), rgba(235,245,255,0.2) 70%, transparent);
    box-shadow:0 0 14px rgba(235,245,255,0.35);
  }
  .night-frost.active-target{animation:recitalHotspotGlow 1.8s ease-in-out infinite;}
  .night-home{
    position:absolute; bottom:9%; left:16%; width:20px; height:20px; border-radius:50%;
    border:none; padding:0; cursor:pointer;
    background:radial-gradient(circle,#FFD9A0,#E8A860);
    box-shadow:0 0 10px rgba(255,200,140,0.6);
    animation:nightHomeFlicker 3s ease-in-out infinite;
  }
  @keyframes nightHomeFlicker{0%,100%{opacity:.7;} 50%{opacity:1;}}
  .night-home.active-target{animation:nightHomeFlicker 3s ease-in-out infinite, recitalHotspotGlow 1.8s ease-in-out infinite;}
  .night-star{position:absolute; font-size:12px; pointer-events:none; z-index:1; animation:nightStarTwinkle 2.4s ease-in-out infinite;}
  @keyframes nightStarTwinkle{0%,100%{opacity:.25;} 50%{opacity:.9;}}
  .recital-title-header{text-align:center; margin-bottom:6px;}
  .recital-author-caption{text-align:center; font-size:14px; color:#5B7A8C; opacity:.85; line-height:1.5; margin:0 0 14px; padding:0 8px;}
  .cultural-note-title{font-family:'Baloo 2',sans-serif; font-weight:700; color:#2C4A66; font-size:clamp(24px, 6vw, 28px);}
  .cultural-note-title .en-inline{font-family:'Baloo 2',sans-serif; font-weight:600; color:#5B7A8C; font-size:clamp(14px, 4vw, 16px); margin-left:8px;}
  .cultural-note-title-pinyin{color:#5B7A8C; font-size:14px; font-weight:600; margin-top:2px; opacity:.9;}
  .cultural-note-lines-heading{font-size:14px; font-weight:700; color:#D9C89A; margin-bottom:10px; text-align:center;}
  .cultural-note-line{position:relative; z-index:1; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,0.15);}
  .cultural-note-line:last-of-type{border-bottom:none; margin-bottom:6px; padding-bottom:0;}
  .cultural-note-native{font-size:22px; font-weight:700; color:#FBF3E3; cursor:pointer; margin-bottom:4px;}
  /* White circle behind any small utility-icon emoji (speaker icons,
     etc.) sitting inline against a background — general rule, not
     specific to one context: a bare emoji floating on a colored/dark
     background reads inconsistently and can blend in depending on what's
     behind it. Does NOT apply to "scene" emoji meant to look like they
     belong in an illustrated world (the goose, bird, farmer, moon) —
     those should look like part of the scene, not like icons. */
  .mini-speak-inline{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; background:#FFF; box-shadow:0 1px 3px rgba(58,74,102,0.2); vertical-align:middle;
  }
  .cultural-note-native .mini-speak-inline{width:26px; height:26px; font-size:14px; margin-left:6px;}
  .bonus-word .mini-speak-inline{width:22px; height:22px; font-size:12px; margin-left:4px;}
  .cultural-note-pinyin{font-size:14px; font-weight:600; color:#D9C89A; opacity:.9; margin-bottom:4px;}
  .cultural-note-en{font-size:13px; font-style:italic; color:#C9D6E0; opacity:.85;}
  .big-btn.cultural{background:#C9A961; box-shadow:0 6px 0 #9C7F3F; color:#2C1F0F; position:relative; z-index:1; margin-top:4px;}
  .big-btn.cultural:active{box-shadow:0 2px 0 #9C7F3F;}
  .mini-speak:active{transform:scale(0.9);}
  .mini-speak.gold{background:var(--gold); box-shadow:0 3px 0 var(--gold-deep); color:#5c4419;}
  /* Bonus word — deliberately NOT styled like .wordrow (the primary word
     card). No icon, muted neutral background instead of the vivid
     word-level blue, smaller text, inline layout rather than a
     full-width card. This is a small aside, not a second word carrying
     equal weight to the one the child actually tapped to get here. */
  .bonus-word{
    display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; background:#F1F3F6; border:none; border-radius:12px;
    padding:7px 12px; margin-bottom:10px; cursor:pointer; font-family:'Baloo 2',sans-serif;
    transition:transform .12s cubic-bezier(.34,1.56,.64,1); box-shadow:0 2px 0 rgba(58,74,102,0.1);
  }
  .bonus-word:active{transform:scale(0.96) translateY(1px); box-shadow:0 1px 0 rgba(58,74,102,0.1);}
  .bonus-word .row1{display:flex; align-items:center; gap:8px;}
  .bonus-word .native{font-weight:700; color:var(--soft); font-size:17px;}
  .bonus-word .pinyin{font-size:14px; font-weight:600; color:var(--soft); opacity:.8;}
  .bonus-word .en{font-size:14px; font-weight:600; color:var(--soft); opacity:.8;}
  /* Small, deliberately understated — this is an optional extra tap for
     a child who wants more, not a primary action competing with the
     bonus word itself for attention. */
  .bonus-cycle-btn{
    background:none; border:none; padding:10px 8px; margin:0; font-family:'Baloo 2',sans-serif;
    font-size:14px; font-weight:600; color:var(--soft); opacity:.65; cursor:pointer;
    text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px;
    transition:opacity .15s ease; min-height:44px; display:inline-flex; align-items:center;
  }
  .bonus-cycle-btn:active{opacity:1;}
  /* ============================================================
     WEATHER SCENE — ambient CSS animation behind/over the hero card
     for each weather word (actual falling rain when a child taps into
     雨天, etc). Entirely CSS keyframes (transform/opacity only, GPU-
     cheap) — no animation library, matching how every other motion in
     this app already works (mascot reactions, tap-hints, emoji pop-
     ins). This is the first AMBIENT (not tap-by-tap) motion in the
     app, but it's the direct visual consequence of the child's own tap
     into that specific word — same relationship the hero card itself
     already has to that tap — not something that starts on its own
     before any interaction. All particles: aria-hidden, pointer-
     events:none, so they can never intercept the hero card's own
     tap-to-hear gesture underneath/around them. Respects prefers-
     reduced-motion, disabling all of it for anyone with that OS
     setting on — not asked for explicitly, but a near-zero-cost,
     values-aligned addition given this project's accessibility focus.
     ============================================================ */
  .weather-scene{
    position:relative; overflow:hidden; border-radius:28px; padding:22px 0; margin-bottom:14px;
    transform:translateZ(0); -webkit-transform:translateZ(0); /* forces its own compositing layer — without this, Safari sometimes fails to clip rotated/transformed children to an overflow:hidden + border-radius parent, letting them paint past the card's edge entirely */
  }
  .weather-scene .hero-word{position:relative; z-index:2; margin-bottom:0;}
  .weather-scene [class^="wx-"]{position:absolute; top:-24px; pointer-events:none; z-index:3; will-change:transform;}
  .wx-drop{font-size:20px; animation-name:wxFall; animation-timing-function:linear; animation-iteration-count:infinite; opacity:.75;}
  @keyframes wxFall{
    0%{transform:translateY(-24px); opacity:0;}
    12%{opacity:.8;}
    100%{transform:translateY(210px); opacity:0;}
  }
  .wx-flake{font-size:18px; animation-name:wxSnowFall; animation-timing-function:linear; animation-iteration-count:infinite;}
  @keyframes wxSnowFall{
    0%{transform:translate(0,-24px) rotate(0deg); opacity:0;}
    10%{opacity:.9;}
    30%{transform:translate(12px,50px) rotate(60deg);}
    55%{transform:translate(-10px,100px) rotate(140deg);}
    80%{transform:translate(10px,160px) rotate(220deg);}
    100%{transform:translate(0,210px) rotate(280deg); opacity:0;}
  }
  .wx-leaf{font-size:20px; animation-name:wxBlow; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
  @keyframes wxBlow{
    0%{transform:translate(-40px,0) rotate(0deg); opacity:0;}
    15%{opacity:.85;} 85%{opacity:.85;}
    100%{transform:translate(260px,10px) rotate(200deg); opacity:0;}
  }
  .wx-cloud{position:absolute; opacity:.55; animation-name:wxDrift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; pointer-events:none; z-index:3;}
  @keyframes wxDrift{0%{transform:translateX(-10px);} 100%{transform:translateX(200px);}}
  .wx-sparkle{font-size:16px; animation-name:wxTwinkle; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
  @keyframes wxTwinkle{0%,100%{opacity:.15; transform:scale(.75);} 50%{opacity:1; transform:scale(1.05);}}
  .wx-flash{position:absolute; inset:0; background:rgba(255,250,220,0.85); z-index:4; pointer-events:none; animation:wxFlash 5s ease-in-out infinite;}
  @keyframes wxFlash{0%, 92%, 100%{opacity:0;} 93%, 95%{opacity:1;}}
  .wx-bolt{position:absolute; top:10px; font-size:26px; z-index:5; pointer-events:none; animation:wxFlash 5s ease-in-out infinite;}
  @media (prefers-reduced-motion: reduce){
    .weather-scene [class^="wx-"], .wx-flash, .wx-bolt, .cultural-deco{ animation:none !important; }
  }
  .modifier-row{display:flex; gap:14px; justify-content:center; margin-top:6px; flex-wrap:wrap;}
  .mod-btn{
    border:2px solid #DCEAF5; border-radius:20px; padding:16px 22px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px;
    background:var(--panel); color:var(--accent-deep); box-shadow:0 5px 0 rgba(58,74,102,0.12);
    cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .mod-btn:active{transform:translateY(3px);}
  .mod-btn.chosen{background:var(--accent); color:#fff; border-color:var(--accent-deep);}
  /* colour swatches */
  .colour-row{display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap;}
  /* word-chip: the reusable "here's what's available" component — shows
     native + pinyin + English together, instead of hiding options behind
     a blind cycle/rotate button. Used for both colour choices and verb
     choices. Previously a small, cramped horizontal pill — too small a
     tap target for young fingers and visually inconsistent with the
     bigger, chunkier size-modifier cards right above it. Now matches
     mod-btn's size/weight directly (same padding scale, same pressable
     shadow), just laid out in a grid instead of one big row of two. */
  .word-chip{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:2px solid #DCEAF5; border-radius:18px; padding:14px 8px; min-height:78px;
    background:var(--panel); cursor:pointer; font-family:'Baloo 2',sans-serif;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 4px 0 rgba(58,74,102,0.12);
  }
  .word-chip:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(58,74,102,0.12);}
  .word-chip.chosen{background:var(--accent); border-color:var(--accent-deep); box-shadow:0 4px 0 var(--accent-deep);}
  .word-chip.chosen .native, .word-chip.chosen .pinyin, .word-chip.chosen .en{color:#fff;}
  .word-chip .dot{width:20px; height:20px; border-radius:7px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(58,74,102,0.15); margin-bottom:1px;}
  .word-chip .txt{display:flex; flex-direction:column; align-items:center; line-height:1.3; text-align:center;}
  .word-chip .native{font-weight:700; font-size:19px; color:var(--accent-deep);}
  .word-chip .pinyin{font-size:14px; font-weight:600; color:var(--soft);}
  .word-chip .en{font-size:14px; font-weight:600; color:var(--soft);}
  .word-chip-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px;}
  /* Colour chips must NOT fill with a solid accent colour when chosen —
     the accent blue is the exact same hex as the "blue" swatch itself, so
     a chosen blue chip made its own dot invisible against its own
     background. Any future palette colour could hit the same collision,
     so instead of picking a different fill colour, chosen colour chips
     keep a white background and show a dark ring instead — the swatch dot
     then stays visible against white no matter which colour it is. More
     specific than .word-chip.chosen, so this overrides it. */
  .word-chip.colour-chip.chosen{background:var(--panel); border-color:var(--ink); box-shadow:0 0 0 2px var(--ink);}
  .word-chip.colour-chip.chosen .native{color:var(--ink);}
  .word-chip.colour-chip.chosen .pinyin, .word-chip.colour-chip.chosen .en{color:var(--soft);}
  .colour-chip-inline{display:inline-flex; align-items:center; gap:5px; vertical-align:middle;}
  .colour-chip-inline .swatch{width:16px; height:16px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(58,74,102,0.2);}
  .big-btn{
    width:100%; padding:16px; border:none; border-radius:20px; background:var(--success); color:#fff;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px; cursor:pointer; box-shadow:0 6px 0 var(--success-deep);
    transition:transform .12s ease; margin-top:6px;
  }
  .big-btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--success-deep);}
  .big-btn.secondary{background:var(--accent); box-shadow:0 6px 0 var(--accent-deep);}
  .big-btn[disabled]{opacity:0.5; cursor:default;}
  .sentence-card{background:linear-gradient(135deg,#FFF9EC,#FDF3DC); border-radius:20px; padding:16px 18px; margin:14px 0; border:2px dashed var(--gold-deep); cursor:pointer; transition:transform .12s cubic-bezier(.34,1.56,.64,1); position:relative; animation:sentencePop .4s cubic-bezier(.34,1.56,.64,1);}
  /* Fires every time the card is freshly rendered — first sentence AND
     every change after — since the card is recreated fresh each time
     (innerHTML swap), a plain CSS animation replays automatically with
     no JS needed. Deliberately subtle/quick: unlike the one-time cloud
     burst, this WILL repeat on every single change, so it needs to
     stay lightweight rather than wear out its welcome. Exists because
     the mascot (which does react) can be scrolled off-screen by this
     point, and the cloud burst only fires once per unique sentence —
     without this, a child picking a different verb after the first one
     had nothing telling them the sentence text actually changed. */
  @keyframes sentencePop{
    0%{transform:scale(0.94); opacity:0.6;}
    100%{transform:scale(1); opacity:1;}
  }
  /* Sentence-completion celebration — a burst of small "baby cloud"
     characters (the mascot's own visual family, not generic stars) the
     first time a sentence actually completes for a given word. Anchored
     to the sentence card itself, not the mascot header — by the time a
     child reaches this step they've usually scrolled well past the
     mascot, so anchoring there would celebrate somewhere invisible.
     "Popcorn" timing: staggered random delays and angles, not one
     uniform simultaneous burst like the routine word-pick sparkle. */
  .baby-cloud-burst{position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none; z-index:3;}
  .baby-cloud{
    position:absolute; top:0; left:0; pointer-events:none;
    animation:cloudPop .9s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:var(--delay, 0s);
  }
  @keyframes cloudPop{
    0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(0.3); opacity:0;}
    30%{opacity:1;}
    100%{transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-95px) scale(1); opacity:0;}
  }
  .sentence-card:active{transform:scale(0.97);}
  .sentence-card .native-line{font-size:24px; font-weight:700; color:var(--accent-deep); font-family:'Baloo 2',sans-serif; text-align:center;}
  .sentence-card .roman-line{font-size:16px; color:var(--soft); font-weight:600; text-align:center; margin-top:2px;}
  .sentence-card .en-line{font-size:15px; color:var(--ink); text-align:center; margin-top:6px; font-style:italic;}
  .sentence-card .play-row{display:flex; justify-content:center; margin-top:10px;}
  /* Secondary sentence card — blue accent instead of gold, slightly
     smaller — for "you can also say" bonus phrases (e.g. 现在在下雨
     alongside 今天是雨天). Visually distinct from the primary taught
     sentence so it reads as a bonus alternate, not a second equally-
     weighted "correct answer" competing with the main one. */
  .sentence-card.secondary{background:#EAF3FB; border:2px dashed var(--accent-deep); padding:13px 16px;}
  .sentence-card.secondary .native-line{font-size:21px;}
  .footnote{text-align:center; color:var(--soft); font-size:15px; margin-top:20px; line-height:1.6; padding:0 6px;}
  /* Parent/educator + privacy content — both collapsed by default, so
     the only thing visible on the page by default is one small line:
     "For parents & teachers · Privacy". Each opens independently.
     Styled as plain dotted-underline text — a small underlined label is
     a universally understood "this is tappable" signal on its own, the
     same convention almost every site's footer already uses, no icon
     needed. Uses a real <button>, fully reset from browser default
     button chrome AND its default focus outline replaced with one
     deliberate, subtle style. The row of labels (.parent-footer-row) is
     structurally separate from the content divs below it — each
     content div used to live inside that button's own wrapper, so
     opening one forced the row to reflow and pushed the other button
     onto a new line; now the row's layout never changes regardless of
     what's open. */
  .parent-footer{
    max-width:480px; margin:36px auto 20px; padding:16px 20px 4px;
    text-align:center; font-family:'Baloo 2',sans-serif; color:var(--soft);
    position:relative; z-index:1;
  }
  .parent-footer-row{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
  .parent-footer-toggle{
    background:none; border:none; padding:0; margin:0; font-family:inherit;
    font-size:14px; font-weight:600; color:var(--soft); opacity:0.6;
    cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
    text-underline-offset:3px; transition:opacity .15s ease, color .15s ease; border-radius:4px;
  }
  .parent-footer-toggle:active{opacity:0.85;}
  .parent-footer-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  /* Bolder + darker while open, so it visibly reads as "this is the one
     currently expanded" rather than looking identical to the closed
     label next to it. */
  .parent-footer-toggle[aria-expanded="true"]{
    opacity:1; font-weight:700; color:var(--accent-deep); text-decoration-style:solid;
  }
  .parent-footer-divider{font-size:12px; opacity:0.35;}
  .parent-footer-body{
    max-width:440px; margin:12px auto 0; padding-top:10px; text-align:left;
    border-top:1px solid rgba(58,74,102,0.1); animation:footerBodyFade .25s ease;
  }
  .parent-footer-body p{font-size:14px; line-height:1.65; opacity:0.7; margin:0 0 8px; font-weight:500; text-align:left;}
  @keyframes footerBodyFade{from{opacity:0;} to{opacity:1;}}
  /* sibling size-pair — each figure is now its own button (tapping either
     one teaches that specific word), not just a static visual */
  .sibling-pair{display:flex; gap:16px; align-items:flex-end; justify-content:center; margin-bottom:4px;}
  .sib{
    display:flex; align-items:center; justify-content:center; border-radius:50%; background:#EAF3FB;
    border:none; cursor:pointer; padding:0; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
  }
  .sib:active{transform:scale(0.9);}
  .sib.big{width:64px; height:64px; font-size:38px;}
  .sib.small{width:46px; height:46px; font-size:26px;}
  .sib.highlight{box-shadow:0 0 0 3px var(--panel), 0 0 0 6px var(--accent);}
  /* numbers */
  .num-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
  .num-tile{border:none; border-radius:16px; aspect-ratio:1/1; font-size:clamp(22px, 7vw, 40px); cursor:pointer; background:#EAF3FB; display:flex; align-items:center; justify-content:center; transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease; box-shadow:0 3px 0 rgba(58,74,102,0.08);}
  .num-tile:active{transform:scale(0.92) rotate(0deg) !important; box-shadow:0 1px 0 rgba(58,74,102,0.08);}
  .num-tile.active-noun{box-shadow:0 0 0 3px var(--panel), 0 0 0 6px var(--accent);}
  .scroll-hint{
    position:fixed; left:0; right:0; bottom:0; height:56px; pointer-events:none; z-index:5;
    background:linear-gradient(180deg, rgba(243,248,253,0), rgba(243,248,253,0.94) 70%);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;
    transition:opacity .25s ease;
  }
  .scroll-hint .chev{font-size:20px; color:var(--accent-deep); opacity:.55; animation:scrollBounce 1.6s ease-in-out infinite;}
  @keyframes scrollBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}
</style>
</head>
<body>
<noscript>
  <div style="max-width:600px; margin:40px auto; padding:24px; font-family:sans-serif; text-align:center;">
    <h1>Hello Little Cloud</h1>
    <p>A playful Mandarin learning app for children ages 4-8, covering 15 everyday topics — animals, food, family, feelings, numbers, and more. Please enable JavaScript to use the interactive app.</p>
  </div>
</noscript>
<div class="deco d1">☁️</div>
<div class="deco d2">⭐</div>
<div class="deco d3">🌈</div>
<div class="deco d4">✨</div>
<div class="scroll-hint" id="scrollHint"><span class="chev">⌄</span></div>
<div class="app">
  <header>
    <div class="mascot-wrap">
      <svg viewBox="0 0 300 180" class="mascot-svg" id="mascotSvg" aria-hidden="true">
        <ellipse cx="150" cy="170" rx="65" ry="7" fill="rgba(58,74,102,0.08)"/>
        <g fill="#FFFFFF" stroke="#D6E9FA" stroke-width="2">
          <ellipse cx="150" cy="112" rx="92" ry="42"/>
          <circle cx="92" cy="88" r="40"/>
          <circle cx="150" cy="68" r="48"/>
          <circle cx="208" cy="88" r="40"/>
        </g>
        <circle cx="128" cy="102" r="6" fill="#3A4A66" id="mascotEyeL"/>
        <circle cx="172" cy="102" r="6" fill="#3A4A66" id="mascotEyeR"/>
        <circle cx="110" cy="114" r="8" fill="#F6D8E0"/>
        <circle cx="190" cy="114" r="8" fill="#F6D8E0"/>
        <path d="M132,118 Q150,130 168,118" fill="none" stroke="#3A4A66" stroke-width="5" stroke-linecap="round" id="mascotMouth"/>
      </svg>
    </div>
    <h1>Little Cloud</h1>
    <div class="tagline">Discover your little world of words</div>
  </header>
  <!-- Static, crawlable summary of the app's actual vocabulary content —
       every word/category below only otherwise exists inside JS arrays
       (ANIMALS, VEHICLES, etc.) and is written into the DOM via innerHTML
       only after a child taps through world -> category -> word. Googlebot
       renders JS but does not simulate that multi-tap sequence, so without
       this block, none of the app's actual vocabulary is indexable — Google
       has no way to know a search like "how to say frog in Mandarin" has an
       answer on this page. Real content, not bot-only cloaking: every word
       here is pulled directly from the same ANIMALS/VEHICLES/etc. arrays the
       live app uses, capped to a sample per category (not the full list) to
       keep this from growing unbounded as content is added. Hidden the same
       way the parent-footer content already is elsewhere on this page (plain
       `hidden` attribute, not display:none via a class) — content genuinely
       in the DOM for every visitor, not shown selectively to bots.  -->
  <section id="seoContent" hidden>
    <h2>Mandarin words kids can explore in Hello Little Cloud, by topic</h2>
    <p>Hello Little Cloud is a free, playful Mandarin Chinese learning app for children ages 4-8, organized into 15 everyday topics. Each word can be tapped to hear it spoken aloud, then built into a simple spoken sentence.</p>
    <h3>Animals (动物, dòng wù)</h3>
    <ul>
      <li>兔子 (tù zi) &ndash; rabbit</li>
      <li>跳 (tiào) &ndash; hop</li>
      <li>狗 (gǒu) &ndash; dog</li>
      <li>跑 (pǎo) &ndash; run</li>
      <li>猫 (māo) &ndash; cat</li>
      <li>抓 (zhuā) &ndash; scratch</li>
      <li>熊猫 (xióng māo) &ndash; panda</li>
      <li>爬 (pá) &ndash; climb</li>
      <li>熊 (xióng) &ndash; bear</li>
      <li>吼 (hǒu) &ndash; roar</li>
    </ul>
    <h3>Numbers (数字, shù zì)</h3>
    <ul>
      <li>一 (yī) &ndash; one</li>
      <li>二 (èr) &ndash; two</li>
      <li>三 (sān) &ndash; three</li>
      <li>四 (sì) &ndash; four</li>
      <li>五 (wǔ) &ndash; five</li>
      <li>六 (liù) &ndash; six</li>
      <li>七 (qī) &ndash; seven</li>
      <li>八 (bā) &ndash; eight</li>
      <li>九 (jiǔ) &ndash; nine</li>
      <li>十 (shí) &ndash; ten</li>
    </ul>
    <h3>Shapes (形状, xíng zhuàng)</h3>
    <ul>
      <li>圆形 (yuán xíng) &ndash; circle</li>
      <li>方形 (fāng xíng) &ndash; square</li>
      <li>三角形 (sān jiǎo xíng) &ndash; triangle</li>
      <li>星星 (xīng xing) &ndash; star</li>
      <li>爱心 (ài xīn) &ndash; heart</li>
      <li>十字 (shí zì) &ndash; cross</li>
    </ul>
    <h3>Transport (交通, jiāo tōng)</h3>
    <ul>
      <li>汽车 (qì chē) &ndash; car</li>
      <li>公交车 (gōng jiāo chē) &ndash; bus</li>
      <li>出租车 (chū zū chē) &ndash; taxi</li>
      <li>警车 (jǐng chē) &ndash; police car</li>
      <li>消防车 (xiāo fáng chē) &ndash; fire truck</li>
      <li>救护车 (jiù hù chē) &ndash; ambulance</li>
      <li>自行车 (zì xíng chē) &ndash; bicycle</li>
      <li>摩托车 (mó tuō chē) &ndash; motorcycle</li>
      <li>飞机 (fēi jī) &ndash; airplane</li>
      <li>直升机 (zhí shēng jī) &ndash; helicopter</li>
    </ul>
    <h3>Sports (运动, yùn dòng)</h3>
    <ul>
      <li>足球 (zú qiú) &ndash; soccer ball</li>
      <li>踢 (tī) &ndash; play</li>
      <li>篮球 (lán qiú) &ndash; basketball</li>
      <li>打 (dǎ) &ndash; play</li>
      <li>网球 (wǎng qiú) &ndash; tennis ball</li>
      <li>棒球 (bàng qiú) &ndash; baseball</li>
      <li>排球 (pái qiú) &ndash; volleyball</li>
      <li>乒乓球 (pīng pāng qiú) &ndash; ping-pong ball</li>
      <li>羽毛球 (yǔ máo qiú) &ndash; badminton</li>
    </ul>
    <h3>Hobbies (爱好, ài hào)</h3>
    <ul>
      <li>钢琴 (gāng qín) &ndash; piano</li>
      <li>弹 (tán) &ndash; play</li>
      <li>吉他 (jí tā) &ndash; guitar</li>
      <li>拼图 (pīn tú) &ndash; puzzle</li>
      <li>拼 (pīn) &ndash; put together</li>
      <li>溜溜球 (liū liū qiú) &ndash; yo-yo</li>
      <li>玩 (wán) &ndash; play with</li>
      <li>风筝 (fēng zheng) &ndash; kite</li>
      <li>放 (fàng) &ndash; fly</li>
    </ul>
    <h3>Food (食物, shí wù)</h3>
    <ul>
      <li>苹果 (píng guǒ) &ndash; apple</li>
      <li>好吃 (hǎo chī) &ndash; delicious</li>
      <li>香蕉 (xiāng jiāo) &ndash; banana</li>
      <li>西瓜 (xī guā) &ndash; watermelon</li>
      <li>甜 (tián) &ndash; sweet</li>
      <li>草莓 (cǎo méi) &ndash; strawberry</li>
      <li>橙子 (chéng zi) &ndash; orange</li>
      <li>柠檬 (níng méng) &ndash; lemon</li>
      <li>酸 (suān) &ndash; sour</li>
      <li>芒果 (máng guǒ) &ndash; mango</li>
    </ul>
    <h3>Places (地方, dì fang)</h3>
    <ul>
      <li>学校 (xué xiào) &ndash; school</li>
      <li>公园 (gōng yuán) &ndash; park</li>
      <li>饭馆 (fàn guǎn) &ndash; restaurant</li>
      <li>商店 (shāng diàn) &ndash; store</li>
      <li>家 (jiā) &ndash; home</li>
      <li>要回 (yào huí) &ndash; want to go</li>
      <li>客厅 (kè tīng) &ndash; living room</li>
      <li>卧室 (wò shì) &ndash; bedroom</li>
      <li>厕所 (cè suǒ) &ndash; toilet</li>
      <li>浴室 (yù shì) &ndash; bath</li>
    </ul>
    <h3>Family (家人, jiā rén)</h3>
    <ul>
      <li>爸爸 (bà ba) &ndash; father</li>
      <li>妈妈 (mā ma) &ndash; mother</li>
      <li>哥哥 (gē ge) &ndash; older brother</li>
      <li>弟弟 (dì di) &ndash; younger brother</li>
      <li>姐姐 (jiě jie) &ndash; older sister</li>
      <li>妹妹 (mèi mei) &ndash; younger sister</li>
      <li>爷爷 (yé ye) &ndash; grandfather</li>
      <li>奶奶 (nǎi nai) &ndash; grandmother</li>
      <li>朋友 (péng you) &ndash; friend</li>
      <li>人 (rén) &ndash; person</li>
    </ul>
    <h3>Body (身体, shēn tǐ)</h3>
    <ul>
      <li>头 (tóu) &ndash; head</li>
      <li>头发 (tóu fa) &ndash; hair</li>
      <li>手 (shǒu) &ndash; hand</li>
      <li>脚 (jiǎo) &ndash; foot</li>
      <li>眼睛 (yǎn jing) &ndash; eyes</li>
      <li>鼻子 (bí zi) &ndash; nose</li>
      <li>嘴巴 (zuǐ ba) &ndash; mouth</li>
    </ul>
    <h3>Feelings (心情, xīn qíng)</h3>
    <ul>
      <li>热 (rè) &ndash; hot</li>
      <li>冷 (lěng) &ndash; cold</li>
      <li>渴 (kě) &ndash; thirsty</li>
      <li>饿 (è) &ndash; hungry</li>
      <li>饱 (bǎo) &ndash; full</li>
      <li>开心 (kāi xīn) &ndash; happy</li>
      <li>伤心 (shāng xīn) &ndash; sad</li>
      <li>生气 (shēng qì) &ndash; angry</li>
      <li>累 (lèi) &ndash; tired</li>
    </ul>
    <h3>Cooking (做饭, zuò fàn)</h3>
    <ul>
      <li>做饭 (zuò fàn) &ndash; cook</li>
      <li>切菜 (qiē cài) &ndash; cut vegetables</li>
      <li>洗菜 (xǐ cài) &ndash; wash vegetables</li>
      <li>打鸡蛋 (dǎ jī dàn) &ndash; crack an egg</li>
      <li>炒菜 (chǎo cài) &ndash; stir-fry</li>
      <li>烤蛋糕 (kǎo dàn gāo) &ndash; bake a cake</li>
    </ul>
    <h3>Cleaning (打扫, dǎ sǎo)</h3>
    <ul>
      <li>扫地 (sǎo dì) &ndash; sweep the floor</li>
      <li>拖地 (tuō dì) &ndash; mop the floor</li>
      <li>洗碗 (xǐ wǎn) &ndash; wash dishes</li>
      <li>洗衣服 (xǐ yī fu) &ndash; wash clothes</li>
      <li>擦桌子 (cā zhuō zi) &ndash; wipe the table</li>
      <li>倒垃圾 (dào lā jī) &ndash; take out the trash</li>
    </ul>
    <h3>Daily Habits (日常习惯, rìcháng xíguàn)</h3>
    <ul>
      <li>刷牙 (shuā yá) &ndash; brush teeth</li>
      <li>洗澡 (xǐ zǎo) &ndash; take a bath</li>
      <li>洗脸 (xǐ liǎn) &ndash; wash your face</li>
      <li>梳头 (shū tóu) &ndash; comb your hair</li>
      <li>穿衣服 (chuān yī fu) &ndash; get dressed</li>
      <li>起床 (qǐ chuáng) &ndash; wake up</li>
      <li>睡觉 (shuì jiào) &ndash; go to sleep</li>
    </ul>
    <h3>Weather (天气, tiān qì)</h3>
    <ul>
      <li>晴天 (qíng tiān) &ndash; sunny</li>
      <li>雨天 (yǔ tiān) &ndash; rainy</li>
      <li>雪天 (xuě tiān) &ndash; snowy</li>
      <li>大风天 (dà fēng tiān) &ndash; windy</li>
      <li>阴天 (yīn tiān) &ndash; cloudy</li>
      <li>雷雨 (léi yǔ) &ndash; thunderstorm</li>
      <li>彩虹 (cǎi hóng) &ndash; rainbow</li>
    </ul>
    <h3>Classical poems &amp; recitals (古诗, gǔ shī)</h3>
    <p>Alongside everyday vocabulary, Hello Little Cloud introduces children to five short classical Chinese texts, each with full audio, pinyin, and English meaning.</p>
    <ul>
      <li>三字经 (Sān Zì Jīng) &ndash; the Three Character Classic, a traditional first text for Chinese children</li>
      <li>咏鹅 (Yǒng É) &ndash; "Ode to the Goose" by Luò Bīnwáng, with an interactive discovery scene</li>
      <li>春晓 (Chūn Xiǎo) &ndash; "Spring Morning" by Mèng Hàorán, with an interactive discovery scene</li>
      <li>悯农 (Mǐn Nóng) &ndash; "Sympathy for Farmers" by Lǐ Shēn, with an interactive discovery scene</li>
      <li>静夜思 (Jìng Yè Sī) &ndash; "Thinking of Home on a Quiet Night" by Lǐ Bái, with an interactive discovery scene</li>
    </ul>
  </section>
  <!-- World picker is the true entry point — 6 worlds instead of 15 flat
       categories at once. -->
  <div id="worldPicker"></div>
  <!-- Sidebar/column layout removed — categories now render as a row of
       tiles directly above the content, sitting on the page background
       (no white card), not tucked into a persistent side column. Simpler
       on every screen size, no responsive column-vs-row logic needed. -->
  <div id="appLayout" style="display:none;">
    <div id="categoryTiles"></div>
    <div class="panel" id="browsePanel"></div>
    <div id="storyArea"></div>
  </div>
  <div class="footnote">Tap 🔊 to hear any word or sentence spoken aloud.</div>
  <!-- Parent/educator-facing content — collapsed by default, so the only
       thing visible on the page by default is one small line: "For
       parents & teachers · Privacy". Custom button + hidden div, NOT
       native <details>/<summary> — that had two rounds of native-browser
       quirks (inconsistent disclosure marker rendering, then a giant
       default focus-outline box once opened, caused by <details>
       reflowing to block-width content). A plain button + the `hidden`
       attribute gives full, predictable control over every visual state
       with nothing left to the browser's own defaults. Still genuinely
       crawlable on the same principle as before: content is really in
       the DOM (not injected only after a click), and revealed the same
       way for every visitor, not selectively for bots — `hidden` is
       exactly what <details> being closed already amounted to, just
       without the native element's baggage.
       Placed HERE, inside .app rather than as a sibling of it — body is
       display:flex (row direction), so a sibling div ended up laid out
       beside .app instead of below it. Inside .app, it just stacks
       normally in block flow like everything else in this panel.
       Label row is a SEPARATE element from the content divs below it —
       previously each button's content div was nested inside that same
       button's own inline-block wrapper, so opening one pushed its
       wrapper close to the full container width, leaving no room for
       the other button+divider to stay on the same line, wrapping it
       below. Now the row of labels never changes regardless of which
       (if any) content is open. -->
  <div class="parent-footer">
    <div class="parent-footer-row">
      <button class="parent-footer-toggle" id="footerToggle1" aria-expanded="false" aria-controls="footerBody1">For parents &amp; teachers</button>
      <span class="parent-footer-divider">·</span>
      <button class="parent-footer-toggle" id="footerToggle2" aria-expanded="false" aria-controls="footerBody2">Privacy</button>
    </div>
    <div class="parent-footer-body" id="footerBody1" hidden>
      <p>Hello Little Cloud is a playful space where children can explore Mandarin through everyday words, curiosity and meaningful use.</p>
      <p>We're currently an early MVP, learning alongside children and educators what makes Mandarin enjoyable and useful in everyday life.</p>
    </div>
    <div class="parent-footer-body" id="footerBody2" hidden>
      <p>Hello Little Cloud does not collect or store personal information or learning activity. No account is required to use Hello Little Cloud, and we do not use analytics or tracking to monitor how children use the app.</p>
    </div>
  </div>
</div>
<script>
/* ============================================================
   CONTENT DATA
   Sourced from /curriculum/ and /content/ files per project
   conventions. Frames are CLOSED — no AI-invented sentences,
   everything below is either hand-authored or mechanically
   template-derived from a reviewed pattern, per
   curriculum/child-led-flow-spec.md.
   ============================================================ */
const LANG_CODE = 'zh-CN';

const MOD_SIZE = {
  small:{native:'小', pinyin:'xiǎo', en:'small'},
  big:  {native:'大', pinyin:'dà',  en:'big'},
};
const COLOURS = {
  red:   {native:'红色', pinyin:'hóng sè',  en:'red',    hex:'#E8493E'},
  yellow:{native:'黄色', pinyin:'huáng sè', en:'yellow', hex:'#F6C445'},
  blue:  {native:'蓝色', pinyin:'lán sè',   en:'blue',   hex:'#5B9BD3'},
  orange:{native:'橙色', pinyin:'chéng sè', en:'orange', hex:'#F2924B'},
  green: {native:'绿色', pinyin:'lǜ sè',    en:'green',  hex:'#6FCF97'},
  black: {native:'黑色', pinyin:'hēi sè',   en:'black',  hex:'#3A4A66'},
  white: {native:'白色', pinyin:'bái sè',   en:'white',  hex:'#FFFFFF'},
  pink:  {native:'粉色', pinyin:'fěn sè',   en:'pink',   hex:'#F0A8CC'},
  purple:{native:'紫色', pinyin:'zǐ sè',    en:'purple', hex:'#B295D9'},
  brown: {native:'棕色', pinyin:'zōng sè',  en:'brown',  hex:'#A9754F'},
};
const ALL_COLOUR_KEYS = Object.keys(COLOURS);
// Set A verbs (curriculum/verb-bank.md). 喜欢 is the fixed anchor verb for
// a noun's FIRST sentence — the rest are only offered afterward, one at a
// time, via the "remix" pill (see §6 of that doc — this is a correction
// from treating verb choice as a modifier-tier decision).
const VERBS = {
  like: {native:'喜欢', pinyin:'xǐ huan', en:'like', activityFraming:true},
  see:  {native:'看',   pinyin:'kàn',    en:'see'},
  want: {native:'要',   pinyin:'yào',    en:'want'},
  find: {native:'找',   pinyin:'zhǎo',   en:'look for'},
  have: {native:'有',   pinyin:'yǒu',    en:'have'},
  hug:  {native:'抱',   pinyin:'bào',    en:'hug'},
  feed: {native:'喂',   pinyin:'wèi',    en:'feed'},
  // Same word/audio as 'see' (看/kàn) — 看+[sport name] is a standard
  // Mandarin idiom for "watch [that sport]" (看篮球, 看足球), the same
  // way 看电影 means "watch a movie," not "look at a movie." Kept as a
  // distinct entry so sports items can offer the correct English framing
  // ("watch") without changing what 'see' means for object categories,
  // where 看 genuinely does mean "look at" (看兔子 = look at the rabbit).
  watch:{native:'看',   pinyin:'kàn',    en:'watch', activityFraming:true},
};
const VERB_ORDER = ['like','see','want','find','have','hug'];

// Shapes render as true recolourable SVG rather than emoji — the one
// category where an exact colour match is cheap and honest to build.
// (curriculum/colour-bank.md flags this as the recommended pilot category
// for introducing colour, ahead of vehicles.)
const SHAPE_SVG = {
  circle:   c => `<circle cx="50" cy="50" r="42" fill="${c}"/>`,
  square:   c => `<rect x="14" y="14" width="72" height="72" rx="14" fill="${c}"/>`,
  triangle: c => `<polygon points="50,10 92,88 8,88" fill="${c}"/>`,
  star:     c => `<polygon points="50,6 61,38 95,38 68,59 78,92 50,72 22,92 32,59 5,38 39,38" fill="${c}"/>`,
  heart:    c => `<path d="M50,88 C20,65 5,45 5,28 C5,12 20,2 35,8 C43,11 48,18 50,25 C52,18 57,11 65,8 C80,2 95,12 95,28 C95,45 80,65 50,88 Z" fill="${c}"/>`,
  cross:    c => `<polygon points="38,10 62,10 62,38 90,38 90,62 62,62 62,90 38,90 38,62 10,62 10,38 38,38" fill="${c}"/>`,
};
function shapeSVG(shapeKey, hex, size){
  return `<svg viewBox="0 0 100 100" width="${size}" height="${size}">${SHAPE_SVG[shapeKey](hex)}</svg>`;
}

/* ---- Animals (content/animals/*.md) — size only, per
   modifier-curation-principle.md this pack isn't retro-fitted with colour ---- */
/* ---- Animals (content/animals/*.md) — size only, per
   modifier-curation-principle.md this pack isn't retro-fitted with colour.
   Words re-audited 2026-08-19: 喜欢/看/有/喂 (like/see/have/feed) fits any
   animal, but 抱 (hug) and the generic 要/找 (want/look for) don't hold up
   the same way across all 16 — you don't plausibly hug a chicken or a
   tiger the way you hug a rabbit. Hug is now kept only for the small
   cuddly/companion subset (rabbit, dog, cat, panda, bear); everything
   else (farm, wild, aquatic) gets like/see/have/feed instead. */
const PET_VERBS = ['like','see','have', {native:'喂', pinyin:'wèi', en:'feed'}, 'hug'];
const OTHER_ANIMAL_VERBS = ['like','see','have', {native:'喂', pinyin:'wèi', en:'feed'}];
const ANIMALS = [
  {id:'goose_poem', emoji:'🎶', icon:'🪿', native:'咏鹅', pinyin:'Yǒng É', en:'Ode to the Goose', isRecital:true,
    description:'Written by Luò Bīnwáng.',
    lines:[
      {native:'鹅，鹅，鹅', pinyin:'É, é, é', en:'Goose, goose, goose'},
      {native:'曲项向天歌', pinyin:'Qū xiàng xiàng tiān gē', en:'Stretching its neck, it sings to the sky'},
      {native:'白毛浮绿水', pinyin:'Bái máo fú lǜ shuǐ', en:'White feathers float on green water'},
      {native:'红掌拨清波', pinyin:'Hóng zhǎng bō qīng bō', en:'Red feet paddle through clear waves'},
    ]},
  {id:'rabbit',   emoji:'🐰', native:'兔子',  pinyin:'tù zi',     en:'rabbit',   size:true, customVerbs:PET_VERBS, bonusWord:[{native:'跳',pinyin:'tiào',en:'hop'},{native:'胡萝卜',pinyin:'hú luó bo',en:'carrot'}]},
  {id:'dog',      emoji:'🐶', native:'狗',    pinyin:'gǒu',      en:'dog',      size:true, customVerbs:PET_VERBS, bonusWord:[{native:'跑',pinyin:'pǎo',en:'run'},{native:'骨头',pinyin:'gǔ tou',en:'bone'},{native:'尾巴',pinyin:'wěi ba',en:'tail'},{native:'汪汪',pinyin:'wāng wāng',en:'woof'}]},
  {id:'cat',      emoji:'🐱', native:'猫',    pinyin:'māo',      en:'cat',      size:true, customVerbs:PET_VERBS, bonusWord:[{native:'抓',pinyin:'zhuā',en:'scratch'},{native:'鱼',pinyin:'yú',en:'fish'},{native:'毛线球',pinyin:'máo xiàn qiú',en:'ball of yarn'},{native:'喵喵',pinyin:'miāo miāo',en:'meow'}]},
  {id:'panda',    emoji:'🐼', native:'熊猫',  pinyin:'xióng māo', en:'panda',    size:true, customVerbs:PET_VERBS, bonusWord:[{native:'爬',pinyin:'pá',en:'climb'},{native:'竹子',pinyin:'zhú zi',en:'bamboo'},{native:'黑白',pinyin:'hēi bái',en:'black and white'}]},
  {id:'bear',     emoji:'🐻', native:'熊',    pinyin:'xióng',    en:'bear',     size:true, customVerbs:PET_VERBS, bonusWord:[{native:'吼',pinyin:'hǒu',en:'roar'},{native:'蜂蜜',pinyin:'fēng mì',en:'honey'},{native:'洞穴',pinyin:'dòng xué',en:'cave'},{native:'熊掌',pinyin:'xióng zhǎng',en:'bear paw'}]},
  {id:'lion',     emoji:'🦁', native:'狮子',  pinyin:'shī zi',    en:'lion',     size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'吼',pinyin:'hǒu',en:'roar'},{native:'鬃毛',pinyin:'zōng máo',en:'mane'},{native:'尾巴',pinyin:'wěi ba',en:'tail'}]},
  {id:'tiger',    emoji:'🐯', native:'老虎',  pinyin:'lǎo hǔ',    en:'tiger',    size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'吼',pinyin:'hǒu',en:'roar'},{native:'条纹',pinyin:'tiáo wén',en:'stripes'},{native:'爪子',pinyin:'zhuǎ zi',en:'paws/claws'}]},
  {id:'elephant', emoji:'🐘', native:'大象',  pinyin:'dà xiàng',  en:'elephant', size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'吹鼻子',pinyin:'chuī bí zi',en:'trumpet'},{native:'喷水',pinyin:'pēn shuǐ',en:'spray water'},{native:'跺脚',pinyin:'duò jiǎo',en:'stomp'},{native:'甩鼻子',pinyin:'shuǎi bí zi',en:'swing trunk'},{native:'吃树叶',pinyin:'chī shù yè',en:'eat leaves'}]},
  {id:'monkey',   emoji:'🐵', native:'猴子',  pinyin:'hóu zi',    en:'monkey',   size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'爬',pinyin:'pá',en:'climb'},{native:'香蕉',pinyin:'xiāng jiāo',en:'banana'},{native:'调皮',pinyin:'tiáo pí',en:'mischievous'},{native:'尾巴',pinyin:'wěi ba',en:'tail'}]},
  {id:'pig',      emoji:'🐷', native:'猪',    pinyin:'zhū',      en:'pig',      size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'打滚',pinyin:'dǎ gǔn',en:'roll around'},{native:'猪鼻子',pinyin:'zhū bí zi',en:'snout'},{native:'泥巴',pinyin:'ní ba',en:'mud'},{native:'哼哼',pinyin:'hēng hēng',en:'oink'}]},
  {id:'cow',      emoji:'🐮', native:'牛',    pinyin:'niú',      en:'cow',      size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'牛奶',pinyin:'niú nǎi',en:'milk'},{native:'草',pinyin:'cǎo',en:'grass'},{native:'哞哞',pinyin:'mōu mōu',en:'moo'}]},
  {id:'chicken',  emoji:'🐔', native:'鸡',    pinyin:'jī',       en:'chicken',  size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'咯咯叫',pinyin:'gē gē jiào',en:'cluck'},{native:'啄',pinyin:'zhuó',en:'peck'},{native:'抓地',pinyin:'zhuā dì',en:'scratch the ground'}]},
  {id:'duck',     emoji:'🦆', native:'鸭子',  pinyin:'yā zi',     en:'duck',     size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'游',pinyin:'yóu',en:'swim'},{native:'鸭嘴',pinyin:'yā zuǐ',en:'bill'},{native:'羽毛',pinyin:'yǔ máo',en:'feathers'},{native:'嘎嘎',pinyin:'gā gā',en:'quack'}]},
  {id:'fish',     emoji:'🐟', native:'鱼',    pinyin:'yú',       en:'fish',     size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'游',pinyin:'yóu',en:'swim'},{native:'水',pinyin:'shuǐ',en:'water'},{native:'鱼鳞',pinyin:'yú lín',en:'scales'}]},
  {id:'bird',     emoji:'🐦', native:'鸟',    pinyin:'niǎo',     en:'bird',     size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'飞',pinyin:'fēi',en:'fly'},{native:'羽毛',pinyin:'yǔ máo',en:'feathers'},{native:'翅膀',pinyin:'chì bǎng',en:'wings'},{native:'啾啾',pinyin:'jiū jiū',en:'chirp'}]},
  {id:'frog',     emoji:'🐸', native:'青蛙',  pinyin:'qīng wā',   en:'frog',     size:true, customVerbs:OTHER_ANIMAL_VERBS, bonusWord:[{native:'跳',pinyin:'tiào',en:'hop'},{native:'荷叶',pinyin:'hé yè',en:'lotus leaf'},{native:'呱呱',pinyin:'guā guā',en:'croak'},{native:'蝌蚪',pinyin:'kē dǒu',en:'tadpole'}]},
];

/* ---- Vehicles (content/vehicles/vehicles-pack.md) — colour re-audited
   2026-08-19: expanded to the full 10-colour palette for everything
   except fire truck (red) and bus/school bus (yellow), which — like
   basketball's orange — have a real, well-known, iconically fixed colour
   worth teaching as a fact rather than offering as if any colour were
   equally plausible. Words: richer set than other F1 categories since
   vehicles genuinely support more distinct real actions —
   喜欢(like)/坐(ride)/在...里(in, locative — different sentence shape
   from every other verb here, see frameF1)/找(look for)/看(see)/有(have). */
const VEHICLES = [
  {id:'car',          emoji:'🚗',  native:'汽车',   pinyin:'qì chē',      en:'car',          size:true, colours:ALL_COLOUR_KEYS},
  {id:'bus',          emoji:'🚌',  native:'公交车', pinyin:'gōng jiāo chē',en:'bus',          size:true, colours:['yellow']},
  {id:'taxi',         emoji:'🚕',  native:'出租车', pinyin:'chū zū chē',   en:'taxi',         size:true, colours:ALL_COLOUR_KEYS},
  {id:'police_car',   emoji:'🚓',  native:'警车',   pinyin:'jǐng chē',    en:'police car',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'fire_truck',   emoji:'🚒',  native:'消防车', pinyin:'xiāo fáng chē',en:'fire truck',   size:true, colours:['red']},
  {id:'ambulance',    emoji:'🚑',  native:'救护车', pinyin:'jiù hù chē',   en:'ambulance',    size:true, colours:ALL_COLOUR_KEYS},
  {id:'bicycle',      emoji:'🚲',  native:'自行车', pinyin:'zì xíng chē',  en:'bicycle',      size:true, colours:ALL_COLOUR_KEYS},
  {id:'motorcycle',   emoji:'🏍️', native:'摩托车', pinyin:'mó tuō chē',   en:'motorcycle',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'airplane',     emoji:'✈️',  native:'飞机',   pinyin:'fēi jī',      en:'airplane',     size:true, colours:ALL_COLOUR_KEYS},
  {id:'helicopter',   emoji:'🚁',  native:'直升机', pinyin:'zhí shēng jī', en:'helicopter',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'train',        emoji:'🚂',  native:'火车',   pinyin:'huǒ chē',     en:'train',        size:true, colours:ALL_COLOUR_KEYS},
  {id:'ship',         emoji:'🚢',  native:'船',     pinyin:'chuán',      en:'ship',         size:true, colours:ALL_COLOUR_KEYS},
  {id:'sailboat',     emoji:'⛵',  native:'帆船',   pinyin:'fān chuán',   en:'sailboat',     size:true, colours:ALL_COLOUR_KEYS},
  {id:'rocket',       emoji:'🚀',  native:'火箭',   pinyin:'huǒ jiàn',    en:'rocket',       size:true, colours:ALL_COLOUR_KEYS},
  {id:'tractor',      emoji:'🚜',  native:'拖拉机', pinyin:'tuō lā jī',    en:'tractor',      size:true, colours:ALL_COLOUR_KEYS},
  {id:'scooter',      emoji:'🛴',  native:'滑板车', pinyin:'huá bǎn chē',  en:'scooter',      size:true, colours:ALL_COLOUR_KEYS},
].map(v => ({
  ...v,
  customVerbs: [
    'like',
    {native:'坐', pinyin:'zuò', en:'ride'},
    {native:'在', pinyin:'zài', en:'in', suffixParticle:'里', suffixParticlePinyin:'lǐ'},
    'find',
    'see',
    'have',
  ],
}));

/* ---- Shapes (content/shapes/shapes-pack.md) — 6 of 10 shapes built, 4
   blocked pending custom icons per that file. 抱/hug excluded per
   verb-bank.md audit. Colour: unlike Vehicles/Sports, where the 2
   curated colours per item reflect real-world plausibility (a red car is
   more typical than a purple one), an abstract shape has no "authentic"
   colour — a circle isn't more truthfully red than purple. Shapes is
   also the one category rendered as true recolourable SVG rather than a
   paired swatch next to a fixed-colour emoji, and colour-bank.md flags
   it as the best category to introduce colour fully. So shapes get the
   complete 10-colour palette rather than a curated 2. ---- */
const SHAPES = [
  {id:'circle',   shape:'circle',   native:'圆形',   pinyin:'yuán xíng',   en:'circle',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'square',   shape:'square',   native:'方形',   pinyin:'fāng xíng',   en:'square',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'triangle', shape:'triangle', native:'三角形', pinyin:'sān jiǎo xíng',en:'triangle', size:true, colours:ALL_COLOUR_KEYS},
  {id:'star',     shape:'star',     native:'星星',   pinyin:'xīng xing',   en:'star',     size:true, colours:ALL_COLOUR_KEYS},
  {id:'heart',    shape:'heart',    native:'爱心',   pinyin:'ài xīn',      en:'heart',    size:true, colours:ALL_COLOUR_KEYS},
  {id:'cross',    shape:'cross',    native:'十字',   pinyin:'shí zì',      en:'cross',    size:true, colours:ALL_COLOUR_KEYS},
];

/* ---- Sports (content/sports-hobbies/sports-hobbies-pack.md) — object-noun
   subset only; activity emoji (swim/paint/fish/cycle) deferred, they need
   a different frame entirely, per that file.
   Re-audited 2026-08-19 across size, colour, and words together —
   catches from this pass: basketball/tennis ball/baseball are
   standardized regulation sizes nobody actually calls big/small (unlike
   soccer, where youth ball sizes 3/4/5 are common knowledge); a single
   offered colour isn't a real choice (basketball=orange-only, tennis
   ball=green-only — both removed, same logic already applied to
   badminton). Words: every item now gets 喜欢(like)/看(watch, the
   standard idiom for "watch a sport" — 看篮球 means "watch basketball,"
   not "look at basketball," same construction as 看电影 "watch a
   movie")/有(have)/its own real action verb (打 for racket & hand sports,
   踢 for soccer specifically since it's foot-played) — replacing the
   generic 要/找, which don't reflect how anyone talks about playing or
   following a sport. ---- */
const SPORTS = [
  {id:'soccer_ball',  emoji:'⚽', native:'足球',   pinyin:'zú qiú',       en:'soccer ball',    size:true, sportName:'soccer',
    customVerbs:['like','watch', {native:'踢', pinyin:'tī', en:'play', activityFraming:true}, 'have']},
  {id:'basketball',   emoji:'🏀', native:'篮球',   pinyin:'lán qiú',      en:'basketball',     size:false, sportName:'basketball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'tennis_ball',  emoji:'🎾', native:'网球',   pinyin:'wǎng qiú',     en:'tennis ball',    size:false, sportName:'tennis',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'baseball',     emoji:'⚾', native:'棒球',   pinyin:'bàng qiú',     en:'baseball',       size:false, sportName:'baseball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'volleyball',   emoji:'🏐', native:'排球',   pinyin:'pái qiú',      en:'volleyball',     size:true, sportName:'volleyball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'pingpong',     emoji:'🏓', native:'乒乓球', pinyin:'pīng pāng qiú', en:'ping-pong ball', size:false, colours:['white','orange'], sportName:'ping-pong',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'badminton',    emoji:'🏸', native:'羽毛球', pinyin:'yǔ máo qiú',    en:'badminton',      size:false, noArticle:true, sportName:'badminton',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
];
// Not wired to any category yet — preserved content, not deferred-and-
// deleted, for a future standalone Hobbies category. Migrated to the same
// customVerbs mechanism as Sports for consistency, but Hobbies items do
// NOT get 'watch' — 看+instrument doesn't carry the "watch that activity"
// idiom the way 看+sport does (you don't idiomatically "看钢琴" to mean
// watch someone perform); that idiom is specific to spectator sports.
const HOBBIES = [
  {id:'piano',        emoji:'🎹', native:'钢琴',   pinyin:'gāng qín',     en:'piano',              size:true, colours:['black','white'],
    customVerbs:['like','have', {native:'弹', pinyin:'tán', en:'play'}]},
  {id:'guitar',       emoji:'🎸', native:'吉他',   pinyin:'jí tā',        en:'guitar',             size:true, colours:ALL_COLOUR_KEYS,
    customVerbs:['like','have', {native:'弹', pinyin:'tán', en:'play'}]},
  {id:'puzzle',       emoji:'🧩', native:'拼图',   pinyin:'pīn tú',       en:'puzzle',             size:true,
    customVerbs:['like','have', {native:'拼', pinyin:'pīn', en:'put together'}]},
  {id:'yoyo',         emoji:'🪀', native:'溜溜球', pinyin:'liū liū qiú',   en:'yo-yo',              size:true, colours:ALL_COLOUR_KEYS,
    customVerbs:['like','have', {native:'玩', pinyin:'wán', en:'play with'}]},
  {id:'kite',         emoji:'🪁', native:'风筝',   pinyin:'fēng zheng',   en:'kite',               size:true, colours:ALL_COLOUR_KEYS,
    customVerbs:['like','have', {native:'放', pinyin:'fàng',en:'fly'}]},
];

/* ---- Food (content/food/food-pack.md + state-evaluation-frame.md) ----
   `taste` uses the SF1 frame (X很Y。); `size` uses F1, fruit/veg only,
   per modifier-curation-principle.md (not applied to prepared foods). */
const FOOD = [
  {id:'farmer_poem', emoji:'🎶', icon:'🌾', native:'悯农', pinyin:'Mǐn Nóng', en:'Sympathy for Farmers', isRecital:true,
    description:'A Tang-dynasty poem by Lǐ Shēn, traditionally taught to help children appreciate the work behind their food.',
    lines:[
      {native:'锄禾日当午', pinyin:'Chú hé rì dāng wǔ', en:'The farmer hoes the fields beneath the midday sun'},
      {native:'汗滴禾下土', pinyin:'Hàn dī hé xià tǔ', en:'Sweat drips onto the soil beneath the crops'},
      {native:'谁知盘中餐', pinyin:'Shéi zhī pán zhōng cān', en:'Who remembers the work behind the food on our plates?'},
      {native:'粒粒皆辛苦', pinyin:'Lì lì jiē xīn kǔ', en:'Every grain comes from hard work'},
    ]},
  {id:'apple',      emoji:'🍎', native:'苹果', pinyin:'píng guǒ',  en:'apple',      size:true,  taste:{native:'好吃',pinyin:'hǎo chī',en:'delicious'}},
  {id:'banana',     emoji:'🍌', native:'香蕉', pinyin:'xiāng jiāo',en:'banana',     size:true,  taste:null},
  {id:'watermelon', emoji:'🍉', native:'西瓜', pinyin:'xī guā',    en:'watermelon', size:true,  taste:{native:'甜', pinyin:'tián', en:'sweet'}},
  {id:'strawberry', emoji:'🍓', native:'草莓', pinyin:'cǎo méi',   en:'strawberry', size:true,  taste:{native:'甜', pinyin:'tián', en:'sweet'}},
  {id:'orange',     emoji:'🍊', native:'橙子', pinyin:'chéng zi',  en:'orange',     size:false, taste:null},
  {id:'lemon',      emoji:'🍋', native:'柠檬', pinyin:'níng méng', en:'lemon',      size:false, taste:{native:'酸', pinyin:'suān', en:'sour'}},
  {id:'mango',      emoji:'🥭', native:'芒果', pinyin:'máng guǒ',  en:'mango',      size:false, taste:{native:'甜', pinyin:'tián', en:'sweet'}},
  {id:'blueberry',  emoji:'🫐', native:'蓝莓', pinyin:'lán méi',   en:'blueberry',  size:false, taste:null},
  {id:'carrot',     emoji:'🥕', native:'胡萝卜',pinyin:'hú luó bo', en:'carrot',     size:true,  taste:null},
  {id:'bread',      emoji:'🍞', native:'面包', pinyin:'miàn bāo',  en:'bread',      size:false, taste:{native:'好吃',pinyin:'hǎo chī',en:'delicious'}},
  {id:'rice',       emoji:'🍚', native:'米饭', pinyin:'mǐ fàn',    en:'rice',       size:false, taste:null},
  {id:'noodles',    emoji:'🍜', native:'面条', pinyin:'miàn tiáo', en:'noodles',    size:false, taste:null},
  {id:'dumplings',  emoji:'🥟', native:'饺子', pinyin:'jiǎo zi',   en:'dumplings',  size:false, taste:null},
  {id:'milk',       emoji:'🥛', native:'牛奶', pinyin:'niú nǎi',   en:'milk',       size:false, taste:{native:'好喝',pinyin:'hǎo hē',en:'tasty'}, isDrink:true},
  {id:'water',      emoji:'💧', native:'水',   pinyin:'shuǐ',     en:'water',      size:false, taste:null, isDrink:true, bonusWord:[{native:'渴',pinyin:'kě',en:'thirsty'}]},
];

/* ---- Places (content/places/places-pack.md) — 医院/hospital and 看医生
   removed from this build per explicit instruction. F-Place frame:
   我要去[size?]noun。 ---- */
const PLACES = [
  {id:'school',      emoji:'🏫',  native:'学校', pinyin:'xué xiào',  en:'school',      size:true},
  {id:'park',        emoji:'🛝',  native:'公园', pinyin:'gōng yuán', en:'park',        size:true},
  {id:'restaurant',  emoji:'🍴',  native:'饭馆', pinyin:'fàn guǎn',  en:'restaurant',  size:true},
  {id:'store',       emoji:'🛍️', native:'商店', pinyin:'shāng diàn',en:'store',       size:true},
  // 房子 (house, the building) → 家 (home, where you belong) — 家 pairs
  // with 回 (return) not the default 要去 (want to go to); see goVerb in
  // framePlace.
  {id:'house',       emoji:'🏠', native:'家',   pinyin:'jiā',      en:'home', size:true, noArticle:true,
    goVerb:{native:'要回', pinyin:'yào huí', en:'want to go'}},
  {id:'living_room', emoji:'🛋️', native:'客厅', pinyin:'kè tīng',   en:'living room', size:false},
  {id:'bedroom',     emoji:'🛏️', native:'卧室', pinyin:'wò shì',    en:'bedroom',     size:false},
  // Split into two distinct places rather than one "bathroom" covering
  // both concepts — 厕所 (toilet/restroom) and 浴室 (bath) are different
  // words a child would use differently.
  {id:'toilet',      emoji:'🚻', native:'厕所', pinyin:'cè suǒ',    en:'toilet',      size:false},
  {id:'bath',        emoji:'🛁', native:'浴室', pinyin:'yù shì',    en:'bath',        size:false},
  {id:'kitchen',     emoji:'🔪', native:'厨房', pinyin:'chú fáng',  en:'kitchen',     size:false},
];

/* ---- Family (content/family/family-pack.md) — Tier 0 only. Siblings
   that share one emoji (哥哥/弟弟, 姐姐/妹妹) are merged into a single
   grid tile rather than kept as two separate tiles — two menu items that
   render the exact same big/small pair visual, differing only in which
   figure is pre-highlighted, was a redundant choice at the grid level.
   Now tapping either figure within the pair teaches that specific word,
   so the big/small contrast is something the child actively plays with
   instead of only seeing passively after already picking a tile. ---- */
const FAMILY = [
  {id:'sanzijing', emoji:'🎶', icon:'📜', native:'三字经', pinyin:'Sān Zì Jīng', en:'Three Character Classic', isRecital:true,
    description:'For centuries, 《三字经》 has been one of the first classic texts Chinese children learned to read and recite.',
    lines:[
      {native:'人之初，性本善。', pinyin:'Rén zhī chū, xìng běn shàn.', en:'Everyone is born with a kind nature.'},
      {native:'性相近，习相远。', pinyin:'Xìng xiāng jìn, xí xiāng yuǎn.', en:'We start out similar; our habits shape who we become.'},
      // Per native-speaker correction: bù here, not the colloquial
      // sandhi bú the general modern rule (不 + 4th tone → bú) would
      // suggest — classical recitation doesn't always follow the same
      // sandhi patterns as everyday spoken Mandarin.
      {native:'苟不教，性乃迁。', pinyin:'Gǒu bù jiào, xìng nǎi qiān.', en:'Without guidance and learning, our character can change.'},
      {native:'教之道，贵以专。', pinyin:'Jiào zhī dào, guì yǐ zhuān.', en:'The best way to learn is with focused, consistent teaching.'},
    ]},
  {id:'father',          emoji:'👨', native:'爸爸', pinyin:'bà ba',   en:'father'},
  {id:'mother',          emoji:'👩', native:'妈妈', pinyin:'mā ma',   en:'mother'},
  {id:'brothers', emoji:'👦', isSiblingPair:true,
    big:  {native:'哥哥', pinyin:'gē ge', en:'older brother'},
    small:{native:'弟弟', pinyin:'dì di', en:'younger brother'}},
  {id:'sisters', emoji:'👧', isSiblingPair:true,
    big:  {native:'姐姐', pinyin:'jiě jie', en:'older sister'},
    small:{native:'妹妹', pinyin:'mèi mei', en:'younger sister'}},
  {id:'grandfather',     emoji:'👴', native:'爷爷', pinyin:'yé ye',   en:'grandfather'},
  {id:'grandmother',     emoji:'👵', native:'奶奶', pinyin:'nǎi nai', en:'grandmother'},
  {id:'friend',          emoji:'🧑‍🤝‍🧑', native:'朋友', pinyin:'péng you', en:'friend'},
  {id:'person',          emoji:'🧍', native:'人',   pinyin:'rén',    en:'person',
    // "这是我的X" (this is my X) works for every other Family word because
    // they're all relationships — it breaks for 人 specifically, since
    // "person" isn't a relationship and "this is MY person" has no
    // natural meaning the way "this is my father" does. primarySentence
    // overrides the shared frameThisIsMy template for this one word.
    primarySentence:{native:'这是一个人。', pinyin:'Zhè shì yí gè rén.', en:'This is a person.'}},
];

/* ---- Body Parts (content/body-parts/body-parts-pack.md) — Tier 0 only. ---- */
const BODY = [
  {id:'head',  emoji:'👤', native:'头',   pinyin:'tóu',    en:'head'},
  {id:'hair',  emoji:'🦱', native:'头发', pinyin:'tóu fa',  en:'hair', noArticle:true},
  {id:'hand',  emoji:'✋', native:'手',   pinyin:'shǒu',   en:'hand'},
  {id:'foot',  emoji:'🦶', native:'脚',   pinyin:'jiǎo',   en:'foot'},
  {id:'eyes',  emoji:'👀', native:'眼睛', pinyin:'yǎn jing',en:'eyes', noArticle:true},
  {id:'nose',  emoji:'👃', native:'鼻子', pinyin:'bí zi',   en:'nose'},
  {id:'mouth', emoji:'👄', native:'嘴巴', pinyin:'zuǐ ba',  en:'mouth'},
];

/* ---- Feelings (state-evaluation-frame.md) — SF1: 我很X。 ---- */
const FEELINGS = [
  {id:'hot',     emoji:'🥵', native:'热',   pinyin:'rè',      en:'hot'},
  {id:'cold',    emoji:'🥶', native:'冷',   pinyin:'lěng',    en:'cold'},
  {id:'thirsty', emoji:'🥤', native:'渴',   pinyin:'kě',      en:'thirsty'},
  {id:'hungry',  emoji:'🍽️', native:'饿',   pinyin:'è',       en:'hungry'},
  {id:'full',    emoji:'😌', native:'饱',   pinyin:'bǎo',     en:'full'},
  {id:'happy',   emoji:'😊', native:'开心', pinyin:'kāi xīn',  en:'happy'},
  {id:'sad',     emoji:'😢', native:'伤心', pinyin:'shāng xīn',en:'sad'},
  {id:'angry',   emoji:'😠', native:'生气', pinyin:'shēng qì', en:'angry'},
  {id:'tired',   emoji:'😴', native:'累',   pinyin:'lèi',     en:'tired'},
];

/* ---- Cooking / Cleaning / Daily Habits / Weather — previously deferred
   pending "a dedicated sentence frame," but on reflection these don't
   need one at all. Unlike Animals/Vehicles/Shapes (genuinely substitutable
   nouns a frame can safely combine with a modifier), this vocabulary is
   inherently formulaic — 刷牙, 下雨, 洗澡 are fixed action/state chunks in
   real Mandarin (Wray's formulaic sequences, already the sourcing basis
   for this project's verb bank), not decomposable into a reusable
   verb-slot + noun-slot pattern without risking the same kind of
   nonsense combination already caught elsewhere (yellow tennis ball,
   hugging a puzzle). Built as Tier0-only — word + pinyin + audio, same
   pattern as Family/Body Parts — so there's nothing to combine and
   therefore nothing to get wrong. Vocabulary chosen for frequency and
   concreteness for a 5-6 year old (Nation's frequency principle, already
   this project's basis for word selection elsewhere); not yet reviewed
   by a native speaker, same standing gap as every other pack. ---- */
const COOKING = [
  {id:'cook',       emoji:'🍳', native:'做饭', pinyin:'zuò fàn',  en:'cook',            sentenceEn:'I am cooking.'},
  {id:'cut_veg',    emoji:'🔪', native:'切菜', pinyin:'qiē cài',  en:'cut vegetables',  sentenceEn:'I am cutting vegetables.'},
  {id:'wash_veg',   emoji:'🥬', native:'洗菜', pinyin:'xǐ cài',   en:'wash vegetables', sentenceEn:'I am washing vegetables.'},
  {id:'crack_egg',  emoji:'🥚', native:'打鸡蛋',pinyin:'dǎ jī dàn', en:'crack an egg',   sentenceEn:'I am cracking an egg.'},
  {id:'stir_fry',   emoji:'🥘', native:'炒菜', pinyin:'chǎo cài', en:'stir-fry',        sentenceEn:'I am stir-frying.'},
  {id:'bake_cake',  emoji:'🧁', native:'烤蛋糕',pinyin:'kǎo dàn gāo',en:'bake a cake',   sentenceEn:'I am baking a cake.'},
];
const CLEANING = [
  {id:'sweep',      emoji:'🧹', native:'扫地', pinyin:'sǎo dì',   en:'sweep the floor',  sentenceEn:'I am sweeping the floor.'},
  {id:'mop',        emoji:'🪣', native:'拖地', pinyin:'tuō dì',   en:'mop the floor',    sentenceEn:'I am mopping the floor.'},
  {id:'wash_dish',  emoji:'🍽️', native:'洗碗', pinyin:'xǐ wǎn',   en:'wash dishes',      sentenceEn:'I am washing dishes.'},
  {id:'wash_cloth', emoji:'👕', native:'洗衣服',pinyin:'xǐ yī fu',  en:'wash clothes',     sentenceEn:'I am washing clothes.'},
  {id:'wipe_table', emoji:'🧽', native:'擦桌子',pinyin:'cā zhuō zi',en:'wipe the table',   sentenceEn:'I am wiping the table.'},
  {id:'take_trash', emoji:'🗑️', native:'倒垃圾',pinyin:'dào lā jī', en:'take out the trash', sentenceEn:'I am taking out the trash.'},
];
const DAILY_HABITS = [
  {id:'quiet_night_poem', emoji:'🎶', icon:'🌕', native:'静夜思', pinyin:'Jìng Yè Sī', en:'Thinking of Home on a Quiet Night', isRecital:true,
    description:'Written by Lǐ Bái during the Tang dynasty — likely the single most famous poem in the Chinese language.',
    lines:[
      {native:'床前明月光', pinyin:'Chuáng qián míng yuè guāng', en:'Bright moonlight shines before my bed'},
      {native:'疑是地上霜', pinyin:'Yí shì dì shàng shuāng', en:"I wonder if it's frost on the ground"},
      {native:'举头望明月', pinyin:'Jǔ tóu wàng míng yuè', en:'I lift my head and look at the bright moon'},
      {native:'低头思故乡', pinyin:'Dī tóu sī gù xiāng', en:'I lower my head and think of home'},
    ]},
  // 起床 (wake up) uses 了 (see usesLe below), not 在 like the rest of
  // this list — confirmed by native-speaker correction. It's a
  // momentary, completed action ("I woke up"), not an ongoing one, so
  // it takes a genuinely different sentence structure, not just a
  // different word choice.
  {id:'brush_teeth',emoji:'🪥', native:'刷牙', pinyin:'shuā yá',  en:'brush teeth',     sentenceEn:'I am brushing my teeth.'},
  {id:'bathe',      emoji:'🛁', native:'洗澡', pinyin:'xǐ zǎo',   en:'take a bath',     sentenceEn:'I am taking a bath.'},
  {id:'wash_face',  emoji:'💦', native:'洗脸', pinyin:'xǐ liǎn',  en:'wash your face',  sentenceEn:'I am washing my face.'},
  {id:'comb_hair',  emoji:'🪮', native:'梳头', pinyin:'shū tóu',  en:'comb your hair',  sentenceEn:'I am combing my hair.'},
  {id:'get_dressed',emoji:'🧥', native:'穿衣服',pinyin:'chuān yī fu',en:'get dressed',   sentenceEn:'I am getting dressed.'},
  {id:'wake_up',    emoji:'⏰', native:'起床', pinyin:'qǐ chuáng',en:'wake up',         usesLe:true, sentenceEn:'I woke up.'},
  {id:'sleep',      emoji:'😴', native:'睡觉', pinyin:'shuì jiào',en:'go to sleep',     sentenceEn:'I am sleeping.'},
];
const WEATHER = [
  {id:'spring_poem', emoji:'🎶', icon:'🌸', native:'春晓', pinyin:'Chūn Xiǎo', en:'Spring Morning', isRecital:true,
    description:'A Tang-dynasty poem by Mèng Hàorán, and one of the most widely memorized short poems in Chinese childhood education.',
    lines:[
      {native:'春眠不觉晓', pinyin:'Chūn mián bù jué xiǎo', en:"Sleeping in spring, I don't notice dawn"},
      {native:'处处闻啼鸟', pinyin:'Chù chù wén tí niǎo', en:'Everywhere, I hear birds singing'},
      {native:'夜来风雨声', pinyin:'Yè lái fēng yǔ shēng', en:'Through the night, I hear the sound of wind and rain'},
      {native:'花落知多少', pinyin:'Huā luò zhī duō shǎo', en:'I wonder how many flowers have fallen'},
    ]},
  // Sentence patterns are genuinely mixed across these seven, not one
  // template with a flag — sunny/cloudy describe the day's overall
  // STATE (是), rain/snow/wind are things that HAPPEN (verb + 了),
  // thunderstorm uses 有 (existence) rather than either, and rainbow is
  // its own exclamatory frame entirely. Storing each primarySentence as
  // raw native/pinyin/en (same shape bonusPhrase — the secondary
  // sentence — already used) rather than forcing this through a shared
  // computed template, since the correct grammar genuinely differs per
  // item and was given directly, not derived. This replaces the earlier
  // usesShi/frameWeatherToday approach, which could only express the
  // 是-pattern.
  //
  // Deliberate revision, confirmed explicitly: an earlier native-speaker
  // correction had rejected verb-object phrases (下雨/下雪/刮风) in favor
  // of 是+X天 for ALL six original items. Sunny and cloudy keep that
  // pattern; rain/snow/wind/thunder now intentionally use the verb-
  // phrase / 有 forms instead, on the reasoning that "day-state" words
  // and "weather event" words don't actually take the same grammar
  // naturally. Thunderstorm's WORD itself also changed, 雷雨天→雷雨
  // (dropping 天), to match 有雷雨 rather than the awkward 有雷雨天.
  {id:'sunny',   emoji:'☀️', native:'晴天',  pinyin:'qíng tiān', en:'sunny',
    primarySentence:{native:'今天是晴天。', pinyin:'Jīn tiān shì qíng tiān.', en:'Today is sunny.'},
    bonusPhrase:{native:'我喜欢晴天。', pinyin:'Wǒ xǐ huan qíng tiān.', en:'I like sunny days.'},
    bonusWord:[
      {native:'晒太阳', pinyin:'shài tài yáng', en:'bask in the sun'},
      {native:'太阳',   pinyin:'tài yáng',      en:'sun'},
      {native:'阳光',   pinyin:'yáng guāng',    en:'sunlight'},
    ]},
  {id:'rainy',   emoji:'🌧️', native:'雨天',  pinyin:'yǔ tiān',   en:'rainy',
    primarySentence:{native:'今天下雨了。', pinyin:'Jīn tiān xià yǔ le.', en:"It's raining today."},
    bonusPhrase:{native:'现在下雨了。', pinyin:'Xiàn zài xià yǔ le.', en:"It's raining right now."},
    bonusWord:[
      {native:'雨伞', pinyin:'yǔ sǎn', en:'umbrella'},
      {native:'雨衣', pinyin:'yǔ yī',  en:'raincoat'},
      {native:'水坑', pinyin:'shuǐ kēng', en:'puddle'},
    ]},
  {id:'snowy',   emoji:'❄️', native:'雪天',  pinyin:'xuě tiān',  en:'snowy',
    primarySentence:{native:'今天下雪了。', pinyin:'Jīn tiān xià xuě le.', en:"It's snowing today."},
    bonusPhrase:{native:'现在下雪了。', pinyin:'Xiàn zài xià xuě le.', en:"It's snowing right now."},
    bonusWord:[
      {native:'雪花',   pinyin:'xuě huā',    en:'snowflake'},
      {native:'雪人',   pinyin:'xuě rén',    en:'snowman'},
      {native:'堆雪人', pinyin:'duī xuě rén', en:'build a snowman'},
      {native:'雪橇',   pinyin:'xuě qiāo',   en:'sled'},
    ]},
  {id:'windy',   emoji:'🌬️', native:'大风天', pinyin:'dà fēng tiān', en:'windy',
    primarySentence:{native:'今天刮风了。', pinyin:'Jīn tiān guā fēng le.', en:"It's windy today."},
    bonusPhrase:{native:'现在在刮风。', pinyin:'Xiàn zài zài guā fēng.', en:"It's windy right now."},
    bonusWord:[
      {native:'风筝', pinyin:'fēng zheng', en:'kite'},
      {native:'风车', pinyin:'fēng chē',   en:'pinwheel'},
    ]},
  {id:'cloudy',  emoji:'☁️', native:'阴天',  pinyin:'yīn tiān',  en:'cloudy',
    primarySentence:{native:'今天是阴天。', pinyin:'Jīn tiān shì yīn tiān.', en:'Today is cloudy.'},
    bonusPhrase:{native:'天上有很多云。', pinyin:'Tiān shàng yǒu hěn duō yún.', en:'There are lots of clouds in the sky.'},
    bonusWord:[
      {native:'天空', pinyin:'tiān kōng', en:'sky'},
      {native:'白云', pinyin:'bái yún',   en:'white cloud'},
      {native:'云朵', pinyin:'yún duǒ',   en:'cloud'},
      {native:'乌云', pinyin:'wū yún',    en:'dark cloud'},
    ]},
  {id:'thunder', emoji:'⛈️', native:'雷雨',  pinyin:'léi yǔ',    en:'thunderstorm',
    primarySentence:{native:'今天有雷雨。', pinyin:'Jīn tiān yǒu léi yǔ.', en:'There is a thunderstorm today.'},
    bonusPhrase:{native:'现在在打雷。', pinyin:'Xiàn zài zài dǎ léi.', en:"It's thundering right now."},
    bonusWord:[
      {native:'闪电',   pinyin:'shǎn diàn',      en:'lightning'},
      {native:'轰隆隆', pinyin:'hōng lōng lōng', en:'rumble'},
      {native:'害怕',   pinyin:'hài pà',         en:'scared'},
      {native:'雷声',   pinyin:'léi shēng',      en:'sound of thunder'},
    ]},
  {id:'rainbow', emoji:'🌈', native:'彩虹',  pinyin:'cǎi hóng',  en:'rainbow',
    primarySentence:{native:'看！有彩虹！', pinyin:'Kàn! Yǒu cǎi hóng!', en:"Look! There's a rainbow!"},
    bonusPhrase:{native:'我喜欢彩虹。', pinyin:'Wǒ xǐ huan cǎi hóng.', en:'I like rainbows.'},
    bonusWord:[
      {native:'颜色', pinyin:'yán sè',   en:'colour'},
      {native:'天空', pinyin:'tiān kōng', en:'sky'},
    ]},
];
const NUMBER_DIGITS = [
  {id:'n1', emoji:'1️⃣', native:'一', pinyin:'yī',  en:'one'},
  {id:'n2', emoji:'2️⃣', native:'二', pinyin:'èr',  en:'two'},
  {id:'n3', emoji:'3️⃣', native:'三', pinyin:'sān', en:'three'},
  {id:'n4', emoji:'4️⃣', native:'四', pinyin:'sì',  en:'four'},
  {id:'n5', emoji:'5️⃣', native:'五', pinyin:'wǔ',  en:'five'},
  {id:'n6', emoji:'6️⃣', native:'六', pinyin:'liù', en:'six'},
  {id:'n7', emoji:'7️⃣', native:'七', pinyin:'qī',  en:'seven'},
  {id:'n8', emoji:'8️⃣', native:'八', pinyin:'bā',  en:'eight'},
  {id:'n9', emoji:'9️⃣', native:'九', pinyin:'jiǔ', en:'nine'},
  {id:'n10',emoji:'🔟', native:'十', pinyin:'shí', en:'ten'},
];
// The count-along used to appear as a CTA button after tapping any single
// digit, with no explanation of what it did — confusing for a child who
// hasn't learned the individual numbers yet and had no reason to expect
// it. It's now its own tile instead, discovered and tapped the same way
// as every other word in the app, with its own intro caption before it
// plays anything.
const COUNT_SONG = {id:'count_song', emoji:'🎶', native:'数到十', pinyin:'shǔ dào shí', en:'count to 10', isSong:true};
const NUMBERS = [COUNT_SONG, ...NUMBER_DIGITS];

const CATEGORIES = [
  {id:'animals',  icon:'🐾', label:'动物', pinyin:'dòng wù',       en:'Animals',          mode:'f1',      nouns:ANIMALS},
  {id:'numbers',  icon:'🔢', label:'数字', pinyin:'shù zì',        en:'Numbers',           mode:'numbers', nouns:NUMBERS},
  {id:'shapes',   icon:'🔺', label:'形状', pinyin:'xíng zhuàng',   en:'Shapes',            mode:'f1',      nouns:SHAPES, noHug:true},
  {id:'vehicles', icon:'🚦', label:'交通', pinyin:'jiāo tōng',     en:'Transport',          mode:'f1',      nouns:VEHICLES, noHug:true},
  {id:'sports',   icon:'⚽', label:'运动', pinyin:'yùn dòng', en:'Sports', mode:'f1', nouns:SPORTS, noHug:true},
  {id:'hobbies',  icon:'🎻', label:'爱好', pinyin:'ài hào',   en:'Hobbies', mode:'f1', nouns:HOBBIES, noHug:true},
  {id:'food',     icon:'🍎', label:'食物', pinyin:'shí wù',        en:'Food',              mode:'food',    nouns:FOOD},
  {id:'places',   icon:'📍', label:'地方', pinyin:'dì fang',       en:'Places',            mode:'place',   nouns:PLACES},
  {id:'family',   icon:'👨‍👩‍👧‍👦', label:'家人', pinyin:'jiā rén', en:'Family',   mode:'tier0',   nouns:FAMILY},
  {id:'body',     icon:'✋', label:'身体', pinyin:'shēn tǐ', en:'Body',    mode:'tier0',   nouns:BODY},
  {id:'feelings', icon:'😊', label:'心情', pinyin:'xīn qíng',      en:'Feelings',          mode:'feeling', nouns:FEELINGS},
  {id:'cooking',  icon:'👩🏻‍🍳', label:'做饭', pinyin:'zuò fàn', en:'Cooking', mode:'tier0', nouns:COOKING, captionType:'action'},
  {id:'cleaning', icon:'🧹', label:'打扫', pinyin:'dǎ sǎo',        en:'Cleaning',          mode:'tier0',   nouns:CLEANING, captionType:'action'},
  {id:'habits',   icon:'🛁', label:'日常习惯', pinyin:'rìcháng xíguàn', en:'Daily Habits', mode:'tier0', nouns:DAILY_HABITS, captionType:'action'},
  {id:'weather',  icon:'☀️', label:'天气', pinyin:'tiān qì',       en:'Weather',           mode:'tier0',   nouns:WEATHER, captionType:'weather'},
];
const CAT_BY_ID = Object.fromEntries(CATEGORIES.map(c => [c.id, c]));

/* ---- Worlds — a grouping layer above categories, added because 15 flat
   categories at once is a lot for a 4-6 year old to visually parse before
   anything invites a first tap. This is deliberately just a FILTER on top
   of the existing category/word system, not a rebuild of it — picking a
   world narrows which categories the sidebar shows; everything below
   that (category tabs, word grid, sentence building) is unchanged.
   Grouping is a first-pass judgment call, not a confident final answer —
   Places in particular doesn't have one obvious home (spans both outdoor
   and indoor), it's grouped with Play & Adventure as the closer fit. */
const WORLDS = [
  {id:'animals',        icon:'🐾', label:'动物',    pinyin:'dòng wù',         en:'Animals',          theme:'green',  catIds:['animals']},
  {id:'weather',        icon:'☀️', label:'天气',    pinyin:'tiān qì',         en:'Weather',           theme:'yellow', catIds:['weather']},
  {id:'family-me',      icon:'👨‍👩‍👧', label:'我和家人', pinyin:'wǒ hé jiā rén',   en:'My Family & I',   theme:'pink',   catIds:['family','body','feelings']},
  {id:'play-adventure', icon:'🎉', label:'好玩',     pinyin:'hǎo wán',            en:'Fun',              theme:'orange', catIds:['vehicles','sports','hobbies','places']},
  {id:'home-basics',    icon:'🏡', label:'生活',   pinyin:'shēng huó',      en:'Everyday Life',          theme:'blue',   catIds:['food','cooking','cleaning','habits']},
  {id:'foundations',    icon:'🔢', label:'数字和形状',pinyin:'shù zì hé xíng zhuàng', en:'Numbers & Shapes', theme:'purple', catIds:['numbers','shapes']},
];
const WORLD_BY_ID = Object.fromEntries(WORLDS.map(w => [w.id, w]));

/* ============================================================
   SENTENCE FRAMES
   ============================================================ */
function frameF1(verb, mods, noun){
  // verb = {native, pinyin, en} — a plain verb object, not a VERBS[] key.
  // mods = {sizeKey, colourKey, descriptor} — any combination may be set.
  // Previously this took a single {type, key} and one modifier silently
  // replaced the other — picking a colour after a size made the size
  // vanish from the sentence even though its button still looked chosen.
  // Now they all combine: 红色的小飞机 / "the small red airplane."
  // 'descriptor' generalizes the 的-attached slot beyond colour — Food
  // reuses this same mechanism for taste (甜/好吃/etc.), which attaches
  // to a noun exactly the same grammatical way a colour does, rather
  // than duplicating this combining logic in a second place.
  mods = mods || {};
  const sizeM = mods.sizeKey ? MOD_SIZE[mods.sizeKey] : null;
  const descM = mods.colourKey ? COLOURS[mods.colourKey] : (mods.descriptor || null);

  // Chinese order: [descriptor]的 [size][noun] — e.g. 红色的小飞机 or
  // 甜的大西瓜. The 的 attaches to the descriptor phrase; the
  // single-syllable size adjective sits bare directly against the noun,
  // standard Mandarin attributive ordering when stacking a multi-
  // character descriptive word with a short one.
  let native = noun.native, pinyin = noun.pinyin;
  if(sizeM){ native = sizeM.native + native; pinyin = sizeM.pinyin + ' ' + pinyin; }
  if(descM){ native = descM.native + '的' + native; pinyin = descM.pinyin + ' de ' + pinyin; }

  // English order is the reverse convention — size before the
  // descriptor ("the small red airplane," not "the red small airplane").
  const enParts = [];
  if(sizeM) enParts.push(sizeM.en);
  if(descM) enParts.push(descM.en);
  const enDescriptor = enParts.length ? enParts.join(' ') + ' ' : '';
  const enNoun = (verb.activityFraming && noun.sportName && !sizeM && !descM)
    ? noun.sportName
    : `${noun.noArticle ? '' : 'the '}${enDescriptor}${noun.en}`;

  // Locative pattern (在...里 — "I'm IN the X") doesn't fit "我+verb+noun"
  // the way every other verb here does; the particle goes AFTER the noun
  // phrase, not a verb directly acting on it. Everything else uses the
  // standard pattern.
  if(verb.suffixParticle){
    return {
      native: `我${verb.native}${native}${verb.suffixParticle}。`,
      pinyin: `Wǒ ${verb.pinyin} ${pinyin} ${verb.suffixParticlePinyin}.`,
      en: `I'm ${verb.en} ${enNoun}.`,
    };
  }
  return { native:`我${verb.native}${native}。`, pinyin:`Wǒ ${verb.pinyin} ${pinyin}.`, en:`I ${verb.en} ${enNoun}.` };
}
// Returns the ordered list of {native,pinyin,en} verbs a given noun should
// offer in its "Words" section. Defaults to the shared Set A bank (minus
// hug where cat.noHug applies); if a noun defines its own activityVerb
// (Hobbies), that replaces 看/要/找 — those three are generic
// object-interaction verbs ("see/want/look for") that don't reflect how
// anyone actually talks about a hobby, where the real content is the
// activity itself (play/put together/fly), not looking at or wanting the
// object. 喜欢 stays first (still the fixed anchor for a noun's first
// sentence) and 有 stays too, since "I have a piano" is a normal thing to
// say — only the mismatched three get swapped out, not the whole bank.
// customVerbs: an explicit ordered list for nouns whose default 5/6-verb
// Set A bank doesn't reflect how the word is actually used (see Hobbies,
// Sports). Each entry is either a string key into the shared VERBS
// registry (reusing its native/pinyin/en as-is) or a plain {native,
// pinyin, en} object for a word specific to that single noun.
function verbListForNoun(cat, n){
  if(n.customVerbs){
    return n.customVerbs.map(v => typeof v === 'string' ? {...VERBS[v]} : {...v});
  }
  return VERB_ORDER
    .filter(k => !(cat.noHug && k === 'hug'))
    .map(k => ({...VERBS[k]}));
}
function framePlace(sizeKey, noun){
  // 家 (home) is the one place that doesn't naturally pair with 要去 (want
  // to go to) — Mandarin speakers say 我要回家 ("I want to go HOME," using
  // 回 return) not 我要去家. Every other place (school, park, restaurant...)
  // genuinely does use 去. A noun can override the verb via goVerb for
  // this kind of exception rather than forcing every place through one
  // fixed verb.
  const verb = noun.goVerb || {native:'要去', pinyin:'yào qù', en:'want to go'};
  if(sizeKey){
    const m = MOD_SIZE[sizeKey];
    // Once a modifier is added, even 'home' takes its 'to the' back —
    // "go to the small home," not "go small home." noArticle only
    // applies to the bare, unmodified case below.
    return { native:`我${verb.native}${m.native}${noun.native}。`, pinyin:`Wǒ ${verb.pinyin} ${m.pinyin} ${noun.pinyin}.`, en:`I ${verb.en} to the ${m.en} ${noun.en}.` };
  }
  return { native:`我${verb.native}${noun.native}。`, pinyin:`Wǒ ${verb.pinyin} ${noun.pinyin}.`, en:`I ${verb.en} ${noun.noArticle ? '' : 'to the '}${noun.en}.` };
}
function frameFeelingSF1(noun){
  return { native:`我很${noun.native}。`, pinyin:`Wǒ hěn ${noun.pinyin}.`, en:`I'm ${noun.en}.` };
}
function frameThisIsMy(noun){
  return {
    native: `这是我的${noun.native}。`,
    pinyin: `Zhè shì wǒ de ${noun.pinyin}.`,
    en: `This is my ${noun.en}.`,
  };
}
function frameInProgress(noun){
  // Reuses the exact 在 (ongoing action) pattern already used and
  // native-speaker-verified for weather's bonus phrases (现在在下雨).
  // Not every verb phrase here fits that pattern, though — 起床 (wake
  // up) is a momentary, completed action, not an ongoing one, so it
  // takes 了 (le, completed-action marker) AFTER the verb instead —
  // confirmed by native-speaker correction, not this project's own
  // guess. This is a genuinely different sentence structure, not a
  // one-character toggle, hence the separate branch rather than an
  // optional-particle flag like usesShi.
  if(noun.usesLe){
    return {
      native: `我${noun.native}了。`,
      pinyin: `Wǒ ${noun.pinyin} le.`,
      en: noun.sentenceEn,
    };
  }
  return {
    native: `我在${noun.native}。`,
    pinyin: `Wǒ zài ${noun.pinyin}.`,
    en: noun.sentenceEn,
  };
}
function frameThisIsNumber(noun){
  return {
    native: `这是${noun.native}。`,
    pinyin: `Zhè shì ${noun.pinyin}.`,
    en: `This is ${noun.en}.`,
  };
}

/* ============================================================
   AUDIO ENGINE — carried over UNCHANGED from the validated v1.1
   fix (cancel-guard, voice ordering, utterance persistence,
   retry-on-error). See app/story-builder-v1.1.html for the full
   diagnosis; not re-derived here.
   ============================================================ */
const NOVELTY_VOICE_NAMES = /eddy|flo|reed|rocko|sandy|shelley|grandma|grandpa|bahh|bells|bubbles|cellos|good news|jester|organ|superstar|trinoids|whisper|wobble|zarvox|albert|bad news|boing|deranged/i;
let zhVoiceCandidates = [];
function findZhVoices(){
  if(!('speechSynthesis' in window)) return [];
  const voices = window.speechSynthesis.getVoices();
  if(!voices.length) return [];
  const matches = voices.filter(v =>
    (v.lang && /^(zh|cmn)/i.test(v.lang)) || (v.name && /chinese|mandarin/i.test(v.name))
  );
  const standard = matches.filter(v => !NOVELTY_VOICE_NAMES.test(v.name || ''));
  const novelty = matches.filter(v => NOVELTY_VOICE_NAMES.test(v.name || ''));
  return [...standard, ...novelty];
}
function refreshZhVoices(){ zhVoiceCandidates = findZhVoices(); }
function logVoiceInventory(){
  const names = window.speechSynthesis.getVoices().map(v => `${v.name} (${v.lang})`);
  console.log('[audio] voices available:', names.length ? names : '(none)');
  console.log('[audio] Mandarin voice candidates (in try-order):', zhVoiceCandidates.length ? zhVoiceCandidates.map(v => `${v.name} (${v.lang})`) : 'none found');
}
if('speechSynthesis' in window){
  refreshZhVoices();
  logVoiceInventory();
  window.speechSynthesis.addEventListener('voiceschanged', () => { refreshZhVoices(); logVoiceInventory(); });
}
function setAudioStatus(text){ console.log('[audio]', text); }
let currentUtterance = null;
// Simplest possible implementation — deliberately stripped back down.
// Earlier versions of this function accumulated a cancel-guard, a
// resume() call, a ranked multi-voice retry cascade, and a
// click-triggered "prime the engine" cancel — each added to chase a
// specific past symptom, none re-verified against the new "every voice
// fails instantly, including ordinary ones, on a fresh page load"
// symptom. Stacking more speculative fixes on top of unproven ones isn't
// good practice; this removes all of it and goes back to something close
// to what an earlier, working prototype used, so the next real test
// result actually isolates something instead of testing four unverified
// changes at once.
// A short synthesized "pop" on every tap, deliberately independent of
// speechSynthesis — this session's own audio debugging showed system TTS
// can be delayed or fail entirely per-device (stuck OS speech daemons,
// missing voices, etc.). Web Audio's oscillator has none of those
// dependencies, so this gives instant, reliable tactile feedback on
// every tap regardless of whether the spoken word ever arrives. Kept
// deliberately simple — a quick rising blip, not a whole sound library.
let audioCtx = null;
function playTapSound(){
  try{
    if(!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    if(audioCtx.state === 'suspended') audioCtx.resume();
    const t = audioCtx.currentTime;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(560, t);
    osc.frequency.exponentialRampToValueAtTime(880, t + 0.08);
    gain.gain.setValueAtTime(0.13, t);
    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.11);
    osc.connect(gain).connect(audioCtx.destination);
    osc.start(t);
    osc.stop(t + 0.13);
  } catch(e){ /* decorative only — never block a real interaction on this */ }
}
function speak(native, voiceIndex, onEnd){
  if(!('speechSynthesis' in window)){ setAudioStatus('This browser has no built-in voice.'); return; }
  const synth = window.speechSynthesis;
  synth.cancel();
  const utter = new SpeechSynthesisUtterance(native);
  currentUtterance = utter;
  utter.lang = LANG_CODE;
  utter.rate = 0.85;
  if(zhVoiceCandidates[0]) utter.voice = zhVoiceCandidates[0];
  utter.onstart = () => { setAudioStatus('playing "' + native + '"'); };
  utter.onerror = (e) => {
    setAudioStatus('audio error: ' + (e.error || 'unknown'));
    if(onEnd) onEnd();
  };
  utter.onend = () => {
    if(currentUtterance === utter) currentUtterance = null;
    if(onEnd) onEnd();
  };
  synth.speak(utter);
}

/* ============================================================
   STATE
   ============================================================ */
let stars = 0;
const starredKeys = new Set(); // "catId:nounId" — one star per noun, ever
let activeCategoryId = null;
let activeNounId = null;
let activeSizeKey = null;   // 'small' | 'big' | null — independent of colour, both can be set at once
let activeColourKey = null; // one of COLOURS keys | null
let activeVerbIdx = null;   // null = nothing chosen yet — no verb pre-selected, matches how size/colour never pre-select either
let sentenceStarted = false;
// Food's own persistent modifier state — taste/size/word all combine into
// one sentence now, same principle as F1's size+colour combining above.
let activeFoodSizeKey = null;
let activeFoodTasteOn = false;
let activeFoodVerbIdx = null;

function addStar(catId, nounId){
  // Visible star counter was removed from the top bar per explicit
  // request. Kept the internal tracking (stars count, starredKeys) rather
  // than deleting addStar entirely — starredKeys is what guards against
  // e.g. the count-along star firing more than once, and stars itself
  // costs nothing to keep in case a future pass wants it again. Nothing
  // here touches the DOM anymore.
  const key = catId + ':' + nounId;
  if(starredKeys.has(key)) return;
  starredKeys.add(key);
  stars += 1;
}

const els = {
  categoryTiles: document.getElementById('categoryTiles'),
  browsePanel: document.getElementById('browsePanel'),
  storyArea: document.getElementById('storyArea'),
};
let nounCollapsed = false;

function bindSpeakButtons(root){
  root.querySelectorAll('[data-speak]').forEach(btn => {
    btn.addEventListener('click', () => speak(decodeURIComponent(btn.dataset.speak)));
  });
}
function nounVisualHTML(n, size){
  if(n.shape) return shapeSVG(n.shape, '#5B9BD3', size);
  return `<span style="font-size:${Math.round(size*0.72)}px; line-height:1;">${n.emoji}</span>`;
}
// Sibling-pair entries (Family: brothers/sisters) don't have a single
// native/pinyin/en of their own — they hold two (big/small). This gives
// every other piece of UI (grid aria-labels, the collapsed strip) a
// consistent way to describe them without needing to know that shape.
function nounLabel(n){
  if(n.isSiblingPair) return `${n.big.en} / ${n.small.en}`;
  return n.en;
}
function nounVisualColouredHTML(n, size, hex){
  if(n.shape) return shapeSVG(n.shape, hex, size);
  return `<span style="font-size:${Math.round(size*0.72)}px; line-height:1;">${n.emoji}</span>`;
}
function wordRowHTML(n, opts={}){
  const label = opts.label || n.native;
  const roman = opts.roman || n.pinyin;
  const goldClass = opts.gold ? 'gold' : '';
  const visual = opts.visualHTML || nounVisualHTML(n, 40);
  const swatch = opts.colourHex ? `<span class="colour-chip-inline"><span class="swatch" style="background:${opts.colourHex};"></span></span>` : '';
  return `
    <div class="wordrow" data-speak="${encodeURIComponent(opts.speakText || label)}">
      <span class="emoji">${visual}</span>
      <div class="txt">
        <div class="native">${label}<span class="en-inline">${opts.enLabel || n.en}</span>${swatch}</div>
        <div class="roman">${roman}</div>
      </div>
      <button class="mini-speak ${goldClass}" aria-label="Play sound">🔊</button>
    </div>`;
}
// Hero version — used only for the primary word reveal (the first thing
// shown when a child taps a word), not every wordRowHTML use elsewhere
// (sibling display, bonus words stay compact/secondary on purpose). This
// replaces the standalone big-icon-with-no-text that used to sit above
// this same card and got flagged as a duplicate — one hero moment, not
// two, and not zero.
function heroWordHTML(n, opts={}){
  const label = opts.label || n.native;
  const roman = opts.roman || n.pinyin;
  const visual = opts.visualHTML || nounVisualHTML(n, 88);
  const swatch = opts.colourHex ? `<span class="colour-chip-inline"><span class="swatch" style="background:${opts.colourHex};"></span></span>` : '';
  return `
    <div class="hero-word" data-speak="${encodeURIComponent(opts.speakText || label)}">
      <span class="hero-icon" id="heroIcon">${visual}</span>
      <div class="hero-native">${label}<span class="en-inline">${opts.enLabel || n.en}</span>${swatch}</div>
      <div class="hero-pinyin">${roman}</div>
      <button class="mini-speak" aria-label="Play sound">🔊</button>
    </div>`;
}

/* ============================================================
   SINGLE-PAGE LAYOUT — modeled on the OS emoji picker: a small,
   always-visible row of icon-only category tabs sits above one
   continuous, flowing gallery of that category's words under a
   plain text header — both live in ONE panel so the words visibly
   belong to the category tab above them, rather than reading as
   two separate boxed sections. The word grid still collapses to a
   compact strip once something's picked (so a 16-item grid doesn't
   push the story card off screen); the category tabs don't need to
   collapse — they're compact enough to stay visible always. Both a
   category tap and a word tap speak audio immediately.

   Categories and the header+grid render into SEPARATE containers
   (#categoryTiles / #browsePanel) — category tiles sit directly on the
   page background as a row above the content, no side column, no white
   card wrapper, same on every screen size.
   ============================================================ */
let hasInteracted = false;
let activeWorldId = null;
// Separate from hasInteracted (which trips on the very first tap
// anywhere, well before the back button is ever visible — reaching
// word-detail requires already tapping a world tile and a noun). This
// tracks specifically whether the back control itself has ever been
// used, so its own discovery hint can show until THAT happens, not
// until any unrelated first tap happens.
let hasUsedBackButton = false;
function markInteracted(){
  if(hasInteracted) return;
  hasInteracted = true;
  const svg = document.getElementById('mascotSvg');
  if(svg) svg.classList.remove('greeting');
  if(activeWorldId === null) renderWorldPicker(); // re-render without the spotlight/tap-hint now that she's engaged
}
/* Mascot-style illustrations for each world — same visual language as
   the cloud mascot (white/cream fill, light-blue outline, dark dot eyes,
   pink blush cheeks, simple curved smile) instead of generic system
   emoji, so the entry screen feels like it belongs to this app's own
   character world rather than borrowed OS icons. */
const WORLD_ILLUSTRATIONS = {
  animals: `<svg viewBox="0 0 120 120">
    <path d="M0,112 Q10,104 18,112 Q26,102 34,112 Q42,105 50,112 L50,120 L0,120Z" fill="#B8E0C4" stroke="#9AD1AC" stroke-width="1.5"/>
    <path d="M60,116 Q70,106 80,116 Q88,104 96,116 Q104,108 112,116 L120,116 L120,120 L60,120Z" fill="#B8E0C4" stroke="#9AD1AC" stroke-width="1.5"/>
    <g fill="#FFFFFF" stroke="#D6E9FA" stroke-width="2.5">
      <ellipse cx="38" cy="60" rx="20" ry="13"/>
      <circle cx="25" cy="49" r="10"/>
      <circle cx="38" cy="43" r="12"/>
      <circle cx="51" cy="49" r="10"/>
    </g>
    <circle cx="33" cy="57" r="2.5" fill="#3A4A66"/>
    <circle cx="43" cy="57" r="2.5" fill="#3A4A66"/>
    <path d="M33,63 Q38,67 43,63" fill="none" stroke="#3A4A66" stroke-width="2" stroke-linecap="round"/>
    <g fill="#C4B2A0" stroke="#9C7A5B" stroke-width="2.5">
      <path d="M72,50 Q68,28 76,26 Q80,28 78,50Z"/>
      <path d="M92,50 Q96,28 88,26 Q84,28 86,50Z"/>
      <circle cx="82" cy="62" r="13"/>
      <ellipse cx="82" cy="90" rx="16" ry="18"/>
    </g>
    <path d="M75,29 Q72,32 74,46Z" fill="#F6D8E0"/>
    <path d="M89,29 Q92,32 90,46Z" fill="#F6D8E0"/>
    <circle cx="77" cy="60" r="2.5" fill="#3A4A66"/>
    <circle cx="87" cy="60" r="2.5" fill="#3A4A66"/>
    <circle cx="82" cy="66" r="2" fill="#E8899B"/>
  </svg>`,
  weather: `<svg viewBox="0 0 120 120">
    <g stroke="#C9791E" stroke-width="4" stroke-linecap="round">
      <line x1="107.0" y1="35.0" x2="116.0" y2="35.0"/>
      <line x1="100.6" y1="50.6" x2="106.9" y2="56.9"/>
      <line x1="85.0" y1="57.0" x2="85.0" y2="66.0"/>
      <line x1="69.4" y1="50.6" x2="63.1" y2="56.9"/>
      <line x1="63.0" y1="35.0" x2="54.0" y2="35.0"/>
      <line x1="69.4" y1="19.4" x2="63.1" y2="13.1"/>
      <line x1="85.0" y1="13.0" x2="85.0" y2="4.0"/>
      <line x1="100.6" y1="19.4" x2="106.9" y2="13.1"/>
    </g>
    <circle cx="85" cy="35" r="19" fill="#F6C445" stroke="#C9791E" stroke-width="2.5"/>
    <g fill="#C7D2DE" stroke="#C7D2DE" stroke-width="2.5">
      <ellipse cx="32" cy="70" rx="22" ry="13"/>
      <circle cx="18" cy="60" r="11"/>
      <circle cx="32" cy="55" r="13"/>
      <circle cx="46" cy="60" r="11"/>
    </g>
    <path d="M18,90 Q14,98 18,102 Q22,98 18,90Z" fill="#3F7FB8"/>
    <path d="M32,94 Q28,102 32,106 Q36,102 32,94Z" fill="#3F7FB8"/>
    <path d="M46,90 Q42,98 46,102 Q50,98 46,90Z" fill="#3F7FB8"/>
    <path d="M61,118 A28,28 0 0 1 117,118" fill="none" stroke="#3F7FB8" stroke-width="7"/>
    <path d="M69,118 A20,20 0 0 1 109,118" fill="none" stroke="#7FBF8F" stroke-width="7"/>
    <path d="M77,118 A12,12 0 0 1 101,118" fill="none" stroke="#E8899B" stroke-width="7"/>
  </svg>`,
  'family-me': `<svg viewBox="0 0 120 120">
    <circle cx="60" cy="32" r="13" fill="#E8C4A0" stroke="#B9732D" stroke-width="2.5"/>
    <rect x="46" y="44" width="28" height="40" rx="14" fill="#E8899B" stroke="#C02543" stroke-width="2.5"/>
    <circle cx="54" cy="31" r="2.2" fill="#3A4A66"/>
    <circle cx="66" cy="31" r="2.2" fill="#3A4A66"/>
    <path d="M54,37 Q60,41 66,37" fill="none" stroke="#3A4A66" stroke-width="2" stroke-linecap="round"/>
    <circle cx="24" cy="58" r="10" fill="#E8C4A0" stroke="#B9732D" stroke-width="2.5"/>
    <rect x="13" y="67" width="22" height="30" rx="11" fill="#7FBF8F" stroke="#418151" stroke-width="2.5"/>
    <circle cx="20" cy="57" r="1.8" fill="#3A4A66"/>
    <circle cx="28" cy="57" r="1.8" fill="#3A4A66"/>
    <path d="M20,62 Q24,65 28,62" fill="none" stroke="#3A4A66" stroke-width="1.8" stroke-linecap="round"/>
    <circle cx="96" cy="58" r="10" fill="#E8C4A0" stroke="#B9732D" stroke-width="2.5"/>
    <rect x="85" y="67" width="22" height="30" rx="11" fill="#9B8FD4" stroke="#5140A6" stroke-width="2.5"/>
    <circle cx="92" cy="57" r="1.8" fill="#3A4A66"/>
    <circle cx="100" cy="57" r="1.8" fill="#3A4A66"/>
    <path d="M92,62 Q96,65 100,62" fill="none" stroke="#3A4A66" stroke-width="1.8" stroke-linecap="round"/>
  </svg>`,
  'play-adventure': `<svg viewBox="0 0 120 120">
    <circle cx="10" cy="20" r="10" fill="#7FBF8F" stroke="#418151" stroke-width="2.5"/>
    <rect x="8" y="25" width="4" height="12" fill="#997341" stroke="#6B5030" stroke-width="1.5"/>
    <line x1="5" y1="100" x2="115" y2="100" stroke="#C9A96E" stroke-width="2" stroke-linecap="round"/>
    <path d="M88,15 L102,22 L95,29 L88,22Z" fill="#9B8FD4" stroke="#5140A6" stroke-width="2"/>
    <path d="M95,29 Q92,36 96,42 Q99,38 95,29" fill="none" stroke="#5140A6" stroke-width="1.5"/>
    <g fill="#FFFFFF" stroke="#D6E9FA" stroke-width="2.5">
      <ellipse cx="45" cy="58" rx="17" ry="10"/>
      <circle cx="33" cy="49" r="8"/>
      <circle cx="45" cy="45" r="10"/>
      <circle cx="57" cy="49" r="8"/>
    </g>
    <circle cx="40" cy="56" r="2" fill="#3A4A66"/>
    <circle cx="50" cy="56" r="2" fill="#3A4A66"/>
    <path d="M40,61 Q45,64 50,61" fill="none" stroke="#3A4A66" stroke-width="2" stroke-linecap="round"/>
    <rect x="20" y="75" width="50" height="16" rx="6" fill="#E8899B" stroke="#C02543" stroke-width="2.5"/>
    <rect x="30" y="78" width="14" height="8" rx="2" fill="#FCEEF2"/>
    <circle cx="32" cy="93" r="7" fill="#3A4A66"/>
    <circle cx="58" cy="93" r="7" fill="#3A4A66"/>
    <circle cx="95" cy="90" r="9" fill="#F6C445" stroke="#9C7208" stroke-width="2"/>
    <path d="M87,90 Q95,84 103,90" fill="none" stroke="#9C7208" stroke-width="1.5"/>
    <path d="M87,90 Q95,96 103,90" fill="none" stroke="#9C7208" stroke-width="1.5"/>
  </svg>`,
  'home-basics': `<svg viewBox="0 0 120 120">
    <g fill="#FFFFFF" stroke="#D6E9FA" stroke-width="2.5">
      <ellipse cx="60" cy="76" rx="30" ry="18"/>
      <circle cx="42" cy="62" r="15"/>
      <circle cx="60" cy="54" r="18"/>
      <circle cx="78" cy="62" r="15"/>
    </g>
    <circle cx="52" cy="72" r="3.5" fill="#3A4A66"/>
    <circle cx="68" cy="72" r="3.5" fill="#3A4A66"/>
    <path d="M52,80 Q60,86 68,80" fill="none" stroke="#3A4A66" stroke-width="2.5" stroke-linecap="round"/>
    <path d="M6,24 A11,7 0 0 0 28,24 Z" fill="#F2924B" stroke="#3F7FB8" stroke-width="2"/>
    <line x1="30" y1="20" x2="36" y2="10" stroke="#3F7FB8" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="37" cy="9" r="3" fill="#8FC4EA" stroke="#3F7FB8" stroke-width="1.5"/>
    <rect x="92" y="10" width="6" height="20" rx="2" fill="#FFFFFF" stroke="#3F7FB8" stroke-width="2"/>
    <path d="M91,10 L99,10 L97,4 L93,4Z" fill="#8FC4EA" stroke="#3F7FB8" stroke-width="1.5"/>
    <line x1="56" y1="98" x2="46" y2="114" stroke="#B08968" stroke-width="3" stroke-linecap="round"/>
    <path d="M48,112 L60,112 L64,120 L44,120Z" fill="#F2924B" stroke="#B08968" stroke-width="1.5"/>
  </svg>`,
  foundations: `<svg viewBox="0 0 120 120">
    <text x="8" y="28" font-family="'Baloo 2',sans-serif" font-weight="700" font-size="22" fill="#926B07">1</text>
    <text x="26" y="22" font-family="'Baloo 2',sans-serif" font-weight="700" font-size="22" fill="#3F7FB8">2</text>
    <text x="6" y="50" font-family="'Baloo 2',sans-serif" font-weight="700" font-size="20" fill="#D52A4A">3</text>
    <circle cx="80" cy="42" r="28" fill="#E8899B" stroke="#D52A4A" stroke-width="2.5"/>
    <rect x="18" y="52" width="48" height="48" rx="10" fill="#7FBF8F" stroke="#448855" stroke-width="2.5"/>
    <path d="M78,64 L100,98 L56,98Z" fill="#C6ABEA" stroke="#B39ADD" stroke-width="2" stroke-linejoin="round"/>
  </svg>`,
};
function renderWorldPicker(){
  const picker = document.getElementById('worldPicker');
  picker.innerHTML = '';
  const grid = document.createElement('div');
  grid.className = 'world-grid';
  WORLDS.forEach((w, idx) => {
    const tile = document.createElement('button');
    tile.className = `world-tile world-theme-${w.theme} world-tile-${idx % 4}`;
    tile.innerHTML = `<span class="world-ic">${WORLD_ILLUSTRATIONS[w.id]}</span><span class="native" lang="zh">${w.label}</span><span class="pinyin">${w.pinyin}</span><span class="en">${w.en}</span>`;
    tile.setAttribute('aria-label', w.en);
    tile.addEventListener('click', () => onPickWorld(w.id));
    // First tile only, and only until the very first interaction anywhere
    // in the app — same "start here" invitation previously on the first
    // category tab, moved up here since worlds are the true entry point
    // now (this is a real, confirmed failure mode: a child opened the
    // app once and never tapped anything at all).
    if(idx === 0 && !hasInteracted){
      tile.classList.add('spotlight');
      const hint = document.createElement('span');
      hint.className = 'tap-hint';
      hint.textContent = '👆';
      hint.setAttribute('aria-hidden', 'true');
      tile.appendChild(hint);
    }
    grid.appendChild(tile);
  });
  picker.appendChild(grid);
}
function onPickWorld(worldId){
  markInteracted();
  playTapSound();
  mascotReact('happy');
  activeWorldId = worldId;
  const world = WORLD_BY_ID[worldId];
  activeCategoryId = world.catIds[0]; // default to this world's first category
  activeNounId = null;
  nounCollapsed = false;
  els.storyArea.innerHTML = '';
  document.getElementById('worldPicker').style.display = 'none';
  document.getElementById('appLayout').style.display = '';
  renderCategoryTiles();
  renderBrowsePanel();
  speak(world.label);
  setTimeout(updateScrollHint, 100);
}
function onBackToWorlds(){
  playTapSound();
  activeWorldId = null;
  activeCategoryId = null;
  activeNounId = null;
  els.storyArea.innerHTML = '';
  document.getElementById('appLayout').style.display = 'none';
  document.getElementById('worldPicker').style.display = '';
  renderWorldPicker();
  setTimeout(updateScrollHint, 100);
}
function renderCategoryTiles(){
  els.categoryTiles.innerHTML = '';
  const row = document.createElement('div');
  row.className = 'category-tiles-row';
  const wordIsPicked = nounCollapsed && activeNounId;
  const backBtn = document.createElement('button');
  backBtn.className = 'back-arrow-btn' + (!hasUsedBackButton ? ' spotlight' : '');
  // Simple, unambiguous chevron — rounded stroke caps/joins give it a
  // soft, friendly feel without needing extra decorative curves. An
  // earlier attempt combined a swoosh path with the chevron and the two
  // overlapping shapes just turned to mush at actual size — reverted to
  // this single clean shape instead. Paired with a short text label,
  // since a bare arrow relies on a convention (arrow = go back) a young
  // child may not have learned yet — same reasoning already applied to
  // category tabs, which pair their icon with text rather than standing
  // alone.
  backBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5 L8 12 L15 19"/></svg><span>Back</span>'
    + (!hasUsedBackButton ? '<span class="tap-hint" aria-hidden="true">👆</span>' : '');
  // One control, same icon, same position, everywhere — "go back exactly
  // one level" (WCAG 3.2.3/3.2.4 consistent navigation) rather than the
  // arrow always jumping to the world picker while returning to the grid
  // was a DIFFERENT action (a tile secretly doubling as a nav control).
  // Word detail -> grid; grid -> world picker.
  const backDestination = wordIsPicked ? onBackToGrid : onBackToWorlds;
  backBtn.setAttribute('aria-label', wordIsPicked ? `Back to ${CAT_BY_ID[activeCategoryId].en} words` : 'Back to world picker');
  backBtn.addEventListener('click', () => {
    // First real use of the control, either destination, clears its
    // discovery hint for the rest of the session — same one-time
    // pattern already used for the first world tile and first category
    // tab, just gated on this control specifically rather than on any
    // tap anywhere.
    hasUsedBackButton = true;
    backDestination();
  });
  row.appendChild(backBtn);
  // At word-detail depth, tabs disappear entirely — the arrow above is
  // now the only, consistent way back, so nothing here is pretending to
  // be a nav control anymore. Browsing state (no word picked) keeps
  // tabs + grid together exactly as before — recognizing which category
  // you're in by seeing it stays easier for a young child than having to
  // recall it once it's hidden, so that part is untouched.
  if(!wordIsPicked){
    const world = WORLD_BY_ID[activeWorldId];
    const catsInWorld = world ? world.catIds.map(id => CAT_BY_ID[id]) : CATEGORIES;
    catsInWorld.forEach(c => {
      const tab = document.createElement('button');
      const isActive = c.id === activeCategoryId;
      tab.className = 'cat-tab' + (isActive ? ' active-cat' : '');
      tab.innerHTML = `<span class="ic">${c.icon}</span><span class="lbl">${c.label}</span><span class="lbl-pinyin">${c.pinyin}</span><span class="lbl-en">${c.en}</span>`;
      tab.setAttribute('aria-label', c.en);
      tab.addEventListener('click', () => onPickCategory(c.id));
      row.appendChild(tab);
    });
  }
  els.categoryTiles.appendChild(row);
}
function onBackToGrid(){
  playTapSound();
  nounCollapsed = false;
  els.storyArea.innerHTML = '';
  renderCategoryTiles();
  renderBrowsePanel();
  mascotReact('happy');
  setTimeout(updateScrollHint, 100);
}
function renderBrowsePanel(){
  const cat = CAT_BY_ID[activeCategoryId];
  els.browsePanel.innerHTML = '';

  if(nounCollapsed && activeNounId){
    // The selected word's full detail is already shown in the story card
    // below; the category tile row above already shows which category
    // we're in (now with native + pinyin + English on the tile itself),
    // and re-tapping that same tile returns to this grid. A separate
    // white bar repeating the category name a second time, plus its own
    // "See all words" button, was pure duplication of both pieces of
    // information — so this panel just doesn't render anything at all
    // while a word is selected, rather than showing an empty box.
    els.browsePanel.style.display = 'none';
    return;
  }
  els.browsePanel.style.display = '';

  const sub = document.createElement('div');
  sub.className = 'sub';
  sub.style.margin = '0 0 12px';
  sub.textContent = 'Tap one to hear it in Mandarin';
  els.browsePanel.appendChild(sub);
  const grid = document.createElement('div');
  grid.className = cat.mode === 'numbers' ? 'num-grid' : 'emoji-grid';
  cat.nouns.forEach(n => {
    const btn = document.createElement('button');
    btn.className = (cat.mode === 'numbers' ? 'num-tile' : 'emoji-tile') + (n.id === activeNounId ? ' active-noun' : '');
    btn.innerHTML = n.shape ? shapeSVG(n.shape, '#5B9BD3', '68%') : n.emoji;
    btn.setAttribute('aria-label', nounLabel(n));
    btn.addEventListener('click', () => onPickNoun(n.id));
    grid.appendChild(btn);
  });
  els.browsePanel.appendChild(grid);
}
const MOUTH_DEFAULT = 'M132,118 Q150,130 168,118';
const MOUTH_EXCITED = 'M126,116 Q150,150 174,116';
let mascotReactTimer = null;
function mascotReact(intensity){
  const svg = document.getElementById('mascotSvg');
  const mouth = document.getElementById('mascotMouth');
  if(!svg) return;
  const cls = intensity === 'excited' ? 'reacting-excited' : 'reacting-happy';
  svg.classList.remove('reacting-happy', 'reacting-excited');
  void svg.getBBox && svg.getBBox(); // force reflow so a repeated reaction restarts its animation
  svg.classList.add(cls);
  if(mouth) mouth.setAttribute('d', intensity === 'excited' ? MOUTH_EXCITED : MOUTH_DEFAULT);
  if(intensity === 'excited') spawnSparkles();
  clearTimeout(mascotReactTimer);
  mascotReactTimer = setTimeout(() => {
    svg.classList.remove(cls);
    if(mouth) mouth.setAttribute('d', MOUTH_DEFAULT);
  }, intensity === 'excited' ? 900 : 600);
}
function spawnSparkles(){
  const wrap = document.querySelector('.mascot-wrap');
  if(!wrap) return;
  ['✨', '⭐', '✨'].forEach((emoji, i) => {
    const s = document.createElement('span');
    s.className = 'mascot-sparkle';
    s.textContent = emoji;
    s.style.setProperty('--angle', (i * 110 - 55) + 'deg');
    s.style.setProperty('--delay', (i * 0.07) + 's');
    wrap.appendChild(s);
    s.addEventListener('animationend', () => s.remove());
  });
}
const BABY_CLOUD_SVG = `<svg viewBox="0 0 40 40" width="38" height="38">
  <circle cx="20" cy="23" r="11" fill="#FFFFFF" stroke="#3F7FB8" stroke-width="1.5"/>
  <circle cx="12" cy="19" r="7" fill="#FFFFFF" stroke="#3F7FB8" stroke-width="1.5"/>
  <circle cx="28" cy="19" r="7" fill="#FFFFFF" stroke="#3F7FB8" stroke-width="1.5"/>
  <circle cx="16" cy="22" r="1.4" fill="#3A4A66"/>
  <circle cx="24" cy="22" r="1.4" fill="#3A4A66"/>
</svg>`;
function spawnBabyClouds(anchorEl){
  if(!anchorEl) return;
  const burstWrap = document.createElement('div');
  burstWrap.className = 'baby-cloud-burst';
  anchorEl.appendChild(burstWrap);
  const count = 6;
  for(let i = 0; i < count; i++){
    const cloud = document.createElement('span');
    cloud.className = 'baby-cloud';
    cloud.innerHTML = BABY_CLOUD_SVG;
    // "Popcorn" timing — randomized angle/delay per cloud rather than an
    // evenly-spaced simultaneous fan, so it pops irregularly like real
    // popcorn instead of one uniform burst. Angles span an upward fan
    // (-100° to +100°, not a full circle) — rotate() then translateY()
    // compose so a rotated cloud travels along its OWN rotated axis, not
    // straight up; angles near 180° would travel downward and could
    // drift past the card's bottom edge into whatever's below it.
    const angle = -100 + (200 / (count - 1)) * i + (Math.random() * 16 - 8);
    const delay = Math.random() * 0.4;
    cloud.style.setProperty('--angle', angle + 'deg');
    cloud.style.setProperty('--delay', delay + 's');
    burstWrap.appendChild(cloud);
    cloud.addEventListener('animationend', () => cloud.remove());
  }
  setTimeout(() => burstWrap.remove(), 1400);
}
// Sentence-completion celebration — distinct from the routine mascot
// reaction on every tap. Fires once per word per session (keyed by a
// caller-supplied id), the first time a sentence actually completes for
// that word — not on every subsequent modifier/verb change afterward,
// which would make it feel routine instead of earned.
const celebratedSentenceIds = new Set();
function celebrateSentence(key, anchorEl){
  if(celebratedSentenceIds.has(key)) return false;
  celebratedSentenceIds.add(key);
  spawnBabyClouds(anchorEl);
  mascotReact('excited'); // bonus flourish for anyone who can still see the mascot
  return true;
}
// F1/Food/Place celebrate at the moment a NEW combination is picked
// (onPickVerb etc.) — there's a distinct "choose something" step to
// anchor that to. Family, Feelings, Weather, Cooking/Cleaning/Daily
// Habits, and Body Parts have no such step: the sentence is simply
// shown, and tapping the sentence card itself (to hear it) is the only
// interaction there is. This wires the SAME celebrateSentence gate to
// THAT tap instead, so the reward isn't silently missing just because a
// category happens not to have a size/verb/colour picker — Mika hitting
// this gap on Family surfaced it, but it applies to every category built
// on renderTier0Only/renderSiblingPair/renderFeeling, not just Family.
// A second, separate listener alongside bindSpeakButtons's own click
// handler on the same element — DOM elements support multiple listeners
// per event with no conflict, so this doesn't touch or duplicate the
// existing tap-to-hear behavior, just adds to it.
function bindSentenceCelebration(root, keyPrefix){
  root.querySelectorAll('.sentence-card').forEach((card, idx) => {
    const key = keyPrefix + (card.classList.contains('secondary') ? ':secondary' : (idx > 0 ? ':' + idx : ''));
    card.addEventListener('click', () => {
      const celebrated = celebrateSentence(key, card);
      if(!celebrated) mascotReact('happy'); // already celebrated this exact sentence before — routine reaction, not a repeat burst
    });
  });
}
function onPickCategory(catId){
  markInteracted();
  playTapSound();
  // Re-tapping the already-active tab used to be the shortcut back to
  // the grid — no longer reachable now that tabs aren't shown once a
  // word's picked (see renderCategoryTiles/onBackToGrid), so this is
  // just a no-op guard against redundant re-selection at the browsing
  // level, not a real interaction path anymore.
  if(catId === activeCategoryId) return;
  activeCategoryId = catId;
  activeNounId = null;
  nounCollapsed = false; // open the word grid for this category
  els.storyArea.innerHTML = '';
  renderCategoryTiles();
  renderBrowsePanel();
  speak(CAT_BY_ID[catId].label); // audio on category selection
  mascotReact('happy');
  setTimeout(updateScrollHint, 100);
}
function onPickNoun(nounId){
  markInteracted();
  playTapSound();
  activeNounId = nounId;
  activeSizeKey = null;
  activeColourKey = null;
  activeVerbIdx = null;
  sentenceStarted = false;
  activeFoodSizeKey = null;
  activeFoodTasteOn = false;
  activeFoodVerbIdx = null;
  nounCollapsed = true; // fold the word grid away once chosen, story card gets the room
  renderCategoryTiles(); // active tile now shows the "tap to return" badge
  renderBrowsePanel();
  renderDetail(); // renderDetail() itself speaks the word — no double speak() call needed here
  mascotReact('excited');
  els.storyArea.scrollIntoView({behavior:'smooth', block:'nearest'});
  setTimeout(updateScrollHint, 350);
}

/* ============================================================
   DEEP LINK — ?discover=<nounId>
   Lets an external entry point (currently: the iPadOS widget) land
   directly on a specific word's detail card, instead of the world
   picker. Deliberately just a query param on the existing single-page
   app, not real per-word routing (/discover/qingwa etc.) — that was
   flagged as unbuilt infrastructure and dropped from scope; this reuses
   the app's own existing navigation functions rather than adding any.
   ============================================================ */
function findNounLocation(nounId){
  for(const cat of CATEGORIES){
    const nouns = cat.nouns || [];
    const match = nouns.find(n => n.id === nounId);
    if(match) return {catId: cat.id, nounId};
  }
  return null;
}
function tryDeepLinkFromURL(){
  // ⚠️ Known limitation, not fixed here: onPickNoun() → renderDetail()
  // calls speak() as part of its normal flow, which is fine on a real
  // tap but NOT fine here — this runs at page load, outside any
  // synchronous user-gesture handler. Per this project's own audio
  // review history (reviews/2026-08-15-audio-rebuild-v3.md and others),
  // iOS Safari/WKWebView silently blocks speech synthesis that isn't
  // triggered by a direct tap. Practical effect: landing here via the
  // widget will very likely show the right word with NO audio, and the
  // child gets no feedback that anything failed — the same silent-tap
  // problem already flagged as unresolved in that review. Worth a real
  // device check before trusting this works end to end; the honest fix
  // (if confirmed) is probably a one-time "tap to hear it" prompt on
  // deep-link entry rather than an autoplay attempt.
  const params = new URLSearchParams(location.search);
  const requestedId = params.get('discover');
  if(!requestedId) return false;
  const loc = findNounLocation(requestedId);
  if(!loc){
    console.warn(`[deep link] no noun found for id "${requestedId}" — falling back to world picker`);
    return false;
  }
  const world = WORLDS.find(w => w.catIds.includes(loc.catId));
  if(!world) return false; // shouldn't happen if WORLDS/CATEGORIES stay in sync, but fail safe rather than throw
  onPickWorld(world.id); // sets activeCategoryId to this world's first category by default
  if(activeCategoryId !== loc.catId) onPickCategory(loc.catId);
  onPickNoun(loc.nounId); // speaks the word itself, same as a normal tap
  return true;
}

/* ============================================================
   DETAIL RENDER — dispatches by category mode
   ============================================================ */
function renderDetail(){
  const cat = CAT_BY_ID[activeCategoryId];
  const n = cat.nouns.find(x => x.id === activeNounId);
  if(cat.mode === 'f1')      return renderF1(cat, n);
  if(cat.mode === 'food')    return renderFood(cat, n);
  if(cat.mode === 'place')   return renderPlace(cat, n);
  if(cat.mode === 'tier0')   return renderTier0Only(cat, n);
  if(cat.mode === 'feeling') return renderFeeling(cat, n);
  if(cat.mode === 'numbers') return renderNumberDetail(cat, n);
}

// Bonus word — shows the pool's first entry by default (always the
// primary, most-distinctive pick, e.g. "roar" for bear), with a
// child-tapped "show me another" for animals that have more than one
// candidate (currently elephant, chicken). Deliberately NOT auto-
// rotating or remembering what's been seen across visits — no storage,
// no accounts needed, and every fresh visit re-anchors on the primary
// word, which is what actually gives it real repeated exposure over
// time (Nation's frequency-based vocabulary work: a handful of solid
// encounters with ONE word matters more than one encounter each with
// several). The extra candidates only surface if the child actively
// asks for them, keeping this consistent with the app's own rule that
// nothing changes without a tap.
function bonusWordChipHTML(pool){
  if(!pool || !pool.length) return '';
  const first = pool[0];
  return `
    <div class="sub" style="margin:10px 0 6px; display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:wrap;">
      <span>Bonus word</span>
      ${pool.length > 1 ? `<button class="bonus-cycle-btn" id="bonusCycleBtn" type="button">🔄 Show me another</button>` : ''}
    </div>
    <button class="bonus-word" id="bonusWordBtn" data-speak="${encodeURIComponent(first.native)}">
      <span class="row1"><span class="native" id="bonusNative">${first.native}</span><span class="en" id="bonusEn">${first.en}</span><span class="mini-speak-inline">🔊</span></span>
      <span class="pinyin" id="bonusPinyin">${first.pinyin}</span>
    </button>`;
}
function bindBonusWordCycle(pool){
  if(!pool || pool.length < 2) return;
  let idx = 0;
  const cycleBtn = document.getElementById('bonusCycleBtn');
  if(!cycleBtn) return;
  cycleBtn.addEventListener('click', () => {
    playTapSound();
    idx = (idx + 1) % pool.length;
    const word = pool[idx];
    document.getElementById('bonusNative').textContent = word.native;
    document.getElementById('bonusEn').textContent = word.en;
    document.getElementById('bonusPinyin').textContent = word.pinyin;
    document.getElementById('bonusWordBtn').dataset.speak = encodeURIComponent(word.native);
    speak(word.native); // direct click handler — safe to autoplay, same reasoning as every other tap-to-hear button
  });
}
/* ---- F1 mode: animals / shapes / vehicles / sports ---- */
function renderF1(cat, n){
  if(n.isRecital) return renderRecital(cat, n);
  const bonusChip = bonusWordChipHTML(n.bonusWord);
  // Hero card and size buttons render as one visually continuous unit
  // when the noun has size — a child taps small/big and the icon that
  // reacts is right there in the same card, not a separate section
  // below. Bonus word (where present) comes AFTER this group.
  let heroBlock;
  if(n.size){
    heroBlock = `
      <div class="hero-size-group">
        ${heroWordHTML(n)}
        <div class="size-attached-row">
          <div class="sub" style="margin:0 0 6px;">Make it bigger or smaller</div>
          <div class="modifier-row" id="modRow">
            <button class="mod-btn" data-mod="small">小 xiǎo<br><span style="font-weight:600;font-size:15px;">small</span></button>
            <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:15px;">big</span></button>
          </div>
        </div>
      </div>
      ${bonusChip}`;
  } else {
    heroBlock = `${heroWordHTML(n)}${bonusChip}`;
  }
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="sticky-word-icon" aria-hidden="true">${nounVisualHTML(n, 26)}</div>
      ${heroBlock}
      <div id="colourSlot"></div>
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  bindBonusWordCycle(n.bonusWord);
  speak(n.native);
  if(n.size){
    document.querySelectorAll('#modRow .mod-btn').forEach(btn => {
      btn.addEventListener('click', () => onPickF1Mod(cat, n, {type:'size', key:btn.dataset.mod}));
    });
  }
  // Colour used to only appear after size was picked once, for items with
  // both — sequential, not stacked, to avoid a 3-panel wall on first
  // load. Revisited: this had the same undiscoverability problem as the
  // verb-chip bug, just smaller in scope — a real option sitting on the
  // page with literally nothing signaling it existed until an unrelated
  // button was tapped first. Now colour renders immediately whenever the
  // noun has it, same principle as verb chips.
  if(n.colours && n.colours.length){
    renderColourRow(cat, n);
  }
  if(!n.size && (!n.colours || !n.colours.length)){
    addStar(cat.id, n.id);
    sentenceStarted = true;
  }
  renderF1Sentence(cat, n);
}
function renderColourRow(cat, n){
  const slot = document.getElementById('colourSlot');
  const chips = n.colours.map(k => {
    const c = COLOURS[k];
    const chosen = activeColourKey === k ? ' chosen' : '';
    return `<button class="word-chip colour-chip${chosen}" data-colour="${k}"><span class="dot" style="background:${c.hex};"></span><div class="txt"><div class="native">${c.native}</div><div class="pinyin">${c.pinyin}</div><div class="en">${c.en}</div></div></button>`;
  }).join('');
  slot.innerHTML = `<div class="sub" style="margin:16px 0 6px;">Try a colour</div><div class="word-chip-row">${chips}</div>`;
  slot.querySelectorAll('.word-chip').forEach(btn => {
    btn.addEventListener('click', () => onPickF1Mod(cat, n, {type:'colour', key:btn.dataset.colour}));
  });
}
function onPickF1Mod(cat, n, mod){
  playTapSound();
  mascotReact('happy');
  // Size and colour are independent — picking one no longer clears the
  // other, so a child's earlier choice stays in the sentence instead of
  // silently disappearing (the bug: pick "small," then a colour, and
  // "small" vanished from the sentence even though its button still
  // looked selected).
  if(mod.type === 'size') activeSizeKey = mod.key;
  if(mod.type === 'colour') activeColourKey = mod.key;
  if(!sentenceStarted){ addStar(cat.id, n.id); sentenceStarted = true; }
  const modRow = document.getElementById('modRow');
  if(modRow && mod.type === 'size'){
    modRow.querySelectorAll('.mod-btn').forEach(b => b.classList.toggle('chosen', b.dataset.mod === mod.key));
  }
  if(mod.type === 'colour'){
    document.querySelectorAll('#colourSlot .word-chip').forEach(b => b.classList.toggle('chosen', b.dataset.colour === mod.key));
  }
  // Visually reinforce the concept, not just describe it in text: scale
  // the hero icon for size (works for any icon), and for Shapes
  // specifically, recolour the actual SVG to match the picked colour —
  // shapeSVG already supported an arbitrary hex, it just wasn't wired to
  // update on colour pick. Emoji-based nouns (animals, vehicles) can't
  // be recoloured this way — glyphs are fixed images baked into the
  // font, not something CSS or JS can touch — so this is Shapes-only.
  const heroIcon = document.getElementById('heroIcon');
  if(heroIcon){
    if(mod.type === 'size'){
      heroIcon.classList.remove('size-small', 'size-big');
      heroIcon.classList.add(mod.key === 'small' ? 'size-small' : 'size-big');
    }
    if(mod.type === 'colour' && n.shape){
      heroIcon.innerHTML = shapeSVG(n.shape, COLOURS[mod.key].hex, 88);
    }
  }
  renderF1Sentence(cat, n);
  const label = mod.type === 'size' ? `${MOD_SIZE[mod.key].native}${n.native}` : `${COLOURS[mod.key].native}的${n.native}`;
  speak(label);
}
function renderF1Sentence(cat, n){
  const verbList = verbListForNoun(cat, n);
  const slot = document.getElementById('sentenceSlot');
  // Show every available word for this sentence's verb slot, visually, with
  // native + pinyin + English — rather than hiding alternatives behind a
  // blind "try another" cycle button. Nothing is pre-selected here — same
  // as size/colour, a verb only becomes "chosen" and only plays audio once
  // the child actually taps it; 喜欢 no longer auto-fills as a silent
  // default the moment a modifier is picked. Uses a visually distinct,
  // secondary chip style rather than the same card treatment as the
  // size/colour modifiers — verb choice is the sentence's predicate, not
  // decoration, per verb-bank.md §6.
  const verbChips = verbList
    .map((v, idx) => {
      const chosen = idx === activeVerbIdx ? ' chosen' : '';
      return `<button class="word-chip${chosen}" data-verb-idx="${idx}"><div class="txt"><div class="native">${v.native}</div><div class="pinyin">${v.pinyin}</div><div class="en">${v.en}</div></div></button>`;
    }).join('');
  const sentenceHTML = activeVerbIdx === null ? '' : (() => {
    const verb = verbList[activeVerbIdx];
    const sentence = frameF1(verb, {sizeKey:activeSizeKey, colourKey:activeColourKey}, n);
    return `
    <div class="sentence-card" style="margin-top:14px;" data-speak="${encodeURIComponent(sentence.native)}">
      <div class="native-line">${sentence.native}</div>
      <div class="roman-line">${sentence.pinyin}</div>
      <div class="en-line">"${sentence.en}"</div>
      <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
    </div>`;
  })();
  slot.innerHTML = `
    <div class="sub" style="margin:16px 0 2px;">Pick a word for your sentence</div>
    <div class="word-chip-row">${verbChips}</div>
    ${sentenceHTML}`;
  bindSpeakButtons(slot);
  slot.querySelectorAll('.word-chip[data-verb-idx]').forEach(btn => {
    btn.addEventListener('click', () => onPickVerb(cat, n, Number(btn.dataset.verbIdx)));
  });
}
function onPickVerb(cat, n, idx){
  playTapSound();
  activeVerbIdx = idx;
  renderF1Sentence(cat, n);
  speak(verbListForNoun(cat, n)[idx].native);
  const key = cat.id + ':' + n.id + ':' + idx;
  const celebrated = celebrateSentence(key, document.querySelector('#sentenceSlot .sentence-card'));
  if(!celebrated) mascotReact('happy');
}

/* ---- Food mode ---- */
// Every food item gets this base Words set regardless of whether it also
// has taste/size options — eating-related verbs apply to any food, unlike
// taste (not every item has a clean answer) or size (fruit/veg only).
// 喜欢吃/要吃 are two-character serial-verb compounds (like-to-eat,
// want-to-eat) but function as a single atomic slot-filler here, the same
// trick already used for badminton's 打 and the animals' 喂 — Chinese
// grammar is unaffected either way, this is just how the frame treats it.
const FOOD_VERBS = [
  {native:'喜欢吃', pinyin:'xǐ huan chī', en:'like to eat'},
  {native:'要吃',   pinyin:'yào chī',    en:'want to eat'},
  'have',
];
// 喝 (hē, "drink") for water/milk — 吃 (chī, "eat") only applies to
// solid food; "吃水" isn't correct Mandarin the way "eat water" isn't
// correct English. Milk's taste field already used 好喝 (hǎo hē) rather
// than 好吃, so the data itself already knew this was a drink — the verb
// chips just weren't checking for it.
const FOOD_VERBS_DRINK = [
  {native:'喜欢喝', pinyin:'xǐ huan hē', en:'like to drink'},
  {native:'要喝',   pinyin:'yào hē',    en:'want to drink'},
  'have',
];
function renderFood(cat, n){
  if(n.isRecital) return renderRecital(cat, n);
  let tasteHTML = '';
  if(n.taste){
    tasteHTML = `
      <div class="sub" style="margin:16px 0 6px;">How does it taste?</div>
      <div class="modifier-row"><button class="mod-btn" id="tasteBtn">${n.taste.native} ${n.taste.pinyin}<br><span style="font-weight:600;font-size:15px;">${n.taste.en}</span></button></div>`;
  }
  // Shared with F1 — same pool/cycle mechanism, used here for water's
  // bonusWord (a state, 渴/thirsty, not an action, which is why the
  // field is bonusWord rather than reusing F1's older bonusVerb naming).
  const bonusChip = bonusWordChipHTML(n.bonusWord);
  // Hero card and size buttons grouped as one visual unit, same as F1 —
  // taste stays separate below since it has no visual counterpart on the
  // icon the way size does (nothing to grow/shrink for "sweet").
  let heroBlock;
  if(n.size){
    heroBlock = `
      <div class="hero-size-group">
        ${heroWordHTML(n)}
        <div class="size-attached-row">
          <div class="sub" style="margin:0 0 6px;">Or talk about its size</div>
          <div class="modifier-row" id="modRow">
            <button class="mod-btn" data-mod="small">小 xiǎo<br><span style="font-weight:600;font-size:15px;">small</span></button>
            <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:15px;">big</span></button>
          </div>
        </div>
      </div>`;
  } else {
    heroBlock = heroWordHTML(n);
  }
  const foodVerbs = (n.isDrink ? FOOD_VERBS_DRINK : FOOD_VERBS).map(v => typeof v === 'string' ? {...VERBS[v]} : {...v});
  const wordChips = foodVerbs.map((v, idx) =>
    `<button class="word-chip" data-food-verb-idx="${idx}"><div class="txt"><div class="native">${v.native}</div><div class="pinyin">${v.pinyin}</div><div class="en">${v.en}</div></div></button>`
  ).join('');
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="sticky-word-icon" aria-hidden="true">${nounVisualHTML(n, 26)}</div>
      ${heroBlock}
      ${bonusChip}
      ${tasteHTML}
      <div class="sub" style="margin:16px 0 2px;">Pick a word for your sentence</div>
      <div class="word-chip-row">${wordChips}</div>
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  bindBonusWordCycle(n.bonusWord);
  speak(n.native);
  // Taste, size, and word all combine into ONE persistent sentence —
  // taste reuses frameF1's generic 'descriptor' slot (see frameF1), the
  // same 的-attachment mechanism colour already uses, so 甜的大西瓜
  // ("sweet big watermelon") builds the same way 红色的小飞机 does.
  // Previously each control produced its own standalone sentence and
  // silently discarded whatever the other controls had already chosen —
  // and none of them even showed as visually "chosen" once the sentence
  // moved on to reflect a different control.
  function renderFoodSentence(){
    const slot = document.getElementById('sentenceSlot');
    if(activeFoodVerbIdx === null){
      // No word picked yet — taste/size can still be toggled, but there's
      // no verb to build a sentence with, so nothing shows or plays.
      // Previously this defaulted to verb index 0, meaning tapping ONLY
      // size or taste silently built and spoke a full sentence with a
      // word the child never actually chose or saw highlighted.
      slot.innerHTML = '';
      return;
    }
    if(!sentenceStartedFor(n)) { addStar(cat.id, n.id); markSentenceStartedFor(n); }
    const verb = foodVerbs[activeFoodVerbIdx];
    const mods = {
      sizeKey: activeFoodSizeKey,
      descriptor: (activeFoodTasteOn && n.taste) ? n.taste : null,
    };
    const sentence = frameF1(verb, mods, n);
    slot.innerHTML = `
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>`;
    bindSpeakButtons(slot);
    // Full sentence is NOT auto-spoken here — the sentence card itself
    // is tappable (data-speak above) for hearing it on demand, matching
    // F1 exactly: modifier taps and word-chip taps each speak their own
    // piece (see the click handlers below), the sentence card is a
    // separate, deliberate action a child chooses to tap.
    const key = cat.id + ':' + n.id + ':' + activeFoodVerbIdx + ':' + activeFoodSizeKey + ':' + activeFoodTasteOn;
    const celebrated = celebrateSentence(key, slot.querySelector('.sentence-card'));
    if(!celebrated) mascotReact('happy');
  }

  els.storyArea.querySelectorAll('[data-food-verb-idx]').forEach(btn => {
    btn.addEventListener('click', () => {
      playTapSound();
      activeFoodVerbIdx = Number(btn.dataset.foodVerbIdx);
      els.storyArea.querySelectorAll('[data-food-verb-idx]').forEach(b => b.classList.toggle('chosen', b === btn));
      // Speaks just the word, matching F1's onPickVerb exactly — not the
      // full sentence. Hearing the full sentence is a separate, tappable
      // action on the sentence card itself.
      speak(foodVerbs[activeFoodVerbIdx].native);
      renderFoodSentence();
    });
  });
  if(n.taste){
    const tasteBtn = document.getElementById('tasteBtn');
    tasteBtn.addEventListener('click', () => {
      playTapSound();
      activeFoodTasteOn = !activeFoodTasteOn; // toggle — tap again to remove it from the sentence
      tasteBtn.classList.toggle('chosen', activeFoodTasteOn);
      // Immediate audio feedback for the choice itself, matching F1's
      // onPickF1Mod pattern — independent of whether a full sentence has
      // formed yet (that still needs a word picked separately).
      if(activeFoodTasteOn) speak(`${n.taste.native}的${n.native}`);
      renderFoodSentence();
    });
  }
  if(n.size){
    document.querySelectorAll('#modRow .mod-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        playTapSound();
        activeFoodSizeKey = btn.dataset.mod;
        document.querySelectorAll('#modRow .mod-btn').forEach(b => b.classList.toggle('chosen', b === btn));
        const heroIcon = document.getElementById('heroIcon');
        if(heroIcon){
          heroIcon.classList.remove('size-small', 'size-big');
          heroIcon.classList.add(activeFoodSizeKey === 'small' ? 'size-small' : 'size-big');
        }
        // Immediate audio feedback for the size+noun phrase itself
        // ("大苹果"), matching F1's onPickF1Mod pattern — this was
        // missing here entirely; Food previously only ever spoke the
        // FULL sentence (with a silently auto-selected default word),
        // so removing that auto-selection removed all audio feedback
        // for picking a size with no replacement.
        speak(`${MOD_SIZE[activeFoodSizeKey].native}${n.native}`);
        renderFoodSentence();
      });
    });
  }
}
// Food's "first meaningful choice earns a star" guard, keyed per-noun the
// same way sentenceStarted works for F1 — separate Set since Food's flow
// (taste/size/word all optional and combinable) doesn't map cleanly onto
// the single boolean F1 uses.
const foodSentenceStartedIds = new Set();
function sentenceStartedFor(n){ return foodSentenceStartedIds.has(n.id); }
function markSentenceStartedFor(n){ foodSentenceStartedIds.add(n.id); }

/* ---- Places mode ---- */
function renderPlace(cat, n){
  // Hero card and size buttons grouped as one visual unit, same as F1
  // and Food.
  let heroBlock;
  if(n.size){
    heroBlock = `
      <div class="hero-size-group">
        ${heroWordHTML(n)}
        <div class="size-attached-row">
          <div class="sub" style="margin:0 0 6px;">Make it bigger or smaller</div>
          <div class="modifier-row" id="modRow">
            <button class="mod-btn" data-mod="small">小 xiǎo<br><span style="font-weight:600;font-size:15px;">small</span></button>
            <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:15px;">big</span></button>
          </div>
        </div>
      </div>`;
  } else {
    heroBlock = heroWordHTML(n);
  }
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="sticky-word-icon" aria-hidden="true">${nounVisualHTML(n, 26)}</div>
      ${heroBlock}
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  const showSentence = (sizeKey, celebrate) => {
    addStar(cat.id, n.id);
    const sentence = framePlace(sizeKey, n);
    const slot = document.getElementById('sentenceSlot');
    slot.innerHTML = `
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>`;
    bindSpeakButtons(slot);
    // Full sentence is NOT auto-spoken here — the sentence card itself
    // is tappable (data-speak above) for hearing it on demand, matching
    // F1/Food exactly: modifier taps speak just the modifier+noun (see
    // the size-button handler below), the sentence card is a separate,
    // deliberate action a child chooses to tap.
    if(celebrate){
      const key = cat.id + ':' + n.id + ':' + sizeKey;
      const celebrated = celebrateSentence(key, slot.querySelector('.sentence-card'));
      if(!celebrated) mascotReact('happy');
    }
  };
  if(n.size){
    document.querySelectorAll('#modRow .mod-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        playTapSound();
        document.querySelectorAll('#modRow .mod-btn').forEach(b => b.classList.toggle('chosen', b === btn));
        const heroIcon = document.getElementById('heroIcon');
        if(heroIcon){
          heroIcon.classList.remove('size-small', 'size-big');
          heroIcon.classList.add(btn.dataset.mod === 'small' ? 'size-small' : 'size-big');
        }
        // Speaks just the size+noun phrase ("大学校"), matching F1/Food
        // exactly — not the full sentence, which stays a separate,
        // deliberate tap on the sentence card.
        speak(`${MOD_SIZE[btn.dataset.mod].native}${n.native}`);
        showSentence(btn.dataset.mod, true);
      });
    });
  }
  // Base sentence (no size modifier) always shows immediately now,
  // regardless of whether this place has size buttons — previously it
  // only appeared for places WITHOUT size, so anything WITH size showed
  // nothing at all until that one button was tapped, same
  // undiscoverability problem as the verb-chip bug, just smaller. Size
  // buttons now refine an already-visible sentence instead of being
  // required to ever see one.
  showSentence(null, false);
}

/* ---- Tier0-only mode: family / body parts ---- */
// Generates N particle spans with randomized left position/timing —
// negative animation-delay starts each one partway through its own
// cycle, so the scene looks already-in-progress on first render rather
// than every drop/flake starting from zero in unison.
function weatherParticlesHTML(count, cls, emoji, durMin, durMax){
  let html = '';
  for(let i = 0; i < count; i++){
    const left = (Math.random() * 88 + 3).toFixed(1);
    const dur = (durMin + Math.random() * (durMax - durMin)).toFixed(2);
    const delay = (-Math.random() * dur).toFixed(2);
    html += `<span class="${cls}" style="left:${left}%; animation-duration:${dur}s; animation-delay:${delay}s;">${emoji}</span>`;
  }
  return html;
}
function weatherSceneHTML(weatherId){
  switch(weatherId){
    case 'rainy':
      return weatherParticlesHTML(10, 'wx-drop', '💧', 0.9, 1.6);
    case 'snowy':
      return weatherParticlesHTML(9, 'wx-flake', '❄️', 2.6, 4.2);
    case 'windy':
      return weatherParticlesHTML(6, 'wx-leaf', '🍃', 2.2, 3.4)
        + `<span class="wx-cloud" style="top:4px; left:-10px; font-size:30px; animation-duration:6s;">☁️</span>`;
    case 'cloudy':
      return `<span class="wx-cloud" style="top:2px; left:20%; font-size:30px; animation-duration:9s;">☁️</span>
              <span class="wx-cloud" style="top:26px; left:5%; font-size:24px; animation-duration:7s;">☁️</span>`;
    case 'thunder':
      return weatherParticlesHTML(8, 'wx-drop', '💧', 0.8, 1.4)
        + `<span class="wx-bolt" style="left:38%;">⚡</span><div class="wx-flash"></div>`;
    default:
      return '';
  }
}
function renderTier0Only(cat, n){
  if(n.isRecital) return renderRecital(cat, n);
  if(n.isSiblingPair) return renderSiblingPair(cat, n);
  // Every branch here now produces a real bilingual sentence card, so
  // the English-only caption ("Let's cook!", "It's sunny!", "Here's a
  // head!") is redundant everywhere, not just the categories that were
  // already fixed — Cooking/Cleaning/Daily Habits were the last holdout,
  // kept on the reasoning that "Let's cook!" was never flagged as
  // broken the way the others were. Consistency wins here: no category
  // shows a decorative caption anymore, all of them show a real sentence.
  let sentenceHTML = '';
  const bonusChip = bonusWordChipHTML(n.bonusWord); // no-ops (renders nothing) for items without one — Cooking/Cleaning/Daily Habits, Family, Body Parts don't have any yet
  if(cat.captionType === 'weather'){
    const sentence = n.primarySentence;
    sentenceHTML = `
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>`;
    if(n.bonusPhrase){
      const bp = n.bonusPhrase;
      sentenceHTML += `
        <div class="sub" style="margin:14px 0 6px;">You can also say:</div>
        <div class="sentence-card secondary" data-speak="${encodeURIComponent(bp.native)}">
          <div class="native-line">${bp.native}</div>
          <div class="roman-line">${bp.pinyin}</div>
          <div class="en-line">"${bp.en}"</div>
          <div class="play-row"><button class="mini-speak" aria-label="Play sound">🔊</button></div>
        </div>`;
    }
  } else if(cat.captionType === 'action'){
    // Cooking / Cleaning / Daily Habits — 我在X reuses the exact 在
    // (ongoing action) pattern already used and native-speaker-verified
    // for weather's bonus phrases (现在在下雨), applied here as the
    // primary sentence instead of a bonus aside. These three categories
    // were previously the flattest in the app — tap, hear, "Let's cook!"
    // caption, nothing else — while every other category had real
    // sentence content.
    const sentence = frameInProgress(n);
    sentenceHTML = `
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>`;
  } else {
    // Family / Body Parts — 这是我的X is a natural, useful sentence for
    // both ("this is my brother," "this is my head"), using the
    // high-value 这是...的... demonstrative + possessive pattern.
    // primarySentence overrides this for the rare word (currently just
    // "person") where the possessive pattern doesn't actually make sense.
    const sentence = n.primarySentence || frameThisIsMy(n);
    sentenceHTML = `
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>`;
  }
  const heroHTML = cat.captionType === 'weather'
    ? `<div class="weather-scene">${heroWordHTML(n)}${weatherSceneHTML(n.id)}</div>`
    : heroWordHTML(n);
  els.storyArea.innerHTML = `
    <div class="panel">
      ${heroHTML}
      ${bonusChip}
      ${sentenceHTML}
    </div>`;
  bindSpeakButtons(els.storyArea);
  bindBonusWordCycle(n.bonusWord);
  bindSentenceCelebration(els.storyArea, cat.id + ':' + n.id);
  speak(n.native);
  addStar(cat.id, n.id);
}
// Both figures in the pair are independently tappable — tapping the big
// one teaches the "older" word, tapping the small one teaches the
// "younger" word, switching which one is highlighted and which word is
// shown/spoken. Replaces the old design where 哥哥 and 弟弟 were two
// separate grid tiles that rendered the identical pair, differing only
// in which figure was pre-highlighted — the big/small contrast is now
// something the child plays with directly instead of only seeing after
// already choosing a tile.
function renderSiblingPair(cat, n){
  let activeSize = 'big';
  function draw(){
    const active = n[activeSize];
    const sentence = frameThisIsMy(active);
    els.storyArea.innerHTML = `
      <div class="panel">
        <div class="story-caption">
          <div class="sibling-pair">
            <button class="sib big ${activeSize === 'big' ? 'highlight' : ''}" data-size="big" aria-label="${n.big.en}">${n.emoji}</button>
            <button class="sib small ${activeSize === 'small' ? 'highlight' : ''}" data-size="small" aria-label="${n.small.en}">${n.emoji}</button>
          </div>
        </div>
        ${wordRowHTML(active, {visualHTML: nounVisualHTML(n, 40)})}
        <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
          <div class="native-line">${sentence.native}</div>
          <div class="roman-line">${sentence.pinyin}</div>
          <div class="en-line">"${sentence.en}"</div>
          <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
        </div>
      </div>`;
    bindSpeakButtons(els.storyArea);
    bindSentenceCelebration(els.storyArea, cat.id + ':' + n.id + ':' + activeSize);
    speak(active.native);
    addStar(cat.id, n.id + ':' + activeSize);
    els.storyArea.querySelectorAll('.sib').forEach(btn => {
      btn.addEventListener('click', () => { playTapSound(); activeSize = btn.dataset.size; draw(); });
    });
  }
  draw();
}

/* ---- Feelings mode (SF1) ---- */
function renderFeeling(cat, n){
  els.storyArea.innerHTML = `
    <div class="panel">
      ${heroWordHTML(n)}
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  addStar(cat.id, n.id);
  const sentence = frameFeelingSF1(n);
  const slot = document.getElementById('sentenceSlot');
  slot.innerHTML = `
    <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
      <div class="native-line">${sentence.native}</div>
      <div class="roman-line">${sentence.pinyin}</div>
      <div class="en-line">"${sentence.en}"</div>
      <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
    </div>`;
  bindSpeakButtons(slot);
  bindSentenceCelebration(slot, cat.id + ':' + n.id);
}

/* ---- Numbers mode ---- */
function renderNumberDetail(cat, n){
  if(n.isSong) return renderCountSong(cat, n);
  // Previously plain tap-to-hear only — the flattest interaction in the
  // whole app, no sentence at all. 这是X reuses the same demonstrative
  // pattern already used for Family/Body Parts (这是我的头), dropping
  // 我的 since numbers aren't possessed the way body parts are.
  const sentence = frameThisIsNumber(n);
  els.storyArea.innerHTML = `
    <div class="panel">
      ${heroWordHTML(n)}
      <div class="sentence-card" data-speak="${encodeURIComponent(sentence.native)}">
        <div class="native-line">${sentence.native}</div>
        <div class="roman-line">${sentence.pinyin}</div>
        <div class="en-line">"${sentence.en}"</div>
        <div class="play-row"><button class="mini-speak gold" aria-label="Play sound">🔊</button></div>
      </div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  addStar(cat.id, n.id);
}
// A recital is a classical poem/verse given its own discoverable tile —
// same status as the count-along 🎶 tile, not content nested inside an
// unrelated word (三字经 originally lived inside "person," which buried
// it and made it easy to miss entirely). One generic function serves
// every category that hosts one (Family, Animals, Weather, Daily
// Habits, Food) via the isRecital:true flag, checked at the top of each
// mode's render function before any category-specific logic runs —
// same guard pattern renderNumberDetail already uses for n.isSong.
// Recital scenes — MVP prototype, goose_poem only. Free-order hunt:
// every target is live and gives immediate feedback from the first
// second — a sequential, gated version was tried and reverted, since
// silent no-ops on "not your turn yet" taps read as broken rather than
// as guidance (a child tapping the big, obvious pond first got zero
// feedback at all). White+green stay combined into one reveal, since
// that pairing genuinely reflects the line itself (白毛浮绿水 names them
// together, not as two separate facts) — that part of the redesign was
// worth keeping independent of ordering.
// Discovery scenes — the poem IS the sequence, not a free-order hunt
// layered on top of it. Template the INTERACTION LOGIC (hear → notice →
// explore → discover → connect), not the scene itself — each poem gets
// its own custom scene HTML/steps; nothing here assumes a pond or a
// goose exists for some future poem. goose_poem is currently the only
// entry; 三字经/春晓/静夜思/悯农 have none and render without a scene,
// same as before.
//
// Target elements are the REAL visual pieces wherever one exists (the
// goose emoji itself, the pond shape, the ripple mark) rather than
// invisible overlays — 'neck' is the one exception, since a single
// emoji glyph has no separately-selectable sub-region to make "just
// the neck" a real clickable thing.
const RECITAL_SCENES = {
  goose_poem: {
    steps: [
      {targetId:'goose',  reactionClass:'react-bounce',  reveal:null},
      {targetId:'neck',   reactionTarget:'goose', reactionClass:'react-stretch', reveal:[{native:'歌', pinyin:'gē',   en:'song'}]},
      {targetId:'pond',   reactionClass:'react-glow',    reveal:[{native:'白', pinyin:'bái',  en:'white'}, {native:'绿', pinyin:'lǜ', en:'green'}]},
      {targetId:'ripple', reactionTarget:'goose', reactionClass:'react-paddle',  reveal:[{native:'红', pinyin:'hóng', en:'red'}]},
    ],
  },
  // 春晓 — sun/dawn-light opens with no reveal (mirrors 咏鹅's own
  // "introduce the scene" first tap), then bird/rain-trace/petals each
  // carry one of the poem's genuinely visualizable images. "夜来风雨声"
  // describes something already past by morning, not active weather —
  // represented as a damp patch (aftermath), not a storm — and reveals
  // wind+rain together, the same "combine what one line names together"
  // treatment 白/绿 already got.
  spring_poem: {
    steps: [
      {targetId:'sun',    reactionClass:'react-glow',   reveal:null},
      {targetId:'bird',   reactionClass:'react-bounce', reveal:[{native:'鸟', pinyin:'niǎo', en:'bird'}]},
      {targetId:'puddle', reactionClass:'react-glow',   reveal:[{native:'风', pinyin:'fēng', en:'wind'}, {native:'雨', pinyin:'yǔ', en:'rain'}]},
      {targetId:'petals', reactionClass:'react-bounce', reveal:[{native:'花', pinyin:'huā', en:'flower'}]},
    ],
  },
  // 悯农 — "谁知盘中餐" (who remembers the effort behind the food) is
  // rhetorical, not a physical image, same category of line as 静夜思's
  // closing one — represented by a bowl/plate tap with NO reveal,
  // acknowledging the line without forcing a vocabulary moment onto it.
  farmer_poem: {
    steps: [
      {targetId:'farmer', reactionClass:'react-bounce', reveal:null},
      {targetId:'sweat',  reactionTarget:'farmer', reactionClass:'react-bounce', reveal:[{native:'汗', pinyin:'hàn', en:'sweat'}]},
      {targetId:'bowl',   reactionClass:'react-glow',   reveal:null},
      {targetId:'grain',  reactionClass:'react-bounce', reveal:[{native:'米', pinyin:'mǐ',  en:'grain'}]},
    ],
  },
  // 静夜思 — originally left at 3 steps for 4 lines, with the closing
  // line (低头思故乡, lowering his head thinking of home) deliberately
  // kept listening-only, since it's the emotional core of arguably the
  // most famous poem in the language and genuinely abstract (there's no
  // physical object called "home" the way there's a physical moon or
  // frost). Now given its own step per explicit request: represented as
  // a small, warm, distant glow low on the horizon — not a literal house
  // or a reveal of "家"/"故乡" as a whole compound, just 乡 (hometown/
  // village) alone, and reached by looking back DOWN after the moon,
  // mirroring the poem's own gesture (举头 look up, 低头 look down).
  // Tone stays quiet throughout: react-shimmer, never the bouncier
  // reactions used elsewhere. The moon is tapped twice, once with no
  // reveal and once revealing 月 — the poem itself revisits it this same
  // way ("举头望明月").
  quiet_night_poem: {
    steps: [
      {targetId:'moon',  reactionClass:'react-shimmer', reveal:null},
      {targetId:'frost', reactionClass:'react-shimmer', reveal:[{native:'霜', pinyin:'shuāng', en:'frost'}]},
      {targetId:'moon',  reactionClass:'react-shimmer', reveal:[{native:'月', pinyin:'yuè', en:'moon'}]},
      {targetId:'home',  reactionClass:'react-shimmer', reveal:[{native:'乡', pinyin:'xiāng', en:'hometown'}]},
    ],
  },
};
function renderRecitalSceneHTML(n){
  const scene = RECITAL_SCENES[n.id];
  if(!scene) return '';
  if(n.id === 'goose_poem') return renderGooseSceneHTML();
  if(n.id === 'spring_poem') return renderSpringSceneHTML();
  if(n.id === 'farmer_poem') return renderFarmerSceneHTML();
  if(n.id === 'quiet_night_poem') return renderNightSceneHTML();
  return '';
}
function renderGooseSceneHTML(){
  // Sky clouds reuse .wx-cloud/wxDrift directly from the weather scenes
  // — not a new animation, the same one already proven there.
  return `
    <div class="recital-scene" id="recitalScene">
      <span class="wx-cloud" style="top:8%; left:8%; font-size:26px; animation-duration:8s;" aria-hidden="true">☁️</span>
      <span class="wx-cloud" style="top:14%; left:70%; font-size:20px; animation-duration:10s;" aria-hidden="true">☁️</span>
      <div class="recital-found-row" id="recitalFoundRow"></div>
      <div class="discovery-subtitle" id="discoverySubtitle" aria-live="polite"></div>
      <button class="recital-pond discovery-target active-target" id="target-pond" aria-label="The pond" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <span class="recital-reed" style="left:4%;" aria-hidden="true">🌿</span>
      <span class="recital-reed" style="right:4%;" aria-hidden="true">🌿</span>
      <button class="recital-ripple discovery-target active-target" id="target-ripple" aria-label="Ripples near the goose's feet" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-goose center-anchored discovery-target active-target" id="target-goose" aria-label="The goose">
        🪿<span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-neck" style="top:28%; left:50%;" aria-label="The goose's neck, stretched toward the sky" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
    </div>
    <div class="discovery-complete" id="discoveryComplete"></div>`;
}
// 春晓 — dawn garden. Reuses the goose scene's proven skeleton (ground
// shape + central character + satellite discovery points + sky decor)
// re-themed, rather than inventing new layout math — same reasoning as
// building any of these on the proven pattern instead of from scratch.
function renderSpringSceneHTML(){
  return `
    <div class="recital-scene spring-scene" id="recitalScene">
      <span class="wx-cloud" style="top:10%; left:10%; font-size:22px; animation-duration:9s; opacity:.5;" aria-hidden="true">☁️</span>
      <span class="wx-cloud" style="top:6%; left:52%; font-size:18px; animation-duration:11s; opacity:.45;" aria-hidden="true">☁️</span>
      <span class="wx-cloud" style="top:16%; left:82%; font-size:20px; animation-duration:8s; opacity:.4;" aria-hidden="true">☁️</span>
      <div class="recital-found-row" id="recitalFoundRow"></div>
      <div class="discovery-subtitle" id="discoverySubtitle" aria-live="polite"></div>
      <div class="spring-ground"></div>
      <span class="spring-branch" aria-hidden="true">🌸</span>
      <span class="spring-blossom-accent" style="top:78%; left:8%; font-size:16px;" aria-hidden="true">🌸</span>
      <span class="spring-blossom-accent" style="top:82%; left:62%; font-size:14px;" aria-hidden="true">🌸</span>
      <span class="spring-blossom-accent" style="top:70%; left:88%; font-size:15px;" aria-hidden="true">🌸</span>
      <button class="spring-sun center-anchored discovery-target active-target" id="target-sun" aria-label="The morning sun">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-bird" style="top:34%; left:68%;" aria-label="A bird perched on the branch" aria-disabled="true" tabindex="-1">
        <span class="spring-bird" aria-hidden="true">🐦</span>
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="spring-puddle discovery-target" id="target-puddle" aria-label="A damp patch on the ground" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-petals" style="top:88%; left:28%;" aria-label="Fallen petals on the ground" aria-disabled="true" tabindex="-1">
        <span class="spring-petals" aria-hidden="true">🌸</span>
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
    </div>
    <div class="discovery-complete" id="discoveryComplete"></div>`;
}
// 悯农 — a dry midday field. Same reused skeleton again: ground + central
// figure (farmer, playing the role the goose/sun played) + satellites.
function renderFarmerSceneHTML(){
  return `
    <div class="recital-scene farmer-scene" id="recitalScene">
      <span class="wx-cloud" style="top:8%; left:12%; font-size:24px; animation-duration:9s; opacity:.6;" aria-hidden="true">☁️</span>
      <span class="wx-cloud" style="top:14%; left:72%; font-size:20px; animation-duration:11s; opacity:.5;" aria-hidden="true">☁️</span>
      <div class="recital-found-row" id="recitalFoundRow"></div>
      <div class="discovery-subtitle" id="discoverySubtitle" aria-live="polite"></div>
      <div class="farmer-ground"></div>
      <span class="farmer-grain-accent" style="left:4%;" aria-hidden="true">🌾</span>
      <span class="farmer-grain-accent" style="right:4%;" aria-hidden="true">🌾</span>
      <button class="farmer-figure center-anchored discovery-target active-target" id="target-farmer" aria-label="A farmer hoeing the field">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-sweat" style="top:24%; left:58%;" aria-label="A drop of sweat" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-bowl" style="top:78%; left:78%;" aria-label="A bowl of rice" aria-disabled="true" tabindex="-1">
        <span class="farmer-bowl" aria-hidden="true">🍚</span>
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="recital-hotspot" id="target-grain" style="top:85%; left:22%;" aria-label="Grains of rice on the ground" aria-disabled="true" tabindex="-1">
        <span class="farmer-grain" aria-hidden="true">🌾</span>
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
    </div>
    <div class="discovery-complete" id="discoveryComplete"></div>`;
}
// 静夜思 — deliberately the odd one out. Deeper, quieter palette, no
// bouncy elements anywhere, and the moon is reused for two separate
// steps (see RECITAL_SCENES' own comment on why).
function renderNightSceneHTML(){
  return `
    <div class="recital-scene night-scene" id="recitalScene">
      <span class="night-star" style="top:8%; left:15%; animation-delay:0s;" aria-hidden="true">✨</span>
      <span class="night-star" style="top:16%; left:78%; animation-delay:-0.8s;" aria-hidden="true">✨</span>
      <span class="night-star" style="top:32%; left:22%; animation-delay:-1.6s;" aria-hidden="true">✨</span>
      <span class="night-star" style="top:10%; left:55%; animation-delay:-1.2s;" aria-hidden="true">✨</span>
      <span class="night-star" style="top:28%; left:68%; animation-delay:-0.4s;" aria-hidden="true">✨</span>
      <div class="recital-found-row" id="recitalFoundRow"></div>
      <div class="discovery-subtitle" id="discoverySubtitle" aria-live="polite"></div>
      <div class="night-ground"></div>
      <button class="night-moon center-anchored discovery-target active-target" id="target-moon" aria-label="The bright moon">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="night-frost discovery-target" id="target-frost" aria-label="Frost on the ground" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
      <button class="night-home discovery-target" id="target-home" aria-label="A distant light on the horizon" aria-disabled="true" tabindex="-1">
        <span class="tap-hint" aria-hidden="true">👆</span>
      </button>
    </div>
    <div class="discovery-complete" id="discoveryComplete"></div>`;
}
// The sequential engine — generic enough to drive any poem's steps,
// specific only in that IT knows about hear/notice/explore/discover/
// connect, not about ponds or geese. Only the CURRENT step's target is
// interactive-and-glowing; tapping ahead of turn is a quiet no-op, same
// "nothing bad happens" rule as everywhere else in this app.
function bindRecitalScene(cat, n){
  const scene = RECITAL_SCENES[n.id];
  if(!scene) return;
  const sceneEl = document.getElementById('recitalScene');
  const foundRow = document.getElementById('recitalFoundRow');
  const subtitleEl = document.getElementById('discoverySubtitle');
  const completeEl = document.getElementById('discoveryComplete');
  let stepIndex = 0;

  function targetEl(targetId){
    return document.getElementById('target-' + targetId);
  }
  // Generic — a step's reaction plays on whatever element its OWN data
  // says to (reactionTarget), defaulting to the step's own targetId if
  // unspecified. This used to hardcode "neck and ripple both animate the
  // goose," which only ever made sense for 咏鹅 specifically — now any
  // poem's steps declare their own redirect (or none) in their own data.
  function reactionSurface(step){
    return targetEl(step.reactionTarget || step.targetId);
  }
  function showSubtitle(line, highlightChars){
    if(!subtitleEl) return;
    subtitleEl.innerHTML = `
      <div class="discovery-subtitle-native">${highlightedNativeHTML(line.native, highlightChars)}</div>
      <div class="discovery-subtitle-pinyin">${line.pinyin}</div>
      <div class="discovery-subtitle-en">"${line.en}"</div>`;
    subtitleEl.classList.add('visible');
    clearTimeout(subtitleEl._hideTimer);
    subtitleEl._hideTimer = setTimeout(() => subtitleEl.classList.remove('visible'), 3200);
  }
  function triggerReaction(el, reactionClass){
    if(!el || !reactionClass) return;
    el.classList.add(reactionClass);
    setTimeout(() => el.classList.remove(reactionClass), 700);
  }
  function setActiveGlow(){
    // Iterate over each UNIQUE element, not each step — necessary
    // because a targetId can appear more than once in a poem's steps
    // (静夜思 revisits the moon for a second discovery). Looping over
    // raw steps and setting each one's element state independently
    // meant moon's SECOND listing (index 2) would run after its FIRST
    // listing (index 0) in the same pass, incorrectly overwriting the
    // correct "active" state the first listing had just set — moon
    // ended up marked inactive even on the very first load, which is
    // exactly why its tap-hint never appeared, from the start, every
    // time. Checking "is THIS element the current step's target" per
    // unique element avoids that entirely.
    const uniqueTargetIds = [...new Set(scene.steps.map(s => s.targetId))];
    uniqueTargetIds.forEach(targetId => {
      const el = targetEl(targetId);
      if(!el) return;
      const isActive = !!scene.steps[stepIndex] && scene.steps[stepIndex].targetId === targetId;
      const becomingActive = isActive && !el.classList.contains('active-target');
      el.classList.toggle('active-target', isActive);
      // Screen-reader/keyboard equivalent of the visual glow — a sighted
      // child sees which target is currently live; this communicates
      // the same thing without sight: inactive targets are marked
      // disabled and pulled out of tab order entirely, rather than
      // being reachable-but-silently-inert.
      el.setAttribute('aria-disabled', isActive ? 'false' : 'true');
      el.setAttribute('tabindex', isActive ? '0' : '-1');
      // Changing tabindex to -1 does NOT automatically remove visible
      // focus from an element that already had it — the browser leaves
      // its focus-visible outline sitting there indefinitely, which is
      // exactly the stray floating ring that showed up over the goose:
      // the neck hotspot still had keyboard focus after its own turn
      // ended and the sequence had already moved on to the pond.
      if(!isActive && document.activeElement === el) el.blur();
      // A brief pop when a target FIRST becomes active — the steady
      // pulse alone risks being something an easily-distracted child
      // never actually notices switch to a new spot; a one-off "pop"
      // moment draws the eye at the exact instant it matters, without
      // adding any progress count/UI the spec explicitly ruled out.
      if(becomingActive){
        el.classList.add('just-activated');
        setTimeout(() => el.classList.remove('just-activated'), 500);
      }
    });
  }
  function showCompletion(){
    if(!completeEl) return;
    // Just the two actions now — the found-badge row (top-right) already
    // shows the discovered characters cleanly; scattering a second, larger
    // copy of the same characters around the goose was redundant.
    completeEl.innerHTML = `
      <div class="discovery-actions">
        <button class="discovery-action-btn" id="btnReplayDiscovery">🔍 Replay discovery</button>
        <button class="discovery-action-btn" id="btnListenTogether">🎵 Listen together</button>
      </div>`;
    completeEl.classList.add('visible');
    document.getElementById('btnReplayDiscovery').addEventListener('click', resetDiscovery);
    document.getElementById('btnListenTogether').addEventListener('click', () => playListenTogether(n, scene, subtitleEl, reactionSurface));
  }
  // "Find them again" — resets interaction state only. The scene itself
  // (goose, pond, reeds) never disappears or rebuilds; only the
  // discovery progress restarts, matching "don't make completion
  // permanent in a way that removes the game."
  function resetDiscovery(){
    stepIndex = 0;
    if(completeEl){ completeEl.classList.remove('visible'); completeEl.innerHTML = ''; }
    if(foundRow) foundRow.innerHTML = '';
    setActiveGlow();
  }
  function handleStepTap(targetId){
    if(!scene.steps[stepIndex] || scene.steps[stepIndex].targetId !== targetId) return; // not this step's turn — quiet no-op
    const i = stepIndex;
    const step = scene.steps[i];
    playTapSound();
    const highlightChars = step.reveal ? step.reveal.map(w => w.native) : null;
    showSubtitle(n.lines[i], highlightChars);
    triggerReaction(reactionSurface(step), step.reactionClass);
    speak(n.lines[i].native);
    if(step.reveal){
      setTimeout(() => {
        spawnBabyClouds(targetEl(targetId));
        step.reveal.forEach(w => {
          const badge = document.createElement('div');
          badge.className = 'recital-found-badge';
          badge.textContent = w.native;
          foundRow.appendChild(badge);
        });
        const reveal = document.createElement('div');
        reveal.className = 'recital-reveal';
        reveal.innerHTML = step.reveal.map(w =>
          `<span class="recital-reveal-item"><span class="native">${w.native}</span><span class="pinyin">${w.pinyin}</span><span class="en">"${w.en}"</span></span>`
        ).join('');
        sceneEl.appendChild(reveal);
        setTimeout(() => reveal.remove(), 2400);
      }, 500); // small delay so the line-in-context lands first, before the specific-word celebration
    }
    stepIndex++;
    if(stepIndex < scene.steps.length){
      setActiveGlow();
    } else {
      // setActiveGlow already loops over every step and sets isActive
      // based on i === stepIndex — with stepIndex now past the end,
      // NOTHING matches, so every target (not just the goose) correctly
      // loses active-target/aria-disabled/tabindex/hint visibility in
      // one generic pass, instead of hand-clearing just one of them.
      setActiveGlow();
      setTimeout(() => {
        // 静夜思 gets a calmer completion — no bouncy mascot celebration,
        // matching the quieter tone used throughout this one poem (see
        // RECITAL_SCENES' own comment on why). 'happy' is the gentler of
        // the two mascotReact intensities; still an acknowledgment, not
        // a big, energetic moment that would feel mismatched against a
        // poem about missing home.
        mascotReact(n.id === 'quiet_night_poem' ? 'happy' : 'excited');
        addStar(cat.id, n.id + ':scene');
        showCompletion();
      }, 1400);
    }
  }
  scene.steps.forEach(step => {
    const el = targetEl(step.targetId);
    if(el) el.addEventListener('click', () => handleStepTap(step.targetId));
  });
  setActiveGlow();
}
// "Hear the whole poem" — auto-sequenced, no taps required, replaying
// every line with its scene reaction and subtitle so the poem feels
// like it's coming alive as a small performance. Does NOT re-run the
// reveal popup or re-collect found badges — those are first-discovery
// moments, not part of a replay.
// Shared between the interactive discovery (bindRecitalScene) and the
// auto-played "Listen together" replay — one highlighting implementation,
// not two copies of the same character-matching logic.
function highlightedNativeHTML(native, highlightChars){
  return native.split('').map(ch =>
    (highlightChars && highlightChars.includes(ch)) ? `<span class="discovery-line-highlight">${ch}</span>` : ch
  ).join('');
}
function playListenTogether(n, scene, subtitleEl, reactionSurface){
  playTapSound();
  let i = 0;
  function next(){
    // Every LINE plays, not just every interactive step — a poem can
    // have fewer discoveries than lines (静夜思's closing line is
    // deliberately not part of the tap sequence, but still needs to be
    // heard here as part of "the whole poem"). step is undefined for
    // any line beyond the discovery sequence; that's fine, it just
    // means no reaction/highlight for that line, not an error.
    if(i >= n.lines.length) return;
    const step = scene.steps[i];
    const line = n.lines[i];
    const highlightChars = step && step.reveal ? step.reveal.map(w => w.native) : null;
    if(subtitleEl){
      subtitleEl.innerHTML = `
        <div class="discovery-subtitle-native">${highlightedNativeHTML(line.native, highlightChars)}</div>
        <div class="discovery-subtitle-pinyin">${line.pinyin}</div>
        <div class="discovery-subtitle-en">"${line.en}"</div>`;
      subtitleEl.classList.add('visible');
    }
    if(step){
      const surface = reactionSurface(step);
      if(surface && step.reactionClass){
        surface.classList.add(step.reactionClass);
        setTimeout(() => surface.classList.remove(step.reactionClass), 700);
      }
    }
    speak(line.native, 0, () => {
      subtitleEl?.classList.remove('visible');
      i++;
      setTimeout(next, 500);
    });
  }
  next();
}
function renderRecital(cat, n){
  // The full poem card and the discovery scene now BOTH always render
  // when a scene exists — this used to suppress the card, on the
  // assumption the scene's floating subtitle made it redundant. Real
  // testing (三字经, with Mika) showed what actually drives successful
  // learning is parent-guided, self-paced, per-line access with time to
  // explain meaning in English — exactly what the untimed, individually-
  // tappable lines below provide, and exactly what the scene's subtitle
  // (auto-fades in ~3s, sequential, one at a time) cannot substitute
  // for. These are two different modes, not competing designs: the
  // scene is for a child exploring alone, the card is for a parent
  // actually teaching it. Cutting the second to make room for the first
  // was the mistake, not something to repeat for future poems.
  const hasScene = !!RECITAL_SCENES[n.id];
  const linesHTML = n.lines.map(line => `
    <div class="cultural-note-line">
      <div class="cultural-note-native" data-speak="${encodeURIComponent(line.native)}">${line.native}<span class="mini-speak-inline">🔊</span></div>
      <div class="cultural-note-pinyin">${line.pinyin}</div>
      <div class="cultural-note-en">"${line.en}"</div>
    </div>`).join('');
  const sceneHTML = renderRecitalSceneHTML(n);
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="recital-title-header">
        <h2 class="cultural-note-title">${n.native}<span class="en-inline">${n.en}</span></h2>
        <div class="cultural-note-title-pinyin">${n.pinyin}</div>
      </div>
      <p class="recital-author-caption">${n.description}</p>
      ${sceneHTML}
      <div class="cultural-note">
        <h3 class="cultural-note-lines-heading">The full poem</h3>
        ${linesHTML}
        <button class="big-btn cultural" id="recitalPlayBtn">▶️ Hear the whole verse</button>
      </div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  addStar(cat.id, n.id);
  bindRecitalScene(cat, n);
  document.getElementById('recitalPlayBtn').addEventListener('click', () => {
    playTapSound();
    playSequence(n.lines.map(l => l.native), {gap: 500});
  });
}
function renderCountSong(cat, n){
  // The count-along is now its own discoverable item (the 🎶 tile) rather
  // than a button that appeared after tapping an unrelated digit. It gets
  // its own caption explaining what it is BEFORE anything plays, same as
  // every other first-exposure moment in the app.
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption"><span class="big-emoji" style="font-size:52px;">🎶</span>Let's count all the way to ten!</div>
      ${wordRowHTML(n, {enLabel:'count to 10'})}
      <button class="big-btn secondary" id="countAlongBtn" style="margin-top:10px;">▶️ 一, 二, 三... Play it!</button>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  document.getElementById('countAlongBtn').addEventListener('click', () => { playTapSound(); playCountAlong(cat); });
}
// Speaks a list of native strings back to back, one at a time — shared
// by the count-along and any multi-line sequence (currently the
// cultural verse). gap is the pause between lines; longer for full
// sentences (needs breathing room) than single digits.
function playSequence(natives, {gap = 120, onDone} = {}){
  let i = 0;
  function next(){
    if(i >= natives.length){ if(onDone) onDone(); return; }
    speak(natives[i], 0, () => { i++; setTimeout(next, gap); });
  }
  next();
}
let countAlongDone = false;
function playCountAlong(cat){
  playSequence(NUMBER_DIGITS.map(d => d.native), {
    onDone: () => { if(!countAlongDone){ countAlongDone = true; addStar(cat.id, '__count_along__'); } }
  });
}

/* ============================================================
   SCROLL HINT — signals more content below on first load. Fades
   automatically once the user has scrolled near the bottom, and
   never shows at all if the page is already short enough to fit
   (common on wider/sidebar layouts) — a plain visibility check
   rather than something that needs constant JS polling to behave
   correctly.
   ============================================================ */
function updateScrollHint(){
  const hint = document.getElementById('scrollHint');
  if(!hint) return;
  const scrollable = document.documentElement.scrollHeight > window.innerHeight + 40;
  const nearBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 40;
  hint.style.opacity = (scrollable && !nearBottom) ? '1' : '0';
}
window.addEventListener('scroll', updateScrollHint, {passive:true});
window.addEventListener('resize', updateScrollHint);

/* ============================================================
   FIRST-LOAD GREETING — the mascot's subtle idle bob plus a flat menu
   of 15 equal categories gave a first-time child nothing that actively
   invited the first tap (confirmed directly: a real child opened the
   app and never tapped anything at all). This adds a spoken invitation,
   a bigger attention-grabbing mascot loop, and a spotlighted first
   category with a bouncing tap-hint — all cleared the instant she taps
   anything, anywhere.
   ============================================================ */
function speakGreeting(){
  // Deliberately separate from speak() — that function is hardcoded to
  // Mandarin (LANG_CODE = 'zh-CN'); this greeting is an invitation to
  // play, not a vocabulary word, so it's in English. Also deliberately
  // defensive: autoplayed audio (including speechSynthesis) is blocked
  // by policy on many browsers before any user gesture on the page —
  // this session's own audio debugging already showed how inconsistent
  // TTS behavior can be across devices. If it doesn't play, that's
  // expected on some browsers, not a bug — the visual invitation (mascot
  // loop + spotlight + tap-hint) is the primary, reliable mechanism;
  // spoken audio is a bonus wherever the browser allows it.
  if(!('speechSynthesis' in window)) return;
  try{
    const synth = window.speechSynthesis;
    const u = new SpeechSynthesisUtterance("Hi! Let's play! Pick a world!");
    u.lang = 'en-US';
    u.rate = 0.95;
    synth.speak(u);
  } catch(e){ /* ignore — visual invitation still works regardless */ }
}

/* ============================================================
   INIT
   ============================================================ */
(function init(){
  renderWorldPicker();
  updateScrollHint();
  const deepLinked = tryDeepLinkFromURL();
  const svg = document.getElementById('mascotSvg');
  // Skip the idle "greeting" bob + spoken greeting when landing directly
  // on a word via deep link — onPickNoun() already speaks that word, and
  // the world-picker greeting doesn't make sense on a screen that isn't
  // showing the world picker at all.
  if(!deepLinked){
    if(svg) svg.classList.add('greeting');
    speakGreeting();
  }
  document.addEventListener('click', markInteracted, {once:true});
  const mascotWrap = document.querySelector('.mascot-wrap');
  if(mascotWrap){
    mascotWrap.setAttribute('role', 'button');
    mascotWrap.setAttribute('aria-label', 'Go to home screen');
    mascotWrap.setAttribute('tabindex', '0');
    mascotWrap.addEventListener('click', () => { if(activeWorldId !== null) onBackToWorlds(); });
  }
  // Parent/educator footer toggles — plain show/hide via the `hidden`
  // attribute, each independent of the other.
  document.querySelectorAll('.parent-footer-toggle').forEach(btn => {
    const body = document.getElementById(btn.getAttribute('aria-controls'));
    if(!body) return;
    btn.addEventListener('click', () => {
      const nowOpen = body.hidden; // was hidden, about to open
      body.hidden = !nowOpen;
      btn.setAttribute('aria-expanded', String(nowOpen));
    });
  });
})();
</script>
</body>
</html>