:root{color-scheme:light;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}
/* Layout: one field-notebook page at a time, scene on top, big decodable text, grown-up note below, big nav buttons. */
:root{
  --paper:#E9EFE1; --card:#F7FAF2; --ink:#1E3125; --muted:#56685A; --line:#C6D2BA;
  --fox:#D9622B; --fox-soft:#F6D9C6; --leaf:#4E7A42; --vowel:#1F66B5; --vowel-soft:#DCE8F6;
  --grass:#8FB56C; --grass-dk:#5E8A45; --soil:#A97F55; --soil-dk:#8A6340; --den:#4E3826; --root:#7A5A3C; --sun:#F4C24E; --tip:#FFFFFF; --dark:#2A1E18; --cat:#8E949C; --cat-dk:#6A7078;
  --sky1:#BFE0F0; --sky2:#E9F4E6; --dusk1:#F3B27A; --dusk2:#FBE3C2; --hill1:#A9C98A; --hill2:#C7DDB4; --pine:#3F6B45; --snow:#F4F8FB; --snow-dk:#D6E3EC;
  --fox-deep:#B44A1B; --belly:#FFF6EC; --kit:#6B4A36; --kit-dk:#4E3426;
  --good:#2E8B4F; --good-soft:#D6EEDD;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --read:"Andika","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#141D17; --card:#1C2820; --ink:#E5EDDF; --muted:#9AAE9C; --line:#2E3D32;
  --fox:#F0884B; --fox-soft:#4A2E1F; --leaf:#8DB37B; --vowel:#86B8EE; --vowel-soft:#1E3247;
  --grass:#3B5A33; --grass-dk:#2A4224; --soil:#6E5238; --soil-dk:#56402B; --den:#24190F; --root:#4A3624; --sun:#E8B640; --tip:#ECE6DA; --dark:#120D0A; --cat:#7A8088; --cat-dk:#5A6068;
  --sky1:#1E3550; --sky2:#2C4A50; --dusk1:#5A3A4A; --dusk2:#8A5A4A; --hill1:#2F4A2C; --hill2:#3A5540; --pine:#1C3322; --snow:#C9D6DF; --snow-dk:#9FB0BC;
  --fox-deep:#B9531F; --belly:#EFE4D6; --kit:#5A3E2D; --kit-dk:#3E2A1E;
  --good:#6CC98B; --good-soft:#1D3A27; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#141D17; --card:#1C2820; --ink:#E5EDDF; --muted:#9AAE9C; --line:#2E3D32;
  --fox:#F0884B; --fox-soft:#4A2E1F; --leaf:#8DB37B; --vowel:#86B8EE; --vowel-soft:#1E3247;
  --grass:#3B5A33; --grass-dk:#2A4224; --soil:#6E5238; --soil-dk:#56402B; --den:#24190F; --root:#4A3624; --sun:#E8B640; --tip:#ECE6DA; --dark:#120D0A; --cat:#7A8088; --cat-dk:#5A6068;
  --sky1:#1E3550; --sky2:#2C4A50; --dusk1:#5A3A4A; --dusk2:#8A5A4A; --hill1:#2F4A2C; --hill2:#3A5540; --pine:#1C3322; --snow:#C9D6DF; --snow-dk:#9FB0BC;
  --fox-deep:#B9531F; --belly:#EFE4D6; --kit:#5A3E2D; --kit-dk:#3E2A1E;
  --good:#6CC98B; --good-soft:#1D3A27; color-scheme:dark}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--read);font-size:18px;line-height:1.5;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 32px}
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--leaf)}
.toggles{display:flex;gap:8px;flex-wrap:wrap}
.tog{font:inherit;font-size:15px;font-weight:700;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer}
.vpick{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--muted)}
.vpick select{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:999px;padding:5px 10px;max-width:180px}
.vpick select:focus-visible{outline:3px solid var(--fox);outline-offset:2px}
.tog[aria-pressed="true"]{border-color:var(--vowel);background:var(--vowel-soft);color:var(--vowel)}
.tog:focus-visible,.nav button:focus-visible,.word:focus-visible,.tile:focus-visible,.opt:focus-visible,input:focus-visible{outline:3px solid var(--fox);outline-offset:2px}
.page{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:20px clamp(16px,4vw,36px) 24px;display:flex;flex-direction:column;gap:18px;min-height:480px}
.pnum{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.scene{width:100%;max-width:100%;height:auto;display:block;border-radius:12px;background:var(--paper)}
.story{font-size:clamp(34px,7.5vw,60px);line-height:1.35;font-weight:700;text-wrap:balance;display:flex;flex-wrap:wrap;gap:.05em .32em;align-items:baseline}
.word{font:inherit;color:inherit;background:none;border:0;padding:0 .04em;border-radius:8px;cursor:pointer;display:inline-flex}
.word:hover{background:var(--fox-soft)}
.word.speaking{background:var(--fox-soft);color:var(--fox)}
.word.sight{text-decoration:underline dotted;text-decoration-thickness:3px;text-underline-offset:.18em;text-decoration-color:var(--muted)}
.punct{margin-left:0}
.wp{display:inline-flex;align-items:baseline;white-space:nowrap}
.vowels .v{color:var(--vowel)}
.stretch .word span+span{margin-left:.28em}
.note{border-top:2px dashed var(--line);padding-top:14px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.note .tag{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--fox);font-weight:700;grid-column:1/-1}
.note p{margin:0;grid-column:1/-1;max-width:62ch;color:var(--muted)}
.fa{font-size:15px;color:var(--muted);grid-column:1/-1}
.fa b{color:var(--ink);font-weight:700}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between}
.nav button{font-family:var(--display);font-size:22px;border:0;border-radius:14px;padding:12px 22px;cursor:pointer;background:var(--fox);color:#fff;min-width:120px}
.nav button.back{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.nav button:disabled{opacity:.35;cursor:default}
.dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dot.on{background:var(--fox)}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.1}
h1{font-size:clamp(48px,11vw,88px);color:var(--fox)}
h2{font-size:clamp(28px,5vw,40px)}
.cover{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--leaf)}
.namebox{display:flex;flex-direction:column;gap:6px;max-width:420px}
.namebox label{font-size:15px;font-weight:700;color:var(--muted)}
.namebox input{font:inherit;font-size:28px;font-weight:700;color:var(--ink);background:transparent;border:0;border-bottom:3px solid var(--line);padding:4px 2px}
.ranks{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.ranks span{border:2px solid var(--line);border-radius:999px;padding:3px 12px}
.ranks span.here{border-color:var(--fox);color:var(--fox);font-weight:700}
.build{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.slots{display:flex;gap:10px}
.slot{width:clamp(56px,15vw,80px);height:clamp(66px,17vw,92px);border-bottom:5px solid var(--ink);font-size:clamp(44px,10vw,64px);font-weight:700;display:flex;align-items:flex-end;justify-content:center}
.slot.v{color:var(--vowel)}
.tiles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tile,.opt{font:inherit;font-weight:700;border:3px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;cursor:pointer}
.tile{font-size:clamp(36px,8vw,48px);width:clamp(60px,15vw,76px);height:clamp(60px,15vw,76px)}
.tile.used{visibility:hidden}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hear{font:inherit;font-size:16px;font-weight:700;background:none;border:2px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink);cursor:pointer}
.progress{font-size:15px;color:var(--muted)}
.win{font-family:var(--display);font-size:30px;color:var(--good)}
.qs{display:flex;flex-direction:column;gap:22px}
.q{display:flex;flex-direction:column;gap:10px}
.qhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:20px;font-weight:700}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{font-size:clamp(30px,7vw,44px);padding:6px 22px}
.opt.right{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.badge{align-self:center;border:4px double var(--fox);border-radius:50%;width:220px;height:220px;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-6deg);color:var(--fox);gap:2px;padding:12px}
.badge .r{font-family:var(--display);font-size:34px;line-height:1}
.badge .n{font-weight:700;font-size:18px;color:var(--ink)}
.badge .d{font-size:13px;color:var(--muted)}
.grown{display:flex;flex-direction:column;gap:14px;max-width:66ch}
.grown h3{font-family:var(--display);font-weight:400;font-size:22px;margin:6px 0 0;color:var(--leaf)}
.grown ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.fa-table{width:100%;border-collapse:collapse;font-size:17px}
.fa-table td{border-bottom:1px solid var(--line);padding:6px 4px}
.fa-table td:last-child{text-align:right;font-size:20px}
/* ---- v3: ocean, badges, library, read-first check ---- */
:root{
  --sea1:#A6DCEB; --sea2:#3E9DBA; --sea3:#1F5C82; --sand:#E7D3A1; --sand-dk:#CDB27A; --kelp:#3F8A5A;
  --shark:#7E95A8; --shark-dk:#5D7488; --shark-belly:#F1F4F6; --fish:#F2A33A; --bus:#F2B630; --sh:#B0398A;
  --bad:#C0392B; --bad-soft:#F6D7D3;
  --jungle1:#D6EBC8; --jungle2:#A7CF93; --leaf1:#5E9B4F; --leaf2:#3F7A3A; --trunk:#6B4A33; --chimp:#3A2A22; --chimp-face:#D8B394; --chimp-muzzle:#E8CBB2; --fig:#7B3F75; --mound:#A5764B;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sea1:#2B6E86; --sea2:#1D4D69; --sea3:#0F2D45; --sand:#8C7A55; --sand-dk:#6E5E40; --kelp:#2D6644;
  --shark:#71879A; --shark-dk:#536779; --shark-belly:#D7DEE3; --fish:#E0952F; --bus:#D9A22A; --sh:#E58BCB;
  --bad:#F08A7E; --bad-soft:#4A2320;
  --jungle1:#25402A; --jungle2:#1B3320; --leaf1:#3E6E36; --leaf2:#2A5228; --trunk:#4A3424; --chimp:#2A1E18; --chimp-face:#B8957A; --chimp-muzzle:#CDAE94; --fig:#9A5A92; --mound:#7A5636}}
:root[data-theme="dark"]{
  --sea1:#2B6E86; --sea2:#1D4D69; --sea3:#0F2D45; --sand:#8C7A55; --sand-dk:#6E5E40; --kelp:#2D6644;
  --shark:#71879A; --shark-dk:#536779; --shark-belly:#D7DEE3; --fish:#E0952F; --bus:#D9A22A; --sh:#E58BCB;
  --bad:#F08A7E; --bad-soft:#4A2320;
  --jungle1:#25402A; --jungle2:#1B3320; --leaf1:#3E6E36; --leaf2:#2A5228; --trunk:#4A3424; --chimp:#2A1E18; --chimp-face:#B8957A; --chimp-muzzle:#CDAE94; --fig:#9A5A92; --mound:#7A5636}
[hidden]{display:none!important}
.dg{color:var(--sh);background:color-mix(in srgb,var(--sh) 14%,transparent);border-radius:.14em}
.homebtn{font:inherit;font-size:15px;font-weight:700;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer}
.homebtn:focus-visible,.gcard:focus-visible,.bigbtn:focus-visible,.readbtn:focus-visible{outline:3px solid var(--fox);outline-offset:2px}
/* home */
.home{display:flex;flex-direction:column;gap:22px}
.rankcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.rankcard .namebox input{font-size:30px}
.rank{font-family:var(--display);font-size:clamp(30px,6vw,44px);color:var(--fox);line-height:1}
.ranknote{color:var(--muted);font-size:15px}
.rankbar{display:flex;gap:6px;margin-top:8px}
.rankbar span{flex:1;height:10px;border-radius:5px;background:var(--line)}
.rankbar span.on{background:var(--fox)}
.minibadges{display:flex;gap:4px}
.minibadges svg{width:84px;height:auto}
.sec{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gcard{font:inherit;text-align:left;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;cursor:pointer;min-width:0}
.gcard:hover{border-color:var(--fox)}
.gcard .scene{border-radius:8px}
.gcard .gt{font-family:var(--display);font-size:24px;line-height:1}
.gcard .gs{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.chip{font-size:13px;font-weight:700;border-radius:999px;padding:2px 10px;border:2px solid currentColor;white-space:nowrap}
.chip.gold{color:#A97A12}.chip.silver{color:#6B7682}.chip.bronze{color:#9C5A2C}.chip.new{color:var(--fox)}
.gcard.locked{cursor:default;opacity:.65}
.gcard.locked .ph{aspect-ratio:2/1;max-width:100%;border-radius:8px;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:48px;color:var(--muted)}
.bigbtn{font-family:var(--display);font-size:22px;border:0;border-radius:14px;padding:12px 22px;cursor:pointer;background:var(--fox);color:#fff}
.bigbtn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* badge book */
.bbook{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px 14px}
.bslot{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.bslot svg{width:100%;max-width:200px;height:auto}
.bslot .bn{font-weight:700}
.bslot .bd{font-size:14px;color:var(--muted)}
.medal{width:min(280px,80vw);height:auto;display:block;margin:0 auto}
.stamp{animation:stamp .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stamp{from{transform:scale(1.5) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.award{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.award .who{font-family:var(--display);font-size:28px}
.tiers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
/* ranger check */
.check{display:flex;flex-direction:column;gap:18px}
.checkhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stars{display:flex;gap:4px}
.stars svg{width:30px;height:30px}
.qsent{font-size:clamp(32px,7vw,54px);font-weight:700;line-height:1.35;display:flex;flex-wrap:wrap;gap:.05em .32em;align-items:baseline}
.qsent .w{display:inline-flex}
.blank{display:inline-block;width:2.4em;border-bottom:.12em solid var(--ink);height:.9em}
.blank.filled{width:auto;border-bottom-color:var(--good);color:var(--good)}
.gate{border:2px dashed var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gate p{margin:0;color:var(--muted);max-width:44ch}
.readbtn{position:relative;overflow:hidden;font-family:var(--display);font-size:22px;border:0;border-radius:14px;padding:12px 26px;background:var(--line);color:var(--ink);cursor:pointer}
.readbtn .fill{position:absolute;inset:0;width:0;background:var(--good-soft);transition:width 3s linear}
.readbtn.go .fill{width:100%}
.readbtn span{position:relative}
.readbtn:disabled{cursor:default}
.readbtn.ready{background:var(--good);color:#fff}
.readbtn.ready .fill{display:none}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.opt:disabled{cursor:default}
.opt.dim{opacity:.4}
.verdict{font-size:20px;font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.verdict.ok{color:var(--good)}.verdict.no{color:var(--bad)}
.rule{font-size:14px;color:var(--muted)}
/* v4: capitals helper, letter lab, grown-up corner */
.cap{position:relative}
.caphelp .cap::after{content:attr(data-lc);position:absolute;left:50%;top:-.42em;transform:translateX(-50%);font-size:.42em;line-height:1;color:var(--fox);font-weight:700}
.lzoo{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.lcard{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;overflow:hidden;min-width:0}
.lcard.tricky::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 22px 22px 0;border-color:transparent var(--fox) transparent transparent}
.lcard .pair{display:flex;align-items:baseline;gap:6px;font-weight:700}
.lcard .big{font-size:44px;line-height:1}.lcard .small{font-size:36px;line-height:1;color:var(--vowel)}
.lcard .an{font-size:15px;color:var(--muted)}.lcard .an b{color:var(--ink)}
.lcard:focus-visible{outline:3px solid var(--fox);outline-offset:2px}
.twins{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.twin{display:flex;align-items:baseline;gap:14px;min-width:0;font-size:clamp(30px,6vw,42px);font-weight:700;background:var(--paper);border-radius:14px;padding:8px 16px}
.twin .eq{color:var(--muted);font-size:.7em}
.callout{display:flex;gap:16px;align-items:center;border:2px solid var(--fox);background:var(--fox-soft);border-radius:14px;padding:14px 16px;font-size:18px}
.callout .bigI{font-family:var(--display);font-size:72px;line-height:1;color:var(--fox)}
.callout b .word{font-size:1.1em}
.lprompt{font-size:20px;font-weight:700;color:var(--muted)}
.lshow{font-size:clamp(90px,22vw,150px);font-weight:700;line-height:1}
.lopt{min-width:96px}
.ldots{display:flex;gap:5px;flex-wrap:wrap}
.ldots span{width:12px;height:12px;border-radius:50%;background:var(--line)}
.ldots span.ok{background:var(--good)}.ldots span.no{background:var(--bad)}.ldots span.cur{background:var(--fox)}
.corner{border:2px dashed var(--line);border-radius:14px;padding:12px 14px}
.corner summary{cursor:pointer;font-weight:700;color:var(--muted)}
.corner .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.corner p{margin:8px 0 0;color:var(--muted);font-size:15px;max-width:62ch}
.switch{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.switch input{width:22px;height:22px;accent-color:var(--fox)}
.dangerbtn{font:inherit;font-weight:700;border:2px solid var(--bad);color:var(--bad);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer}
.dangerbtn.solid{background:var(--bad);color:#fff}
.previewbar{background:var(--fox-soft);color:var(--fox-deep);border-radius:10px;padding:6px 12px;font-weight:700;font-size:15px;text-align:center}
.helpbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16px;color:var(--muted);font-weight:700}
.paws{display:flex;gap:4px}.paws svg{width:28px;height:28px}
.trying .word{cursor:default}
.signwarn{border:2px solid var(--bad);background:var(--bad-soft);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:15px}
@media (prefers-reduced-motion:reduce){.stamp{animation:none}.readbtn .fill{transition:none}}
@media (max-width:520px){.rankcard{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.shake{animation:none}}
/* v5: self-hosted: reader picker, offline pill */
.netpill{font:inherit;font-size:14px;font-weight:700;border:2px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:5px 12px}
.netpill.signin{border-color:var(--fox);color:var(--fox);cursor:pointer}
.who{display:flex;flex-direction:column;gap:20px}
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.kid{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--line);border-radius:20px;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.kid.on,.kid:hover{border-color:var(--fox)}
.kid .avatar{width:100%;max-width:160px;height:auto}
.kid span{font-family:var(--display);font-size:32px;line-height:1;overflow-wrap:anywhere}
.addkid{border:2px dashed var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.avpick{display:flex;gap:10px;flex-wrap:wrap}
.avbtn{background:none;border:3px solid var(--line);border-radius:16px;padding:4px;cursor:pointer;width:88px}
.avbtn[aria-checked="true"]{border-color:var(--fox)}
.avbtn .avatar{width:100%;height:auto;display:block}
.kid:focus-visible,.avbtn:focus-visible,.netpill:focus-visible{outline:3px solid var(--fox);outline-offset:2px}