*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--bg:#1a1a2e;--card:#16213e;--text:#eee;--dim:#89a;--accent:#00d4aa;--radius:16px;--font:"Comic Sans MS","Segoe UI",system-ui,-apple-system,sans-serif}body,html{font-family:var(--font);background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:var(--text);overscroll-behavior:none}.app{min-height:100vh;padding:20px 16px;max-width:600px;margin:0 auto}.app,.home-container{display:flex;flex-direction:column;align-items:center}.home-container{width:100%;gap:16px}.logo-area{text-align:center;padding:20px 0}.app-title{font-size:42px;font-weight:800;color:gold;text-shadow:0 3px 10px rgba(0,0,0,.3);letter-spacing:-1px}.app-subtitle{font-size:18px;color:#fff;opacity:.9;margin-top:4px}.total-stars{margin-top:12px;display:flex;align-items:center;gap:6px;background:hsla(0,0%,100%,.15);padding:8px 16px;border-radius:20px}.big-star{font-size:24px}.star-count{font-size:22px;font-weight:800;color:gold}.star-label{font-size:13px;color:#fff;opacity:.8}.section-title{font-size:18px;font-weight:700;color:#fff;margin-top:8px;margin-bottom:4px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px;width:100%}.mode-card{background:hsla(0,0%,100%,.95);border:4px solid var(--card-color,#4caf50);border-radius:var(--radius);padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s;color:#333}.mode-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}.mode-card:active{transform:scale(.95)}.mode-icon{font-size:36px}.mode-label{font-size:20px;font-weight:800}.mode-desc{font-size:12px;color:#666;text-align:center}.level-row{display:flex;gap:10px;width:100%}.level-btn{flex:1 1;background:hsla(0,0%,100%,.95);border:3px solid var(--level-color,#4caf50);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s;color:#333}.level-btn:hover{transform:translateY(-2px)}.level-btn:active{transform:scale(.96)}.level-btn.active{background:var(--level-color,#4caf50);color:#fff;transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.25)}.level-name{font-size:18px;font-weight:800}.level-stars{font-size:12px}.level-range{font-size:11px;opacity:.7}.sound-toggle{margin-top:8px}.sound-btn{background:hsla(0,0%,100%,.2);border:2px solid hsla(0,0%,100%,.3);border-radius:20px;padding:8px 20px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.sound-btn.on{background:rgba(0,212,170,.3);border-color:var(--accent)}.sound-btn:hover{background:hsla(0,0%,100%,.3)}.play-btn{width:100%;background:var(--play-color,#4caf50);color:#fff;border:none;border-radius:20px;padding:22px;font-size:28px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:8px;box-shadow:0 6px 20px rgba(0,0,0,.2);font-family:var(--font)}.play-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}.play-btn:active{transform:scale(.97)}.game-topbar{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.back-btn{background:hsla(0,0%,100%,.2);border:none;border-radius:12px;width:44px;height:44px;font-size:22px;cursor:pointer;transition:all .15s}.back-btn:active{transform:scale(.9)}.game-info{display:flex;gap:8px;align-items:center}.game-level-badge,.game-mode-badge{padding:6px 14px;border-radius:10px;font-size:14px;font-weight:700;color:#fff}.game-level-badge{background:hsla(0,0%,100%,.2)}.game-score{display:flex;gap:8px;align-items:center}.score-display{font-size:18px;font-weight:800;color:gold}.streak-badge{background:#ff6b35;padding:4px 10px;border-radius:10px;font-size:13px;font-weight:700;color:#fff;animation:pulse .8s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.progress-bar-container{width:100%;height:28px;background:hsla(0,0%,100%,.15);border-radius:14px;position:relative;margin-bottom:16px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:14px;transition:width .5s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}.question-card{width:100%;background:#fff;border-radius:24px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 10px 40px rgba(0,0,0,.2)}.question-text{font-size:28px;font-weight:800;color:#333;text-align:center}.big-q{font-size:40px}.emoji-display{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:400px;padding:12px}.emoji-item{font-size:36px;animation:pop-in .3s ease-out backwards}.emoji-item.small{font-size:22px}.emoji-item.crossed{opacity:.3;text-decoration:line-through;-webkit-text-decoration-color:#f44336;text-decoration-color:#f44336;text-decoration-thickness:3px}@keyframes pop-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.emoji-display-group{display:flex;flex-direction:column;align-items:center;gap:8px}.emoji-group{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:350px;padding:8px 12px;background:#f8f8f8;border-radius:12px}.operator{font-size:28px;font-weight:800;color:#2196f3}.mul-visual{flex-direction:column;align-items:center}.mul-row,.mul-visual{display:flex;gap:4px}.div-visual{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.div-group{background:#f0f0f0;border-radius:12px;padding:8px 12px}.div-group-items{display:flex;gap:2px}.hint-text{font-size:14px;color:#888;font-weight:600}.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px;width:100%;max-width:400px}.answer-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:16px;padding:24px;font-size:32px;font-weight:800;cursor:pointer;transition:all .2s;font-family:var(--font)}.answer-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}.answer-btn:active{transform:scale(.95)}.answer-btn:disabled{cursor:default;opacity:.7}.answer-btn.correct{background:linear-gradient(135deg,#4caf50,#45a049);animation:correct-pulse .6s;opacity:1;transform:scale(1.05)}.answer-btn.wrong{background:linear-gradient(135deg,#f44336,#d32f2f);animation:shake .4s;opacity:1}.answer-btn.reveal{background:linear-gradient(135deg,#4caf50,#45a049);animation:reveal-glow .5s;opacity:1}@keyframes correct-pulse{0%,to{transform:scale(1.05)}50%{transform:scale(1.15)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes reveal-glow{0%{box-shadow:0 0 0 rgba(76,175,80,0)}50%{box-shadow:0 0 30px rgba(76,175,80,.6)}to{box-shadow:0 0 0 rgba(76,175,80,0)}}.feedback{display:flex;align-items:center;gap:10px;padding:14px 24px;border-radius:14px;font-size:18px;font-weight:700;animation:slide-up .4s ease-out}.feedback.correct{background:#e8f5e9;color:#2e7d32}.feedback.wrong{background:#fff3e0;color:#e65100}.feedback-emoji{font-size:28px}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.results-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}.results-title{font-size:36px;font-weight:800;color:gold;text-shadow:0 3px 10px rgba(0,0,0,.3)}.results-message{font-size:20px;color:#fff;font-weight:700;text-align:center}.results-stars{padding:16px;background:hsla(0,0%,100%,.15);border-radius:20px}.star-row{display:flex;gap:8px;justify-content:center}.star{font-size:36px;opacity:.2;transition:all .3s}.star.filled{opacity:1;animation:star-pop .5s ease-out;filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}@keyframes star-pop{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.results-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;width:100%;max-width:450px}.stat-card{background:hsla(0,0%,100%,.95);border-radius:14px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#333}.stat-icon{font-size:24px}.stat-value{font-size:22px;font-weight:800}.stat-label{font-size:11px;color:#666;font-weight:600}.total-stars-display{display:flex;align-items:center;gap:8px;background:rgba(255,215,0,.2);border:2px solid rgba(255,215,0,.4);border-radius:16px;padding:10px 20px;font-size:18px;font-weight:700;color:gold}.results-buttons{display:flex;gap:12px;width:100%;max-width:400px;margin-top:8px}.play-again-btn{flex:1 1;background:var(--play-color,#4caf50);color:#fff;border:none;border-radius:16px;padding:18px;font-size:20px;font-weight:800;cursor:pointer;transition:all .2s;font-family:var(--font)}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}.play-again-btn:active{transform:scale(.96)}.home-btn{flex:1 1;background:hsla(0,0%,100%,.2);color:#fff;border:2px solid hsla(0,0%,100%,.3);border-radius:16px;padding:18px;font-size:20px;font-weight:800;cursor:pointer;transition:all .2s;font-family:var(--font)}.home-btn:hover{background:hsla(0,0%,100%,.3)}.home-btn:active{transform:scale(.96)}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;overflow:hidden}.confetti-piece{position:absolute;top:-20px;border-radius:2px;animation:confetti-fall linear forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(2turn);opacity:0}}@media (max-width:480px){.app-title{font-size:32px}.app-subtitle{font-size:15px}.mode-grid{grid-template-columns:repeat(2,1fr)}.mode-icon{font-size:28px}.mode-label{font-size:16px}.mode-desc{font-size:11px}.level-name{font-size:15px}.question-text{font-size:22px}.big-q{font-size:32px}.emoji-item{font-size:28px}.answer-btn{padding:18px;font-size:26px}.play-btn{padding:18px;font-size:24px}.results-stats{grid-template-columns:repeat(3,1fr)}.stat-value{font-size:18px}.results-title,.star{font-size:28px}.results-message{font-size:16px}}@media (max-width:360px){.mode-grid{grid-template-columns:1fr}.answer-grid{grid-template-columns:repeat(2,1fr)}}