@import url('../global.css');

:root {
  --title-color: var(--color-centipede);
  --centipede-background: #07111f;
  --centipede-background-top: #173b2d;
  --centipede-background-mid: #10291f;
  --centipede-background-bottom: #07140f;
  --centipede-background-glow: #19392d;
  --centipede-grid: rgba(176, 214, 164, 0.055);
  --centipede-grid-strong: rgba(134, 239, 172, 0.18);
  --centipede-danger-zone: rgba(34, 211, 238, 0.045);
}

.centipede-board[data-visual-theme='arcade'] {
  --centipede-background: #24081e;
  --centipede-background-top: #3a1230;
  --centipede-background-mid: #240f1f;
  --centipede-background-bottom: #170714;
  --centipede-background-glow: #3a0f34;
  --centipede-grid: rgb(255 79 216 / 8%);
  --centipede-grid-strong: rgb(255 79 216 / 22%);
  --centipede-danger-zone: rgb(255 79 216 / 6%);
}

.centipede-board[data-visual-theme='midnight'] {
  --centipede-background: #0a1729;
  --centipede-background-top: #123456;
  --centipede-background-mid: #0d1f33;
  --centipede-background-bottom: #050c1a;
  --centipede-background-glow: #0b1d3a;
  --centipede-grid: rgb(56 189 248 / 8%);
  --centipede-grid-strong: rgb(56 189 248 / 22%);
  --centipede-danger-zone: rgb(56 189 248 / 6%);
}

.centipede-board[data-visual-theme='daylight'] {
  --centipede-background: #221338;
  --centipede-background-top: #3b2470;
  --centipede-background-mid: #2a1a4d;
  --centipede-background-bottom: #1c1136;
  --centipede-background-glow: #4c2f8a;
  --centipede-grid: rgb(124 58 237 / 10%);
  --centipede-grid-strong: rgb(124 58 237 / 26%);
  --centipede-danger-zone: rgb(124 58 237 / 8%);
}

.centipede-board[data-visual-theme='amber'] {
  --centipede-background: #241503;
  --centipede-background-top: #4a2d08;
  --centipede-background-mid: #2c1a06;
  --centipede-background-bottom: #1a1004;
  --centipede-background-glow: #3d2408;
  --centipede-grid: rgb(251 191 36 / 8%);
  --centipede-grid-strong: rgb(251 191 36 / 22%);
  --centipede-danger-zone: rgb(251 191 36 / 6%);
}

.centipede-board {
  width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--color-centipede) 50%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px rgb(5 24 14 / 68%),
    inset 0 0 34px rgb(1 8 5 / 48%),
    0 0 0 1px color-mix(in srgb, var(--color-centipede) 16%, transparent),
    0 1rem 2.5rem color-mix(in srgb, var(--color-centipede) 16%, transparent),
    var(--game-board-shadow);
}

.centipede-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-1);
  touch-action: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .centipede-board {
    box-shadow: var(--game-board-shadow);
  }
}