styles.css

:root { --ink:#26203e; --muted:#746f88; --purple:#6246ea; --purple-dark:#4934c4; --yellow:#ffd166; --pink:#f86e91; --mint:#65d6ad; --paper:#fffdf8; --soft:#f0edff; --line:#e5e1f1; }
*{box-sizing:border-box} body{margin:0;background:linear-gradient(130deg,#f7f4ff,#fff9ec 60%,#effbf7);color:var(--ink);font:17px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.app-shell{max-width:1040px;margin:auto;padding:22px 24px 56px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:42px}.brand{font-weight:850;text-decoration:none;color:var(--ink);font-size:1.2rem}.brand span{color:var(--purple);font-size:1.55rem}.star-bank{background:#fff3c9;border:2px solid #ffe396;border-radius:100px;padding:8px 15px;display:flex;align-items:center;gap:5px;box-shadow:0 4px 0 #f3dda3}.star-bank b{font-size:1.12rem}.star-label{font-size:.8rem;color:#77612c}.hero{display:flex;justify-content:space-between;align-items:center;padding:10px 7% 28px}.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;font-size:.72rem;color:var(--purple)}h1,h2,p{margin-top:0}h1{font-size:clamp(2.25rem,5vw,4rem);line-height:1.04;letter-spacing:-.045em;margin-bottom:15px}h1 em{color:var(--purple);font-style:normal}.intro{color:var(--muted);font-size:1.12rem}.mascot{font-size:clamp(5rem,13vw,9rem);transform:rotate(9deg);filter:drop-shadow(0 12px 6px #d3cef060)}.reward-strip{background:var(--ink);color:#fff;border-radius:22px;padding:19px 24px;display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:22px;box-shadow:0 8px 0 #d9d4ed;margin:4px 0 37px}.reward-strip .eyebrow{color:#c6bdff}.reward-strip strong{display:block}.reward-strip span:not(.eyebrow){font-size:.8rem;color:#d6d0e9}.reward-track{height:12px;background:#4b4564;border-radius:9px;overflow:hidden}.reward-track div{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ffaf45);border-radius:inherit;transition:width .5s}.reward-icon{font-size:2.4rem}h2{font-size:1.45rem}.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mission{border:0;border-radius:22px;padding:22px;text-align:left;color:var(--ink);font:inherit;cursor:pointer;min-height:220px;box-shadow:0 7px 0 var(--card-shadow);transition:transform .16s,box-shadow .16s}.mission:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--card-shadow)}.mission:focus-visible,button:focus-visible,input:focus-visible{outline:4px solid var(--purple);outline-offset:3px}.mission .icon{font-size:3rem;display:block;margin-bottom:13px}.mission h3{margin:0 0 7px;font-size:1.25rem}.mission p{font-size:.88rem;color:#4c4663;margin:0}.mission .chips{margin-top:16px;display:flex;gap:5px;flex-wrap:wrap}.chip{font-size:.7rem;font-weight:700;padding:4px 7px;border-radius:7px;background:#ffffff9e}.collection{display:flex;align-items:center;justify-content:space-between;margin-top:47px;padding:20px 0}.collection h2{margin:0}.badges{display:flex;gap:11px}.badge{height:52px;width:52px;display:grid;place-items:center;border-radius:16px;background:#e8e5ed;font-size:1.6rem;filter:grayscale(1);opacity:.55}.badge.unlocked{filter:none;opacity:1;background:#fff1b5;box-shadow:0 4px 0 #e8ce74}.hidden{display:none}.back-button{border:0;background:transparent;color:var(--purple);font:inherit;font-weight:800;padding:0;cursor:pointer}.game-head{display:flex;align-items:end;justify-content:space-between;margin:18px 0}.game-head h1{font-size:2.25rem;margin:0}.streak{font-weight:800;background:#ffe8b0;padding:8px 14px;border-radius:100px}.mode-switch{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}.mode-switch button{border:2px solid var(--line);background:white;border-radius:100px;padding:8px 13px;color:var(--ink);font-weight:750;cursor:pointer}.mode-switch button.active{background:var(--purple);color:white;border-color:var(--purple)}.question-card{background:var(--paper);border-radius:28px;padding:clamp(25px,6vw,55px);text-align:center;box-shadow:0 12px 0 #ded9ed}.question-label{font-size:.83rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.question{font-size:clamp(3rem,9vw,6rem);font-weight:900;letter-spacing:-.06em;min-height:1.3em}.fraction{display:inline-flex;vertical-align:middle;flex-direction:column;line-height:.85;min-width:1em;font-size:.7em;margin:0 .1em}.fraction span:first-child{border-bottom:4px solid currentColor;padding:0 .18em .12em}.fraction span:last-child{padding:.12em .18em 0}.hint{color:var(--muted);min-height:1.4em}.answer-zone{max-width:550px;margin:22px auto 0}.number-input{font:800 2rem/1 system-ui;width:150px;text-align:center;border:3px solid var(--line);border-radius:14px;padding:14px;color:var(--ink)}.submit{font:800 1rem system-ui;border:0;border-radius:14px;background:var(--purple);color:white;padding:17px 24px;margin-left:8px;cursor:pointer;box-shadow:0 5px 0 var(--purple-dark)}.submit:active{transform:translateY(4px);box-shadow:0 1px 0 var(--purple-dark)}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.choice{font:800 1.4rem system-ui;padding:18px;border:3px solid var(--line);border-radius:16px;background:white;cursor:pointer}.choice:hover{border-color:var(--purple);background:var(--soft)}.factor-inputs{display:flex;justify-content:center;align-items:center;gap:12px}.factor-inputs input{width:86px}.factor-inputs b{font-size:2rem}.pizza-wrap{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px auto}.pizza-piece{width:64px;height:64px;border-radius:50%;border:4px solid #f4b33d;background:conic-gradient(#fff4c3 0 50%,#fff 50%);cursor:pointer;transition:.15s}.pizza-piece.selected{background:#ffbf47;border-color:#eb8e23;transform:scale(1.08)}.pizza-piece:focus-visible{outline:3px solid var(--purple)}.feedback{font-weight:800;min-height:1.5em;margin:19px 0 0}.feedback.good{color:#16845e}.feedback.bad{color:#cf3f62}.tip{text-align:center;color:var(--muted);font-size:.9rem;margin-top:24px}dialog{border:0;background:transparent;padding:0}dialog::backdrop{background:#261b4c75}.celebration{background:var(--paper);border-radius:28px;padding:35px;min-width:min(90vw,350px);text-align:center;box-shadow:0 12px 0 #b3aacd}.big-emoji{font-size:4rem}.celebration h2{margin:4px}.celebration button{border:0;background:var(--purple);color:white;border-radius:12px;font:800 1rem system-ui;padding:13px 20px;cursor:pointer}@media(max-width:680px){.app-shell{padding:16px}.topbar{margin-bottom:28px}.hero{padding:0 2% 24px}.mascot{display:none}.mission-grid{grid-template-columns:1fr}.mission{min-height:auto}.reward-strip{grid-template-columns:1fr auto;gap:12px}.reward-track{grid-column:1/-1;grid-row:2}.collection{align-items:start;gap:18px}.badges{flex-wrap:wrap}.choices{grid-template-columns:1fr}.question-card{padding:28px 16px}.submit{display:block;margin:12px auto 0}.factor-inputs{gap:5px}.pizza-piece{width:54px;height:54px}}