/* ngaia.css -- Ngaia's Hollow (KS1, age 5-7). Bespoke woodland engine, warm register.
   Cloned in spirit from the proven Oak engine (oaks-tryline/oak.css) + Annabel's
   polish layer, re-skinned to Ngaia's Sylvanian woodland feel: dusk -> golden-hour.
   R1-studio techniques applied in the WARM register (NOT punchy/rugby):
     a) layered shadow + inset highlight + honey glow on every card (no white-on-cream)
     b) spring easing cubic-bezier(.2,1.4,.4,1) on every celebratory transform
     c) multi-property "warm bloom" correct moment (scale + glow + ember ring + toast)
     d) firefly motes on streak + Master Hazel blink+bob on hint
   Reward model is gentle: acorns gathered, a lantern that brightens (--lantern 0->1),
   the woodland squad waking at milestones. NO score, NO streak-shame, NO dead-ends.
   prefers-reduced-motion verbatim block at end (mandatory). */

:root.ngaia {
  --moss: #6B8E5A;
  --bracken: #C97B4A;
  --bloom: #F4A6C9;
  --bark: #4A3728;
  --cream: #FAF3E3;
  --cream-pale: #FAF3E3;
  --honey: #E8B547;
  --honey-lo: #F4C56A;
  --honey-hi: #FFE9A8;
  --dapple: rgba(245,222,179,.4);
  --warm: #FBBF24;             /* named to forbid red (Lock 6) */

  --lantern: 0;               /* 0 = dusk, 1 = golden hour -- driven by JS per correct */
  --ember: 0;                 /* brief per-correct pulse */

  --ngaia-radius: 24px;
  --ngaia-radius-sm: 16px;
  --tap-min: 80px;            /* KS1 tap-target floor */
  --spring: cubic-bezier(.2,1.4,.4,1);

  /* The warm-woodland card depth: layered drop + inset highlight + honey glow.
     (R1-studio verbatim: kills the dowdy white-border-on-cream tell.) */
  --card-border: 2px solid rgba(74,55,40,.12);
  --card-shadow: 0 12px 28px rgba(74,55,40,.18), 0 0 0 1px rgba(255,255,255,.5) inset, 0 0 24px rgba(232,181,71,.22);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { margin: 0; padding: 0; min-height: 100%; }

body.ngaia {
  /* The lantern: dusk gradient brightens to golden-hour as --lantern climbs 0 -> 1. */
  background:
    radial-gradient(900px 620px at 12% -8%, color-mix(in srgb, var(--honey-hi) calc(var(--lantern)*65%), transparent) 0%, transparent 56%),
    radial-gradient(820px 600px at 95% 4%, rgba(244,166,201,.20) 0%, transparent 50%),
    linear-gradient(180deg, #251C0E calc(100% - var(--lantern)*100%), var(--cream) 100%);
  filter: brightness(calc(1 + var(--ember)*.07)) saturate(calc(1 + var(--ember)*.10));
  transition: filter 1.4s cubic-bezier(.2,.9,.3,1);
  background-attachment: fixed;
  color: var(--bark);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  margin: 0; padding: 0; min-height: 100vh;
  overflow-x: hidden;
}

/* ---------------- skip link (a11y) ---------------- */
.ngaia-skip {
  position: absolute; left: 8px; top: -90px; z-index: 999;
  background: var(--bark); color: var(--cream);
  padding: 14px 22px; border-radius: var(--ngaia-radius-sm);
  font-weight: 800; text-decoration: none;
  font-family: 'Quicksand', system-ui, sans-serif;
  transition: top .18s ease-out;
}
.ngaia-skip:focus { top: 10px; }

/* ---------------- boot ---------------- */
#boot {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: linear-gradient(180deg, #251C0E, #3A2C18);
  color: var(--cream);
  transition: opacity .42s ease-out;
}
#boot.hide { opacity: 0; pointer-events: none; }
#boot .boot-pip { width: 96px; height: 96px; animation: ngaia-bob 2.6s ease-in-out infinite; }
#boot .boot-msg {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 22px; font-weight: 700;
}
#boot .boot-err { color: #FFD9A0; font-size: 15px; max-width: 30ch; }

