/* Ladderbug design system — v1. No web fonts, no external requests. */
:root{
  --paper:#FDFBF4; --paper-2:#F6F2E7; --surface:#FFFFFF; --ink:#1E2320; --ink-2:#4A5150; --ink-3:#5E6462;
  --line:#E4DECD; --line-2:#D3CBB4;
  --leaf:#146B4A; --leaf-soft:#E3F1E9; --leaf-ink:#0C4630;
  --sky:#1F5FA6; --sky-soft:#E4EDF8;
  --berry:#C0362A; --berry-soft:#FBE7E4;
  --sun:#B8730A; --sun-soft:#FCF0DC;
  --plum:#5C3E92; --plum-soft:#EDE7F8;
  --focus:#1F5FA6;
  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:32px;
  --sp:8px;
  --shadow:0 1px 2px rgba(30,35,32,.06), 0 4px 14px rgba(30,35,32,.06);
  --shadow-lg:0 2px 6px rgba(30,35,32,.08), 0 18px 40px rgba(30,35,32,.10);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-read:var(--font);
  --measure:66ch;
  --tap:44px;
  /* reader-adjustable */
  --read-size:1.05rem; --read-lh:1.6; --read-ls:0em; --read-ws:normal;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,a,summary,label,input,select,[role="button"]{touch-action:manipulation}
@media (min-width:768px) and (pointer:coarse){body{font-size:18px}}
@media (min-width:1024px) and (pointer:coarse){body{font-size:19px}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body[data-tint="cream"]{--paper:#FBF3E0;--paper-2:#F4EAD2}
body[data-tint="mint"]{--paper:#EFF6F0;--paper-2:#E4EFE7}
body[data-tint="lavender"]{--paper:#F3F0FA;--paper-2:#E9E4F5}
body[data-tint="slate"]{--paper:#1B1F1D;--paper-2:#242A27;--surface:#242A27;--ink:#F2EFE6;--ink-2:#C8CCC7;--ink-3:#A2A8A4;--line:#3A423E;--line-2:#4B544F;--leaf-soft:#123326;--sky-soft:#12263B;--berry-soft:#3A1A16;--sun-soft:#33240B;--plum-soft:#241A38;--leaf:#5FD3A3;--sky:#7FB6F0;--berry:#F0897A;--sun:#EBB458;--plum:#B69AE8;--leaf-ink:#5FD3A3}
body[data-font="serif"]{--font-read:Georgia,"Iowan Old Style","Times New Roman",serif}
body[data-font="mono"]{--font-read:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
body[data-font="dys"]{--font-read:"OpenDyslexic","Comic Sans MS",Verdana,var(--font)}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2rem,5.2vw,3.35rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem)}
h3{font-size:1.22rem}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:var(--leaf-ink);text-underline-offset:3px;text-decoration-thickness:.09em}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - 40px);margin-inline:auto}
.stack>*+*{margin-top:var(--gap,16px)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:18px}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.muted{color:var(--ink-2)}
.small{font-size:.9rem}
.tiny{font-size:.8rem;color:var(--ink-3)}
.center{text-align:center}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ---------- brand marks ---------- */
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.035em;font-size:1.3rem;color:var(--ink);text-decoration:none}
.mark-lg{font-size:1.75rem;gap:14px}
.mark:hover{color:var(--ink)}
.mark svg{flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:12px 22px;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:700;
  cursor:pointer;text-decoration:none;transition:transform .12s ease, background .15s ease, box-shadow .15s;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--leaf);color:#fff;box-shadow:var(--shadow)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}

.btn-berry{background:var(--berry);color:#fff}
.btn-lg{padding:16px 30px;font-size:1.08rem}
.btn-sm{padding:9px 16px;min-height:44px;font-size:.9rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:var(--leaf-soft);color:var(--leaf-ink)}
.pill.sky{background:var(--sky-soft);color:var(--sky)}
.pill.berry{background:var(--berry-soft);color:var(--berry)}
.pill.sun{background:var(--sun-soft);color:var(--sun)}
.pill.plum{background:var(--plum-soft);color:var(--plum)}

/* ---------- site chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.nav{display:none;gap:22px;align-items:center}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem}

.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff}
@media(min-width:900px){.nav{display:flex}[data-mobile-cta]{display:none!important}}
.footer{margin-top:72px;border-top:1px solid var(--line);background:var(--paper-2)}
.footer .cols{display:grid;gap:28px;padding:44px 0 28px}
@media(min-width:760px){.footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer a{color:var(--ink-2);text-decoration:none;font-size:.93rem}


/* ---------- hero ---------- */
.hero{padding:56px 0 24px;position:relative;overflow:hidden}
.hero .lede{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--ink-2);max-width:34em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--leaf-ink);background:var(--leaf-soft);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.hero-grid{display:grid;gap:34px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.02fr .98fr}}

.speedstrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.speedstrip span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.87rem;font-weight:650}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:620px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--paper-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--leaf-ink);font-weight:700}
td.no{color:var(--ink-3)}
.us{background:var(--leaf-soft)}

/* ---------- app shell ---------- */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);
  overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.app input,.app .reader,.app .prose{-webkit-user-select:text;user-select:text}
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:30}
.appmain{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:16px calc(16px + env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));width:100%}
.stage{width:min(820px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(18px,3.4vw,34px);box-shadow:var(--shadow-lg);min-height:min(440px,60vh);display:flex;flex-direction:column}
@media (min-width:900px){.stage{width:min(900px,100%)}}
/* iPad landscape and any short-wide window: put the thing to look at beside the
   answers so nothing a child needs is ever below the fold. */
@media (min-width:820px) and (max-height:900px) and (orientation:landscape){
  .stage{width:min(1040px,100%);min-height:auto}
  .stage[data-split="1"]{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
  .stage[data-split="1"] .stagehead{grid-column:1/-1}
  .stage[data-split="1"] .choices{margin-top:0}
}
.prompt{font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:700;margin-bottom:6px}
.subprompt{color:var(--ink-2);font-size:.95rem;margin-bottom:18px}
.bigword{font-family:var(--font-read);font-size:clamp(2.6rem,11vw,4.6rem);font-weight:800;letter-spacing:.06em;
  text-align:center;margin:14px 0 8px;line-height:1.1}
.bigword .g{display:inline-block;padding:0 .02em;border-radius:8px;transition:background .18s,color .18s}
.bigword .g.hit{background:var(--sun-soft);color:var(--sun)}
.bigword .g.new{background:var(--leaf-soft);color:var(--leaf-ink)}

.choices{display:grid;gap:12px;margin-top:auto}
@media(min-width:560px){.choices.c2{grid-template-columns:1fr 1fr}.choices.c3{grid-template-columns:repeat(3,1fr)}.choices.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px) and (pointer:coarse){.choice{min-height:96px;font-size:1.9rem}.choice.long{font-size:1.2rem}}
.choices.pics .choice{flex-direction:column;gap:6px;padding:14px 10px;min-height:150px}
.choices.pics .choice svg{width:76px;height:76px}
.choices.pics .choice span:not(.k){font-size:1.05rem;font-family:var(--font);font-weight:700}
.choice{min-height:80px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;
  border-radius:var(--r-m);border:2px solid var(--line-2);background:var(--surface);color:var(--ink);
  font-family:var(--font-read);font-size:1.6rem;font-weight:800;cursor:pointer;transition:transform .1s,border-color .15s,background .15s;position:relative}

.choice:active{transform:scale(.985)}
.choice.correct{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.choice.wrong{border-color:var(--berry);background:var(--berry-soft);color:var(--berry)}
.choice.dim{opacity:.42}
.choice .k{position:absolute;top:6px;right:8px;font-family:var(--font);font-size:.68rem;color:var(--ink-3);font-weight:700;border:1px solid var(--line-2);border-radius:5px;padding:0 5px;opacity:.65}
.choice.long{font-size:1.05rem;line-height:1.35}

.tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0}
.tile{min-width:58px;min-height:70px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;
  border-radius:var(--r-m);border:2px solid var(--line-2);background:var(--surface);cursor:pointer;font-family:var(--font-read);
  transition:transform .12s,background .15s}

.tile.on{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-ink)}
.tile.ghost{opacity:.35;cursor:default}

.feedback{margin-top:14px;padding:14px 16px;border-radius:var(--r-m);font-weight:650;display:none}
.feedback.show{display:block}
.feedback.ok{background:var(--leaf-soft);color:var(--leaf-ink)}
.feedback.fix{background:var(--sun-soft);color:var(--sun)}

.progressline{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.progressline i{display:block;height:100%;background:var(--leaf);border-radius:999px;transition:width .45s cubic-bezier(.2,.7,.2,1)}

/* rung ladder */
.ladder{display:flex;flex-direction:column-reverse;gap:6px}
.rung{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface)}
.rung .dot{width:14px;height:14px;border-radius:50%;background:var(--line-2);flex:none}
.rung.done .dot{background:var(--leaf)}
.rung.now{border-color:var(--leaf);background:var(--leaf-soft)}
.rung.now .dot{background:var(--sun)}
.rung .name{font-weight:700}
.rung .meta{margin-left:auto;font-size:.8rem;color:var(--ink-3)}

/* sound wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.cellw{aspect-ratio:1;border-radius:14px;border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;background:var(--paper-2);font-weight:800;
  font-family:var(--font-read);cursor:pointer;color:var(--ink);padding:4px}
.cellw.lit{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-ink)}
.cellw.learning{background:var(--sun-soft);border-color:var(--sun);color:var(--sun)}
.cellw b{font-size:1.05rem;line-height:1}
.cellw svg{width:26px;height:26px}
.cellw i{font-style:normal;font-size:.62rem;color:var(--ink-3);margin-top:2px}
.cellw.lit i,.cellw.learning i{color:inherit;opacity:.75}

/* math widgets */
.tenframe{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(320px,100%);margin:0 auto}
.tenframe div{aspect-ratio:1;border:2px solid var(--line-2);border-radius:8px;display:flex;align-items:center;justify-content:center}
.tenframe div.f::after{content:"";width:64%;height:64%;border-radius:50%;background:var(--berry)}
.tenframe div.f2::after{background:var(--sky)}
.dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:150px}
.dot-b{width:34px;height:34px;border-radius:50%;background:var(--plum)}
.numline{position:relative;height:96px;margin:26px 0 10px}
.numline .bar{position:absolute;left:0;right:0;top:44px;height:4px;background:var(--ink-2);border-radius:2px}
.numline .tick{position:absolute;top:34px;width:2px;height:24px;background:var(--ink-2);transform:translateX(-1px)}
.numline .tick.major{height:34px;top:28px;width:3px}
.numline .lab{position:absolute;top:70px;transform:translateX(-50%);font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.numline .marker{position:absolute;top:14px;transform:translateX(-50%);font-size:1.6rem;line-height:1;cursor:grab;user-select:none}
.array{display:grid;gap:3px;justify-content:center;margin:14px auto}
.array span{width:26px;height:26px;border-radius:6px;background:var(--sky)}
.bond{display:grid;place-items:center;gap:6px;margin:10px 0}
.bond .whole,.bond .part{width:78px;height:78px;border-radius:50%;border:3px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;font-size:1.7rem;font-weight:800;background:var(--surface)}
.bond .parts{display:flex;gap:44px}
.bond .whole.q,.bond .part.q{border-style:dashed;border-color:var(--leaf);color:var(--leaf-ink)}

/* reader */
.reader{font-family:var(--font-read);font-size:calc(var(--read-size) * 1.45);line-height:var(--read-lh);
  letter-spacing:var(--read-ls);word-spacing:var(--read-ws);max-width:34ch;margin:8px auto 0}
.reader w{display:inline-block;padding:1px 3px;border-radius:6px;cursor:pointer}

.reader w.say{background:var(--sun-soft)}

/* parent dashboard */
.kpi{display:grid;gap:14px}
@media(min-width:640px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi .card{padding:16px}
.kpi b{display:block;font-size:1.9rem;line-height:1.1;letter-spacing:-.02em}
.kpi span{font-size:.82rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:8px}
.spark i{flex:1;max-width:26px;background:var(--leaf-soft);border-radius:3px 3px 0 0;min-height:3px}
.spark i.hi{background:var(--leaf)}

/* misc */
.note{border-left:4px solid var(--leaf);background:var(--leaf-soft);padding:14px 18px;border-radius:0 var(--r-m) var(--r-m) 0}
.note.warn{border-color:var(--sun);background:var(--sun-soft)}
.faq details{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:2px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.2em;color:var(--leaf);font-weight:900}
.faq details[open] summary::before{content:"−"}
.faq details>*:not(summary){margin-bottom:14px}
.crumbs{font-size:.85rem;color:var(--ink-3);padding:14px 0 0}
.crumbs a{color:var(--ink-3)}
.prose{font-family:var(--font-read);font-size:var(--read-size);line-height:var(--read-lh);letter-spacing:var(--read-ls)}
.prose h2{margin-top:1.6em}
.prose ul,.prose ol{max-width:var(--measure);padding-left:1.3em}
.prose li{margin-bottom:.45em}
.linklist{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.linklist a{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  text-decoration:none;color:var(--ink);font-weight:650}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body[data-motion="off"] *{animation:none!important;transition:none!important}
.pop{animation:pop .3s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* bare app pages: no marketing chrome */
body.appmode .topbar,body.appmode .footer,body.appmode .crumbs{display:none}
body.appmode .appbar{position:sticky;top:0;z-index:30}


/* ============================ v2: pictures, mascot, delight, onboarding === */

/* --- picture cards ------------------------------------------------------- */
.pic{display:block}
.piccard{display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-l);padding:14px;aspect-ratio:1;width:100%}
.picstim{display:flex;flex-direction:column;align-items:center;gap:10px}
.picstim .piccard{width:min(190px,42vw)}
.picstim b{font-family:var(--font-read);font-size:1.5rem;letter-spacing:.03em}
@media(min-width:768px) and (pointer:coarse){.picstim .piccard{width:220px}}

/* --- the big "hear it" button — same place, every screen ----------------- */
.hear{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 26px;
  border-radius:999px;border:2px solid var(--line-2);background:var(--surface);color:var(--ink);
  font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow)}

.hear:active{transform:scale(.97)}
.hear svg{flex:none}
.hear.big{min-height:76px;padding:0 32px;font-size:1.2rem}
.hear[data-playing="1"] svg{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.16)}}

