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

:root {
  --title-color: var(--color-neon-arena);
  --neon-ring: #22d3ee;
  --neon-player: #22d3ee;
  --neon-target: #facc15;
  --neon-hazard: #fb7185;
}

.neon-arena-stage[data-visual-theme='arcade'] {
  --neon-ring: #ff4fd8;
  --neon-player: color-mix(in srgb, #22d3ee 55%, #ff4fd8 45%);
  --neon-target: color-mix(in srgb, #facc15 65%, #ff4fd8 35%);
  --neon-hazard: color-mix(in srgb, #fb7185 65%, #ff4fd8 35%);
}

.neon-arena-stage[data-visual-theme='midnight'] {
  --neon-ring: #38bdf8;
  --neon-player: color-mix(in srgb, #22d3ee 55%, #38bdf8 45%);
  --neon-target: color-mix(in srgb, #facc15 65%, #38bdf8 35%);
  --neon-hazard: color-mix(in srgb, #fb7185 65%, #38bdf8 35%);
}

.neon-arena-stage[data-visual-theme='daylight'] {
  --neon-ring: #a78bfa;
  --neon-player: color-mix(in srgb, #22d3ee 55%, #a78bfa 45%);
  --neon-target: color-mix(in srgb, #facc15 65%, #a78bfa 35%);
  --neon-hazard: color-mix(in srgb, #fb7185 65%, #a78bfa 35%);
}

.neon-arena-stage[data-visual-theme='amber'] {
  --neon-ring: #fbbf24;
  --neon-player: color-mix(in srgb, #22d3ee 55%, #fbbf24 45%);
  --neon-target: color-mix(in srgb, #facc15 65%, #fbbf24 35%);
  --neon-hazard: color-mix(in srgb, #fb7185 65%, #fbbf24 35%);
}

.neon-arena-board {
  border: 1px solid color-mix(in srgb, var(--color-neon-arena) 42%, var(--line));
  border-radius: var(--border-radius-xl);
  background:
    radial-gradient(circle at 18% 22%, rgb(34 211 238 / 0.22), transparent 28%),
    radial-gradient(circle at 76% 70%, rgb(250 204 21 / 0.16), transparent 26%),
    linear-gradient(135deg, rgb(8 47 73 / 0.96), rgb(2 6 23 / 0.98));
  box-shadow:
    0 24px 70px rgb(0 0 0 / 0.38),
    inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.neon-arena-stage {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 6.25% 6.25%;
  touch-action: none;
}

.neon-arena-stage::before {
  position: absolute;
  inset: 8%;
  border: 1px solid color-mix(in srgb, var(--neon-ring) 22%, transparent);
  border-radius: 32px;
  box-shadow: inset 0 0 45px color-mix(in srgb, var(--neon-ring) 12%, transparent);
  content: '';
  pointer-events: none;
}

/* Combat-arena HUD scanlines over the containment ring — read as a holographic
   projection field, not just a background gradient. */
.neon-arena-stage::after {
  position: absolute;
  inset: 8%;
  border-radius: 32px;
  background: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, var(--neon-ring) 5%, transparent) 0 1px,
    transparent 1px 4px
  );
  content: '';
  pointer-events: none;
  mix-blend-mode: screen;
}

.neon-arena-player,
.neon-arena-target,
.neon-arena-hazard {
  position: absolute;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.neon-arena-player {
  background: var(--neon-player);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--neon-player) 14%, transparent),
    0 0 32px color-mix(in srgb, var(--neon-player) 74%, transparent);
}

.neon-arena-target {
  background: var(--neon-target);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--neon-target) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--neon-target) 78%, transparent);
}

.neon-arena-hazard {
  background: var(--neon-hazard);
  box-shadow:
    0 0 0 9px color-mix(in srgb, var(--neon-hazard) 16%, transparent),
    0 0 36px color-mix(in srgb, var(--neon-hazard) 72%, transparent);
}

.neon-arena-timebar {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-ring), var(--neon-target));
  box-shadow: 0 0 18px color-mix(in srgb, var(--neon-ring) 38%, transparent);
  transform-origin: left center;
}

.neon-arena-readout {
  position: absolute;
  right: 18px;
  bottom: 14px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(2 6 23 / 0.62);
  color: rgb(224 242 254);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .neon-arena-board {
    border-radius: var(--border-radius-lg);
  }

  .neon-arena-stage::before {
    inset: 12%;
    border-radius: 22px;
  }
}