:root{font-family:Inter,system-ui,sans-serif;color:#f5f7fc;background:#101827;--mint:#8df0cb;--panel:#1b293e;--muted:#afbbcd}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#293b53,transparent 40%),#101827;min-height:100vh}header,main,footer{max-width:1100px;margin:auto;padding:20px}header{display:flex;align-items:center;gap:12px}header small{display:block;color:var(--muted);font-size:11px}header #status{margin-left:auto;font-size:12px;color:var(--mint)}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:13px;padding:12px 15px;font-weight:750}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd878;outline-offset:2px}.logo{display:grid;place-items:center;width:43px;height:43px;background:var(--mint);color:#142b3d;font-weight:950;font-size:25px;border-radius:14px}.hero{display:grid;grid-template-columns:1fr .7fr;align-items:center;background:linear-gradient(135deg,#22354d,#182337);border:1px solid #354860;border-radius:26px;padding:35px;min-height:280px}.hero small,.gamehead small{letter-spacing:1.6px;color:var(--mint);font-weight:800}.hero h1{font-size:clamp(37px,5vw,60px);line-height:1.02;letter-spacing:-2px;margin:13px 0}.hero em{font-style:normal;color:var(--mint)}.hero p{color:var(--muted)}.buddy{justify-self:center;display:grid;place-items:center;position:relative;width:145px;height:145px;border-radius:45%;background:linear-gradient(145deg,#b2ffe4,#54c6ae);color:#16334a;font-size:85px;box-shadow:inset -12px -12px #38a88f,0 20px 45px #0005}.buddy span{position:absolute;right:-23px;top:-5px;color:#ffd878;font-size:35px}nav{display:flex;gap:8px;overflow:auto;margin:20px 0 28px}nav button{white-space:nowrap;background:transparent;color:var(--muted)}nav button.selected{background:#263951;color:var(--mint);border:1px solid #456079}.view h2{font-size:30px;letter-spacing:-.8px}.view>p{color:var(--muted)}.primary{background:var(--mint);color:#132b3d;box-shadow:0 4px #4ca88e}.secondary{background:#2a3b53;color:#f5f7fc;border:1px solid #465b74}.awe{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.awe button{background:#1b2b40;color:white;border:1px solid #354a64}.card{background:linear-gradient(145deg,#1e2e44,#182438);border:1px solid #354860;border-radius:20px;padding:23px;margin:12px 0}.card p{color:#c4cfdf;line-height:1.6}.gamehead{display:flex;justify-content:space-between;align-items:center}.gamehead h2{margin:10px 0}.pookie{font-size:48px}.basket{min-height:110px;border:2px dashed #79b6a4;border-radius:18px;background:#243b4b;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;padding:20px;margin:20px 0;position:relative}.basket #count{position:absolute;right:10px;top:8px;color:var(--mint);font-size:12px}.snack{font-size:25px}.fruitgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.fruitgrid button{font-size:25px;background:#2c4059;border:1px solid #465c76;min-height:55px}.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.tutor{display:flex;gap:12px;align-items:center;padding:15px;background:#2a3b52;border:1px solid #4a6079;border-radius:16px;margin-top:16px;line-height:1.6}.tutor:first-letter{font-size:25px}.feedback{background:#20413e;border:1px solid #438a7b;border-radius:17px;padding:18px;margin-top:15px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid .card{margin:0}.grid small,.small{color:var(--muted)}.form{max-width:620px;display:grid;gap:12px}.form label,dialog label,.card label{display:grid;gap:7px;color:#d4deeb;font-size:13px;margin:8px 0}.form select,input,dialog select,dialog input{width:100%;padding:12px;background:#101b2b;color:white;border:1px solid #465a73;border-radius:11px}.stats{grid-template-columns:repeat(3,1fr)}.stats big{font-size:27px;font-weight:850}.stats small{display:block;margin-top:8px}.upload{display:inline-block;cursor:pointer}footer{color:#95a5bc;font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}dialog{background:#1b2b40;color:white;border:1px solid #50627b;border-radius:22px;padding:25px;width:min(420px,calc(100% - 30px))}dialog::backdrop{background:#060d1dcc}.close{float:right;background:#2d4058;color:white}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:#e0fff3;color:#143b3a;padding:12px 18px;border-radius:12px;font-weight:750;font-size:13px;transition:.2s;max-width:90%;z-index:9}#toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}@media(max-width:680px){header,main,footer{padding:14px}.hero{grid-template-columns:1fr;padding:25px}.buddy{width:105px;height:105px;font-size:60px;margin-top:25px}.hero h1{font-size:43px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.stats .card{padding:12px}.stats big{font-size:19px}.fruitgrid{gap:5px}.fruitgrid button{padding:8px;font-size:21px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== WatEE v1.1 components — built on the original tokens above (navy, mint, panel, muted, gold focus) ===== */
:root{--bg:#101827;--ink:#f5f7fc;--ink2:#afbbcd;--line:#354860;--panel2:#22354d;--ok-bg:#20413e;--ok-line:#438a7b;--nudge-bg:#3a321f;--nudge-line:#8a7440;--nudge-ink:#ffe3a3;--hint-bg:#22385a;--hint-line:#4a6fa8;--danger:#ff8a8a;--fs:16px;--bevel:inset 0 -4px 0 #0004,inset 0 3px 0 #ffffff22}
html{font-size:var(--fs)}html[data-text="1"]{--fs:14px}html[data-text="3"]{--fs:19px}
html[data-contrast="high"]{--line:#fff;--ink2:#e8eef8;--muted:#e8eef8}
html[data-contrast="high"] body{background:#000}
html[data-contrast="high"] .card,html[data-contrast="high"] .btn,html[data-contrast="high"] button{outline:2px solid #fff}
html[data-motion="reduce"] *{animation:none!important;transition:none!important}
body{line-height:1.45}
.skip{position:absolute;left:-999px;top:8px;background:var(--mint);color:#132b3d;padding:8px 12px;border-radius:10px;z-index:20}.skip:focus{left:8px}
#profileBtn{background:#e9eef6;color:#16334a;min-width:48px;min-height:48px}
main#app{outline:none;min-height:50vh}
footer a{color:#95a5bc}
body[data-mode="quest"] nav,body[data-mode="quest"] #heroSlot{display:none}
#heroSlot .hero{margin:0 auto 4px;max-width:1060px}
#heroSlot:empty{display:none}
#heroSlot{padding:0 20px}
nav{max-width:1100px;margin:16px auto 8px;padding:0 20px}
nav button{min-height:48px}
:focus-visible{outline:3px solid #ffd878;outline-offset:2px;border-radius:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center;justify-content:center}.pad{padding:18px}.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;margin:10px 0}.row.wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.small{font-size:.85em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;text-decoration:none;box-shadow:var(--bevel)}
.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.primary{box-shadow:0 4px #4ca88e,var(--bevel)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #465b74;box-shadow:none}
.btn.small{min-height:44px;padding:8px 14px;font-size:.9em}
.btn.huge{width:100%;min-height:64px;font-size:1.12em}
.btn.round{width:50px;height:50px;min-height:50px;padding:0;border-radius:14px}
.btn.tile{flex:1 1 150px;flex-direction:column;min-height:88px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px}
.btn.danger,.btn.secondary.danger{background:#5a1f26!important;color:#fff!important;border-color:#ff8a8a!important}
.ico{font-size:1.2em;line-height:1}h2 .ico,h3 .ico,h4 .ico,p .ico,b .ico{margin-right:.3em}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:46px;background:#1b2b40;color:var(--ink);border:1px solid #354a64;border-radius:13px;padding:8px 14px}
.chip svg{width:28px;height:28px}
.chip.on,.swatch.on,.comp.on,.tab.on,.pen.on{background:#263951;color:var(--mint);border:2px solid var(--mint)}
.swatch{display:inline-flex;align-items:center;gap:8px;min-height:48px;background:#1b2b40;color:var(--ink);border:1px solid #354a64}
.dot{width:24px;height:24px;border-radius:6px;display:inline-block;border:2px solid #0006}
.input,textarea.input{width:100%;padding:12px;background:#101b2b;color:#fff;border:1px solid #465a73;border-radius:11px;font:inherit;min-height:48px}
.label{font-weight:800;margin:14px 0 6px;display:block;color:#d4deeb}
.warn{background:var(--nudge-bg);border:1px solid var(--nudge-line);color:var(--nudge-ink);padding:10px 14px;border-radius:12px;font-weight:700}
.ok-msg{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--mint);padding:10px 14px;border-radius:12px;font-weight:800}
.note{padding:12px 14px;border-radius:12px;font-weight:800}.note.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--mint)}.note.nudge{background:var(--nudge-bg);border:1px solid var(--nudge-line);color:var(--nudge-ink)}
.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.top .title{margin:.2em 0;text-align:center}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px}
.tab{background:transparent;color:var(--muted);border:1px solid transparent;min-height:46px}
.ga-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.ga-top h2{flex:1;margin:.2em 0}.sync-chip{flex-basis:100%;font-size:.8em;color:var(--mint);background:#16243a;border:1px solid #2b4a50;border-radius:10px;padding:6px 10px}
.char{width:110px;height:110px}.char.big{width:150px;height:150px}.char.mini{width:58px;height:58px;flex:none}.char.tiny{width:30px;height:30px}
.preview{display:flex;justify-content:center;gap:16px;margin:8px 0}
.comps{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important}
.comp{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1b2b40;color:var(--ink);border:1px solid #354a64;min-height:170px}
.comp svg{width:88px;height:88px}.comp small{color:var(--muted)}
.continue{padding:12px}
.awe button{min-height:48px}
.path{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:14px}
.region-btn{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:linear-gradient(145deg,#1e2e44,#182438);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px;min-height:104px;box-shadow:var(--bevel)}
.region.locked .region-btn{opacity:.6;cursor:not-allowed}
.region-art{display:flex;align-items:flex-end;gap:2px;flex:none}.region-art svg{width:48px;height:48px}.region-art .basket-svg{width:80px;height:42px}
.region-text{display:flex;flex-direction:column;gap:2px}.region-text b{font-size:1.12em}.region-text small{font-weight:700;color:var(--muted)}.region-text .pick{color:#ffd878}.region-text .ok{color:var(--mint)}
.qbar{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;margin-bottom:6px}
.mode-chip{font-weight:900;font-size:.75em;letter-spacing:1.4px;text-transform:uppercase;border-radius:10px;padding:6px 10px;background:#263951;color:var(--mint)}
.dots{display:flex;gap:6px;justify-content:center}.dots i{width:12px;height:12px;border-radius:3px;background:#2c4059;display:block}.dots i.past{background:var(--mint)}.dots i.now{background:#ffd878;transform:scale(1.25)}
.bubble-row{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px}
.tutor.bubble{flex:1;display:block;margin-top:0}.tutor .hm{display:block;font-size:.8em;color:var(--mint);margin-bottom:2px}
.tutor.bubble.ok{background:var(--ok-bg);border-color:var(--ok-line)}.tutor.bubble.nudge{background:var(--nudge-bg);border-color:var(--nudge-line)}.tutor.bubble.hint{background:var(--hint-bg);border-color:var(--hint-line)}
.l1{display:block;font-weight:700}.l2{display:block;color:var(--muted);font-size:.92em;margin-top:4px;border-top:1px dashed #4a6079;padding-top:4px}.l3{display:block;color:var(--muted);font-size:.84em;margin-top:6px}
.gamehead small{letter-spacing:1.6px;color:var(--mint);font-weight:800}
.stage{background:#1a2c40;border:1px solid var(--line);border-radius:18px;padding:12px;min-height:200px;box-shadow:var(--bevel)}
.stage.transfer{background:#1b2f4a;border-color:#4a6fa8}
.qfoot{display:flex;gap:10px;margin-top:14px}.qfoot .btn{flex:1}
.intro-art{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:12px 0}.intro-art svg{width:80px;height:80px}.intro-art .basket-svg{width:130px;height:66px}
.pile{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:60px;padding:8px;border-radius:14px;border:2px dashed #79b6a4;background:#243b4b;margin-bottom:10px}
.obj{width:50px;height:50px;display:inline-flex;touch-action:none;cursor:grab}.obj svg{width:100%;height:100%}
.obj.ghost{position:fixed;pointer-events:none;z-index:50;transform:scale(1.2);filter:drop-shadow(0 6px 6px #0006)}
.empty-pile{font-size:1.6em;color:var(--mint)}
.baskets{display:grid;gap:10px}.baskets.g2{grid-template-columns:1fr 1fr}.baskets.g3{grid-template-columns:repeat(3,1fr)}.baskets.g4{grid-template-columns:repeat(2,1fr)}.baskets.g5{grid-template-columns:repeat(3,1fr)}
@media(min-width:620px){.baskets.g4{grid-template-columns:repeat(4,1fr)}.baskets.g5{grid-template-columns:repeat(5,1fr)}}
.bk{display:flex;flex-direction:column;align-items:center;gap:4px}
.friend{display:flex;flex-direction:column;align-items:center}.friend-svg{width:54px;height:50px}.fname{font-size:.8em;font-weight:800}
.dbasket{position:relative;width:100%;min-height:108px;border:2px solid transparent;background:#22384d;border-radius:14px;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;box-shadow:var(--bevel)}
.dbasket .basket-svg{width:100%;max-width:140px;height:auto}
.dbasket .in{position:absolute;top:6px;left:8px;right:8px;display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:1px}
.mini-obj{width:24px;height:24px;display:inline-flex}.mini-obj svg{width:100%;height:100%}
.dbasket.over,.dbasket.hl,.fruit.hl,.tok.hl{border-color:#ffd878;background:#30475f}
.count{position:absolute;bottom:6px;right:8px;background:var(--mint);color:#132b3d;border-radius:8px;min-width:32px;height:32px;display:grid;place-items:center;font-weight:900}
.take{min-width:48px;min-height:44px;background:#2a3b53;color:#fff;border:1px solid #465b74}
.take[disabled]{opacity:.35}
.target{display:flex;justify-content:center;margin:4px 0 10px}.target .big{font-size:2.3em;font-weight:900;background:#101b2b;color:#ffd878;border-radius:14px;padding:2px 22px;border:2px solid #ffd878}.target .dots-svg{width:92px;height:92px}
.tbasket{margin:8px 0 12px}.tbasket .snack{position:relative;width:34px;height:34px;display:inline-flex}.tbasket .snack svg{width:100%;height:100%}.tbasket .snack .num{position:absolute;right:-6px;top:-6px;background:var(--mint);color:#132b3d;border-radius:6px;font-size:.7em;font-style:normal;font-weight:900;padding:0 4px}
.fruitgrid.rows5{grid-template-columns:repeat(5,1fr)}
.fruit{position:relative;display:grid;place-items:center;padding:6px!important}.fruit svg{width:38px;height:38px}.fruit.on{background:#1f4a44!important;border-color:var(--mint)!important;opacity:.55}
.fruit .num{position:absolute;top:2px;right:4px;background:var(--mint);color:#132b3d;border-radius:6px;font-size:.75em;font-weight:900;padding:0 4px}
.seq{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;background:#101b2b;border-radius:14px;padding:10px;margin-bottom:14px}
.tok{width:56px;height:56px;display:inline-grid;place-items:center;border-radius:10px;border:2px solid transparent;background:#22384d}.tok svg{width:42px;height:42px}
.tok.unit{border-color:#ffd878}
.tok.blank{border:2px dashed #79b6a4;font-weight:900;font-size:1.3em;color:#79b6a4}.tok.blank.filled{border-style:solid;border-color:var(--mint)}
.palette{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tok.pick{width:auto;min-width:84px;height:auto;padding:8px;display:flex;flex-direction:column;background:#2c4059;color:var(--ink);border:1px solid #465c76;box-shadow:var(--bevel)}
.tname{font-size:.72em;font-weight:800}
.choices{grid-template-columns:1fr!important}@media(min-width:560px){.choices{grid-template-columns:1fr 1fr!important}}
.choice{min-height:68px;background:#1b2b40;color:var(--ink);border:1px solid #354a64;box-shadow:var(--bevel)}
.choice.ok{border:2px solid var(--mint);background:var(--ok-bg)}.choice.gentle{border:2px solid var(--nudge-line);background:var(--nudge-bg)}
.overlay{position:fixed;inset:0;background:#060d1dcc;display:grid;place-items:center;padding:16px;z-index:40}.overlay .card{max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
.spinner{width:54px;height:54px;border-radius:12px;border:6px solid #2c4059;border-top-color:var(--mint);margin:30px auto 10px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.reward{text-align:center}.reward-art{margin:10px auto;max-width:420px}.reward-art svg{width:100%;height:auto}.reward-art .row svg{width:56px;height:56px}
.plank{opacity:0;animation:plank .5s ease-out forwards}@keyframes plank{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
html[data-motion="reduce"] .plank{opacity:1}
.big-text{font-size:1.15em;font-weight:800}.stars-earned{color:#ffd878;font-weight:800}
.journey{list-style:none;padding:0;margin:0}.journey li{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #2b3d55}.journey li span{display:flex;flex-direction:column}.state-ico{font-size:1.8em}
.island{border-radius:18px;overflow:hidden;border:1px solid var(--line);margin:10px 0}.island-svg{display:block;width:100%;height:auto}
canvas#pad{width:100%;height:auto;background:#16233a;border-radius:16px;border:1px solid var(--line);touch-action:none;display:block}
.pen{width:50px;height:50px;padding:0;display:grid;place-items:center;background:#1b2b40;border:1px solid #354a64}
.stamp svg{width:30px;height:30px}
.stepper{display:flex;align-items:center;gap:12px;margin:8px 0}.stepper .label{margin:0;flex:1}.stepper output{font-size:1.5em;font-weight:900;min-width:44px;text-align:center}
.preview-pz{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0}.preview-pz.small .mini-obj{width:18px;height:18px}
.creations{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}.creations img{width:100%;display:block;border-radius:12px}.creations figure{margin:0}
.gate{max-width:460px;margin:12px auto}.hold{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}.hold-bar{position:absolute;left:0;bottom:0;height:8px;width:100%;background:#0003}.hold-bar i{display:block;height:100%;width:0;background:#132b3d}
.tbl{width:100%;border-collapse:collapse;font-size:.92em}.tbl th,.tbl td{border-bottom:1px solid #2b3d55;padding:8px 6px;text-align:left;vertical-align:top}
.field{display:flex!important;flex-direction:column;gap:4px;margin:10px 0;font-weight:700;color:#d4deeb}.field.tog{flex-direction:row;align-items:center;gap:10px;min-height:44px}.field.tog input{width:24px;height:24px;min-height:0}
.pol{border-left:5px solid #354860;padding:8px 12px;margin:8px 0;display:flex;flex-direction:column;gap:2px;background:#16243a;border-radius:0 10px 10px 0}.pol.st-active{border-color:var(--mint)}.pol.st-suggested,.pol.st-canary,.pol.st-shadow{border-color:#5BB8F5}.pol.st-rolled_back,.pol.st-declined{border-color:#ff8a8a}
.audit{padding-left:18px}.audit li{margin:4px 0}
.bands{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.bands li{background:#16243a;border-radius:10px;padding:6px 10px}
.home-act{background:#16243a;border:1px solid #2b4a50;padding:12px;border-radius:12px;font-weight:700;color:#e0fff3!important}
.notes{padding-left:18px}
.small-link{color:var(--muted);font-size:.85em;padding:12px}
.discover h3{margin-top:0}
@media(max-width:680px){#heroSlot,nav{padding:0 14px}.btn.tile{flex:1 1 44%}.obj{width:44px;height:44px}.fruit svg{width:30px;height:30px}}
/* pixel cast (16-bit pixel DNA): lift dark outlines off the navy UI */
.pix.char{filter:drop-shadow(0 0 1.5px #ffffff55) drop-shadow(0 3px 0 #0006)}
.comp .pix,.cast .pix{width:84px;height:84px}
/* ---------- MoveLearn v1.1: play modes, movement round, reveal, co-play, level up, friends ---------- */
.playmodes{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:14px}
.pmode{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:12px 14px}
.pmode span{font-size:1.5em}.pmode small,.choice small{display:block;font-weight:500;color:var(--muted);font-size:.82em}
.choice.on,.pmode.on{border:2px solid var(--mint);background:var(--ok-bg)}
.mover{display:flex;justify-content:center;margin:6px 0 10px}
.mover .char{transform-origin:50% 100%}
html[data-motion="full"] .mv-hop .char,html[data-motion="full"] .mv-stomp .char{animation:mvHop .8s ease-in-out infinite}
html[data-motion="full"] .mv-reach .char,html[data-motion="full"] .mv-stretch .char{animation:mvReach 1.4s ease-in-out infinite}
html[data-motion="full"] .mv-clap .char,html[data-motion="full"] .mv-knees .char{animation:mvClap .6s ease-in-out infinite}
html[data-motion="full"] .mv-march .char,html[data-motion="full"] .mv-wave .char{animation:mvSway 1s ease-in-out infinite}
@keyframes mvHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes mvReach{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
@keyframes mvClap{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes mvSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.repdots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.repdots i{width:30px;height:30px;border-radius:8px;background:#16243a;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:.9em}
.repdots i.on{background:var(--mint);border-color:var(--mint)}
.bigtap{min-height:72px;min-width:140px;font-size:1.1em}
.costrip{background:#16243a;border:1px dashed var(--ok-line);border-radius:14px;padding:10px 14px;margin:10px 0;color:#e0fff3}
.costrip ul{margin:6px 0 0;padding-left:20px;color:#c4cfdf}.costrip p{margin:0 0 8px}
.costrip .turn{color:#ffd878}
.reveal{padding:28px 18px}.reveal .big-text{font-size:1.3em;font-weight:800;color:var(--mint)}
.chest-wrap{display:flex;justify-content:center;margin:10px 0}.chest-wrap svg{width:150px;height:150px}
html[data-motion="full"] .chest-wrap:not(.open) svg{animation:mvClap 1.6s ease-in-out infinite}
html[data-motion="full"] .chest-wrap.open svg{animation:chestPop .5s ease-out}
@keyframes chestPop{0%{transform:scale(.8)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.levelup{border:2px solid #ffd878;background:linear-gradient(145deg,#2a3550,#1a2640)}.levelup h3{color:#ffd878;margin-top:0}
.newfriend{display:flex;align-items:center;gap:10px;background:#16243a;border-radius:12px;padding:8px 12px;margin-top:8px}
.rankline{background:#16243a;border:1px solid #2b4a50;border-radius:12px;padding:10px 14px}
.tracks{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.friends{list-style:none;padding:0;margin:8px 0;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important}
.friend{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#1b2b40;border:1px solid #354a64;border-radius:14px;padding:10px 6px}
.friend .char{width:64px;height:64px}.friend small{color:var(--muted);font-size:.78em}
.friend.locked .char{filter:grayscale(1) brightness(.45)}.friend.locked b{color:var(--muted)}
label.comp{cursor:pointer;justify-content:center;border-radius:14px;padding:10px}label.comp input{width:auto;accent-color:var(--mint)}
label.comp:has(input:checked){border:2px solid var(--mint);background:var(--ok-bg)}
.mapping{list-style:none;padding:0;display:grid;gap:8px}.mapping li{background:#16243a;border-radius:10px;padding:8px 12px}
.draft{color:var(--nudge-ink)}
.roles ul{padding-left:20px;color:#c4cfdf}
@media(max-width:680px){.playmodes{grid-template-columns:1fr 1fr!important}.tracks{grid-template-columns:repeat(3,minmax(0,1fr))!important}.tracks .card{padding:10px}}
.btn.primary.small{color:#132b3d}.btn.secondary.small{color:#f5f7fc}
/* v1.1.1: install button, AI helper */
#installBtn{background:var(--mint);color:#132b3d;min-width:48px;min-height:48px;font-size:1.2em;padding:8px 12px}#installBtn[hidden]{display:none}
.guide .answer{background:#16243a;border-color:#2b4a50}.guide .ai-text{color:#e7eef8;white-space:normal}
.guide textarea.input{min-height:70px;resize:vertical}
.logo-img{width:46px;height:46px;flex:none;display:block;filter:drop-shadow(0 2px 0 #0006)}
.buddy.robot{background:none;box-shadow:none;width:auto;height:auto}.buddy.robot img{width:150px;height:150px;border-radius:30px;box-shadow:0 18px 40px #0006;display:block}
html[data-motion="full"] .buddy.robot img{animation:mvHop 3.2s ease-in-out infinite}
@media(max-width:680px){.buddy.robot img{width:112px;height:112px}}
/* v1.2: AWE corner, story, song, recall */
.awe-corner{margin-top:22px}.awe-corner h2{margin-bottom:4px}
.awe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.awe-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-height:96px;background:linear-gradient(145deg,#1e2e44,#182438);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--bevel)}
.awe-tile .awe-ico{font-size:1.6em}.awe-tile small{color:var(--muted);font-weight:500}.awe-tile.due{border:2px solid #ffd878}.awe-tile.due small{color:#ffe3a3;font-weight:700}
.panel-art{display:flex;justify-content:center;margin:8px 0}.panel-art .char{width:150px;height:150px}
.objs{list-style:none;padding:0;margin:10px auto;display:grid;grid-template-columns:repeat(5,52px);gap:8px;justify-content:center}.objs li svg,.objs li .obj{width:48px;height:48px}
.share-art{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}.plate{display:flex;flex-wrap:wrap;gap:4px;max-width:200px;justify-content:center;background:#16243a;border:2px dashed #79b6a4;border-radius:999px;padding:12px 16px}.plate svg{width:30px;height:30px}.plate.pile{border-radius:18px;max-width:320px}
.seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}.tokw{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px}.tokw svg{width:44px;height:44px}.tokw small{color:var(--muted);font-size:.72em}.tokw.blank{justify-content:center;width:56px;height:56px;border:3px dashed #ffd878;border-radius:12px;font-size:1.6em;font-weight:900;color:#ffd878}
.story-text{font-size:1.25em;line-height:1.5;text-align:center;color:#f5f7fc!important;font-weight:700}
.lyrics{padding-left:0;list-style:none;display:grid;gap:10px}.lyrics li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#16243a;font-size:1.15em;font-weight:700}.lyrics li.on{background:var(--ok-bg);outline:2px solid var(--mint)}
.beats{display:flex;gap:6px}.beats i{width:14px;height:14px;border-radius:50%;background:#2a3b53}.beats i.on{background:#ffd878}
.opts{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))!important;margin:12px 0}.opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px}.opt .num{font-size:1.9em;font-weight:900}.opt svg{width:40px;height:40px}.opt span{font-size:.85em}
.friends-row .char{width:52px;height:52px}
.objs li span{display:block}

/* ===== WatEE v2 — Block World, KnowledgeVerse, MoveLoot, StoryVerse, grown-up loop ===== */
:root{--gold:#ffd878;--pink:#ff9ecf;--sky:#7ec8ff;--orange:#ff8a3d;--block:inset 0 -6px 0 #0005,inset 0 4px 0 #ffffff30}
.logo-img{width:46px;height:46px;border-radius:14px;image-rendering:auto}
/* how-to (step guide everywhere) */
.howto{background:#17263a;border:2px dashed #3f5876;border-radius:16px;padding:10px 14px;margin:16px 0}
.howto summary{cursor:pointer;font-weight:800;color:var(--gold);min-height:40px;display:flex;align-items:center;gap:6px}
.howto ol{margin:8px 0 4px;padding-left:22px;line-height:1.7}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;padding:0;margin:10px 0}
.steps-row li{background:#17263a;border:1px solid var(--line);border-radius:14px;padding:10px;font-size:.88em;display:flex;gap:8px;align-items:flex-start}
.steps-row b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mint);color:#132b3d}
/* world */
.world .w-hud{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.w-who{display:flex;gap:10px;align-items:center}.w-who svg{width:48px;height:48px}.w-who small{display:block;color:var(--muted)}
.w-stats{display:flex;gap:8px}.w-stats span{background:#0d1726;border:2px solid #2f4560;border-radius:12px;padding:6px 12px;font-weight:850;box-shadow:var(--block)}
.w-stage{position:relative;border-radius:22px;overflow:hidden;border:3px solid #2b4a2c;box-shadow:0 10px 30px #0007;background:linear-gradient(#8fd3ff,#cdeeff)}
.w-canvas{height:min(62vh,520px);min-height:300px;touch-action:none;cursor:pointer}
.w-canvas canvas{display:block;width:100%!important;height:100%!important}
.w-tools{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.w-tools .btn{background:#ffffffdd;color:#1b2b40;border:2px solid #1b2b40;box-shadow:var(--block)}
.w-tools .btn.build{width:auto;padding:0 12px;gap:6px}.w-tools .btn.on{background:var(--gold)}
.w-prompt{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#101827ee;border:2px solid var(--mint);border-radius:16px;padding:8px 10px 8px 14px;font-weight:800;max-width:92%}
.w-palette{position:absolute;left:10px;bottom:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;background:#101827cc;border-radius:14px;padding:6px}
.blk{width:44px;height:44px;min-height:44px;padding:4px;background:#22354d;border:2px solid #0006;border-radius:8px}
.blk i{display:block;width:100%;height:100%;border-radius:4px;box-shadow:var(--block)}.blk.on{border-color:var(--gold);transform:translateY(-3px)}
.w-flat{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;height:100%;padding:20px;font-size:40px;text-align:center}.w-flat p{flex-basis:100%;font-size:14px;color:#1b2b40}
.w-h{margin:18px 0 8px}
.zone-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.zone-btn{position:relative;display:flex;gap:8px;align-items:center;text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--zc) 35%,#1b293e),#1b293e);color:var(--ink);border:2px solid var(--zc);border-radius:16px;padding:10px;min-height:84px;box-shadow:var(--block)}
.zone-btn svg{width:46px;height:46px;flex:none}.zone-btn b{display:block}.zone-btn small{display:block;color:#d4deeb;font-weight:500;font-size:.78em}
.zone-btn i{position:absolute;right:8px;top:6px;font-style:normal;font-size:18px}
.zone-btn:hover{transform:translateY(-2px)}
.mission{border:2px solid var(--gold);background:linear-gradient(145deg,#3a321f,#1e2e44)}
.inbox-card{border:2px solid var(--pink);background:linear-gradient(145deg,#3d2238,#1e2e44)}
/* learn */
.ctx-chip{display:inline-block;background:#0d1726;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9em;margin:4px 0 10px}
.subj-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.subj{flex:1 0 130px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#1b2b40;color:var(--ink);border:2px solid #354a64;border-radius:16px;padding:10px 12px;box-shadow:var(--block)}
.subj small{color:var(--muted);font-weight:600}.subj.on{border-color:var(--mint);background:#1f3d3a}
.tpath{list-style:none;padding:10px 0;margin:0;display:flex;flex-direction:column;gap:6px;position:relative}
.tnode{display:flex;justify-content:flex-start;padding-left:8%}.tnode.r{justify-content:flex-end;padding:0 8% 0 0}
.tnode button{display:flex;align-items:center;gap:12px;background:none;color:var(--ink);padding:4px;text-align:left;max-width:80%}
.tdot{position:relative;flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:18px;font-size:30px;background:#2a3b53;border:3px solid #465b74;box-shadow:var(--block)}
.tdot i{position:absolute;right:-8px;bottom:-8px;font-style:normal;font-size:18px}
.s-STRONG .tdot{background:#5c4a12;border-color:var(--gold)}.s-GROWING .tdot{background:#1f4a34;border-color:#6fdc8c}.s-TRYING .tdot{background:#4a3d16;border-color:#d8b44a}.s-REVISIT .tdot{background:#233a5c;border-color:var(--sky)}
.tlab b{display:block}.tlab small{color:var(--muted)}
.tnode button:hover .tdot{transform:scale(1.06) rotate(-3deg)}
.topic-hero{display:flex;gap:14px;align-items:center;margin:8px 0}.topic-hero svg{width:96px;height:96px;flex:none}
.bubble{position:relative;flex-direction:column;align-items:flex-start;gap:4px}.bubble .hm{font-size:.78em;color:var(--mint);font-weight:800;text-transform:uppercase;letter-spacing:.8px}.bubble .l3{color:#d4deeb}
.bubble.ok{background:var(--ok-bg);border-color:var(--ok-line)}.bubble.nudge{background:var(--nudge-bg);border-color:var(--nudge-line);color:var(--nudge-ink)}.bubble.hint{background:var(--hint-bg);border-color:var(--hint-line)}
.bubble-row{display:flex;gap:10px;align-items:flex-end}.bubble-row svg{width:58px;height:58px;flex:none}.bubble-row .bubble{flex:1;margin-top:0}
.m-chip{display:inline-block;border-radius:999px;padding:6px 12px;background:#0d1726;border:1px solid var(--line)}
.hub-grid,.hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.hub .btn,.hub-grid .btn{flex-direction:column;align-items:flex-start;text-align:left;min-height:96px;border-radius:18px;background:#1b2b40;color:var(--ink);border:2px solid #354a64;box-shadow:var(--block)}
.hub .btn .hi,.hub-grid .btn .hi{font-size:30px}.hub .btn small,.hub-grid .btn small{color:var(--muted);font-weight:500}
.hub .btn.primary-hub,.hub-grid .btn.primary-hub{background:linear-gradient(145deg,#2f6b58,#1f3d3a);border-color:var(--mint)}
.teachme{background:#17263a;border:2px solid var(--gold);border-radius:16px;padding:10px 14px;margin:10px 0}.teachme summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
.guide-card .steps,.guide-card ol{line-height:1.7}.guide-card{margin-top:8px}
.classic{border-style:dashed}
/* quiz */
.quiz{max-width:720px;margin:auto}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}.qhead .mode-chip{flex:1;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;gap:5px}.dots i{width:12px;height:12px;border-radius:3px;background:#2a3b53}.dots i.past{background:var(--mint)}.dots i.now{background:var(--gold);transform:scale(1.25)}
.team-chip{font-size:22px}
.qpic{display:grid;place-items:center;background:#17263a;border:2px solid #2f4560;border-radius:20px;padding:14px;margin:12px 0;min-height:120px}
.qsvg{width:min(100%,260px);height:auto}
.emj{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px;font-size:34px;line-height:1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}.two>div{text-align:center;background:#1b2b40;border-radius:14px;padding:8px}
.groups{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.grp{display:flex;flex-wrap:wrap;gap:3px;padding:8px;border:2px dashed #79b6a4;border-radius:14px;font-size:24px;max-width:120px}
.gone{opacity:.3;text-decoration:line-through}
.coins{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.coin{display:grid;place-items:center;min-width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#e2b13c);color:#4a3200;font-weight:900;border:3px solid #a07818;padding:0 6px}.coin.n{border-radius:10px;background:linear-gradient(#c8f0c8,#7ccf7c);border-color:#3f8a3f;min-width:76px;color:#123}
.picto{border-collapse:collapse;font-size:1.05em}.picto th{text-align:right;padding:4px 10px}.picto td span{color:var(--gold);margin-right:2px}.picto caption{caption-side:bottom;color:var(--muted);padding-top:6px}
.passage{background:#fffbe8;color:#2b2310;border-radius:14px;padding:14px 18px;line-height:1.7;max-width:560px;font-size:1.05em}
.opts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.choice.opt{min-height:74px;font-size:1.35em;background:#22354d;color:var(--ink);border:3px solid #465b74;border-radius:18px;box-shadow:var(--block)}
.choice.opt:hover{border-color:var(--mint)}.choice.opt.ok{background:#1f5a44;border-color:var(--mint)}.choice.opt.gentle{background:#4a3d16;border-color:var(--gold)}
.choice.opt[aria-disabled="true"]{cursor:default}
.qfoot{display:flex;justify-content:flex-end;margin-top:12px}
.quiz-end svg{width:120px;height:120px}.quiz-end .big-text,.big-text{font-size:1.5em;font-weight:900;color:var(--gold)}
.rm-list{list-style:none;padding:0;display:grid;gap:6px}.rm-list li{background:#1b2b40;border-radius:12px;padding:8px 12px}
/* arena */
.arena-hero{display:flex;gap:14px;align-items:center}.arena-hero svg{width:110px;height:110px;flex:none}
.ar-topics{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.pmode{flex-direction:column}.pmode span{font-size:28px}
.battle{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;background:linear-gradient(#2a1f45,#1b293e 70%,#2b4a2c 70%);border-radius:22px;padding:18px 12px 12px;border:3px solid #3d2f62}
.fighter{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.fighter svg{width:min(130px,30vw);height:auto}
.fighter.hit svg{animation:shake .35s}.vs{font-size:34px;align-self:center}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px) rotate(-4deg)}75%{transform:translateX(8px) rotate(4deg)}}
.hp{width:100%;max-width:150px;height:16px;border-radius:999px;background:#0d1726;border:2px solid #000;overflow:hidden}.hp i{display:block;height:100%;background:linear-gradient(90deg,#6fdc8c,#b6f09c);transition:width .3s}.hp.mon i{background:linear-gradient(90deg,#ff7a59,#ffb347)}
.ar-card{text-align:center;background:#17263a;border:3px solid var(--orange);border-radius:22px;padding:18px;margin:12px 0}.big-emoji{font-size:64px;display:block}
.ar-card .btn.huge{min-height:96px;font-size:1.35em;background:var(--orange);color:#2b1300;box-shadow:0 6px #a24d12,var(--bevel)}
.pit{border:3px solid var(--gold);background:repeating-linear-gradient(45deg,#2a2a2a 0 18px,#1b1b1b 18px 36px)}
.loot{border:3px solid var(--gold)}.pill{display:inline-block;background:#0d1726;border:2px solid var(--gold);border-radius:999px;padding:6px 14px;font-weight:900;font-size:1.1em}
.msg{text-align:center;font-weight:800;min-height:1.5em;color:var(--gold)}
/* StoryVerse */
.sv-hero{display:flex;gap:14px;align-items:center}.sv-hero svg{width:100px;height:100px;flex:none}
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:12px 0}
.cover{position:relative;display:flex;flex-direction:column;gap:6px;background:linear-gradient(160deg,#fffbe8,#ffe3a3);color:#2b2310;border:4px solid #1b1430;border-radius:14px;padding:10px;box-shadow:6px 6px 0 #1b1430;text-align:left;min-height:170px}
.cover svg{width:56px;height:56px}.cover .comic-title{font-family:"Comic Sans MS","Chalkboard SE",Inter,sans-serif;font-weight:900;font-size:1.05em;line-height:1.15}.cover small{color:#5a4a20}
.cover .row{margin-top:auto}.cover .btn.round{width:44px;height:44px;min-height:44px;background:#1b1430;color:#fff}
.reader{max-width:640px;margin:auto}
.panel{position:relative;margin:0;border:5px solid #1b1430;border-radius:16px;min-height:300px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:8px 8px 0 #1b1430;background:#bfe7ff}
.panel-who{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%)}.panel-who svg{width:150px;height:150px}
.speech{position:relative;z-index:1;margin:12px;background:#fff;color:#1b1430;border:3px solid #1b1430;border-radius:18px;padding:10px 14px;font-family:"Comic Sans MS","Chalkboard SE",Inter,sans-serif;font-size:1.12em;line-height:1.45}
.speech b{display:block;font-size:.75em;text-transform:uppercase;letter-spacing:1px;color:#7a3db8}
.speech span{display:block}
.bg-sky{background:linear-gradient(#7ec8ff,#d6f1ff 60%,#8fd16f 60%)}.bg-room{background:linear-gradient(#ffd9b3,#ffe9d1 65%,#b07a45 65%)}.bg-party{background:radial-gradient(circle at 20% 20%,#ff9ecf 0 8%,transparent 9%),radial-gradient(circle at 80% 30%,#ffd84d 0 7%,transparent 8%),linear-gradient(#c9a7ff,#ffe3f3)}
.bg-night{background:radial-gradient(circle at 75% 20%,#fff6c0 0 6%,transparent 7%),linear-gradient(#141a3d,#3b2f74)}.bg-forest{background:linear-gradient(#a8e6a1,#d9f7c8 55%,#3f9e3a 55%)}.bg-sea{background:linear-gradient(#7ec8ff,#bfe7ff 50%,#3f8fe0 50%,#2d6fb8)}.bg-space{background:radial-gradient(circle at 30% 30%,#ff8a65 0 6%,transparent 7%),radial-gradient(#fff 1px,transparent 1.5px) 0 0/22px 22px,#0d0b26}.bg-school{background:linear-gradient(#2f5d3a 0 45%,#ffe9a8 45%)}
.panel-q{background:#17263a;border:2px solid var(--mint);border-radius:16px;padding:12px;margin:12px 0}
.panel-q .opts{margin-top:8px}
.qbadge{position:absolute;top:6px;right:8px;background:var(--gold);color:#1b1430;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:14px}
.reader-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 0}
.comic-page{max-width:900px;margin:auto}.comic-page .comic-title{text-align:center;font-family:"Comic Sans MS","Chalkboard SE",Inter,sans-serif;font-size:2em;margin:8px 0 14px}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.page-grid .panel{min-height:220px;box-shadow:5px 5px 0 #1b1430}.page-grid .panel-who svg{width:96px;height:96px}.page-grid .speech{font-size:.95em}
.colouring .panel{background:#fff!important}.colouring .panel-who svg{filter:grayscale(1) contrast(4) brightness(1.6)}.colouring .speech{border-style:dashed}
.print-foot{text-align:center;margin-top:12px}
.editor .ed-list{list-style:none;padding:0;display:grid;gap:12px}
.ed-panel{display:grid;grid-template-columns:150px 1fr;gap:12px;background:#17263a;border:1px solid var(--line);border-radius:16px;padding:10px}
.ed-panel .panel{min-height:150px;box-shadow:3px 3px 0 #1b1430;border-width:3px}.ed-panel .panel-who svg{width:70px;height:70px}.ed-panel .speech{display:none}
.ed-fields .row{margin:4px 0}
.cast-pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.comp.mini{display:flex;flex-direction:column;align-items:center;gap:2px;background:#1b2b40;color:var(--ink);border:2px solid #354a64;border-radius:14px;padding:6px 8px;min-width:74px}.comp.mini svg{width:44px;height:44px}
/* grown-up loop */
.overlay{position:fixed;inset:0;z-index:30;background:#060d1dcc;display:grid;place-items:center;padding:16px}
.share-card{width:min(520px,100%);margin:0;border:2px solid var(--mint)}.share-card textarea{width:100%;font-size:13px}
.input{width:100%;padding:12px;background:#101b2b;color:#fff;border:1px solid #465a73;border-radius:11px;font:inherit}
textarea.input{resize:vertical}
.missions{list-style:none;padding:0;display:grid;gap:10px}.missions .card{margin:0}
.mission-hw.new,.mission-note.new{border:2px solid var(--pink);box-shadow:0 0 0 4px #ff9ecf22}
.ok-msg{color:var(--mint)!important;font-weight:800}
.p-home .stats article{text-align:center}
.teach h4{margin:14px 0 6px}
.humic-chat{margin-top:16px;border-top:2px dashed var(--line);padding-top:10px}
.chat{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.chat .msg{max-width:88%;padding:10px 14px;border-radius:16px;line-height:1.55}.chat .msg b{display:block;font-size:.75em;color:var(--mint)}
.chat .msg.ai{background:#22354d;border:1px solid #3d5675;align-self:flex-start;border-bottom-left-radius:4px}
.chat .msg.me{background:#1f4a3d;align-self:flex-end;border-bottom-right-radius:4px}
.builder .ar-topics .chip{min-height:40px;padding:6px 12px}
.builder .row .input{flex:1 1 160px}
.tbl{width:100%;border-collapse:collapse;margin:8px 0;font-size:.92em}.tbl th,.tbl td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.tbl thead th{color:var(--muted);font-size:.85em}
details.card summary{cursor:pointer;min-height:40px}
/* mobile app feel: bottom tab bar */
@media(max-width:680px){
  body:not([data-mode="quest"]){padding-bottom:84px}
  nav#mainnav{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;max-width:none;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#0d1726f2;border-top:1px solid var(--line);backdrop-filter:blur(8px);display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
  nav#mainnav button{flex-direction:column;display:flex;align-items:center;gap:2px;font-size:10.5px;padding:6px 2px;min-height:54px;white-space:normal;line-height:1.1}
  nav#mainnav button span{font-size:22px}
  .zone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-canvas{height:52vh;min-height:280px}
  .steps-row{grid-template-columns:1fr}
  .hub,.hub-grid{grid-template-columns:1fr 1fr}
  .page-grid{grid-template-columns:1fr}
  .ed-panel{grid-template-columns:90px 1fr}
  .topic-hero svg,.arena-hero svg,.sv-hero svg{width:72px;height:72px}
  .tdot{width:58px;height:58px;font-size:26px}
}
@media print{
  body{background:#fff!important;color:#000;padding:0!important}
  header,nav,footer,#heroSlot,.noprint,#toast,.skip,.howto{display:none!important}
  .comic-page{max-width:none}.page-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .panel{break-inside:avoid;box-shadow:none;min-height:230px}
  .comic-title{color:#000}
}
@media(prefers-reduced-motion:reduce){.fighter.hit svg{animation:none}}
.w-prompt[hidden],[hidden]{display:none!important}
body[data-mode="quest"] nav#mainnav{display:none!important}
body[data-mode="quest"]{padding-bottom:0!important}
.bubble:first-letter,.tutor.bubble:first-letter{font-size:inherit}
.hub .btn,.hub-grid .btn{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:center;justify-items:start;padding:12px}
.hub .btn .hi,.hub-grid .btn .hi{grid-row:span 1}.hub .btn small,.hub-grid .btn small{grid-column:1/-1;font-size:.82em;line-height:1.3}
.battle{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.fighter{min-width:0}
.hp{position:relative;height:20px;max-width:140px}.hp span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:900;color:#0d1726}
.guide-card .mv{display:inline-block;background:var(--mint);color:#132b3d;border-radius:8px;padding:0 8px;margin-right:6px;font-size:.8em}
.cast-pick{align-items:flex-start}.cast-pick .comp.mini{min-height:0!important;height:auto!important;aspect-ratio:auto!important}.cast-pick .comp.mini svg{width:44px!important;height:44px!important}
.ed-panel{align-items:start}.ed-panel .panel{height:150px;min-height:150px}

/* =====================================================================================
   WatEE v2.1 KID THEME — bright, chunky, friendly (Baloo 2, OFL). Overrides everything above.
   ===================================================================================== */
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/baloo-2-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/baloo-2-devanagari-500-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/baloo-2-devanagari-700-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/baloo-2-devanagari-800-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
:root{--ink:#23194a;--ink2:#4c4570;--muted:#5d5683;--bg:#fff9ef;--card:#ffffff;--line:#e6defa;--line2:#d5c9f5;--sun:#ffc531;--sun2:#e09a00;--mint:#3fd6a0;--mint2:#1f9f73;--pink:#ff7eb6;--sky:#58b6ff;--grape:#8b6cf6;--grass:#7bd64b;--orange:#ff9f43;
  --ok-bg:#ddfbe9;--ok-line:#33c47b;--nudge-bg:#fff2c9;--nudge-line:#f0b429;--nudge-ink:#5a3d00;--hint-bg:#e3f1ff;--hint-line:#58b6ff;--chunk:0 5px 0 var(--line2);--bevel:none;color-scheme:light}
html,body{color:var(--ink)}
body{font-family:'Baloo 2',ui-rounded,'Nunito','Segoe UI',system-ui,sans-serif;background:linear-gradient(180deg,#c9ecff 0,#e8f6ff 220px,#fff9ef 520px) fixed;color:var(--ink);font-weight:500;letter-spacing:.1px}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.2px;line-height:1.15;font-weight:800}
a{color:#4b2fc9}
::selection{background:#ffe08a}
:focus-visible{outline:4px solid #8b6cf6!important;outline-offset:2px}
/* header */
body>header{max-width:1100px;margin:10px auto 0;padding:8px 10px 8px 12px;background:#fff;border-radius:22px;box-shadow:0 4px 0 var(--line2);gap:10px}
header b{font-size:22px;font-weight:800;color:var(--ink)}header small{color:var(--muted);font-size:12px}
header #status{color:var(--mint2);font-weight:700;font-size:12px}
#profileBtn,#voiceBtn,#installBtn{min-width:48px;min-height:48px;border-radius:16px;background:#f1ecff;color:var(--ink);font-size:22px;padding:0;box-shadow:0 3px 0 var(--line2)}
#voiceBtn[aria-pressed="false"]{background:#ffe3e3}
.logo-img{border-radius:14px}
footer{color:var(--muted)}footer a{color:var(--muted)}
/* cards + text */
.card,.costrip,.feedback,.awe-tile,.friend,.region-btn,.howto,.ar-card,.panel-q,.share-card,.ed-panel,.steps-row li,.rm-list li,.missions .card{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line)!important;box-shadow:var(--chunk)!important;border-radius:24px}
.card p,.card li,.costrip ul,.roles ul,.label,.field,.l2,.form label,.card label,.zone-btn small,.subj small,.tlab small,.w-who small,.hub .btn small,.hub-grid .btn small,.pmode small,.choice small,.comp small,.friend small,.awe-tile small,.region-text small,.ctx-chip,.small,.grid small{color:var(--ink2)!important}
.view h2,.card h2,.card h3{color:var(--ink)}
.small{font-size:.9em}
.warn{color:#9a3412!important;background:#fff1e6;border-radius:14px;padding:8px 12px}
.ok-msg{color:#13734f!important}
/* buttons */
button{font-weight:800}
.btn{border-radius:18px;font-weight:800;letter-spacing:.2px;transition:transform .08s}
.btn:active{transform:translateY(3px)}
.btn.primary,.primary{background:var(--sun)!important;color:var(--ink)!important;box-shadow:0 5px 0 var(--sun2)!important;border:0!important}
.btn.secondary,.secondary{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line2)!important;box-shadow:0 4px 0 var(--line2)!important}
.btn.ghost{background:#fff;color:var(--ink);border:3px solid var(--line2)}
.btn.primary.small{color:var(--ink)!important}.btn.secondary.small{color:var(--ink)!important}
.btn.round{border-radius:16px}
.chip,.tab,.swatch,.comp,.choice,.subj,.pen{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line)!important;box-shadow:0 3px 0 var(--line2)}
.chip.on,.tab.on,.swatch.on,.comp.on,.pen.on,.subj.on,.choice.on{background:#efe9ff!important;color:var(--ink)!important;border-color:var(--grape)!important}
.input,input,select,textarea,.form select,dialog input,dialog select{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line2)!important;border-radius:16px!important}
.tutor,.bubble{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line)!important;border-radius:22px!important}
.bubble .hm{color:#6a3fd8!important}.bubble .l3{color:var(--ink2)!important}
.bubble.ok{background:var(--ok-bg)!important;border-color:var(--ok-line)!important}.bubble.nudge{background:var(--nudge-bg)!important;border-color:var(--nudge-line)!important;color:var(--nudge-ink)!important}.bubble.hint{background:var(--hint-bg)!important;border-color:var(--hint-line)!important}
.tabs{gap:8px;flex-wrap:wrap}
.tbl th,.tbl td{border-bottom:2px solid var(--line)}.tbl thead th{color:var(--muted)}
.overlay{background:#23194acc}
#toast{background:var(--ink);color:#fff;font-size:15px;border-radius:16px}
/* bottom tab bar (all sizes) */
nav#mainnav{display:flex;gap:6px;justify-content:center;background:#fff;border-radius:22px;padding:6px;box-shadow:0 4px 0 var(--line2);max-width:760px}
nav#mainnav button{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--ink2);background:transparent;border:0;border-radius:16px;font-size:13px;min-height:58px;padding:4px 2px}
nav#mainnav button span{font-size:26px;line-height:1.1}
nav#mainnav button.selected{background:#fff3c4;color:var(--ink);border:0;box-shadow:inset 0 0 0 3px var(--sun)}
@media(max-width:680px){nav#mainnav{position:fixed;left:8px;right:8px;bottom:8px;margin:0;border-radius:24px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));grid-template-columns:none;box-shadow:0 6px 24px #23194a33;display:flex}
  nav#mainnav button{font-size:12px;min-height:58px}body:not([data-mode="quest"]){padding-bottom:96px}
  body>header{margin:8px 8px 0;border-radius:20px}header small{display:none}header #status{display:none}}
/* page heads with Watch-how */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px}
.page-head h1,.page-head h2{margin:0;font-size:clamp(26px,6vw,34px)}
.watch{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:6px 14px 6px 8px;border-radius:999px;background:#ff5d8f!important;color:#fff!important;font-weight:800;border:0;box-shadow:0 4px 0 #c9346a;font-size:15px;white-space:nowrap}
.watch i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#c9346a;font-size:15px}
.say-btn{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;border-radius:50%;background:#efe9ff;color:var(--ink);border:0;font-size:20px;flex:none;box-shadow:0 3px 0 var(--line2);padding:0}
.say-btn.on{background:var(--sun);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
/* world (kept — kids loved it), lighter HUD */
.w-stats span{background:#fff;border:3px solid var(--line);color:var(--ink);box-shadow:0 3px 0 var(--line2)}
.zone-btn{background:#fff!important;color:var(--ink)!important;border:3px solid var(--zc)!important;box-shadow:0 5px 0 var(--zc)!important}
.zone-btn small{color:var(--ink2)!important}
.mission{background:#fff7d6!important;border-color:var(--sun)!important}.inbox-card{background:#ffe8f2!important;border-color:var(--pink)!important}
.w-prompt{background:#fff;color:var(--ink);border:3px solid var(--sun)}
.w-palette{background:#ffffffdd}
/* quiz */
.qhead .mode-chip{color:var(--ink);background:#fff;border-radius:999px;padding:6px 14px;border:3px solid var(--line)}
.dots i{background:#e6defa}.dots i.past{background:var(--mint)}.dots i.now{background:var(--sun)}
.qpic{background:#fff!important;border:3px solid var(--line)!important;box-shadow:var(--chunk)}
.choice.opt{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line2)!important;box-shadow:0 6px 0 var(--line2)!important;font-size:1.6em;min-height:82px}
.choice.opt:hover{border-color:var(--grape)!important}
.choice.opt.ok{background:#c9f7de!important;border-color:var(--ok-line)!important;box-shadow:0 6px 0 var(--ok-line)!important}
.choice.opt.gentle{background:#fff2c9!important;border-color:var(--nudge-line)!important}
.two>div{background:#f6f2ff}.grp{border-color:var(--grape)}.picto th{color:var(--ink)}.passage{background:#fffbe8;border:3px solid #f6e7a6}
.quiz-end .big-text{color:#b45309}
.qsvg text{fill:#23194a}
/* misc legacy */
.stage,.basket,.dbasket,.tbasket,.plate,.fruitgrid button,.tok,.seq .tokw{background-color:#fff;color:var(--ink);border-color:var(--line2)}
.costrip .turn,.stars-earned{color:#b45309}
.story-text{color:var(--ink)!important}
.hero{background:linear-gradient(135deg,#fff,#f1ecff)!important;border:3px solid var(--line)!important;color:var(--ink)}.hero p{color:var(--ink2)}.hero small{color:#6a3fd8}
.ga-top h2{color:var(--ink)}
.sync-chip{color:var(--ink2)}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.pop{animation:pop .35s ease-out}
@keyframes bob{50%{transform:translateY(-6px)}}
.bob{animation:bob 2.4s ease-in-out infinite}
html[data-motion="reduce"] .confetti{display:none}
/* sheets (voice, picker) */
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:end center;padding:12px}
@media(min-width:681px){.overlay{place-items:center}}
.sheet{width:min(560px,100%);max-height:92vh;overflow:auto;margin:0!important;border-radius:28px!important;animation:pop .3s ease-out}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.sheet-head h2{margin:0;font-size:26px}
.vo-who{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vo-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:20px;padding:12px 8px;box-shadow:0 4px 0 var(--line2)}
.vo-card .vo-face{font-size:40px}.vo-card small{color:var(--ink2);font-weight:500;font-size:.82em;line-height:1.25}
.vo-card.on{border-color:var(--grape);background:#f1ecff}
.vo-fun,.pk-row{display:flex;flex-wrap:wrap;gap:8px}
.vo-chip,.pk-chip{display:inline-flex;align-items:center;gap:6px;min-height:50px;padding:6px 14px;background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:999px;box-shadow:0 3px 0 var(--line2);font-size:16px}
.vo-chip span,.pk-chip span{font-size:24px}
.vo-chip.on,.pk-chip.on{border-color:var(--grape);background:#f1ecff}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.pk-chip.big{justify-content:center;border-radius:18px;min-height:56px}
.big-tog{font-size:18px}.big-tog input{width:28px;height:28px}
/* demo ("Watch how") */
.demo{position:fixed;inset:0;z-index:50}
.demo-spot{position:fixed;border-radius:22px;box-shadow:0 0 0 9999px #23194ab3,0 0 0 6px #ffc531 inset;transition:all .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.demo-finger{position:fixed;font-size:54px;transform:translate(-20%,-10%);transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 4px 6px #0006);pointer-events:none}
.demo-finger.tap{animation:tapme 1s ease-in-out infinite}
@keyframes tapme{0%,100%{transform:translate(-20%,-10%) scale(1)}50%{transform:translate(-20%,-2%) scale(.86)}}
.demo-cap{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));background:#fff;border-radius:26px;padding:14px 14px 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;box-shadow:0 10px 30px #0005;border:4px solid var(--sun)}
.demo-cap.top{top:16px;bottom:auto}
.demo-face{font-size:44px;grid-row:span 2;animation:bob 2s ease-in-out infinite}
.demo-cap p{margin:0;font-size:20px;line-height:1.3;font-weight:700;color:var(--ink)}
.demo-ctl{display:flex;align-items:center;gap:8px;justify-content:flex-end}.demo-ctl .dots{margin-right:auto}
/* Learn (v2.1) */
.ctx-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;color:var(--ink);border:3px solid var(--line);border-radius:22px;padding:10px 14px;box-shadow:0 5px 0 var(--line2);margin:4px 0 12px}
.cp-flag{font-size:34px}.cp-txt{flex:1}.cp-txt b{display:block;font-size:20px;line-height:1.1}.cp-txt small{color:var(--ink2);font-weight:600}
.cp-edit{background:#f1ecff;border-radius:999px;padding:6px 12px;font-size:14px;white-space:nowrap}
.inbox-strip,.classic-strip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border-radius:20px;padding:12px 14px;margin:6px 0 12px;font-size:16px;border:3px solid var(--pink);background:#ffe8f2;color:var(--ink);box-shadow:0 4px 0 #f5b3cf}
.inbox-strip b{flex:1}.classic-strip{border-color:var(--line);background:#fff;box-shadow:0 4px 0 var(--line2);flex-wrap:wrap}.classic-strip small{flex-basis:100%;color:var(--ink2);font-weight:500}
.subj-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;overflow:visible;padding:2px 0 8px}
.subj{display:flex;flex-direction:column;align-items:flex-start;gap:0;border-radius:22px!important;padding:10px 14px!important;min-height:88px;box-shadow:0 5px 0 var(--line2)!important}
.subj .sj-ico{font-size:30px;line-height:1.1}.subj b{font-size:19px}.subj small{font-size:13px}
.subj.sj-MATH{background:#fff1df!important}.subj.sj-ENG{background:#e3f1ff!important}.subj.sj-SCI{background:#e2f9e8!important}.subj.sj-HIN{background:#ffe8f2!important}
.subj.on{border-color:var(--ink)!important;box-shadow:0 5px 0 var(--ink)!important;transform:translateY(-2px)}
.subj-tabs.mini .subj{min-height:64px;flex-direction:row;align-items:center;gap:8px}
.list-head{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 6px}.list-head h2{margin:0;font-size:26px}
.pill-count{background:#fff;border:3px solid var(--line);border-radius:999px;padding:2px 12px;font-weight:700;font-size:14px}
.topic-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.topic-card{background:#fff;border:3px solid var(--line);border-radius:24px;box-shadow:0 5px 0 var(--line2);padding:8px 10px 10px;display:grid;gap:8px}
.tc-main{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:var(--ink);text-align:left;padding:4px;border-radius:16px}
.tc-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f1ecff;font-weight:800;font-size:15px}
.tc-ico{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff7d6;font-size:32px;border:3px solid #ffe7a0}
.tc-txt b{display:block;font-size:19px;line-height:1.15}.tc-txt small{display:flex;gap:6px;align-items:center;color:var(--ink2)!important;font-size:14px}
.stars{color:#f5a300;letter-spacing:1px;font-size:16px}.stars i{font-style:normal;color:#dcd5ef}
.tc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tc-actions .btn{min-height:52px;font-size:16px}
.s-STRONG .tc-ico{background:#fff1c2;border-color:var(--sun)}.s-GROWING .tc-ico{background:#e2f9e8;border-color:#9be3b4}.s-REVISIT .tc-ico{background:#e3f1ff;border-color:#a9d4ff}
/* topic page */
.topic .page-head h1{flex:1;font-size:clamp(22px,5.5vw,30px)}
.topic-hero{display:flex;gap:12px;align-items:flex-start}.topic-hero .bob svg{width:110px;height:110px}
.topic-hero .bubble{flex:1;margin:0}.topic-hero .bubble b{font-size:19px}.bubble .say-btn{align-self:flex-end;margin-top:4px}
.m-chip{background:#fff;border:3px solid var(--line);color:var(--ink)}
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.b3{flex-direction:column;min-height:150px;border-radius:26px!important;border:0!important;color:var(--ink)!important;padding:12px 8px;gap:2px;text-align:center}
.b3 .b3-ico{font-size:46px;line-height:1.1}.b3 b{font-size:20px}.b3 small{font-weight:500;font-size:13px;color:var(--ink2);line-height:1.2}
.b3-play{background:#ffe08a!important;box-shadow:0 7px 0 #e0a800!important}.b3-notes{background:#d8ecff!important;box-shadow:0 7px 0 #8ec5ff!important}.b3-arena{background:#ffd6e7!important;box-shadow:0 7px 0 #f59bc1!important}
.team-btn{width:100%}
@media(max-width:420px){.big3{grid-template-columns:1fr}.b3{flex-direction:row;min-height:84px;justify-content:flex-start;gap:12px;text-align:left}.b3 .b3-ico{font-size:40px}.b3 b{display:block}}
.teachme{background:#fffbe8!important;border-color:#f6e7a6!important}
/* quiz */
.bubble-row .bob svg{width:70px;height:70px}
.quiz .bubble b{font-size:22px;line-height:1.25}
.quiz .bubble .say-btn{position:absolute;right:10px;bottom:10px}
.quiz .bubble{padding-right:64px!important;min-height:70px}
.quiz-end .bob svg{width:130px;height:130px}
.pill{background:#fff;border:3px solid var(--sun);color:var(--ink)}
/* comic notes */
.notes .page-head h1{flex:1;font-size:clamp(20px,5vw,28px)}
.nt-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;padding:8px 2px 10px;background:linear-gradient(#fff9ef 80%,#fff9ef00);scrollbar-width:none}
.nt-bar .btn{flex:none}.nt-bar .btn.primary{min-width:150px}
@media(max-width:680px){.nt-bar{position:static}.nt-bar .btn.primary{flex:1 1 100%}}
.notes-strip{display:grid;gap:16px;max-width:680px;margin:0 auto}
.np-tag{align-self:flex-start;background:#23194a;color:#fff;font-weight:800;border-radius:999px;padding:2px 12px;font-size:14px}
.np .qpic{margin:6px 0}
.np-ans{background:#c9f7de;border:3px solid var(--ok-line);border-radius:16px;padding:6px 12px;font-weight:800;font-size:18px;color:var(--ink);margin:0}
.np-hint{background:#fff;border-radius:14px;padding:6px 12px;margin:0;color:var(--ink)}
.np .panel-q{background:#fff!important;margin:4px 0 0}
.remember{max-width:680px;margin:16px auto;background:#fff7a8;border:3px dashed #e0b400;border-radius:18px;padding:12px 16px;transform:rotate(-1deg);box-shadow:0 6px 0 #e9d76a}
.remember p{margin:4px 0 0;color:var(--ink);font-size:18px}
.print-only{display:none}
/* comics shelf */
.cover{position:relative}.cv-band{align-self:stretch;background:#23194a;color:#fff;border-radius:8px;font-size:12px;font-weight:800;padding:2px 8px;text-align:center}
.sv-hero{align-items:flex-start}.sv-hero .bubble{flex:1;margin:0}
#voiceBtn{margin-left:auto}
.emj{list-style:none;padding:0;margin:0}
.sheet{text-align:left!important}.sheet .label{text-align:left}
.pk-grid{width:100%}
.w-watch{margin:-4px 0 8px}
.w-stat{background:#fff;border:3px solid var(--line);color:var(--ink);box-shadow:0 3px 0 var(--line2);border-radius:12px;padding:6px 12px;font-weight:850;min-height:44px}
.overlay .sheet{max-width:560px;display:block;align-items:stretch}.overlay .sheet>*{margin-top:8px}
/* legacy screens → light */
.awe button,.bands li,.beats i,.close,.home-act,.levelup,.lyrics li,.mapping li,.mode-chip,.newfriend,.pile,.pol,.rankline,.take,.target .big,.tok,.tok.pick,.sync-chip,.ctx-chip,.guide .answer,.region-btn,.stage,.stage.transfer,.basket,.dbasket,.fruitgrid button,.tdot,dialog,.home-act{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
.awe button{border:3px solid var(--line)!important;box-shadow:0 3px 0 var(--line2);border-radius:16px}
.stage,.basket,.dbasket{border:3px dashed var(--line2)!important}
.fruit.on,.repdots i.on{background:#ffe08a!important}
.repdots i{background:#e6defa}
.chat .msg.ai{background:#f1ecff!important;color:var(--ink)!important;border:2px solid var(--line)}
.chat .msg.me{background:#ddfbe9!important;color:var(--ink)!important}
.chat .msg b{color:#6a3fd8!important}
.hold-bar i{background:var(--sun)!important}
.sync-chip{border:2px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;display:inline-block}
.levelup,.rankline,.newfriend{border:3px solid var(--line)}
dialog{border:3px solid var(--line)!important}
/* grown-up tabs: four big, the rest small */
.ga .tabs .tab.tab-more{min-height:40px!important;padding:4px 12px!important;font-size:14px;box-shadow:none!important;border-width:2px!important;color:var(--ink2)!important}
.ga-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ga-top h2{flex:1 1 100%;margin:0}
/* contrast fixes (axe) */
.watch{background:#c2185b!important;box-shadow:0 4px 0 #880e4f}.watch i{color:#c2185b}
header #status{color:#0f6b4b!important}
.btn.tile{background:#fff!important;color:var(--ink)!important;border:3px solid var(--line)!important}
.note{background:#fff7d6!important;color:var(--ink)!important}
summary,.howto summary{color:var(--ink)!important}
/* ===== v2.2 GameVerse ===== */
.gv-h{margin:18px 2px 8px;font-size:22px}
.gv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gv-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-height:136px;padding:14px;border-radius:26px;border:0;color:var(--ink);position:relative;overflow:hidden}
.gv-card .gv-emo{font-size:46px;line-height:1.1}.gv-card b{font-size:20px}.gv-card small{font-weight:500;color:var(--ink2);font-size:13px;line-height:1.25}
.gv-card:active{transform:translateY(4px)}
.gv-bubble{background:#d8f4ff;box-shadow:0 7px 0 #7cc9ef}.gv-arena{background:#ffd6e7;box-shadow:0 7px 0 #f59bc1}.gv-build{background:#e2f9e8;box-shadow:0 7px 0 #8fdca9}.gv-memory{background:#efe6ff;box-shadow:0 7px 0 #b9a2f5}
.gv-race{background:#fff1c2;box-shadow:0 7px 0 #f0c64a}.gv-team{background:#ffe5d0;box-shadow:0 7px 0 #f5b07c}.gv-comic{background:#e3f1ff;box-shadow:0 7px 0 #8ec5ff}.gv-arena2{background:#f0ffd8;box-shadow:0 7px 0 #b7e07a}
/* Bubble Pop */
.bp-score{background:#fff;border:3px solid var(--sun);border-radius:999px;padding:2px 10px;font-weight:800}
.bp-pic{min-height:0}
.bp-sky{position:relative;height:min(46vh,360px);margin:10px 0;border-radius:28px;background:linear-gradient(#bfe8ff,#e8f8ff);border:3px solid #a9dcf7;overflow:hidden}
.bp-b{position:absolute;width:96px;height:96px;border-radius:50%;border:3px solid #ffffffcc;background:radial-gradient(circle at 30% 28%,#ffffff 0 12%,#c8f1ff 13%,#7fd3ff 70%,#5ab8f0);color:var(--ink);font-size:30px;font-weight:800;box-shadow:0 6px 16px #2a7bb055;animation:floaty 3.2s ease-in-out infinite;display:grid;place-items:center;padding:0}
.bp-b span{max-width:84px;line-height:1.05;font-size:clamp(16px,6vw,30px);overflow-wrap:anywhere}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.bp-b.popped{animation:popout .5s forwards;background:radial-gradient(#fff,#ffe08a)}
@keyframes popout{60%{transform:scale(1.35)}100%{transform:scale(1.15);opacity:.9}}
.bp-b.wobble{animation:wob .5s 2;background:radial-gradient(#fff,#ffd0d0)}
@keyframes wob{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.bp-b.glow{box-shadow:0 0 0 6px var(--sun),0 0 30px var(--sun)}
html[data-motion="reduce"] .bp-b{animation:none}
/* Race to the Castle */
.rc-board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:5px;background:#7bd64b;border:4px solid #4fa834;border-radius:22px;padding:6px;margin:8px 0}
.rc-cell{position:relative;aspect-ratio:1;background:#fff8e1;border-radius:12px;display:grid;place-items:center;font-size:20px;border:2px solid #e9dca8}
.rc-cell.alt{background:#fffdf3}.rc-cell i{position:absolute;left:4px;top:1px;font-style:normal;font-size:10px;color:var(--ink2)}
.rc-tok{position:absolute;font-size:24px;filter:drop-shadow(0 2px 2px #0005);transition:all .4s}.rc-tok.me{left:2px;bottom:0}.rc-tok.me svg{width:28px;height:28px}.rc-tok.p2{right:2px;bottom:0}
.rc-turn{display:flex;align-items:center;gap:8px;justify-content:center;border-radius:999px;padding:8px 14px;font-size:20px;margin:6px 0}
.rc-turn.p0{background:#fff1c2;border:3px solid var(--sun)}.rc-turn.p1{background:#e3f1ff;border:3px solid var(--sky)}
.rc-dice{text-align:center;background:#fff;border:3px solid var(--line);border-radius:24px;padding:12px;margin:8px 0}.rc-dice .die{display:block;font-size:72px;line-height:1}
.rc-win{text-align:center;background:#fff7d6;border:4px solid var(--sun);border-radius:26px;padding:14px;margin:8px 0}.rc-win b{font-size:24px}
/* StoryVerse comic universe */
.sv-continue{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:24px;padding:12px 14px;margin:6px 0 14px;background:linear-gradient(120deg,#8b6cf6,#ff7eb6);color:#fff;box-shadow:0 6px 0 #5b3fc4}
.sv-continue small{display:block;opacity:.95;font-weight:700}.sv-continue b{font-size:20px;line-height:1.15}.sv-cont-txt{flex:1}
.sv-cont-who svg{width:40px;height:40px}.sv-cont-go{font-size:28px}
.cv-ep{background:#fff;color:#5b3fc4;border-radius:999px;padding:2px 10px;font-weight:800;font-size:13px;white-space:nowrap}
.sv-series{background:#fff;border:3px solid var(--line);border-radius:26px;padding:12px;margin:12px 0;box-shadow:0 5px 0 var(--line2)}
.sv-series.sj-MATH{border-color:#ffd3a3}.sv-series.sj-ENG{border-color:#b9dcff}.sv-series.sj-SCI{border-color:#a9e8c0}.sv-series.sj-HIN{border-color:#ffc3dc}
.ss-head{display:flex;gap:10px;align-items:center}.ss-head h2{margin:0;font-size:21px}.ss-head small{color:var(--ink2)}.ss-cast svg{width:52px;height:52px}
.ss-bar{height:10px;background:#efe9ff;border-radius:999px;margin:8px 0;overflow:hidden}.ss-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--sun))}
.ss-row{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory}
.ep{flex:0 0 132px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-height:150px;padding:8px;border-radius:16px;border:3px solid #1b1430;background:linear-gradient(160deg,#fffbe8,#ffe8b8);color:var(--ink);box-shadow:4px 4px 0 #1b1430}
.ep b{font-size:14px;line-height:1.15}.ep svg{width:50px;height:50px}
.ep-n{background:#1b1430;color:#fff;border-radius:999px;padding:0 8px;font-size:12px;font-weight:800}
.ep.done{background:linear-gradient(160deg,#e9fff1,#c9f7de)}.ep.gold{background:linear-gradient(160deg,#fff7cf,#ffe08a)}
.ep.next{box-shadow:4px 4px 0 #1b1430,0 0 0 4px var(--pink);animation:pulse 1.6s infinite}
.ep-badge{position:absolute;top:-8px;right:-8px;font-size:20px}.ep-badge.new{background:var(--pink);color:#23194a;border-radius:999px;padding:0 8px;font-size:12px;font-weight:800;top:-10px}
html[data-motion="reduce"] .ep.next{animation:none}
.stk-head{background:#fff7d6;border:3px solid var(--sun);border-radius:20px;padding:10px 14px;margin:8px 0}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.sticker{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#f3f0fb;border:3px dashed #d5c9f5;font-size:26px}
.sticker.got{background:#fff;border:4px solid #fff;box-shadow:0 0 0 3px var(--mint),0 4px 0 #1f9f73;transform:rotate(-4deg)}.sticker.gold{box-shadow:0 0 0 3px var(--sun),0 4px 0 #e09a00}
.sticker svg{width:46px;height:46px}.sticker i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:20px;background:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;box-shadow:0 2px 4px #0003}
@media(max-width:420px){.gv-card{min-height:120px}.gv-card .gv-emo{font-size:38px}.bp-b{width:84px;height:84px}}
.together-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:24px;padding:14px;margin:10px 0;background:#fff1c2;box-shadow:0 6px 0 #f0c64a;color:var(--ink)}
.together-card>span:first-child{font-size:40px}.together-card b{display:block;font-size:19px}.together-card small{color:var(--ink2);font-weight:500}.together-card>span:last-child{margin-left:auto;font-size:24px}
.bubblepop .mode-chip{flex:0 0 auto}
/* ===== v2.3 setup wizard + reading comfort ===== */
html[data-text="4"]{--fs:21px}html[data-text="5"]{--fs:24px}
body{font-size:var(--fs)}
html[data-dys="on"] body,html[data-dys="on"] button,html[data-dys="on"] input,html[data-dys="on"] select,html[data-dys="on"] textarea{font-family:Verdana,Tahoma,'Segoe UI',system-ui,sans-serif!important;letter-spacing:.05em;word-spacing:.14em;line-height:1.7}
html[data-reading="on"] .bob,html[data-reading="on"] .confetti,html[data-reading="on"] .demo-face{animation:none!important}
html[data-reading="on"] .card,html[data-reading="on"] .topic-card,html[data-reading="on"] .np{box-shadow:none!important}
html[data-reading="on"] p,html[data-reading="on"] .speech span,html[data-reading="on"] .bubble b{line-height:1.75;max-width:62ch}
html[data-contrast="high"]{--ink:#000;--ink2:#111;--muted:#111;--line:#000;--line2:#000}
html[data-contrast="high"] body{background:#fff!important}
.wizard{max-width:640px;margin:0 auto;padding:6px 2px 30px}
.wz-top{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0}.wz-top b{font-size:30px;display:block;line-height:1}.wz-top small{color:var(--ink2)}.wz-logo{border-radius:18px;box-shadow:0 4px 0 var(--line2)}
.wz-dots{display:flex;gap:8px;justify-content:center;margin:10px 0 6px}.wz-dots i{width:34px;height:8px;border-radius:99px;background:#e6defa}.wz-dots i.past{background:var(--mint)}.wz-dots i.now{background:var(--sun)}
.wizard h1{text-align:center;font-size:clamp(26px,6vw,36px);margin:10px 0 12px}
.wz-kids{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#ffe8f2;border:3px solid var(--pink);border-radius:20px;padding:8px 10px 8px 16px;font-weight:800;font-size:1.05em}
.wz-doors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wz-door{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 10px;border-radius:26px;background:#fff;border:4px solid var(--line);box-shadow:0 6px 0 var(--line2);color:var(--ink);min-height:170px}
.wz-door .wz-emo{font-size:52px;line-height:1.1}.wz-door b{font-size:1.25em}.wz-door small{color:var(--ink2);font-weight:500}
.wz-door.on{border-color:var(--grape);background:#f1ecff;box-shadow:0 6px 0 var(--grape)}
.wz-lead{text-align:center;color:var(--ink2)}
.wz-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wz-size{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 4px;border-radius:18px;background:#fff;border:3px solid var(--line);color:var(--ink);font-size:13px;min-height:72px;justify-content:center}
.wz-size span{font-weight:800;line-height:1}.wz-size.s1 span{font-size:16px}.wz-size.s2 span{font-size:20px}.wz-size.s3 span{font-size:24px}.wz-size.s4 span{font-size:28px}.wz-size.s5 span{font-size:32px}
.wz-size.on{background:#1f9f73;color:#fff;border-color:#1f9f73}
.wz-tog{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:3px solid var(--line);border-radius:20px;padding:12px 14px;margin:6px 0;color:var(--ink)}
.wz-tog b{display:block}.wz-tog small{color:var(--ink2);font-weight:500}
.wz-sw{flex:none;width:52px;height:30px;border-radius:99px;background:#d5c9f5;position:relative;transition:.2s}.wz-sw i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.wz-tog.on .wz-sw{background:#1f9f73}.wz-tog.on .wz-sw i{left:25px}
.wz-preview{background:#fff7d6;border:3px dashed #e0b400;border-radius:18px;padding:12px 14px;margin:12px 0;text-align:center}
.wz-voice .vo-who{margin-bottom:6px}
.wz-nav{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:16px;align-items:center}.wz-nav .huge{width:100%}
.wz-skip{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink2);text-decoration:underline;min-height:44px;font-weight:700}
@media(max-width:420px){.wz-sizes{grid-template-columns:repeat(5,1fr);gap:4px}.wz-size{font-size:11px;min-height:64px}.wz-door{min-height:150px}}
.vo-diag p{margin:4px 0;font-weight:700}
/* ===== v2.3 paint tool ===== */
.paint-bar{position:sticky;top:64px;z-index:6;background:#fff;border:3px solid var(--line);border-radius:22px;padding:8px 10px;margin:4px 0 12px;box-shadow:0 5px 0 var(--line2)}
.pt-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pt-tool{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:4px 12px;border-radius:16px;background:#fff;border:3px solid var(--line);color:var(--ink);font-size:15px}.pt-tool span{font-size:22px}
.pt-tool.on{background:#fff3c4;border-color:var(--sun)}
.pt-colors{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.pt-c{width:44px;height:44px;min-height:44px;border-radius:50%;background:var(--pc);border:3px solid #23194a33;padding:0;box-shadow:inset 0 -5px 0 #0002}
.pt-c.on{outline:4px solid #23194a;outline-offset:2px;transform:scale(1.1)}
.pt-help{margin:2px 0 0;font-size:.85em;color:var(--ink2)}
/* ===== WatEE branding on every printed page (v2.4): the header and footer repeat on EVERY page =====
   The app sits in a real <table>: on screen everything is plain blocks; in print thead/tfoot repeat on each page. */
.print-brand,.print-brand-foot{display:none}
#pframe,#pframe>tbody,#pframe tr,#pcell{display:block;width:auto;margin:0;padding:0;border:0;border-spacing:0}
#pframe>thead,#pframe>tfoot{display:none}
@media print{
  @page{margin:10mm 9mm}
  html,body{background:#fff!important}
  body{padding:0!important;margin:0!important}
  #pframe{display:table!important;width:100%!important;border-collapse:collapse}
  #pframe>thead{display:table-header-group!important}#pframe>tfoot{display:table-footer-group!important}#pframe>tbody{display:table-row-group!important}
  #pframe tr{display:table-row!important}#pframe td{display:table-cell!important;padding:0!important}
  .print-brand,.print-brand-foot{display:block!important}
  .pb-in{padding:0 0 8px;margin:0 0 10px;border-bottom:3px solid #23194a}
  .pb-row{display:flex;align-items:center;gap:10px}
  .pb-row img{border-radius:12px}
  .pb-name b{display:block;font-size:22px;line-height:1.1}.pb-name small{font-size:11.5px}
  .pb-title{margin-left:auto;text-align:right;font-weight:800;font-size:13px;max-width:52%}
  .pb-who{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px;background:#fff7d6;border:2px solid #f0c419;border-radius:10px;padding:4px 10px}
  .pb-who[hidden]{display:none!important}
  .pf-in{display:flex;align-items:center;gap:10px;border-top:2px solid #23194a;margin-top:10px;padding-top:6px;font-size:11px;color:#333}
  .pf-in b{display:block;font-size:11.5px}.pf-in small{font-size:10.5px}
  html[data-printing="outline"] .paint-layer{display:none}
  .say-btn,.watch,.paint-bar,.nt-bar,.qhead,nav,#mainnav,header,footer,.cam-area{display:none!important}
}
/* worksheet */
.worksheet{max-width:760px;margin:0 auto;background:#fff;border:3px solid var(--line);border-radius:24px;padding:16px 20px}
.ws-bar{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.worksheet h1{margin:4px 0}.ws-meta{color:var(--ink2);margin:0 0 8px}
.ws-name{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-weight:700;margin:10px 0}
.ws-note{background:#fff7d6;border-radius:12px;padding:8px 12px}
.ws-qs{padding-left:26px}.ws-qs li{margin:0 0 16px;break-inside:avoid}.ws-q{font-weight:800;font-size:1.1em;margin:0 0 6px}
.ws-pic{border:2px dashed var(--line2);border-radius:14px;padding:8px;display:grid;place-items:center;margin-bottom:6px}
.ws-opts{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:1.1em}.ws-line{border-bottom:2px solid #23194a;height:34px;margin-top:6px}
.ws-foot{font-size:.85em;color:var(--ink2);text-align:center;border-top:2px dashed var(--line);padding-top:8px}
@media print{.worksheet{border:0;padding:0;max-width:none}}
/* ===== v2.3 world: builder bar + treasure tally ===== */
.w-builder{background:#fff7d6;border:3px solid var(--sun);border-radius:20px;padding:10px 14px;margin:10px 0}
.wb-help{margin:2px 0;font-weight:700}.wb-gems{margin:6px 0 0;font-weight:800;color:#13734f}
.wb-empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.w-palette[hidden],.w-builder[hidden]{display:none!important}
.w-treasure{background:#fff;border:3px solid var(--line);border-radius:24px;padding:12px 14px;margin:14px 0;box-shadow:0 5px 0 var(--line2)}
.w-treasure h3{margin:0 0 8px}
.tr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tr-cell{display:flex;flex-direction:column;align-items:center;background:#f6f2ff;border-radius:16px;padding:8px 4px;text-align:center}
.tr-cell span{font-size:26px}.tr-cell b{font-size:24px;line-height:1.1}.tr-cell small{font-size:12px;color:var(--ink2);font-weight:600}
.tr-how{margin-top:8px}.tr-how summary{font-weight:800;min-height:44px;display:flex;align-items:center}.tr-how ul{padding-left:4px;list-style:none;margin:6px 0}.tr-how li{margin:4px 0}
/* ===== v2.3 AI helper: three doors (StudyVise pattern) ===== */
.ai-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0}
.ai-door{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:16px;border-radius:24px;background:#fff;border:3px solid var(--line);box-shadow:0 5px 0 var(--line2);color:var(--ink);position:relative}
.ai-door.free{border-color:#1f9f73;box-shadow:0 5px 0 #1f9f73;background:#ecfff5}
.ai-door.off{opacity:.75;background:#f6f6f8}
.ai-emo{font-size:40px}.ai-door b{font-size:1.15em}.ai-door small{color:var(--ink2);font-weight:500}
.ai-go{margin-top:auto;font-weight:800;color:#13734f}.ai-badge{background:#23194a;color:#fff;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:800}
.ai-deal{border-collapse:collapse;width:100%;font-size:.9em}.ai-deal th{text-align:left;font-weight:600;color:var(--ink2);padding:2px 8px 2px 0}.ai-deal td{font-weight:800;padding:2px 0}
.ai-steps{list-style:none;padding:0;display:grid;gap:8px}.ai-steps li{display:flex;gap:10px;align-items:flex-start;background:#f6f2ff;border-radius:16px;padding:10px 12px}
.ai-steps b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grape);color:#fff}
.ai-video{position:relative;width:100%;max-width:420px;aspect-ratio:16/9;margin:8px 0;border-radius:18px;overflow:hidden;background:#000}
@media(max-width:680px){.ai-video{aspect-ratio:9/16;max-width:320px}}
.ai-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ===== v2.3 responsive: web (desktop) layout with a side rail; tablet keeps the top bar; phone keeps the bottom bar ===== */
@media(min-width:1024px){
  body:not([data-mode="quest"]){padding-left:128px}
  nav#mainnav{position:fixed;left:12px;top:96px;bottom:auto;width:108px;flex-direction:column;margin:0;padding:8px;gap:6px;max-width:none;border-radius:26px;z-index:15}
  nav#mainnav button{flex:none;min-height:84px;font-size:13px;border-radius:20px}
  nav#mainnav button span{font-size:32px}
  body>header,main,footer,#heroSlot{max-width:1240px}
  main#app{padding:16px 28px}
  .topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .covers{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .w-canvas{height:min(68vh,620px)}
  .subj-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ga .teach .topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga .grid.stats{grid-template-columns:repeat(4,1fr)}
  .builder,.teach{max-width:none}
  .quiz,.reader,.bubblepop{max-width:820px;margin:0 auto}
  .notes-strip,.remember{max-width:780px}
  .sheet{width:min(640px,100%)}
}
@media(min-width:1400px){.topic-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:681px) and (max-width:1023px){.topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}.gv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-mode="quest"]{padding-left:0!important}

h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}


/* ===== v2.4 comic panels: picture box (fixed 5:3 shape, characters never cropped) + speech bubble below =====
   The same box is used on screen, in colouring mode and in print, so the colouring prints exactly as painted. */
.cpanel{position:relative;margin:0;background:#fff;border:5px solid #1b1430;border-radius:18px;box-shadow:6px 6px 0 #1b1430;padding:10px;display:flex;flex-direction:column;gap:8px;break-inside:avoid;page-break-inside:avoid;transition:transform .25s}
.cpanel .np-tag{position:absolute;top:16px;left:16px;z-index:3}
.cpanel>.say-btn{position:absolute;top:14px;right:14px;z-index:3}
.cpanel.reading{transform:scale(1.02);box-shadow:0 0 0 6px var(--sun),8px 8px 0 #1b1430}
.cp-art{position:relative;aspect-ratio:5/3;width:100%;border:3px solid #1b1430;border-radius:12px;overflow:hidden}
.cp-who{position:absolute;bottom:4%;left:50%;height:78%;transform:translateX(-50%);z-index:0}
.cp-who svg{display:block;height:100%;width:auto}
.cp-who.a2{left:30%}.cp-who.b2{left:72%;height:66%}
.cp-who.bob svg{animation:bob 1s ease-in-out infinite}
.cp-say{margin:0;background:#fff;color:#1b1430;border:3px solid #1b1430;border-radius:18px;padding:8px 14px;font-family:"Comic Sans MS","Chalkboard SE",Inter,sans-serif;font-size:1.08em;line-height:1.45}
.cp-say b{display:block;font-size:.72em;text-transform:uppercase;letter-spacing:1px;color:#7a3db8}
.cp-say span{display:block}
.cp-say.reply{margin-left:18%;border-color:#7a3db8}
.notes-strip{display:grid;gap:18px;max-width:680px;margin:0 auto}
@media(min-width:1024px){.notes-strip{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;align-items:start}}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.page-grid .cpanel{box-shadow:4px 4px 0 #1b1430;padding:8px;border-width:4px}.page-grid .cp-say{font-size:.95em}
@media(max-width:520px){.page-grid{grid-template-columns:1fr}}
/* colouring mode: white picture box, characters become outlines (dark pixels stay), dashed bubbles */
.colouring .cp-art{background:#fff!important;cursor:pointer}
.colouring .cp-art svg{filter:none!important}
.colouring .cp-say{border-style:dashed}
.notes.colouring .np-ans,.notes.colouring .remember{background:#fff}
.paint-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.paint-layer.live{pointer-events:auto;touch-action:none;cursor:crosshair}
/* action rows on the comic page / reader: big labelled buttons, top and bottom */
.cp-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:10px 0}
.cp-actions .btn{min-height:52px;font-size:1.05em}
.cp-actions.bottom{margin-top:18px}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .notes-strip,.page-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;max-width:none!important}
  .cpanel{box-shadow:none!important;transform:none!important;padding:6px!important;border-width:3px!important}
  .cp-say{font-size:12.5px!important;line-height:1.35!important;padding:5px 9px!important}
  .cpanel .np-tag{top:10px;left:10px;font-size:11px}
  .cpanel .panel-q,.cpanel .say-btn,.paint-bar,.cp-actions,.nt-bar,.notes .page-head{display:none!important}
  .np-ans,.np-hint{font-size:12.5px!important}
  .comic-page .comic-title,.notes .comic-title{margin:2px 0 8px!important;font-size:22px!important}
  .remember{transform:none;box-shadow:none;margin:10px 0}
  .print-only{display:block!important}
}
/* ===== v2.4 Magic Mirror camera counting (MoveLoot) ===== */
.cam-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0}
.cam-slot{width:min(100%,460px)}
.cam-box{position:relative;width:100%;aspect-ratio:4/3;background:#1b1430;border:5px solid #1b1430;border-radius:22px;overflow:hidden;box-shadow:0 6px 0 #0003}
.cam-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}
.cam-box .cam-bones{position:absolute;inset:0;width:100%;height:100%}
.cam-live{position:absolute;top:8px;left:8px;background:#fff;color:#b00020;font-weight:800;font-size:13px;border-radius:999px;padding:3px 10px;display:flex;align-items:center;gap:6px}
.cam-live i{width:10px;height:10px;border-radius:50%;background:#e00;animation:camblink 1.2s infinite}
@keyframes camblink{50%{opacity:.3}}
.cam-msg{position:absolute;left:8px;right:8px;bottom:8px;margin:0;background:#fffde8;color:#1b1430;border:3px solid #1b1430;border-radius:14px;padding:6px 10px;font-weight:800;text-align:center}
.cam-box[data-status="ready"] .cam-msg{background:#c9f7de}
.cam-box.pop{animation:campop .45s ease-out}
@keyframes campop{30%{box-shadow:0 0 0 10px #ffd43b}}
.cam-on-btn{min-height:56px;font-size:1.05em;border:3px dashed #7a3db8!important}
.cam-note{text-align:center;margin:8px auto;max-width:520px}
.bigtap.cam-tap{opacity:.85;font-size:1em}
.cam-consent{background:#f4f0ff;border:3px solid #cbbcff;border-radius:18px;padding:10px 14px;margin:8px 0}
.cam-rules{margin:4px 0 0;padding-left:4px;list-style:none}.cam-rules li{margin:2px 0}
@media(prefers-reduced-motion:reduce){.cam-live i,.cam-box.pop{animation:none}}
/* ===== v2.4 teacher "My class & school" + worksheet school line ===== */
.t-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 14px}
.ws-school{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;align-items:baseline;border-bottom:3px solid #23194a;padding-bottom:6px;margin-bottom:6px}
.ws-school b{font-size:1.25em}
@media(max-width:680px){.paint-bar{top:6px;padding:6px 8px}.pt-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pt-tool{min-height:44px;padding:2px 10px;font-size:13px;flex:none}.pt-tools .btn{flex:none}.pt-colors{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;margin:6px 0 0;scrollbar-width:none}.pt-c{flex:none}.pt-help{display:none}}
.colouring .cpanel .np-tag{pointer-events:none;opacity:.85}
.cp-who{aspect-ratio:1/1}.cp-who svg.char,.cp-who svg{width:100%!important;height:100%!important;filter:none}