.snake-game {max-width:600px;margin:24px auto 48px;padding:clamp(16px,4vw,32px);}
.snake-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.snake-heading h1 {font-size:clamp(2rem,7vw,3.2rem);margin:6px 0;letter-spacing:-.05em;}
.snake-heading p {margin-bottom:12px;}.snake-pill{font-size:.65rem;letter-spacing:.12em;padding:8px 10px;border:1px solid var(--line);border-radius:6px;white-space:nowrap;color:var(--acid);}
.snake-scores{display:flex;gap:24px;margin:18px 0;}.snake-scores>div{display:flex;align-items:center;gap:12px;}.snake-scores span{font-size:.8rem;color:var(--muted);}.snake-scores output{font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--acid);}
.snake-board{position:relative;max-width:480px;margin:0 auto;border:1px solid #9a64e166;border-radius:14px;background:#0b0711;box-shadow:0 0 40px #9a64e110;overflow:hidden;}
#snake-canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none;outline-offset:-4px;}
#snake-canvas:focus-visible{outline:2px solid var(--acid);}
.snake-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:22px;pointer-events:none;background:#09060edb;}
.snake-overlay[hidden]{display:none;}.snake-overlay strong{font-size:clamp(1.2rem,5vw,1.9rem);}.snake-overlay>span:last-child{color:var(--muted);font-size:.86rem;max-width:290px;}
.snake-status{min-height:2.8em;margin:18px 0 8px;font-size:.9rem;}.snake-actions{display:flex;flex-wrap:wrap;gap:10px;}
.snake-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,44px);gap:6px;justify-content:center;margin:20px 0;touch-action:manipulation;}
.snake-dpad .btn{padding:0;font-size:1.4rem;min-width:44px;}.snake-dpad>span{display:grid;place-items:center;color:var(--muted);grid-column:2;grid-row:2;}
#snake-up{grid-column:2;grid-row:1;}#snake-left{grid-column:1;grid-row:2;}#snake-right{grid-column:3;grid-row:2;}#snake-down{grid-column:2;grid-row:3;}
@media(max-width:420px){.snake-scores{gap:16px;}.snake-scores>div{gap:8px;}.snake-pill{font-size:.6rem;}}