/* =====================================================================
   Word Lab styles. Built for small hands: big targets (60px+), pictures
   on every button, soft colors, smooth motion. Phone and tablet.
   ===================================================================== */
@font-face{font-family:"Fredoka";font-weight:400;font-display:swap;src:url(../fonts/fredoka-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url(../fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:400;font-display:swap;src:url(../fonts/andika-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:700;font-display:swap;src:url(../fonts/andika-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#f5f2ff; --ink:#1d1838; --soft:#6d688e; --line:#ebe6f6; --card:#fff;
  --violet:#6c4cff; --teal:#10b39d; --coral:#ff6a5c; --sun:#ffb21e; --sky:#2f8bff; --pink:#ff5fa2;
  --r:28px; --shadow:0 1px 0 rgba(30,24,60,.04),0 16px 36px -16px rgba(70,45,160,.28);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;color:var(--ink);font-family:"Fredoka",system-ui,sans-serif;background:var(--bg);-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
body{min-height:100vh;padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 96px);
  background:radial-gradient(700px 420px at 105% -8%,#ffe0ee 0%,transparent 62%),radial-gradient(760px 480px at -15% 4%,#d9f0ff 0%,transparent 58%),radial-gradient(600px 500px at 50% 110%,#ece4ff 0%,transparent 60%),var(--bg);background-attachment:fixed}
.wrap{max-width:820px;margin:0 auto}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none;padding:0}
button:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.screen{animation:enter .35s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.center{text-align:center}
.hint{color:var(--soft);font-size:16px;text-align:center;margin:8px 0 0}
.note{font-size:13px;color:var(--soft);margin:6px 0 0}
.h2{margin:0;font-size:24px;letter-spacing:-.3px}
.sub{margin:22px 4px 10px;font-size:19px}
.panel{background:var(--card);border-radius:var(--r);padding:18px 16px;box-shadow:var(--shadow);margin-top:12px}

/* ---------- buttons ---------- */
.big{display:inline-flex;align-items:center;gap:9px;border-radius:22px;padding:14px 20px 14px 14px;min-height:62px;font-size:19px;font-weight:600;color:#fff;background:var(--violet);box-shadow:0 5px 0 #4a2fd0;transition:transform .08s}
.big .bi{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.22);font-size:21px}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #4a2fd0}
.big.alt{background:#fff;color:var(--ink);box-shadow:0 5px 0 #e3ddf2;border:2px solid var(--line)}
.big.alt .bi{background:#f3effc}
.big.alt:active{box-shadow:0 2px 0 #e3ddf2}
.big.go{background:var(--teal);box-shadow:0 5px 0 #0b8a78}
.big.go:active{box-shadow:0 2px 0 #0b8a78}
.big.soft{background:#efe9ff;color:#4a2fd0;box-shadow:0 5px 0 #d8ccff}
.big.soft .bi{background:#fff}
.big.danger{background:#ff5b5b;box-shadow:0 5px 0 #c63c3c}
.big.xl{font-size:24px;min-height:76px;padding:16px 34px 16px 18px}
.big:disabled{opacity:.4}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 6px}
.ib{width:52px;height:52px;border-radius:17px;background:#fff;font-size:23px;box-shadow:var(--shadow);display:grid;place-items:center;flex:0 0 auto}
.ib.sm{width:40px;height:40px;font-size:18px;border-radius:13px;box-shadow:none;background:#f3effc}
.ib.hint{background:#fff6d8}
.ib.glass,.pill.glass{background:rgba(255,255,255,.25);box-shadow:none;color:#fff;backdrop-filter:blur(6px)}
.small{background:#fff;border:2px solid var(--line);border-radius:14px;padding:9px 13px;font-weight:600;font-size:15px}
.small.danger{color:#d9473b;margin-right:8px}
.pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:9px 13px;font-weight:600;font-size:16px;box-shadow:var(--shadow);white-space:nowrap}
.pill.fire{background:linear-gradient(135deg,#fff3e0,#ffe4ea)}
.starpill.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.25)}}
.flystar{position:fixed;z-index:50;font-size:30px;pointer-events:none}

/* ---------- kid header, tab bar ---------- */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kidchip{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:5px 14px 5px 5px;box-shadow:var(--shadow);font-weight:600;font-size:18px;max-width:46%}
.kidchip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#fff3c4,#ffd6e8);font-size:26px;flex:0 0 auto}
.av.big{width:110px;height:110px;font-size:66px}
.chips{display:flex;align-items:center;gap:6px}
.ib.lock{width:44px;height:44px;font-size:18px;opacity:.75}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:15;display:flex;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:26px;padding:7px;box-shadow:0 14px 34px -10px rgba(60,40,140,.35);width:min(420px,calc(100% - 24px))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:20px;padding:7px 4px;font-size:13px;font-weight:600;color:var(--soft)}
.tabbar button span{font-size:27px;line-height:1}
.tabbar button.on{background:#efe9ff;color:#4a2fd0}

/* ---------- mascot ---------- */
.mascot{display:block;overflow:visible;animation:bob 2.8s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{50%{transform:translateY(-4px)}}
.mascot .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
.mascot .m-talk{opacity:0}
.mascot.talk .m-smile{opacity:0}
.mascot.talk .m-talk{opacity:1;transform-box:fill-box;transform-origin:center;animation:talk .18s ease-in-out infinite alternate}
@keyframes talk{from{transform:scaleY(.35)}to{transform:scaleY(1.1)}}
.mascot .antenna{transform-box:fill-box;transform-origin:50% 100%;animation:wig 3s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
.mascot.cheer{animation:jump .55s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes jump{40%{transform:translateY(-22px) scale(1.04,.96)}}
.mascot.cheer .arm-l{transform:rotate(-40deg);transform-box:fill-box;transform-origin:80% 20%;transition:transform .2s}
.mascot.cheer .arm-r{transform:rotate(40deg);transform-box:fill-box;transform-origin:20% 20%;transition:transform .2s}
.bubble{position:relative;background:#fff;color:var(--ink);border-radius:22px;padding:12px 14px;font-size:17px;font-weight:500;line-height:1.3;box-shadow:var(--shadow);flex:1;min-width:0}
.bubble:before{content:"";position:absolute;left:-9px;top:20px;border:10px solid transparent;border-right-color:#fff;border-left:0}
.bubble.big{font-size:20px;padding:14px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.bubble.sm{font-size:16px}
.bigbuddy{display:flex;align-items:center;gap:12px;margin:14px 0 12px}
.bigbuddy .mwrap{width:132px;flex:0 0 auto}
.bigbuddy.small .mwrap{width:96px}
.bigbuddy.party .mwrap{width:150px}
.buddy{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.buddy .bm,.minibuddy .bm{width:64px;flex:0 0 auto}
.bbtns{display:flex;flex-direction:column;gap:6px}
.bbtns .ib{width:46px;height:46px;font-size:20px}
.minibuddy{display:flex;align-items:center;gap:8px;margin:12px 0 4px}

/* ---------- who's reading ---------- */
.who{text-align:center;padding-top:10px}
.brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px}
.brand .logo{width:46px}
.who h1{font-size:32px;margin:22px 0 18px;letter-spacing:-.4px}
.kids{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.kid{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:30px;padding:18px 22px 14px;box-shadow:var(--shadow);min-width:160px;transition:transform .12s}
.kid:active{transform:scale(.96)}
.kid b{font-size:24px}
.kid .g{font-size:13px;color:var(--soft)}
.onboard .brand{margin-bottom:6px}
label.f{display:block;font-size:14px;color:var(--soft);margin:14px 0 6px}
input.t,textarea.t,select.t{width:100%;font-family:"Andika",system-ui;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fdfcff;color:var(--ink)}
select.t{font-family:"Fredoka"}
textarea.t{min-height:84px;resize:vertical}
.seg{display:inline-flex;background:#f1edf9;border-radius:15px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border-radius:11px;padding:9px 15px;font-weight:600;font-size:15px;color:var(--soft)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.avs{display:flex;flex-wrap:wrap;gap:8px}
.avs button{width:52px;height:52px;border-radius:16px;font-size:30px;background:#f6f3fc;border:3px solid transparent}
.avs button.on{border-color:var(--violet);background:#efe9ff}
.tog{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:15px}
.tog input{width:22px;height:22px}

/* ---------- home ---------- */
.adventure{width:100%;text-align:left;color:#fff;border-radius:30px;padding:16px 18px 14px;position:relative;overflow:hidden;
  background:radial-gradient(380px 220px at 100% 0%,rgba(255,95,162,.8),transparent 70%),linear-gradient(135deg,#2a1c74 0%,#5b3df0 55%,#8a5cff 100%);box-shadow:0 22px 40px -18px rgba(76,46,220,.7);transition:transform .1s}
.adventure:active{transform:scale(.985)}
.adventure:after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-60px;bottom:-110px;background:rgba(255,255,255,.08)}
.adventure .at{display:flex;align-items:center;gap:12px}
.adventure .ai{font-size:40px}
.adventure b{display:block;font-size:24px}
.adventure small{opacity:.85;font-size:14px}
.weekdots{display:flex;gap:6px;margin-top:12px;position:relative;z-index:1}
.wd{flex:1;text-align:center;font-size:12px;opacity:.9}
.wd i{display:grid;place-items:center;margin:0 auto 3px;width:30px;height:30px;border-radius:11px;background:rgba(255,255,255,.15);font-style:normal;font-size:15px}
.wd.on i{background:#fff}
.wd.today i{outline:2px solid rgba(255,255,255,.85)}
.weekcard{width:100%;display:flex;align-items:center;gap:12px;margin-top:12px;background:linear-gradient(135deg,#fff6dc,#ffe7dc);border-radius:24px;padding:12px 16px;text-align:left;box-shadow:var(--shadow);border:2px solid transparent}
.weekcard.here{border-color:#ffb21e}
.weekcard .ai{font-size:34px}.weekcard b{display:block;font-size:19px}.weekcard small{color:#8a5a00}.weekcard .go{margin-left:auto;font-size:24px}
/* world map */
.map{position:relative;margin:0 auto 10px;max-width:560px}
.mappath{position:absolute;inset:0;width:100%;height:100%}
.mappath path{fill:none;stroke:#cfc3ff;stroke-width:6;stroke-dasharray:2 14;stroke-linecap:round}
.wnode{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:150px}
.wnode .orb{position:relative;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2));box-shadow:0 10px 0 rgba(0,0,0,.1),0 18px 30px -10px var(--c2);transition:transform .12s}
.wnode:active .orb{transform:scale(.94)}
.wnode .orb svg{position:absolute;inset:-6px;width:116px;height:116px}
.wnode .trk{fill:none;stroke:rgba(255,255,255,.5);stroke-width:6}
.wnode .prg{fill:none;stroke:#ffd23f;stroke-width:6;stroke-linecap:round}
.wnode .em{font-size:50px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18))}
.wnode b{margin-top:10px;font-size:16px;background:#fff;border-radius:99px;padding:3px 11px;box-shadow:var(--shadow);white-space:nowrap}
.wnode small{font-size:12px;color:var(--soft);margin-top:3px}
.wnode .flag{position:absolute;top:-6px;right:-4px;font-size:22px;background:#fff;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;box-shadow:var(--shadow)}
.wnode .me{position:absolute;bottom:-8px;left:-10px;font-size:26px;background:#fff;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;box-shadow:var(--shadow);animation:bob 1.8s ease-in-out infinite}
.wnode.here .orb{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 10px 0 rgba(0,0,0,.1),0 0 0 10px rgba(255,210,63,.35)}}
.wnode.locked .orb{filter:grayscale(.85) brightness(1.08);opacity:.75}

/* ---------- world page ---------- */
.banner{position:relative;overflow:hidden;color:#fff;border-radius:32px;padding:14px 16px 18px;background:radial-gradient(circle at 20% 0%,var(--c1),var(--c2));box-shadow:0 20px 36px -18px var(--c2)}
.banner h2{margin:6px 0 2px;font-size:30px;text-shadow:0 2px 0 rgba(0,0,0,.12);position:relative}
.banner p{margin:0;opacity:.95;font-size:15px;position:relative}
.scene{position:absolute;left:76px;top:16px;display:flex;gap:6px;font-size:28px;opacity:.95}
.scene span{animation:float 3.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes float{50%{transform:translateY(-8px) rotate(-6deg)}}
.wstats{display:flex;gap:8px;margin-top:10px;position:relative}
.wstats span{background:rgba(255,255,255,.25);border-radius:99px;padding:4px 11px;font-weight:600}
.focus{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.fchip{background:#fff;border-radius:15px;padding:8px 13px;font-family:"Andika";font-weight:700;font-size:21px;box-shadow:var(--shadow);display:inline-flex;gap:6px;align-items:center;min-height:48px}
.fchip small{font-size:18px}
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.gtile{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:26px;padding:16px 8px 14px;box-shadow:var(--shadow);transition:transform .12s;border:1px solid rgba(108,76,255,.06)}
.gtile:active{transform:scale(.96)}
.gtile .ico{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-size:42px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.gtile b{font-size:18px}
.i1{background:linear-gradient(135deg,#ff8a6b,#ff5a7d)} .i2{background:linear-gradient(135deg,#25d0b2,#0f9fb3)}
.i3{background:linear-gradient(135deg,#9a7bff,#5f4bf0)} .i4{background:linear-gradient(135deg,#ffcb45,#ff9a2b)}
.i5{background:linear-gradient(135deg,#4ab0ff,#2f6bff)} .i6{background:linear-gradient(135deg,#ff7ac0,#e04ea6)}
.i7{background:linear-gradient(135deg,#8be08a,#2fb36b)} .i8{background:linear-gradient(135deg,#ffb36b,#ff6a5c)}

/* ---------- game chrome ---------- */
.gtop{display:flex;align-items:center;gap:10px}
.track{position:relative;flex:1;height:14px;margin:0 12px 0 16px;border-radius:99px;background:#e9e3f7}
.track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--sky));transition:width .4s}
.track .runner{position:absolute;top:50%;width:40px;transform:translate(-50%,-58%);transition:left .4s}
.track .runner .mascot{animation:none}
.ptitle{font-size:20px}
.slots{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:18px 0 8px}
.sound{display:flex;gap:4px;padding:6px;border-radius:18px;background:#f4f0ff;border:2px dashed #d8cdff;transition:background .2s,transform .2s}
.sound.silent{background:#f3f3f5;border-color:#dddce4}
.sound.lit{background:#fff1c2;border-color:var(--sun);transform:translateY(-4px)}
.slot{width:50px;height:62px;border-radius:14px;background:#fff;display:grid;place-items:center;font-family:"Andika";font-size:38px;font-weight:700;box-shadow:inset 0 -3px 0 #ebe5f7}
.slot.wide{width:auto;min-width:50px;padding:0 8px}
.slot.cur{outline:3px solid var(--violet);outline-offset:1px;animation:pulse2 1.2s infinite}
@keyframes pulse2{50%{outline-color:#c7b8ff}}
.slot.good{background:#e2fbf5;color:#0b8a73}
.slot.fix{background:#efe9ff;color:#5b3df0}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 4px}
.tile{width:60px;height:64px;border-radius:18px;font-family:"Andika";font-size:34px;font-weight:700;background:#fff;box-shadow:0 5px 0 #e0d9ee;border:2px solid #ece7f6;transition:transform .06s}
.tile:active{transform:translateY(3px);box-shadow:0 2px 0 #e0d9ee}
.tile.used{opacity:.2;pointer-events:none;transform:scale(.9)}
.kb{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:14px}
.kb .tile{width:auto;height:52px;font-size:26px}
.kb .tile.wide{grid-column:span 3;font-family:"Fredoka";font-size:16px}
.kb .tile.mid{grid-column:span 2;font-family:"Fredoka";font-size:16px}
.kb .tile.on{background:#efe9ff;border-color:var(--violet)}
.bigword{font-family:"Andika";font-size:62px;font-weight:700;text-align:center;letter-spacing:2px;margin:10px 0}
.bigword .ok{color:var(--teal)}
.peek{background:#fff6d8;border-radius:20px;padding:4px 0;animation:enter .3s}
.mouthbox{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff7ef,#fff0f5);border-radius:22px;padding:10px;margin-top:10px}
.mouthbox .mouth{width:118px;height:104px;flex:0 0 auto}
.mouthbox .cap{font-size:15px;color:#5a4a6a}
.mouthbox .cap b{font-family:"Andika";font-size:24px;color:var(--ink)}
.mouth .mp{transform-box:fill-box;transform-origin:center;transition:transform .24s cubic-bezier(.3,.7,.3,1),opacity .2s}
.mouth .fx{opacity:0;transition:opacity .2s}
.mouth.nose .nw,.mouth.voice .vw,.mouth.air .aw{opacity:1}
.mouth.nose .nw path{animation:wv .55s ease-in-out infinite alternate}
.mouth.voice .vw path{animation:wv .3s ease-in-out infinite alternate}
.mouth.air .aw circle{animation:puff .7s ease-out infinite}
.mouth.air .aw circle:nth-child(2){animation-delay:.15s}.mouth.air .aw circle:nth-child(3){animation-delay:.3s}
@keyframes wv{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes puff{from{transform:translateX(0);opacity:.9}to{transform:translateX(16px);opacity:0}}
.mouth .aw circle,.mouth .nw path,.mouth .vw path{transform-box:fill-box}
/* studio */
.stage{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(160deg,#fff8f1,#fdf0ff);border-radius:28px;padding:14px}
.stage .mouth{width:min(280px,72vw);height:auto}
.stage .gr{font-family:"Andika";font-size:58px;font-weight:700;line-height:1}
.stage .kw{font-size:22px}
.tipline{font-size:17px;text-align:center;color:#40309e;font-weight:500;max-width:420px}
.fxlegend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fxlegend span{font-size:14px;border-radius:99px;padding:5px 11px;background:#fff;color:var(--soft);border:1px solid var(--line)}
.fxlegend span.on{background:#ffe9f2;color:#c2185b;border-color:#ffc6dc}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px}
.scard{background:#fff;border-radius:20px;padding:10px 4px 8px;text-align:center;box-shadow:var(--shadow);border:2px solid transparent}
.scard b{display:block;font-family:"Andika";font-size:28px;line-height:1.1}
.scard span{font-size:20px}
.scard.on{border-color:var(--violet);background:#f4f0ff}
/* hop */
.nums{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.num{width:66px;height:66px;border-radius:50%;font-size:30px;font-weight:700;background:#fff;border:3px solid #dff4ee;box-shadow:0 4px 0 #cdeee4}
.num.right{background:var(--teal);color:#fff;border-color:var(--teal);animation:bump .5s}
.num.wrong{opacity:.3}
.frog{font-size:58px;display:inline-block}
.frog.jump{animation:hop .45s}
@keyframes hop{50%{transform:translateY(-28px) rotate(-8deg)}}
/* blend */
.bslots .sound{cursor:pointer}
.pics{display:flex;justify-content:center;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.pic{width:104px;height:104px;border-radius:28px;background:#fff;font-size:60px;box-shadow:0 5px 0 #e0d9ee;border:2px solid #ece7f6;transition:transform .1s}
.pic:active{transform:scale(.94)}
.pic.right{background:#e2fbf5;border-color:var(--teal);animation:bump .5s}
.pic.gone{opacity:.25;pointer-events:none}
/* b or d */
.picture{font-size:86px;text-align:center;line-height:1.1;margin-top:4px}
.bd{display:flex;justify-content:center;gap:18px;margin:14px 0}
.bd button{width:112px;height:112px;border-radius:30px;font-family:"Andika";font-size:72px;font-weight:700;background:#fff;box-shadow:0 6px 0 #e0d9ee;border:3px solid #ece7f6}
.bd button.gone{opacity:.3}
.blank{display:inline-block;min-width:44px;border-bottom:5px solid var(--violet)}
.bedtrick{display:flex;align-items:center;gap:12px;background:#f4f0ff;border-radius:18px;padding:12px 14px;margin-top:8px;font-size:15px;color:#40309e}
.bedtrick .hands{display:flex;align-items:center;gap:2px;font-size:26px;font-family:"Andika";font-weight:700;color:var(--violet)}
.bedtrick .hands span{font-size:22px}
/* dictation */
.typed{min-height:76px;background:#fbf9ff;border:2px solid var(--line);border-radius:20px;padding:14px 16px;font-family:"Andika";font-size:30px;line-height:1.35;margin-top:12px;word-break:break-word}
.typed .caret{display:inline-block;width:3px;height:32px;background:var(--violet);vertical-align:-5px;animation:blinkc 1s steps(1) infinite;margin-left:1px}
@keyframes blinkc{50%{opacity:0}}
.wchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.wchip{font-family:"Andika";font-size:22px;font-weight:700;border-radius:14px;padding:6px 12px;background:#e2fbf5;color:#0b8a73}
.wchip.near{background:#efe9ff;color:#5b3df0}
.wchip.miss{background:#f4f2f8;color:#8f8aa8}
.checks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.checks span{font-size:15px;border-radius:99px;padding:5px 12px;background:#fff;border:1px solid var(--line)}
.checks span.yes{background:#fff6d8;border-color:#ffe08a}
/* stories */
.slist{display:grid;gap:12px;margin-top:12px}
.sitem{display:flex;align-items:center;gap:14px;background:#fff;border-radius:24px;padding:12px;text-align:left;box-shadow:var(--shadow)}
.sitem .em{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;font-size:40px;background:linear-gradient(135deg,#eaf6ff,#f3eeff);flex:0 0 auto}
.sitem .st{flex:1}.sitem b{font-size:20px}.sitem .go,.sitem .tick{font-size:28px}
.tabs3{display:flex;gap:8px;margin-top:12px}
.tabs3 button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:18px;padding:8px 4px;font-size:24px;box-shadow:var(--shadow);border:2px solid transparent}
.tabs3 button span{font-size:14px;font-weight:600;color:var(--soft)}
.tabs3 button.on{border-color:var(--violet);background:#f4f0ff}
.storytitle{font-size:23px;font-weight:700;margin:0 0 8px;display:flex;gap:10px;align-items:center}
.storytitle .se{font-size:36px}
.story{font-family:"Andika";font-size:28px;line-height:1.8}
.story .w{border-radius:8px;padding:0 2px;cursor:pointer}
.story .w.hl{background:#ffe7a0}
.story .s.hl{background:#fff4cc;border-radius:8px}
.story .s.done{color:#7c76a0}
.story .w.heard{background:#d8f8ef}
.echo{margin-top:12px;border-radius:22px;padding:6px 12px 12px;background:linear-gradient(135deg,#f4f0ff,#eef8ff)}
.echo .heard,.heard{font-family:"Andika";font-size:17px;color:#5a5480;min-height:22px;margin-top:6px;text-align:center}
.dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dots i{width:10px;height:10px;border-radius:50%;background:#d9d0f3}
.dots i.on{background:var(--teal)}.dots i.cur{background:var(--sun);transform:scale(1.3)}
.mic{width:70px;height:70px;border-radius:50%;background:var(--pink);color:#fff;font-size:30px;box-shadow:0 5px 0 #c2397f}
.mic.live{animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,95,162,.55),0 5px 0 #c2397f}100%{box-shadow:0 0 0 18px rgba(255,95,162,0),0 5px 0 #c2397f}}
.q{margin-top:14px;padding-top:12px;border-top:2px dashed var(--line)}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.q h4{margin:0 0 10px;font-size:21px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:10px;align-items:center;text-align:left;background:#fff;border:2px solid var(--line);border-radius:18px;padding:13px 14px;font-family:"Andika";font-size:20px;font-weight:700;min-height:62px}
.opt .ol{font-size:22px}
.opt.right{background:#e2fbf5;border-color:var(--teal)}
.opt.wrong{opacity:.35}
.retell{display:grid;gap:10px;margin-top:12px}
.rcard{display:flex;align-items:center;gap:12px;border-radius:20px;padding:14px;background:#f6f3fc;border:2px dashed #d9d0f3;text-align:left;font-size:19px;min-height:64px}
.rcard .n{font-size:28px}
.rcard.got{background:#e2fbf5;border:2px solid #9be7d6}

/* ---------- stickers ---------- */
.wtabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.wtabs::-webkit-scrollbar{display:none}
.wtabs button{flex:0 0 auto;width:58px;height:58px;border-radius:18px;background:#fff;font-size:30px;box-shadow:var(--shadow);border:3px solid transparent}
.wtabs button.on{border-color:var(--violet)}
.book{border-radius:30px;padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 35%,#fff),color-mix(in srgb,var(--c2) 25%,#fff));box-shadow:var(--shadow);margin-top:6px}
.book h2{margin:0 0 12px;text-align:center;font-size:24px}
.sgrid8{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stk{aspect-ratio:1;border-radius:22px;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:clamp(38px,10vw,58px)}
.stk span{filter:drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.stk:nth-child(odd) span{transform:rotate(-6deg)}.stk:nth-child(even) span{transform:rotate(5deg)}
.stk.empty{background:rgba(255,255,255,.35);border:3px dashed rgba(255,255,255,.9)}
.stk.empty span{filter:none;opacity:.45;font-size:.7em}
.stk.wiggle{animation:wiggle .5s}
@keyframes wiggle{25%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}
.book .count{text-align:center;margin:12px 0 0;font-weight:600;color:#40309e}

/* ---------- closet ---------- */
.stagebox{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.stagebox .bigm{width:min(220px,56vw)}
.stagebox .bubble{margin-top:6px;width:100%}
.stagebox .bubble:before{display:none}
.ctabs{display:flex;gap:10px;justify-content:center;margin:12px 0 10px}
.ctabs button{width:64px;height:58px;border-radius:18px;background:#fff;font-size:30px;box-shadow:var(--shadow);border:3px solid transparent}
.ctabs button.on{border-color:var(--violet);background:#f4f0ff}
.items{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.item{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:20px;padding:8px 4px 6px;box-shadow:var(--shadow);border:3px solid transparent}
.item .prev{width:100%;max-width:84px}
.item .prev .mascot{animation:none}
.item .swatch{width:58px;height:58px;border-radius:50%;margin:8px 0}
.item small{font-weight:700;font-size:14px}
.item.wear{border-color:var(--teal)}
.item.try{border-color:var(--sun);background:#fffbea}

/* ---------- adventure + rewards ---------- */
.steps{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.steps span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);font-size:20px;opacity:.6}
.steps span.cur{opacity:1;outline:3px solid var(--violet);transform:scale(1.1)}
.steps span.done{opacity:1;background:#e2fbf5}
.stepcard{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:30px;padding:20px;box-shadow:var(--shadow)}
.stepcard .sbig{font-size:84px;animation:float 2.4s ease-in-out infinite}
.stepcard b{font-size:28px}
.done{text-align:center}
.done .bigbuddy{flex-direction:column}
.done .bubble:before{display:none}
.starsrow{display:flex;justify-content:center;gap:10px;font-size:52px}
.starsrow span{opacity:.18;filter:grayscale(1)}
.starsrow span.on{opacity:1;filter:none;animation:starin .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
@keyframes starin{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.fire{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff3e0,#ffe4ea);border-radius:24px;padding:10px 20px;font-size:20px}
.fire span{font-size:44px;animation:bump 1s infinite}
.fire b{font-size:40px}
.reveal{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px 0 4px;perspective:600px}
.reveal .card{width:130px;height:130px;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
.reveal .front,.reveal .back{position:absolute;inset:0;border-radius:30px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow)}
.reveal .front{background:linear-gradient(135deg,#8a5cff,#ff5fa2);font-size:64px}
.reveal .back{background:#fff;transform:rotateY(180deg);font-size:80px}
.reveal.open .card{transform:rotateY(180deg)}
.reveal b{font-size:20px;opacity:0;transition:opacity .4s .6s}
.reveal.open b{opacity:1}
.newworld{display:inline-flex;align-items:center;gap:12px;color:#fff;border-radius:24px;padding:12px 20px;margin-top:12px;background:radial-gradient(circle at 20% 0%,var(--c1),var(--c2));animation:starin .7s .5s both}
.newworld span{font-size:42px}.newworld b{font-size:20px}

/* ---------- grown-ups ---------- */
.parent .panel{padding:18px}
.ptabs{display:flex;gap:6px;overflow-x:auto;margin-top:10px;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:16px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--soft);box-shadow:var(--shadow);border:2px solid transparent}
.ptabs button span{font-size:22px}
.ptabs button.on{border-color:var(--violet);color:#4a2fd0}
.kidpick{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.kidpick button{background:#fff;border-radius:99px;padding:8px 14px;font-weight:600;box-shadow:var(--shadow);border:2px solid transparent}
.kidpick button.on{border-color:var(--violet)}
.gate{max-width:360px;margin:30px auto 0;text-align:center}
.gate .lockic{font-size:52px}
.gate input{max-width:180px;text-align:center;margin:12px auto;display:block}
.msg{min-height:22px;color:#5b44d6;font-weight:600}
.sec{margin-top:22px}
.sec h4{margin:0 0 8px;font-size:17px}
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.stat div{background:#f6f3fc;border-radius:16px;padding:12px 6px;text-align:center}
.stat b{display:block;font-size:22px}
.stat span{font-size:11.5px;color:var(--soft)}
.line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.err{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#f8f6fc;margin-bottom:6px;font-size:15px}
.err b{color:var(--coral)}
.missrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px}
.missrow .word{font-family:"Andika";font-size:20px;font-weight:700}
.missrow em{font-style:normal;color:#5b3df0;font-family:"Andika"}
.plist{display:grid;gap:10px;margin-top:12px}
.prow{display:flex;align-items:center;gap:12px;background:#f8f6fc;border-radius:18px;padding:10px 12px}
.prow div{flex:1}.prow b{font-size:18px;display:block}
.sync{display:flex;gap:10px;align-items:flex-start;border-radius:16px;padding:12px 14px;background:#eefaf6;color:#0b6b5c;font-size:14px}
.sync.local{background:#fff6e6;color:#8a5a00}
ul.plain{padding:0;margin:0;list-style:none;display:grid;gap:8px;font-size:15px}
ul.plain li{background:#f8f6fc;border-radius:12px;padding:10px 12px}
.rep h3{margin:18px 0 8px;font-size:17px}
.rep .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.rep .kpi div{background:#f6f3fc;border-radius:14px;padding:10px;text-align:center}
.rep .kpi b{display:block;font-size:22px}
.rep .kpi span{font-size:12px;color:var(--soft)}
.rep .wl{font-family:"Andika";font-size:17px;line-height:1.6}
.meter{height:8px;border-radius:9px;background:#efeaf8;overflow:hidden;width:90px;display:inline-block;vertical-align:middle;margin-left:8px}
.meter i{display:block;height:100%;background:var(--teal)}
.modal{position:fixed;inset:0;background:rgba(25,18,50,.45);display:grid;place-items:center;padding:20px;z-index:40}
.modal .panel{max-width:360px}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:14px;padding:11px 16px;font-size:15px;z-index:60}
.cf{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;z-index:30;pointer-events:none;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.7}}

/* ---------- tablet ---------- */
@media (min-width:700px){
  body{padding-left:24px;padding-right:24px}
  .ggrid{grid-template-columns:repeat(4,1fr)}
  .bigbuddy .mwrap{width:170px}
  .bubble.big{font-size:23px}
  .items{grid-template-columns:repeat(4,1fr)}
  .story{font-size:32px}
  .slot{width:58px;height:72px;font-size:44px}
  .tile{width:70px;height:74px;font-size:40px}
  .who h1{font-size:40px}
}
/* ---------- small phones ---------- */
@media (max-width:380px){
  .slot{width:42px;height:54px;font-size:32px}
  .tile{width:52px;height:56px;font-size:29px}
  .bigword{font-size:50px}
  .story{font-size:24px}
  .bigbuddy .mwrap{width:104px}
  .bubble.big{font-size:17px}
  .big{font-size:17px;padding:12px 16px 12px 12px}
  .stat{grid-template-columns:repeat(2,1fr)}
  .pic{width:90px;height:90px;font-size:50px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}

/* =====================================================================
   v4 additions: keyboard, weeks, Word Builder, Write, parent tabs
   ===================================================================== */
.kbd{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.krow{display:flex;gap:6px;justify-content:center}
.key{flex:1;max-width:58px;height:54px;border-radius:13px;background:#fff;border:2px solid #ece7f6;box-shadow:0 4px 0 #e0d9ee;font-family:"Andika";font-size:24px;font-weight:700;transition:transform .06s}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #e0d9ee}
.key.wide2{flex:2;max-width:120px;font-family:"Fredoka";font-size:15px}
.key.space{flex:4;max-width:240px;font-family:"Fredoka";font-size:15px}
.key.on{background:#efe9ff;border-color:var(--violet)}
.kbd.abc .key{max-width:62px}
@media (max-width:380px){.key{height:48px;font-size:20px;border-radius:10px}.krow{gap:4px}}
@media (min-width:700px){.key{height:62px;max-width:66px;font-size:28px}}
.weeks{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:none}
.weeks::-webkit-scrollbar{display:none}
.wk{flex:0 0 auto;position:relative;background:#fff;border-radius:18px;padding:9px 13px;text-align:left;box-shadow:var(--shadow);border:2px solid transparent;min-width:118px;max-width:170px}
.wk b{display:block;font-size:15px}.wk span{font-size:12px;color:var(--soft);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk i{position:absolute;top:-6px;right:6px;font-style:normal;font-size:16px}
.wk.on{border-color:var(--violet);background:#f4f0ff}
.wnode .up{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;background:var(--pink);color:#fff;border-radius:99px;padding:2px 8px}
.dtag{display:inline-block;font-size:13px;font-weight:700;color:#5b3df0;background:#f1ecff;border-radius:99px;padding:4px 11px}
.typed.word{text-align:center;font-size:40px;letter-spacing:2px}
.gq{font-family:"Andika";font-size:28px;line-height:1.4;text-align:center;margin:16px 4px}
.gq .blank{min-width:80px;color:var(--teal)}
.gopts .opt{justify-content:flex-start;font-size:24px}
.wtiles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:14px}
.wtile{font-family:"Andika";font-size:24px;font-weight:700;background:#fff;border:2px solid #ece7f6;box-shadow:0 4px 0 #e0d9ee;border-radius:16px;padding:10px 14px;min-height:56px}
.wtile.used{opacity:.2;pointer-events:none}
.typed.built{min-height:64px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bw{background:#e2fbf5;border-radius:10px;padding:2px 8px}
.prompt{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff6dc,#ffe7f0);border-radius:20px;padding:10px 14px;margin-top:10px;font-size:19px}
.prompt .pe{font-size:46px}
.qtype{display:inline-block;font-size:13px;font-weight:700;color:#8a5a00;background:#fff2d6;border-radius:99px;padding:4px 10px;margin-bottom:8px}
.notices{display:grid;gap:6px;margin-top:12px}
.notice{background:#fff6dc;border-radius:14px;padding:10px 12px;font-size:15px}
.notices .small{justify-self:end}
.levelbox{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.levelbox div{background:#f6f3fc;border-radius:16px;padding:10px 12px}
.levelbox b{display:block;font-size:17px;margin-top:2px}.levelbox small{color:var(--soft)}
.wkhist{background:#f8f6fc;border-radius:16px;padding:10px 12px;margin-top:8px}
.wlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wpill{font-family:"Andika";font-size:16px;font-weight:700;border-radius:99px;padding:4px 11px;background:#efeaf8}
.wpill em{font-style:normal;font-weight:400;color:#c0392b;font-size:13px}
.wpill.ok{background:#e2fbf5;color:#0b6b5c}.wpill.mid{background:#fff4cc}.wpill.bad{background:#ffe5e2}
.codebox{display:flex;flex-direction:column;align-items:center;background:#f4f0ff;border-radius:18px;padding:12px;margin-top:10px}
.codebox b{font-family:ui-monospace,Menlo,monospace;font-size:24px;letter-spacing:2px;color:#4a2fd0}
.filebtn{cursor:pointer}
.parent .row input.t{flex:1}
.ptabs button{min-width:74px}
/* level check result */
.lvcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border-radius:24px;background:linear-gradient(135deg,#fff7d6,#ffe1ef);box-shadow:0 10px 30px rgba(80,40,140,.15);margin:8px auto 16px;max-width:340px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.lvcard .em{font-size:56px}.lvcard b{font-size:22px;color:var(--ink)}.lvcard small{font-size:16px;color:#6b5a8a}
.center{text-align:center}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.stag{display:block;font-size:12px;color:#7a6aa0;margin-top:2px;font-weight:600}
.scanbtn{cursor:pointer}
/* read aloud check */
.flu .fluhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}.flu .fluhead .em{font-size:34px}.flu .fluhead b{flex:1;font-size:20px}
.flu .ring{--p:0;width:58px;height:58px;border-radius:50%;background:conic-gradient(#ff5fa2 calc(var(--p)*360deg),#ece6ff 0);display:grid;place-items:center}
.flu .ring span{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;color:var(--ink)}
.flutext{font-size:26px;line-height:1.9;color:var(--ink);transition:filter .4s}.flutext.blur{filter:blur(6px);user-select:none}
.fw{padding:2px 4px;border-radius:8px;transition:background .25s,color .25s;cursor:pointer}.fw.ok{background:#d6f7e3;color:#0d7a45}.fw.miss{background:#ffe0e0;color:#c0392b;text-decoration:line-through}
.fw.cur{box-shadow:0 0 0 3px #ffd23f}.fw.last{outline:3px solid #6c4cff}
.wcpm{display:flex;flex-direction:column;align-items:center;margin:6px 0 10px}.wcpm b{font-size:84px;line-height:1;background:linear-gradient(135deg,#ff5fa2,#6c4cff);-webkit-background-clip:text;background-clip:text;color:transparent}.wcpm span{font-size:18px;color:#6b5a8a;font-weight:700}
.fstats{display:flex;gap:10px;justify-content:center;margin-bottom:12px}.fstats span{background:#f3efff;border-radius:12px;padding:6px 12px;font-weight:700}
.flubars{position:relative;display:flex;gap:10px;align-items:flex-end;height:150px;padding:10px 4px 24px;border-bottom:2px solid #ece6ff;margin:6px 0}
.flubars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}.flubars i{display:block;width:70%;background:linear-gradient(#8b7bff,#6c4cff);border-radius:8px 8px 3px 3px}
.flubars b{font-size:13px}.flubars span{position:absolute;bottom:-20px;font-size:11px;color:#7a6aa0}.flubars em{position:absolute;left:0;right:0;border-top:2px dashed #ff8a3c;font-size:11px;color:#ff8a3c;text-align:right;font-style:normal}

/* =====================================================================
   v5: more color and motion. Each game gets its own sky, keys show
   vowels in a warm color, buttons squish when pressed, the coach shows
   how to play. Motion is turned off for people who ask for less motion.
   ===================================================================== */
#decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#decor i{position:absolute;font-style:normal;opacity:.55;filter:saturate(1.2);animation:drift 22s ease-in-out infinite}
#decor .d1{top:8%;left:-4%;font-size:64px;animation-duration:38s}
#decor .d2{top:18%;right:6%;font-size:26px;animation:twinkle 3.2s ease-in-out infinite}
#decor .d3{bottom:12%;left:8%;font-size:40px;animation:rise 14s linear infinite}
#decor .d4{top:46%;right:-6%;font-size:80px;animation-duration:46s;animation-direction:reverse}
#decor .d5{top:64%;left:46%;font-size:22px;animation:twinkle 2.6s ease-in-out infinite .8s}
#decor .d6{bottom:4%;right:16%;font-size:30px;animation:rise 18s linear infinite 4s}
#decor .d7{top:82%;left:-2%;font-size:54px;opacity:.35;animation-duration:30s}
#decor .d8{top:34%;left:20%;font-size:18px;animation:twinkle 4s ease-in-out infinite 1.6s}
@keyframes drift{0%,100%{transform:translateX(0) translateY(0)}50%{transform:translateX(40vw) translateY(-14px)}}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.25}50%{transform:scale(1.25) rotate(20deg);opacity:.85}}
@keyframes rise{0%{transform:translateY(0) scale(.8);opacity:0}15%{opacity:.6}100%{transform:translateY(-90vh) scale(1.2);opacity:0}}
.wrap,#app{position:relative;z-index:1}

/* a different sky for each kind of game */
body[data-view="spell"]{--g1:#b4daff;--g2:#ffc9e4;--g3:#d5c7ff}
body[data-view="dict"]{--g1:#c4ffea;--g2:#c2e2ff;--g3:#ffe8b1}
body[data-view="blend"]{--g1:#ffe4b1;--g2:#ffc4d7;--g3:#c9efff}
body[data-view="hop"]{--g1:#bcffcf;--g2:#c6eaff;--g3:#fff7b1}
body[data-view="bd"]{--g1:#ffcfec;--g2:#d3cbff;--g3:#c2efff}
body[data-view="gram"]{--g1:#ffe2bc;--g2:#cfc6ff;--g3:#bcffea}
body[data-view="write"]{--g1:#ffd5c4;--g2:#fff1b1;--g3:#c4e2ff}
body[data-view="read"],body[data-view="stories"],body[data-view="retell"]{--g1:#e0c7ff;--g2:#ffcfe2;--g3:#c2ecff}
body[data-view="speed"],body[data-view="speeddone"]{--g1:#ffc7e0;--g2:#cbc4ff;--g3:#ffeaad}
body[data-view="studio"]{--g1:#ffcbcb;--g2:#ffeabc;--g3:#cfc4ff}
body[data-view="place"],body[data-view="placed"]{--g1:#c2eaff;--g2:#e2c7ff;--g3:#ffe4ba}
body[data-view="home"],body[data-view="world"],body[data-view="who"]{--g1:#b8e2ff;--g2:#ffc3e0;--g3:#d5c6ff}
body[data-view]{background:radial-gradient(760px 460px at 108% -6%,var(--g2,#ffe0ee) 0%,transparent 62%),radial-gradient(800px 520px at -14% 2%,var(--g1,#d9f0ff) 0%,transparent 60%),radial-gradient(700px 560px at 50% 112%,var(--g3,#ece4ff) 0%,transparent 62%),var(--bg);background-attachment:fixed;transition:background .6s}

/* panels get a rainbow edge */
.panel{position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#ff5fa2,#ffb21e,#10b39d,#2f8bff,#6c4cff);background-size:200% 100%;animation:rainbow 6s linear infinite}
@keyframes rainbow{to{background-position:-200% 0}}

/* candy stripes on the progress track */
.track i{background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%);background-size:22px 22px;animation:stripes 1s linear infinite}
@keyframes stripes{to{background-position:22px 0}}

/* keyboard: reading font, vowels warm, consonants cool, squishy press */
.kbd .key{font-family:"Andika",system-ui,sans-serif;font-weight:700;background:linear-gradient(#ffffff,#eef6ff);border:2px solid #d6e8ff;box-shadow:0 4px 0 #b9d6ff;color:#1b3a73;transition:transform .08s,box-shadow .08s}
.kbd .key.v{background:linear-gradient(#fff6ee,#ffe3d1);border-color:#ffc9a6;box-shadow:0 4px 0 #ffb07d;color:#b2400f}
.kbd .key:active{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 #b9d6ff}
.kbd .key.v:active{box-shadow:0 1px 0 #ffb07d}
.kbd .key.wide2{font-family:"Fredoka",system-ui,sans-serif}

/* squish and shine on big buttons and game tiles */
.big{transition:transform .1s ease}
.big:active{transform:scale(.95)}
.big.go{background-image:linear-gradient(135deg,#19c6a7,#0ea58f)}
.gtile{animation:tilein .5s cubic-bezier(.2,1.5,.4,1) both}
.gtile:nth-child(2){animation-delay:.05s}.gtile:nth-child(3){animation-delay:.1s}.gtile:nth-child(4){animation-delay:.15s}.gtile:nth-child(5){animation-delay:.2s}.gtile:nth-child(6){animation-delay:.25s}.gtile:nth-child(7){animation-delay:.3s}.gtile:nth-child(8){animation-delay:.35s}.gtile:nth-child(9){animation-delay:.4s}.gtile:nth-child(10){animation-delay:.45s}.gtile:nth-child(11){animation-delay:.5s}
@keyframes tilein{from{opacity:0;transform:translateY(18px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
.gtile:active .ico{animation:wiggle .4s}
.gtile .ico{transition:transform .2s}.gtile:hover .ico{transform:rotate(-8deg) scale(1.08)}
.slot.cur{animation:pulse2 1.2s ease-in-out infinite}
.slot:not(:empty){animation:pop .25s ease-out}

/* coach overlay */
.coach{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(40,24,90,.45);backdrop-filter:blur(4px);animation:enter .3s ease}
.coach.out{opacity:0;transition:opacity .25s}
.ccard{width:min(520px,100%);background:#fff;border-radius:30px;padding:18px 18px 14px;box-shadow:0 30px 60px -20px rgba(40,20,120,.5);position:relative;overflow:hidden}
.ccard::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,#ff5fa2,#ffb21e,#10b39d,#2f8bff,#6c4cff)}
.chead{display:flex;align-items:center;gap:10px}.chead svg{width:58px;height:58px;animation:bob 2s ease-in-out infinite}.chead b{display:block;font-size:22px}.chead span{font-size:14px;color:var(--soft)}
.csteps{position:relative;height:250px;margin:6px 0}
.cstep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateX(40px) scale(.95);transition:all .45s cubic-bezier(.2,1.2,.4,1);cursor:pointer}
.cstep.on{opacity:1;transform:none}
.cstep p{font-size:21px;text-align:center;margin:10px 6px 0;line-height:1.35}.cstep p b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#6c4cff;color:#fff;font-size:16px;margin-right:8px;vertical-align:2px}
.cart{position:relative;width:170px;height:150px;border-radius:30px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff 0%,#f1ecff 60%,#e3dbff 100%);box-shadow:inset 0 -6px 0 #d9cfff}
.cart .big{font-size:76px;filter:drop-shadow(0 6px 6px rgba(80,40,160,.25))}
.cart .hand{position:absolute;font-size:44px;right:6px;bottom:-6px;opacity:0}
.cart .spark{position:absolute;top:8px;left:12px;font-size:28px;opacity:0}
.cstep.on .cart.tap .big{animation:press 1.4s ease-in-out infinite}
.cstep.on .cart.tap .hand{animation:handtap 1.4s ease-in-out infinite}
.cstep.on .cart.type .big{animation:typey 1.1s steps(2) infinite}
.cstep.on .cart.type .hand{animation:handtype 1.1s ease-in-out infinite}
.cstep.on .cart.pop .big{animation:popbig 1.6s cubic-bezier(.2,1.6,.4,1) infinite}
.cstep.on .cart.pop .spark{animation:twinkle 1.6s ease-in-out infinite}
.cstep.on .cart.look .big{animation:look 2.4s ease-in-out infinite}
.cstep.on .cart.hide .big{animation:hidey 2s ease-in-out infinite}
.cstep.on .cart.slide .big{animation:slidey 1.8s ease-in-out infinite}
.cstep.on .cart.hop .big{animation:hop 0.9s ease-in-out infinite}
@keyframes press{0%,40%,100%{transform:scale(1)}50%{transform:scale(.86)}60%{transform:scale(1.08)}}
@keyframes handtap{0%,30%{opacity:0;transform:translate(30px,30px)}40%{opacity:1;transform:translate(-28px,-26px)}50%{transform:translate(-30px,-22px) scale(.9)}70%{opacity:1;transform:translate(-28px,-26px)}100%{opacity:0;transform:translate(30px,30px)}}
@keyframes typey{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes handtype{0%,100%{opacity:1;transform:translate(-40px,-6px)}50%{opacity:1;transform:translate(-10px,0) scale(.92)}}
@keyframes popbig{0%{transform:scale(.4) rotate(-20deg);opacity:0}30%{transform:scale(1.15) rotate(6deg);opacity:1}45%,100%{transform:scale(1) rotate(0)}}
@keyframes look{0%,100%{transform:translateX(0)}25%{transform:translateX(-14px) rotate(-6deg)}75%{transform:translateX(14px) rotate(6deg)}}
@keyframes hidey{0%,35%{opacity:1;transform:scale(1)}50%,80%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes slidey{0%,100%{transform:translateX(-24px)}50%{transform:translateX(24px)}}
.cdots{display:flex;justify-content:center;gap:8px;margin:2px 0 10px}.cdots i{width:10px;height:10px;border-radius:50%;background:#e4ddff;transition:all .3s}.cdots i.on{background:#6c4cff;width:26px;border-radius:6px}
.coachbtn{margin-left:auto;margin-right:6px;background:#fff6d6!important}

/* parent coach */
.tips{display:grid;gap:10px}
.tipcard{background:linear-gradient(135deg,#f2fff9,#eef6ff);border:2px solid #dff3ea;border-radius:18px;padding:12px 14px}
.tipcard b{display:block;margin-bottom:4px}.tipcard ul{margin:4px 0 0;padding-left:20px}.tipcard li{margin:3px 0;font-size:15px}
.howit{background:linear-gradient(135deg,#fff7dd,#ffe9f3);border-radius:20px;padding:14px 16px;margin:10px 0;animation:enter .4s ease}
.howit b{font-size:18px}.howit ol{margin:8px 0;padding-left:22px}.howit li{margin:4px 0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#decor{display:none}}