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

:root {
  --title-color: var(--color-hovercar);
  --hovercar-glow: rgba(34, 211, 238, 0.2);
  --hovercar-sky-a: #07101f;
  --hovercar-sky-b: #10162d;
  --hovercar-road-fill: #111226;
  --hovercar-road-edge: rgba(34, 211, 238, 0.32);
}

.hovercar-board[data-visual-theme='arcade'] {
  --hovercar-glow: rgba(230, 96, 178, 0.24);
  --hovercar-sky-a: #1a0a24;
  --hovercar-sky-b: #2b0f2d;
  --hovercar-road-fill: #1e0d24;
  --hovercar-road-edge: rgba(230, 96, 178, 0.36);
}

.hovercar-board[data-visual-theme='midnight'] {
  --hovercar-glow: rgba(145, 169, 196, 0.2);
  --hovercar-sky-a: #060c18;
  --hovercar-sky-b: #101a2c;
  --hovercar-road-fill: #0e1524;
  --hovercar-road-edge: rgba(145, 169, 196, 0.32);
}

.hovercar-board[data-visual-theme='daylight'] {
  --hovercar-glow: rgba(167, 139, 250, 0.22);
  --hovercar-sky-a: #241a3f;
  --hovercar-sky-b: #362a54;
  --hovercar-road-fill: #251c3e;
  --hovercar-road-edge: rgba(167, 139, 250, 0.36);
}

.hovercar-board[data-visual-theme='amber'] {
  --hovercar-glow: rgba(251, 191, 36, 0.2);
  --hovercar-sky-a: #200f04;
  --hovercar-sky-b: #34200a;
  --hovercar-road-fill: #251507;
  --hovercar-road-edge: rgba(251, 191, 36, 0.32);
}

.hovercar-board {
  position: relative;
  overflow: hidden;
  min-height: min(70vh, 42rem);
  padding: 0;
  background:
    radial-gradient(circle at 50% 22%, var(--hovercar-glow), transparent 23%),
    linear-gradient(180deg, var(--hovercar-sky-a) 0 27%, var(--hovercar-sky-b) 27% 100%);
  border: 1px solid color-mix(in srgb, var(--color-hovercar) 58%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 3rem rgba(5, 8, 24, 0.88),
    0 0 1.4rem color-mix(in srgb, var(--color-hovercar) 18%, transparent);
  touch-action: manipulation;
  user-select: none;
}

.hovercar-track {
  isolation: isolate;
}

.hovercar-track::before,
.hovercar-track::after {
  position: absolute;
  z-index: 1;
  inset: 27% 0 0;
  content: '';
  pointer-events: none;
}

.hovercar-track::before {
  background:
    linear-gradient(102deg, var(--hovercar-road-edge), transparent 18%),
    linear-gradient(258deg, var(--hovercar-road-edge), transparent 18%),
    linear-gradient(90deg, #111b35 0 8%, transparent 8% 92%, #111b35 92% 100%);
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  background-color: var(--hovercar-road-fill);
  box-shadow: inset 0 0 3rem #050713;
}

.hovercar-track::after {
  z-index: 5;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 13%,
    rgba(103, 232, 249, 0.3) 13.2% 13.6%,
    transparent 13.9% 25%
  );
  clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
  opacity: 0.46;
  animation: hovercar-road-flow 620ms linear infinite;
}

.hovercar-skyline {
  position: absolute;
  z-index: 0;
  inset: 0 0 72%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 8%, rgba(34, 211, 238, 0.2) 8.4% 8.7%, transparent 9.1%),
    linear-gradient(
      90deg,
      transparent 73%,
      rgba(244, 114, 182, 0.2) 73.4% 73.7%,
      transparent 74.1%
    ),
    linear-gradient(180deg, transparent 74%, rgba(34, 211, 238, 0.42) 75%, transparent 78%);
}

