@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap";:root{--primary:#6c63ff;--primary-light:#a29bfe;--secondary:#ff6b9d;--accent:#ffc107;--green:#00c896;--red:#ff6057;--blue:#4fc3f7;--purple:#ce93d8;--orange:#ffb347;--bg:#f0f4ff;--card:#fff;--text:#2d3561;--text-light:#6b7280;--border:#e0e7ff;--shadow:0 8px 32px #6c63ff26;--shadow-sm:0 2px 12px #6c63ff1a;--radius:20px;--radius-sm:12px;--font:"Baloo 2", cursive;--font-body:"Nunito", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}.bg-numbers{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-num{font-family:var(--font);opacity:.045;color:var(--primary);-webkit-user-select:none;user-select:none;font-weight:800;animation:linear infinite floatNum;position:absolute}@keyframes floatNum{0%{transform:translateY(110vh)rotate(0)}to{transform:translateY(-20vh)rotate(360deg)}}.screen{z-index:1;min-height:100vh;padding:20px;animation:.4s fadeIn;display:none;position:relative}.screen.active{flex-direction:column;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--border);padding:28px}.btn{font-family:var(--font);cursor:pointer;border:none;border-radius:50px;outline:none;padding:12px 28px;font-size:1rem;font-weight:700;transition:all .2s;position:relative;overflow:hidden}.btn:after{content:"";opacity:0;background:#fff3;transition:opacity .2s;position:absolute;inset:0}.btn:hover:after{opacity:1}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:#fff;box-shadow:0 4px 16px #6c63ff59}.btn-secondary{background:linear-gradient(135deg, var(--secondary), #ff8ec7);color:#fff;box-shadow:0 4px 16px #ff6b9d59}.btn-success{background:linear-gradient(135deg, var(--green), #00e6a9);color:#fff;box-shadow:0 4px 16px #00c89659}.btn-accent{background:linear-gradient(135deg, var(--accent), #ffd54f);color:var(--text);box-shadow:0 4px 16px #ffc10759}.btn-outline{border:2.5px solid var(--primary);color:var(--primary);background:0 0}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.hud-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;max-width:800px;margin-bottom:16px;display:flex}.hud-chip{background:var(--card);font-family:var(--font);box-shadow:var(--shadow-sm);border:2px solid var(--border);border-radius:50px;align-items:center;gap:6px;padding:6px 16px;font-size:.9rem;font-weight:700;display:flex}.hud-chip .icon{font-size:1.1rem}.logo{font-family:var(--font);background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,6vw,3.5rem);font-weight:800;line-height:1.1}.subtitle{color:var(--text-light);text-align:center;margin-top:6px;font-size:1.05rem;font-weight:600}.age-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;width:100%;max-width:700px;margin-top:32px;display:grid}.age-card{background:var(--card);border-radius:var(--radius);text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);border:3px solid #0000;padding:28px 20px;transition:all .25s}.age-card:hover{box-shadow:var(--shadow);transform:translateY(-6px)}.age-card.selected{border-color:var(--primary);background:#f3f0ff}.age-card .emoji{margin-bottom:10px;font-size:3rem}.age-card h3{font-family:var(--font);color:var(--text);font-size:1.15rem;font-weight:800}.age-card p{color:var(--text-light);margin-top:4px;font-size:.85rem}.games-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;width:100%;max-width:800px;margin-top:20px;display:grid}.game-card{background:var(--card);border-radius:var(--radius);text-align:center;cursor:pointer;border:2.5px solid var(--border);box-shadow:var(--shadow-sm);padding:20px 14px;transition:all .25s}.game-card:hover{box-shadow:var(--shadow);border-color:var(--primary);transform:translateY(-5px)}.game-card .g-icon{margin-bottom:8px;font-size:2.2rem}.game-card h4{font-family:var(--font);color:var(--text);font-size:.9rem;font-weight:700;line-height:1.3}.xp-bar-wrap{background:var(--border);border-radius:50px;width:100%;max-width:300px;height:10px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg, var(--primary), var(--secondary));border-radius:50px;height:100%;transition:width .5s}.combo-banner{background:linear-gradient(135deg, var(--accent), var(--orange));color:var(--text);font-family:var(--font);z-index:1000;opacity:0;pointer-events:none;border-radius:50px;padding:10px 28px;font-size:1.3rem;font-weight:800;transition:all .3s;position:fixed;top:80px;left:50%;transform:translate(-50%)translateY(-20px);box-shadow:0 6px 24px #ffc10766}.combo-banner.show{opacity:1;transform:translate(-50%)translateY(0)}.feedback-overlay{z-index:999;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.feedback-msg{font-family:var(--font);opacity:0;text-shadow:0 4px 20px #0003;font-size:clamp(2rem,8vw,5rem);font-weight:800;transition:all .15s}.feedback-msg.correct{color:var(--green)}.feedback-msg.wrong{color:var(--red)}.feedback-msg.pop{opacity:1;transform:scale(1.2)}.confetti-piece{pointer-events:none;z-index:9999;border-radius:2px;width:10px;height:10px;animation:2s forwards confettiFall;position:fixed}@keyframes confettiFall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.shake{animation:.4s shake}@keyframes greenGlow{0%,to{box-shadow:var(--shadow)}50%{box-shadow:0 0 30px #00c89699}}.glow-green{animation:.6s greenGlow}@keyframes starPop{0%{opacity:1;transform:scale(0)rotate(-30deg)}60%{opacity:1;transform:scale(1.4)rotate(15deg)}to{opacity:0;transform:scale(0)rotate(45deg)}}.star-pop{pointer-events:none;z-index:9998;font-size:2rem;animation:.8s forwards starPop;position:fixed}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10000;background:#2d356199;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal-overlay.open{display:flex}.modal-box{background:var(--card);border-radius:var(--radius);text-align:center;width:100%;max-width:480px;padding:36px;animation:.3s fadeIn;box-shadow:0 20px 60px #0003}.modal-box h2{font-family:var(--font);color:var(--text);font-size:2rem;font-weight:800}.modal-box p{color:var(--text-light);margin:12px 0 20px;font-size:1rem}.match-area{grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:500px;display:grid}.match-col{flex-direction:column;gap:12px;display:flex}.match-item{background:var(--card);border-radius:var(--radius-sm);font-family:var(--font);text-align:center;border:2.5px solid var(--border);cursor:grab;box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;padding:14px 18px;font-size:1.1rem;font-weight:700;transition:all .2s}.match-item:hover{border-color:var(--primary);transform:scale(1.03)}.match-item.dragging{opacity:.5;cursor:grabbing}.match-slot{background:var(--bg);border-radius:var(--radius-sm);font-family:var(--font);text-align:center;border:2.5px dashed var(--border);justify-content:center;align-items:center;min-height:54px;padding:14px 18px;font-size:1.1rem;font-weight:700;transition:all .2s;display:flex}.match-slot.over{border-color:var(--primary);background:#f3f0ff}.match-slot.correct{border-color:var(--green);color:var(--green);background:#e8fff6}.match-slot.wrong{border-color:var(--red);background:#fff0ee;animation:.4s shake}.visual-container{background:var(--card);border-radius:var(--radius);border:2.5px solid var(--border);width:100%;max-width:520px;box-shadow:var(--shadow);text-align:center;padding:24px}.visual-question{font-family:var(--font);color:var(--primary);margin-bottom:16px;font-size:1.6rem;font-weight:800}.groups-display{flex-wrap:wrap;justify-content:center;gap:14px;margin:16px 0;display:flex}.group-box{background:var(--bg);border-radius:var(--radius-sm);border:2px solid var(--border);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;min-width:70px;padding:10px;animation:.3s fadeIn;display:flex}.obj-icon{font-size:1.5rem;animation:.3s popIn}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.ans-btns{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;display:flex}.ans-btn{width:64px;height:64px;font-family:var(--font);cursor:pointer;box-shadow:var(--shadow-sm);color:#fff;border:none;border-radius:50%;font-size:1.2rem;font-weight:800;transition:all .2s}.ans-btn:hover{transform:scale(1.1)}.ans-btn.correct-ans{background:linear-gradient(135deg, var(--green), #00e6a9)}.ans-btn.wrong-ans{background:linear-gradient(135deg, var(--red), #ff8a80)}.ans-btn.normal{background:linear-gradient(135deg, var(--primary), var(--primary-light))}.speed-arena{background:var(--card);border-radius:var(--radius);width:100%;max-width:480px;box-shadow:var(--shadow);border:2.5px solid var(--border);text-align:center;padding:28px}.speed-question{font-family:var(--font);background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:16px 0;font-size:clamp(2rem,8vw,3.5rem);font-weight:800}.speed-timer-bar{background:var(--border);border-radius:50px;width:100%;height:14px;margin:10px 0 20px;overflow:hidden}.speed-timer-fill{background:linear-gradient(90deg, var(--green), var(--accent));border-radius:50px;height:100%;transition:width .1s linear,background-color .3s}.speed-answers{grid-template-columns:1fr 1fr;gap:14px;display:grid}.speed-ans-btn{background:var(--bg);border:2.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text);padding:18px;font-size:1.4rem;font-weight:800;transition:all .2s}.speed-ans-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.04)}.speed-ans-btn.correct{background:var(--green);color:#fff;border-color:var(--green)}.speed-ans-btn.wrong{background:var(--red);color:#fff;border-color:var(--red)}.memory-grid{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:480px;display:grid}.mem-card{aspect-ratio:1;perspective:600px;cursor:pointer}.mem-card-inner{width:100%;height:100%;transform-style:preserve-3d;min-height:70px;transition:transform .5s;position:relative}.mem-card.flipped .mem-card-inner{transform:rotateY(180deg)}.mem-card-front,.mem-card-back{border-radius:var(--radius-sm);backface-visibility:hidden;font-family:var(--font);text-align:center;border:2.5px solid var(--border);justify-content:center;align-items:center;padding:6px;font-size:clamp(.75rem,2.5vw,1rem);font-weight:700;display:flex;position:absolute;inset:0}.mem-card-front{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:#fff;font-size:1.6rem}.mem-card-back{background:var(--card);color:var(--text);transform:rotateY(180deg)}.mem-card.matched .mem-card-back{background:linear-gradient(135deg, var(--green), #00e6a9);color:#fff;border-color:var(--green)}.runner-arena{border-radius:var(--radius);border:3px solid var(--border);width:100%;max-width:480px;height:220px;box-shadow:var(--shadow);background:linear-gradient(#c9f0ff 0%,#e8eeff 60%,#d4edc4 100%);position:relative;overflow:hidden}.runner-ground{border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(#8bc34a,#6d9b2a);height:40px;position:absolute;bottom:0;left:0;right:0}.runner-character{z-index:5;font-size:2.5rem;transition:transform .2s;animation:.5s steps(2,end) infinite runAnim;position:absolute;bottom:40px;left:50px}@keyframes runAnim{0%{transform:scaleX(1)translateY(0)}50%{transform:scaleX(1)translateY(-4px)}to{transform:scaleX(1)translateY(0)}}.runner-obstacle{background:var(--card);border:2.5px solid var(--primary);font-family:var(--font);color:var(--primary);white-space:nowrap;box-shadow:var(--shadow-sm);z-index:5;border-radius:12px;padding:8px 12px;font-size:1rem;font-weight:700;position:absolute;bottom:40px;right:-80px}.runner-ans-row{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:480px;margin-top:12px;display:flex}.runner-ans{min-width:70px;font-family:var(--font);background:var(--card);border:2.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text);text-align:center;flex:1;padding:12px 8px;font-size:1.1rem;font-weight:800;transition:all .2s}.runner-ans:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.runner-speed{background:repeating-linear-gradient(90deg,#fff6 0 30px,#0000 30px 60px);height:8px;animation:.5s linear infinite roadMove;position:absolute;bottom:40px;left:0;right:0}@keyframes roadMove{0%{background-position:0}to{background-position:-60px}}.grid-instruction{font-family:var(--font);color:var(--primary);text-align:center;margin-bottom:12px;font-size:1.2rem;font-weight:700}.number-grid{grid-template-columns:repeat(8,1fr);gap:6px;width:100%;max-width:480px;display:grid}.grid-cell{aspect-ratio:1;border:2px solid var(--border);background:var(--card);font-family:var(--font);cursor:pointer;color:var(--text);box-shadow:var(--shadow-sm);border-radius:8px;justify-content:center;align-items:center;font-size:clamp(.65rem,2vw,.9rem);font-weight:700;transition:all .2s;display:flex}.grid-cell:hover{border-color:var(--primary);background:#f3f0ff;transform:scale(1.08)}.grid-cell.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.grid-cell.correct{background:var(--green);color:#fff;border-color:var(--green)}.grid-cell.wrong-sel{background:var(--red);color:#fff;border-color:var(--red);animation:.4s shake}.grid-cell.revealed{background:linear-gradient(135deg, var(--green), #00e6a9);color:#fff;border-color:var(--green)}.practice-table-list{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px;width:100%;max-width:560px;margin:16px 0;display:grid}.practice-num-btn{aspect-ratio:1;border-radius:var(--radius-sm);border:2.5px solid var(--border);background:var(--card);font-family:var(--font);cursor:pointer;color:var(--text);box-shadow:var(--shadow-sm);justify-content:center;align-items:center;font-size:1rem;font-weight:800;transition:all .2s;display:flex}.practice-num-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.08)}.practice-num-btn.mastered{background:linear-gradient(135deg, var(--green), #00e6a9);color:#fff;border-color:var(--green)}.practice-step{background:var(--card);border-radius:var(--radius-sm);border:2px solid var(--border);box-shadow:var(--shadow-sm);align-items:center;gap:14px;padding:14px 20px;animation:.3s fadeIn;display:flex}.practice-step .eq{font-family:var(--font);color:var(--text);min-width:100px;font-size:1.2rem;font-weight:700}.practice-step .eq-ans{font-family:var(--font);color:var(--primary);font-size:1.4rem;font-weight:800}.practice-dots{flex-wrap:wrap;gap:4px;max-width:180px;display:flex}.practice-dot{border-radius:50%;width:12px;height:12px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;width:100%;max-width:600px;margin-top:20px;display:grid}.dash-card{background:var(--card);border-radius:var(--radius);text-align:center;border:2.5px solid var(--border);box-shadow:var(--shadow-sm);padding:18px}.dash-card .big{font-family:var(--font);color:var(--primary);font-size:1.8rem;font-weight:800}.dash-card .lbl{color:var(--text-light);margin-top:4px;font-size:.8rem;font-weight:600}.table-badges{flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px;margin-top:12px;display:flex}.table-badge{font-family:var(--font);background:var(--bg);border:2px solid var(--border);color:var(--text-light);border-radius:50px;padding:6px 14px;font-size:.85rem;font-weight:700}.table-badge.done{background:linear-gradient(135deg, var(--green), #00e6a9);color:#fff;border-color:var(--green)}@media (width<=500px){.card{padding:18px}.memory-grid{grid-template-columns:repeat(4,1fr);gap:6px}.number-grid{grid-template-columns:repeat(6,1fr)}.move-btn-row{gap:10px}.speed-answers{grid-template-columns:1fr 1fr}}@media (width>=768px){.catch-arena{height:520px}}.back-btn{color:var(--text-light);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;align-self:flex-start;align-items:center;gap:6px;padding:6px 0;font-size:.95rem;font-weight:700;transition:color .2s;display:flex}.back-btn:hover{color:var(--primary)}
