:root{--bg: #f6f6fb;--card: #ffffff;--ink: #2b2b40;--ink-soft: #5d5d75;--purple: #7c3aed;--purple-dark: #5b21b6;--purple-soft: #ede9fe;--green: #22c55e;--green-dark: #15803d;--green-soft: #dcfce7;--red: #ef4444;--red-dark: #b91c1c;--red-soft: #fee2e2;--blue: #0ea5e9;--blue-dark: #0369a1;--orange: #f97316;--orange-dark: #c2410c;--teal: #14b8a6;--teal-dark: #0f766e;--gold: #f59e0b;--track: #e4e4ef;--radius: 18px;font-size:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,"Baloo 2",system-ui,-apple-system,Segoe UI,sans-serif;font-size:1rem;line-height:1.45}#app{max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-header{position:sticky;top:0;z-index:20;background:var(--card);padding:calc(10px + env(safe-area-inset-top)) 14px 10px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 3px 0 var(--track)}.header-row{display:flex;align-items:center;gap:8px}.level-chip{background:var(--purple);color:#fff;font-weight:800;font-size:1rem;border-radius:999px;padding:7px 13px;border-bottom:3px solid var(--purple-dark)}.stat-chip{background:var(--purple-soft);color:var(--purple-dark);font-weight:800;font-size:1rem;border-radius:999px;padding:7px 11px;white-space:nowrap}.xp-bar{margin-top:9px;height:14px;border-radius:999px;background:var(--track);overflow:hidden}.xp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),#fbbf24);transition:width .5s cubic-bezier(.34,1.56,.64,1)}.hearts{margin-top:7px;display:flex;gap:3px;font-size:1.15rem;line-height:1}.heart{transition:transform .25s}.heart.lost{filter:grayscale(1);opacity:.55;transform:scale(.9)}.grown-ups{margin-left:auto;min-width:48px;min-height:44px;border:none;border-radius:14px;background:var(--purple-soft);border-bottom:3px solid #ddd6fe;font-size:1.2rem;cursor:pointer}.grown-ups:active{transform:translateY(2px);border-bottom-width:1px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:12px 20px;border:none;border-radius:var(--radius);font-family:inherit;font-size:1.05rem;font-weight:800;color:#fff;cursor:pointer;transition:transform 90ms ease,filter .12s ease}.btn:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px!important}.btn:disabled{cursor:default;filter:saturate(.6) brightness(.95)}.btn.primary{background:var(--green);border-bottom:4px solid var(--green-dark)}.btn.ghost{background:var(--card);color:var(--ink);border:2px solid var(--track);border-bottom-width:4px}.btn.big{width:100%;font-size:1.15rem}.btn.tiny{min-height:40px;min-width:44px;padding:6px 12px;font-size:1rem;border-radius:12px}.screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px 18px calc(28px + env(safe-area-inset-bottom))}.app-title{font-size:1.8rem;font-weight:900;margin:4px 0 2px;color:var(--purple);letter-spacing:-.5px}.tagline{margin:0 0 4px;color:var(--ink-soft);font-weight:700}.progress-note{margin:0 0 10px;color:var(--ink-soft);font-size:.95rem;font-weight:700}.path{list-style:none;margin:0;padding:0;width:100%}.path li{display:flex;flex-direction:column;align-items:center;margin:0 auto 26px;max-width:260px;transform:translate(var(--side, 0))}.node-btn{width:82px;height:82px;border-radius:50%;border:none;font-size:2.1rem;cursor:pointer;transition:transform .12s ease}.path-node.open .node-btn{background:var(--purple);border-bottom:6px solid var(--purple-dark);color:#fff;animation:bob 2.4s ease-in-out infinite;box-shadow:0 0 0 8px var(--purple-soft)}.path-node.done .node-btn{background:var(--green);border-bottom:6px solid var(--green-dark);box-shadow:0 0 0 8px var(--green-soft)}.path-node.locked .node-btn{background:#cfcfdd;border-bottom:6px solid #b3b3c4;filter:saturate(.4);cursor:not-allowed}.node-btn:active{transform:translateY(3px);border-bottom-width:3px}.node-label{margin-top:10px;text-align:center;display:flex;flex-direction:column;gap:2px}.node-name{font-weight:800;font-size:1.05rem}.node-stars{font-size:.95rem;color:var(--gold);letter-spacing:2px}.node-desc{margin-top:6px;background:var(--card);border:2px solid var(--purple-soft);color:var(--ink-soft);border-radius:14px;padding:8px 12px;font-size:.9rem;font-weight:700;text-align:center}.node-desc:empty{display:none}.path-footer-space{height:30px}.player-screen{align-items:stretch;padding-top:12px}.player-top{display:flex;align-items:center;gap:10px}.progress-track{flex:1;height:16px;background:var(--track);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--green);border-radius:999px;transition:width .4s cubic-bezier(.34,1.56,.64,1)}.q-count{font-weight:800;font-size:1.1rem;white-space:nowrap}.lesson-chip{margin:12px 0 2px;align-self:flex-start;background:var(--purple-soft);color:var(--purple-dark);font-weight:800;border-radius:999px;padding:6px 12px;font-size:.95rem}.question-text{font-size:1.2rem;font-weight:800;margin:12px 0 4px}.hand-board{background:var(--card);border:2px solid var(--track);border-radius:var(--radius);padding:10px 14px;margin:8px 0 14px;box-shadow:0 3px 0 var(--track)}.hand-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dashed var(--track)}.hand-row:last-child{border-bottom:none}.hand-suit{font-size:1.5rem;width:1.6rem;text-align:center}.hand-cards{font-size:1.45rem;font-weight:800;letter-spacing:2px}.hand-row.red{color:#dc2626}.hand-row.black{color:#1e293b}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}.option{min-height:64px;font-size:1.25rem;padding:10px 8px;word-break:break-word}.opt-0{background:var(--blue);border-bottom:4px solid var(--blue-dark)}.opt-1{background:var(--orange);border-bottom:4px solid var(--orange-dark)}.opt-2{background:var(--purple);border-bottom:4px solid var(--purple-dark)}.opt-3{background:var(--teal);border-bottom:4px solid var(--teal-dark)}.option.reveal-right{background:var(--green)!important;border-bottom-color:var(--green-dark)!important;animation:pop-in .35s ease}.option.reveal-wrong{background:var(--red)!important;border-bottom-color:var(--red-dark)!important}.slab{position:fixed;left:0;right:0;bottom:0;z-index:40;min-height:40vh;min-height:40dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:20px 22px calc(18px + env(safe-area-inset-bottom));color:#fff;font-weight:800;animation:slab-in .65s cubic-bezier(.34,1.56,.64,1)}.slab-good{background:#22c55e}.slab-bad{background:#ef4444}.slab-win{background:linear-gradient(120deg,#15803d,#22c55e 45%,#facc15)}.slab-text{min-width:0;width:100%}.slab-title{font-size:1.25rem;font-weight:800;line-height:1.2}.slab-answer{font-size:1.5rem;font-weight:800;margin-top:2px}.slab-sub{font-size:.92rem;font-weight:700;opacity:.95;margin-top:2px}.slab-btn{background:#fff;color:var(--green-dark);border-bottom:4px solid #d1d5db;flex-shrink:0;min-width:136px}.slab-bad .slab-btn{color:var(--red-dark)}.slab .xp-pop{position:absolute;top:-14px;right:16px;font-weight:900;font-size:1.3rem;color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.25);animation:float-up 1.1s ease forwards;pointer-events:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#2b2b408c;display:flex;align-items:center;justify-content:center;padding:24px;animation:fade-in .15s ease}.quit-card{background:var(--card);border-radius:22px;padding:24px 22px;width:100%;max-width:340px;text-align:center;box-shadow:0 10px 30px #00000040;animation:pop-in .25s cubic-bezier(.34,1.56,.64,1)}.quit-emoji{font-size:3rem;line-height:1}.quit-title{margin:8px 0 6px;font-size:1.5rem;font-weight:900}.quit-text{color:var(--ink-soft);font-weight:700;margin:0 0 18px}.btn.keep{background:var(--green);border-bottom:4px solid var(--green-dark)}.btn.end{background:#e5e5ee;color:var(--ink-soft);border-bottom:4px solid #c9c9d6;margin-top:12px}.complete-screen{justify-content:flex-start;padding-top:10px;padding-bottom:calc(42vh + env(safe-area-inset-bottom))}.moment-buttons{position:relative;z-index:50}.practice-note{margin:0;color:var(--ink-soft);font-size:.9rem;font-weight:700}.complete-screen .moment-emoji{font-size:3rem}.complete-screen .moment-title{margin:4px 0 2px}.complete-screen .moment-text{margin-bottom:10px}.complete-screen .star-row{margin:4px 0 8px}.complete-screen .big-star{font-size:2.4rem}.complete-screen .reward-chips{margin-bottom:14px}.moment-screen{justify-content:center;text-align:center;overflow:hidden;position:relative}.moment-emoji{font-size:4.2rem;line-height:1.1}.moment-title{font-size:1.7rem;font-weight:900;margin:10px 0 6px}.moment-text{color:var(--ink-soft);font-weight:700;margin:0 6px 18px;max-width:32ch}.moment-buttons{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.wobble{animation:wobble .9s ease}.pop{animation:pop-in .5s cubic-bezier(.34,1.56,.64,1)}.star-row{display:flex;gap:10px;justify-content:center;margin:8px 0 14px}.big-star{font-size:3rem;filter:grayscale(1);opacity:.4}.big-star.won{filter:none;opacity:1;animation:star-pop .6s cubic-bezier(.34,1.56,.64,1) backwards}.reward-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}.reward-chip{background:var(--card);border:2px solid var(--track);border-bottom-width:4px;border-radius:999px;padding:8px 14px;font-weight:800;font-size:.98rem}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-24px;border-radius:3px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards}.grownups-screen{text-align:center}.panel-title{font-size:1.4rem;font-weight:900;margin:0}.pin-input{width:100%;max-width:240px;min-height:60px;margin:6px 0 14px;border:3px solid var(--purple-soft);border-radius:var(--radius);text-align:center;font-family:inherit;font-size:1.6rem;font-weight:800;letter-spacing:8px;color:var(--ink)}.pin-input:focus{outline:none;border-color:var(--purple)}.pin-message{min-height:1.4em;color:var(--red-dark);font-weight:700;margin:4px 0 8px}.stats-rows{width:100%;background:var(--card);border:2px solid var(--track);border-radius:var(--radius);padding:6px 16px;margin-bottom:18px;box-shadow:0 3px 0 var(--track)}.stat-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px dashed var(--track);font-size:1.02rem;font-weight:700;color:var(--ink-soft);text-align:left}.stat-row:last-child{border-bottom:none}.stat-row strong{color:var(--ink);font-size:1.1rem}.stat-row.wide{flex-direction:column;align-items:stretch}.stat-row.wide .xp-bar{margin-top:6px;height:12px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pop-in{0%{transform:scale(.6)}70%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-5deg)}}@keyframes float-up{0%{transform:translateY(0);opacity:1}to{transform:translateY(-56px);opacity:0}}@keyframes slab-in{0%{transform:translateY(100%)}55%{transform:translateY(-10%)}75%{transform:translateY(4%)}90%{transform:translateY(-2%)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.shake{animation:shake .4s ease}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(720deg);opacity:.9}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.slab .mascot{position:absolute;top:-3rem;left:calc(50% - 1.55rem);font-size:3.1rem;line-height:1;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 5px 0 rgba(0,0,0,.15));pointer-events:none}.slab .mascot.cheer{animation:mascot-jump .75s cubic-bezier(.34,1.56,.64,1)}.slab .mascot.wince{animation:mascot-wince .55s ease}@keyframes mascot-jump{0%{transform:translateY(0)}35%{transform:translateY(-26px) rotate(-6deg)}60%{transform:translateY(0)}78%{transform:translateY(-9px)}to{transform:translateY(0)}}@keyframes mascot-wince{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-7px) rotate(-6deg)}45%{transform:translate(6px) rotate(5deg)}70%{transform:translate(-4px) rotate(-3deg)}}.chest-section{text-align:center;margin:2px 0 18px}.chest-note{font-weight:800;color:var(--orange-dark);margin:0 0 8px}.chest-btn{border:none;background:none;font-size:3.6rem;line-height:1;cursor:pointer;animation:bob 2.2s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))}.chest-btn:active{transform:scale(.9)}.chest-btn.huge{font-size:5.4rem;animation:pop-in .4s cubic-bezier(.34,1.56,.64,1)}.chest-card{position:relative;overflow:hidden}.btn.danger{background:var(--red);border-bottom:4px solid var(--red-dark);margin-top:12px}.btn.danger:disabled{filter:saturate(.4) brightness(.95)}.reset-input{letter-spacing:4px;text-transform:uppercase;font-size:1.3rem}.teach-intro{font-weight:800;color:var(--purple-dark);text-align:center;margin:2px 0 10px}.teach-card{background:var(--card);border-radius:var(--radius);border-bottom:5px solid var(--track);padding:18px 18px 14px;box-shadow:0 8px 24px #2b2b4014;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}.teach-emoji{font-size:2.6rem;line-height:1}.teach-title{font-size:1.35rem;font-weight:800;margin:8px 0 4px}.teach-text{color:var(--ink-soft);font-weight:600;margin:0 0 8px}.teach-chip{display:inline-block;background:var(--orange-soft, #ffedd5);color:var(--orange-dark);font-size:.8rem;font-weight:800;border-radius:999px;padding:3px 10px;margin-bottom:8px}.teach-example-label{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin:8px 0 4px}.teach-math{background:var(--purple-soft);color:var(--purple-dark);font-weight:800;border-radius:12px;padding:8px 12px;margin:10px 0 4px}.teach-dots{display:flex;gap:7px;justify-content:center;margin:14px 0 4px}.teach-dot{width:10px;height:10px;border-radius:999px;border:none;background:var(--track);cursor:pointer;padding:0;transition:all .2s ease}.teach-dot.on{width:26px;background:var(--purple)}.teach-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.teach-progress{flex:1;text-align:center}.teach-again-row{text-align:center;margin:0 0 8px}.hint-slot{margin-top:12px}.btn.hint{background:var(--gold);border-bottom:4px solid #b45309;color:#fff;width:100%}.hint-bubble{background:#fffbeb;border:2px solid var(--gold);border-radius:var(--radius);padding:12px 14px;animation:pop-in .25s cubic-bezier(.34,1.56,.64,1)}.hint-title{font-weight:800;margin-bottom:2px}.hint-text{color:var(--ink-soft);font-weight:600;font-size:.95rem}.node-teach{margin-top:4px}.teach-again{font-size:.8rem;padding:4px 10px}.unit-banner{display:flex;align-items:center;gap:10px;max-width:100%!important;transform:none!important;margin:22px 0 14px;padding:12px 14px;border-radius:16px;color:#fff;text-align:left;box-shadow:0 4px #00000024}.unit-emoji{font-size:1.7rem;line-height:1}.unit-words{display:flex;flex-direction:column;gap:1px;min-width:0}.unit-name{font-weight:900;font-size:1.08rem;letter-spacing:-.2px}.unit-count{font-size:.8rem;font-weight:800;opacity:.92}.unit-banner.unit-0{background:var(--purple);border-bottom:4px solid var(--purple-dark)}.unit-banner.unit-1{background:var(--green);border-bottom:4px solid var(--green-dark)}.unit-banner.unit-2{background:var(--blue);border-bottom:4px solid var(--blue-dark)}.unit-banner.unit-3{background:var(--orange);border-bottom:4px solid var(--orange-dark)}.unit-banner.unit-4{background:var(--teal);border-bottom:4px solid var(--teal-dark)}.path li.checkpoint-node{transform:none;margin-bottom:34px}.checkpoint-node .node-btn{width:112px;height:112px;border-radius:28px;font-size:2.9rem}.checkpoint-node.open .node-btn{background:var(--orange);border-bottom:7px solid var(--orange-dark);box-shadow:0 0 0 9px #ffedd5}.checkpoint-node.passed .node-btn{background:linear-gradient(160deg,#fde68a,var(--gold));border-bottom:7px solid #b45309;box-shadow:0 0 0 9px #fef3c7;font-size:2.4rem;cursor:pointer}.checkpoint-node.passed .node-name{color:#b45309}.checkpoint-node .node-name{font-size:1.1rem}.practice-pin{position:sticky;top:118px;z-index:10;width:100%;max-width:420px;margin:0 0 18px;padding:10px 12px 8px;background:var(--bg);border-radius:var(--radius);text-align:center}.practice-btn{font-size:1.3rem;background:var(--blue-dark);border-bottom:4px solid #0c4a6e}.practice-pin-note{margin:6px 0 0;color:var(--ink-soft);font-size:.85rem;font-weight:700}.review-title{align-self:flex-start;margin:6px 0 2px;color:var(--ink-soft);font-weight:800;font-size:.9rem}.breakdown{width:100%;max-width:420px;margin:0 0 18px;text-align:left}.breakdown-title{font-size:1.15rem;margin:0 0 8px;text-align:center}.breakdown-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.breakdown-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;background:var(--card);border:2px solid var(--track);border-bottom-width:4px;border-radius:14px;padding:8px 12px;font-weight:800}.breakdown-row.weak{border-color:#fcd34d;background:#fffbeb}.breakdown-row .teach-again{grid-column:1 / -1;justify-self:stretch}.breakdown-emoji{font-size:1.4rem}.breakdown-score{color:var(--ink-soft);font-size:.9rem}.breakdown-mark{font-size:1.2rem}.unlock-note{font-size:1.2rem;font-weight:900;color:var(--green-dark);margin:0 0 12px}.checkpoint-pass .crown{font-size:5rem}.auction{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 6px}.auction-call{display:flex;flex-direction:column;align-items:center;min-width:84px;padding:8px 14px;border-radius:16px;background:#fff;border:2px solid #e5e7eb;border-bottom-width:4px}.auction-call.you{border-color:#7c3aed;background:#f5f3ff}.auction-who{font-size:.8rem;font-weight:700;color:#4b5563;text-transform:uppercase;letter-spacing:.04em}.auction-bid{font-size:1.6rem;font-weight:800;color:#111827;line-height:1.2}.auction-bid.red{color:#dc2626}.auction-arrow{font-size:1.4rem;font-weight:800;color:#6b7280}.hand-label{margin:8px 0 4px;font-weight:700;color:#4b5563;text-align:center}
