/* 貪食蛇專用樣式 */
.sn-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; max-width: 480px; margin: 0 auto; }
.sn-info { margin: 6px 0; text-align: center; font-size: 1.05rem; }
.sn-info strong { color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.sn-stage { max-width: 420px; margin: 0 auto; outline: none; }
.sn-stage:focus-visible { box-shadow: 0 0 0 3px #9fb8f6; border-radius: 4px; }
.sn-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; border: 3px solid var(--brand-dark); background: #f4f7ff; user-select: none; -webkit-user-select: none; touch-action: auto; }
.sn-canvas.playing { touch-action: none; }
.sn-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 10px auto; }
.sn-ctl .btn { min-height: 50px; }
.sn-pad { display: grid; grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(2, 60px); gap: 6px; justify-content: center; margin: 12px auto; user-select: none; -webkit-user-select: none; }
.sn-pad .btn { min-height: 0; height: 100%; padding: 0; font-size: 1.6rem; touch-action: manipulation; }
.sn-pad .u { grid-column: 2; grid-row: 1; }
.sn-pad .l { grid-column: 1; grid-row: 2; }
.sn-pad .d { grid-column: 2; grid-row: 2; }
.sn-pad .r { grid-column: 3; grid-row: 2; }
@media (hover: hover) and (pointer: fine) { .sn-pad { display: none; } }