:root{--bg-primary:#f5f5f7;--bg-secondary:#fff;--bg-tertiary:#e5e5ea;--bg-card:#fffc;--bg-glass:#ffffffa6;--text-primary:#1d1d1f;--text-secondary:#86868b;--text-muted:#d2d2d7;--text-accent:#0071e3;--accent-purple:#0071e3;--accent-purple-glow:#0071e333;--accent-cyan:#34c759;--accent-cyan-glow:#34c75933;--accent-gold:#ff9500;--accent-gold-glow:#ff950033;--hp-green:#34c759;--hp-yellow:#fc0;--hp-red:#ff3b30;--correct:#34c759;--wrong:#ff3b30;--font-pixel:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--shadow-sm:0 2px 8px #0000000a;--shadow-md:0 4px 16px #00000014;--shadow-lg:0 8px 32px #0000001f;--shadow-glow-purple:0 4px 16px var(--accent-purple-glow);--shadow-glow-cyan:0 4px 16px var(--accent-cyan-glow);--shadow-glow-gold:0 4px 16px var(--accent-gold-glow)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-ui);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;position:relative;overflow:hidden}.starfield{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.starfield .star{animation:twinkle var(--duration) infinite ease-in-out;background:#fff;border-radius:50%;position:absolute}@keyframes twinkle{0%,to{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.mountains{z-index:0;pointer-events:none;width:100%;height:30vh;position:fixed;bottom:0;left:0}.mountains:before{content:"";background:linear-gradient(135deg, transparent 33%, var(--bg-tertiary) 33%, var(--bg-tertiary) 40%, transparent 40%), linear-gradient(215deg, transparent 33%, var(--bg-secondary) 33%, var(--bg-secondary) 45%, transparent 45%), linear-gradient(155deg, transparent 40%, var(--bg-tertiary) 40%, var(--bg-tertiary) 50%, transparent 50%);opacity:.5;width:120%;height:100%;position:absolute;bottom:0;left:-10%}#game-container{z-index:1;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:relative}.screen{width:100%;height:100%;padding:var(--space-xl);flex-direction:column;justify-content:center;align-items:center;display:none;position:absolute}.screen.active{display:flex}#screen-title{text-align:center;gap:var(--space-xl)}.game-logo{margin-bottom:var(--space-md);justify-content:center;align-items:center;width:90px;height:90px;font-size:2rem;display:flex}#game-container:after{display:none}svg,.sprite-svg,img{object-fit:contain;will-change:transform;width:100%;height:100%;overflow:visible!important}svg *{overflow:visible!important}.game-title{font-family:var(--font-pixel);color:var(--text-primary);text-shadow:none;letter-spacing:-1px;font-size:clamp(2.5rem,6vw,4rem);font-weight:700;line-height:1.2}.game-subtitle{font-family:var(--font-pixel);color:var(--text-secondary);text-shadow:none;letter-spacing:1px;text-transform:none;font-size:clamp(.9rem,2vw,1.2rem);font-weight:500}.title-input-group{align-items:center;gap:var(--space-md);margin-top:var(--space-xl);flex-direction:column;display:flex}.player-name-input{font-family:var(--font-pixel);padding:var(--space-md) var(--space-xl);background:var(--bg-glass);border:2px solid var(--accent-purple);border-radius:var(--radius-md);color:var(--text-primary);text-align:center;backdrop-filter:blur(10px);outline:none;width:300px;max-width:80vw;font-size:.8rem;transition:all .3s}.player-name-input:focus{border-color:var(--accent-gold);box-shadow:var(--shadow-glow-gold)}.player-name-input::placeholder{color:var(--text-muted)}.btn{font-family:var(--font-ui);padding:var(--space-md) var(--space-2xl);cursor:pointer;letter-spacing:normal;border:none;border-radius:99px;font-size:.95rem;font-weight:600;transition:all .2s;position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn-primary{background:var(--accent-purple);color:#fff;box-shadow:0 4px 14px #0071e34d}.btn-primary:hover{background:#0077ed;transform:translateY(-2px);box-shadow:0 6px 20px #0071e366}.btn-primary:active{transform:translateY(0)scale(.98)}.btn-secondary{color:var(--text-primary);backdrop-filter:blur(10px);background:#0000000d}.btn-secondary:hover{background:#0000001a;transform:translateY(-2px)}.btn-gold{background:linear-gradient(135deg, #b8860b, var(--accent-gold));color:#1a1a2e;border-color:var(--accent-gold);box-shadow:var(--shadow-glow-gold);font-weight:700}.btn-gold:hover{box-shadow:0 0 40px var(--accent-gold-glow);transform:translateY(-2px)scale(1.05)}#screen-difficulty{gap:var(--space-xl)}.difficulty-title{font-family:var(--font-pixel);color:var(--text-primary);text-shadow:0 0 10px var(--accent-purple-glow);font-size:clamp(1rem,3vw,1.5rem)}.difficulty-options{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;display:flex}.difficulty-card{background:var(--bg-card);border:1px solid var(--text-muted);border-radius:var(--radius-xl);padding:var(--space-xl) var(--space-2xl);cursor:pointer;text-align:center;width:220px;box-shadow:var(--shadow-sm);backdrop-filter:blur(20px);transition:all .3s cubic-bezier(.25,.8,.25,1)}.difficulty-card:hover{transform:translateY(-5px)scale(1.05)}.difficulty-card[data-difficulty=easy]{border-color:var(--hp-green)}.difficulty-card[data-difficulty=easy]:hover{background:#22c55e1a;box-shadow:0 0 25px #22c55e66}.difficulty-card[data-difficulty=normal]{border-color:var(--accent-gold)}.difficulty-card[data-difficulty=normal]:hover{box-shadow:0 0 25px var(--accent-gold-glow);background:#fbbf241a}.difficulty-card[data-difficulty=hard]{border-color:var(--hp-red)}.difficulty-card[data-difficulty=hard]:hover{background:#ef44441a;box-shadow:0 0 25px #ef444466}.difficulty-emoji{margin-bottom:var(--space-sm);font-size:2.5rem}.difficulty-name{font-family:var(--font-ui);color:var(--text-primary);margin-bottom:var(--space-xs);font-size:1.1rem;font-weight:600}.difficulty-desc{color:var(--text-secondary);font-size:.75rem}#screen-battle{padding:var(--space-md);padding-top:var(--space-lg);justify-content:flex-start;gap:0}.battle-hud{width:100%;max-width:900px;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.hud-item{font-family:var(--font-pixel);color:var(--text-secondary);font-size:.6rem}.hud-value{color:var(--accent-gold);font-size:.75rem}.game-battle-area{width:100%;max-width:950px;padding:var(--space-lg) var(--space-2xl);border-radius:var(--radius-xl);min-height:380px;box-shadow:var(--shadow-lg);background:linear-gradient(#f5f5f7 0%,#fff 100%);border:1px solid #0000000d;justify-content:space-between;align-items:flex-end;display:flex;position:relative;overflow:visible}.game-battle-area:after{content:"";pointer-events:none;z-index:1;background:radial-gradient(#0000001a 0%,#0000 70%);height:20px;position:absolute;bottom:10%;left:10%;right:10%}.character{align-items:center;gap:var(--space-xs);z-index:2;flex-direction:column;display:flex;position:relative}.character-header{margin-bottom:var(--space-xs);z-index:3;flex-direction:column;align-items:center;gap:4px;display:flex}#enemy-character:before{content:"";pointer-events:none;z-index:-1;filter:blur(15px);background:radial-gradient(circle,#0071e326 0%,#0000 70%);border-radius:50%;width:clamp(160px,24vw,240px);height:clamp(160px,24vw,240px);position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}.character-sprite,#enemy-sprite{justify-content:center;align-items:center;width:clamp(170px,25vw,230px);height:clamp(170px,25vw,230px);font-size:4rem;line-height:1;display:flex;position:relative;overflow:visible}#player-sprite{aspect-ratio:1000/600;justify-content:flex-start;align-items:center;width:calc(1.66667*clamp(170px,25vw,230px));height:clamp(170px,25vw,230px);display:flex;position:relative;overflow:visible}#player-sprite img,#player-sprite svg{object-fit:contain;object-position:left center;width:100%;height:100%}#player-character .character-header{transform:translate(-25%)}.character-name{font-family:var(--font-ui);color:var(--text-primary);letter-spacing:.5px;font-size:.8rem;font-weight:600}.hp-bar-container{background:#e5e5ea;border-radius:99px;width:clamp(130px,18vw,170px);height:8px;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.hp-bar-fill{background:linear-gradient(90deg, var(--hp-green), #16a34a);border-radius:var(--radius-sm);width:100%;height:100%;transition:width .5s;position:relative}.hp-bar-fill:after{content:"";border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:linear-gradient(#ffffff4d,#0000);height:40%;position:absolute;top:0;left:0;right:0}.hp-text{font-family:var(--font-pixel);color:var(--text-primary);text-shadow:0 1px 2px #000;z-index:2;white-space:nowrap;font-size:.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.damage-number{font-family:var(--font-pixel);color:var(--hp-red);text-shadow:0 0 10px #ef444480,0 2px #7f1d1d;pointer-events:none;z-index:50;opacity:0;font-size:1.2rem;font-weight:700;position:absolute}.damage-number.heal{color:var(--hp-green);text-shadow:0 0 10px #22c55e80}.combo-display{font-family:var(--font-pixel);color:var(--accent-gold);text-shadow:0 0 15px var(--accent-gold-glow);opacity:0;z-index:10;font-size:.8rem;position:absolute;top:10px;left:50%;transform:translate(-50%)}.vs-indicator{font-family:var(--font-ui);color:var(--text-primary);background:var(--bg-card);box-shadow:var(--shadow-sm);z-index:10;letter-spacing:1px;pointer-events:none;backdrop-filter:blur(10px);border:1px solid #0000000d;border-radius:99px;padding:4px 14px;font-size:1.2rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timer-container{width:80px;height:80px;margin:var(--space-md) auto;position:relative}.timer-svg{width:80px;height:80px;transform:rotate(-90deg)}.timer-circle-bg{fill:none;stroke:#ffffff1a;stroke-width:4px}.timer-circle{fill:none;stroke:var(--accent-cyan);stroke-width:4px;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0;transition:stroke .3s}.timer-circle.warning{stroke:var(--hp-yellow)}.timer-circle.danger{stroke:var(--hp-red)}.timer-text{font-family:var(--font-pixel);color:var(--text-primary);font-size:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.question-panel{background:var(--bg-card);border-radius:var(--radius-xl);width:100%;max-width:900px;box-shadow:var(--shadow-md);padding:var(--space-lg) var(--space-xl);backdrop-filter:blur(20px);margin-bottom:var(--space-md);border:1px solid #0000000d}.question-category{font-family:var(--font-ui);color:var(--accent-purple);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-sm);font-size:.8rem;font-weight:600}.question-text{font-family:var(--font-ui);color:var(--text-primary);text-align:center;font-size:clamp(1rem,2vw,1.25rem);font-weight:500;line-height:1.6}.answers-grid{gap:var(--space-md);grid-template-columns:1fr 1fr;width:100%;max-width:900px;display:grid}.answer-btn{font-family:var(--font-ui);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:var(--text-primary);cursor:pointer;backdrop-filter:blur(20px);text-align:left;border:1px solid #0000000d;font-size:clamp(.9rem,1.5vw,1rem);line-height:1.5;transition:all .2s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}.answer-btn:hover:not(:disabled){border-color:var(--accent-purple);background:var(--bg-secondary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.answer-btn:active:not(:disabled){transform:translateY(0)}.answer-btn:disabled{cursor:not-allowed;opacity:.5}.answer-btn .answer-letter{font-family:var(--font-ui);color:var(--text-secondary);margin-right:var(--space-sm);font-size:.9rem;font-weight:700}.answer-btn.correct{border-color:var(--correct)!important;background:#34c7591a!important;box-shadow:0 0 15px #34c75933!important}.answer-btn.wrong{border-color:var(--wrong)!important;background:#ff3b301a!important;box-shadow:0 0 15px #ff3b3033!important}#screen-victory,#screen-defeat{gap:var(--space-xl);text-align:center}.victory-title{font-family:var(--font-ui);color:var(--accent-gold);text-shadow:none;letter-spacing:-1px;font-size:clamp(2.5rem,6vw,4rem);font-weight:800}.defeat-title{font-family:var(--font-ui);color:var(--hp-red);text-shadow:none;letter-spacing:-1px;font-size:clamp(2.5rem,6vw,4rem);font-weight:800}.result-stats{gap:var(--space-lg);flex-wrap:wrap;justify-content:center;display:flex}.stat-item{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-sm);backdrop-filter:blur(20px);border:1px solid #0000000d;min-width:120px}.stat-label{font-family:var(--font-ui);color:var(--text-secondary);text-transform:uppercase;margin-bottom:var(--space-xs);font-size:.75rem;font-weight:600}.stat-value{font-family:var(--font-ui);color:var(--text-primary);font-size:1.5rem;font-weight:700}#screen-leaderboard{gap:var(--space-xl)}.leaderboard-title{font-family:var(--font-ui);color:var(--text-primary);text-shadow:none;font-size:clamp(1.5rem,3vw,2rem);font-weight:800}.leaderboard-table{background:var(--bg-card);border-radius:var(--radius-xl);backdrop-filter:blur(20px);width:100%;max-width:700px;box-shadow:var(--shadow-sm);border:1px solid #0000000d;overflow:hidden}.leaderboard-header{padding:var(--space-md) var(--space-lg);font-family:var(--font-ui);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;background:#00000005;border-bottom:1px solid #0000000d;grid-template-columns:40px 1fr 60px 80px 60px;font-size:.7rem;font-weight:600;display:grid}.leaderboard-row{padding:var(--space-md) var(--space-lg);border-bottom:1px solid #ffffff0d;grid-template-columns:40px 1fr 60px 80px 60px;align-items:center;transition:all .2s;display:grid}.leaderboard-row:hover{background:#a855f714}.leaderboard-row:last-child{border-bottom:none}.leaderboard-rank{font-family:var(--font-ui);color:var(--text-secondary);font-size:1rem;font-weight:700}.leaderboard-row:first-child .leaderboard-rank{color:var(--accent-gold)}.leaderboard-row:nth-child(2) .leaderboard-rank{color:silver}.leaderboard-row:nth-child(3) .leaderboard-rank{color:#cd7f32}.leaderboard-name{font-family:var(--font-ui);color:var(--text-primary);font-size:.9rem}.leaderboard-score{font-family:var(--font-ui);color:var(--accent-gold);text-align:right;font-size:1rem;font-weight:700}.leaderboard-difficulty{font-family:var(--font-ui);text-align:right;text-transform:uppercase;color:var(--text-secondary);font-size:.75rem;font-weight:600}.leaderboard-empty{padding:var(--space-2xl);text-align:center;font-family:var(--font-ui);color:var(--text-secondary);font-size:.9rem}.round-overlay{backdrop-filter:blur(10px);z-index:200;opacity:0;pointer-events:none;background:#fffffff2;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.round-overlay.active{pointer-events:all}.round-overlay .round-text{font-family:var(--font-ui);color:var(--text-primary);text-shadow:none;font-size:clamp(2rem,5vw,3.5rem);font-weight:800}.round-overlay .enemy-intro{font-family:var(--font-ui);color:var(--text-secondary);margin-top:var(--space-md);font-size:clamp(1rem,2vw,1.25rem);font-weight:500}.round-overlay .enemy-intro-sprite{margin-top:var(--space-lg);justify-content:center;align-items:center;width:120px;height:120px;font-size:5rem;display:flex}.button-group{gap:var(--space-md);flex-wrap:wrap;justify-content:center;display:flex}@media (width<=768px){.answers-grid{grid-template-columns:1fr}.game-battle-area{padding:var(--space-sm) var(--space-md);min-height:250px}.character-sprite,#enemy-sprite{width:clamp(110px,32vw,160px);height:clamp(110px,32vw,160px);font-size:2.8rem}#player-sprite{aspect-ratio:1000/600;width:calc(1.66667*clamp(110px,32vw,160px));height:clamp(110px,32vw,160px)}.hp-bar-container{width:clamp(100px,28vw,130px);height:14px}.difficulty-options{flex-direction:column;align-items:center}.difficulty-card{width:90%;max-width:250px}.result-stats{flex-direction:column;align-items:center}.leaderboard-header,.leaderboard-row{grid-template-columns:40px 1fr 80px}.leaderboard-difficulty{display:none}.battle-hud{gap:var(--space-sm);flex-wrap:wrap}}@media (width<=480px){.game-title{font-size:1.3rem}.btn{padding:var(--space-sm) var(--space-lg);font-size:.65rem}.player-name-input{width:90%}.timer-container,.timer-svg{width:60px;height:60px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9333ea}.loading{border:2px solid var(--text-muted);border-top-color:var(--accent-purple);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.sound-toggle-container{top:var(--space-md);right:var(--space-md);z-index:300;align-items:center;gap:var(--space-xs);background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);user-select:none;border:1px solid #0071e340;border-radius:20px;padding:.35rem .65rem .35rem .75rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed}.sound-toggle-container:hover{border-color:var(--accent-purple);box-shadow:var(--shadow-glow-purple);transform:translateY(-1px)}.sound-toggle-label{color:var(--text-primary);letter-spacing:-.01em;align-items:center;gap:.25rem;font-size:.85rem;font-weight:600;display:flex}.sound-switch{cursor:pointer;width:46px;height:24px;display:inline-block;position:relative}.sound-switch input{opacity:0;width:0;height:0;position:absolute}.switch-slider{background-color:#78788052;border-radius:24px;align-items:center;padding:2px;transition:background-color .3s,box-shadow .3s;display:flex;position:absolute;inset:0}.sound-switch input:checked+.switch-slider{background:linear-gradient(135deg,#0071e3,#34c759);box-shadow:0 0 10px #0071e359}.switch-thumb{background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:2px;left:2px;box-shadow:0 2px 5px #00000040}.sound-switch input:checked+.switch-slider .switch-thumb{transform:translate(22px)}.sound-switch input:focus-visible+.switch-slider{outline:2px solid var(--accent-purple);outline-offset:2px}.thumb-icon{user-select:none;line-height:1}.thumb-icon.icon-on{display:block}.thumb-icon.icon-off,.sound-switch input:not(:checked)+.switch-slider .thumb-icon.icon-on{display:none}.sound-switch input:not(:checked)+.switch-slider .thumb-icon.icon-off{display:block}@media (width<=768px){.answers-grid{gap:var(--space-sm);grid-template-columns:1fr}.answer-btn{padding:var(--space-sm) var(--space-md);font-size:.9rem}.battle-area{padding:0 var(--space-sm)}.hud-top{padding:var(--space-md) var(--space-sm)}}