*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6c5ce7;--primary-light: #a29bfe;--success: #00b894;--danger: #e74c3c;--warning: #fdcb6e;--bg: #0f0f23;--bg-card: #1a1a2e;--bg-card-hover: #25254a;--text: #f0f0f0;--text-dim: #a0a0b0;--radius: 16px;--shadow: 0 8px 32px rgba(0,0,0,.3)}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#16213e)}.app-container{max-width:800px;margin:0 auto;padding:16px;min-height:100vh}.screen{animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@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:shake .5s ease}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.2)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.btn-primary{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;border:none;padding:14px 32px;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #6c5ce766}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce799}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-dim);border:2px solid #333;padding:12px 28px;border-radius:50px;font-size:1rem;cursor:pointer;transition:all .3s}.btn-secondary:hover{border-color:var(--primary);color:var(--text)}.btn-back{background:#ffffff1a;border:none;color:var(--text);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.9rem;transition:background .3s}.btn-back:hover{background:#fff3}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:90vh;gap:32px;text-align:center}.welcome-hero{animation:fadeIn .6s ease}.welcome-icon{font-size:5rem;margin-bottom:16px;animation:pulse 2s infinite}.welcome-screen h1{font-size:2.8rem;background:linear-gradient(135deg,#f39c12,#e74c3c,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-dim);font-size:1.1rem;margin-top:8px}.welcome-form{background:var(--bg-card);padding:32px;border-radius:var(--radius);width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}.form-group label{display:block;margin-bottom:8px;color:var(--text-dim);font-size:.95rem}.form-group input{width:100%;padding:12px 16px;border:2px solid #333;border-radius:12px;background:#ffffff0d;color:var(--text);font-size:1rem;outline:none;transition:border-color .3s}.form-group input:focus{border-color:var(--primary)}.grade-buttons{display:flex;gap:8px;flex-wrap:wrap}.grade-btn{flex:1;min-width:100px;padding:10px 12px;border:2px solid #333;border-radius:12px;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .3s;font-size:.85rem}.grade-btn.active{border-color:var(--primary);background:#6c5ce733;color:var(--text)}.btn-start{width:100%;margin-top:8px;font-size:1.2rem;padding:16px}.welcome-features{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.feature{background:var(--bg-card);padding:10px 20px;border-radius:50px;font-size:.9rem;color:var(--text-dim)}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:8px 0}.player-info{display:flex;gap:16px;align-items:center}.player-name{font-weight:600}.player-stars{color:#f39c12}.player-grade{background:#6c5ce733;padding:4px 12px;border-radius:20px;font-size:.8rem;color:var(--primary-light)}.screen-title{text-align:center;font-size:1.8rem;margin-bottom:24px}.worlds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}.world-card{background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);padding:24px;cursor:pointer;transition:all .3s;text-align:left;color:var(--text);display:flex;flex-direction:column;gap:12px}.world-card:hover{transform:translateY(-4px);border-color:var(--world-color);box-shadow:0 8px 30px #0006;background:var(--bg-card-hover)}.world-icon{font-size:2.5rem}.world-card h3{font-size:1.3rem}.world-card p{color:var(--text-dim);font-size:.9rem;line-height:1.5}.world-progress{display:flex;align-items:center;gap:12px}.progress-bar{flex:1;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--success);border-radius:4px;transition:width .5s ease}.world-progress span{font-size:.85rem;color:var(--text-dim)}.world-subjects{display:flex;gap:8px;flex-wrap:wrap}.subject-tag{background:#ffffff14;padding:4px 10px;border-radius:20px;font-size:.75rem;color:var(--text-dim)}.stages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.stage-card{background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);padding:20px;cursor:pointer;transition:all .3s;text-align:center;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:8px}.stage-card:hover:not(.locked){transform:translateY(-3px);border-color:var(--primary);background:var(--bg-card-hover)}.stage-card.completed{border-color:var(--success)}.stage-card.locked{opacity:.4;cursor:not-allowed}.stage-number{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700}.stage-card.completed .stage-number{background:linear-gradient(135deg,var(--success),#55efc4)}.stage-card.locked .stage-number{background:#333}.stage-icon{font-size:2rem}.stage-card h4{font-size:1rem}.stage-desc{color:var(--text-dim);font-size:.8rem}.stage-info{display:flex;gap:12px;font-size:.8rem;color:var(--text-dim)}.stage-stars{color:#f39c12}.battle-screen{padding-bottom:32px}.battle-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.battle-info{display:flex;gap:16px;align-items:center;font-size:.9rem}.battle-hp{letter-spacing:2px}.combo-badge{background:linear-gradient(135deg,#f39c12,#e74c3c);padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;animation:pulse .5s ease}.battle-progress{display:flex;align-items:center;gap:12px;margin-bottom:20px}.battle-progress span{font-size:.85rem;color:var(--text-dim);white-space:nowrap}.timer-ring{width:64px;height:64px;border-radius:50%;border:4px solid var(--timer-color);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:border-color .3s}.timer-text{font-size:1.4rem;font-weight:700;color:var(--timer-color)}.float-text{text-align:center;font-size:1.2rem;font-weight:600;animation:floatUp 1.5s ease forwards;margin-bottom:8px}.question-card{background:var(--bg-card);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}.question-meta{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.q-subject,.q-type,.q-diff{background:#ffffff14;padding:4px 12px;border-radius:20px;font-size:.8rem;color:var(--text-dim)}.question-text{font-size:1.2rem;line-height:1.7;margin-bottom:24px}.options-grid{display:flex;flex-direction:column;gap:12px}.option-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;border:2px solid #333;border-radius:14px;background:transparent;color:var(--text);cursor:pointer;transition:all .3s;font-size:1rem;text-align:left}.option-btn:hover:not(:disabled){border-color:var(--primary);background:#6c5ce71a}.option-btn.correct{border-color:var(--success);background:#00b89426}.option-btn.wrong{border-color:var(--danger);background:#e74c3c26}.option-letter{width:32px;height:32px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.option-btn.correct .option-letter{background:var(--success);color:#fff}.option-btn.wrong .option-letter{background:var(--danger);color:#fff}.tf-buttons{display:flex;gap:16px}.tf-btn{flex:1;padding:16px;border:2px solid #333;border-radius:14px;background:transparent;color:var(--text);cursor:pointer;font-size:1.1rem;transition:all .3s}.tf-btn:hover:not(:disabled){border-color:var(--primary)}.tf-btn.correct{border-color:var(--success);background:#00b89426}.tf-btn.wrong{border-color:var(--danger);background:#e74c3c26}.fill-blank{display:flex;gap:12px}.fill-blank input{flex:1;padding:12px 16px;border:2px solid #333;border-radius:12px;background:#ffffff0d;color:var(--text);font-size:1rem;outline:none}.fill-blank input:focus{border-color:var(--primary)}.btn-submit{padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:1rem;transition:opacity .3s}.btn-submit:disabled{opacity:.5}.explanation-box{margin-top:20px;padding:20px;background:#ffffff0d;border-radius:12px;border-left:4px solid var(--primary)}.explanation-title{font-weight:600;margin-bottom:8px;font-size:1.05rem}.explanation-box p{color:var(--text-dim);line-height:1.6;margin-bottom:16px}.btn-next{width:100%}.result-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:32px;text-align:center}.result-hero{animation:fadeIn .6s ease}.result-emoji{font-size:5rem;margin-bottom:16px;animation:pulse 1.5s infinite}.result-hero h2{font-size:2rem}.result-sub{color:var(--text-dim);margin-top:8px}.result-stats{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.stat-card{background:var(--bg-card);padding:20px 28px;border-radius:var(--radius);min-width:120px}.stat-value{font-size:1.6rem;font-weight:700;margin-bottom:4px}.stat-label{color:var(--text-dim);font-size:.85rem}.result-bar-visual{width:100%;max-width:400px}.result-bar{height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden}.result-bar-fill{height:100%;border-radius:6px;transition:width 1s ease}.result-bar-fill.passed{background:linear-gradient(90deg,var(--success),#55efc4)}.result-bar-fill.failed{background:linear-gradient(90deg,var(--danger),#ff7675)}.result-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}@media(max-width:600px){.welcome-screen h1{font-size:2rem}.worlds-grid{grid-template-columns:1fr}.stages-grid{grid-template-columns:repeat(2,1fr)}.question-card{padding:20px}.question-text{font-size:1.05rem}.tf-buttons,.fill-blank{flex-direction:column}.result-stats{flex-direction:column;align-items:center}}.mode-select-screen{padding-bottom:40px}.mode-back{margin-bottom:16px}.mode-subtitle{text-align:center;color:var(--text-dim);margin-bottom:20px}.mode-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:16px}.mode-card{background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);padding:24px;cursor:pointer;transition:all .3s;text-align:center;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:8px}.mode-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0006}.mode-classic:hover{border-color:#e74c3c}.mode-runner:hover{border-color:#3498db}.mode-parkour:hover{border-color:#2ecc71}.mode-icon{font-size:3rem;margin-bottom:4px}.mode-card h3{font-size:1.2rem}.mode-card p{color:var(--text-dim);font-size:.85rem;line-height:1.5}.mode-tag{background:#6c5ce733;color:var(--primary-light);padding:4px 12px;border-radius:20px;font-size:.75rem;margin-top:4px}.subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.subject-card{background:var(--bg-card);border:2px solid transparent;border-radius:14px;padding:16px 8px;cursor:pointer;transition:all .3s;text-align:center;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:6px}.subject-card:hover{border-color:var(--primary);transform:translateY(-2px);background:var(--bg-card-hover)}.subject-icon{font-size:2rem}.subject-name{font-size:.9rem}.subject-header{text-align:center;margin-bottom:24px}.subject-big-icon{font-size:4rem;display:block;margin-bottom:8px}.subject-header h2{font-size:1.8rem}.subject-header p{color:var(--text-dim);margin-top:4px}.subject-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.subject-level-card{background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);padding:20px;transition:all .3s}.subject-level-card.completed{border-color:var(--success)}.subject-level-card.locked{opacity:.4}.level-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.level-num{font-weight:700;font-size:1.1rem}.level-diff{font-size:.8rem}.level-preview{margin-bottom:12px}.level-q-preview{color:var(--text-dim);font-size:.8rem;padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-modes{display:flex;gap:8px}.level-mode-btn{flex:1;padding:8px;border:1px solid #444;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font-size:.8rem;transition:all .3s}.level-mode-btn:hover{border-color:var(--primary);background:#6c5ce726}.runner-game{position:relative}.runner-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.runner-score{font-weight:700;font-size:1.1rem}.runner-progress{color:var(--text-dim);font-size:.9rem}.runner-question{background:var(--bg-card);padding:16px 20px;border-radius:14px;margin-bottom:12px;text-align:center}.runner-question h3{font-size:1.1rem;line-height:1.6}.runner-timer-bar{height:6px;background:#ffffff1a;border-radius:3px;margin-bottom:12px;overflow:hidden}.runner-timer-fill{height:100%;border-radius:3px;transition:width 1s linear}.runner-scene{position:relative;height:300px;background:linear-gradient(180deg,#1a1a3e,#2d2d5e 40%,#3a5a3a,#2d4a2d);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}.runner-bg{position:absolute;inset:0;pointer-events:none}.runner-cloud{position:absolute;font-size:2rem;opacity:.5;animation:cloudFloat 8s linear infinite}.cloud1{top:10%;left:10%;animation-delay:0s}.cloud2{top:5%;left:50%;animation-delay:-3s}.cloud3{top:15%;left:80%;animation-delay:-5s}@keyframes cloudFloat{0%{transform:translate(0)}to{transform:translate(-200px)}}.runner-trees{position:absolute;bottom:35%;left:0;font-size:1.5rem;letter-spacing:20px;opacity:.6}.big-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8rem;z-index:20;animation:bigFeedback 1.5s ease forwards;text-shadow:0 0 40px rgba(0,0,0,.8)}.big-x{color:#e74c3c}.big-check{color:#2ecc71}@keyframes bigFeedback{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.runner-doors{position:absolute;top:20%;left:0;right:0;display:flex;height:40%;z-index:5}.runner-door{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}.door-frame{width:80%;height:85%;background:linear-gradient(180deg,#5a4a3a,#4a3a2a);border:3px solid #8a7a6a;border-radius:12px 12px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:all .3s;position:relative}.door-frame:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;height:16px;background:#6a5a4a;border-radius:8px 8px 0 0}.door-label{width:32px;height:32px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.door-text{font-size:.8rem;text-align:center;padding:0 8px;line-height:1.3;max-height:3.9em;overflow:hidden}.door-hover .door-frame{border-color:#f39c12;box-shadow:0 0 20px #f39c1266;transform:scale(1.05)}.door-correct .door-frame{border-color:var(--success);background:linear-gradient(180deg,#1a5a3a,#0a4a2a);box-shadow:0 0 30px #00b89480}.door-wrong .door-frame{border-color:var(--danger);background:linear-gradient(180deg,#5a1a1a,#4a0a0a);box-shadow:0 0 30px #e74c3c80}.runner-road{position:absolute;bottom:0;left:0;right:0;height:30%;display:flex;background:#555}.road-lane{position:relative;border-right:2px dashed rgba(255,255,255,.2)}.lane-line{position:absolute;bottom:50%;left:50%;width:4px;height:30px;background:#ffffff4d;transform:translate(-50%)}.runner-character{position:absolute;bottom:5%;transform:translate(-50%);z-index:10;transition:left .3s ease;text-align:center}.character-body{display:flex;flex-direction:column;align-items:center;line-height:1}.char-head{font-size:2rem}.char-torso{font-size:1.2rem}.char-legs{font-size:.8rem;letter-spacing:2px}.char-idle .character-body{animation:charBounce 1s ease infinite}.char-happy .char-head{font-size:2.5rem}.char-sad{animation:shake .5s ease}@keyframes charBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.runner-controls{display:flex;gap:12px;justify-content:center}.ctrl-btn{padding:12px 24px;border:2px solid #444;border-radius:14px;background:var(--bg-card);color:var(--text);cursor:pointer;font-size:1rem;transition:all .3s}.ctrl-btn:hover{border-color:var(--primary)}.ctrl-confirm{background:linear-gradient(135deg,var(--primary),#8b5cf6);border-color:var(--primary)}.runner-result-box{background:var(--bg-card);padding:20px;border-radius:var(--radius);text-align:center}.runner-feedback{font-size:1.2rem;font-weight:600;margin-bottom:8px}.fb-correct{color:var(--success)}.fb-wrong{color:var(--danger)}.runner-explanation{color:var(--text-dim);font-size:.9rem;margin-bottom:16px;line-height:1.5}.runner-hint{text-align:center;color:var(--text-dim);font-size:.8rem;margin-top:12px;opacity:.7}.parkour-game{position:relative}.parkour-hud{display:flex;justify-content:space-between;align-items:center;padding:8px 0;margin-bottom:8px;font-size:.9rem}.parkour-scene{position:relative;height:220px;background:linear-gradient(180deg,#0a0a2e,#1a2a5e,#2a4a2a 80%,#1a3a1a);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}.pk-sky{position:absolute;top:10%;left:0;right:0;font-size:1.5rem;overflow:hidden;white-space:nowrap}.pk-clouds{transition:transform .1s linear}.pk-mountains{position:absolute;top:30%;left:0;font-size:2rem;white-space:nowrap;transition:transform .1s linear;opacity:.6}.pk-ground{position:absolute;bottom:0;left:0;right:0;height:25%;background:#2a4a2a;overflow:hidden}.pk-ground-scroll{white-space:nowrap;font-size:1rem;transition:transform .05s linear}.pk-character{position:absolute;bottom:25%;left:20%;font-size:2.5rem;z-index:10;transition:bottom .3s ease}.pk-running .pk-char-emoji{animation:pkRun .4s steps(2) infinite}@keyframes pkRun{0%{transform:translateY(0)}50%{transform:translateY(-8px)}}.pk-jumping{bottom:55%!important;transition:bottom .4s cubic-bezier(.25,.46,.45,.94)}.pk-crash .pk-char-emoji{animation:pkCrash .5s ease}@keyframes pkCrash{0%{transform:translate(0)}25%{transform:translate(10px) rotate(15deg)}50%{transform:translate(-10px) rotate(-15deg)}75%{transform:translate(5px)}to{transform:translate(0)}}.pk-obstacle{position:absolute;bottom:25%;right:30%;font-size:3rem;z-index:5}.pk-obs-hit{animation:obsShake .5s ease}@keyframes obsShake{0%,to{transform:rotate(0)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}.pk-jump-effect{position:absolute;bottom:50%;left:25%;font-size:2rem;animation:floatUp 1s ease forwards;z-index:15}.parkour-question-area{background:var(--bg-card);border-radius:var(--radius);padding:20px;animation:fadeIn .3s ease}.pk-timer{height:6px;background:#ffffff1a;border-radius:3px;margin-bottom:12px;overflow:hidden}.pk-timer-fill{height:100%;border-radius:3px;transition:width 1s linear}.pk-question{font-size:1.1rem;line-height:1.6;margin-bottom:16px;text-align:center}.pk-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pk-option{padding:12px 16px;border:2px solid #444;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font-size:.95rem;text-align:left;transition:all .3s}.pk-option:hover:not(:disabled){border-color:var(--primary);background:#6c5ce71a}.pk-opt-correct{border-color:var(--success)!important;background:#00b89426!important}.pk-opt-wrong{border-color:var(--danger)!important;background:#e74c3c26!important}.parkour-running-hint{text-align:center;padding:20px}.pk-run-bar{height:8px;background:#ffffff1a;border-radius:4px;margin-bottom:12px;overflow:hidden}.pk-run-fill{height:100%;background:linear-gradient(90deg,var(--primary),#8b5cf6);border-radius:4px;transition:width .05s linear}.parkour-running-hint p{color:var(--text-dim);animation:pulse 1s infinite}.parkour-crash-msg{text-align:center;padding:20px;animation:shake .5s ease}.crash-x{font-size:3rem;margin-bottom:8px}.crash-explain{color:var(--text-dim);font-size:.85rem;margin-top:8px}.parkour-done{display:flex;align-items:center;justify-content:center;min-height:80vh}.parkour-done-hero{text-align:center}.done-emoji{font-size:5rem;margin-bottom:16px;animation:pulse 1.5s infinite}.parkour-done-hero h2{font-size:2rem;margin-bottom:24px}.parkour-stats{display:flex;gap:20px;justify-content:center;margin-bottom:24px}.pk-stat{background:var(--bg-card);padding:16px 24px;border-radius:var(--radius);text-align:center}.pk-val{display:block;font-size:1.4rem;font-weight:700;margin-bottom:4px}.pk-label{color:var(--text-dim);font-size:.8rem}@media(max-width:600px){.mode-cards{grid-template-columns:1fr}.subject-grid{grid-template-columns:repeat(3,1fr)}.subject-levels,.pk-options{grid-template-columns:1fr}.runner-controls{flex-wrap:wrap}.ctrl-btn{flex:1;min-width:80px;font-size:.85rem;padding:10px 12px}.parkour-scene{height:180px}.runner-scene{height:240px}.door-text{font-size:.7rem}}