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

:root {
  --title-color: var(--color-ropeswing);
  --ropeswing-player-tilt: 0deg;
  --ropeswing-canyon-1: #3a8a88;
  --ropeswing-canyon-2: #285968;
  --ropeswing-canyon-3: #313a43;
  --ropeswing-canyon-4: #251f2b;
  --ropeswing-wall-1: #624744;
  --ropeswing-wall-2: #503b3e;
  --ropeswing-wall-3: #241d28;
  --ropeswing-wall-4: #563d40;
  --ropeswing-wall-5: #2e2831;
  --ropeswing-skyline-1: #18252d;
  --ropeswing-skyline-2: #2f2934;
  --ropeswing-skyline-3: #171e27;
}

.ropeswing-board[data-visual-theme='arcade'] {
  --ropeswing-canyon-1: #8a3a7a;
  --ropeswing-canyon-2: #5a2a6e;
  --ropeswing-canyon-3: #3a2a4a;
  --ropeswing-canyon-4: #241a30;
  --ropeswing-wall-1: #6e4a68;
  --ropeswing-wall-2: #5a3a5e;
  --ropeswing-wall-3: #2a1a30;
  --ropeswing-wall-4: #7a4a6e;
  --ropeswing-wall-5: #3a2a40;
  --ropeswing-skyline-1: #2a1830;
  --ropeswing-skyline-2: #3a2440;
  --ropeswing-skyline-3: #1a1224;
}

.ropeswing-board[data-visual-theme='midnight'] {
  --ropeswing-canyon-1: #2a5a78;
  --ropeswing-canyon-2: #1a3a58;
  --ropeswing-canyon-3: #253340;
  --ropeswing-canyon-4: #141c26;
  --ropeswing-wall-1: #3a5468;
  --ropeswing-wall-2: #2a4458;
  --ropeswing-wall-3: #14202c;
  --ropeswing-wall-4: #3a5468;
  --ropeswing-wall-5: #202c38;
  --ropeswing-skyline-1: #14202c;
  --ropeswing-skyline-2: #202c38;
  --ropeswing-skyline-3: #101820;
}

.ropeswing-board[data-visual-theme='daylight'] {
  --ropeswing-canyon-1: #7a5cc0;
  --ropeswing-canyon-2: #5b3a9e;
  --ropeswing-canyon-3: #4a3a68;
  --ropeswing-canyon-4: #332658;
  --ropeswing-wall-1: #7a5c8a;
  --ropeswing-wall-2: #6a4a7a;
  --ropeswing-wall-3: #3a2848;
  --ropeswing-wall-4: #8a6a9a;
  --ropeswing-wall-5: #4a3858;
  --ropeswing-skyline-1: #2e2148;
  --ropeswing-skyline-2: #3a2a5e;
  --ropeswing-skyline-3: #241a38;
}

.ropeswing-board[data-visual-theme='amber'] {
  --ropeswing-canyon-1: #b9781f;
  --ropeswing-canyon-2: #8a5714;
  --ropeswing-canyon-3: #5c3e1e;
  --ropeswing-canyon-4: #33200e;
  --ropeswing-wall-1: #8a6238;
  --ropeswing-wall-2: #6b4a2a;
  --ropeswing-wall-3: #33200e;
  --ropeswing-wall-4: #9a7238;
  --ropeswing-wall-5: #4a331a;
  --ropeswing-skyline-1: #33200e;
  --ropeswing-skyline-2: #4a331a;
  --ropeswing-skyline-3: #241708;
}

.ropeswing-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  cursor: crosshair;
  touch-action: none;
  background: #152f39;
  border: 1px solid color-mix(in srgb, var(--color-ropeswing) 38%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 4rem rgb(8 17 23 / 45%),
    var(--game-board-shadow);
}

.ropeswing-canyon {
  position: relative;
  background:
    radial-gradient(circle at 76% 10%, rgb(255 192 91 / 26%), transparent 18%),
    linear-gradient(
      160deg,
      var(--ropeswing-canyon-1) 0%,
      var(--ropeswing-canyon-2) 36%,
      var(--ropeswing-canyon-3) 66%,
      var(--ropeswing-canyon-4) 100%
    );
}

.ropeswing-canyon::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgb(255 241 194 / 55%) 0 0.07rem, transparent 0.09rem) 7% 9% / 9rem 8rem,
    radial-gradient(circle, rgb(224 244 229 / 35%) 0 0.06rem, transparent 0.08rem) 56% 13% / 13rem
      11rem;
  content: '';
  opacity: 0.48;
}

