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

:root {
  --title-color: var(--color-magnetball);
  --magnetball-void-top: #050915;
  --magnetball-void-mid: #0f172a;
  --magnetball-void-bottom: #070817;
  --magnetball-corridor-top: #112847;
  --magnetball-corridor-mid: #172554;
  --magnetball-corridor-bottom: #101d3a;
  --magnetball-corridor-edge: #2dd4bf;
}

.magnetball-board[data-visual-theme='arcade'] {
  --magnetball-void-top: #2a0e26;
  --magnetball-void-mid: #170714;
  --magnetball-void-bottom: #24081e;
  --magnetball-corridor-top: #3a1230;
  --magnetball-corridor-mid: #4a1440;
  --magnetball-corridor-bottom: #2a0a3d;
  --magnetball-corridor-edge: #ff4fd8;
}

.magnetball-board[data-visual-theme='midnight'] {
  --magnetball-void-top: #050c1a;
  --magnetball-void-mid: #0b1d3a;
  --magnetball-void-bottom: #0a1729;
  --magnetball-corridor-top: #0d1f33;
  --magnetball-corridor-mid: #123456;
  --magnetball-corridor-bottom: #071527;
  --magnetball-corridor-edge: #38bdf8;
}

.magnetball-board[data-visual-theme='daylight'] {
  --magnetball-void-top: #241640;
  --magnetball-void-mid: #4c2f8a;
  --magnetball-void-bottom: #221338;
  --magnetball-corridor-top: #2a1a4d;
  --magnetball-corridor-mid: #5b3a9e;
  --magnetball-corridor-bottom: #1c1136;
  --magnetball-corridor-edge: #a78bfa;
}

.magnetball-board[data-visual-theme='amber'] {
  --magnetball-void-top: #1a1004;
  --magnetball-void-mid: #3d2408;
  --magnetball-void-bottom: #241503;
  --magnetball-corridor-top: #2c1a06;
  --magnetball-corridor-mid: #5a3a0f;
  --magnetball-corridor-bottom: #1a1004;
  --magnetball-corridor-edge: #fbbf24;
}

.magnetball-board {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  background: var(--magnetball-void-top);
  border: 1px solid color-mix(in srgb, var(--color-magnetball) 64%, var(--line));
  border-radius: var(--border-radius-lg);
  touch-action: none;
  user-select: none;
  box-shadow:
    inset 0 0 0 3px rgb(6 16 34 / 74%),
    inset 0 0 30px rgb(3 7 18 / 54%),
    0 18px 40px rgb(4 15 30 / 42%);
}

.magnetball-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.magnetball-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.magnetball-score-float {
  position: absolute;
  color: #fef3c7;
  font-size: clamp(0.8rem, 2.6vw, 1.15rem);
  font-weight: var(--font-weight-bolder);
  pointer-events: none;
  text-shadow: 0 1px 3px rgb(15 23 42 / 0.8);
  transform: translate(-50%, -50%);
  animation: magnetball-score-float 600ms ease-out forwards;
}

@keyframes magnetball-score-float {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 2.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .magnetball-score-float {
    animation: none;
  }
}