:root {
  --bg: #0f1220;
  --fg: #e8eef8;
  --accent: #5ee1a2;
  --grid: #1b2036;
  --snake: #66aaff;
  --snakeHead: #ffd166;
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#app { max-width: 1100px; margin: 0 auto; padding: 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
h1 { font-size: 20px; margin: 0; letter-spacing: 0.3px; }
.controls { display: flex; align-items: center; gap: 8px; }
button { background: var(--accent); border: none; color: #0a0d18; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }
button:active { transform: translateY(1px); }
label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.hud { display: grid; grid-template-columns: repeat(6, auto); gap: 16px; align-items: center; margin: 10px 0; opacity: 0.9; }
.canvas-wrap { position: relative; width: 95%; max-width: 1000px; aspect-ratio: 4/3; margin: 0 auto; background: #0b0e1a; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,0.4); overflow: hidden; }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10,13,24,0.55); backdrop-filter: blur(2px); }
.overlay.show { display: flex; }
.overlay .panel { background: rgba(20,24,43,0.9); border: 1px solid #2a3256; padding: 18px 22px; border-radius: 10px; text-align: center; }
.overlay #overlayTitle { font-size: 18px; margin-bottom: 8px; font-weight: 700; }
.overlay #overlayMsg { font-size: 14px; opacity: 0.9; }
.hint { text-align: center; color: #aab7d4; font-size: 13px; margin-top: 10px; line-height: 1.4; }

/* === Player-count toggle (1P / 2P) === */
.player-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #2a3256;
  border-radius: 999px;
  background: rgba(20, 24, 43, 0.5);
}
.player-toggle .seg {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.player-toggle .seg.selected {
  background: var(--accent);
  color: #0a0d18;
  border-color: var(--accent);
}
.player-toggle span {
  font-size: 13px;
  opacity: 0.9;
}
/* prevent layout shift on click */
.player-toggle .seg:active {
  transform: none;
}