.snake-page .game-brand { color: #387864; font-size: 33px; letter-spacing: 1px; }
.snake-page .game-brand > span { display: block; margin-top: 6px; font-size: 10px; font-weight: 400; letter-spacing: 0; color: #7b9690; }
.snake-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #f1f7f4; }
.snake-stat { flex: 1; }
.snake-stat span { display: block; font-size: 10px; color: #78958c; }
.snake-stat strong { display: block; margin-top: 4px; font-size: 20px; color: #3e7161; font-variant-numeric: tabular-nums; }
.snake-toolbar .button { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
.snake-toolbar .secondary { border: 1px solid #d7e6df; color: #4c7768; background: #fff; }
.snake-board { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); grid-template-rows: repeat(20, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; padding: 8px; border: 6px solid #b4cdc2; border-radius: 14px; background: #e5efe6; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.snake-cell { position: relative; border: 1px solid #6a927c0b; min-width: 0; min-height: 0; }
.snake-cell.body { border-radius: 4px; border: 1px solid #e5efe6; background: #76aa8c; box-shadow: inset 0 2px 0 #ffffff26; }
.snake-cell.head { background: #397b61; border-radius: 5px; }
.snake-cell.head::before, .snake-cell.head::after { content: ''; position: absolute; width: 20%; height: 20%; border-radius: 50%; background: #fff; box-shadow: inset -1px 0 #294f42; }
.snake-board[data-direction="R"] .head::before { top: 18%; right: 18%; }
.snake-board[data-direction="R"] .head::after { bottom: 18%; right: 18%; }
.snake-board[data-direction="L"] .head::before { top: 18%; left: 18%; }
.snake-board[data-direction="L"] .head::after { bottom: 18%; left: 18%; }
.snake-board[data-direction="U"] .head::before { top: 18%; left: 18%; }
.snake-board[data-direction="U"] .head::after { top: 18%; right: 18%; }
.snake-board[data-direction="D"] .head::before { bottom: 18%; left: 18%; }
.snake-board[data-direction="D"] .head::after { bottom: 18%; right: 18%; }
.snake-cell.food::before { content: ''; position: absolute; inset: 12%; border-radius: 40% 40% 45% 45%; background: #d98278; box-shadow: inset 2px 2px 0 #ffffff4d; }
.snake-cell.food::after { content: ''; position: absolute; top: 0; left: 53%; width: 28%; height: 22%; border-radius: 80% 0; background: #628e62; transform: rotate(-18deg); }
.snake-controls { margin-top: 13px; }
.snake-controls button { width: 46px; height: 38px; font-size: 20px; touch-action: manipulation; }
.snake-page .game-overlay { background: #eef6eff0; }
.snake-page .game-overlay p { color: #557c69; }
@media (max-width: 575.98px) { .snake-page .game-brand { font-size: 29px; } .snake-toolbar { gap: 7px; padding: 10px; } .snake-toolbar .button { padding: 10px 8px; font-size: 11px; } .snake-board { padding: 4px; border-width: 5px; } .snake-page .board-caption { flex-wrap: wrap; } }
@media (max-width: 360px) { .snake-page .game-card { padding: 14px; } .snake-toolbar { gap: 6px; padding: 9px 7px; } .snake-stat strong { font-size: 18px; } .snake-toolbar .button { padding: 10px 6px; } }