:root{--bg-deep: #07130f;--bg-panel: #10231b;--bg-soft: #16382b;--text-main: #ecf3e5;--text-muted: #9ab7a8;--accent: #d4ff65;--snake: #84e58f;--food: #ff6b5f;--border: #2b5543;--radius: 16px;--shadow: 0 18px 40px rgba(0, 0, 0, .28);font-family:Segoe UI,Trebuchet MS,Geneva,sans-serif;color:var(--text-main)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{min-height:100dvh;background:radial-gradient(circle at 20% 10%,#214735 0%,transparent 45%),radial-gradient(circle at 85% 85%,#193a2c 0%,transparent 40%),var(--bg-deep)}html.scroll-locked,body.scroll-locked{overflow:hidden;overscroll-behavior:none}button{font:inherit}.app-shell{display:grid;place-items:center;min-height:100dvh;padding:12px;overflow:hidden}.game-card{width:min(680px,100%);background:linear-gradient(180deg,#173729,var(--bg-panel));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:grid;gap:10px}.title-block{display:grid;gap:2px}.title-block h1{margin:0;font-size:1.7rem;letter-spacing:.04em}.title-block p{margin:0;color:var(--text-muted);font-size:.9rem}.settings-panel{margin:0;background:#143225;border:1px solid var(--border);border-radius:12px;padding:0}.settings-summary{cursor:pointer;padding:10px 12px;color:var(--text-main);font-weight:600;list-style:none}.settings-summary::-webkit-details-marker{display:none}.settings-body{border-top:1px solid var(--border);padding:10px;display:grid;gap:10px}.settings-group{display:grid;gap:6px}.settings-label{margin:0;font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.settings-options{display:flex;flex-wrap:wrap;gap:6px}.settings-option{border:1px solid var(--border);border-radius:999px;background:#1f4a37;color:var(--text-main);padding:6px 10px;cursor:pointer}.settings-option[aria-pressed=true]{background:#2e7254;border-color:#4c9875}.settings-option:disabled{opacity:.6;cursor:not-allowed}.settings-help{margin:0;color:var(--text-muted);font-size:.8rem}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hud-item{background:#143225;border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:grid;gap:2px}.hud-label{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.play-surface{display:grid;gap:10px}.board-area{position:relative;width:min(100%,560px);margin:0 auto;touch-action:none}.game-canvas{display:block;width:100%;height:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg-panel);touch-action:none}.overlay,.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:10px;text-align:center;padding:18px;background:#07130fd6;border-radius:8px}.overlay h2,.overlay p,.pause-overlay p{margin:0}.overlay-help{color:var(--text-muted);font-size:.84rem}.pause-overlay{color:var(--accent);font-weight:700}.control-stack{display:grid;gap:10px}.actions{display:flex;gap:8px;justify-content:center}.actions button,.overlay button,.control-btn{border:1px solid var(--border);border-radius:10px;background:#1f4a37;color:var(--text-main);padding:10px 14px;cursor:pointer}.actions button:disabled,.control-btn:disabled{opacity:.55;cursor:not-allowed}.status-hint{margin:0;text-align:center;color:var(--text-muted);font-size:.86rem}.how-to-play{margin:0;border:1px solid var(--border);border-radius:10px;background:#143225}.how-to-play summary{cursor:pointer;padding:8px 10px;font-weight:600}.how-to-play p{margin:0;color:var(--text-muted);font-size:.84rem;padding:0 10px 8px}.touch-controls{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(78px,1fr));grid-template-areas:". up ." "left . right" ". down .";justify-items:stretch}.control-btn{min-height:48px;touch-action:manipulation}.control-btn.up{grid-area:up}.control-btn.left{grid-area:left}.control-btn.right{grid-area:right}.control-btn.down{grid-area:down}@media(hover:hover)and (pointer:fine){.touch-controls{display:none}.actions button:hover,.overlay button:hover,.control-btn:hover,.settings-option:hover{background:#2a6047;transform:translateY(-1px)}}@media(max-width:640px){.game-card{padding:12px;gap:8px}.title-block h1{font-size:1.5rem}.title-block p{font-size:.84rem}.hud-item{padding:7px 8px}.actions button,.overlay button,.control-btn{padding:10px 12px}}