/* ---------------- app shell ---------------- */
.ngaia-app {
  max-width: 720px; margin: 0 auto; padding: 14px 14px 96px;
  position: relative; z-index: 1;
}

/* ---------------- HUD ---------------- */
.ngaia-hud {
  display: flex; align-items: center; gap: 12px;
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--ngaia-radius);
  padding: 12px 14px;
  box-shadow: var(--card-shadow);
}
.ngaia-hud .hud-sprites { display: flex; align-items: center; gap: 4px; }
.ngaia-hud img.sprite { width: 54px; height: 54px; display: block; }
.ngaia-hud .hud-title { flex: 1 1 auto; min-width: 0; }
.ngaia-hud h1 {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 21px; margin: 0; color: var(--bracken); font-weight: 800; line-height: 1.05;
}
.ngaia-hud .hud-sub { font-size: 13px; color: var(--bark); opacity: .8; }

/* Acorn counter */
.acorn-counter {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(160deg, var(--honey-lo), var(--honey) 60%, var(--bracken));
  color: var(--cream);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 800; font-size: 20px;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(74,55,40,.22), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.acorn-counter .acorn-glyph { font-size: 20px; }
.acorn-counter.pop { animation: acorn-pop .5s var(--spring); }
@keyframes acorn-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); }
}

.mute-btn {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  border: var(--card-border); background: var(--cream);
  font-size: 22px; cursor: pointer; line-height: 1;
  box-shadow: 0 4px 10px rgba(74,55,40,.16);
}
.mute-btn.muted { opacity: .55; }

/* ---------------- HUB ---------------- */
.ngaia-hub-intro {
  margin: 16px 0 10px; text-align: center;
}
.ngaia-hub-intro h2 {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 26px; color: var(--bracken); margin: 0 0 4px; font-weight: 800;
}
.ngaia-hub-intro p { margin: 0; font-size: 16px; color: var(--bark); opacity: .85; }

.ngaia-hub-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px;
}
@media (max-width: 460px){ .ngaia-hub-grid { grid-template-columns: 1fr; } }

.modecard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 132px; padding: 16px 16px 14px;
  text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF, var(--cream));
  border: var(--card-border);
  border-radius: var(--ngaia-radius);
  box-shadow: var(--card-shadow);
  transition: transform .18s var(--spring), box-shadow .18s ease-out;
}
.modecard:hover { transform: translateY(-3px); }
.modecard:active { transform: translateY(1px) scale(.99); }
.modecard:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.modecard .mc-face { font-size: 40px; line-height: 1; }
.modecard .mc-name {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 19px; font-weight: 800; color: var(--bracken); line-height: 1.1;
}
.modecard .mc-desc { font-size: 14px; color: var(--bark); opacity: .82; }
.modecard .mc-acorns {
  margin-top: auto; font-size: 13px; font-weight: 800; color: var(--moss);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------------- More to explore (escape + word + Critter bonus) ---------------- */
.ngaia-explore { margin-top: 26px; }
.ngaia-explore-title {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 18px; font-weight: 800; color: var(--bracken);
  margin: 0 0 4px; padding-top: 16px; text-align: center;
  border-top: 2px dashed rgba(201,123,74,.32);   /* gentle separator from the maths grid */
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
/* explore cards reuse .modecard exactly; .mc-go fills the bottom row (parity with .mc-acorns) */
.modecard .mc-go {
  margin-top: auto; font-size: 13px; font-weight: 800; color: var(--moss);
  display: inline-flex; align-items: center; gap: 4px;
}
.modecard.critter { position: relative; }   /* anchors the BONUS .mc-badge */

/* ---------------- GAME STAGE ---------------- */
.ngaia-game[hidden] { display: none; }

.ngaia-banner {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  background: linear-gradient(160deg, var(--moss), #3E5A2A);
  color: var(--cream);
  border-radius: var(--ngaia-radius);
  padding: 12px 16px;
  box-shadow: var(--card-shadow);
}
.ngaia-banner .bn-face { font-size: 34px; }
.ngaia-banner .bn-name { font-family: 'Quicksand', system-ui, sans-serif; font-weight: 800; font-size: 18px; }
.ngaia-banner .bn-back {
  margin-left: auto;
  background: rgba(255,255,255,.18); color: var(--cream);
  border: none; border-radius: 999px; padding: 10px 16px;
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 800; font-size: 15px;
  cursor: pointer; min-height: 44px;
}

.ngaia-stage {
  margin-top: 14px;
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--ngaia-radius);
  padding: 22px 18px;
  box-shadow: var(--card-shadow);
  min-height: 260px;
}

.ngaia-prompt-row { display: flex; align-items: flex-start; gap: 12px; }
.ngaia-prompt {
  flex: 1 1 auto;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 26px; line-height: 1.2; color: var(--bracken); font-weight: 800;
  margin: 0; text-align: center;
}
.listen-btn {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bark); color: var(--cream);
  border: none; cursor: pointer; font-size: 24px; line-height: 1;
  box-shadow: 0 5px 12px rgba(74,55,40,.24);
}
.listen-btn.speaking { animation: listen-pulse 1s ease-in-out infinite; }
@keyframes listen-pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.1); } }

