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

:root {
  --title-color: var(--color-wallkick);
  --wallkick-glow: rgb(255 180 105 / 24%);
  --wallkick-sky-a: #301d57;
  --wallkick-sky-b: #17152f;
  --wallkick-sky-c: #090d1c;
  --wallkick-facade: #612b45;
  --wallkick-facade-mid: #7a3950;
  --wallkick-facade-dark: #3b1d37;
  --wallkick-facade-border: #c76570;
}

.wallkick-board[data-visual-theme='arcade'] {
  --wallkick-glow: rgb(230 96 178 / 30%);
  --wallkick-sky-a: #2e0a45;
  --wallkick-sky-b: #170a2e;
  --wallkick-sky-c: #0d0518;
  --wallkick-facade: #7a1f5a;
  --wallkick-facade-mid: #a3316f;
  --wallkick-facade-dark: #4a1030;
  --wallkick-facade-border: #e660b2;
}

.wallkick-board[data-visual-theme='midnight'] {
  --wallkick-glow: rgb(145 169 196 / 24%);
  --wallkick-sky-a: #1b2740;
  --wallkick-sky-b: #101a2c;
  --wallkick-sky-c: #070c17;
  --wallkick-facade: #35455f;
  --wallkick-facade-mid: #4c6280;
  --wallkick-facade-dark: #1e2738;
  --wallkick-facade-border: #91a9c4;
}

.wallkick-board[data-visual-theme='daylight'] {
  --wallkick-glow: rgb(167 139 250 / 26%);
  --wallkick-sky-a: #4c3a78;
  --wallkick-sky-b: #2c2450;
  --wallkick-sky-c: #191333;
  --wallkick-facade: #6c4a8a;
  --wallkick-facade-mid: #8a63ab;
  --wallkick-facade-dark: #3d2a55;
  --wallkick-facade-border: #a78bfa;
}

.wallkick-board[data-visual-theme='amber'] {
  --wallkick-glow: rgb(251 191 36 / 26%);
  --wallkick-sky-a: #4a2c0c;
  --wallkick-sky-b: #2c1806;
  --wallkick-sky-c: #170c02;
  --wallkick-facade: #6b3f14;
  --wallkick-facade-mid: #8a5a1e;
  --wallkick-facade-dark: #3a2008;
  --wallkick-facade-border: #e5a836;
}

.wallkick-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(70vh, 42rem);
  padding: 0;
  background:
    radial-gradient(circle at 50% 11%, var(--wallkick-glow), transparent 29%),
    linear-gradient(
      180deg,
      var(--wallkick-sky-a) 0%,
      var(--wallkick-sky-b) 48%,
      var(--wallkick-sky-c) 100%
    );
  border: 1px solid color-mix(in srgb, var(--color-wallkick) 45%, #111827);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 4rem rgb(7 10 25 / 70%),
    0 1.1rem 2.5rem rgb(4 6 18 / 28%);
  touch-action: manipulation;
  user-select: none;
}

.wallkick-skyline {
  position: absolute;
  z-index: -1;
  inset: 0 5.5%;
  opacity: 0.68;
  background:
    linear-gradient(
        90deg,
        transparent 8%,
        #101126 8% 20%,
        transparent 20% 27%,
        #0d1022 27% 41%,
        transparent 41% 55%,
        #11142b 55% 69%,
        transparent 69% 77%,
        #0b0e20 77% 94%,
        transparent 94%
      )
      bottom / 100% 58% no-repeat,
    repeating-linear-gradient(
        90deg,
        transparent 0 9%,
        rgb(255 197 99 / 30%) 9.5% 10.2%,
        transparent 10.7% 18%
      )
      bottom / 100% 45% no-repeat;
  clip-path: polygon(
    0 42%,
    9% 42%,
    9% 24%,
    19% 24%,
    19% 50%,
    28% 50%,
    28% 32%,
    41% 32%,
    41% 47%,
    55% 47%,
    55% 19%,
    68% 19%,
    68% 39%,
    78% 39%,
    78% 29%,
    94% 29%,
    94% 45%,
    100% 45%,
    100% 100%,
    0 100%
  );
}

.wallkick-facade {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 5.5%;
  background:
    repeating-linear-gradient(0deg, transparent 0 2.6rem, rgb(20 10 27 / 40%) 2.6rem 2.76rem),
    repeating-linear-gradient(
      0deg,
      transparent 0 4%,
      #ffd269 4% 5.5%,
      #d66d76 5.5% 7%,
      #4a2446 7% 7.6%,
      transparent 7.6% 20%
    ),
    repeating-linear-gradient(
      90deg,
      var(--wallkick-facade) 0 46%,
      var(--wallkick-facade-mid) 47% 92%,
      var(--wallkick-facade-dark) 93% 100%
    );
  background-size:
    auto,
    100% 20%,
    auto;
  background-repeat: repeat;
  background-position: 0 0;
  border-color: var(--wallkick-facade-border);
  box-shadow: 0 0 1.8rem rgb(8 6 22 / 70%);
}

.wallkick-facade--left {
  left: 0;
  border-right: 0.18rem solid var(--wallkick-facade-border);
}
.wallkick-facade--right {
  right: 0;
  border-left: 0.18rem solid var(--wallkick-facade-border);
}

