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

:root {
  --title-color: var(--color-spikefall);
  --spikefall-glow: rgba(251, 113, 133, 0.16);
  --spikefall-sky-a: #171827;
  --spikefall-sky-b: #0b0c14;
  --spikefall-sky-c: #08090f;
  --spikefall-structure-a: #111827;
  --spikefall-structure-b: #334155;
  --spikefall-structure-c: #0f172a;
}

.spikefall-board[data-visual-theme='arcade'] {
  --spikefall-glow: rgba(230, 96, 178, 0.2);
  --spikefall-sky-a: #1e0a2e;
  --spikefall-sky-b: #120a1c;
  --spikefall-sky-c: #0a0512;
  --spikefall-structure-a: #250e38;
  --spikefall-structure-b: #5a2c73;
  --spikefall-structure-c: #170a24;
}

.spikefall-board[data-visual-theme='midnight'] {
  --spikefall-glow: rgba(145, 169, 196, 0.16);
  --spikefall-sky-a: #131c2c;
  --spikefall-sky-b: #0b1220;
  --spikefall-sky-c: #070c15;
  --spikefall-structure-a: #1a2537;
  --spikefall-structure-b: #3c5169;
  --spikefall-structure-c: #0f1a29;
}

.spikefall-board[data-visual-theme='daylight'] {
  --spikefall-glow: rgba(167, 139, 250, 0.2);
  --spikefall-sky-a: #2c2450;
  --spikefall-sky-b: #201a3a;
  --spikefall-sky-c: #171029;
  --spikefall-structure-a: #382a5c;
  --spikefall-structure-b: #6d55a3;
  --spikefall-structure-c: #241b3e;
}

.spikefall-board[data-visual-theme='amber'] {
  --spikefall-glow: rgba(251, 191, 36, 0.18);
  --spikefall-sky-a: #2c1806;
  --spikefall-sky-b: #1a0f04;
  --spikefall-sky-c: #100902;
  --spikefall-structure-a: #3a2308;
  --spikefall-structure-b: #8a5a1e;
  --spikefall-structure-c: #23140a;
}

.spikefall-board {
  position: relative;
  overflow: hidden;
  min-height: min(70vh, 42rem);
  padding: 0;
  background:
    radial-gradient(circle at 50% 5%, var(--spikefall-glow), transparent 38%),
    linear-gradient(
      180deg,
      var(--spikefall-sky-a),
      var(--spikefall-sky-b) 68%,
      var(--spikefall-sky-c)
    );
  border: 1px solid color-mix(in srgb, var(--color-spikefall) 58%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 3.5rem rgba(0, 0, 0, 0.85),
    0 0 1.2rem color-mix(in srgb, var(--color-spikefall) 16%, transparent);
  touch-action: manipulation;
  user-select: none;
}

.spikefall-arena {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12.2%,
      rgba(148, 163, 184, 0.06) 12.4% 12.7%,
      transparent 12.9% 25%
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 11.7%,
      rgba(148, 163, 184, 0.08) 11.9% 12.2%,
      transparent 12.4% 24%
    );
}

.spikefall-arena::before,
.spikefall-arena::after {
  position: absolute;
  z-index: 5;
  content: '';
  pointer-events: none;
}

