@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap";.home-screen{min-height:100vh;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:800px;margin:0 auto;position:relative;overflow:hidden}.stars-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}.star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite}.star:nth-child(3n){background:var(--neon-cyan);width:2px;height:2px}.star:nth-child(5n){background:var(--neon-pink)}@keyframes twinkle{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.home-header{text-align:center;padding:var(--spacing-xl) 0;animation:slideDown .6s ease-out}.logo-container{margin-bottom:var(--spacing-lg)}.logo-icon{width:100px;height:100px;margin:0 auto;animation:float 4s ease-in-out infinite}.satellite-svg{width:100%;height:100%;filter:drop-shadow(0 0 15px var(--neon-cyan))}.game-title{font-size:var(--font-size-4xl);font-weight:900;letter-spacing:.1em;margin-bottom:var(--spacing-sm);display:flex;flex-direction:column;gap:var(--spacing-xs)}.title-signal{color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.title-decoder{color:var(--neon-pink);text-shadow:var(--glow-pink);font-size:.8em}.game-subtitle{font-size:var(--font-size-md);color:var(--text-secondary);font-family:var(--font-body);letter-spacing:.05em}.home-content{display:flex;flex-direction:column;gap:var(--spacing-xl);animation:slideUp .6s ease-out}.section-title{font-size:var(--font-size-lg);color:var(--neon-cyan);text-shadow:var(--glow-cyan);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.15em}.level-section{display:flex;flex-direction:column}.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md)}.level-card{padding:var(--spacing-md);background:var(--card-bg);border:2px solid var(--card-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--spacing-xs);transition:all var(--transition-normal);position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--level-color, var(--neon-cyan));transform:scaleX(0);transition:transform var(--transition-normal)}.level-card:hover:not(:disabled):before,.level-card.selected:before{transform:scaleX(1)}.level-card:hover:not(:disabled){border-color:var(--level-color, var(--neon-cyan));transform:translateY(-4px);box-shadow:0 8px 30px #00f5ff33}.level-card.selected{border-color:var(--level-color, var(--neon-cyan));background:#00f5ff1a;box-shadow:0 0 20px #00f5ff4d}.level-card.locked{opacity:.4;filter:grayscale(.5)}.level-header{display:flex;justify-content:space-between;align-items:center;width:100%}.level-number{font-size:var(--font-size-xs);color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em}.lock-icon{font-size:var(--font-size-xs);color:var(--error);font-family:var(--font-mono)}.level-name{font-size:var(--font-size-md);font-weight:700;color:var(--level-color, var(--text-primary));text-transform:uppercase;margin:0}.level-subtitle{font-size:var(--font-size-xs);color:var(--text-secondary);font-family:var(--font-body)}.level-progress{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs)}.progress-bar-mini{flex:1;height:6px;background:var(--space-light);border-radius:var(--radius-sm);overflow:hidden}.progress-bar-fill-mini{height:100%;background:linear-gradient(90deg,var(--level-color, var(--neon-cyan)),var(--neon-pink));border-radius:var(--radius-sm);transition:width var(--transition-normal)}.progress-text{font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--text-muted);min-width:36px}.level-mnemonic{font-size:var(--font-size-xs);color:var(--neon-pink);font-style:italic;margin-top:var(--spacing-xs)}.mode-section{display:flex;flex-direction:column}.mode-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.mode-btn{padding:var(--spacing-lg);background:var(--card-bg);border:2px solid var(--card-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-sm);transition:all var(--transition-normal)}.mode-btn:hover{border-color:var(--neon-cyan);transform:translateY(-2px)}.mode-btn.selected{border-color:var(--neon-cyan);background:#00f5ff1a;box-shadow:var(--glow-cyan)}.mode-icon-container{width:50px;height:50px;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center}.mode-icon-container.practice{background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan))}.mode-icon-container.challenge{background:linear-gradient(135deg,var(--neon-orange),var(--neon-pink))}.mode-svg{width:28px;height:28px;color:var(--space-black)}.mode-name{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary);text-transform:uppercase}.mode-desc{font-size:var(--font-size-xs);color:var(--text-secondary);font-family:var(--font-body)}.duration-section{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--card-border)}.duration-title{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.1em}.duration-buttons{display:flex;gap:var(--spacing-sm);justify-content:center}.duration-btn{padding:var(--spacing-sm) var(--spacing-lg);background:transparent;border:2px solid var(--card-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-md);font-weight:700;transition:all var(--transition-fast)}.duration-btn:hover{border-color:var(--neon-pink)}.duration-btn.selected{border-color:var(--neon-pink);background:#ff6ec733;color:var(--neon-pink);box-shadow:var(--glow-pink)}.start-btn{padding:var(--spacing-lg) var(--spacing-2xl);background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue));border:2px solid var(--neon-cyan);border-radius:var(--radius-lg);color:var(--space-black);font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);transition:all var(--transition-normal);box-shadow:var(--glow-cyan);animation:glow 2s ease-in-out infinite}.start-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 0 30px #00f5ffcc,0 0 60px #00f5ff66}.start-text{letter-spacing:.15em}.start-arrow{display:flex;align-items:center}.home-footer{text-align:center;padding:var(--spacing-lg) 0;margin-top:auto}.footer-text{font-size:var(--font-size-sm);color:var(--text-muted);font-family:var(--font-body)}@media(max-width:600px){.home-screen{padding:var(--spacing-md);gap:var(--spacing-lg)}.game-title{font-size:var(--font-size-2xl)}.logo-icon{width:80px;height:80px}.level-grid{grid-template-columns:repeat(2,1fr)}.level-card{padding:var(--spacing-sm)}.level-name{font-size:var(--font-size-sm)}.mode-buttons{grid-template-columns:1fr}.start-btn{font-size:var(--font-size-lg);padding:var(--spacing-md) var(--spacing-xl)}}@media(max-width:400px){.level-grid{grid-template-columns:1fr}}.music-toggle{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--card-bg);border:2px solid var(--text-muted);border-radius:var(--radius-round);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all var(--transition-normal);z-index:1000}.music-toggle:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:var(--glow-cyan)}.music-toggle.playing{border-color:var(--neon-pink);color:var(--neon-pink);animation:musicPulse 1s ease-in-out infinite}.music-toggle.playing:hover{border-color:var(--neon-pink);box-shadow:var(--glow-pink)}@keyframes musicPulse{0%,to{box-shadow:0 0 5px #ff00804d}50%{box-shadow:0 0 15px #ff008099}}.music-toggle svg{width:20px;height:20px}.music-label{font-weight:600}@media(max-width:480px){.music-toggle{bottom:var(--spacing-md);right:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm)}.music-toggle svg{width:18px;height:18px}.music-label{display:none}}.staff-container{display:flex;justify-content:center;align-items:center;background:var(--staff-bg);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--card-border);box-shadow:var(--card-glow);max-width:100%;overflow:hidden;position:relative}.staff-container:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:1}.staff-container:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent)}.staff-svg{width:100%;max-width:450px;height:auto;position:relative;z-index:2}.staff-line{stroke:var(--staff-line);stroke-linecap:round;filter:drop-shadow(0 0 2px var(--staff-line-glow))}.ledger-line{stroke:var(--ledger-line);stroke-linecap:round;filter:drop-shadow(0 0 3px var(--ledger-line))}.note-head{transition:all var(--transition-fast)}.note-animated .note-head{animation:notePulse 2s ease-in-out infinite}@keyframes notePulse{0%,to{filter:drop-shadow(0 0 8px var(--note-fill));transform:scale(1)}50%{filter:drop-shadow(0 0 20px var(--note-fill)) drop-shadow(0 0 30px var(--note-fill));transform:scale(1.03)}}.note-correct .note-head{fill:var(--success)!important;animation:noteCorrect .5s ease-out forwards}.note-wrong .note-head{fill:var(--error)!important;animation:noteWrong .4s ease-in-out}@keyframes noteCorrect{0%{transform:scale(1);filter:drop-shadow(0 0 10px var(--success))}50%{transform:scale(1.4);filter:drop-shadow(0 0 30px var(--success)) drop-shadow(0 0 50px var(--success))}to{transform:scale(1);filter:drop-shadow(0 0 15px var(--success))}}@keyframes noteWrong{0%,to{transform:translate(0);filter:drop-shadow(0 0 10px var(--error))}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.note-hint{font-family:var(--font-display);font-size:14px;fill:var(--neon-cyan);text-anchor:middle;filter:drop-shadow(0 0 5px var(--neon-cyan));animation:hintPulse 1.5s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:1}50%{opacity:.6}}@media(max-width:768px){.staff-container{padding:var(--spacing-md)}.staff-svg{max-width:380px}}@media(max-width:480px){.staff-container{padding:var(--spacing-sm);border-radius:var(--radius-md)}.staff-svg{max-width:320px}}.piano-keyboard-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg)}.piano-keyboard{display:flex;justify-content:center;gap:4px;padding:var(--spacing-md);background:linear-gradient(180deg,var(--space-light) 0%,var(--space-deep) 100%);border-radius:var(--radius-lg);border:2px solid var(--card-border);box-shadow:var(--card-glow),inset 0 2px 10px #0000004d}.piano-key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:var(--spacing-md);border:none;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-display)}.piano-key-white{width:52px;height:160px;background:linear-gradient(180deg,var(--key-white) 0%,#d8d8e0 100%);border-radius:0 0 var(--radius-md) var(--radius-md);border:1px solid rgba(0,0,0,.2);box-shadow:0 4px 8px #0000004d,inset 0 -4px 8px #0000001a}.piano-key-white:hover:not(:disabled){background:linear-gradient(180deg,var(--key-white-hover) 0%,#e8e8f0 100%);transform:translateY(-2px);box-shadow:0 6px 12px #0006,inset 0 -4px 8px #0000001a,0 0 15px #00f5ff4d}.piano-key-white:active:not(:disabled),.piano-key-white.piano-key-pressed{background:linear-gradient(180deg,var(--key-white-active) 0%,#b0b0d0 100%);transform:translateY(2px);box-shadow:0 2px 4px #0000004d,inset 0 2px 8px #0000001a,0 0 20px #00f5ff80}.piano-key-black{width:36px;height:100px;background:linear-gradient(180deg,#2a2a3a 0%,var(--key-black) 100%);border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 -18px;z-index:1;border:1px solid rgba(0,0,0,.4);box-shadow:0 4px 8px #00000080,inset 0 -2px 6px #ffffff0d}.piano-key-black:hover:not(:disabled){background:linear-gradient(180deg,var(--key-black-hover) 0%,#1a1a24 100%)}.piano-key-black:active:not(:disabled),.piano-key-black.piano-key-pressed{background:linear-gradient(180deg,var(--key-black-active) 0%,#2a2a50 100%);transform:translateY(2px)}.piano-key-unavailable{opacity:.3;cursor:not-allowed;filter:grayscale(.5)}.piano-key-unavailable:hover{transform:none!important;box-shadow:0 4px 8px #0000004d,inset 0 -4px 8px #0000001a!important}.piano-key-highlighted{animation:keyPulse 1s ease-in-out infinite}.piano-key-highlighted:after{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid var(--neon-cyan);filter:drop-shadow(0 0 5px var(--neon-cyan));animation:bounce .6s ease-in-out infinite}@keyframes keyPulse{0%,to{box-shadow:0 4px 8px #0000004d,0 0 10px #00f5ff66}50%{box-shadow:0 4px 8px #0000004d,0 0 25px #00f5ffcc,0 0 40px #00f5ff66}}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-8px)}}.piano-key-correct{background:linear-gradient(180deg,var(--success) 0%,#20b010 100%)!important;animation:correctFlash .5s ease-out;box-shadow:0 4px 8px #0000004d,0 0 30px #39ff14cc!important}@keyframes correctFlash{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.piano-key-wrong{background:linear-gradient(180deg,var(--error) 0%,#cc0022 100%)!important;animation:wrongShake .5s ease-in-out;box-shadow:0 4px 8px #0000004d,0 0 30px #f36c!important}@keyframes wrongShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}.piano-key-label{font-size:var(--font-size-lg);font-weight:700;color:var(--space-deep);text-shadow:none;margin-bottom:var(--spacing-xs)}.piano-key-white .piano-key-label{color:var(--space-deep)}.piano-key-black .piano-key-label{color:var(--text-secondary);font-size:var(--font-size-md)}.piano-key-shortcut{font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--text-muted);opacity:.6;padding:2px 6px;background:#0000001a;border-radius:var(--radius-sm)}.piano-key-white .piano-key-shortcut{color:var(--space-mid)}.piano-key-black .piano-key-shortcut{color:var(--text-muted)}.piano-keyboard-hint{font-size:var(--font-size-sm);color:var(--text-muted);text-align:center;font-family:var(--font-body)}@media(max-width:768px){.piano-key-white{width:44px;height:140px}.piano-key-black{width:30px;height:85px;margin:0 -15px}.piano-key-label{font-size:var(--font-size-md)}.piano-key-shortcut,.piano-keyboard-hint{display:none}}@media(max-width:480px){.piano-keyboard{gap:2px;padding:var(--spacing-sm)}.piano-key-white{width:36px;height:120px}.piano-key-black{width:26px;height:75px;margin:0 -13px}.piano-key-label{font-size:var(--font-size-sm)}}.game-screen{min-height:100vh;display:flex;flex-direction:column;padding:var(--spacing-md);max-width:900px;margin:0 auto;position:relative}.countdown-screen{justify-content:center;align-items:center;background:radial-gradient(ellipse at center,var(--space-mid) 0%,var(--space-black) 100%)}.countdown-display{text-align:center;animation:slideUp .4s ease-out}.countdown-title{font-size:var(--font-size-2xl);color:var(--text-secondary);margin-bottom:var(--spacing-lg);text-transform:uppercase;letter-spacing:.2em}.countdown-number{font-family:var(--font-display);font-size:140px;font-weight:900;color:var(--neon-cyan);text-shadow:var(--glow-cyan);animation:countdownPulse 1s ease-out;line-height:1}@keyframes countdownPulse{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.countdown-level{font-size:var(--font-size-xl);color:var(--neon-pink);text-shadow:var(--glow-pink);margin-top:var(--spacing-xl);text-transform:uppercase}.countdown-mode{font-size:var(--font-size-md);color:var(--text-muted);margin-top:var(--spacing-sm)}.finished-screen{justify-content:center;align-items:center;background:radial-gradient(ellipse at center,var(--space-mid) 0%,var(--space-black) 100%)}.finished-display{text-align:center;animation:slideUp .5s ease-out}.finished-title{font-size:var(--font-size-2xl);color:var(--neon-green);text-shadow:var(--glow-green);margin-bottom:var(--spacing-lg);text-transform:uppercase;letter-spacing:.1em}.finished-score{font-family:var(--font-display);font-size:100px;font-weight:900;color:var(--neon-cyan);text-shadow:var(--glow-cyan);line-height:1;animation:glow 1.5s ease-in-out infinite}.finished-label{font-size:var(--font-size-lg);color:var(--text-muted);text-transform:uppercase;letter-spacing:.2em;margin-top:var(--spacing-md)}.game-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0;margin-bottom:var(--spacing-md)}.exit-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:#ff33661a;border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);font-size:var(--font-size-sm);font-family:var(--font-display);text-transform:uppercase;transition:all var(--transition-fast)}.exit-btn:hover{background:#f363;box-shadow:var(--error-glow)}.exit-btn svg{width:16px;height:16px}.game-stats{display:flex;gap:var(--spacing-md)}.stat-box{text-align:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);min-width:80px}.stat-box .stat-value{display:block;font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:700;color:var(--neon-cyan)}.stat-box .stat-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.score-box .stat-value{color:var(--neon-green);text-shadow:0 0 10px rgba(57,255,20,.5)}.timer-box .stat-value{color:var(--neon-orange)}.timer-box.warning{border-color:var(--error);animation:pulse .5s ease-in-out infinite}.timer-box.warning .stat-value{color:var(--error);animation:pulse .5s ease-in-out infinite}.streak-box .stat-value{color:var(--neon-pink)}.level-indicator{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.level-badge{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--font-size-sm);font-weight:600;color:var(--space-black);text-transform:uppercase;letter-spacing:.05em}.mnemonic-hint{font-size:var(--font-size-sm);color:var(--text-muted);font-style:italic}.staff-section{flex:0 0 auto;margin-bottom:var(--spacing-md)}.feedback-overlay{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-lg);z-index:var(--z-overlay);animation:feedbackPop .3s ease-out;pointer-events:none}.feedback-overlay.correct{background:linear-gradient(135deg,var(--success),#20b010);box-shadow:0 0 40px #39ff1499}.feedback-overlay.wrong{background:linear-gradient(135deg,var(--error),#cc0022);box-shadow:0 0 40px #f369}.feedback-text{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1em}@keyframes feedbackPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.piano-section{flex:0 0 auto;margin-bottom:var(--spacing-md)}.game-footer{display:flex;justify-content:space-around;align-items:center;padding:var(--spacing-md);background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);margin-top:auto}.footer-stat{text-align:center}.footer-value{display:block;font-family:var(--font-mono);font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary)}.footer-label{font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.skip-btn{padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid var(--text-muted);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--font-size-sm);font-family:var(--font-display);text-transform:uppercase;transition:all var(--transition-fast)}.skip-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}@media(max-width:768px){.game-screen{padding:var(--spacing-sm)}.countdown-number{font-size:100px}.finished-score{font-size:80px}.game-stats{gap:var(--spacing-sm)}.stat-box{padding:var(--spacing-xs) var(--spacing-sm);min-width:60px}.stat-box .stat-value{font-size:var(--font-size-lg)}.level-indicator{flex-direction:column;gap:var(--spacing-xs)}}@media(max-width:480px){.countdown-number{font-size:80px}.finished-score{font-size:60px}.exit-btn span{display:none}.game-footer{flex-wrap:wrap;gap:var(--spacing-sm)}.skip-btn{width:100%;margin-top:var(--spacing-sm)}}.results-screen{min-height:100vh;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);max-width:600px;margin:0 auto;animation:fadeIn .5s ease-out;position:relative;overflow:hidden}.results-stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}.result-star{position:absolute;width:3px;height:3px;background:var(--neon-cyan);border-radius:50%;animation:twinkle 2s ease-in-out infinite}.result-star:nth-child(3n){background:var(--neon-pink)}.result-star:nth-child(5n){background:#fff}.results-header{text-align:center;padding:var(--spacing-xl) 0}.results-title{font-size:var(--font-size-3xl);color:var(--neon-green);text-shadow:var(--glow-green);animation:titlePop .6s ease-out;text-transform:uppercase;letter-spacing:.1em}@keyframes titlePop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.results-subtitle{font-size:var(--font-size-md);color:var(--text-secondary);margin-top:var(--spacing-sm);font-family:var(--font-body)}.score-section{text-align:center;animation:slideUp .5s ease-out .2s both}.final-score{display:inline-flex;flex-direction:column;align-items:center;background:var(--card-bg);border:2px solid var(--neon-cyan);padding:var(--spacing-xl) var(--spacing-2xl);border-radius:var(--radius-xl);box-shadow:var(--glow-cyan)}.final-score .score-value{font-family:var(--font-display);font-size:72px;font-weight:900;color:var(--neon-cyan);text-shadow:var(--glow-cyan);line-height:1}.final-score .score-label{font-size:var(--font-size-lg);color:var(--text-muted);text-transform:uppercase;letter-spacing:.2em;margin-top:var(--spacing-sm)}.stars-display{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.star{font-size:48px;transition:all .3s ease}.star.earned{color:var(--neon-yellow);text-shadow:0 0 20px rgba(255,255,0,.8);animation:starEarned .5s ease-out}.star.empty{color:var(--space-light);opacity:.3}@keyframes starEarned{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);animation:slideUp .5s ease-out .3s both}.stat-card{background:var(--card-bg);border:1px solid var(--card-border);padding:var(--spacing-lg);border-radius:var(--radius-lg);text-align:center}.stat-card .stat-value{display:block;font-family:var(--font-mono);font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.stat-card .stat-label{font-size:var(--font-size-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.grade-a{color:var(--neon-green)!important;text-shadow:var(--glow-green)}.grade-b{color:var(--neon-cyan)!important;text-shadow:var(--glow-cyan)}.grade-c{color:var(--neon-orange)!important;text-shadow:var(--glow-orange)}.grade-d{color:var(--error)!important}.stat-value.correct{color:var(--neon-green)}.stat-value.streak{color:var(--neon-pink)}.unlock-section{animation:slideUp .5s ease-out .4s both}.unlock-message{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:linear-gradient(135deg,#39ff1426,#00f5ff26);border:2px solid var(--neon-green);border-radius:var(--radius-lg);animation:unlockPulse 1.5s ease-in-out infinite}@keyframes unlockPulse{0%,to{box-shadow:0 0 10px #39ff144d}50%{box-shadow:0 0 30px #39ff1499}}.unlock-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--neon-green);color:var(--space-black);border-radius:var(--radius-round);font-size:var(--font-size-xl);font-weight:900}.unlock-text{font-family:var(--font-display);font-size:var(--font-size-lg);color:var(--neon-green);text-transform:uppercase;letter-spacing:.1em}.tip-section{animation:slideUp .5s ease-out .5s both}.tip-text{text-align:center;color:var(--text-secondary);font-size:var(--font-size-md);font-family:var(--font-body);font-style:italic;padding:var(--spacing-md);background:#00f5ff0d;border-radius:var(--radius-md);border-left:3px solid var(--neon-cyan)}.actions-section{display:flex;flex-direction:column;gap:var(--spacing-md);padding-top:var(--spacing-lg);animation:slideUp .5s ease-out .6s both}.btn-play-again{padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue));border:2px solid var(--neon-cyan);border-radius:var(--radius-lg);color:var(--space-black);font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:700;text-transform:uppercase;letter-spacing:.1em;box-shadow:var(--glow-cyan);transition:all var(--transition-normal)}.btn-play-again:hover{transform:translateY(-2px);box-shadow:0 0 30px #00f5ffcc}.btn-next-level{padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,var(--neon-green),#20b010);border:2px solid var(--neon-green);border-radius:var(--radius-lg);color:var(--space-black);font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:700;text-transform:uppercase;letter-spacing:.1em;box-shadow:var(--glow-green);transition:all var(--transition-normal)}.btn-next-level:hover{transform:translateY(-2px);box-shadow:0 0 30px #39ff14cc}.btn-home{padding:var(--spacing-md) var(--spacing-xl);background:transparent;border:2px solid var(--text-muted);border-radius:var(--radius-lg);color:var(--text-secondary);font-family:var(--font-display);font-size:var(--font-size-md);font-weight:600;text-transform:uppercase;letter-spacing:.1em;transition:all var(--transition-normal)}.btn-home:hover{border-color:var(--neon-pink);color:var(--neon-pink)}@media(max-width:480px){.results-screen{padding:var(--spacing-md);gap:var(--spacing-md)}.results-title{font-size:var(--font-size-2xl)}.final-score .score-value{font-size:56px}.final-score{padding:var(--spacing-lg)}.stat-card .stat-value{font-size:var(--font-size-xl)}.star{font-size:36px}}:root{--space-black: #0a0a12;--space-deep: #12121f;--space-mid: #1a1a2e;--space-light: #252542;--neon-cyan: #00f5ff;--neon-magenta: #ff00ff;--neon-pink: #ff6ec7;--neon-purple: #bf00ff;--neon-blue: #4d4dff;--neon-green: #39ff14;--neon-orange: #ff6600;--neon-yellow: #ffff00;--glow-cyan: 0 0 10px rgba(0, 245, 255, .5), 0 0 30px rgba(0, 245, 255, .3), 0 0 50px rgba(0, 245, 255, .1);--glow-magenta: 0 0 10px rgba(255, 0, 255, .5), 0 0 30px rgba(255, 0, 255, .3), 0 0 50px rgba(255, 0, 255, .1);--glow-pink: 0 0 10px rgba(255, 110, 199, .5), 0 0 30px rgba(255, 110, 199, .3);--glow-green: 0 0 10px rgba(57, 255, 20, .5), 0 0 30px rgba(57, 255, 20, .3);--glow-purple: 0 0 10px rgba(191, 0, 255, .5), 0 0 30px rgba(191, 0, 255, .3);--glow-orange: 0 0 10px rgba(255, 102, 0, .5), 0 0 30px rgba(255, 102, 0, .3);--text-primary: #ffffff;--text-secondary: #b8b8d1;--text-muted: #6b6b8d;--text-neon: var(--neon-cyan);--success: #39ff14;--success-bg: rgba(57, 255, 20, .15);--success-glow: 0 0 20px rgba(57, 255, 20, .8);--error: #ff3366;--error-bg: rgba(255, 51, 102, .15);--error-glow: 0 0 20px rgba(255, 51, 102, .8);--warning: #ffaa00;--key-white: #f0f0f5;--key-white-hover: #ffffff;--key-white-active: #c8c8ff;--key-black: #1a1a24;--key-black-hover: #2a2a3a;--key-black-active: #4040a0;--key-correct: var(--success);--key-wrong: var(--error);--staff-bg: rgba(20, 20, 40, .9);--staff-line: rgba(0, 245, 255, .4);--staff-line-glow: rgba(0, 245, 255, .2);--note-fill: var(--neon-cyan);--note-stroke: var(--neon-magenta);--note-glow: var(--glow-cyan);--ledger-line: rgba(0, 245, 255, .5);--clef-color: var(--neon-purple);--grid-color: rgba(77, 77, 255, .08);--grid-line: rgba(0, 245, 255, .1);--scanline: rgba(0, 0, 0, .03);--card-bg: rgba(25, 25, 50, .85);--card-border: rgba(0, 245, 255, .2);--card-glow: 0 0 30px rgba(0, 245, 255, .1);--panel-bg: linear-gradient(180deg, rgba(30, 30, 60, .9) 0%, rgba(20, 20, 40, .95) 100%);--font-display: "Orbitron", "Audiowide", "Segoe UI", system-ui, sans-serif;--font-body: "Exo 2", "Rajdhani", "Segoe UI", system-ui, sans-serif;--font-mono: "Share Tech Mono", "Courier New", monospace;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 42px;--font-size-4xl: 56px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 24px;--radius-round: 50%;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1);--z-background: 0;--z-stars: 1;--z-grid: 2;--z-content: 10;--z-overlay: 100;--z-modal: 200;--z-toast: 300;--level-1: var(--neon-cyan);--level-2: var(--neon-pink);--level-3: var(--neon-purple);--level-4: var(--neon-orange);--level-5: var(--neon-green);--alien-echo: #00f5ff;--alien-grix: #39ff14;--alien-blip: #4d4dff;--alien-dex: #ff6600;--alien-flux: #ff00ff;--alien-ace: #ff6ec7;--alien-cosmo: #bf00ff}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);background:var(--space-black);color:var(--text-primary);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at bottom,var(--space-deep) 0%,var(--space-black) 100%),radial-gradient(2px 2px at 20px 30px,var(--neon-cyan),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,var(--neon-pink),transparent),radial-gradient(2px 2px at 160px 120px,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 230px 80px,var(--neon-cyan),transparent),radial-gradient(2px 2px at 300px 150px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 370px 60px,var(--neon-purple),transparent),radial-gradient(2px 2px at 450px 180px,rgba(255,255,255,.8),transparent);background-size:100% 100%,500px 500px,500px 500px,500px 500px,500px 500px,500px 500px,500px 500px,500px 500px,500px 500px;z-index:var(--z-background);pointer-events:none}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:50px 50px;z-index:var(--z-grid);pointer-events:none;opacity:.3}#root{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:var(--z-content)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.05em}h1{font-size:var(--font-size-3xl);text-shadow:var(--glow-cyan);color:var(--neon-cyan)}h2{font-size:var(--font-size-2xl);color:var(--text-primary)}h3{font-size:var(--font-size-xl)}.neon-text{color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.neon-text-pink{color:var(--neon-pink);text-shadow:var(--glow-pink)}.neon-text-purple{color:var(--neon-purple);text-shadow:var(--glow-purple)}button{font-family:var(--font-display);cursor:pointer;border:none;outline:none;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.1em}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--neon-cyan);text-decoration:none}a:hover{text-shadow:var(--glow-cyan)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);width:100%}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--card-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent)}.panel{background:var(--panel-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.text-center{text-align:center}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;transition:all var(--transition-normal);min-height:48px;min-width:48px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(180deg,var(--neon-cyan) 0%,#00a0b0 100%);color:var(--space-black);border:2px solid var(--neon-cyan);box-shadow:var(--glow-cyan)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 20px #00f5ffcc,0 0 40px #00f5ff66}.btn-secondary{background:transparent;color:var(--neon-pink);border:2px solid var(--neon-pink)}.btn-secondary:hover:not(:disabled){background:#ff6ec71a;box-shadow:var(--glow-pink)}.btn-success{background:linear-gradient(180deg,var(--success) 0%,#20b010 100%);color:var(--space-black);border:2px solid var(--success)}.btn-success:hover:not(:disabled){box-shadow:var(--success-glow)}.btn-outline{background:transparent;border:2px solid var(--neon-cyan);color:var(--neon-cyan)}.btn-outline:hover:not(:disabled){background:#00f5ff1a;box-shadow:var(--glow-cyan)}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);min-height:60px;border-radius:var(--radius-lg)}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);min-height:36px}.btn-icon{width:48px;height:48px;padding:0;border-radius:var(--radius-round)}.stat-display{font-family:var(--font-mono);font-size:var(--font-size-2xl);color:var(--neon-cyan);text-shadow:var(--glow-cyan)}.stat-label{font-family:var(--font-display);font-size:var(--font-size-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em}.progress-bar{height:8px;background:var(--space-light);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--card-border)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));border-radius:var(--radius-sm);transition:width var(--transition-normal);box-shadow:var(--glow-cyan)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:var(--glow-cyan)}50%{box-shadow:0 0 30px #00f5ffcc,0 0 60px #00f5ff66}}@keyframes neonFlicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes correctPulse{0%{transform:scale(1);box-shadow:0 0 #39ff14b3}50%{transform:scale(1.05);box-shadow:0 0 20px 10px #39ff144d}to{transform:scale(1);box-shadow:0 0 #39ff1400}}@keyframes wrongShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes starTwinkle{0%,to{opacity:.3}50%{opacity:1}}.animate-fade-in{animation:fadeIn var(--transition-normal)}.animate-slide-up{animation:slideUp var(--transition-normal)}.animate-slide-down{animation:slideDown var(--transition-normal)}.animate-pulse{animation:pulse 2s infinite}.animate-glow{animation:glow 2s infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-shake{animation:shake .3s ease-in-out}.animate-correct{animation:correctPulse .5s ease-out}.animate-wrong{animation:wrongShake .5s ease-in-out}@media(max-width:768px){html{font-size:14px}.container{padding:0 var(--spacing-sm)}h1{font-size:var(--font-size-2xl)}}@media(max-width:480px){html{font-size:13px}.btn-lg{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-md)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--space-deep)}::-webkit-scrollbar-thumb{background:var(--space-light);border-radius:var(--radius-sm);border:1px solid var(--card-border)}::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}