<!--
  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>Little Cloud · Discover your little world of words</title>
<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;}
  .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);}}
  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:15px; 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:16px; color:var(--accent-deep); margin:0 0 14px; font-weight:700;}
  .panel .sub{font-size:14px; 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;} }
  .app-layout{display:flex; flex-direction:column;}
  .sidebar{
    background:linear-gradient(180deg, var(--cat-tint), rgba(243,236,251,0.4)); border-radius:18px;
    padding:12px 14px 14px; margin:0 0 16px;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;
  }
  .main-col{flex:1; min-width:0;}
  @media (min-width:700px){
    .app-layout{flex-direction:row; align-items:flex-start; gap:16px;}
    .sidebar{
      flex:0 0 108px; display:flex; flex-direction:column; margin:0;
      position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto;
    }
    .cat-tab{width:100%;}
  }
  .cat-tab{
    width:100%; min-height:64px; border:none; border-radius:16px;
    background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:6px 2px; font-family:'Baloo 2',sans-serif;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease;
  }
  .cat-tab .ic{font-size:24px; line-height:1; opacity:.5; transition:opacity .15s ease;}
  .cat-tab .lbl{font-size:11.5px; font-weight:700; color:var(--soft); line-height:1.15; text-align:center; opacity:.85;}
  .cat-tab:active{transform:scale(0.9);}
  .cat-tab.active-cat{background:var(--panel); box-shadow:0 2px 0 rgba(58,74,102,0.06);}
  .cat-tab.active-cat .ic{opacity:1;}
  .cat-tab.active-cat .lbl{color:var(--cat-accent-deep); opacity:1;}
  .cat-header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .cat-header{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px; color:var(--cat-accent-deep); margin:0;}
  .cat-header .en{font-weight:600; font-size:14px; color:var(--ink); margin-left:8px;}
  .cat-header .pinyin{display:block; font-weight:600; font-size:13px; color:var(--cat-accent-deep); opacity:.75; margin-top:3px;}
  /* "See all words" now lives on the same row as the category label,
     replacing a separate tile whose only job was this one action — the
     selected word itself is already shown in full in the story card. */
  .see-all-btn{
    display:flex; align-items:center; gap:6px; border:none; border-radius:999px; padding:8px 14px;
    background:#EAF3FB; color:var(--accent-deep); font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px;
    cursor:pointer; flex-shrink:0; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .see-all-btn:active{transform:scale(0.95);}
  /* 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:28px; 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;
  }
  .emoji-tile:active{transform:scale(0.92);}
  .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,
  .mod-btn:focus-visible, .word-chip:focus-visible, .see-all-btn:focus-visible,
  .big-btn:focus-visible, .sentence-card:focus-visible{
    outline:3px solid var(--accent); outline-offset:2px;
  }
  .story-caption{font-size:18px; 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;}
  .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;}
  .wordrow .emoji{font-size:30px; display:flex; align-items:center; justify-content:center; width:34px;}
  .wordrow .txt{flex:1;}
  .wordrow .native{font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--accent-deep); font-size:20px;}
  .wordrow .native .en-inline{font-family:'Baloo 2',sans-serif; font-weight:600; color:var(--ink); font-size:15px; margin-left:6px;}
  .wordrow .roman{color:var(--soft); font-size:13px; font-weight:600; margin-top:2px;}
  .mini-speak{width:44px; height:44px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:19px; cursor:pointer; box-shadow:0 3px 0 var(--accent-deep); transition:transform .12s cubic-bezier(.34,1.56,.64,1); flex-shrink:0;}
  .mini-speak:active{transform:scale(0.9);}
  .mini-speak.gold{background:var(--gold); box-shadow:0 3px 0 var(--gold-deep); color:#5c4419;}
  .helper-strip{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
  .helper-chip{background:#FDF3DC; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; color:var(--ink); border:none; cursor:pointer;}
  .helper-chip:active{transform:scale(0.95);}
  .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:17px;
    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. Deliberately NOT styled like the big size/modifier cards
     (mod-btn) — verb choice in particular is not a decorative modifier,
     per verb-bank.md §6, so it should read as a different kind of choice. */
  .word-chip{
    display:flex; align-items:center; gap:8px; border:2px solid #DCEAF5; border-radius:14px; padding:8px 12px;
    background:var(--panel); cursor:pointer; font-family:'Baloo 2',sans-serif; transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .word-chip:active{transform:scale(0.95);}
  .word-chip.chosen{background:var(--accent); border-color:var(--accent-deep);}
  .word-chip.chosen .native, .word-chip.chosen .pinyin, .word-chip.chosen .en{color:#fff;}
  .word-chip .dot{width:16px; height:16px; border-radius:6px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(58,74,102,0.15);}
  .word-chip .txt{display:flex; flex-direction:column; line-height:1.3; text-align:left;}
  .word-chip .native{font-weight:700; font-size:14px; color:var(--accent-deep);}
  .word-chip .pinyin{font-size:12px; font-weight:600; color:var(--soft);}
  .word-chip .en{font-size:12px; font-weight:600; color:var(--soft);}
  .word-chip-row{display:flex; gap:8px; flex-wrap:wrap; 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:18px; 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);}
  .sentence-card:active{transform:scale(0.97);}
  .sentence-card .native-line{font-size:22px; font-weight:700; color:var(--accent-deep); font-family:'Baloo 2',sans-serif; text-align:center;}
  .sentence-card .roman-line{font-size:14px; color:var(--soft); font-weight:600; text-align:center; margin-top:2px;}
  .sentence-card .en-line{font-size:13px; color:var(--ink); text-align:center; margin-top:6px; font-style:italic;}
  .sentence-card .play-row{display:flex; justify-content:center; margin-top:10px;}
  .footnote{text-align:center; color:var(--soft); font-size:13px; margin-top:20px; line-height:1.6; padding:0 6px;}
  .picker-collapsed{display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:none; width:100%; padding:2px 0; font-family:'Baloo 2',sans-serif;}
  .picker-collapsed .cur-emoji{font-size:30px; background:#EAF3FB; border-radius:14px; width:52px; height:52px; display:flex; align-items:center; justify-content:center;}
  .picker-collapsed .label{flex:1; text-align:left; font-size:13px; font-weight:600; color:var(--soft);}
  .picker-collapsed .chev{font-size:18px; color:var(--soft);}
  .picker-head-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .back-link{border:none; background:none; color:var(--accent-deep); font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; cursor:pointer; padding:6px 0; text-align:left;}
  /* verb remix — deliberately NOT styled like modifier tiles: a single pill,
     not an equal-weight grid, per verb-bank.md §6 */
  .remix-pill{
    display:inline-flex; align-items:center; gap:8px; border:none; border-radius:999px; padding:10px 16px;
    background:var(--panel); border:2px solid var(--coral); color:var(--coral-deep); font-family:'Baloo 2',sans-serif;
    font-weight:700; font-size:14px; cursor:pointer; margin-top:12px;
  }
  .remix-pill:active{transform:scale(0.96);}
  /* 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:26px; cursor:pointer; background:#EAF3FB; display:flex; align-items:center; justify-content:center; transition:transform .15s cubic-bezier(.34,1.56,.64,1);}
  .num-tile:active{transform:scale(0.92);}
  .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>
<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" 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"/>
        <circle cx="172" cy="102" r="6" fill="#3A4A66"/>
        <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"/>
      </svg>
    </div>
    <h1>Little Cloud</h1>
    <div class="tagline">Discover your little world of words</div>
  </header>
  <!-- Responsive layout: on wide screens (tablet/desktop) categories sit
       in a persistent left sidebar, matching how much more room there is
       to work with. On narrow phones, the exact same category buttons
       instead wrap into a row at the top of the content — a fixed
       sidebar there would eat too much of an already-tight width and
       shrink the grid's tap targets below where they need to be for
       small fingers. Same markup, same JS, just reflowed by CSS. -->
  <div class="app-layout">
    <div class="sidebar" id="sidebarTabs"></div>
    <div class="main-col">
      <div class="panel" id="browsePanel"></div>
      <div id="storyArea"></div>
    </div>
  </div>
  <div class="footnote">Tap 🔊 to hear any word or sentence spoken aloud.</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óngsè',  en:'red',    hex:'#E8493E'},
  yellow:{native:'黄色', pinyin:'huángsè', en:'yellow', hex:'#F6C445'},
  blue:  {native:'蓝色', pinyin:'lánsè',   en:'blue',   hex:'#5B9BD3'},
  orange:{native:'橙色', pinyin:'chéngsè', en:'orange', hex:'#F2924B'},
  green: {native:'绿色', pinyin:'lǜsè',    en:'green',  hex:'#6FCF97'},
  black: {native:'黑色', pinyin:'hēisè',   en:'black',  hex:'#3A4A66'},
  white: {native:'白色', pinyin:'báisè',   en:'white',  hex:'#FFFFFF'},
  pink:  {native:'粉色', pinyin:'fěnsè',   en:'pink',   hex:'#F0A8CC'},
  purple:{native:'紫色', pinyin:'zǐsè',    en:'purple', hex:'#B295D9'},
  brown: {native:'棕色', pinyin:'zōngsè',  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:'rabbit',   emoji:'🐰', native:'兔子',  pinyin:'tùzi',     en:'rabbit',   size:true, customVerbs:PET_VERBS},
  {id:'dog',      emoji:'🐶', native:'狗',    pinyin:'gǒu',      en:'dog',      size:true, customVerbs:PET_VERBS, bonusVerb:{native:'跑',pinyin:'pǎo',en:'run'}},
  {id:'cat',      emoji:'🐱', native:'猫',    pinyin:'māo',      en:'cat',      size:true, customVerbs:PET_VERBS},
  {id:'panda',    emoji:'🐼', native:'熊猫',  pinyin:'xióngmāo', en:'panda',    size:true, customVerbs:PET_VERBS},
  {id:'bear',     emoji:'🐻', native:'熊',    pinyin:'xióng',    en:'bear',     size:true, customVerbs:PET_VERBS},
  {id:'lion',     emoji:'🦁', native:'狮子',  pinyin:'shīzi',    en:'lion',     size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'tiger',    emoji:'🐯', native:'老虎',  pinyin:'lǎohǔ',    en:'tiger',    size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'elephant', emoji:'🐘', native:'大象',  pinyin:'dàxiàng',  en:'elephant', size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'monkey',   emoji:'🐵', native:'猴子',  pinyin:'hóuzi',    en:'monkey',   size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'pig',      emoji:'🐷', native:'猪',    pinyin:'zhū',      en:'pig',      size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'cow',      emoji:'🐮', native:'牛',    pinyin:'niú',      en:'cow',      size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'chicken',  emoji:'🐔', native:'鸡',    pinyin:'jī',       en:'chicken',  size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'duck',     emoji:'🦆', native:'鸭子',  pinyin:'yāzi',     en:'duck',     size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'fish',     emoji:'🐟', native:'鱼',    pinyin:'yú',       en:'fish',     size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'bird',     emoji:'🐦', native:'鸟',    pinyin:'niǎo',     en:'bird',     size:true, customVerbs:OTHER_ANIMAL_VERBS},
  {id:'frog',     emoji:'🐸', native:'青蛙',  pinyin:'qīngwā',   en:'frog',     size:true, customVerbs:OTHER_ANIMAL_VERBS},
];

/* ---- 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ōngjiāochē',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ǐngchē',    en:'police car',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'fire_truck',   emoji:'🚒',  native:'消防车', pinyin:'xiāofángchē',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íngchē',  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ēijī',      en:'airplane',     size:true, colours:ALL_COLOUR_KEYS},
  {id:'helicopter',   emoji:'🚁',  native:'直升机', pinyin:'zhíshēngjī', 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ānchuá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ǎnchē',  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ánxíng',   en:'circle',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'square',   shape:'square',   native:'方形',   pinyin:'fāngxíng',   en:'square',   size:true, colours:ALL_COLOUR_KEYS},
  {id:'triangle', shape:'triangle', native:'三角形', pinyin:'sānjiǎoxíng',en:'triangle', size:true, colours:ALL_COLOUR_KEYS},
  {id:'star',     shape:'star',     native:'星星',   pinyin:'xīngxing',   en:'star',     size:true, colours:ALL_COLOUR_KEYS},
  {id:'heart',    shape:'heart',    native:'爱心',   pinyin:'àixī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ánqiú',      en:'basketball',     size:false, sportName:'basketball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'tennis_ball',  emoji:'🎾', native:'网球',   pinyin:'wǎngqiú',     en:'tennis ball',    size:false, sportName:'tennis',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'baseball',     emoji:'⚾', native:'棒球',   pinyin:'bàngqiú',     en:'baseball',       size:false, sportName:'baseball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'volleyball',   emoji:'🏐', native:'排球',   pinyin:'páiqiú',      en:'volleyball',     size:true, sportName:'volleyball',
    customVerbs:['like','watch', {native:'打', pinyin:'dǎ', en:'play', activityFraming:true}, 'have']},
  {id:'pingpong',     emoji:'🏓', native:'乒乓球', pinyin:'pīngpāngqiú', 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áoqiú',    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āngqí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īntú',       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ēngzheng',   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:'apple',      emoji:'🍎', native:'苹果', pinyin:'píngguǒ',  en:'apple',      size:true,  taste:{native:'好吃',pinyin:'hǎochī',en:'delicious'}},
  {id:'banana',     emoji:'🍌', native:'香蕉', pinyin:'xiāngjiā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ǎoméi',   en:'strawberry', size:true,  taste:{native:'甜', pinyin:'tián', en:'sweet'}},
  {id:'orange',     emoji:'🍊', native:'橙子', pinyin:'chéngzi',  en:'orange',     size:false, taste:null},
  {id:'lemon',      emoji:'🍋', native:'柠檬', pinyin:'níngméng', en:'lemon',      size:false, taste:{native:'酸', pinyin:'suān', en:'sour'}},
  {id:'mango',      emoji:'🥭', native:'芒果', pinyin:'mángguǒ',  en:'mango',      size:false, taste:{native:'甜', pinyin:'tián', en:'sweet'}},
  {id:'blueberry',  emoji:'🫐', native:'蓝莓', pinyin:'lánmé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ànbāo',  en:'bread',      size:false, taste:{native:'好吃',pinyin:'hǎochī',en:'delicious'}},
  {id:'rice',       emoji:'🍚', native:'米饭', pinyin:'mǐfàn',    en:'rice',       size:false, taste:null},
  {id:'noodles',    emoji:'🍜', native:'面条', pinyin:'miàntiáo', en:'noodles',    size:false, taste:null},
  {id:'dumplings',  emoji:'🥟', native:'饺子', pinyin:'jiǎozi',   en:'dumplings',  size:false, taste:null},
  {id:'milk',       emoji:'🥛', native:'牛奶', pinyin:'niúnǎi',   en:'milk',       size:false, taste:{native:'好喝',pinyin:'hǎohē',en:'tasty'}},
  {id:'water',      emoji:'💧', native:'水',   pinyin:'shuǐ',     en:'water',      size:false, taste:null},
];

/* ---- 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ōngyuán', en:'park',        size:true},
  {id:'restaurant',  emoji:'🍴',  native:'饭馆', pinyin:'fànguǎn',  en:'restaurant',  size:true},
  {id:'store',       emoji:'🛍️', native:'商店', pinyin:'shāngdià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:'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èimei', en:'younger sister'}},
  {id:'grandfather',     emoji:'👴', native:'爷爷', pinyin:'yéye',   en:'grandfather'},
  {id:'grandmother',     emoji:'👵', native:'奶奶', pinyin:'nǎinai', en:'grandmother'},
  {id:'friend',          emoji:'🧑‍🤝‍🧑', native:'朋友', pinyin:'péngyou', en:'friend'},
  {id:'person',          emoji:'🧍', native:'人',   pinyin:'rén',    en:'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óufa',  en:'hair'},
  {id:'hand',  emoji:'✋', native:'手',   pinyin:'shǒu',   en:'hand'},
  {id:'foot',  emoji:'🦶', native:'脚',   pinyin:'jiǎo',   en:'foot'},
  {id:'eyes',  emoji:'👀', native:'眼睛', pinyin:'yǎnjing',en:'eyes'},
  {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āixīn',  en:'happy'},
  {id:'sad',     emoji:'😢', native:'伤心', pinyin:'shāngxīn',en:'sad'},
  {id:'angry',   emoji:'😠', native:'生气', pinyin:'shēngqì', 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'},
  {id:'cut_veg',    emoji:'🔪', native:'切菜', pinyin:'qiē cài',  en:'cut vegetables'},
  {id:'wash_veg',   emoji:'🥬', native:'洗菜', pinyin:'xǐ cài',   en:'wash vegetables'},
  {id:'crack_egg',  emoji:'🥚', native:'打鸡蛋',pinyin:'dǎ jīdàn', en:'crack an egg'},
  {id:'stir_fry',   emoji:'🥘', native:'炒菜', pinyin:'chǎo cài', en:'stir-fry'},
  {id:'bake_cake',  emoji:'🧁', native:'烤蛋糕',pinyin:'kǎo dàngāo',en:'bake a cake'},
];
const CLEANING = [
  {id:'sweep',      emoji:'🧹', native:'扫地', pinyin:'sǎo dì',   en:'sweep the floor'},
  {id:'mop',        emoji:'🪣', native:'拖地', pinyin:'tuō dì',   en:'mop the floor'},
  {id:'wash_dish',  emoji:'🍽️', native:'洗碗', pinyin:'xǐ wǎn',   en:'wash dishes'},
  {id:'wash_cloth', emoji:'👕', native:'洗衣服',pinyin:'xǐ yīfu',  en:'wash clothes'},
  {id:'wipe_table', emoji:'🧽', native:'擦桌子',pinyin:'cā zhuōzi',en:'wipe the table'},
  {id:'take_trash', emoji:'🗑️', native:'倒垃圾',pinyin:'dào lājī', en:'take out the trash'},
];
const DAILY_HABITS = [
  {id:'brush_teeth',emoji:'🪥', native:'刷牙', pinyin:'shuā yá',  en:'brush teeth'},
  {id:'bathe',      emoji:'🛁', native:'洗澡', pinyin:'xǐ zǎo',   en:'take a bath'},
  {id:'wash_face',  emoji:'💦', native:'洗脸', pinyin:'xǐ liǎn',  en:'wash your face'},
  {id:'comb_hair',  emoji:'🪮', native:'梳头', pinyin:'shū tóu',  en:'comb your hair'},
  {id:'get_dressed',emoji:'🧥', native:'穿衣服',pinyin:'chuān yīfu',en:'get dressed'},
  {id:'wake_up',    emoji:'⏰', native:'起床', pinyin:'qǐ chuáng',en:'wake up'},
  {id:'sleep',      emoji:'😴', native:'睡觉', pinyin:'shuì jiào',en:'go to sleep'},
];
const WEATHER = [
  {id:'sunny',      emoji:'☀️', native:'晴天', pinyin:'qíngtiān', en:'sunny'},
  {id:'rainy',      emoji:'🌧️', native:'下雨', pinyin:'xià yǔ',   en:'raining'},
  {id:'snowy',      emoji:'❄️', native:'下雪', pinyin:'xià xuě',  en:'snowing'},
  {id:'windy',      emoji:'💨', native:'刮风', pinyin:'guā fēng', en:'windy'},
  {id:'cloudy',     emoji:'☁️', native:'多云', pinyin:'duō yún',  en:'cloudy'},
  {id:'thunder',    emoji:'⛈️', native:'打雷', pinyin:'dǎ léi',   en:'thunder'},
];
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òngwù',       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íngzhuàng',   en:'Shapes',            mode:'f1',      nouns:SHAPES, noHug:true},
  {id:'vehicles', icon:'🚗', label:'车辆', pinyin:'chēliàng',     en:'Vehicles',          mode:'f1',      nouns:VEHICLES, noHug:true},
  {id:'sports',   icon:'⚽', label:'运动', pinyin:'yùndòng', en:'Sports', mode:'f1', nouns:SPORTS, noHug:true},
  {id:'hobbies',  icon:'🎻', label:'爱好', pinyin:'àihà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ēntǐ bùwèi', en:'Body Parts',    mode:'tier0',   nouns:BODY},
  {id:'feelings', icon:'😊', label:'心情', pinyin:'xīnqíng',      en:'Feelings',          mode:'feeling', nouns:FEELINGS},
  {id:'cooking',  icon:'👩🏻‍🍳', label:'做饭', pinyin:'zuò fàn', en:'Cooking', mode:'tier0', nouns:COOKING},
  {id:'cleaning', icon:'🧹', label:'打扫', pinyin:'dǎsǎo',        en:'Cleaning',          mode:'tier0',   nouns:CLEANING},
  {id:'habits',   icon:'🛁', label:'日常习惯', pinyin:'rìcháng xíguàn', en:'Daily Habits', mode:'tier0', nouns:DAILY_HABITS},
  {id:'weather',  icon:'☀️', label:'天气', pinyin:'tiānqì',       en:'Weather',           mode:'tier0',   nouns:WEATHER},
];
const CAT_BY_ID = Object.fromEntries(CATEGORIES.map(c => [c.id, c]));

/* ============================================================
   SENTENCE FRAMES
   ============================================================ */
function frameF1(verb, mods, noun){
  // verb = {native, pinyin, en} — a plain verb object, not a VERBS[] key.
  // mods = {sizeKey, colourKey} — either, both, or neither 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 both combine: 红色的小飞机 / "the small red airplane."
  mods = mods || {};
  const sizeM = mods.sizeKey ? MOD_SIZE[mods.sizeKey] : null;
  const colourM = mods.colourKey ? COLOURS[mods.colourKey] : null;

  // Chinese order: [colour]的 [size][noun] — e.g. 红色的小飞机. The 的
  // attaches to the colour 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(colourM){ native = colourM.native + '的' + native; pinyin = colourM.pinyin + ' de ' + pinyin; }

  // English order is the reverse convention — size before colour ("the
  // small red airplane," not "the red small airplane").
  const enParts = [];
  if(sizeM) enParts.push(sizeM.en);
  if(colourM) enParts.push(colourM.en);
  const enDescriptor = enParts.length ? enParts.join(' ') + ' ' : '';
  const enNoun = (verb.activityFraming && noun.sportName && !sizeM && !colourM)
    ? 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 frameTasteSF1(noun){
  const t = noun.taste;
  const pinyinCap = noun.pinyin.charAt(0).toUpperCase() + noun.pinyin.slice(1);
  return { native:`${noun.native}很${t.native}。`, pinyin:`${pinyinCap} hěn ${t.pinyin}.`, en:`The ${noun.en} is ${t.en}.` };
}
function frameFeelingSF1(noun){
  return { native:`我很${noun.native}。`, pinyin:`Wǒ hěn ${noun.pinyin}.`, en:`I'm ${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.
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 = 0;      // index into VERB_ORDER
let sentenceStarted = false;

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 = {
  sidebarTabs: document.getElementById('sidebarTabs'),
  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">
      <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}" data-speak="${encodeURIComponent(opts.speakText || label)}" 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 are now rendered into SEPARATE
   containers (#sidebarTabs / #browsePanel) rather than one combined
   block — CSS alone decides whether #sidebarTabs reflows into a
   persistent left column (tablet/desktop, where there's room) or a
   wrapping row above the content (phone, where a fixed sidebar would
   eat too much width and shrink tap targets). Same markup either way;
   only the layout changes.
   ============================================================ */
function renderSidebarTabs(){
  els.sidebarTabs.innerHTML = '';
  CATEGORIES.forEach(c => {
    const tab = document.createElement('button');
    tab.className = 'cat-tab' + (c.id === activeCategoryId ? ' active-cat' : '');
    tab.innerHTML = `<span class="ic">${c.icon}</span><span class="lbl">${c.label}</span>`;
    tab.setAttribute('aria-label', c.en);
    tab.addEventListener('click', () => onPickCategory(c.id));
    els.sidebarTabs.appendChild(tab);
  });
}
function renderBrowsePanel(){
  const cat = CAT_BY_ID[activeCategoryId];
  els.browsePanel.innerHTML = '';

  // Header row now carries the "see all words" action directly when the
  // grid is collapsed, instead of a separate tile below whose only real
  // job was that one action — the selected word itself is already fully
  // shown in the story card, so a second tile repeating it was pure
  // duplication.
  const headerRow = document.createElement('div');
  headerRow.className = 'cat-header-row';
  const header = document.createElement('h2');
  header.className = 'cat-header';
  header.innerHTML = `${cat.label}<span class="en">${cat.en}</span><span class="pinyin">${cat.pinyin}</span>`;
  headerRow.appendChild(header);

  if(nounCollapsed && activeNounId){
    const backBtn = document.createElement('button');
    backBtn.className = 'see-all-btn';
    backBtn.innerHTML = `🔙<span>See all words</span>`;
    backBtn.setAttribute('aria-label', 'See all words in ' + cat.en);
    backBtn.addEventListener('click', () => { nounCollapsed = false; renderBrowsePanel(); });
    headerRow.appendChild(backBtn);
  }
  els.browsePanel.appendChild(headerRow);

  if(nounCollapsed && activeNounId){
    return;
  }

  const sub = document.createElement('div');
  sub.className = 'sub';
  sub.style.margin = '10px 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', 30) : n.emoji;
    btn.setAttribute('aria-label', nounLabel(n));
    btn.addEventListener('click', () => onPickNoun(n.id));
    grid.appendChild(btn);
  });
  els.browsePanel.appendChild(grid);
}
function onPickCategory(catId){
  if(catId === activeCategoryId) return;
  activeCategoryId = catId;
  activeNounId = null;
  nounCollapsed = false; // open the word grid for this category
  els.storyArea.innerHTML = '';
  renderSidebarTabs();
  renderBrowsePanel();
  speak(CAT_BY_ID[catId].label); // audio on category selection
  setTimeout(updateScrollHint, 100);
}
function onPickNoun(nounId){
  activeNounId = nounId;
  activeSizeKey = null;
  activeColourKey = null;
  activeVerbIdx = 0;
  sentenceStarted = false;
  nounCollapsed = true; // fold the word grid away once chosen, story card gets the room
  renderBrowsePanel();
  renderDetail(); // renderDetail() itself speaks the word — no double speak() call needed here
  els.storyArea.scrollIntoView({behavior:'smooth', block:'nearest'});
  setTimeout(updateScrollHint, 350);
}

/* ============================================================
   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);
}

/* ---- F1 mode: animals / shapes / vehicles / sports ---- */
function renderF1(cat, n){
  const bigVisual = nounVisualHTML(n, 64);
  const bonusChip = n.bonusVerb
    ? `<div class="sub" style="margin:10px 0 6px;">A bonus word just for ${n.en}s:</div>
       <div class="helper-strip"><button class="helper-chip" data-speak="${encodeURIComponent(n.bonusVerb.native)}">🏃 ${n.bonusVerb.native} <span style="opacity:.6">(${n.bonusVerb.en})</span></button></div>`
    : '';
  let sizeRow = '';
  if(n.size){
    sizeRow = `
      <div class="sub" style="margin:16px 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:13px;">small</span></button>
        <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:13px;">big</span></button>
      </div>`;
  }
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption"><span class="big-emoji">${bigVisual}</span>Look! Here comes a ${n.en}!</div>
      ${wordRowHTML(n)}
      ${bonusChip}
      ${sizeRow}
      <div id="colourSlot"></div>
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  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}));
    });
  }
  // If a noun has colours but no size, colour is the first modifier layer
  // shown directly. If it has both, colour appears only after size is
  // picked once — sequential, not stacked, per
  // category-taxonomy-and-sentence-architecture.md §3. If it has NEITHER
  // (e.g. badminton, once its size/colour were both correctly removed),
  // nothing would ever trigger the sentence/Words section otherwise — a
  // real gap that surfaced exactly this way, not caught until it did.
  if(n.colours && n.colours.length && !n.size){
    renderColourRow(cat, n);
  } else 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){
  // 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));
  }
  // reveal colour row after a size pick, if this noun has colours and it
  // isn't already showing
  if(mod.type === 'size' && n.colours && n.colours.length && !document.querySelector('#colourSlot .word-chip-row')){
    renderColourRow(cat, n);
  }
  if(mod.type === 'colour'){
    document.querySelectorAll('#colourSlot .word-chip').forEach(b => b.classList.toggle('chosen', b.dataset.colour === mod.key));
  }
  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 verb = verbList[activeVerbIdx] || verbList[0];
  const sentence = frameF1(verb, {sizeKey:activeSizeKey, colourKey:activeColourKey}, 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. This still keeps 喜欢 as the fixed
  // FIRST verb a child sees for a new noun (this section only appears once
  // a sentence already exists) and 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('');
  slot.innerHTML = `
    <div class="sub" style="margin:16px 0 2px;">Words</div>
    <div class="word-chip-row">${verbChips}</div>
    <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>`;
  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){
  activeVerbIdx = idx;
  renderF1Sentence(cat, n);
  speak(verbListForNoun(cat, n)[idx].native);
}

/* ---- 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',
];
function renderFood(cat, n){
  const bigVisual = nounVisualHTML(n, 64);
  let actionHTML = '';
  if(n.taste){
    actionHTML += `
      <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:13px;">${n.taste.en}</span></button></div>`;
  }
  if(n.size){
    actionHTML += `
      <div class="sub" style="margin:16px 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:13px;">small</span></button>
        <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:13px;">big</span></button>
      </div>`;
  }
  const foodVerbs = 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="story-caption"><span class="big-emoji">${bigVisual}</span>Yum! Here's some ${n.en}!</div>
      ${wordRowHTML(n)}
      ${actionHTML}
      <div class="sub" style="margin:16px 0 2px;">Words</div>
      <div class="word-chip-row">${wordChips}</div>
      <div id="foodWordSentence"></div>
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  els.storyArea.querySelectorAll('[data-food-verb-idx]').forEach(btn => {
    btn.addEventListener('click', () => {
      addStar(cat.id, n.id);
      els.storyArea.querySelectorAll('[data-food-verb-idx]').forEach(b => b.classList.toggle('chosen', b === btn));
      const verb = foodVerbs[Number(btn.dataset.foodVerbIdx)];
      const sentence = frameF1(verb, null, n);
      const slot = document.getElementById('foodWordSentence');
      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);
      speak(sentence.native);
    });
  });
  if(n.taste){
    document.getElementById('tasteBtn').addEventListener('click', () => {
      addStar(cat.id, n.id);
      const sentence = frameTasteSF1(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);
      speak(sentence.native);
    });
  }
  if(n.size){
    document.querySelectorAll('#modRow .mod-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        addStar(cat.id, n.id);
        document.querySelectorAll('#modRow .mod-btn').forEach(b => b.classList.toggle('chosen', b === btn));
        const sentence = frameF1(VERBS.like, {sizeKey:btn.dataset.mod}, 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);
        speak(sentence.native);
      });
    });
  }
}