/* ---- generic tile grid (3-up choices) ---- */
.ngaia-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.ngaia-tile {
  min-height: var(--tap-min);
  padding: 18px 12px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 30px; font-weight: 800; color: var(--bark);
  background: linear-gradient(180deg, #FFFFFF, #FBF4E4);
  border: 2px solid #C9A887;
  border-radius: var(--ngaia-radius);
  box-shadow: 0 8px 18px rgba(74,55,40,.14), 0 0 0 1px rgba(255,255,255,.5) inset;
  cursor: pointer;
  transition: transform .14s var(--spring), box-shadow .2s ease-out, border-color .14s ease-out;
}
.ngaia-tile:hover { transform: translateY(-2px); }
.ngaia-tile:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.ngaia-tile.is-selected { border-color: var(--bracken); background: #FFF0DA; transform: scale(1.03); }
/* multi-property "warm bloom" correct moment */
.ngaia-tile.is-correct {
  border-color: var(--moss); background: #EDF6E2; color: var(--moss);
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(232,181,71,.6), 0 0 0 8px rgba(232,181,71,.0);
  animation: ngaia-bloom .6s var(--spring);
}
@keyframes ngaia-bloom {
  0%   { transform: scale(1);    box-shadow: 0 0 20px rgba(232,181,71,.6), 0 0 0 0 rgba(232,181,71,.45); }
  60%  { transform: scale(1.10); box-shadow: 0 0 24px rgba(232,181,71,.7), 0 0 0 10px rgba(232,181,71,.28); }
  100% { transform: scale(1.06); box-shadow: 0 0 18px rgba(232,181,71,.5), 0 0 0 16px rgba(232,181,71,0); }
}
/* warm cushion -- soft wobble, NO red, NO disable */
.ngaia-tile.is-wrong { border-color: var(--warm); background: #FFF4D6; animation: ngaia-wobble .5s ease-in-out; }
@keyframes ngaia-wobble {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1.5deg); }
  40% { transform: translateX(6px) rotate(1.5deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}

/* ---- Acorn Pairs: acorn tap tiles ---- */
.acorn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.acorn-tile {
  position: relative;
  min-height: var(--tap-min); padding: 14px 8px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, #FFFFFF, #FBF4E4);
  border: 2px solid #C9A887; border-radius: var(--ngaia-radius);
  box-shadow: 0 8px 18px rgba(74,55,40,.14), 0 0 0 1px rgba(255,255,255,.5) inset;
  cursor: pointer;
  transition: transform .14s var(--spring), border-color .14s ease-out, box-shadow .2s ease-out;
}
.acorn-tile .acorn-emoji { font-size: 34px; line-height: 1; }
.acorn-tile .acorn-val { font-family: 'Quicksand', system-ui, sans-serif; font-size: 24px; font-weight: 800; color: var(--bark); }
.acorn-tile:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.acorn-tile.is-selected { border-color: var(--bracken); background: #FFF0DA; transform: scale(1.05) translateY(-2px); }
.acorn-tile.is-correct { border-color: var(--moss); background: #EDF6E2; animation: ngaia-bloom .6s var(--spring); }
.acorn-tile.is-wrong { border-color: var(--warm); background: #FFF4D6; animation: ngaia-wobble .5s ease-in-out; }

/* ---- Bridge of Ten: stepping-stone number line ---- */
.numline {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px;
}
.stone {
  min-width: 52px; min-height: 52px; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9C3A3);
  border: 2px solid #B89A78; border-radius: 50%;
  box-shadow: 0 5px 12px rgba(74,55,40,.18), 0 0 0 1px rgba(255,255,255,.5) inset;
  cursor: pointer;
  transition: transform .14s var(--spring), box-shadow .2s ease-out;
}
.stone:hover { transform: translateY(-2px); }
.stone:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.stone.bridge { border-color: var(--honey); box-shadow: 0 0 14px rgba(232,181,71,.55), 0 0 0 1px rgba(255,255,255,.5) inset; }
.stone.is-correct { background: radial-gradient(circle at 35% 30%, #EDF6E2, #A9CE86); border-color: var(--moss); color: var(--moss); animation: ngaia-bloom .6s var(--spring); }
.stone.is-wrong { border-color: var(--warm); background: #FFF4D6; animation: ngaia-wobble .5s ease-in-out; }
.numline-hint { margin-top: 14px; text-align: center; font-size: 15px; color: var(--bark); opacity: .8; }

/* ---- Ten-Frame Hollow ---- */
.tenframe {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  max-width: 320px; margin: 22px auto 4px;
  padding: 12px; background: rgba(74,55,40,.06);
  border: 2px solid rgba(74,55,40,.14); border-radius: var(--ngaia-radius-sm);
}
.tf-cell {
  aspect-ratio: 1 / 1; border-radius: 50%;
  border: 2px dashed rgba(74,55,40,.3);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.tf-cell.filled {
  border: 2px solid var(--bracken);
  background: radial-gradient(circle at 35% 30%, var(--honey-lo), var(--bracken));
  box-shadow: 0 0 10px rgba(232,181,71,.4) inset;
  animation: tf-drop .35s var(--spring) backwards;
}
@keyframes tf-drop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* ---- Five-Stone Skips: pond sequence ---- */
.skip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 22px; }
.skip-stone {
  min-width: 58px; min-height: 58px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 22px; font-weight: 800; color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFE0C2);
  border: 2px solid var(--moss); border-radius: 18px;
  box-shadow: 0 5px 12px rgba(74,55,40,.16), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.skip-stone.blank {
  background: rgba(232,181,71,.14);
  border: 2px dashed var(--honey);
  color: var(--honey);
  box-shadow: 0 0 16px rgba(232,181,71,.5);
  animation: skip-glow 1.6s ease-in-out infinite;
}
@keyframes skip-glow { 0%,100%{ box-shadow: 0 0 12px rgba(232,181,71,.4); } 50%{ box-shadow: 0 0 22px rgba(232,181,71,.7); } }

/* ---- Hazel hint card (live AI) ---- */
.hazel-card {
  margin-top: 16px;
  background: linear-gradient(180deg, #FFFFFF, var(--cream));
  border: var(--card-border); border-radius: var(--ngaia-radius);
  padding: 14px 16px; box-shadow: var(--card-shadow);
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
}
.hazel-card[hidden] { display: none; }
.hazel-card img.hazel-mini { width: 56px; height: 56px; flex: 0 0 auto; }
.hazel-card .hazel-text { flex: 1 1 160px; min-width: 0; }
.hazel-card .hazel-src { flex: 0 0 auto; }
.hazel-card .hazel-listen { flex: 0 0 auto; margin-left: auto; }
.hazel-card img.hazel-mini.bob { animation: hazel-bob .8s ease-in-out infinite; }
@keyframes hazel-bob {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}
.hazel-card .hazel-text { font-size: 18px; line-height: 1.32; font-weight: 700; color: var(--bark); margin: 0; }
.hazel-card .hazel-src {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px;
  background: var(--moss); color: var(--cream); white-space: nowrap;
}
.hazel-card .hazel-src.fallback { background: var(--bracken); }
.hazel-card .hazel-listen {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bark); color: var(--cream); font-size: 20px;
}

/* "Ask Master Hazel" button -- appears after 2 wrong */
.ask-hazel {
  display: none; margin: 18px auto 0;
  min-height: var(--tap-min); padding: 14px 26px;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--cream);
  background: linear-gradient(160deg, var(--honey-lo), var(--honey) 55%, var(--bracken));
  border: none; border-radius: var(--ngaia-radius);
  box-shadow: 0 10px 22px rgba(74,55,40,.24), 0 0 0 1px rgba(255,255,255,.4) inset, 0 0 20px rgba(232,181,71,.4);
  cursor: pointer;
}
.ask-hazel.show { display: block; animation: ask-rise .5s var(--spring); }
@keyframes ask-rise { 0%{ transform: translateY(12px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; } }

/* ---------------- Pip toast ---------------- */
#toastWrap {
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.pip-toast {
  display: flex; align-items: center; gap: 10px;
  max-width: 90vw; padding: 12px 18px;
  background: var(--cream); color: var(--bark);
  border: 2px solid var(--honey); border-radius: 999px;
  box-shadow: 0 10px 24px rgba(74,55,40,.24), 0 0 0 1px rgba(255,255,255,.5) inset;
  font-size: 16px; font-weight: 700;
  animation: toast-in .5s var(--spring), toast-out .4s ease-in 2.6s forwards;
}
.pip-toast img { width: 34px; height: 34px; }
@keyframes toast-in { 0%{ transform: translateY(20px) scale(.9); opacity: 0; } 100%{ transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(20px); opacity: 0; } }

/* squad-wake toast (bigger, milestone) */
.squad-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(160deg, var(--moss), #3E5A2A); color: var(--cream);
  border: 2px solid var(--honey-lo); border-radius: var(--ngaia-radius);
  box-shadow: 0 12px 28px rgba(74,55,40,.3), 0 0 24px rgba(232,181,71,.4);
  font-family: 'Quicksand', system-ui, sans-serif; font-weight: 800; font-size: 18px;
  animation: toast-in .55s var(--spring), toast-out .5s ease-in 3.4s forwards;
}
.squad-toast .sq-emoji { font-size: 30px; }

/* ---------------- mode-complete card ---------------- */
.ngaia-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(37,28,14,.55);
}
.ngaia-overlay.show { display: flex; animation: ov-fade .3s ease-out; }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
.ngaia-complete-card {
  max-width: 420px; width: 100%; text-align: center;
  background: linear-gradient(180deg, #FFFFFF, var(--cream));
  border: var(--card-border); border-radius: var(--ngaia-radius);
  padding: 28px 24px; box-shadow: var(--card-shadow);
  animation: complete-rise .55s var(--spring);
}
@keyframes complete-rise { 0%{ transform: translateY(24px) scale(.94); opacity: 0; } 100%{ transform: translateY(0) scale(1); opacity: 1; } }
.ngaia-complete-card img { width: 92px; height: 92px; animation: ngaia-bob 2.6s ease-in-out infinite; }
.ngaia-complete-card h2 { font-family: 'Quicksand', system-ui, sans-serif; font-size: 26px; color: var(--bracken); margin: 8px 0 6px; }
.ngaia-complete-card p { font-size: 17px; color: var(--bark); margin: 0 0 18px; }
.ngaia-complete-card .acorn-tally { font-size: 22px; font-weight: 800; color: var(--moss); margin-bottom: 18px; }
.ngaia-complete-card .cc-btn {
  min-height: var(--tap-min); width: 100%; padding: 16px;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--cream);
  background: linear-gradient(160deg, var(--honey-lo), var(--honey) 55%, var(--bracken));
  border: none; border-radius: var(--ngaia-radius); cursor: pointer;
  box-shadow: 0 10px 22px rgba(74,55,40,.24), 0 0 0 1px rgba(255,255,255,.4) inset;
}

@keyframes ngaia-bob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

/* ---------------- firefly motes (streak 3+) ---------------- */
#fireflies { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.firefly {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232,181,71,.85);
  box-shadow: 0 0 8px 2px rgba(232,181,71,.6);
  animation: firefly-rise 2.6s ease-out forwards;
}
@keyframes firefly-rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-220px) translateX(var(--fx-drift, 20px)) scale(1.1); opacity: 0; }
}

/* ambient drifting leaves */
.ngaia-leaf { position: fixed; width: 30px; height: 30px; opacity: .5; pointer-events: none; z-index: 0; animation: leaf-sway 9s ease-in-out infinite; }
.ngaia-leaf.l1 { top: 12%; left: 5%; animation-delay: 0s; }
.ngaia-leaf.l2 { top: 30%; right: 7%; animation-delay: 2.2s; }
.ngaia-leaf.l3 { top: 68%; left: 9%; animation-delay: 4s; }
@keyframes leaf-sway { 0%,100%{ transform: translateX(0) rotate(-8deg); } 50%{ transform: translateX(16px) rotate(10deg); } }

.ngaia-status { margin-top: 20px; text-align: center; font-size: 13px; color: var(--bark); opacity: .7; }

/* ---------------- PERSISTENT HELP ROW (Ask Hazel / Pip's Hint / Silly!) ----------------
   Always visible during play. Deliberately a SOFTER helper register than the answer
   tiles -- cream/honey, not a guess target. Big KS1 tap targets (min 70px). */
.ngaia-help-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 20px;
}
.ngaia-help-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 70px; padding: 10px 8px;
  background: linear-gradient(180deg, #FFFDF6, var(--cream));
  border: 2px dashed rgba(201,123,74,.55);     /* dashed = helper, not a solid answer tile */
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(74,55,40,.10);
  transition: transform .14s var(--spring), box-shadow .2s ease-out, border-color .14s ease-out;
}
.ngaia-help-btn:hover { transform: translateY(-2px); border-color: var(--bracken); }
.ngaia-help-btn:active { transform: translateY(1px) scale(.98); }
.ngaia-help-btn:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.ngaia-help-btn .hb-ico { font-size: 26px; line-height: 1; }
.ngaia-help-btn .hb-label {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 14px; font-weight: 800; color: var(--bark); line-height: 1.05; text-align: center;
}
.ngaia-help-btn.help-hazel { border-color: rgba(107,142,90,.6); }
.ngaia-help-btn.help-hazel:hover { border-color: var(--moss); }
.ngaia-help-btn.help-silly { border-color: rgba(232,181,71,.7); }
.ngaia-help-btn.help-silly:hover { border-color: var(--honey); }
/* On a narrow phone (390px) the three buttons stay in a tidy 1x3 grid, never overflow. */
@media (max-width: 420px){
  .ngaia-help-btn { padding: 8px 4px; }
  .ngaia-help-btn .hb-ico { font-size: 22px; }
  .ngaia-help-btn .hb-label { font-size: 12px; }
}

/* ---------------- Silly! joke box (inline, auto-dismiss) ---------------- */
.silly-box {
  display: none; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 16px;
  background: linear-gradient(180deg, #FFF7E2, #FDEFCB);
  border: 2px solid var(--honey-lo); border-radius: var(--ngaia-radius-sm);
  box-shadow: 0 6px 16px rgba(74,55,40,.16), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.silly-box.show { display: flex; animation: silly-pop .4s var(--spring); }
@keyframes silly-pop { 0%{ transform: scale(.92); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }
.silly-box .silly-ico { font-size: 26px; flex: 0 0 auto; }
.silly-box .silly-text { font-size: 16px; font-weight: 700; color: var(--bark); line-height: 1.3; }

/* ---------------- The Hundred Path: decade stepping-stone strip ---------------- */
.decade-strip {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
  margin: 18px auto 4px; max-width: 360px;
}
.decade-stone {
  min-width: 30px; min-height: 30px; padding: 4px 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 14px; font-weight: 800; color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9C3A3);
  border: 2px solid #B89A78; border-radius: 50%;
  opacity: .7;
}
.decade-stone.lit {
  opacity: 1; color: var(--bracken);
  border-color: var(--honey);
  background: radial-gradient(circle at 35% 30%, var(--honey-hi), var(--honey-lo));
  box-shadow: 0 0 14px rgba(232,181,71,.65);
  transform: scale(1.12);
}

/* ---------------- Visual help scaffold (Bug 3) ----------------
   Sits below the Hazel hint card; a soft cream panel holding a static picture aid
   (number line / ten-frame / decade strip). Reuses .tenframe + .decade-strip styles. */
.help-scaffold {
  margin-top: 12px; padding: 14px 14px 10px;
  background: linear-gradient(180deg, #FFFDF6, var(--cream));
  border: 2px dashed rgba(201,123,74,.45);
  border-radius: var(--ngaia-radius-sm);
  box-shadow: 0 4px 12px rgba(74,55,40,.10), 0 0 0 1px rgba(255,255,255,.5) inset;
  animation: silly-pop .4s var(--spring);
}
.help-scaffold[hidden] { display: none; }
.help-scaffold .hs-caption {
  text-align: center; font-size: 14px; font-weight: 800; color: var(--bracken);
  font-family: 'Quicksand', system-ui, sans-serif; margin-bottom: 6px;
}
.help-scaffold .tenframe { margin-top: 6px; margin-bottom: 2px; max-width: 280px; }
.help-scaffold .decade-strip { margin-top: 6px; margin-bottom: 2px; }
/* compact, static 0-20 number line (informational, not tappable) */
.hl-numline {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center;
  margin: 6px auto 2px; max-width: 320px;
}
.hl-stone {
  min-width: 26px; min-height: 26px; padding: 3px 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 13px; font-weight: 800; color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9C3A3);
  border: 2px solid #B89A78; border-radius: 50%;
  opacity: .68;
}
.hl-stone.bridge { border-color: var(--honey); opacity: .85; }
.hl-stone.lit {
  opacity: 1; color: var(--bracken);
  border-color: var(--honey);
  background: radial-gradient(circle at 35% 30%, var(--honey-hi), var(--honey-lo));
  box-shadow: 0 0 12px rgba(232,181,71,.6);
  transform: scale(1.14);
}

/* ---------------- Brave Adventure: hub card ---------------- */
.modecard.brave {
  position: relative;
  background: linear-gradient(180deg, #2F4A22, #243A1A);   /* darker deep-hollow green */
  border: 2px solid #1C2E14;
  box-shadow: 0 12px 28px rgba(28,46,20,.4), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 22px rgba(232,181,71,.3);
}
.modecard.brave .mc-name { color: var(--honey-hi); }
.modecard.brave .mc-desc { color: #E8E0C8; opacity: .9; }
.modecard.brave .mc-acorns { color: var(--honey-lo); }
.modecard.brave .mc-face { filter: drop-shadow(0 0 8px rgba(232,181,71,.6)); }
.modecard .mc-badge {
  position: absolute; top: 12px; right: 12px;
  background: linear-gradient(160deg, var(--honey-lo), var(--bracken));
  color: var(--cream); font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}

/* ---------------- Brave Adventure: warm gate card ---------------- */
.brave-gate-card {
  max-width: 420px; width: 100%; text-align: center;
  background: linear-gradient(180deg, #FFFFFF, var(--cream));
  border: var(--card-border); border-radius: var(--ngaia-radius);
  padding: 26px 24px; box-shadow: var(--card-shadow);
  animation: complete-rise .5s var(--spring);
}
.brave-gate-card img { width: 84px; height: 84px; animation: ngaia-bob 2.6s ease-in-out infinite; }
.brave-gate-card .brave-step {
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 13px; font-weight: 800;
  color: var(--moss); letter-spacing: .05em; margin: 6px 0 4px;
}
.brave-gate-card .brave-q {
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 21px; font-weight: 800;
  color: var(--bracken); line-height: 1.25; margin: 0 0 20px;
}
.brave-gate-btns { display: flex; flex-direction: column; gap: 12px; }
.brave-yes, .brave-no {
  min-height: var(--tap-min); padding: 14px; width: 100%;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 19px; font-weight: 800;
  border: none; border-radius: var(--ngaia-radius); cursor: pointer;
}
.brave-yes {
  color: var(--cream);
  background: linear-gradient(160deg, var(--honey-lo), var(--honey) 55%, var(--bracken));
  box-shadow: 0 10px 22px rgba(74,55,40,.24), 0 0 0 1px rgba(255,255,255,.4) inset, 0 0 20px rgba(232,181,71,.4);
}
.brave-no {
  color: var(--bark); background: var(--cream);
  border: 2px solid #C9A887;
}

/* ---------------- Brave Adventure: big payoff card ---------------- */
.brave-explorer-card {
  max-width: 440px; width: 100%; text-align: center; position: relative;
  background: linear-gradient(180deg, #FFF8E8, var(--cream));
  border: 3px solid var(--honey); border-radius: var(--ngaia-radius);
  padding: 34px 24px 26px;
  box-shadow: 0 16px 40px rgba(74,55,40,.34), 0 0 0 1px rgba(255,255,255,.5) inset, 0 0 40px rgba(232,181,71,.55);
  animation: complete-rise .6s var(--spring);
}
.brave-explorer-card .brave-badge-big {
  display: inline-block; margin-bottom: 8px;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .06em;
  color: var(--bracken);
}
.brave-explorer-card img { width: 100px; height: 100px; animation: ngaia-bob 2.4s ease-in-out infinite; }
.brave-explorer-card h2 { font-family: 'Quicksand', system-ui, sans-serif; font-size: 27px; color: var(--bracken); margin: 8px 0 8px; }
.brave-explorer-card p { font-size: 17px; color: var(--bark); margin: 0 0 14px; line-height: 1.35; }
.brave-explorer-card .brave-bonus {
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 22px; font-weight: 800; color: var(--moss);
  background: rgba(107,142,90,.12); border-radius: var(--ngaia-radius-sm);
  padding: 10px; margin-bottom: 14px;
}
.brave-explorer-card .brave-brag { font-size: 15px; color: var(--bark); opacity: .9; }
.brave-explorer-card .cc-btn {
  min-height: var(--tap-min); width: 100%; padding: 16px; margin-top: 6px;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 19px; font-weight: 800; color: var(--cream);
  background: linear-gradient(160deg, var(--honey-lo), var(--honey) 55%, var(--bracken));
  border: none; border-radius: var(--ngaia-radius); cursor: pointer;
  box-shadow: 0 10px 22px rgba(74,55,40,.24), 0 0 0 1px rgba(255,255,255,.4) inset;
}

/* ---------------- prefers-reduced-motion (mandatory verbatim block, end of file) ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .firefly, .ngaia-leaf, .boot-pip, .skip-stone.blank { animation: none !important; }
}