/*
  snake.css, game-specific rules only. Shared chrome (body, HUD, buttons,
  overlays, panel) comes from ../shared/arcade.css, loaded before this file.
*/

.snake-panel {
  width: min(480px, 92vw);
}

/* Fixed 480x480 logical coordinates; the backing store is sized to device
   pixels by Arcade.setupCanvas, so rendering stays crisp at any scale. */
.snake-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--arcade-radius) - 4px);
  touch-action: none;
}

.snake-footer {
  margin: 0;
  text-align: center;
  font-size: clamp(7px, 1.2vw, 10px);
  color: var(--arcade-muted);
  letter-spacing: 0.05em;
  max-width: 480px;
}