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

:root {
  --title-color: var(--color-jetpack);
  --jetpack-sky-top: #251043;
  --jetpack-sky-bottom: #5b163e;
  --jetpack-grid: rgba(255, 255, 255, 0.08);
  --jetpack-player-light: #fecdd3;
  --jetpack-laser: #fb7185;
  --jetpack-laser-glow: #fda4af;
  --jetpack-zapper: #c084fc;
  --jetpack-zapper-node: #f5d0fe;
  --jetpack-coin: #fbbf24;
  --jetpack-coin-light: #fef3c7;
  --jetpack-flame: #fb923c;
  --jetpack-city: rgba(15, 23, 42, 0.45);
  --jetpack-stars: rgba(255, 255, 255, 0.7);
  --jetpack-horizon: rgba(255, 255, 255, 0.18);
  --jetpack-player-glow: #fb7185;
  --jetpack-coin-glow: #fbbf24;
  --jetpack-danger: #fef08a;
  --jetpack-board-glow: rgba(244, 63, 94, 0.16);
}

.jetpack-board[data-visual-theme='arcade'] {
  --jetpack-sky-top: #3a0f34;
  --jetpack-sky-bottom: #7a1b5e;
  --jetpack-grid: rgb(255 79 216 / 10%);
  --jetpack-city: rgb(58 15 52 / 55%);
  --jetpack-stars: rgb(255 184 236 / 70%);
  --jetpack-horizon: rgb(255 184 236 / 22%);
  --jetpack-board-glow: rgb(255 79 216 / 22%);
}

.jetpack-board[data-visual-theme='midnight'] {
  --jetpack-sky-top: #0b1d3a;
  --jetpack-sky-bottom: #16283b;
  --jetpack-grid: rgb(56 189 248 / 10%);
  --jetpack-city: rgb(11 29 58 / 55%);
  --jetpack-stars: rgb(186 230 253 / 70%);
  --jetpack-horizon: rgb(186 230 253 / 22%);
  --jetpack-board-glow: rgb(56 189 248 / 20%);
}

.jetpack-board[data-visual-theme='daylight'] {
  --jetpack-sky-top: #4c2f8a;
  --jetpack-sky-bottom: #7c3aed;
  --jetpack-grid: rgb(124 58 237 / 12%);
  --jetpack-city: rgb(76 47 138 / 45%);
  --jetpack-stars: rgb(237 233 254 / 80%);
  --jetpack-horizon: rgb(237 233 254 / 26%);
  --jetpack-board-glow: rgb(124 58 237 / 24%);
}

.jetpack-board[data-visual-theme='amber'] {
  --jetpack-sky-top: #3d2408;
  --jetpack-sky-bottom: #7a4b12;
  --jetpack-grid: rgb(251 191 36 / 10%);
  --jetpack-city: rgb(61 36 8 / 55%);
  --jetpack-stars: rgb(253 230 138 / 70%);
  --jetpack-horizon: rgb(253 230 138 / 22%);
  --jetpack-board-glow: rgb(251 191 36 / 22%);
}

.jetpack-board {
  overflow: hidden;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px rgb(35 12 43 / 72%),
    inset 0 0 34px rgb(8 4 20 / 48%),
    var(--shadow-sm),
    0 0 28px var(--jetpack-board-glow);
}

.jetpack-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}