.snake-stage { display: flex; justify-content: center; margin: 14px auto 10px; touch-action: none; cursor: pointer; }
.snake-stage canvas { display: block; border-radius: 16px; border: 1px solid rgba(34, 211, 238, 0.35); box-shadow: 0 0 40px -12px rgba(34, 211, 238, 0.45), 0 20px 50px -24px rgba(0, 0, 0, 0.7); }
.tip { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 10px; }

.dpad { display: none; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 50px); gap: 6px; justify-content: center; margin: 0 auto 16px; touch-action: none; }
.dpad button { appearance: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.dpad button:active { background: rgba(34, 211, 238, 0.25); }
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 2; }
.dpad .right { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .dpad { display: grid; } }