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

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

.helix-board {
  position: relative;
  width: 100%;
  --helix-background-start: #081322;
  --helix-background-end: #281b35;
  --helix-glow: #d7a85b;
  --helix-platform-a: #d2a354;
  --helix-platform-b: #a887d7;
  --helix-platform-c: #63aeb0;
  --helix-platform-d: #c56f69;
  --helix-spine: #1b2632;
  --helix-spine-glow: #8c745d;
  --helix-ball-highlight: #fff3cf;
  --helix-ball-core: #f0b34e;
  --helix-ball-edge: #9e4f37;
  --helix-panel: rgba(12, 22, 35, 0.82);
  --helix-text: #f5dfad;
  overflow: hidden;
  padding: 0;
  background: var(--helix-background-start);
  border: 1px solid rgba(215, 168, 91, 0.56);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px rgba(7, 15, 26, 0.72),
    inset 0 0 2.5rem rgba(215, 168, 91, 0.08),
    var(--shadow-lg),
    0 0 32px rgba(215, 168, 91, 0.14);
}

.helix-board canvas {
  touch-action: none;
  user-select: none;
}

.helix-board[data-visual-theme='arcade'] {
  --helix-background-start: #1a0630;
  --helix-background-end: #3d0f4a;
  --helix-glow: #ff9ce4;
  --helix-platform-a: #ff4fd8;
  --helix-platform-b: #a855f7;
  --helix-platform-c: #38bdf8;
  --helix-platform-d: #fbbf24;
  --helix-spine: #1a0f26;
  --helix-spine-glow: #ff4fd8;
  --helix-panel: rgba(26, 6, 48, 0.82);
  --helix-text: #ffe3f8;
  --helix-ball-highlight: color-mix(in srgb, #fff3cf 65%, #ff4fd8 35%);
  --helix-ball-core: color-mix(in srgb, #f0b34e 60%, #ff4fd8 40%);
  --helix-ball-edge: color-mix(in srgb, #9e4f37 60%, #ff4fd8 40%);
}

.helix-board[data-visual-theme='midnight'] {
  --helix-background-start: #050b17;
  --helix-background-end: #14213a;
  --helix-glow: #93c5fd;
  --helix-platform-a: #38bdf8;
  --helix-platform-b: #818cf8;
  --helix-platform-c: #22d3ee;
  --helix-platform-d: #a78bfa;
  --helix-spine: #0b1220;
  --helix-spine-glow: #38bdf8;
  --helix-panel: rgba(5, 11, 23, 0.82);
  --helix-text: #dbeafe;
  --helix-ball-highlight: color-mix(in srgb, #fff3cf 65%, #38bdf8 35%);
  --helix-ball-core: color-mix(in srgb, #f0b34e 60%, #38bdf8 40%);
  --helix-ball-edge: color-mix(in srgb, #9e4f37 60%, #38bdf8 40%);
}

.helix-board[data-visual-theme='daylight'] {
  --helix-background-start: #2d1b4d;
  --helix-background-end: #7c5aa6;
  --helix-glow: #e9d5ff;
  --helix-platform-a: #a78bfa;
  --helix-platform-b: #c084fc;
  --helix-platform-c: #7dd3fc;
  --helix-platform-d: #fcd34d;
  --helix-spine: #2e1065;
  --helix-spine-glow: #c4b5fd;
  --helix-panel: rgba(45, 27, 77, 0.82);
  --helix-text: #f5f3ff;
  --helix-ball-highlight: color-mix(in srgb, #fff3cf 65%, #7c3aed 35%);
  --helix-ball-core: color-mix(in srgb, #f0b34e 60%, #7c3aed 40%);
  --helix-ball-edge: color-mix(in srgb, #9e4f37 60%, #7c3aed 40%);
}

.helix-board[data-visual-theme='amber'] {
  --helix-background-start: #211004;
  --helix-background-end: #4a2308;
  --helix-glow: #fde68a;
  --helix-platform-a: #f59e0b;
  --helix-platform-b: #fb923c;
  --helix-platform-c: #fbbf24;
  --helix-platform-d: #ea580c;
  --helix-spine: #1c0f04;
  --helix-spine-glow: #fbbf24;
  --helix-panel: rgba(33, 16, 4, 0.82);
  --helix-text: #fff3d6;
  --helix-ball-highlight: color-mix(in srgb, #fff3cf 65%, #fbbf24 35%);
  --helix-ball-core: color-mix(in srgb, #f0b34e 60%, #fbbf24 40%);
  --helix-ball-edge: color-mix(in srgb, #9e4f37 60%, #fbbf24 40%);
}

.helix-board__hint {
  position: absolute;
  inset: 1rem 1rem auto;
  z-index: 1;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--helix-ball-highlight) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--helix-panel) 88%, transparent);
  color: var(--helix-ball-highlight);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}