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

:root {
  --title-color: var(--color-bmxrace);
  --bmx-distance: 0;
  --bmx-sky: #ffd080;
  --bmx-sky-deep: #e66b45;
  --bmx-dirt: #a95329;
  --bmx-dirt-dark: #5c2f24;
  --bmx-cream: #fff4cf;
  --bmx-cyan: #28c7d8;
  --bmx-red: #e9473f;
  --bmx-ink: #172831;
}

.bmxrace-board[data-visual-theme='arcade'] {
  --bmx-sky: #ff8fd8;
  --bmx-sky-deep: #b23a7a;
  --bmx-dirt: #5c2350;
  --bmx-dirt-dark: #2c0f28;
}

.bmxrace-board[data-visual-theme='midnight'] {
  --bmx-sky: #7fa8c9;
  --bmx-sky-deep: #3d5a7a;
  --bmx-dirt: #2d3f52;
  --bmx-dirt-dark: #141e29;
}

.bmxrace-board[data-visual-theme='daylight'] {
  --bmx-sky: #c9b8f5;
  --bmx-sky-deep: #9678d9;
  --bmx-dirt: #5c4a8a;
  --bmx-dirt-dark: #332658;
}

.bmxrace-board[data-visual-theme='amber'] {
  --bmx-sky: #f3cc7d;
  --bmx-sky-deep: #c9863a;
  --bmx-dirt: #6b3f1a;
  --bmx-dirt-dark: #33200e;
}

.bmxrace-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  background: linear-gradient(180deg, var(--bmx-sky) 0%, var(--bmx-sky-deep) 60%, #9c4932 100%);
  border: 1px solid color-mix(in srgb, var(--color-bmxrace) 55%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 1rem 2rem rgb(131 50 29 / 25%),
    var(--game-board-shadow);
}

.bmxrace-sky,
.bmxrace-venue,
.bmxrace-dirt,
.bmxrace-obstacles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bmxrace-sun {
  position: absolute;
  top: 10%;
  right: 13%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff2c7;
  box-shadow: 0 0 2.8rem rgb(255 238 181 / 80%);
}

.bmxrace-cloud {
  position: absolute;
  width: 16%;
  height: 3.5%;
  border-radius: 999px;
  background: rgb(255 236 203 / 45%);
  filter: blur(0.08rem);
}
.bmxrace-cloud::before,
.bmxrace-cloud::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}
.bmxrace-cloud::before {
  width: 55%;
  height: 260%;
  left: 8%;
}
.bmxrace-cloud::after {
  width: 42%;
  height: 190%;
  right: 14%;
}
.bmxrace-cloud--one {
  top: 13%;
  left: 12%;
}
.bmxrace-cloud--two {
  top: 25%;
  right: 31%;
  width: 11%;
  opacity: 0.65;
}

