:root {
  --snake-accent: #7ecfff;
  --snake-glow: 0 0 10px rgba(126, 207, 255, 0.4), 0 0 22px rgba(80, 190, 255, 0.25);
}

.snake-screen {
  --screen-aspect: 4 / 3;
  --screen-padding: clamp(10px, 2vw, 22px);
  --crt-radius: 12px;
  --crt-scanline-spacing: 4px;
  --crt-scanline-thickness: 1px;
  --crt-scanline-alpha: 0.045;
  --crt-scanline-opacity: 0.62;
  --crt-aperture-opacity: 0.08;
  --crt-vignette-gradient: radial-gradient(ellipse at center, rgba(12, 26, 52, 0.35) 0%, rgba(5, 10, 20, 0.95) 78%, rgba(0, 0, 0, 0.98) 100%);
  --crt-flicker-animation: snake-flicker 2.4s steps(2, end) infinite;
  --crt-glow-shadow: inset 0 0 70px rgba(90, 170, 255, 0.18);
}

.snake-screen canvas {
  background: #000312;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.85),
    inset 0 0 50px rgba(70, 140, 255, 0.12);
}

.snake-hud {
  display: grid;
  align-content: flex-end;
  padding: 12px 14px;
  color: var(--snake-accent);
  text-shadow: var(--snake-glow);
}

.snake-hud .retro-controls {
  justify-content: space-between;
  gap: clamp(8px, 2vw, 20px);
  font-size: clamp(10px, 1.8vw, 16px);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.snake-hud .title {
  font-weight: 700;
}

.snake-hud .scoreboard {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

.snake-controls {
  font-size: clamp(9px, 1.6vw, 13px);
  opacity: 0.85;
}

@keyframes snake-flicker {
  0%, 100% { opacity: 0.7; }
  40% { opacity: 0.64; }
  55% { opacity: 0.76; }
  75% { opacity: 0.66; }
}