.ropeswing-skyline {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ropeswing-sun {
  position: absolute;
  top: 6%;
  right: 13%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd77c;
  box-shadow: 0 0 2.4rem rgb(255 182 77 / 60%);
  opacity: 0.72;
}

.ropeswing-birds {
  position: absolute;
  top: 16%;
  left: 23%;
  width: 7%;
  height: 2%;
  border-top: 2px solid rgb(23 50 55 / 58%);
  border-radius: 50%;
  transform: rotate(8deg);
}
.ropeswing-birds::after {
  position: absolute;
  top: -2px;
  left: 70%;
  width: 62%;
  height: 100%;
  border-top: 2px solid rgb(23 50 55 / 58%);
  border-radius: 50%;
  content: '';
  transform: rotate(-18deg);
}

.ropeswing-canyon-wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  background:
    radial-gradient(circle at 30% 20%, var(--ropeswing-wall-1) 0 7%, transparent 8%),
    radial-gradient(circle at 68% 50%, var(--ropeswing-wall-2) 0 10%, transparent 11%),
    linear-gradient(
      90deg,
      var(--ropeswing-wall-3),
      var(--ropeswing-wall-4) 56%,
      var(--ropeswing-wall-5)
    );
  opacity: 0.62;
  filter: drop-shadow(0 0 1rem rgb(10 12 17 / 45%));
}
.ropeswing-canyon-wall--left {
  left: -11%;
  clip-path: polygon(0 0, 78% 0, 100% 18%, 72% 36%, 96% 55%, 68% 73%, 88% 100%, 0 100%);
}
.ropeswing-canyon-wall--right {
  right: -11%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 12% 100%, 32% 73%, 4% 55%, 28% 36%, 0 18%);
}

.ropeswing-mist {
  position: absolute;
  right: -8%;
  bottom: 2%;
  left: -8%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(157 193 187 / 24%), transparent 68%);
  filter: blur(0.7rem);
}

.ropeswing-skyline::after {
  position: absolute;
  right: -5%;
  bottom: -2%;
  left: -5%;
  height: 25%;
  background: linear-gradient(
    135deg,
    var(--ropeswing-skyline-1),
    var(--ropeswing-skyline-2) 58%,
    var(--ropeswing-skyline-3)
  );
  clip-path: polygon(
    0 62%,
    11% 24%,
    20% 56%,
    31% 8%,
    43% 58%,
    55% 20%,
    66% 54%,
    78% 4%,
    90% 48%,
    100% 17%,
    100% 100%,
    0 100%
  );
  content: '';
  opacity: 0.72;
}

.ropeswing-platform,
.ropeswing-anchor,
.ropeswing-rope,
.ropeswing-player {
  position: absolute;
}

