:root{--bg: #050510;--bg-card: rgba(10, 10, 30, .85);--bg-overlay: rgba(5, 5, 16, .92);--neon-cyan: #00f0ff;--neon-blue: #0080ff;--neon-purple: #a040ff;--neon-pink: #ff40a0;--neon-green: #40ff80;--neon-yellow: #ffff40;--neon-red: #ff4040;--text: #e0e0ff;--text-dim: #7070a0;--border: rgba(0, 180, 255, .15);--glow-cyan: 0 0 20px rgba(0, 240, 255, .3);--radius: 12px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text)}.app-root{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.game-container{flex:1;position:relative;overflow:hidden}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:48px;background:var(--bg-card);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;flex-shrink:0}.navbar-brand{display:flex;align-items:center;gap:.5rem}.navbar-icon{filter:drop-shadow(0 0 6px rgba(0,240,255,.5))}.navbar-title{font-size:.9rem;font-weight:700;letter-spacing:.12em;color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,240,255,.4)}.navbar-x-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:var(--text);text-decoration:none;transition:all .2s;background:transparent;border:1px solid transparent}.navbar-x-btn:hover{color:var(--neon-cyan);border-color:var(--border);box-shadow:var(--glow-cyan)}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 2rem;border:1px solid var(--border);border-radius:var(--radius);background:#00b4ff14;color:var(--text);font-size:1rem;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:all .2s;font-family:inherit;width:100%}.btn:hover{background:#00b4ff26;border-color:var(--neon-cyan);box-shadow:var(--glow-cyan);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-play{background:linear-gradient(135deg,#00f0ff33,#0080ff33);border-color:#00f0ff66;font-size:1.1rem;padding:1rem 2rem}.btn-play:hover{background:linear-gradient(135deg,#00f0ff4d,#0080ff4d);box-shadow:0 0 30px #00f0ff4d,inset 0 0 20px #00f0ff1a}.btn-danger{background:linear-gradient(135deg,#ff404033,#c8323233);border-color:#ff404066;font-size:1rem;padding:.75rem 1.5rem;width:100%}.btn-danger:hover{background:linear-gradient(135deg,#ff40404d,#c832324d);box-shadow:0 0 30px #ff40404d,inset 0 0 20px #ff40401a}.btn-secondary{background:#ffffff0d;border-color:#ffffff1a}.btn-settings{background:transparent;border-color:#ffffff14;font-size:.85rem;padding:.5rem 1.5rem;color:var(--text-dim);width:auto}.btn-icon{font-size:.9em}.menu-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:1rem}.menu-content{display:flex;flex-direction:column;align-items:center;gap:1.25rem;max-width:500px;width:100%;max-height:100%;overflow-y:auto;padding:1rem}.menu-logo{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.5rem}.logo-icon{animation:logoPulse 3s ease-in-out infinite}@keyframes logoPulse{0%,to{filter:drop-shadow(0 0 8px rgba(0,240,255,.4));transform:scale(1)}50%{filter:drop-shadow(0 0 20px rgba(0,240,255,.8));transform:scale(1.05)}}.logo-title{font-size:1.6rem;font-weight:800;letter-spacing:.15em;color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,240,255,.5),0 0 40px rgba(0,240,255,.2);text-align:center}.logo-subtitle{font-size:.8rem;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase}.selector-group{width:100%;display:flex;flex-direction:column;gap:.5rem}.selector-label{font-size:.7rem;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;text-align:center}.selector-row{display:flex;gap:.5rem}.selector-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.6rem .5rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#ffffff08;color:var(--text-dim);cursor:pointer;transition:all .2s;font-family:inherit}.selector-btn:hover{border-color:#00f0ff4d;background:#00f0ff0d}.selector-btn.active{border-color:var(--neon-cyan);background:#00f0ff1a;color:var(--neon-cyan);box-shadow:0 0 15px #00f0ff26}.selector-btn-label{font-size:.8rem;font-weight:700;letter-spacing:.1em}.selector-btn-desc{font-size:.6rem;opacity:.6}.difficulty-btn.active{border-color:var(--accent, var(--neon-cyan));color:var(--accent, var(--neon-cyan));box-shadow:0 0 15px color-mix(in srgb,var(--accent, var(--neon-cyan)) 30%,transparent)}.high-scores{display:flex;gap:1rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:#0003;width:100%;justify-content:center}.hs-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.hs-label{font-size:.6rem;letter-spacing:.15em;color:var(--text-dim)}.hs-value{font-size:1.1rem;font-weight:700;color:var(--neon-cyan);font-variant-numeric:tabular-nums}.overlay-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-overlay);z-index:20;padding:1rem;animation:fadeIn .25s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-card{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:400px;width:100%;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.overlay-title{font-size:1.8rem;font-weight:800;letter-spacing:.15em;color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,240,255,.5)}.gameover-title{color:var(--neon-red);text-shadow:0 0 20px rgba(255,64,64,.5)}.overlay-buttons{display:flex;flex-direction:column;gap:.5rem;width:100%}.new-highscore{font-size:.9rem;font-weight:700;letter-spacing:.15em;color:var(--neon-yellow);text-shadow:0 0 15px rgba(255,255,64,.5);animation:hsPulse 1s ease-in-out infinite}@keyframes hsPulse{0%,to{opacity:1}50%{opacity:.6}}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.75rem;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:#0003}.stat-value{font-size:1.4rem;font-weight:800;color:var(--neon-cyan);font-variant-numeric:tabular-nums}.stat-label{font-size:.6rem;letter-spacing:.15em;color:var(--text-dim)}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.hud-flash-red{animation:flashRed .3s ease-out}@keyframes flashRed{0%{background:#ff00004d}to{background:transparent}}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem 1rem}.hud-left,.hud-right{pointer-events:auto}.hud-score{display:flex;flex-direction:column}.hud-score-label{font-size:.6rem;letter-spacing:.15em;color:var(--text-dim)}.hud-score-value{font-size:1.5rem;font-weight:800;color:var(--text);text-shadow:0 0 10px rgba(0,240,255,.3);font-variant-numeric:tabular-nums}.hud-center{display:flex;flex-direction:column;align-items:center}.hud-timer{font-size:2rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(0,240,255,.3)}.hud-timer.warning{color:var(--neon-red);text-shadow:0 0 15px rgba(255,64,64,.5);animation:timerPulse .5s ease-in-out infinite}.hud-timer.bonus{color:var(--neon-green);text-shadow:0 0 15px rgba(64,255,128,.5);animation:timerBonus .3s ease-out}@keyframes timerBonus{0%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.hud-level{display:flex;align-items:baseline;gap:.3rem}.hud-level-label{font-size:.7rem;color:var(--text-dim);letter-spacing:.1em}.hud-level-value{font-size:1.4rem;font-weight:800;color:var(--neon-cyan)}.hud-pause-btn{pointer-events:auto;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#0000004d;color:var(--text);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.hud-pause-btn:hover{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan)}.hud-lives{position:absolute;top:60px;left:1rem;display:flex;gap:.3rem}.hud-heart{font-size:1.2rem;transition:all .3s}.hud-heart.active{color:var(--neon-red);text-shadow:0 0 8px rgba(255,64,64,.5)}.hud-heart.lost{color:#ff404026;animation:heartLost .3s ease-out}@keyframes heartLost{0%{transform:scale(1.5);opacity:1}to{transform:scale(.8);opacity:.15}}.hud-combo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;animation:comboAppear .3s ease-out;pointer-events:none}@keyframes comboAppear{0%{transform:translate(-50%,-50%) scale(1.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.hud-combo-count{font-size:3rem;font-weight:900;color:var(--combo-color, var(--neon-cyan));text-shadow:0 0 20px var(--combo-color, var(--neon-cyan));line-height:1}.hud-combo-label{font-size:.8rem;font-weight:700;letter-spacing:.2em;color:var(--combo-color, var(--neon-cyan));opacity:.8}.hud-combo-multiplier{font-size:1.2rem;font-weight:800;color:var(--neon-yellow);text-shadow:0 0 10px rgba(255,255,64,.5)}.hud-xp-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff0d}.hud-xp-fill{height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-blue));transition:width .3s ease-out;box-shadow:0 0 8px #00f0ff66}.hud-level-badge{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.6rem;font-weight:700;letter-spacing:.15em;color:var(--text-dim);background:#0006;padding:.15rem .5rem;border-radius:4px}.settings-card{max-width:360px}.settings-group{width:100%;display:flex;flex-direction:column;gap:.4rem}.settings-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text)}.settings-value{color:var(--neon-cyan);font-variant-numeric:tabular-nums}.settings-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:#ffffff1a;outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--neon-cyan);cursor:pointer;box-shadow:0 0 10px #00f0ff80}.settings-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--neon-cyan);cursor:pointer;border:none;box-shadow:0 0 10px #00f0ff80}.menu-bottom-btns{display:flex;gap:.5rem;width:100%}.menu-bottom-btns .btn{flex:1}.achievements-card{max-width:440px;max-height:80vh;overflow-y:auto}.achievements-progress{width:100%;display:flex;flex-direction:column;gap:.4rem;align-items:center}.achievements-progress-bar{width:100%;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.achievements-progress-fill{height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple));transition:width .4s ease-out;border-radius:3px}.achievements-progress-text{font-size:.75rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.achievements-grid{width:100%;display:flex;flex-direction:column;gap:.5rem}.achievement-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#0003;transition:all .2s}.achievement-item.unlocked{border-color:#00f0ff33;background:#00f0ff0d}.achievement-icon{font-size:1.5rem;width:36px;text-align:center;flex-shrink:0}.achievement-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}.achievement-name{font-size:.8rem;font-weight:700;color:var(--text);letter-spacing:.05em}.achievement-item.locked .achievement-name{color:var(--text-dim)}.achievement-desc{font-size:.65rem;color:var(--text-dim)}.achievement-toast{position:fixed;top:60px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;border:1px solid rgba(255,215,0,.4);border-radius:12px;background:#0a0a1ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 30px #ffd70033,0 4px 20px #00000080;z-index:1000;pointer-events:none;max-width:90vw}.achievement-toast.show{animation:toastIn .4s ease-out forwards}.achievement-toast.hide{animation:toastOut .4s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-20px) scale(.9)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-10px) scale(.95)}}.achievement-toast-icon{font-size:2rem;flex-shrink:0;animation:toastIconPop .5s ease-out .2s both}@keyframes toastIconPop{0%{transform:scale(.5)}60%{transform:scale(1.3)}to{transform:scale(1)}}.achievement-toast-content{display:flex;flex-direction:column;gap:.1rem}.achievement-toast-title{font-size:.55rem;letter-spacing:.2em;color:var(--neon-yellow);font-weight:700}.achievement-toast-name{font-size:.95rem;font-weight:800;color:gold;text-shadow:0 0 10px rgba(255,215,0,.4)}.achievement-toast-desc{font-size:.7rem;color:var(--text-dim)}@media(max-width:600px){.navbar-title{font-size:.7rem}.logo-title{font-size:1.2rem}.btn-play{font-size:1rem;padding:.85rem 1.5rem}.selector-btn-desc{display:none}.hud-timer{font-size:1.5rem}.hud-score-value{font-size:1.2rem}.hud-combo-count{font-size:2rem}.overlay-card{padding:1.5rem}.stats-grid{gap:.5rem}.stat-value{font-size:1.1rem}}@media(max-height:600px){.menu-content{gap:.75rem}.menu-logo{margin-bottom:0}.logo-icon svg{width:40px;height:40px}}