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

:root {
  --title-color: var(--color-missilecommand);
}

.missilecommand-board[data-visual-theme='arcade'] {
  --missilecommand-sky-top: #2a0e26;
  --missilecommand-sky-bottom: #3a0f34;
  --missilecommand-ground: #24081e;
  --missilecommand-grid: rgb(255 79 216 / 12%);
  --missilecommand-stars: rgb(255 184 236 / 55%);
  --missilecommand-horizon-glow: rgb(255 79 216 / 20%);
  --missilecommand-mountain-far: #24081e;
  --missilecommand-mountain-near: #170714;
  --missilecommand-base-dark: #4a1440;
  --missilecommand-base-light: #ffb8ec;
}

.missilecommand-board[data-visual-theme='midnight'] {
  --missilecommand-sky-top: #050c1a;
  --missilecommand-sky-bottom: #0b1d3a;
  --missilecommand-ground: #0a1729;
  --missilecommand-grid: rgb(56 189 248 / 12%);
  --missilecommand-stars: rgb(186 230 253 / 55%);
  --missilecommand-horizon-glow: rgb(56 189 248 / 20%);
  --missilecommand-mountain-far: #0d1f33;
  --missilecommand-mountain-near: #071527;
  --missilecommand-base-dark: #123456;
  --missilecommand-base-light: #bae6fd;
}

.missilecommand-board[data-visual-theme='daylight'] {
  --missilecommand-sky-top: #241640;
  --missilecommand-sky-bottom: #4c2f8a;
  --missilecommand-ground: #221338;
  --missilecommand-grid: rgb(124 58 237 / 16%);
  --missilecommand-stars: rgb(237 233 254 / 60%);
  --missilecommand-horizon-glow: rgb(124 58 237 / 24%);
  --missilecommand-mountain-far: #2a1a4d;
  --missilecommand-mountain-near: #1c1136;
  --missilecommand-base-dark: #5b3a9e;
  --missilecommand-base-light: #ede9fe;
}

.missilecommand-board[data-visual-theme='amber'] {
  --missilecommand-sky-top: #1a1004;
  --missilecommand-sky-bottom: #3d2408;
  --missilecommand-ground: #241503;
  --missilecommand-grid: rgb(251 191 36 / 12%);
  --missilecommand-stars: rgb(253 230 138 / 55%);
  --missilecommand-horizon-glow: rgb(251 191 36 / 20%);
  --missilecommand-mountain-far: #2c1a06;
  --missilecommand-mountain-near: #1a1004;
  --missilecommand-base-dark: #5a3a0f;
  --missilecommand-base-light: #fde68a;
}

.missilecommand-board {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--surface-deep);
  border: 1px solid color-mix(in srgb, var(--title-color) 48%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--title-color) 12%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--title-color) 12%, transparent),
    var(--shadow-lg);
}

.missilecommand-hint {
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--card-ink-muted);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--title-color) 22%, var(--line));
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  text-align: center;
}

.missilecommand-hint[hidden] {
  display: none;
}

.missilecommand-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  filter: saturate(1.08) contrast(1.04);
}

@media (hover: none) {
  .missilecommand-canvas {
    cursor: default;
  }
}