.snake-game{max-width:600px;margin:auto;padding:clamp(14px,3vw,25px);border:1px solid var(--line,#b7cfdf);border-radius:24px;background:var(--surface,#fff);color:var(--ink,#18334f);box-shadow:0 15px 45px #12334b18}.snake-hero{display:flex;justify-content:space-between;align-items:center;gap:10px}.snake-hero>div>span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted,#627a91)}.snake-hero h1{font-size:clamp(40px,10vw,60px);line-height:1.1;letter-spacing:-.05em;margin:7px 0}.snake-hero h1 span{color:#06a78c}.snake-hero p{font-size:12px;line-height:1.6;color:var(--muted,#627a91)}.snake-hero>b{font-size:60px;filter:drop-shadow(0 7px 8px #269a4e33)}.snake-game button{font:inherit;cursor:pointer;min-height:44px;padding:8px 10px;border:1px solid var(--line,#b7cfdf);border-radius:10px;background:var(--brand-soft,#e9f5ff);color:var(--ink,#18334f);font-size:12px;font-weight:700}.snake-game button:disabled{opacity:.45;cursor:default}.snake-game button:focus-visible,.snake-game canvas:focus-visible{outline:3px solid #cf006e;outline-offset:3px}.snake-speeds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.snake-speeds button{padding:10px 4px}.snake-speeds button[aria-pressed=true]{background:linear-gradient(135deg,#006cb7,#168976);color:#fff;border-color:transparent;box-shadow:0 3px 10px #087e952b}.snake-speeds small{display:block;font-size:10px;font-weight:400;margin-top:3px}.snake-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.snake-stats>div{padding:10px 3px;text-align:center;background:var(--brand-soft,#f0f7fc);border:1px solid var(--line,#c6d8e9);border-radius:12px}.snake-stats small{display:block;font-size:10px;color:var(--muted,#627a91)}.snake-stats strong{font-size:clamp(20px,5vw,27px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.snake-board{position:relative;line-height:0;border:3px solid #2a4e65;border-radius:16px;box-shadow:0 5px 0 #0d273c;overflow:hidden;background:#102a3f}.snake-board canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none;user-select:none}.snake-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;line-height:1.5;background:#102a3fcc;color:#e1fce8;pointer-events:none;text-align:center;padding:10px}.snake-overlay b{font-size:clamp(18px,5vw,27px)}.snake-overlay span{font-size:11px;color:#afcbd4}.snake-overlay[hidden]{display:none}.snake-actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 10px}.snake-actions [data-snake-toggle]{background:#006cb7;color:#fff;border-color:#006cb7}.snake-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.snake-controls button{font-size:25px;padding:4px;min-height:53px}.snake-controls small{display:block;font-size:10px}.snake-status{font-size:12px;min-height:1.5em;color:var(--brand-primary,#006cb7);margin:12px 0 4px}.snake-storage{font-size:11px;color:var(--muted,#627a91)}.snake-rules{border-top:1px solid var(--line,#c6d8e9);padding-top:15px;margin-top:15px;font-size:13px;line-height:1.7}.snake-rules summary{font-weight:750;cursor:pointer}.snake-rules p{margin:12px 0}@media(prefers-reduced-motion:no-preference){.snake-actions button{transition:background .12s,transform .12s}.snake-actions button:active{transform:translateY(2px)}}