:root{--coral: #ff7a66;--mint: #21c7ac;--sun: #ffc247;--peri: #7c6cf0;--rose: #f2789f;--sky: #3fb7d4;--ink: #3a3252;--muted: #9a93ad;--ok: #1fbf8f;--bad: #f2789f;--page-bg: #fbf4ec;--accent: #ff7a66;--accent2: #7c6cf0;--card: #ffffff;--radius: 24px;--shadow: 0 12px 30px rgba(58, 50, 82, .08);--shadow-sm: 0 6px 16px rgba(58, 50, 82, .06)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--page-bg);background-attachment:fixed}h1,h2,h3,.display{font-family:Fredoka,Nunito,sans-serif;font-weight:600;margin:0;line-height:1.15}.page{min-height:100%;max-width:720px;margin:0 auto;padding:14px 16px 40px;display:flex;flex-direction:column;gap:16px}.topbar{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:22px;padding:9px 12px;box-shadow:var(--shadow-sm)}.topbar .grow{flex:1}.iconbtn{border:none;background:#f4eff5;color:var(--ink);width:40px;height:40px;border-radius:13px;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:transform .1s}.iconbtn:active{transform:scale(.9)}.avatar-chip{width:44px;height:44px;border-radius:13px;background:#ece9fe;display:grid;place-items:center;overflow:hidden}.avatar-chip svg{width:28px;height:40px;display:block}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.muted{color:var(--muted)}.center{text-align:center}.row{display:flex;gap:10px;align-items:center}.between{display:flex;justify-content:space-between;align-items:center;gap:10px}.stack{display:flex;flex-direction:column;gap:12px}.btn{font-family:Fredoka,sans-serif;font-weight:600;border:none;border-radius:18px;padding:14px 22px;font-size:17px;cursor:pointer;transition:transform .1s,filter .1s;color:#fff;background:var(--accent);box-shadow:0 9px 20px #ff7a6647}.btn:active{transform:translateY(2px) scale(.99)}.btn:disabled{filter:grayscale(.4) opacity(.55);cursor:not-allowed}.btn-big{font-size:21px;padding:17px 28px;width:100%}.btn-ghost{background:#fff;color:var(--ink);box-shadow:none;border:2px solid #efe7f0}.btn-yellow{background:var(--sun);color:#6b4a00;box-shadow:0 9px 20px #ffc2474d}.input{font-family:Nunito;font-size:20px;text-align:center;border:2px solid #efe7f0;border-radius:15px;padding:14px;width:100%;outline:none;font-weight:700;color:var(--ink);background:#fbf7fb}.input:focus{border-color:var(--accent)}.progress-track{background:#f0eaf6;border-radius:999px;height:16px;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:var(--mint);transition:width .5s cubic-bezier(.2,.9,.3,1.2)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}.tile{background:var(--card);border:2px solid transparent;border-radius:22px;padding:18px 12px;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.tile .emoji{font-size:28px;width:54px;height:54px;border-radius:17px;background:#f4eff5;display:grid;place-items:center;margin:0 auto}.tile .label{font-family:Fredoka;font-weight:600;font-size:15px;margin-top:10px;line-height:1.2}.option{font-family:Fredoka;font-weight:600;font-size:20px;background:#fbf7fb;border:2px solid #efe7f0;border-radius:18px;padding:18px;cursor:pointer;text-align:center;transition:transform .08s,border-color .1s,background .1s;color:var(--ink)}.option:active{transform:scale(.98)}.option.selected{border-color:var(--accent);background:#fff;box-shadow:0 6px 16px #ff7a6629}.option.correct{border-color:var(--ok);background:#e6f8f1;color:#0e8c66}.option.wrong{border-color:var(--bad);background:#fdeaf1;color:#c13568}.pill{display:inline-flex;align-items:center;gap:6px;background:#fff3d6;color:#b07a12;font-family:Fredoka,sans-serif;font-weight:600;border-radius:999px;padding:7px 13px;font-size:14px}.bignum{font-family:Fredoka;font-weight:700;font-size:46px;color:var(--accent)}.badge{text-align:center;border-radius:18px;padding:14px 8px;background:var(--card);box-shadow:var(--shadow-sm)}.badge .ic{font-size:32px}.badge.locked{background:#f6f2f8;box-shadow:none;opacity:.6}.badge.locked .ic{filter:grayscale(1)}.badge .bname{font-family:Fredoka;font-weight:600;font-size:12px;color:var(--ink);margin-top:5px}.mascot{animation:float 3s ease-in-out infinite;-webkit-user-select:none;user-select:none}.mascot.cheer{animation:cheer .6s ease}.bubble{background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;box-shadow:var(--shadow-sm);font-family:Fredoka;font-weight:500;position:relative}.shake{animation:shake .45s}.pop{animation:pop .35s ease}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes cheer{0%,to{transform:rotate(0) scale(1)}30%{transform:rotate(-8deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:50}.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.85}}.choices{display:flex;flex-wrap:wrap;gap:10px}.choice{font-size:26px;width:52px;height:52px;border-radius:15px;border:2px solid #efe7f0;background:#fbf7fb;cursor:pointer;display:grid;place-items:center;overflow:hidden;padding:0}.choice.on{border-color:var(--accent);background:#fff;transform:scale(1.05)}.choice svg{width:30px;height:42px;display:block}.theme-choice{flex:1;min-width:90px;border-radius:15px;border:2px solid #efe7f0;padding:10px;cursor:pointer;font-family:Fredoka;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}.theme-choice.on{outline:3px solid var(--ink)}.color-field{position:relative;display:block;height:96px;border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 8px 20px #3a325224;background:conic-gradient(from 90deg,#ff5e5e,#ff9f43,#ffe14d,#7be86a,#34d9c8,#4da6ff,#7b6cf0,#c86cf0,#f26fb2,#ff5e5e)}.color-field input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;border:none;padding:0;cursor:pointer}.color-field .cf-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.color-field .cf-label span{background:#ffffffeb;border-radius:999px;padding:10px 18px;font-family:Fredoka,sans-serif;font-weight:600;font-size:15px;color:var(--ink);box-shadow:0 4px 14px #00000024}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#3a325273;display:grid;place-items:center;padding:16px;z-index:60}.modal{background:var(--card);border-radius:26px;padding:22px;width:100%;max-width:420px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}@media (max-width: 420px){.bignum{font-size:38px}}