/* ---- Places mode ---- */
function renderPlace(cat, n){
  const bigVisual = nounVisualHTML(n, 64);
  let modRow = '';
  if(n.size){
    modRow = `
      <div class="sub" style="margin:16px 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:13px;">small</span></button>
        <button class="mod-btn" data-mod="big">大 dà<br><span style="font-weight:600;font-size:13px;">big</span></button>
      </div>`;
  }
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption"><span class="big-emoji">${bigVisual}</span>Let's go to the ${n.en}!</div>
      ${wordRowHTML(n)}
      ${modRow}
      <div id="sentenceSlot"></div>
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  const showSentence = (sizeKey) => {
    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);
    speak(sentence.native);
  };
  if(n.size){
    document.querySelectorAll('#modRow .mod-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('#modRow .mod-btn').forEach(b => b.classList.toggle('chosen', b === btn));
        showSentence(btn.dataset.mod);
      });
    });
  } else {
    showSentence(null);
  }
}

/* ---- Tier0-only mode: family / body parts ---- */
function renderTier0Only(cat, n){
  if(n.isSiblingPair) return renderSiblingPair(cat, n);
  const visualHTML = `<span class="big-emoji">${nounVisualHTML(n, 64)}</span>`;
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption">${visualHTML}Here's ${n.en.match(/^[aeiou]/i) ? 'an' : 'a'} ${n.en}!</div>
      ${wordRowHTML(n)}
    </div>`;
  bindSpeakButtons(els.storyArea);
  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];
    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>
          Here's ${active.en.match(/^[aeiou]/i) ? 'an' : 'a'} ${active.en}!
        </div>
        ${wordRowHTML(active, {visualHTML: nounVisualHTML(n, 40)})}
      </div>`;
    bindSpeakButtons(els.storyArea);
    speak(active.native);
    addStar(cat.id, n.id + ':' + activeSize);
    els.storyArea.querySelectorAll('.sib').forEach(btn => {
      btn.addEventListener('click', () => { activeSize = btn.dataset.size; draw(); });
    });
  }
  draw();
}

