/* Match the supplied single-composition reference while keeping the wheel live. */
.visually-hidden { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { display: block; position: relative; padding: 0; margin-top: 18px; isolation: isolate; }
.hero-layer-stage { position: relative; aspect-ratio: 916 / 638; overflow: hidden; isolation: isolate; }
.hero-character { position: absolute; width: 76%; left: -9%; top: -12%; z-index: 0; pointer-events: none; transform: translateX(10%) scale(1.2); transform-origin: 50% 22%; }
.hero-character img { display: block; width: 100%; height: auto; mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
.hero-partners { position: absolute; top: 5%; left: 28%; width: 49%; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 3%; white-space: nowrap; }
.partner-wow { font: italic 800 clamp(18px,3.6vw,49px) var(--font-body); color: #354590; letter-spacing: -2px; }
.partner-x { font-size: clamp(16px,2.6vw,36px); color: #354590; }
.partner-pragmatic { font: 600 clamp(9px,1.8vw,24px) Arial,sans-serif; color: #171717; }
.partner-pragmatic span { display: inline-block; border: 2px solid #e79115; border-radius: 50%; padding: 13% 1%; margin-left: 1px; }
.hero .hero-title { position: absolute; z-index: 3; left: 50%; top: 65%; width: 57.2%; transform: translateX(-50%); margin: 0; line-height: 0; pointer-events: none; }
.hero-title img { display: block; width: 100%; height: auto; }
.hero .spin-area { position: absolute; left: 44%; top: 15%; width: 56%; max-width: none; }
.hero .wheel-stage { width: 100%; }
.hero .spin-button {
  position: absolute; z-index: 3; left: 50.1%; top: 49.1%; width: 30%; max-width: none;
  height: auto; aspect-ratio: 2.65; margin: 0; padding: 0; transform: translate(-50%,-50%);
  border-radius: 0; background: none; box-shadow: none;
  clip-path: polygon(49% 10%,54% 14%,88% 18%,96% 33%,98% 66%,89% 82%,55% 87%,50% 91%,45% 87%,11% 82%,3% 66%,3% 35%,11% 18%,45% 14%);
}
.hero .spin-button img { width: 100%; height: 100%; object-fit: fill; }
.hero .spin-button:hover { transform: translate(-50%,-50%) scale(1.06); }
.hero .spin-button:active { transform: translate(-50%,-50%) scale(.98); }
.hero .spin-button:disabled { transform: translate(-50%,-50%); }
.hero .spin-button:focus-visible { filter: drop-shadow(0 0 6px #fff) brightness(1.25); }
.hero-status { text-align: center; padding: 12px 8px 24px; }
.hero-status .spin-status { margin: 0 0 7px; }
.hero-status .wheel-note { max-width: none; }
@media (max-width: 760px) {
  main { padding-inline: 10px; }
  .hero { margin-top: 18px; }
  .hero-status { padding: 16px 8px 22px; }
  .hero .spin-button { width: 38%; min-height: 36px; }
  .hero .spin-status { font-size: 11px; }
}