.ropeswing-platform-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.ropeswing-platform {
  height: 5%;
  min-height: 0.65rem;
  filter: drop-shadow(0 0.35rem 0.25rem rgb(8 12 14 / 45%));
  transition:
    filter 160ms ease,
    transform 160ms ease;
}
.ropeswing-platform__rock {
  position: absolute;
  inset: 10% 0 0;
  background:
    linear-gradient(150deg, rgb(255 255 255 / 13%) 0 16%, transparent 17%),
    linear-gradient(180deg, #665756, #3b343d 58%, #252a31);
  clip-path: polygon(
    0 0,
    100% 0,
    91% 62%,
    79% 54%,
    69% 100%,
    55% 62%,
    42% 88%,
    27% 56%,
    15% 78%,
    4% 53%
  );
}
.ropeswing-platform__top {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, #dfba78, #99704f);
  box-shadow: inset 0 0.08rem rgb(255 245 197 / 45%);
}
.ropeswing-platform__grass {
  position: absolute;
  z-index: 3;
  top: -5%;
  right: 4%;
  left: 4%;
  height: 19%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4c9c68, #74d57b 52%, #3d8058);
  opacity: 0.72;
}
.ropeswing-platform.is-next {
  filter: brightness(1.18) drop-shadow(0 0 0.65rem rgb(113 229 128 / 48%));
  transform: scaleY(1.08);
}
.ropeswing-platform.is-next .ropeswing-platform__grass {
  opacity: 1;
  background: linear-gradient(90deg, #69d27d, #b7f293, #57bf72);
}

.ropeswing-anchor {
  z-index: 5;
  width: 4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.ropeswing-anchor__bolt {
  position: absolute;
  inset: 14%;
  border: 0.13rem solid #503526;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe0a0, #d87d32 47%, #6f3825);
  box-shadow: 0 0 1rem rgb(255 167 61 / 62%);
}
.ropeswing-anchor__ring {
  position: absolute;
  inset: 42% 27% -18%;
  border: 0.14rem solid #d6b887;
  border-top: 0;
  border-radius: 0 0 50% 50%;
}

.ropeswing-rope {
  z-index: 4;
  width: 0.72%;
  min-width: 0.18rem;
  transform-origin: 50% 0;
  border-radius: 999px;
  background: repeating-linear-gradient(
    165deg,
    #f0d39b 0 0.32rem,
    #805a3a 0.34rem 0.52rem,
    #c79d63 0.54rem 0.72rem
  );
  box-shadow: 0 0 0.28rem rgb(246 210 150 / 32%);
}

.ropeswing-player {
  z-index: 6;
  transform: translate(-50%, -50%) rotate(var(--ropeswing-player-tilt, 0deg));
  transform-origin: 50% 35%;
  filter: drop-shadow(0 0.32rem 0.22rem rgb(7 14 17 / 52%));
  transition: transform 70ms linear;
}

.ropeswing-player__head {
  position: absolute;
  z-index: 5;
  top: 1%;
  left: 32%;
  width: 38%;
  height: 31%;
  border: 1px solid #173239;
  border-radius: 48% 52% 40% 42%;
  background: linear-gradient(145deg, #e7f4dc 0 16%, #f2a43c 18% 68%, #9b4d2e 70%);
}
.ropeswing-player__visor {
  position: absolute;
  z-index: 6;
  top: 11%;
  left: 42%;
  width: 39%;
  height: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, #153d4a, #64d8d4);
  box-shadow: 0 0 0.3rem #61d8ce;
}
.ropeswing-player__body {
  position: absolute;
  z-index: 4;
  top: 27%;
  left: 27%;
  width: 48%;
  height: 39%;
  border: 1px solid #24543f;
  border-radius: 34% 38% 22% 22%;
  background: linear-gradient(135deg, #50c776, var(--color-ropeswing) 55%, #17623f);
}
.ropeswing-player__harness {
  position: absolute;
  z-index: 5;
  top: 45%;
  left: 27%;
  width: 49%;
  height: 17%;
  border: 0.12rem solid #e6b95e;
  border-top: 0;
  border-radius: 0 0 45% 45%;
}
.ropeswing-player__arms {
  position: absolute;
  z-index: 3;
  top: 28%;
  left: 11%;
  width: 79%;
  height: 23%;
  border-top: 0.22rem solid #238859;
  border-radius: 50%;
  transform: rotate(-5deg);
}
.ropeswing-player__legs {
  position: absolute;
  z-index: 3;
  top: 61%;
  left: 25%;
  width: 54%;
  height: 31%;
  border-right: 0.25rem solid #1d3440;
  border-bottom: 0.25rem solid #1d3440;
  border-left: 0.25rem solid #1d3440;
  border-radius: 0 0 42% 42%;
}
.ropeswing-player__pack {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 15%;
  width: 28%;
  height: 36%;
  border-radius: 35% 20% 24% 35%;
  background: #865340;
}
.ropeswing-player.is-falling .ropeswing-player__arms {
  transform: rotate(10deg) scaleX(1.12);
}

.ropeswing-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--spacing-sm);
  width: min(100%, 32rem);
  margin: var(--spacing-sm) auto 0;
}
.ropeswing-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: 2.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-color);
  font: inherit;
  font-weight: var(--font-weight-bold);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.ropeswing-control:hover,
.ropeswing-control:focus-visible {
  color: var(--white-color);
  background: var(--color-ropeswing);
  border-color: color-mix(in srgb, var(--color-ropeswing) 75%, var(--white-color));
}
.ropeswing-control:active {
  transform: translateY(1px) scale(0.98);
}
.ropeswing-control--release {
  color: var(--white-color);
  background: linear-gradient(180deg, #39c96c, #14753e);
  border-color: color-mix(in srgb, var(--color-ropeswing) 72%, var(--white-color));
}
.ropeswing-control__icon {
  font-size: 1.25em;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ropeswing-platform,
  .ropeswing-player {
    transition: none;
  }
}

@media (max-width: 520px) {
  .ropeswing-controls {
    gap: var(--spacing-xs);
  }
  .ropeswing-control {
    min-height: 3rem;
    padding-inline: var(--spacing-xs);
    font-size: var(--font-size-sm);
  }
}