.hovercar-skyline::before {
  position: absolute;
  inset: 24% 4% 0;
  content: '';
  background: linear-gradient(90deg, #151d38, #20264a 48%, #11182f);
  clip-path: polygon(
    0 100%,
    0 54%,
    6% 54%,
    6% 26%,
    11% 26%,
    11% 66%,
    18% 66%,
    18% 40%,
    25% 40%,
    25% 72%,
    34% 72%,
    34% 18%,
    39% 18%,
    39% 64%,
    48% 64%,
    48% 34%,
    55% 34%,
    55% 74%,
    64% 74%,
    64% 46%,
    71% 46%,
    71% 62%,
    79% 62%,
    79% 22%,
    85% 22%,
    85% 69%,
    92% 69%,
    92% 43%,
    100% 43%,
    100% 100%
  );
  filter: drop-shadow(0 -0.1rem 0.35rem rgba(34, 211, 238, 0.28));
}

.hovercar-road-fx {
  position: absolute;
  z-index: 2;
  inset: 27% 0 0;
  pointer-events: none;
}

.hovercar-road-fx::before,
.hovercar-road-fx::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.24rem;
  content: '';
  background: linear-gradient(180deg, transparent, var(--color-hovercar) 30%, #f0fdfa);
  box-shadow: 0 0 0.8rem var(--color-hovercar);
  transform-origin: top;
}

.hovercar-road-fx::before {
  left: 42%;
  transform: skewX(-13deg);
}

.hovercar-road-fx::after {
  right: 42%;
  transform: skewX(13deg);
}

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

.hovercar-player,
.hovercar-obstacle {
  position: absolute;
  transform: translateZ(0);
}

.hovercar-player {
  z-index: 6;
  border: 0.12rem solid #cffafe;
  border-radius: 48% 48% 30% 30%;
  background: linear-gradient(135deg, #67e8f9 0 18%, #0891b2 19% 62%, #164e63 63%);
  box-shadow:
    0 0 0.35rem #ecfeff,
    0 0 1.2rem color-mix(in srgb, var(--color-hovercar) 82%, transparent),
    0 0.8rem 1rem rgba(0, 0, 0, 0.5);
  transition: left 80ms linear;
}

.hovercar-player::before {
  position: absolute;
  inset: 52% -28% 10%;
  content: '';
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #155e75,
    #67e8f9 18% 28%,
    #0e7490 29% 71%,
    #67e8f9 72% 82%,
    #155e75
  );
  clip-path: polygon(0 35%, 36% 0, 64% 0, 100% 35%, 82% 100%, 18% 100%);
  box-shadow: 0 0 0.8rem rgba(34, 211, 238, 0.68);
}

.hovercar-player__cockpit {
  position: absolute;
  z-index: 2;
  inset: 10% 25% 34%;
  border: 0.08rem solid rgba(207, 250, 254, 0.8);
  border-radius: 50% 50% 34% 34%;
  background: linear-gradient(135deg, #e0f2fe, #2563eb 45%, #172554);
}

.hovercar-player__wing {
  position: absolute;
  z-index: 1;
  top: 52%;
  width: 42%;
  height: 18%;
  background: #22d3ee;
  box-shadow: 0 0 0.45rem #22d3ee;
}

.hovercar-player__wing--left {
  right: 82%;
  transform: skewX(-28deg);
}

.hovercar-player__wing--right {
  left: 82%;
  transform: skewX(28deg);
}

.hovercar-player__light {
  position: absolute;
  z-index: 3;
  top: 67%;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 0.55rem #facc15;
}

.hovercar-player__light--left {
  left: 13%;
}

.hovercar-player__light--right {
  right: 13%;
}

.hovercar-player__thruster {
  position: absolute;
  top: 96%;
  right: 21%;
  left: 21%;
  height: 72%;
  background: linear-gradient(180deg, #fef08a, #fb923c 38%, transparent 88%);
  filter: blur(0.12rem);
  clip-path: polygon(14% 0, 86% 0, 62% 100%, 38% 100%);
  animation: hovercar-thruster 180ms ease-in-out infinite alternate;
}

.hovercar-obstacle {
  border: 0.1rem solid #fecdd3;
  border-radius: 22% 22% 12% 12%;
  background: linear-gradient(145deg, #fb7185, #be123c 58%, #4c0519);
  box-shadow:
    0 0 0.75rem rgba(251, 113, 133, 0.72),
    0 0.45rem 0.8rem rgba(0, 0, 0, 0.48);
}

.hovercar-obstacle--drone {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f97316 42%, #7c2d12 72%);
}

.hovercar-obstacle--drone::before,
.hovercar-obstacle--drone::after {
  position: absolute;
  top: 38%;
  width: 55%;
  height: 24%;
  content: '';
  background: #fbbf24;
  box-shadow: 0 0 0.5rem #f59e0b;
}

.hovercar-obstacle--drone::before {
  right: 76%;
  transform: skewY(-18deg);
}

.hovercar-obstacle--drone::after {
  left: 76%;
  transform: skewY(18deg);
}

.hovercar-drone__eye {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: #fff7ed;
  box-shadow: 0 0 0.45rem white;
}

.hovercar-barrier__light {
  position: absolute;
  inset: 18% 12% auto;
  height: 18%;
  border-radius: var(--border-radius-xl);
  background: repeating-linear-gradient(90deg, #fff1f2 0 12%, #fb7185 12% 24%);
  box-shadow: 0 0 0.45rem #fb7185;
}

@keyframes hovercar-road-flow {
  to {
    background-position-y: 25%;
  }
}

@keyframes hovercar-thruster {
  to {
    height: 92%;
    opacity: 0.72;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .hovercar-track::after,
  .hovercar-player__thruster {
    animation: none;
  }
}