/* Edge-to-edge environment and wheel animation origin. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
.wheel-decor {
  position: absolute; z-index: 1; width: 6%; height: auto;
  pointer-events: none; mix-blend-mode: multiply;
  animation: decor-burst 6s cubic-bezier(.16,.75,.25,1) infinite;
}
.decor-ruby { left: 95%; top: 26%; width: 8%; --tilt: 14deg; --launch-x: -18vw; --launch-y: 8vw; animation-delay: .15s; }
.decor-amber { left: 89%; top: 8%; width: 4.5%; --tilt: -12deg; --launch-x: -10vw; --launch-y: 22vw; animation-delay: .7s; }
.decor-sapphire { left: 59%; top: 2%; width: 6%; --tilt: -16deg; --launch-x: 8vw; --launch-y: 22vw; animation-delay: .35s; }
.multiplier-decor { position: absolute; z-index: 1; height: auto; pointer-events: none; mix-blend-mode: multiply; }
.multiplier-left { left: .75%; top: 44%; width: 25.5%; transform: rotate(-10deg); }
.multiplier-bottom { left: 78.4%; top: 76%; width: 19.2%; transform: rotate(12deg); }
.multiplier-top { left: 77%; top: -8%; width: 14%; transform: rotate(8deg); }
.decor-hourglass { left: 91.5%; top: 59%; width: 9.9%; --tilt: 15deg; --launch-x: -18vw; --launch-y: -8vw; animation-delay: 1s; }
@keyframes decor-burst {
  0% { opacity: 0; transform: translate(var(--launch-x),var(--launch-y)) scale(.15) rotate(-80deg); }
  8% { opacity: 1; }
  30% { opacity: 1; transform: translateY(0) scale(.8) rotate(var(--tilt)); }
  64% { opacity: 1; transform: translateY(-10%) scale(1.12) rotate(calc(var(--tilt) + 10deg)); }
  86% { opacity: 1; transform: translateY(-18%) scale(1.32) rotate(calc(var(--tilt) + 18deg)); }
  100% { opacity: 0; transform: translateY(-25%) scale(1.45) rotate(calc(var(--tilt) + 24deg)); }
}
.effects-paused .wheel-decor { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wheel-decor { animation: none; transform: rotate(var(--tilt)); }
}
header { position: relative; z-index: 5; justify-content: center; }
header .partner-wow { display: flex; align-items: center; }
header .partner-wow img { display: block; width: clamp(100px,15vw,175px); height: auto; }
header .hero-partners { position: static; width: auto; gap: 12px; flex: 0 1 auto; }
header .partner-wow { font-size: clamp(16px,2.8vw,34px); letter-spacing: -1px; }
header .partner-x { font-size: clamp(12px,1.6vw,20px); }
header .partner-pragmatic { font-size: clamp(9px,1.7vw,20px); }
.hero-character { height: 97%; overflow: hidden; top: -35%; transform: translateX(0%) scale(1.43); }
.hero .spin-area { width: 63.24%; left: 34.18%; top: 0%; z-index: 2; }
@media (max-width: 760px) {
  header .hero-partners { gap: 5px; }
  header .brand img { width: 94px; }
}
.hero-layer-stage {
  overflow: visible;
  background: none;
  clip-path: inset(-240px -100vw 0 -100vw);
}
.hero-layer-stage::before {
  content: ''; position: absolute; z-index: -2;
  top: -240px; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background: #edf7ff url('../images/olympus-background.png') center top / cover no-repeat;
  pointer-events: none;
}
.wheel-stage { isolation: isolate; transform-origin: 50.1% 49.1%; }
.hero .spin-button {
  animation: button-heartbeat 2.6s ease-in-out infinite;
}
.hero .spin-button:disabled { animation: none; }
.effects-paused .hero .spin-button { animation-play-state: paused; }
@keyframes button-heartbeat {
  0%,36%,100% { transform: translate(-50%,-50%) scale(1); }
  10% { transform: translate(-50%,-50%) scale(1.09); }
  18% { transform: translate(-50%,-50%) scale(1); }
  26% { transform: translate(-50%,-50%) scale(1.055); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .spin-button { animation: none; }
}
.hero .wheel-frame { width: 84%; left: 8.1%; height: auto; }
.hero #wheel { width: 65%; left: 17.6%; top: 11.1%; }
/* Open the inner edge of both frame layers, retaining the sapphire pointer. */
.hero .wheel-frame, .hero .wheel-frame-reflection {
  mask-image: linear-gradient(#000, #000), radial-gradient(circle closest-side at 50% 49.5%, transparent 76%, #000 76.4%);
  mask-size: 24% 24%, 100% 100%;
  mask-position: center top, center;
  mask-repeat: no-repeat;
}
.hero .spin-button { width: 25.5%; }
.hero .wheel-frame-reflection {
  position: absolute; left: 8.1%; top: 0; width: 84%; height: auto;
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(1.18) saturate(.75);
  opacity: .5;
  animation: frame-reflection 8s ease-in-out infinite;
}
@keyframes frame-reflection {
  0%,100% { opacity: 1; }
  30% { opacity: .5; }
  60% { opacity: .8; }
  82% { opacity: .5; }
}
.effects-paused .wheel-frame-reflection { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero .wheel-frame-reflection { animation: none; opacity: .5; }
}
.hero-character .zeus-light-overlay {
  position: absolute; inset: 0; width: 100%; height: auto; z-index: 1;
  pointer-events: none; mix-blend-mode: screen; opacity: .15;
  animation: zeus-light-breathe 3.2s ease-in-out infinite;
}
@keyframes zeus-light-breathe {
  0%,100% { opacity: .12; }
  28% { opacity: .48; }
  45% { opacity: .18; }
  59% { opacity: .62; }
  78% { opacity: .22; }
}
.effects-paused .zeus-light-overlay { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-character .zeus-light-overlay { animation: none; opacity: .18; }
}

.hero .hero-title { width: 46.046%; }
@media (min-width: 761px) {
  .wheel-decor { animation: none; transform: rotate(var(--tilt)); }
  .hero-layer-stage { clip-path: inset(-240px -100vw 0 -100vw); overflow: visible; }
  .decor-sapphire { width: 12%; left: 79%; top: -3%; --tilt: 9deg; }
  .decor-ruby { width: 24%; left: 89%; top: 15%; --tilt: -14deg; }
  .decor-amber { width: 19%; left: -12%; top: 43%; --tilt: 12deg; }
  .decor-hourglass { width: 32%; left: 77%; top: 66%; --tilt: 24deg; }
  .multiplier-top { display: none; }
  .multiplier-left { width: 20%; left: 5%; top: 51%; }
}
/* Portrait composition: independent character, live wheel and title layers. */
@media (max-width: 760px) {
  main { position: relative; padding-top: 0; }
  main > header { position: absolute; top: 20px; left: 10px; right: 10px; }
  .hero { margin-top: 0; margin-inline: -10px; }
  .hero-layer-stage { aspect-ratio: 9 / 16; clip-path: inset(0); }
  header .hero-partners { gap: 9px; }
  header .partner-wow img { width: 125px; }
  header .partner-pragmatic { font-size: 13px; }
  .hero-character {
    width: 135%; left: -23%; top: -2%; height: 112%;
    transform: none;
    mask-image: linear-gradient(#000 92%,transparent 100%);
  }
  .hero-character picture { display: block; }
  .hero-character picture img { aspect-ratio: 928 / 1695; mask-image: none; }
  .hero-character .zeus-light-overlay { display: none; }
  .hero .spin-area { width: 108%; left: -4%; top: 39%; }
  .hero .spin-button { width: 29%; min-height: 44px; }
  .hero .hero-title { width: 92%; top: 79%; left: 50%; transform: translateX(-50%); }
  .multiplier-left { display: none; }
  .multiplier-top { width: 26%; left: 88%; top: 5%; }
  .wheel-decor { animation: none; transform: rotate(var(--tilt)); }
  .decor-sapphire { width: 19%; left: -12%; top: 45%; --tilt: -15deg; }
  .decor-amber { width: 34%; left: -17%; top: 8%; --tilt: 10deg; }
  .decor-ruby { width: 22%; left: 87%; top: 37%; --tilt: 12deg; }
  .decor-hourglass { width: 37%; left: 87%; top: 73%; --tilt: 24deg; }
  .hero-status { padding-top: 12px; padding-bottom: 24px; }
  .hero .spin-status { font-size: 13px; }
}