:root{--bg1:#7bdcff;--bg2:#c9a7ff;--card:#fff;--ink:#20304a;--ink-soft:#46566f;--ok:#23c86a;--bad:#ff6b6b;--gold:#ffd93d;--r:26px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:linear-gradient(165deg, var(--bg1), var(--bg2));color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,sans-serif}.app{max-width:780px;min-height:100%;padding:14px 14px calc(14px + env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}.screen{flex-direction:column;flex:1;gap:14px;display:flex}.label{letter-spacing:.02em;color:var(--ink-soft);text-transform:lowercase;margin:0;font-size:14px;font-weight:700}.hud{justify-content:center;gap:8px;display:flex}.hud-pill{background:#ffffffbf;border-radius:999px;padding:8px 16px;font-size:16px;font-weight:800;box-shadow:0 2px #20304a1f}.mascot-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.mascot{filter:drop-shadow(0 8px 12px #20304a38);line-height:1;animation:2.6s ease-in-out infinite float}.mood-happy{animation:.6s ease-in-out infinite bounce}.mood-sad{animation:.5s ease-in-out 2 shake}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-18px)scale(1.06)}}@keyframes shake{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-8px)rotate(-4deg)}75%{transform:translate(8px)rotate(4deg)}}.bubble{background:var(--card);border-radius:18px;padding:8px 18px;font-size:18px;font-weight:800;box-shadow:0 4px #20304a1f}.btn{border-radius:var(--r);color:#fff;cursor:pointer;background:#4a90d9;border:0;padding:16px 22px;font-family:inherit;font-size:18px;font-weight:800;transition:transform 60ms;box-shadow:0 5px #0000002e}.btn:active{transform:translateY(3px);box-shadow:0 2px #0000002e}.btn:disabled{opacity:.5}.btn-primary{background:#4a90d9}.btn-ok{background:var(--ok);padding:16px 26px;font-size:20px}.btn-ok,.btn-ghost{justify-content:center;align-items:center;min-height:62px;display:inline-flex}.btn-ghost{color:var(--ink);background:#ffffffd9}.btn-danger{background:var(--bad);padding:12px 18px;font-size:15px}.row{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;display:flex}.play{color:#5a3400;letter-spacing:.04em;cursor:pointer;background:linear-gradient(#ffcf4d,#ffa726);border:0;border-radius:999px;align-self:center;align-items:center;gap:14px;padding:22px 46px;font-family:inherit;font-size:34px;font-weight:900;animation:2.4s ease-in-out infinite pulse;display:flex;box-shadow:0 8px #d98200,0 14px 24px #0000002e}.play:active{transform:translateY(4px);box-shadow:0 4px #d98200}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.play-icon{font-size:30px}.stats{justify-content:center;gap:12px;display:flex}.stat{background:#fffc;border-radius:20px;flex-direction:column;flex:1;align-items:center;padding:12px;display:flex}.stat-num{font-size:28px;font-weight:900}.stat-label{color:var(--ink-soft);text-align:center;font-size:12px;font-weight:700}.xpwrap{align-items:center;gap:10px;display:flex}.progress{background:#ffffff8c;border-radius:999px;flex:1;height:16px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#ffd93d,#ff9f43);border-radius:999px;height:100%;transition:width .3s}.topbar{align-items:center;gap:12px;display:flex}.icon-btn{width:46px;height:46px;color:var(--ink);cursor:pointer;background:#ffffffd9;border:0;border-radius:50%;flex:none;font-size:20px;font-weight:900;box-shadow:0 3px #20304a24}.learn-card{background:var(--card);cursor:pointer;color:var(--ink);border:0;border-radius:34px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:26px;font-family:inherit;display:flex;box-shadow:0 10px #20304a1f}.learn-word{letter-spacing:.02em;font-size:clamp(40px,12vw,64px);font-weight:900}.speaker{opacity:.75;font-size:30px}.sound-hint{text-align:center;letter-spacing:.28em;color:var(--ink-soft);margin:0;font-weight:800}.prompt{background:var(--card);cursor:pointer;color:var(--ink);border:0;border-radius:30px;padding:18px;font-family:inherit;box-shadow:0 8px #20304a1f}.prompt-audio{align-self:center;padding:22px 44px;font-size:76px}.prompt-image{align-self:center;font-size:clamp(96px,30vw,150px);line-height:1.05}.grid{gap:12px;display:grid}.grid-2{grid-template-columns:1fr 1fr}.grid-1{grid-template-columns:1fr}.option{background:var(--card);cursor:pointer;color:var(--ink);border:0;border-radius:26px;padding:12px;font-family:inherit;transition:transform 80ms,background .15s;box-shadow:0 6px #20304a1f}.option:active{transform:translateY(3px)}.option-img{justify-content:center;align-items:center;min-height:120px;display:flex}.opt-emoji{font-size:clamp(56px,17vw,88px);line-height:1}.option-word{padding:20px}.opt-word{font-size:clamp(30px,9vw,46px);font-weight:900}.option.good{outline:5px solid var(--ok);background:#d8ffe6}.option.bad{outline:5px solid var(--bad);background:#ffe1e1;animation:.4s ease-in-out shake}.option.dim{opacity:.45}.toast{align-self:center;font-size:46px;animation:.6s ease-in-out bounce}.reward{text-align:center;justify-content:center;align-items:center}.reward-title{margin:0;font-size:40px;font-weight:900}.reward-line{color:var(--ink-soft);margin:0;font-size:18px;font-weight:800}.stars{gap:6px;font-size:34px;display:flex}.star{opacity:.25;filter:grayscale()}.star.on{opacity:1;filter:none;animation:.7s ease-in-out bounce}.star-more{color:var(--ink-soft);align-self:center;font-size:20px;font-weight:900}.word-chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.chip{background:var(--card);color:var(--ink);cursor:pointer;border:0;border-radius:20px;align-items:center;gap:8px;padding:8px 14px;font-family:inherit;font-size:17px;font-weight:800;display:flex;box-shadow:0 4px #20304a1f}.chip-emoji{font-size:24px}.parent-gate{color:var(--ink-soft);cursor:pointer;background:#fff9;border:0;border-radius:18px;margin-top:auto;padding:12px;font-family:inherit;font-size:13px;font-weight:700;position:relative;overflow:hidden}.gate-fill{background:#23c86a59;transition:width 60ms linear;position:absolute;inset:0 auto 0 0}.gate-text{position:relative}.parent{gap:12px}.parent-title{margin:0;font-size:20px;font-weight:900}.cards{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mini{background:var(--card);border-radius:18px;flex-direction:column;align-items:center;padding:10px;display:flex}.mini-num{font-size:20px;font-weight:900}.mini-label{color:var(--ink-soft);text-align:center;font-size:11px;font-weight:700}.spark{background:#ffffff80;border-radius:16px;align-items:flex-end;gap:6px;height:70px;padding:8px;display:flex}.spark-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:2px;height:100%;display:flex}.spark-bar{background:linear-gradient(#ffd93d,#ff9f43);border-radius:6px;width:100%}.spark-day{color:var(--ink-soft);font-size:10px;font-weight:700}.errlist{margin:0;padding-left:18px;font-size:13px;font-weight:600}.table{background:#ffffffbf;border-radius:18px;max-height:46vh;padding:6px 10px;overflow:auto}.trow{border-bottom:1px solid #20304a14;align-items:center;gap:10px;padding:8px 0;display:flex}.trow:last-child{border-bottom:0}.temoji{font-size:26px}.tword{flex-direction:column;flex:1;font-size:16px;font-weight:800;display:flex}.tword small,.tnum small{color:var(--ink-soft);font-size:11px;font-weight:600}.tnum{text-align:right;flex-direction:column;font-size:15px;font-weight:900;display:flex}.msg{color:var(--ink-soft);text-align:center;margin:0;font-size:13px;font-weight:700}.screen{position:relative}.learn-card{background:radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--cat,#7bdcff) 26%, #fff) 0%, #fff 62%);box-shadow:0 12px 0 color-mix(in srgb, var(--cat,#4a90d9) 42%, #fff), 0 18px 30px #20304a29;border-radius:36px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:22px 18px;display:flex;position:relative}.card-tag{background:var(--cat,#4a90d9);color:#fff;text-transform:lowercase;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:800;position:absolute;top:14px;left:16px}.art{aspect-ratio:1;background:radial-gradient(circle at 34% 28%, #fff, color-mix(in srgb, var(--cat,#7bdcff) 16%, #fff));border-radius:50%;place-items:center;width:min(52vw,200px);display:grid;box-shadow:inset 0 -8px 16px #20304a0f}.art-sm{width:min(24vw,84px)}.learn-emoji{font-size:clamp(76px,24vw,150px);line-height:1}.prompt{background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--cat,#7bdcff) 22%, #fff), #fff 72%);box-shadow:0 8px 0 color-mix(in srgb, var(--cat,#4a90d9) 38%, #fff);border-radius:30px;align-self:center;padding:14px 18px}.prompt-audio{padding:20px 48px;font-size:66px}.prompt-emoji{font-size:clamp(80px,24vw,122px);line-height:1}.option{border:3px solid color-mix(in srgb, var(--cat,#4a90d9) 28%, #fff);background:#fff}.option.good,.option.bad{border-color:#0000}.chip{border:3px solid color-mix(in srgb, var(--cat,#4a90d9) 30%, #fff)}.pop{animation:.34s cubic-bezier(.2,1.35,.4,1) pop-in}@keyframes pop-in{0%{opacity:.15;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.confetti{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.confetti span{border-radius:3px;width:9px;height:14px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards;position:absolute;top:-16px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(72vh)rotate(560deg)}}.netdot{background:#9aa7bd;border-radius:50%;flex:none;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 4px #9aa7bd33}.hud-pill.net{align-items:center;padding:8px 12px;display:inline-flex}.hud-pill.net.on .netdot,.syncbar.on .netdot{background:#23c86a;box-shadow:0 0 0 4px #23c86a38}.hud-pill.net.off .netdot,.syncbar.off .netdot{background:#ff9f43;box-shadow:0 0 0 4px #ff9f4338}.syncbar{color:var(--ink-soft);background:#ffffffc7;border-radius:16px;align-items:center;gap:10px;padding:10px 14px;font-size:12.5px;font-weight:700;line-height:1.35;display:flex}.unlockbar{background:#ffffffc7;border-radius:18px;align-items:center;gap:12px;padding:12px 14px;display:flex}.unlockbar .mini-num{flex:none;font-size:24px}.weakrow{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.weakpill{border-left:6px solid var(--cat,#4a90d9);background:#fff;border-radius:16px;flex-direction:column;flex:none;gap:2px;min-width:108px;padding:10px 12px;display:flex;box-shadow:0 4px #20304a14}.weakpill b{font-size:13px}.weakpill span{font-size:21px;font-weight:900}.weakpill small{color:var(--ink-soft);font-size:11px;font-weight:600}.trow{border:0;border-left:5px solid var(--cat,transparent);width:100%;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border-radius:10px;font-family:inherit}.trow:active{background:#20304a0f}html,body{height:auto;min-height:100%}#root{min-height:100vh}.progress{background:#ffffff73;height:18px;box-shadow:inset 0 0 0 2px #ffffffe6,inset 0 2px 6px #20304a24}.progress-fill{background:linear-gradient(90deg,#ffc93c,#ff8a3d);box-shadow:inset 0 0 0 1px #ffffff8c}.speaker{background:color-mix(in srgb, var(--cat,#4a90d9) 18%, #fff);border:2px solid color-mix(in srgb, var(--cat,#4a90d9) 38%, #fff);opacity:1;border-radius:999px;margin-bottom:6px;padding:8px 20px;font-size:24px;box-shadow:0 3px #20304a1f}.learn-card{padding-bottom:28px}.checkmark{color:#fff;font-size:34px;font-weight:900;line-height:1}.btn-ok{min-width:108px}.topbar{padding-top:4px}.screen>.btn-ok:last-child{margin-bottom:6px}.familybox{background:#ffffffd9;border-radius:20px;flex-direction:column;gap:10px;padding:14px;display:flex}.coderow{align-items:center;gap:10px;display:flex}.codebig{letter-spacing:.22em;text-align:center;color:var(--ink);background:#fff;border:3px dashed #b9c6dd;border-radius:14px;flex:1;padding:10px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:800}.codeinput{letter-spacing:.18em;text-align:center;color:var(--ink);background:#fff;border:3px solid #cdd8ea;border-radius:14px;flex:1;min-width:0;padding:10px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:800}.codeinput:focus{border-color:#4a90d9;outline:none}.art-img{object-fit:contain;display:block}.art .art-img{width:82%;height:82%}.chip .art-img{width:26px;height:26px}.trow .art-img{width:28px;height:28px}.say-row{justify-content:center;align-items:center;gap:16px;display:flex}.mic-btn{background:var(--card);border:none;border-radius:50%;place-items:center;width:92px;height:92px;font-size:42px;line-height:1;transition:transform .12s,box-shadow .2s;display:grid;box-shadow:0 8px 18px #20304a38}.mic-btn:active{transform:scale(.94)}.mic-btn.recording{background:var(--bad);animation:1s ease-in-out infinite micpulse}@keyframes micpulse{0%,to{transform:scale(1);box-shadow:0 0 #ff6b6b8c}50%{transform:scale(1.06);box-shadow:0 0 0 18px #ff6b6b00}}.voice-btn{background:var(--card);border:none;border-radius:50%;place-items:center;width:62px;height:62px;font-size:28px;display:grid;box-shadow:0 6px 14px #20304a2e}.voice-btn:active{transform:scale(.94)}.mic-bar{background:#ffffff8c;border-radius:999px;height:10px;overflow:hidden}.mic-bar span{background:var(--bad);transform-origin:0;width:100%;height:100%;animation:3.5s linear forwards micbar;display:block}.mic-bar.listening span{animation-duration:5s}@keyframes micbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.saylist{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.saypill{color:var(--ink);background:#ffffffbf;border:none;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:700;display:inline-flex;box-shadow:0 2px 6px #20304a1f}.saypill:active{transform:scale(.96)}.saypill:disabled{opacity:.55}.saypill:disabled:active{transform:none}.saypill.flag{background:#ff6b6b38}.pillok,.pillbad{border-radius:6px;padding:0 4px;font-size:12px;font-weight:800}.pillok{color:#0d7a3e;background:#23c86a2e}.pillbad{color:#b3261e;background:#ff6b6b40}.learn-card.bare .learn-word{letter-spacing:-.01em;font-size:62px}.learn-card.bare{justify-content:center;min-height:260px}.switchrow{color:var(--ink-soft);align-items:flex-start;gap:8px;margin-top:10px;font-size:13px;line-height:1.45;display:flex}.switchrow input{width:20px;height:20px;accent-color:var(--ok);flex:none;margin:1px 0 0}