*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif;--bg: #0a0a12;--neon-green: #39ff14;--neon-pink: #ff2e97;--neon-blue: #00d4ff;--neon-gold: #ffd700;--neon-purple: #bf40ff}html,body,#root{height:100%;background:var(--bg);color:#e0e0e0;overflow:hidden}body{display:flex;justify-content:center;align-items:center}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;height:100%}.game-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}.hud{display:flex;gap:2rem;font-size:.95rem;font-weight:600;letter-spacing:.05em}.hud-item{display:flex;align-items:center;gap:.4rem}.hud-item .label{color:#ffffff73;text-transform:uppercase;font-size:.7rem;letter-spacing:.15em}.hud-item .value{font-variant-numeric:tabular-nums;font-size:1.1rem}.score-val{color:var(--neon-green)}.combo-val{color:var(--neon-pink)}.level-val{color:var(--neon-blue)}.high-val{color:var(--neon-gold)}canvas{border:2px solid rgba(255,255,255,.08);border-radius:8px;image-rendering:pixelated;box-shadow:0 0 30px #39ff1412,inset 0 0 60px #0000004d}.powerup-bar{display:flex;gap:.6rem;min-height:28px;align-items:center}.powerup-indicator{display:flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;animation:pulse-glow 1s ease-in-out infinite}.powerup-indicator.speed{background:#ff2e9726;border:1px solid var(--neon-pink);color:var(--neon-pink)}.powerup-indicator.slow{background:#00d4ff26;border:1px solid var(--neon-blue);color:var(--neon-blue)}.powerup-indicator.shield{background:#bf40ff26;border:1px solid var(--neon-purple);color:var(--neon-purple)}.powerup-indicator.multiplier{background:#ffd70026;border:1px solid var(--neon-gold);color:var(--neon-gold)}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#05050fe0;border-radius:8px;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay h1{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.2rem}.overlay h1 .snake-text{background:linear-gradient(135deg,var(--neon-green),var(--neon-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overlay .subtitle{color:#ffffff80;font-size:.85rem;margin-bottom:1.5rem}.overlay .final-score{font-size:3rem;font-weight:800;color:var(--neon-green);text-shadow:0 0 20px rgba(57,255,20,.4)}.overlay .high-score-label{color:var(--neon-gold);font-size:.8rem;margin-top:.3rem;text-transform:uppercase;letter-spacing:.15em}.controls-info{display:flex;flex-direction:column;gap:.4rem;margin:1.2rem 0;color:#fff6;font-size:.8rem;text-align:center}.controls-info kbd{display:inline-block;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:.1rem .45rem;font-family:inherit;font-size:.75rem;color:#ffffffb3}.start-btn{background:linear-gradient(135deg,var(--neon-green),#00cc66);color:#000;border:none;padding:.7rem 2.5rem;font-size:1rem;font-weight:700;border-radius:999px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;transition:transform .15s,box-shadow .15s;box-shadow:0 0 25px #39ff144d}.start-btn:hover{transform:scale(1.05);box-shadow:0 0 40px #39ff1480}.start-btn:active{transform:scale(.97)}.legend{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem;font-size:.72rem;color:#fff6}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-dot{width:10px;height:10px;border-radius:50%}.mobile-controls{display:none;gap:.5rem}@media(max-width:600px){.mobile-controls{display:grid;grid-template-areas:". up ." "left . right" ". down .";grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:4px}.mobile-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#ffffffb3;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.mobile-btn:active{background:#ffffff26}.mb-up{grid-area:up}.mb-down{grid-area:down}.mb-left{grid-area:left}.mb-right{grid-area:right}}