:root{--pink: #ff6ec7;--pink-deep: #e84fae;--purple: #a06bff;--purple-deep: #7c4dff;--yellow: #ffd166;--blue: #8ec5ff;--green: #7ed957;--ink: #3a2a5d;--white: #ffffff;--card-radius: 26px;font-family:"Baloo 2",Comic Sans MS,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--ink);background:linear-gradient(160deg,#ffe1f4,#e5d5ff 45%,#d5ecff);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}.bg-decor{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.floaty{position:absolute;font-size:2.4rem;opacity:.7;animation:float 7s ease-in-out infinite}.f1{top:12%;left:8%;animation-delay:0s}.f2{top:24%;right:10%;animation-delay:1.2s;font-size:3rem}.f3{top:62%;left:12%;animation-delay:2s}.f4{top:72%;right:14%;animation-delay:.6s;font-size:3.4rem}.f5{top:40%;left:46%;animation-delay:1.8s;font-size:3.2rem;opacity:.5}.f6{top:84%;left:40%;animation-delay:2.6s;font-size:2.8rem}@keyframes float{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(6deg)}}.screen{position:relative;z-index:1;width:100%;max-width:560px;background:#ffffffb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--card-radius);box-shadow:0 18px 50px #7c4dff40;padding:28px 26px 34px;text-align:center;animation:pop-in .4s cubic-bezier(.18,1.25,.4,1)}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}.mascot{line-height:1}.mascot.big{font-size:5rem}.mascot.small{font-size:3rem}.bounce{animation:bounce 1.8s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-16px)}}.title{font-size:2.3rem;margin:10px 0 4px;color:var(--purple-deep);text-shadow:0 3px 0 rgba(255,255,255,.8)}.title-accent{color:var(--pink-deep)}.subtitle{margin:0 0 18px;font-size:1.1rem;color:var(--ink);opacity:.75}.picker{margin:14px 0}.picker-label{font-size:1rem;text-transform:uppercase;letter-spacing:1px;color:var(--purple-deep);margin:0 0 10px;opacity:.85}.op-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.op-card{border:3px solid transparent;border-radius:20px;background:var(--white);padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:1.05rem;font-weight:700;color:var(--ink);box-shadow:0 6px #a06bff2e;transition:transform .12s,box-shadow .12s,border-color .12s}.op-card:hover{transform:translateY(-2px)}.op-card:active{transform:translateY(2px);box-shadow:0 2px #a06bff2e}.op-card.selected{border-color:var(--pink);background:linear-gradient(160deg,#fff,#ffe6f6);box-shadow:0 6px 0 var(--pink-deep)}.op-emoji{font-size:2rem}.level-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.level-chip{border:3px solid transparent;border-radius:999px;background:var(--white);padding:10px 18px;font-size:1rem;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:0 5px #a06bff2e;transition:transform .12s,box-shadow .12s,border-color .12s}.level-chip.selected{border-color:var(--purple);background:linear-gradient(160deg,#fff,#efe6ff);box-shadow:0 5px 0 var(--purple-deep)}.start-btn{margin-top:22px;border:none;border-radius:999px;background:linear-gradient(120deg,var(--pink),var(--purple));color:#fff;font-size:1.5rem;font-weight:800;padding:16px 44px;cursor:pointer;box-shadow:0 8px 0 var(--purple-deep);transition:transform .12s,box-shadow .12s}.start-btn:hover{transform:translateY(-2px)}.start-btn:active{transform:translateY(4px);box-shadow:0 4px 0 var(--purple-deep)}.ghost-btn{border:3px solid var(--purple);border-radius:999px;background:transparent;color:var(--purple-deep);font-size:1.05rem;font-weight:700;padding:12px 26px;cursor:pointer;transition:transform .12s,background .12s}.ghost-btn:hover{background:#a06bff1f;transform:translateY(-2px)}.quiz-topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.quit-btn{border:none;background:var(--white);border-radius:50%;width:44px;height:44px;font-size:1.2rem;cursor:pointer;box-shadow:0 4px #a06bff2e;flex-shrink:0}.progress-track{flex:1;height:16px;background:#ffffffe6;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px #7c4dff26}.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));border-radius:999px;transition:width .4s ease}.score-pill{background:var(--yellow);border-radius:999px;padding:8px 14px;font-weight:800;color:var(--ink);box-shadow:0 4px #e6aa2899;flex-shrink:0}.streak-row{display:flex;justify-content:space-between;align-items:center;min-height:26px;margin-bottom:6px;font-weight:700}.qcount{color:var(--ink);opacity:.7}.streak-flame{color:var(--pink-deep);animation:wiggle .8s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.question-card{background:linear-gradient(160deg,#fff,#f3ecff);border-radius:24px;padding:22px 18px 26px;margin:8px 0 20px;box-shadow:0 10px #a06bff2e;transition:transform .15s,box-shadow .15s}.question-card.right{box-shadow:0 10px 0 var(--green);transform:scale(1.02)}.question-card.wrong{box-shadow:0 10px 0 var(--pink-deep);animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.question-text{font-size:2.8rem;font-weight:800;color:var(--purple-deep);margin-top:6px}.equals{color:var(--pink-deep)}.answers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.answer-btn{border:none;border-radius:20px;background:var(--white);font-size:2rem;font-weight:800;color:var(--ink);padding:20px 0;cursor:pointer;box-shadow:0 6px #a06bff40;transition:transform .1s,box-shadow .1s,background .2s}.answer-btn:hover:not(:disabled){transform:translateY(-3px)}.answer-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px #a06bff40}.answer-btn.correct{background:linear-gradient(160deg,#b7f5a0,#7ed957);color:#1f5b12;box-shadow:0 6px #4fae2f;animation:pulse .5s}.answer-btn.incorrect{background:linear-gradient(160deg,#ffc2dd,#ff8fbc);color:#7a1440;box-shadow:0 6px 0 var(--pink-deep)}.answer-btn.dimmed{opacity:.45}.answer-btn:disabled{cursor:default}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.feedback{min-height:34px;margin-top:16px;font-size:1.4rem;font-weight:800}.feedback.right{color:var(--green);animation:pop-in .3s}.feedback.wrong{color:var(--pink-deep)}.stars-display{margin:10px 0 6px}.big-star{font-size:3.4rem;display:inline-block}.big-star.earned{animation:star-pop .5s backwards;color:var(--yellow)}.big-star.earned:nth-child(1){animation-delay:.1s}.big-star.earned:nth-child(2){animation-delay:.3s}.big-star.earned:nth-child(3){animation-delay:.5s}.big-star.empty{opacity:.4}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.score-line{font-size:1.3rem;margin:14px 0 22px}.results-actions{display:flex;flex-direction:column;gap:12px;align-items:center}.slime-screen{max-width:900px;padding:20px 20px 24px}.slime-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.slime-title{flex:1;text-align:center;font-size:1.35rem;font-weight:800;color:var(--purple-deep)}.game-frame{position:relative;width:100%;border-radius:22px;overflow:hidden;border:3px solid #2a2a36;box-shadow:0 18px 44px #140a3266;line-height:0}.game-canvas{width:100%;height:auto;display:block;image-rendering:pixelated;touch-action:none}.hint-badge{position:absolute;top:12px;left:14px;background:#14141a9e;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:7px 13px;border-radius:12px;font-size:.85rem;font-weight:600;color:#d7d7e4;line-height:1.3;max-width:70%}.quiz-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a10bd;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;line-height:normal}.overlay-card{width:100%;max-width:440px;background:linear-gradient(180deg,#fff,#f3ecff);border-radius:26px;padding:24px 22px 20px;text-align:center;box-shadow:0 20px 50px #00000080;animation:pop-in .28s cubic-bezier(.18,1.25,.4,1)}.overlay-tag{font-size:.8rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink-deep);margin-bottom:14px}.overlay-question{display:flex;align-items:center;justify-content:center;gap:10px;font-size:2.6rem;font-weight:800;color:var(--purple-deep);margin-bottom:20px}.overlay-question .op{color:var(--pink-deep)}.overlay-question .eq{color:#b7a9d6}.overlay-answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.answer-btn.incorrect{animation:shake .4s}.game-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}.move-cluster{display:flex;gap:12px}.move-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-size:1.7rem;width:70px;height:70px;border-radius:20px;background:var(--white);color:var(--purple-deep);touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 6px #a06bff40;transition:transform .08s,background .15s}.move-btn:active{transform:scale(.92);background:var(--purple);color:#fff;box-shadow:0 2px 0 var(--purple-deep)}.controls-hint{flex:1;min-width:130px;text-align:center;font-size:.8rem;font-weight:600;color:var(--ink);opacity:.55}.jump-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:1.15rem;padding:0 28px;height:70px;border-radius:20px;background:linear-gradient(120deg,var(--pink),var(--purple));color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 6px 0 var(--purple-deep);transition:transform .08s}.jump-btn:active{transform:scale(.92);box-shadow:0 2px 0 var(--purple-deep)}@media(max-width:480px){.title{font-size:1.9rem}.question-text{font-size:2.2rem}.answer-btn{font-size:1.6rem;padding:16px 0}.mascot.big{font-size:4rem}.slime-title{font-size:1.05rem}.overlay-question{font-size:2rem;gap:8px}.move-btn,.jump-btn{height:62px}.move-btn{width:62px;font-size:1.4rem}.controls-hint{flex-basis:100%;order:3}}
