:root{--bg-page:#0d0f14;--bg-card:#ffffff0a;--bg-board:#111318;--border:#ffffff14;--text:#c8cdd8;--text-muted:#6b7280;--text-heading:#f1f5f9;--green:#0f8;--green-dim:#00ff8826;--red:#ff5050;--yellow:#fbbf24;--blue:#60a5fa;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--sans:"Inter", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;font-family:var(--sans);color:var(--text);background:var(--bg-page);-webkit-font-smoothing:antialiased;font-size:14px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh}#root{flex-direction:column;min-height:100vh;display:flex}.app{flex-direction:column;gap:20px;min-height:100vh;padding:20px;display:flex}.app-header{text-align:center}.app-title{color:var(--text-heading);letter-spacing:-.5px;font-size:28px;font-weight:700}.game-layout{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;display:flex}.board-wrapper{border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border), 0 0 40px #00ff880f, 0 20px 60px #00000080;flex-shrink:0;position:relative;overflow:hidden}.game-canvas{background:var(--bg-board);display:block}.overlay{-webkit-backdrop-filter:blur(8px);background:#0a0c12d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay-card{border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;background:#ffffff0a;flex-direction:column;align-items:center;gap:14px;min-width:280px;padding:40px 48px;display:flex}.overlay-icon{font-size:52px;line-height:1}.snake-icon{animation:1.5s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.overlay-title{color:var(--text-heading);font-size:28px;font-weight:700}.overlay-title-main{color:var(--green);text-shadow:0 0 20px #0f86;font-size:42px}.overlay-subtitle{color:var(--text-muted);font-size:15px}.overlay-badge{background:var(--green-dim);color:var(--green);border:1px solid #00ff884d;border-radius:20px;padding:4px 16px;font-size:14px;font-weight:600}.overlay-scores{border-radius:var(--radius-sm);background:#0003;flex-direction:column;gap:8px;width:100%;padding:14px 20px;display:flex}.overlay-score-row{color:var(--text-muted);justify-content:space-between;font-size:15px;display:flex}.overlay-score-val{color:var(--text-heading);font-variant-numeric:tabular-nums;font-weight:700}.overlay-score-best{color:var(--yellow)}.overlay-record{color:var(--yellow);font-size:14px}.overlay-hint{color:var(--text-muted);font-size:12px}.side-panel{flex-direction:column;gap:16px;width:260px;display:flex}.scoreboard{gap:8px;display:flex}.score-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;flex:1;align-items:center;gap:4px;padding:14px 8px;display:flex}.score-label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-size:11px}.score-value{font-variant-numeric:tabular-nums;font-size:24px;font-weight:800;line-height:1}.score-current{color:var(--green)}.score-best{color:var(--yellow)}.score-level{color:var(--blue)}.info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px}.info-card h3{color:var(--text-heading);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;font-size:13px;font-weight:600}.tip-list{flex-direction:column;gap:6px;list-style:none;display:flex}.tip-list li{color:var(--text);font-size:13px;line-height:1.5}.tip-list strong{color:var(--green)}kbd{font-family:var(--mono);color:var(--text-heading);background:#ffffff14;border:1px solid #ffffff26;border-radius:4px;padding:1px 6px;font-size:11px;display:inline-block}.controls{flex-direction:column;gap:14px;display:flex}.action-buttons{flex-wrap:wrap;gap:8px;display:flex}.btn{font-family:var(--sans);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;padding:9px 20px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--green);color:#0a0c12}.btn-primary:hover{background:#3fa;box-shadow:0 0 16px #00ff8859}.btn-secondary{color:var(--blue);background:#60a5fa26;border:1px solid #60a5fa4d}.btn-secondary:hover{background:#60a5fa40}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover{color:var(--text);border-color:#fff3}.btn-large{border-radius:var(--radius-md);padding:12px 36px;font-size:16px}.dpad{flex-direction:column;align-items:center;gap:4px;display:flex}.dpad-row{gap:4px;display:flex}.dpad-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);width:48px;height:48px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:16px;transition:all .12s;display:flex}.dpad-btn:hover{color:var(--text-heading);background:#ffffff14}.dpad-btn:active{background:#ffffff1f;transform:scale(.93)}.dpad-center{background:var(--green-dim);color:var(--green);border-color:#0f83}.dpad-center:hover{background:#00ff8840}@media (width<=720px){.game-layout{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:600px}.scoreboard{justify-content:center}}.leaderboard h3{margin-bottom:12px}.lb-status{color:var(--text-muted);text-align:center;padding:8px 0;font-size:13px}.lb-error{color:var(--red)}.lb-list{flex-direction:column;gap:6px;list-style:none;display:flex}.lb-row{border-radius:var(--radius-sm);background:#ffffff08;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.lb-top{background:#00ff880f}.lb-rank{text-align:center;width:24px;color:var(--text-muted);flex-shrink:0;font-size:14px}.lb-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.lb-score{color:var(--green);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700}.submit-score{flex-direction:column;gap:8px;width:100%;display:flex}.name-input{width:100%;font-family:var(--sans);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-heading);box-sizing:border-box;background:#ffffff0f;outline:none;padding:9px 12px;font-size:14px;transition:border-color .15s}.name-input::placeholder{color:var(--text-muted)}.name-input:focus{border-color:#0f86}.name-input:disabled{opacity:.5}.submit-error{color:var(--red);text-align:center;font-size:12px}.submit-success{color:var(--green);font-size:14px;font-weight:600}