/* WillowinWorld CSS: Ball is God card and reusable stage. */
.ball-card {
  --card-accent: #ffd43d;
  --ball-cycle: 8.8s;
  --card-bg: linear-gradient(160deg, #80b8ff, #9ed0ff 52%, #f9d45a);
  --cover-atmosphere:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.62), transparent 18%),
    radial-gradient(circle at 48% 64%, rgba(255, 212, 61, 0.44), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 38%, rgba(73, 126, 202, 0.2));
}

.ball-game-cover {
  min-height: 380px;
  background: #8ec6ff;
}

.ball-card .game-cover::before {
  inset: 0;
  z-index: 1;
  opacity: 0.48;
  mix-blend-mode: soft-light;
}

.ball-card .game-cover::after {
  z-index: 7;
  background:
    linear-gradient(180deg, rgba(29, 91, 167, 0.02) 22%, rgba(18, 43, 93, 0.14) 56%, rgba(14, 20, 48, 0.58)),
    radial-gradient(ellipse at 50% 108%, rgba(255, 210, 65, 0.38), transparent 46%);
}

.ball-stage,
.ball-bg,
.ball-cloud-field,
.ball-tower,
.ball-platforms,
.ball-espa-wrap {
  position: absolute;
}

.ball-stage {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

.ball-stage::before,
.ball-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ball-stage::before {
  z-index: 2;
  background:
    radial-gradient(circle at 48% 20%, rgba(255, 255, 255, 0.44), transparent 11rem),
    linear-gradient(90deg, rgba(58, 111, 198, 0.22), transparent 34%, transparent 66%, rgba(58, 111, 198, 0.18));
}

.ball-stage::after {
  z-index: 6;
  background:
    linear-gradient(180deg, transparent 42%, rgba(18, 43, 93, 0.2)),
    radial-gradient(ellipse at 50% 102%, rgba(255, 240, 160, 0.34), transparent 38%);
}

.ball-bg {
  inset: -16% -8%;
  z-index: 0;
  width: 116%;
  height: 132%;
  object-fit: cover;
  object-position: center 45%;
  animation: ballSkyFloat 14s ease-in-out infinite;
}

.ball-cloud-field {
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ball-cloud {
  position: absolute;
  top: var(--cloud-top);
  left: var(--cloud-left);
  z-index: var(--cloud-z, 1);
  width: var(--cloud-width);
  height: auto;
  max-width: none;
  opacity: var(--cloud-opacity, 0.8);
  transform: translate3d(0, 0, 0) scale(var(--cloud-scale, 1));
  animation: ballCloudDrift var(--cloud-duration, 18s) linear infinite;
  animation-delay: var(--cloud-delay, 0s);
  backface-visibility: hidden;
}

.ball-cloud.is-reverse {
  animation-name: ballCloudDriftReverse;
}

.ball-cloud:nth-child(n+9) {
  animation: none;
}

.ball-cloud-1 { --cloud-top: 7%; --cloud-left: -16%; --cloud-width: 150px; --cloud-duration: 18s; --cloud-delay: -3s; --cloud-opacity: 0.72; }
.ball-cloud-2 { --cloud-top: 18%; --cloud-left: 62%; --cloud-width: 124px; --cloud-duration: 22s; --cloud-delay: -8s; --cloud-opacity: 0.68; }
.ball-cloud-3 { --cloud-top: 31%; --cloud-left: -12%; --cloud-width: 126px; --cloud-duration: 19s; --cloud-delay: -11s; --cloud-opacity: 0.72; }
.ball-cloud-4 { --cloud-top: 42%; --cloud-left: 58%; --cloud-width: 148px; --cloud-duration: 25s; --cloud-delay: -5s; --cloud-opacity: 0.58; }
.ball-cloud-5 { --cloud-top: 61%; --cloud-left: -18%; --cloud-width: 170px; --cloud-duration: 24s; --cloud-delay: -14s; --cloud-opacity: 0.64; }
.ball-cloud-6 { --cloud-top: 78%; --cloud-left: 42%; --cloud-width: 118px; --cloud-duration: 20s; --cloud-delay: -2s; --cloud-opacity: 0.72; }
.ball-cloud-7 { --cloud-top: 3%; --cloud-left: 40%; --cloud-width: 112px; --cloud-duration: 26s; --cloud-delay: -17s; --cloud-opacity: 0.48; }
.ball-cloud-8 { --cloud-top: 54%; --cloud-left: 74%; --cloud-width: 112px; --cloud-duration: 17s; --cloud-delay: -6s; --cloud-opacity: 0.54; }
.ball-cloud-9 { --cloud-top: 12%; --cloud-left: 84%; --cloud-width: 166px; --cloud-duration: 21s; --cloud-delay: -4s; --cloud-opacity: 0.58; }
.ball-cloud-10 { --cloud-top: 24%; --cloud-left: 30%; --cloud-width: 112px; --cloud-duration: 18s; --cloud-delay: -12s; --cloud-opacity: 0.54; }
.ball-cloud-11 { --cloud-top: 38%; --cloud-left: 86%; --cloud-width: 136px; --cloud-duration: 23s; --cloud-delay: -8s; --cloud-opacity: 0.62; }
.ball-cloud-12 { --cloud-top: 47%; --cloud-left: 14%; --cloud-width: 104px; --cloud-duration: 19s; --cloud-delay: -15s; --cloud-opacity: 0.58; }
.ball-cloud-13 { --cloud-top: 66%; --cloud-left: 82%; --cloud-width: 152px; --cloud-duration: 24s; --cloud-delay: -9s; --cloud-opacity: 0.6; }
.ball-cloud-14 { --cloud-top: 74%; --cloud-left: 4%; --cloud-width: 112px; --cloud-duration: 18s; --cloud-delay: -1s; --cloud-opacity: 0.54; }
.ball-cloud-15 { --cloud-top: 84%; --cloud-left: 70%; --cloud-width: 128px; --cloud-duration: 22s; --cloud-delay: -13s; --cloud-opacity: 0.52; }
.ball-cloud-16 { --cloud-top: -1%; --cloud-left: 76%; --cloud-width: 120px; --cloud-duration: 20s; --cloud-delay: -10s; --cloud-opacity: 0.44; }

.ball-tower {
  left: 50%;
  top: -54px;
  z-index: 3;
  width: clamp(116px, 26%, 154px);
  height: 520px;
  border-radius: 52% 52% 24px 24px / 18px 18px 28px 28px;
  background:
    radial-gradient(ellipse at 48% 4%, rgba(255, 248, 158, 0.88), transparent 16%),
    linear-gradient(90deg, rgba(154, 103, 9, 0.2), transparent 18%, rgba(255,255,255,0.38) 46%, transparent 72%, rgba(133, 84, 8, 0.22)),
    linear-gradient(180deg, #ffed6b, #ffd22f 42%, #f7bc22 100%);
  box-shadow:
    inset -22px 0 28px rgba(152, 104, 9, 0.18),
    inset 20px 0 28px rgba(255, 255, 255, 0.2),
    0 30px 42px rgba(60, 76, 111, 0.26);
  transform: translateX(-50%);
  animation: ballTowerDrift var(--ball-cycle) linear infinite;
}

.ball-tower::before,
.ball-tower::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.ball-tower::before {
  top: -9px;
  width: 100%;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.46), transparent 58%),
    linear-gradient(180deg, #fff27d, #f7c62c);
  box-shadow: inset 0 -9px 14px rgba(154, 104, 10, 0.18);
  transform: translateX(-50%);
}

.ball-tower::after {
  top: 180px;
  width: 104%;
  height: 52px;
  border-radius: 50%;
  border-top: 7px solid rgba(224, 166, 30, 0.42);
  transform: translateX(-50%);
}

.ball-vine {
  position: absolute;
  left: -12%;
  z-index: 2;
  width: 126%;
  height: 150px;
  border-top: 5px solid #3f9d3a;
  border-radius: 50%;
  opacity: 0.9;
  transform: rotate(var(--vine-rotate));
  box-shadow: 0 -1px 0 rgba(15, 93, 32, 0.34);
}

.ball-vine-one {
  top: 82px;
  --vine-rotate: -18deg;
}

.ball-vine-two {
  top: 268px;
  --vine-rotate: 16deg;
}

.ball-leaf {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 34px;
  border-radius: 92% 8% 88% 12%;
  background: linear-gradient(160deg, #57b33b, #247524);
  box-shadow: inset 4px 5px 0 rgba(255, 255, 255, 0.14);
  transform: rotate(var(--leaf-rotate));
}

.ball-leaf-one { left: -4px; top: 120px; --leaf-rotate: 34deg; }
.ball-leaf-two { right: -6px; top: 198px; --leaf-rotate: -42deg; }
.ball-leaf-three { left: 12px; top: 308px; --leaf-rotate: 58deg; }
.ball-leaf-four { right: 14px; top: 390px; --leaf-rotate: -28deg; }

.ball-platforms {
  inset: 0;
  z-index: 4;
  animation: ballPlatformLayerSway 5.6s ease-in-out infinite;
}

.ball-platform {
  position: absolute;
  top: var(--rock-top);
  left: var(--rock-left);
  z-index: var(--rock-z, 1);
  width: var(--rock-width);
  height: var(--rock-height, 72px);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(180deg, #6f6c66, #4f4c47 72%, #343333);
  clip-path: polygon(4% 16%, 46% 0, 96% 14%, 86% 70%, 61% 96%, 22% 88%, 0 54%);
  box-shadow: 0 14px 18px rgba(60, 69, 96, 0.24);
  transform: translate3d(0, 0, 0) rotate(var(--rock-rotate));
  transform-origin: 50% 50%;
  animation: ballPlatformGate var(--ball-cycle) cubic-bezier(.22,.78,.28,1) infinite;
  animation-delay: var(--rock-delay);
  backface-visibility: hidden;
}

.ball-platform::before,
.ball-platform::after,
.ball-platform i {
  content: "";
  position: absolute;
  background: rgba(42, 41, 39, 0.34);
  clip-path: polygon(20% 0, 100% 18%, 84% 100%, 0 82%);
}

.ball-platform::before {
  left: 12%;
  top: 20%;
  width: 30%;
  height: 24%;
}

.ball-platform::after {
  right: 12%;
  bottom: 12%;
  width: 26%;
  height: 20%;
}

.ball-platform i {
  left: 42%;
  top: 36%;
  width: 28%;
  height: 28%;
  background: rgba(24, 23, 22, 0.28);
}

.ball-platform-a,
.ball-platform-c,
.ball-platform-e {
  --rock-in-x: 46px;
  --rock-mid-x: 22px;
  --rock-out-x: -128px;
  --rock-far-x: -148px;
  --rock-exit-x: -166px;
  --rock-dodge-rot: -24deg;
}

.ball-platform-b,
.ball-platform-d,
.ball-platform-f {
  --rock-in-x: -46px;
  --rock-mid-x: -22px;
  --rock-out-x: 128px;
  --rock-far-x: 148px;
  --rock-exit-x: 166px;
  --rock-dodge-rot: 24deg;
}

.ball-platform-a { --rock-top: 8%; --rock-left: 12%; --rock-width: 132px; --rock-height: 82px; --rock-rotate: -11deg; --rock-delay: -0.4s; --rock-z: 4; }
.ball-platform-b { --rock-top: 12%; --rock-left: 59%; --rock-width: 128px; --rock-height: 78px; --rock-rotate: 12deg; --rock-delay: -0.4s; --rock-z: 4; }
.ball-platform-c { --rock-top: 42%; --rock-left: 6%; --rock-width: 146px; --rock-height: 86px; --rock-rotate: 9deg; --rock-delay: -3.5s; --rock-z: 4; }
.ball-platform-d { --rock-top: 46%; --rock-left: 62%; --rock-width: 138px; --rock-height: 78px; --rock-rotate: -15deg; --rock-delay: -3.5s; --rock-z: 4; }
.ball-platform-e { --rock-top: 76%; --rock-left: 14%; --rock-width: 132px; --rock-height: 82px; --rock-rotate: -3deg; --rock-delay: -6.6s; --rock-z: 4; }
.ball-platform-f { --rock-top: 80%; --rock-left: 58%; --rock-width: 140px; --rock-height: 78px; --rock-rotate: 10deg; --rock-delay: -6.6s; --rock-z: 4; }

.ball-espa-wrap {
  left: 50%;
  top: 52%;
  z-index: 5;
  width: clamp(154px, 31%, 218px);
  aspect-ratio: 520 / 271;
  transform: translate(-50%, -50%);
  animation: ballEspaDive var(--ball-cycle) cubic-bezier(.25,.82,.26,1) infinite;
}

.ball-espa-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -54px;
  z-index: -1;
  width: 12px;
  height: 152px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.82) 24%, rgba(255, 219, 66, 0.68) 58%, rgba(255,255,255,0));
  box-shadow:
    0 0 18px rgba(255, 246, 166, 0.64),
    0 0 34px rgba(255, 205, 44, 0.34);
  opacity: 0;
  transform: translateX(-50%) scaleY(0.36);
  animation: ballDiveTrail var(--ball-cycle) ease-in-out infinite;
}

.ball-espa-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  z-index: -2;
  width: 72%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(80, 78, 76, 0.26), transparent 68%);
  transform: translateX(-50%);
}

.ball-espa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  transform-origin: 50% 56%;
}

.ball-espa-alt {
  opacity: 0;
  animation: ballEspaFace var(--ball-cycle) steps(1, end) infinite;
}

.ball-cover-icon,
.ball-hover-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 9;
  width: clamp(78px, 11vw, 112px);
  height: auto;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  object-fit: cover;
  box-shadow:
    0 18px 34px rgba(42, 75, 128, 0.24),
    0 0 0 6px rgba(255, 255, 255, 0.2);
  transition: opacity .24s var(--ease), transform .42s var(--ease), filter .35s var(--ease);
}

.ball-cover-icon {
  transform: rotate(-3deg);
}

.ball-hover-icon {
  opacity: 0;
  transform: translate3d(12px, -24px, 0) rotate(8deg) scale(0.9);
}

.ball-card:hover .ball-cover-icon {
  opacity: 0;
  transform: translate3d(-14px, 18px, 0) rotate(-12deg) scale(0.82);
}

.ball-card:hover .ball-hover-icon {
  opacity: 1;
  animation: ballIconDrop .72s var(--ease) both;
}