.bmxrace-grandstand {
  position: absolute;
  z-index: 0;
  right: 5%;
  bottom: 27%;
  width: 34%;
  height: 25%;
  border-bottom: 0.5rem solid #283941;
  background:
    radial-gradient(circle, #f3c84b 0 0.12rem, transparent 0.14rem) 0 0 / 1.2rem 1rem,
    radial-gradient(circle, #37b9c5 0 0.12rem, transparent 0.14rem) 0.5rem 0.5rem / 1.3rem 1rem,
    linear-gradient(165deg, transparent 0 28%, rgb(29 49 57 / 72%) 29% 34%, transparent 35%) 0 0 /
      100% 34% repeat-y;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.8;
}

.bmxrace-fence {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 25%;
  left: 0;
  height: 8%;
  border-block: 2px solid #36484e;
  background:
    repeating-linear-gradient(60deg, transparent 0 1rem, rgb(44 62 67 / 32%) 1.05rem 1.14rem),
    repeating-linear-gradient(120deg, transparent 0 1rem, rgb(44 62 67 / 32%) 1.05rem 1.14rem);
}

.bmxrace-banners {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 29%;
  left: 0;
  height: 5%;
  background: repeating-linear-gradient(
    90deg,
    var(--bmx-cyan) 0 7%,
    var(--bmx-cream) 7% 9%,
    var(--bmx-red) 9% 16%,
    transparent 16% 21%
  );
  border-block: 2px solid rgb(43 50 52 / 42%);
  opacity: 0.9;
}

.bmxrace-dirt {
  z-index: 2;
  top: 69%;
  background:
    radial-gradient(ellipse at 12% 21%, #d98745 0 3%, transparent 3.4%),
    radial-gradient(ellipse at 67% 72%, #6d3829 0 2%, transparent 2.4%),
    repeating-linear-gradient(170deg, transparent 0 4rem, rgb(83 42 31 / 18%) 4.1rem 4.35rem),
    linear-gradient(180deg, #c66b34 0 13%, var(--bmx-dirt) 14% 62%, var(--bmx-dirt-dark) 100%);
  background-position:
    calc(var(--bmx-distance, 0) * -10%) 0,
    calc(var(--bmx-distance, 0) * -7%) 0,
    calc(var(--bmx-distance, 0) * -8%) 0,
    0 0;
  border-top: 0.28rem solid #e69a54;
  box-shadow: inset 0 0.5rem 0 rgb(89 43 28 / 28%);
}

.bmxrace-roller {
  position: absolute;
  top: -17%;
  width: 28%;
  height: 25%;
  border-radius: 50% 50% 0 0;
  background: #ca6d36;
  border-top: 0.18rem solid #edaa61;
}
.bmxrace-roller--one {
  left: 38%;
}
.bmxrace-roller--two {
  left: 78%;
  width: 22%;
}

.bmxrace-obstacles {
  z-index: 4;
}
.bmxrace-rider,
.bmxrace-obstacle {
  position: absolute;
}

.bmxrace-rider {
  z-index: 6;
  filter: drop-shadow(0 0.45rem 0.28rem rgb(49 25 20 / 42%));
  transform: translateY(-7%);
  transform-origin: 50% 75%;
  transition: filter 120ms ease-out;
}

.bmxrace-rider[data-jumping='true'][data-rising='true'] {
  transform: translateY(-7%) rotate(-9deg);
}
.bmxrace-rider[data-jumping='true'][data-rising='false'] {
  transform: translateY(-7%) rotate(8deg);
}

.bmxrace-wheel {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 31%;
  aspect-ratio: 1;
  border: max(2px, 0.14vw) solid var(--bmx-ink);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, #65757b 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #65757b 48% 52%, transparent 53%),
    radial-gradient(circle, var(--bmx-red) 0 9%, #263d45 10% 15%, transparent 16%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
  animation: bmxrace-wheel-spin 420ms linear infinite;
}
.bmxrace-wheel--rear {
  left: 5%;
}
.bmxrace-wheel--front {
  right: 4%;
}

.bmxrace-bike__frame {
  position: absolute;
  z-index: 3;
  left: 25%;
  bottom: 18%;
  width: 47%;
  height: 38%;
  border: 0.2rem solid var(--bmx-cyan);
  clip-path: polygon(0 100%, 38% 4%, 100% 100%, 79% 100%, 38% 33%, 21% 100%);
  filter: drop-shadow(0 0 0.18rem rgb(40 199 216 / 48%));
}

.bmxrace-bike__fork {
  position: absolute;
  z-index: 3;
  right: 21%;
  bottom: 23%;
  width: 3%;
  height: 43%;
  border-radius: 999px;
  background: var(--bmx-ink);
  transform: rotate(-17deg);
}

.bmxrace-bike__handlebar {
  position: absolute;
  z-index: 3;
  right: 17%;
  bottom: 62%;
  width: 18%;
  height: 9%;
  border-top: 0.13rem solid var(--bmx-ink);
  border-right: 0.13rem solid var(--bmx-ink);
  transform: rotate(-5deg);
}

.bmxrace-bike__seat {
  position: absolute;
  z-index: 4;
  left: 36%;
  bottom: 54%;
  width: 19%;
  height: 6%;
  border-radius: 999px;
  background: var(--bmx-ink);
  transform: rotate(4deg);
}

.bmxrace-rider__body {
  position: absolute;
  z-index: 5;
  top: 23%;
  left: 37%;
  width: 31%;
  height: 34%;
  border: 1px solid #8e272d;
  border-radius: 38% 45% 24% 24%;
  background: linear-gradient(135deg, #ff7259, var(--bmx-red) 55%, #a32b32);
  transform: rotate(-21deg);
}

.bmxrace-rider__body::after {
  position: absolute;
  inset: 42% -2% auto;
  height: 13%;
  background: var(--bmx-cream);
  content: '';
}

.bmxrace-rider__head {
  position: absolute;
  z-index: 6;
  top: 4%;
  left: 58%;
  width: 23%;
  height: 25%;
  border: 1px solid #14262d;
  border-radius: 58% 52% 38% 42%;
  background: linear-gradient(145deg, var(--bmx-cream) 0 18%, #f15a42 20% 68%, #8e2930 70%);
  transform: rotate(8deg);
}

.bmxrace-rider__visor {
  position: absolute;
  z-index: 7;
  top: 12%;
  left: 68%;
  width: 20%;
  height: 7%;
  border-radius: 999px;
  background: #172f3b;
  box-shadow: 0 0 0.22rem var(--bmx-cyan);
  transform: rotate(8deg);
}

.bmxrace-rider__arms {
  position: absolute;
  z-index: 5;
  top: 29%;
  left: 53%;
  width: 29%;
  height: 24%;
  border-top: 0.22rem solid #d73d38;
  border-right: 0.2rem solid #d73d38;
  border-radius: 0 55% 0 0;
  transform: rotate(11deg);
}

.bmxrace-rider__legs {
  position: absolute;
  z-index: 4;
  top: 48%;
  left: 31%;
  width: 41%;
  height: 26%;
  border-top: 0.28rem solid var(--bmx-ink);
  border-right: 0.28rem solid var(--bmx-ink);
  border-radius: 0 45% 0 0;
  transform: rotate(16deg);
}

.is-boosting .bmxrace-rider {
  filter: drop-shadow(-0.8rem 0 0.12rem rgb(255 197 59 / 68%))
    drop-shadow(0 0.45rem 0.28rem rgb(49 25 20 / 42%));
}

.is-boosting .bmxrace-dirt {
  filter: saturate(1.18) brightness(1.06);
}

.bmxrace-obstacle {
  z-index: 5;
  pointer-events: none;
}
.bmxrace-obstacle--barrier {
  overflow: visible;
}
.bmxrace-barrier__board {
  position: absolute;
  inset: 6% 0 28%;
  border: 2px solid #6d2625;
  border-radius: 0.18rem;
  background: repeating-linear-gradient(135deg, #fff1ce 0 14%, var(--bmx-red) 14% 28%);
  box-shadow: 0 0.28rem 0 rgb(77 33 26 / 30%);
}
.bmxrace-barrier__legs {
  position: absolute;
  inset: 64% 14% 0;
  border-right: 0.18rem solid #59352d;
  border-left: 0.18rem solid #59352d;
}

.bmxrace-obstacle--ramp {
  overflow: visible;
}
.bmxrace-ramp__deck {
  position: absolute;
  inset: 0;
  border: 2px solid #4c3028;
  background: linear-gradient(150deg, var(--bmx-cyan) 0 11%, #efe0ba 12% 19%, #c15c31 20% 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.bmxrace-ramp__brace {
  position: absolute;
  right: 13%;
  bottom: 0;
  width: 38%;
  height: 62%;
  border-left: 0.16rem solid #57362c;
  transform: skewX(-25deg);
}

@keyframes bmxrace-wheel-spin {
  to {
    rotate: 1turn;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmxrace-wheel {
    animation: none;
  }
  .bmxrace-rider {
    transition: none;
  }
}

@media (max-width: 520px) {
  .bmxrace-rider__body,
  .bmxrace-rider__head {
    border-width: 1px;
  }
  .bmxrace-board {
    border-radius: var(--border-radius-md);
  }
}