.spikefall-arena::before {
  inset: 0 0 auto;
  height: 8%;
  border-bottom: 0.22rem solid #475569;
  background:
    repeating-linear-gradient(135deg, #1f2937 0 8%, #f43f5e 8% 11%, #111827 11% 19%),
    linear-gradient(#374151, #111827);
  box-shadow:
    0 0.65rem 1.2rem rgba(0, 0, 0, 0.72),
    0 0 1rem rgba(244, 63, 94, 0.28);
}

.spikefall-arena::after {
  right: 0;
  bottom: 7%;
  left: 0;
  height: 3%;
  border-top: 0.12rem solid #64748b;
  background: repeating-linear-gradient(90deg, #1e293b 0 7%, #0f172a 7% 14%);
  box-shadow:
    0 -0.25rem 0.9rem rgba(244, 63, 94, 0.2),
    0 0.5rem 1rem rgba(0, 0, 0, 0.8);
}

.spikefall-structure {
  position: absolute;
  z-index: 1;
  inset: 7% 0;
  pointer-events: none;
}

.spikefall-structure::before,
.spikefall-structure::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7.5%;
  content: '';
  border-inline: 0.12rem solid #475569;
  background:
    repeating-linear-gradient(180deg, transparent 0 7%, rgba(244, 63, 94, 0.26) 7.4% 8%),
    linear-gradient(
      90deg,
      var(--spikefall-structure-a),
      var(--spikefall-structure-b) 48%,
      var(--spikefall-structure-c)
    );
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.8);
}

.spikefall-structure::before {
  left: 0;
}

.spikefall-structure::after {
  right: 0;
}

.spikefall-warning-lights {
  position: absolute;
  z-index: 6;
  top: 9%;
  right: 8.6%;
  left: 8.6%;
  height: 0.45rem;
  background: repeating-linear-gradient(90deg, #fb7185 0 3%, transparent 3% 12%);
  filter: drop-shadow(0 0 0.45rem #f43f5e);
  opacity: 0.76;
  animation: spikefall-warning-pulse 920ms ease-in-out infinite alternate;
}

.spikefall-spikes {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.spikefall-player,
.spikefall-spike {
  position: absolute;
  z-index: 2;
  transform: translateZ(0);
}

.spikefall-player {
  z-index: 7;
  filter: drop-shadow(0 0 0.65rem rgba(251, 113, 133, 0.55));
  transition: left 70ms linear;
}

.spikefall-player__helmet {
  position: absolute;
  z-index: 2;
  inset: -32% 15% 38%;
  border: 0.12rem solid #fecdd3;
  border-radius: 48% 48% 28% 28%;
  background: linear-gradient(145deg, #fb7185, #be123c 58%, #4c0519);
  box-shadow: inset 0 0 0.35rem rgba(255, 255, 255, 0.28);
}

.spikefall-player__visor {
  position: absolute;
  z-index: 3;
  top: -5%;
  right: 24%;
  left: 24%;
  height: 22%;
  border: 0.08rem solid #fecdd3;
  border-radius: var(--border-radius-xl);
  background: linear-gradient(90deg, #172554, #67e8f9, #172554);
  box-shadow: 0 0 0.4rem #22d3ee;
}

.spikefall-player__body {
  position: absolute;
  z-index: 1;
  inset: 27% 8% 0;
  border: 0.12rem solid #fecdd3;
  border-radius: 34% 34% 20% 20%;
  background:
    linear-gradient(90deg, transparent 42%, #fda4af 43% 57%, transparent 58%),
    linear-gradient(145deg, #e11d48, #881337);
}

.spikefall-player__foot {
  position: absolute;
  z-index: 2;
  bottom: -13%;
  width: 34%;
  height: 22%;
  border-radius: 35% 35% 20% 20%;
  background: #fecdd3;
  box-shadow: 0 0 0.35rem rgba(251, 113, 133, 0.7);
}

.spikefall-player__foot--left {
  left: 9%;
}

.spikefall-player__foot--right {
  right: 9%;
}

.spikefall-spike {
  border-top: 0.16rem solid #fecdd3;
  background: linear-gradient(90deg, #4c0519, #fb7185 45%, #fff1f2 51%, #be123c 58%, #4c0519);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 0.28rem 0.4rem rgba(244, 63, 94, 0.72));
}

.spikefall-spike::before {
  position: absolute;
  inset: 0;
  content: '';
  background: repeating-linear-gradient(
    120deg,
    transparent 0 18%,
    rgba(255, 255, 255, 0.2) 19% 21%
  );
}

.spikefall-spike__facet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.08rem;
  height: 82%;
  background: rgba(255, 255, 255, 0.62);
  transform: rotate(8deg);
  transform-origin: top;
}

@keyframes spikefall-warning-pulse {
  to {
    opacity: 0.28;
  }
}

@media (max-width: 600px) {
  .spikefall-board {
    min-height: min(68vh, 34rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spikefall-warning-lights {
    animation: none;
  }
}