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

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

.laserquest-board[data-visual-theme='arcade'] {
  --laserquest-background-near: #3a0f34;
  --laserquest-background: #24081e;
  --laserquest-background-far: #170714;
  --laserquest-grid: rgb(255 79 216 / 16%);
}

.laserquest-board[data-visual-theme='midnight'] {
  --laserquest-background-near: #0b1d3a;
  --laserquest-background: #0a1729;
  --laserquest-background-far: #050c1a;
  --laserquest-grid: rgb(56 189 248 / 16%);
}

.laserquest-board[data-visual-theme='daylight'] {
  --laserquest-background-near: #4c2f8a;
  --laserquest-background: #221338;
  --laserquest-background-far: #1c1136;
  --laserquest-grid: rgb(124 58 237 / 20%);
}

.laserquest-board[data-visual-theme='amber'] {
  --laserquest-background-near: #3d2408;
  --laserquest-background: #241503;
  --laserquest-background-far: #1a1004;
  --laserquest-grid: rgb(251 191 36 / 16%);
}

.laserquest-board {
  --laserquest-background-near: #123447;
  --laserquest-background: #071c2a;
  --laserquest-background-far: #030a11;
  --laserquest-background-glow: var(--surface-2);
  --laserquest-grid: rgba(103, 232, 249, 0.13);
  --laserquest-frame: color-mix(in srgb, var(--color-laserquest) 58%, transparent);
  --laserquest-player: var(--ink);
  --laserquest-player-glow: var(--color-laserquest);
  --laserquest-warning: var(--warning);
  --laserquest-active: var(--danger);
  --laserquest-safe: var(--color-laserquest);
  --laserquest-text: var(--accent);
  --laserquest-panel: color-mix(in srgb, var(--surface-1) 90%, transparent);
  display: grid;
  place-items: stretch;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  background: var(--laserquest-background);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--laserquest-frame),
    0 0 36px var(--laserquest-grid),
    inset 0 0 2rem rgb(0 0 0 / 38%);
}

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