@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap";:root{--font-display: "Orbitron", sans-serif;--font-body: "Rajdhani", sans-serif;--font-mono: "JetBrains Mono", monospace;--neon-cyan: #00ffff;--neon-magenta: #ff00ff;--neon-yellow: #ffc800;--neon-green: #00ff64;--neon-red: #ff3232;--bg-dark: #0a0a0f;--bg-darker: #050508;font-family:var(--font-body);line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffe6;background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{background:var(--bg-dark);background-image:radial-gradient(ellipse at 50% 100%,rgba(255,0,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 0% 50%,rgba(0,255,255,.05) 0%,transparent 40%),radial-gradient(ellipse at 100% 0%,rgba(255,200,0,.03) 0%,transparent 40%);background-attachment:fixed}#root{width:100%;height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000004d}::-webkit-scrollbar-thumb{background:#00ffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00ffff80}::selection{background:#f0f6;color:#fff}:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--neon-cyan);text-decoration:none}a:hover{text-decoration:underline}.glow-cyan{text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan)}.glow-magenta{text-shadow:0 0 10px var(--neon-magenta),0 0 20px var(--neon-magenta)}.glow-yellow{text-shadow:0 0 10px var(--neon-yellow),0 0 20px var(--neon-yellow)}.glow-green{text-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green)}.glow-red{text-shadow:0 0 10px var(--neon-red),0 0 20px var(--neon-red)}@keyframes glow-pulse{0%,to{opacity:1;filter:brightness(1)}50%{opacity:.8;filter:brightness(1.2)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.audio-visualizer{position:absolute;bottom:0;left:0;right:0;pointer-events:none;z-index:1;opacity:var(--opacity, .6)}.audio-visualizer.full{height:200px}.audio-visualizer.compact{height:80px}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-fade{position:absolute;top:0;left:0;right:0;height:60%;background:linear-gradient(to bottom,var(--bg-dark, #0a0a0f) 0%,transparent 100%);pointer-events:none}@media(max-height:600px){.audio-visualizer.full{height:120px}.audio-visualizer.compact{height:60px}}.start-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow:hidden}.bg-layer{position:absolute;inset:0;pointer-events:none}.bg-base{background:radial-gradient(ellipse 80% 60% at 20% 100%,rgba(255,0,255,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 0%,rgba(0,255,255,.08) 0%,transparent 50%),linear-gradient(180deg,#08080c,#0c0c14)}.bg-glow{background:radial-gradient(ellipse 50% 40% at 50% 50%,rgba(255,0,255,.04) 0%,transparent 70%);animation:breathe 8s ease-in-out infinite}.bg-scanlines{background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);opacity:.5}@keyframes breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.particles{position:absolute;inset:0;overflow:hidden}.particle{position:absolute;width:var(--size);height:var(--size);left:var(--x);bottom:-20px;background:var(--neon-cyan);border-radius:50%;opacity:0;box-shadow:0 0 6px var(--neon-cyan);animation:rise var(--duration) ease-out infinite;animation-delay:var(--delay)}@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.7}90%{opacity:.4}to{transform:translateY(-100vh) scale(.3);opacity:0}}.home-container{position:relative;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;width:100%;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.start-screen.ready .home-container{opacity:1;transform:translateY(0)}.brand-panel{display:flex;flex-direction:column;justify-content:center;gap:24px;padding-right:40px;border-right:1px solid rgba(255,255,255,.06)}.brand-content{display:flex;flex-direction:column;gap:16px}.logo-mark{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00ffff26,#ff00ff26);border:1px solid rgba(0,255,255,.3);border-radius:12px;animation:logoPulse 3s ease-in-out infinite}.logo-icon{font-size:1.75rem;color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan)}@keyframes logoPulse{0%,to{box-shadow:0 0 20px #0ff3}50%{box-shadow:0 0 30px #0ff6,0 0 60px #f0f3}}.title{display:flex;flex-direction:column;gap:0;margin:0;line-height:.9}.title-line{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:.08em;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.3)}.title-line.accent{color:var(--neon-magenta);text-shadow:0 0 20px var(--neon-magenta),0 0 40px rgba(255,0,255,.5)}.edition-badge{display:inline-flex;align-self:flex-start;padding:6px 12px;background:#ffc8001a;border:1px solid rgba(255,200,0,.3);border-radius:4px;margin-top:8px}.badge-text{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.15em;color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow)}.waveform{display:flex;align-items:flex-end;gap:3px;height:60px;padding-top:20px;opacity:.6}.wave-bar{flex:1;height:var(--h);background:linear-gradient(0deg,var(--neon-cyan),var(--neon-magenta));border-radius:2px 2px 0 0;animation:waveMove 1.5s ease-in-out infinite;animation-delay:var(--delay)}@keyframes waveMove{0%,to{transform:scaleY(1)}50%{transform:scaleY(.6)}}.controls-panel{display:flex;flex-direction:column;justify-content:center;gap:24px}.control-group{display:flex;flex-direction:column;gap:10px}.control-label{font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.2em;color:#fff6}.platform-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#0006;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:4px}.platform-opt{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.1em;color:#fff6;background:transparent;border:none;cursor:pointer;transition:color .25s ease}.platform-opt:hover{color:#ffffffb3}.platform-opt.active{color:#fff}.platform-icon{font-size:1.1rem}.switch-indicator{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:linear-gradient(135deg,#00ffff1f,#ff00ff1f);border:1px solid rgba(0,255,255,.25);border-radius:6px;transform:translate(calc(var(--pos) * 100%));transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #00ffff26}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mode-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:all .25s ease;opacity:0;transform:translateY(10px);animation:cardIn .4s ease forwards;animation-delay:calc(var(--i) * .1s + .3s)}@keyframes cardIn{to{opacity:1;transform:translateY(0)}}.mode-card:hover{background:#ffffff0a;border-color:#ffffff1f;transform:translateY(-2px)}.mode-card.active{background:#00ffff14;border-color:#0ff6;box-shadow:0 0 25px #00ffff26,inset 0 0 20px #00ffff0d}.mode-card.ultra.active{background:#ffc80014;border-color:#ffc80080;box-shadow:0 0 25px #ffc80033,inset 0 0 20px #ffc8000d}.mode-icon{font-size:1.4rem;color:#fff9;transition:all .25s ease}.mode-card.active .mode-icon{color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan)}.mode-card.ultra.active .mode-icon{color:var(--neon-yellow);text-shadow:0 0 15px var(--neon-yellow);animation:zap .6s ease-in-out infinite}@keyframes zap{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.mode-name{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:#fffc}.mode-card.active .mode-name{color:#fff}.mode-desc{font-family:var(--font-body);font-size:.65rem;color:#ffffff59;text-align:center}.launch-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 32px;margin-top:8px;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));border:none;border-radius:10px;cursor:pointer;overflow:hidden;transition:transform .2s ease,box-shadow .3s ease}.launch-btn:hover{transform:scale(1.02);box-shadow:0 0 30px #0ff6,0 0 60px #ff00ff4d}.launch-btn:active{transform:scale(.98)}.launch-text{font-family:var(--font-display);font-size:1.3rem;font-weight:900;letter-spacing:.2em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.launch-hint{font-family:var(--font-body);font-size:.65rem;color:#ffffffb3;margin-top:2px}.launch-glow{position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.3),transparent);animation:rotateGlow 3s linear infinite;opacity:0;transition:opacity .3s ease}.launch-btn:hover .launch-glow{opacity:1}@keyframes rotateGlow{to{transform:rotate(360deg)}}.highscore{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#ffc8000d;border:1px solid rgba(255,200,0,.15);border-radius:8px}.hs-label{font-family:var(--font-display);font-size:.6rem;font-weight:700;letter-spacing:.15em;color:#ffc800b3}.hs-value{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--neon-yellow);text-shadow:0 0 15px var(--neon-yellow)}.footer-hints{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;opacity:0;animation:fadeIn .6s ease .8s forwards}@keyframes fadeIn{to{opacity:1}}.hint{font-family:var(--font-body);font-size:.75rem;color:#ffffff4d}.hint-sep{color:#ffffff26}@media(max-width:768px),(max-height:600px){.home-container{grid-template-columns:1fr;gap:24px;max-width:400px}.brand-panel{padding-right:0;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:24px;gap:16px}.brand-content{flex-direction:row;align-items:center;gap:16px}.logo-mark{width:48px;height:48px}.logo-icon{font-size:1.4rem}.title{gap:0}.title-line{font-size:1.6rem}.edition-badge,.waveform{display:none}.controls-panel{gap:16px}.mode-card{padding:12px 6px}.mode-icon{font-size:1.2rem}.mode-name{font-size:.6rem}.mode-desc{display:none}.launch-btn{padding:14px 24px}.launch-text{font-size:1.1rem}.footer-hints{display:none}}@media(max-height:500px){.start-screen{padding:10px}.home-container{gap:16px}.brand-panel{padding-bottom:16px}.title-line{font-size:1.4rem}.control-group{gap:6px}.control-label{font-size:.55rem}.platform-opt{padding:8px 12px;font-size:.7rem}.mode-card{padding:10px 4px}.launch-btn{padding:12px 20px;margin-top:4px}.launch-text{font-size:1rem}.launch-hint{display:none}.highscore{padding:8px 12px}}.game-track{position:relative;width:100%;max-width:600px;height:450px;background:linear-gradient(180deg,#000000f2,#0a0a14fa,#14051ef2);border:2px solid var(--neon-cyan);border-radius:12px;overflow:hidden;box-shadow:0 0 30px #00ffff4d,inset 0 0 60px #000c;transition:transform .1s ease-out}.game-track.pulse-hit{animation:pulseHit .3s ease-out}.game-track.shake{animation:shake .3s ease-out}@keyframes pulseHit{0%{box-shadow:0 0 30px #00ffff4d,inset 0 0 60px #000c}50%{box-shadow:0 0 80px #0ffc,0 0 120px #f0f6,inset 0 0 60px #000c}to{box-shadow:0 0 30px #00ffff4d,inset 0 0 60px #000c}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.deadline-bar{position:absolute;left:0;right:0;height:4px;z-index:15;transition:top .1s linear,background-color .3s ease,box-shadow .3s ease}.deadline-bar:before{content:"";position:absolute;inset:0;background:inherit;filter:blur(8px);opacity:.8}.deadline-bar.urgent{animation:deadlinePulse .2s ease-in-out infinite;height:6px}@keyframes deadlinePulse{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.7;transform:scaleY(1.5)}}.timer-overlay{position:absolute;top:12px;right:16px;font-family:var(--font-mono);font-size:1.5rem;font-weight:700;z-index:16;text-shadow:0 0 20px currentColor;transition:color .3s ease}.timer-overlay.urgent{animation:timerTextPulse .2s ease-in-out infinite}@keyframes timerTextPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.game-track.success-flash{animation:successFlash .5s ease-out}@keyframes successFlash{0%{box-shadow:0 0 30px #00ffff4d,inset 0 0 60px #000c}30%{box-shadow:0 0 100px #00ff64,0 0 150px #00ff64cc,inset 0 0 100px #00ff644d}to{box-shadow:0 0 30px #00ffff4d,inset 0 0 60px #000c}}.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0px,rgba(0,0,0,.15) 1px,transparent 1px,transparent 3px);pointer-events:none;z-index:10}.track-lanes{position:absolute;inset:0;display:flex;justify-content:space-evenly;padding:0 40px}.lane{width:2px;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(0,255,255,.1) 30%,rgba(0,255,255,.2) 70%,rgba(0,255,255,.4) 100%)}.target-zone{position:absolute;bottom:60px;left:0;right:0;height:8px;z-index:5}.target-glow{position:absolute;top:-20px;left:20px;right:20px;height:50px;background:radial-gradient(ellipse at center,rgba(255,0,255,.3) 0%,transparent 70%);filter:blur(10px)}.target-line{position:absolute;top:50%;left:20px;right:20px;height:4px;background:linear-gradient(90deg,transparent 0%,var(--neon-magenta) 10%,var(--neon-cyan) 50%,var(--neon-magenta) 90%,transparent 100%);box-shadow:0 0 20px var(--neon-magenta),0 0 40px var(--neon-cyan);border-radius:2px}.shortcut-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:8;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.shortcut-level{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:2px;color:#fff6;margin-bottom:4px}.shortcut-category{font-family:var(--font-display);font-size:.75rem;text-transform:uppercase;letter-spacing:3px;color:var(--neon-magenta);margin-bottom:8px;text-shadow:0 0 10px var(--neon-magenta)}.shortcut-action{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(0,255,255,.3);margin-bottom:20px;max-width:400px;line-height:1.3}.shortcut-prompt{font-family:var(--font-body);font-size:.875rem;color:#fff9;margin-bottom:12px;letter-spacing:1px}.shortcut-keys{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan),0 0 60px rgba(0,255,255,.5);padding:16px 32px;background:#00ffff0d;border:2px solid rgba(0,255,255,.3);border-radius:8px;display:inline-block;transition:all .2s ease}.shortcut-keys.correct{color:var(--neon-green);border-color:var(--neon-green);background:#00ff641a;text-shadow:0 0 20px var(--neon-green),0 0 40px var(--neon-green);animation:correctPulse .5s ease-out}.shortcut-keys.incorrect{color:var(--neon-red);border-color:var(--neon-red);background:#ff32321a;text-shadow:0 0 20px var(--neon-red),0 0 40px var(--neon-red)}.shortcut-keys.urgent{color:var(--neon-red);border-color:var(--neon-red);text-shadow:0 0 20px var(--neon-red),0 0 40px var(--neon-red);animation:urgentPulse .3s ease-in-out infinite}@keyframes urgentPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.shortcut-keys.challenge-mode{color:var(--neon-magenta);border-color:var(--neon-magenta);background:#ff00ff0d;text-shadow:0 0 20px var(--neon-magenta),0 0 40px rgba(255,0,255,.5);letter-spacing:8px;font-size:3rem}.shortcut-keys.challenge-mode.reveal{animation:revealKeys .4s ease-out}.shortcut-keys.ultra-mode{color:var(--neon-yellow);border-color:var(--neon-yellow);background:#ffc8001a;text-shadow:0 0 20px var(--neon-yellow),0 0 40px rgba(255,200,0,.5);letter-spacing:8px;font-size:3rem;animation:ultraKeysPulse .3s ease-in-out infinite}@keyframes ultraKeysPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.shortcut-keys.ultra-mode.reveal{animation:revealKeys .4s ease-out}@keyframes revealKeys{0%{transform:scale(.8);opacity:0;filter:blur(10px)}to{transform:scale(1);opacity:1;filter:blur(0)}}.input-display{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px}.input-label{font-family:var(--font-body);font-size:.75rem;color:#ffffff80;text-transform:uppercase;letter-spacing:2px}.input-key{font-family:var(--font-mono);font-size:1.25rem;padding:8px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fffc;transition:all .2s ease}.input-key.correct{color:var(--neon-green);border-color:var(--neon-green);background:#00ff641a}.input-key.incorrect{color:var(--neon-red);border-color:var(--neon-red);background:#ff32321a}.paused-overlay{position:absolute;inset:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20}.paused-text{font-family:var(--font-display);font-size:3rem;font-weight:900;color:var(--neon-yellow);text-shadow:0 0 30px var(--neon-yellow),0 0 60px var(--neon-yellow);letter-spacing:8px;animation:pausePulse 1.5s ease-in-out infinite}@keyframes pausePulse{0%,to{opacity:1}50%{opacity:.6}}.paused-hint{font-family:var(--font-body);font-size:1rem;color:#fff9;margin-top:16px;letter-spacing:2px}.hit-effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}.hit-burst{position:absolute;top:50%;left:50%;width:200px;height:200px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,255,100,.6) 0%,rgba(0,255,255,.3) 30%,transparent 70%);animation:burstExpand .5s ease-out forwards}@keyframes burstExpand{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.hit-text{position:relative;font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--neon-green);text-shadow:0 0 20px var(--neon-green),0 0 40px var(--neon-green),0 0 60px var(--neon-green);animation:hitTextPop .5s ease-out forwards;letter-spacing:4px}@keyframes hitTextPop{0%{transform:scale(0);opacity:1}50%{transform:scale(1.3)}to{transform:scale(1);opacity:0}}.hit-ring{position:absolute;top:50%;left:50%;width:100px;height:100px;border:3px solid var(--neon-green);border-radius:50%;transform:translate(-50%,-50%);animation:ringExpand .6s ease-out forwards;box-shadow:0 0 20px var(--neon-green),inset 0 0 20px var(--neon-green)}.hit-ring.ring-2{animation-delay:.1s;border-color:var(--neon-cyan);box-shadow:0 0 20px var(--neon-cyan),inset 0 0 20px var(--neon-cyan)}@keyframes ringExpand{0%{width:50px;height:50px;opacity:1}to{width:300px;height:300px;opacity:0}}.success-particles{position:absolute;top:50%;left:50%;width:0;height:0}.success-particles .particle{position:absolute;width:8px;height:8px;background:var(--neon-green);border-radius:50%;box-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green);animation:particleExplode .6s ease-out forwards;animation-delay:var(--delay)}.success-particles .particle:nth-child(odd){background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan)}.success-particles .particle:nth-child(3n){background:var(--neon-yellow);box-shadow:0 0 10px var(--neon-yellow),0 0 20px var(--neon-yellow);width:6px;height:6px}@keyframes particleExplode{0%{transform:rotate(var(--angle)) translate(0) scale(1);opacity:1}to{transform:rotate(var(--angle)) translate(150px) scale(0);opacity:0}}.miss-effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}.miss-text{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--neon-red);text-shadow:0 0 20px var(--neon-red),0 0 40px var(--neon-red);animation:missTextFade .5s ease-out forwards;letter-spacing:4px}@keyframes missTextFade{0%{transform:scale(1);opacity:1}to{transform:scale(.8) translateY(20px);opacity:0}}.preview-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:8;animation:previewEnter .4s cubic-bezier(.34,1.56,.64,1)}@keyframes previewEnter{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.preview-category{font-family:var(--font-display);font-size:.875rem;text-transform:uppercase;letter-spacing:4px;color:var(--neon-magenta);margin-bottom:16px;text-shadow:0 0 15px var(--neon-magenta)}.preview-action{font-family:var(--font-display);font-size:3rem;font-weight:900;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.8),0 0 60px var(--neon-cyan),0 0 90px var(--neon-magenta);max-width:500px;line-height:1.2;animation:previewPulse 1.5s ease-in-out infinite}@keyframes previewPulse{0%,to{text-shadow:0 0 30px rgba(255,255,255,.8),0 0 60px var(--neon-cyan),0 0 90px var(--neon-magenta)}50%{text-shadow:0 0 40px rgba(255,255,255,1),0 0 80px var(--neon-cyan),0 0 120px var(--neon-magenta)}}.preview-hint{font-family:var(--font-body);font-size:1rem;color:#ffffff80;margin-top:24px;letter-spacing:2px;animation:previewHintBlink .8s ease-in-out infinite}@keyframes previewHintBlink{0%,to{opacity:.5}50%{opacity:1}}.shortcut-card.from-preview{animation:cardFromPreview .4s ease-out}@keyframes cardFromPreview{0%{opacity:.8}to{opacity:1}}.shortcut-action.shrink-from-preview{animation:shrinkFromPreview .4s ease-out}@keyframes shrinkFromPreview{0%{font-size:3rem;text-shadow:0 0 30px rgba(255,255,255,.8),0 0 60px var(--neon-cyan)}to{font-size:1.5rem;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(0,255,255,.3)}}.shortcut-keys.slide-in{animation:slideInFromBelow .4s cubic-bezier(.34,1.56,.64,1)}@keyframes slideInFromBelow{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.scoreboard{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;background:linear-gradient(135deg,#0a0a14f2,#140a1ef2);border:1px solid rgba(0,255,255,.2);border-radius:16px;box-shadow:0 0 40px #00000080,inset 0 0 30px #00ffff0d;min-width:280px}.score-main{text-align:center}.score-label{font-family:var(--font-display);font-size:.75rem;letter-spacing:4px;color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan);margin-bottom:4px}.score-value{font-family:var(--font-mono);font-size:3rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px rgba(0,255,255,.3);line-height:1}.multiplier{position:relative;width:100px;height:100px}.multiplier-ring{position:absolute;top:0;left:0;width:100%;height:100%}.multiplier-ring svg{width:100%;height:100%;transition:all .3s ease}.multiplier.active .multiplier-ring svg circle:last-of-type{filter:drop-shadow(0 0 8px var(--neon-cyan))}.multiplier-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.multiplier-value{font-family:var(--font-display);font-size:1.75rem;font-weight:900;color:var(--neon-magenta);text-shadow:0 0 20px var(--neon-magenta);transition:all .2s ease}.multiplier.active .multiplier-value{color:var(--neon-yellow);text-shadow:0 0 20px var(--neon-yellow),0 0 40px var(--neon-yellow);animation:multiplierPulse .5s ease-in-out infinite}@keyframes multiplierPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.multiplier-label{font-family:var(--font-display);font-size:.625rem;letter-spacing:2px;color:#ffffff80;margin-top:2px}.stats-row{display:flex;gap:24px;justify-content:center;width:100%}.stat{text-align:center;flex:1}.stat-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:4px}.stat-value.streak{color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan)}.stat-value.accuracy{color:var(--neon-green);text-shadow:0 0 15px var(--neon-green)}.stat-value.high-score{color:var(--neon-yellow);text-shadow:0 0 15px var(--neon-yellow)}.stat-label{font-family:var(--font-display);font-size:.625rem;letter-spacing:2px;color:#fff6;text-transform:uppercase}.level-display{display:flex;align-items:center;gap:14px;padding:10px 20px;background:#000000b3;border:2px solid rgba(0,255,255,.3);border-radius:50px;box-shadow:0 0 25px #0ff3}.level-badge{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));border-radius:50%;box-shadow:0 0 20px #00ffff80,0 0 40px #ff00ff4d,inset 0 0 10px #ffffff4d;flex-shrink:0}.level-number{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}.level-info{display:flex;flex-direction:column;gap:4px}.level-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--neon-cyan);text-shadow:0 0 15px var(--neon-cyan);line-height:1}.level-progress-bar{position:relative;width:160px;height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.level-progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));border-radius:4px;transition:width .3s ease-out;box-shadow:0 0 10px var(--neon-cyan)}.level-progress-segments{position:absolute;inset:0;display:flex;gap:2px;padding:2px}.segment{flex:1;background:transparent;border-radius:2px;border:1px solid rgba(255,255,255,.15);transition:all .3s ease}.segment.filled{border-color:transparent}.level-progress-text{font-family:var(--font-body);font-size:.65rem;color:#ffffff80;letter-spacing:.5px}.game{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}.game-bg{position:absolute;inset:0;pointer-events:none;z-index:0}.bg-pulse{position:absolute;top:50%;left:50%;width:150%;height:150%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,0,255,.05) 0%,transparent 50%);animation:bgPulse 4s ease-in-out infinite}@keyframes bgPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}.bg-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,transparent 100px,rgba(0,255,255,.02) 100px,rgba(0,255,255,.02) 101px)}.game-header{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px;min-height:100px;background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 70%,transparent 100%)}.exit-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffb3;font-family:var(--font-display);font-size:.875rem;letter-spacing:1px;cursor:pointer;transition:all .2s ease}.exit-btn:hover{border-color:var(--neon-red);color:var(--neon-red);background:#ff32321a}.exit-icon{font-size:1.25rem}.header-center{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.mode-indicator{font-family:var(--font-display);font-size:.625rem;letter-spacing:2px;padding:4px 12px;border-radius:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.mode-indicator.learning{color:var(--neon-cyan);border-color:#00ffff4d;text-shadow:0 0 10px var(--neon-cyan)}.mode-indicator.challenge{color:var(--neon-magenta);border-color:#ff00ff4d;text-shadow:0 0 10px var(--neon-magenta)}.mode-indicator.ultra{color:var(--neon-yellow);border-color:#ffc80066;background:#ffc8001a;text-shadow:0 0 10px var(--neon-yellow);animation:ultraIndicatorPulse .5s ease-in-out infinite}@keyframes ultraIndicatorPulse{0%,to{box-shadow:0 0 10px #ffc8004d}50%{box-shadow:0 0 20px #ffc80099}}.pause-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fffc;font-size:1.25rem;cursor:pointer;transition:all .2s ease}.pause-btn:hover{background:#ffffff1a;border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 15px #00ffff4d}.lives-display{display:flex;gap:12px;align-items:center}.life{font-size:2.5rem;transition:all .3s ease;filter:drop-shadow(0 0 5px rgba(255,50,50,.3))}.life.active{color:var(--neon-red);text-shadow:0 0 20px var(--neon-red),0 0 40px rgba(255,50,50,.5);animation:heartBeat 1s ease-in-out infinite}.life.lost{color:#ffffff1a;transform:scale(.7);filter:none;text-shadow:none}.life.losing{animation:heartLose .6s ease-out forwards}@keyframes heartBeat{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes heartLose{0%{color:var(--neon-red);transform:scale(1);text-shadow:0 0 20px var(--neon-red)}20%{transform:scale(1.4);text-shadow:0 0 40px var(--neon-red),0 0 60px rgba(255,50,50,.8)}40%{transform:scale(.5) rotate(-15deg)}60%{transform:scale(.9) rotate(10deg);opacity:.5}80%{transform:scale(.6) rotate(-5deg);opacity:.3}to{color:#ffffff1a;transform:scale(.7) rotate(0);text-shadow:none;opacity:1}}.game-main{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:5}.game-layout{display:flex;align-items:flex-start;gap:32px;max-width:1100px;width:100%}.track-container{flex:1;display:flex;justify-content:center}.game-sidebar{display:flex;flex-direction:column;gap:16px;min-width:280px}.skip-btn{padding:12px 20px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#ffffff80;font-family:var(--font-body);font-size:.875rem;cursor:pointer;transition:all .2s ease}.skip-btn:hover:not(:disabled){border-color:var(--neon-red);color:var(--neon-red);background:#ff32321a}.skip-btn:disabled{opacity:.3;cursor:not-allowed}.game-footer{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 100%)}.hint{font-family:var(--font-body);font-size:.75rem;color:#fff6;letter-spacing:1px}.hint-divider{color:#fff3}.header-right{display:flex;align-items:center;gap:16px}.level-info-panel{padding:16px;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:12px;display:flex;flex-direction:column;gap:8px}.level-description{display:flex;flex-direction:column;gap:4px}.level-label{font-family:var(--font-display);font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--neon-magenta);text-shadow:0 0 10px var(--neon-magenta)}.level-desc{font-family:var(--font-body);font-size:.875rem;color:#ffffffb3}.shortcuts-in-level{font-family:var(--font-body);font-size:.75rem;color:#fff6;text-align:right}.level-up-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000e6;z-index:100;animation:fadeIn .3s ease-out}.level-up-content{position:relative;text-align:center;animation:levelUpPop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes levelUpPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.level-up-burst{position:absolute;top:50%;left:50%;width:400px;height:400px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,255,255,.4) 0%,rgba(255,0,255,.2) 30%,transparent 70%);animation:burstPulse 1s ease-in-out infinite}@keyframes burstPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}}.level-up-text{position:relative;font-family:var(--font-display);font-size:4rem;font-weight:900;letter-spacing:8px;color:var(--neon-yellow);text-shadow:0 0 30px var(--neon-yellow),0 0 60px var(--neon-yellow),0 0 90px rgba(255,200,0,.5);animation:levelUpGlow .5s ease-in-out infinite alternate}@keyframes levelUpGlow{0%{text-shadow:0 0 30px var(--neon-yellow),0 0 60px var(--neon-yellow)}to{text-shadow:0 0 50px var(--neon-yellow),0 0 100px var(--neon-yellow),0 0 150px var(--neon-yellow)}}.new-level{position:relative;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:4px;color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan);margin-top:24px}.new-level-desc{position:relative;font-family:var(--font-body);font-size:1rem;color:#ffffffb3;margin-top:8px}@media(max-width:900px){.game-layout{flex-direction:column;align-items:center}.game-sidebar{width:100%;max-width:600px}.header-center{position:static;transform:none}.header-right{flex-direction:column;gap:8px}.game-header{flex-wrap:wrap;gap:12px;justify-content:center}.level-up-text{font-size:2.5rem}}.game-over{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000f2;animation:fadeIn .5s ease-out;z-index:100}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-content{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px;max-width:500px;width:100%}.new-high-score{position:relative;animation:nhsPop .6s cubic-bezier(.34,1.56,.64,1)}@keyframes nhsPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.nhs-burst{position:absolute;top:50%;left:50%;width:300px;height:100px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,200,0,.4) 0%,transparent 70%);animation:nhsBurst 2s ease-in-out infinite}@keyframes nhsBurst{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}}.nhs-text{position:relative;font-family:var(--font-display);font-size:1.5rem;font-weight:900;letter-spacing:4px;color:var(--neon-yellow);text-shadow:0 0 20px var(--neon-yellow),0 0 40px var(--neon-yellow),0 0 60px rgba(255,200,0,.5);animation:nhsGlow 1s ease-in-out infinite}@keyframes nhsGlow{0%,to{text-shadow:0 0 20px var(--neon-yellow),0 0 40px var(--neon-yellow)}50%{text-shadow:0 0 30px var(--neon-yellow),0 0 60px var(--neon-yellow),0 0 80px var(--neon-yellow)}}.game-over-title{font-family:var(--font-display);font-size:3rem;font-weight:900;letter-spacing:8px;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px var(--neon-magenta);margin:0;animation:titlePulse 2s ease-in-out infinite}@keyframes titlePulse{0%,to{opacity:1}50%{opacity:.8}}.level-reached{display:flex;align-items:center;gap:16px;padding:16px 24px;background:#00ffff0d;border:1px solid rgba(0,255,255,.3);border-radius:12px;margin-bottom:8px}.level-reached-badge{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));border-radius:50%;box-shadow:0 0 20px #0ff6,inset 0 0 10px #fff3}.level-reached-num{font-family:var(--font-display);font-size:1.5rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.level-reached-info{display:flex;flex-direction:column;gap:4px}.level-reached-label{font-family:var(--font-display);font-size:.625rem;letter-spacing:2px;color:#ffffff80}.level-reached-name{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan)}.rank-display{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 40px}.rank-glow{position:absolute;top:50%;left:50%;width:150px;height:150px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--rank-color) 0%,transparent 70%);opacity:.3;filter:blur(30px);animation:rankGlow 1.5s ease-in-out infinite}@keyframes rankGlow{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.rank-letter{position:relative;font-family:var(--font-display);font-size:6rem;font-weight:900;line-height:1;text-shadow:0 0 30px currentColor,0 0 60px currentColor;animation:rankPop .8s cubic-bezier(.34,1.56,.64,1) .3s both}@keyframes rankPop{0%{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.rank-label{font-family:var(--font-display);font-size:.75rem;letter-spacing:4px;color:#ffffff80;margin-top:8px}.final-score{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(20px);transition:all .5s ease-out}.final-score.visible{opacity:1;transform:translateY(0)}.score-label{font-family:var(--font-display);font-size:.75rem;letter-spacing:4px;color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan)}.score-number{font-family:var(--font-mono);font-size:3.5rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.5),0 0 40px var(--neon-cyan)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;padding:20px;background:#ffffff05;border:1px solid rgba(255,255,255,.1);border-radius:12px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-num{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:#fff}.stat-name{font-family:var(--font-body);font-size:.75rem;color:#ffffff80}.high-score-compare{display:flex;align-items:center;gap:12px;padding:12px 24px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px}.hsc-label{font-family:var(--font-display);font-size:.75rem;letter-spacing:2px;color:#ffffff80;text-transform:uppercase}.hsc-value{font-family:var(--font-mono);font-size:1.25rem;font-weight:700;color:var(--neon-yellow);text-shadow:0 0 10px var(--neon-yellow)}.game-over-buttons{display:flex;gap:16px;margin-top:16px}.go-button{display:flex;align-items:center;gap:10px;padding:14px 28px;border:none;border-radius:8px;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .2s ease}.go-button.primary{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));color:#fff;box-shadow:0 0 20px #00ffff4d}.go-button.primary:hover{transform:scale(1.05);box-shadow:0 0 30px #00ffff80}.go-button.secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fffc}.go-button.secondary:hover{border-color:#fff6;background:#ffffff0d}.btn-icon{font-size:1.25rem}@media(max-width:500px){.stats-grid{grid-template-columns:repeat(2,1fr)}.game-over-buttons{flex-direction:column;width:100%}.go-button{justify-content:center}}.app{width:100%;height:100vh;overflow:hidden}