*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #080c08;--board-bg: #060b06;--grid-line: #0f1f0f;--snake-body: #00e5ff;--snake-head: #ffffff;--food: #ff2d78;--food-glow: #ff2d7880;--cyan-glow: #00e5ff60;--accent: #00ff88;--dim: #2a3a2a;--cell: 28px}html,body,#root{height:100%}body{background:var(--bg);font-family:Orbitron,Courier New,monospace;color:var(--snake-body);min-height:100vh;overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,#1a2a1a 1px,transparent 1px);background-size:32px 32px;opacity:.4;pointer-events:none}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.game-container{display:flex;flex-direction:column;align-items:center;gap:20px}.scoreboard{display:flex;align-items:center;gap:0;border:1px solid #1a3a1a;background:#00e5ff08;padding:10px 32px;min-width:260px;justify-content:center}.score-divider{width:1px;height:32px;background:#1a3a1a;margin:0 32px}.score-item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:80px}.score-label{font-size:9px;letter-spacing:4px;color:var(--dim)}.score-value{font-size:26px;font-weight:700;color:var(--snake-body);text-shadow:0 0 12px var(--cyan-glow);transition:text-shadow .1s}.score-value.best{color:var(--accent);text-shadow:0 0 12px #00ff8880}.board-wrapper{position:relative;line-height:0}.game-board{display:grid;grid-template-columns:repeat(var(--grid-size),var(--cell));grid-template-rows:repeat(var(--grid-size),var(--cell));border:2px solid #1a3a1a;background:var(--board-bg);box-shadow:0 0 0 1px #0a1a0a,0 0 40px #00e5ff14,inset 0 0 60px #0009;position:relative;overflow:hidden}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:1}.cell{width:var(--cell);height:var(--cell);border:.5px solid var(--grid-line);position:relative}.cell.snake-body{background:var(--snake-body);border-color:#00e5ff26;box-shadow:inset 0 0 4px #00e5ff66}.cell.snake-head{background:var(--snake-head);border-color:#ffffff80;box-shadow:0 0 8px var(--snake-head),0 0 16px var(--snake-body),inset 0 0 6px #00e5ff99;z-index:2}.cell.food{background:var(--food);border-color:transparent;border-radius:50%;box-shadow:0 0 8px var(--food),0 0 20px var(--food-glow);animation:food-pulse .7s ease-in-out infinite alternate;z-index:2}@keyframes food-pulse{0%{transform:scale(.72);box-shadow:0 0 6px var(--food),0 0 12px var(--food-glow)}to{transform:scale(.96);box-shadow:0 0 14px var(--food),0 0 30px var(--food-glow),0 0 50px #ff2d7830}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#060b06e0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10}.overlay-content{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding:16px}.title-block{display:flex;flex-direction:column;align-items:center;gap:6px}.game-title{font-size:64px;font-weight:900;letter-spacing:16px;color:var(--snake-body);text-shadow:0 0 20px var(--snake-body),0 0 60px var(--cyan-glow),0 0 100px rgba(0,229,255,.2);animation:title-flicker 4s ease-in-out infinite}@keyframes title-flicker{0%,95%,to{opacity:1}96%{opacity:.85}97%{opacity:1}98%{opacity:.9}}.game-subtitle{font-size:10px;letter-spacing:10px;color:var(--dim);margin-top:-4px}.controls-hint{display:flex;flex-direction:column;gap:4px}.controls-hint p{font-size:10px;letter-spacing:2px;color:var(--dim)}.gameover-title{font-size:38px;font-weight:900;letter-spacing:8px;color:var(--food);text-shadow:0 0 20px var(--food),0 0 40px var(--food-glow);animation:gameover-glow 1.2s ease-in-out infinite alternate}@keyframes gameover-glow{0%{text-shadow:0 0 12px var(--food),0 0 24px var(--food-glow)}to{text-shadow:0 0 24px var(--food),0 0 60px var(--food-glow)}}.result-scores{display:flex;align-items:center;gap:0;border:1px solid #2a1a1a;padding:14px 28px;background:#ff2d780a}.result-divider{width:1px;height:36px;background:#2a1a1a;margin:0 28px}.result-score-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}.result-label{font-size:9px;letter-spacing:4px;color:#433}.result-value{font-size:28px;font-weight:700;color:#c68;text-shadow:0 0 10px #cc668840}.result-value.best{color:var(--accent);text-shadow:0 0 12px #00ff8860}.new-record{font-size:11px;letter-spacing:6px;color:var(--accent);text-shadow:0 0 10px var(--accent);animation:record-pulse .8s ease-in-out infinite alternate}@keyframes record-pulse{0%{opacity:.7}to{opacity:1;text-shadow:0 0 20px var(--accent)}}.btn-start{padding:13px 40px;font-family:Orbitron,monospace;font-size:12px;font-weight:700;letter-spacing:5px;color:#060b06;background:var(--snake-body);border:none;cursor:pointer;transition:all .15s;box-shadow:0 0 20px var(--cyan-glow),0 0 40px #00e5ff1a;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%)}.btn-start:hover{background:var(--snake-head);box-shadow:0 0 30px var(--snake-body),0 0 60px var(--cyan-glow);transform:scale(1.05)}.btn-start:active{transform:scale(.98)}.mobile-controls{display:none}.dpad{display:flex;flex-direction:column;align-items:center;gap:4px}.dpad-row{display:flex;align-items:center;justify-content:center;gap:4px}.dpad-row.middle{gap:4px}.dpad-btn{width:60px;height:60px;background:#00e5ff0d;border:1px solid rgba(0,229,255,.2);color:var(--snake-body);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .08s,box-shadow .08s}.dpad-btn:active,.dpad-btn:focus{background:#00e5ff2e;box-shadow:0 0 14px var(--cyan-glow);outline:none}.dpad-center{width:60px;height:60px;background:#00e5ff05;border:1px solid rgba(0,229,255,.06)}@media (max-width: 640px){:root{--cell: 16px}.mobile-controls{display:flex}.game-title{font-size:40px;letter-spacing:10px}.scoreboard{padding:8px 20px;min-width:0}.score-divider{margin:0 20px}.dpad-btn,.dpad-center{width:52px;height:52px}.gameover-title{font-size:28px}}@media (max-width: 380px){:root{--cell: 14px}}