/* ---- Feelings mode (SF1) ---- */
function renderFeeling(cat, n){
  const bigVisual = nounVisualHTML(n, 64);
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption"><span class="big-emoji">${bigVisual}</span></div>
      ${wordRowHTML(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);
}

/* ---- Numbers mode ---- */
function renderNumberDetail(cat, n){
  if(n.isSong) return renderCountSong(cat, n);
  // A single digit: plain tap-to-hear, same simplicity as Family/Body —
  // no unrelated CTA bolted on here. A child exploring "1" just learns "1".
  els.storyArea.innerHTML = `
    <div class="panel">
      <div class="story-caption"><span class="big-emoji" style="font-size:52px;">${n.emoji}</span></div>
      ${wordRowHTML(n)}
    </div>`;
  bindSpeakButtons(els.storyArea);
  speak(n.native);
  addStar(cat.id, n.id);
}
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', () => playCountAlong(cat));
}
let countAlongDone = false;
function playCountAlong(cat){
  let i = 0;
  function next(){
    if(i >= NUMBER_DIGITS.length){
      if(!countAlongDone){ countAlongDone = true; addStar(cat.id, '__count_along__'); }
      return;
    }
    speak(NUMBER_DIGITS[i].native, 0, () => { i++; setTimeout(next, 120); });
  }
  next();
}

/* ============================================================
   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);

/* ============================================================
   INIT
   ============================================================ */
(function init(){
  activeCategoryId = 'animals';
  renderSidebarTabs();
  renderBrowsePanel();
  updateScrollHint();
})();
</script>
</body>
</html>