.wallkick-cables {
  position: absolute;
  z-index: 0;
  inset: 0 5.5%;
  pointer-events: none;
}
.wallkick-cables::before,
.wallkick-cables::after {
  position: absolute;
  width: 54%;
  height: 5%;
  border-bottom: 2px solid rgb(24 20 42 / 88%);
  border-radius: 0 0 50% 50%;
  content: '';
}
.wallkick-cables::before {
  top: 17%;
  left: 0;
  transform: rotate(4deg);
}
.wallkick-cables::after {
  top: 61%;
  right: 0;
  transform: rotate(-5deg);
}

.wallkick-arena--kick-left .wallkick-facade--left,
.wallkick-arena--kick-right .wallkick-facade--right {
  animation: wallkick-wall-hit 180ms ease-out;
  filter: brightness(1.3);
}

.wallkick-obstacles {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.wallkick-player,
.wallkick-obstacle {
  position: absolute;
  transform: translateZ(0);
}

.wallkick-player {
  z-index: 4;
  filter: drop-shadow(0 0.3rem 0.22rem rgb(5 6 18 / 50%));
  transform-origin: center bottom;
  animation: wallkick-air 260ms ease-in-out infinite alternate;
}

.wallkick-player__head {
  position: absolute;
  top: 3%;
  left: 30%;
  width: 43%;
  height: 31%;
  border: 2px solid #13162c;
  border-radius: 46% 46% 38% 38%;
  background: linear-gradient(135deg, #f3c29e 0 44%, #202746 46% 100%);
  box-shadow: inset -0.18rem -0.12rem #111528;
}
.wallkick-player__head::after {
  position: absolute;
  top: 41%;
  right: 9%;
  width: 38%;
  height: 10%;
  border-radius: 999px;
  background: #62e8ef;
  box-shadow: 0 0 0.4rem #32cad7;
  content: '';
}
.wallkick-player__torso {
  position: absolute;
  top: 30%;
  left: 25%;
  width: 50%;
  height: 39%;
  border: 2px solid #12162c;
  border-radius: 35% 45% 20% 20%;
  background: linear-gradient(135deg, #4d5f91, #232c55 62%);
}
.wallkick-player__torso::after {
  position: absolute;
  inset: 18% 15% auto;
  height: 12%;
  background: #ed526f;
  content: '';
}
.wallkick-player__arm {
  position: absolute;
  top: 35%;
  left: 13%;
  width: 28%;
  height: 14%;
  border-radius: 999px;
  background: #303a68;
  transform: rotate(-35deg);
  transform-origin: right center;
}
.wallkick-player__legs {
  position: absolute;
  top: 64%;
  left: 24%;
  width: 54%;
  height: 30%;
  border-bottom: 0.28rem solid #171b36;
  border-left: 0.26rem solid #28315b;
  border-radius: 0 0 28% 45%;
  transform: skew(-14deg) rotate(-8deg);
}
.wallkick-player__scarf {
  position: absolute;
  z-index: -1;
  top: 23%;
  left: 3%;
  width: 45%;
  height: 12%;
  border-radius: 100% 0 0 100%;
  background: #ed526f;
  transform: rotate(10deg);
  box-shadow: 0 0 0.4rem rgb(237 82 111 / 45%);
}
.wallkick-player--right .wallkick-player__head,
.wallkick-player--right .wallkick-player__torso,
.wallkick-player--right .wallkick-player__legs,
.wallkick-player--right .wallkick-player__scarf {
  transform: scaleX(-1);
}
.wallkick-player--right .wallkick-player__arm {
  transform: scaleX(-1) rotate(-35deg);
}

.wallkick-obstacle {
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, #454d60 0 12%, #626b7d 13% 22%, #353c50 23% 34%), #41495c;
  border-block: 2px solid #9ba5b3;
  box-shadow:
    0 0.45rem 0.7rem rgb(5 6 15 / 65%),
    inset 0 0.16rem rgb(215 223 229 / 35%);
}
.wallkick-obstacle--left {
  border-right: 0.28rem solid #242a3b;
  border-radius: 0 0.2rem 0.2rem 0;
}
.wallkick-obstacle--right {
  border-left: 0.28rem solid #242a3b;
  border-radius: 0.2rem 0 0 0.2rem;
}
.wallkick-obstacle__brace {
  position: absolute;
  top: 100%;
  width: 34%;
  height: 65%;
  background: #252b3d;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.wallkick-obstacle--left .wallkick-obstacle__brace {
  left: 10%;
}
.wallkick-obstacle--right .wallkick-obstacle__brace {
  right: 10%;
  transform: scaleX(-1);
}
.wallkick-obstacle__lamp {
  position: absolute;
  top: 24%;
  width: 0.34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffb44a;
  box-shadow: 0 0 0.48rem #ff9a3c;
}
.wallkick-obstacle--left .wallkick-obstacle__lamp {
  right: 8%;
}
.wallkick-obstacle--right .wallkick-obstacle__lamp {
  left: 8%;
}

@keyframes wallkick-air {
  to {
    transform: translateY(-0.18rem) rotate(2deg);
  }
}
@keyframes wallkick-wall-hit {
  50% {
    transform: scaleX(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wallkick-player {
    animation: none;
  }
}
@media (max-width: 600px) {
  .wallkick-board {
    min-height: min(68vh, 34rem);
  }
}