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

:root {
  --title-color: var(--color-colorswitch);
  --colorswitch-bg-top: #24104a;
  --colorswitch-bg-bottom: #070510;
  --colorswitch-pink: #f472b6;
  --colorswitch-yellow: #facc15;
  --colorswitch-cyan: #22d3ee;
  --colorswitch-purple: #c084fc;
  --colorswitch-player-gameover: #f8fafc;
  --colorswitch-player-highlight: rgb(255 255 255 / 72%);
  --colorswitch-floor-line: rgb(255 255 255 / 16%);
  --colorswitch-stars: rgb(255 255 255 / 38%);
  --colorswitch-tunnel-line: rgb(192 132 252 / 10%);
  --colorswitch-side-glow: rgb(34 211 238 / 9%);
  --colorswitch-ring-shadow: rgb(8 4 20 / 92%);
  --colorswitch-ring-rail: #120b21;
  --colorswitch-ring-glint: rgb(255 255 255 / 24%);
  --colorswitch-ring-joint: #090611;
  --colorswitch-pickup-ring: rgb(255 255 255 / 34%);
  --colorswitch-floor-glow: rgb(192 132 252 / 28%);
  --colorswitch-floor-dark: rgb(9 6 21 / 94%);
}

.colorswitch-board[data-visual-theme='arcade'] {
  --colorswitch-bg-top: #3a0f34;
  --colorswitch-bg-bottom: #0c0210;
  --colorswitch-tunnel-line: rgb(255 79 216 / 14%);
  --colorswitch-side-glow: rgb(255 79 216 / 12%);
  --colorswitch-ring-shadow: rgb(20 2 16 / 92%);
  --colorswitch-ring-rail: #24081e;
  --colorswitch-ring-joint: #150310;
  --colorswitch-floor-glow: rgb(255 79 216 / 32%);
  --colorswitch-floor-dark: rgb(18 3 15 / 94%);
}

.colorswitch-board[data-visual-theme='midnight'] {
  --colorswitch-bg-top: #0b1d3a;
  --colorswitch-bg-bottom: #050b16;
  --colorswitch-tunnel-line: rgb(56 189 248 / 14%);
  --colorswitch-side-glow: rgb(56 189 248 / 10%);
  --colorswitch-ring-shadow: rgb(3 9 18 / 92%);
  --colorswitch-ring-rail: #0d1f33;
  --colorswitch-ring-joint: #061019;
  --colorswitch-floor-glow: rgb(56 189 248 / 28%);
  --colorswitch-floor-dark: rgb(4 10 18 / 94%);
}

.colorswitch-board[data-visual-theme='daylight'] {
  --colorswitch-bg-top: #4c2f8a;
  --colorswitch-bg-bottom: #1c1136;
  --colorswitch-tunnel-line: rgb(124 58 237 / 18%);
  --colorswitch-side-glow: rgb(124 58 237 / 14%);
  --colorswitch-ring-shadow: rgb(10 5 24 / 88%);
  --colorswitch-ring-rail: #2a1a4d;
  --colorswitch-ring-joint: #180f2d;
  --colorswitch-floor-glow: rgb(124 58 237 / 32%);
  --colorswitch-floor-dark: rgb(16 9 32 / 94%);
}

.colorswitch-board[data-visual-theme='amber'] {
  --colorswitch-bg-top: #3d2408;
  --colorswitch-bg-bottom: #100a02;
  --colorswitch-tunnel-line: rgb(251 191 36 / 14%);
  --colorswitch-side-glow: rgb(251 191 36 / 10%);
  --colorswitch-ring-shadow: rgb(18 10 2 / 92%);
  --colorswitch-ring-rail: #2c1a06;
  --colorswitch-ring-joint: #170e03;
  --colorswitch-floor-glow: rgb(251 191 36 / 30%);
  --colorswitch-floor-dark: rgb(14 8 2 / 94%);
}

.colorswitch-board {
  display: grid;
  place-items: center;
  width: min(100%, 26rem);
  max-height: calc(100dvh - 10rem);
  aspect-ratio: 400 / 720;
  overflow: hidden;
  padding: 0;
  background: var(--colorswitch-bg-bottom);
  border: 1px solid color-mix(in srgb, var(--color-colorswitch) 42%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 24%);
  isolation: isolate;
  touch-action: manipulation;
  user-select: none;
}

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

@media (orientation: landscape) and (max-height: 36rem) {
  .colorswitch-board {
    width: min(100%, 18.5rem);
    max-height: calc(100dvh - 6.75rem);
  }
}