/* --- mascot -------------------------------------------------------------- */
.mascot{display:block;transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.mascot[data-mood="happy"]{animation:hop .5s cubic-bezier(.3,.9,.3,1.2)}
.mascot[data-mood="think"]{animation:tilt .6s ease-in-out}
.mascot[data-mood="cheer"]{animation:hop .5s cubic-bezier(.3,.9,.3,1.2) 2}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(7deg)}}

/* --- rung dots (progress a child can read) ------------------------------- */
.rungdots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rungdots i{width:14px;height:14px;border-radius:50%;background:var(--paper-2);border:2px solid var(--line-2);transition:all .3s}
.rungdots i.on{background:var(--leaf);border-color:var(--leaf);transform:scale(1.12)}
.rungdots i.now{background:var(--sun);border-color:var(--sun);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.28)}}

/* --- climb meter: the bug moves up a ladder as rungs are mastered -------- */
.climb{position:relative;width:64px;height:120px;flex:none}
.climb .rail{position:absolute;top:0;bottom:0;width:7px;border-radius:4px;background:#CDA061}
.climb .rail.l{left:12px}.climb .rail.r{right:12px}
.climb .step{position:absolute;left:12px;right:12px;height:5px;border-radius:3px;background:#CDA061}
.climb .bug{position:absolute;left:50%;transform:translateX(-50%);transition:bottom .7s cubic-bezier(.3,.9,.3,1.15)}

/* --- feedback ------------------------------------------------------------ */
.feedback{font-size:1.02rem}
.feedback.ok{display:flex;align-items:center;gap:10px}
.bigcheck{width:34px;height:34px;flex:none}

/* --- celebration --------------------------------------------------------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:80}

/* --- onboarding ---------------------------------------------------------- */
.onb{width:min(680px,100%);text-align:center}
.onb h2{font-size:clamp(1.6rem,4.4vw,2.3rem)}
.agegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.agegrid button{min-height:80px;border-radius:var(--r-l);border:2px solid var(--line-2);background:var(--surface);
  font:inherit;font-size:1.7rem;font-weight:800;cursor:pointer;color:var(--ink)}
.agegrid button[aria-pressed="true"]{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.namefield{width:100%;padding:16px 18px;border-radius:var(--r-m);border:2px solid var(--line-2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:1.3rem;text-align:center;min-height:64px}

/* --- home tiles ---------------------------------------------------------- */
.tilegrid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.tile-l{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);font-weight:750;
  text-align:center;min-height:120px;justify-content:center;box-shadow:var(--shadow)}

.tile-l small{font-weight:500;font-size:.8rem;color:var(--ink-3)}
.tile-l:hover small{color:inherit;opacity:.8}

/* --- ladder cards on the child home ------------------------------------- */
.ladcard{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ladcard .ico{width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--leaf-soft)}
.ladcard.math .ico{background:var(--sky-soft)}

/* --- settings voice list ------------------------------------------------- */
.voicelist{display:grid;gap:8px;max-height:280px;overflow:auto;-webkit-overflow-scrolling:touch}
.voicerow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-m);
  border:2px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-height:56px}
.voicerow[aria-pressed="true"]{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.voicerow b{flex:1;font-weight:700}

/* --- word tiles bigger on touch ----------------------------------------- */
@media(min-width:768px) and (pointer:coarse){
  .tile{min-width:72px;min-height:88px;font-size:2.4rem}
  .bigword{font-size:clamp(3rem,9vw,5rem)}
  .hear{min-height:68px;font-size:1.15rem}
}
/* short landscape phones/tablets: shrink the vertical rhythm */
@media (max-height:560px){
  .stage{min-height:auto;padding:16px}
  .picstim .piccard{width:min(130px,26vh)}
  .bigword{font-size:clamp(2rem,7vh,3rem);margin:6px 0}
  .choice{min-height:64px}
}

/* Hover styles only where a real pointer exists. On iPadOS a tap leaves
   :hover applied to the tapped control, which reads as a stuck selection. */
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{background:var(--leaf-ink);color:#fff}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.choice:hover{border-color:var(--leaf);background:var(--leaf-soft)}
.tile:hover{background:var(--paper-2)}
.linklist a:hover{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.hear:hover{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.tile-l:hover{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.reader w:hover{background:var(--sun-soft)}
a:hover{color:var(--berry)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.footer a:hover{color:var(--leaf-ink);text-decoration:underline}
.agegrid button:hover,.agegrid button[aria-pressed="true"]{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
}

@media (hover:none){
  .choice:active{border-color:var(--leaf);background:var(--leaf-soft)}
  .tile:active,.hear:active,.tile-l:active,.cellw:active{filter:brightness(.97)}
}
/* 3. Centre the working surface on tall screens instead of leaving a gulf
      of empty page under it. */
.appmain.vcenter{justify-content:center}
@media (min-height:820px){ .appmain.vcenter .stage{min-height:min(560px,58vh)} }


/* ============================ pixel sprites ============================== */
canvas.sprite,.sprite{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.piccard .sprite{filter:drop-shadow(0 2px 0 rgba(42,35,32,.10))}
.choices.pics .choice canvas{width:72px;height:72px}
@media(min-width:768px) and (pointer:coarse){.choices.pics .choice canvas{width:96px;height:96px}}
.mascot canvas{display:block}
/* the bug bobs gently when idle so the screen never feels dead */
.mascot{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body[data-motion="off"] .mascot{animation:none}


/* ================================ worlds ================================= */
.worldgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media(min-width:700px){.worldgrid{grid-template-columns:repeat(4,1fr)}}
.worldcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--r-l);
  border:2px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);min-height:150px;justify-content:center}
.worldcard[aria-pressed="true"]{border-color:var(--leaf);background:var(--leaf-soft);color:var(--leaf-ink)}
.worldcard small{font-size:.76rem;color:var(--ink-3);text-align:center;line-height:1.3}
.worldcard[aria-pressed="true"] small{color:inherit;opacity:.85}
.worldart{display:flex;gap:2px;align-items:flex-end;justify-content:center;min-height:46px}
.scene{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.scenecell{aspect-ratio:1;max-height:76px;border-radius:12px;background:var(--paper-2);border:1px dashed var(--line-2);
  display:grid;place-items:center;transition:background .3s,border-color .3s}
.scenecell.got{background:var(--leaf-soft);border-style:solid;border-color:var(--leaf)}


/* ============================== rewards ================================== */
.rewardcard{border-color:var(--line-2)}
.wardrobe{display:flex;flex-wrap:wrap;gap:10px}
.warditem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;border-radius:16px;
  border:2px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);min-width:84px;min-height:104px}
.warditem small{font-size:.7rem;color:var(--ink-3);text-align:center;line-height:1.2;max-width:80px}
.warditem.on{border-color:var(--leaf);background:var(--leaf-soft)}
.warditem.on small{color:var(--leaf-ink)}
.warditem.locked{opacity:.42;filter:grayscale(1)}
.warditem.locked small{font-weight:700}

.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.sticker{aspect-ratio:1;border-radius:50%;border:2px dashed var(--line-2);background:var(--paper-2);
  display:grid;place-items:center;padding:0;cursor:default}
.sticker.got{border-style:solid;border-color:var(--leaf);background:var(--leaf-soft);cursor:pointer;
  box-shadow:0 2px 0 rgba(42,35,32,.08)}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:16px;
  border:1px solid var(--line);background:var(--paper-2);text-align:center}
.badge small{font-size:.72rem;line-height:1.25;color:var(--ink-3)}
.badge.got{background:var(--sun-soft);border-color:var(--sun)}
.badge.got small{color:var(--sun);font-weight:700}
.badge .lock{font-size:1.5rem;font-weight:800;color:var(--line-2)}

.giftcard{background:var(--sun-soft);border-color:var(--sun);text-align:center}
.giftbox{margin-top:12px}
.giftopen{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto;padding:14px 26px;
  border-radius:22px;border:2px dashed var(--sun);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);
  animation:wobble 1.1s ease-in-out 3}
/* The gift draws the eye, then settles. A control that never stops moving is a
   moving target for a five-year-old — and it is a real accessibility problem,
   not just a fussy one. */
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3.5deg)}75%{transform:rotate(3.5deg)}}
.giftopen:hover,.giftopen:active{border-style:solid;background:var(--sun-soft)}
body[data-motion="off"] .giftopen{animation:none}