:root {
  --cream: #fff1c2;
  --sand: #dba64f;
  --gold: #ffc94a;
  --deep-gold: #7f3e13;
  --aqua: #20dce3;
  --ocean: #075878;
  --ocean-dark: #032f49;
  --coral: #ff5d55;
  --green: #73ec44;
  --blue: #40bfff;
  --red: #ff4a54;
  --shadow: rgba(0, 12, 23, .72);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, #178ec0 0 12%, transparent 48%),
    linear-gradient(#063a5d, #021d30 76%, #01131e);
  color: var(--cream);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    repeating-linear-gradient(120deg, transparent 0 8px, rgba(255,255,255,.022) 9px 10px),
    radial-gradient(circle at 15% 80%, rgba(46,231,219,.35), transparent 25%),
    radial-gradient(circle at 85% 75%, rgba(255,79,118,.28), transparent 24%);
}

#app {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.gameShell {
  position: relative;
  isolation: isolate;
  width: min(100vw, calc(100vh * 1.7768331562));
  aspect-ratio: 1672 / 941;
  /* `hidden` still creates a programmatically scrollable box, so focusing a
     mid-feature Continue button could shift the entire cabinet upward when
     full-body activation art extends past the shell. `clip` keeps the same
     visual crop without ever acquiring scroll offsets. */
  overflow: clip;
  background: #159fd3;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 20px 80px #000;
}

.cabinetScene,
#gameCanvas,
.nightclubLights,
.controls,
.babeHotspots,
  .loadingScreen,
  .featureOverlay,
  .bonusTransition,
  .bigWinOverlay,
.orientationHint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cabinetScene {
  display: block;
  object-fit: fill;
  pointer-events: none;
  transition: opacity 1.05s ease, filter 1.05s ease;
}

.cabinetScene--base { z-index: 0; opacity: 1; }
.cabinetScene--bonus { z-index: 1; opacity: 0; filter: saturate(.82) brightness(.75); }
.gameShell.is-bonus .cabinetScene--base { opacity: 0; filter: saturate(.7) brightness(.62); }
.gameShell.is-bonus .cabinetScene--bonus { opacity: 1; filter: saturate(1.08) brightness(1); }

.balconyArchitecture {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transition: opacity 1.05s ease, filter 1.05s ease;
}
.balconyArchitecture--base { opacity: 1; }
.balconyArchitecture--bonus { opacity: 0; filter: saturate(.82) brightness(.75); }
.gameShell.is-bonus .balconyArchitecture--base { opacity: 0; filter: saturate(.7) brightness(.62); }
.gameShell.is-bonus .balconyArchitecture--bonus { opacity: 1; filter: saturate(1.08) brightness(1); }

.titleSignRepair {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transition: opacity 1.05s ease, filter 1.05s ease;
}
.titleSignRepair--base { opacity: 1; }
.titleSignRepair--bonus { opacity: 0; filter: saturate(.82) brightness(.75); }
.gameShell.is-bonus .titleSignRepair--base { opacity: 0; filter: saturate(.7) brightness(.62); }
.gameShell.is-bonus .titleSignRepair--bonus { opacity: 1; filter: saturate(1.08) brightness(1); }

#gameCanvas {
  z-index: 3;
  display: block;
  touch-action: none;
}

.nightclubLights {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.nightclubLights i {
  position: absolute;
  left: 50%;
  top: -23%;
  width: 5%;
  height: 115%;
  opacity: .16;
  transform-origin: 50% 0;
  filter: blur(5px);
  background: linear-gradient(180deg, rgba(79,237,255,.8), transparent 78%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  animation: clubSweep 5.4s ease-in-out infinite alternate;
}

.nightclubLights i:nth-child(2) { left: 25%; transform: rotate(-22deg); background-color: rgba(255,48,212,.6); animation-delay: -1.1s; }
.nightclubLights i:nth-child(3) { left: 72%; transform: rotate(18deg); animation-delay: -2.2s; }
.nightclubLights i:nth-child(4) { left: 12%; transform: rotate(-9deg); background-color: rgba(75,112,255,.75); animation-delay: -3.3s; }
.nightclubLights i:nth-child(5) { left: 88%; transform: rotate(10deg); background-color: rgba(255,74,143,.62); animation-delay: -4.4s; }

@keyframes clubSweep {
  from { transform: translateX(-34%) rotate(-18deg); opacity: .09; }
  to { transform: translateX(34%) rotate(18deg); opacity: .24; }
}

.titleSignRig {
  position: absolute;
  z-index: 4;
  left: 6.1603%;
  top: 4.4633%;
  width: 16.7464%;
  aspect-ratio: 280 / 226;
  pointer-events: none;
  transform-origin: 50% 4.018%;
  will-change: transform;
  filter: drop-shadow(0 7px 6px rgba(34, 12, 4, .48));
  animation: titleSignBreeze 4.8s ease-in-out infinite alternate;
  transition: filter 1.05s ease;
  overflow: hidden;
  clip-path: polygon(9% 0, 91% 0, 100% 16%, 95% 88%, 79% 100%, 21% 100%, 5% 88%, 0 16%);
}
.titleSign {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.titleSignTextShine {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url("../assets/art/title-sign-text-mask.png");
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../assets/art/title-sign-text-mask.png");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
}
.titleSignTextShine::after {
  content: "";
  position: absolute;
  left: -52%;
  top: 15%;
  width: 34%;
  height: 76%;
  opacity: 0;
  transform: translate3d(0,0,0) skewX(-20deg);
  will-change: transform, opacity;
  filter: blur(1px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(255,255,225,.9), rgba(83,241,255,.26), transparent);
  animation: titleSignShineSweep 5.9s ease-in-out infinite;
}
.gameShell.is-bonus .titleSignRig {
  filter: saturate(1.08) brightness(.92) drop-shadow(0 8px 7px rgba(4, 4, 22, .68));
}
.gameShell.is-document-hidden .titleSignRig,
.gameShell.is-document-hidden .titleSignTextShine::after { animation-play-state: paused; }
.gameShell.is-document-hidden .titleSign { animation-play-state: paused; }

@keyframes titleSignBreeze {
  0% { transform: translate3d(-.65%, 0, 0) rotate(-1.25deg); }
  45% { transform: translate3d(.12%, .18%, 0) rotate(.2deg); }
  100% { transform: translate3d(.7%, .4%, 0) rotate(1.35deg); }
}

@keyframes titleSignShineSweep {
  0%, 16% { transform: translate3d(0,0,0) skewX(-20deg); opacity: 0; }
  22% { opacity: .78; }
  42% { transform: translate3d(502.941%,0,0) skewX(-20deg); opacity: .62; }
  48%, 100% { transform: translate3d(502.941%,0,0) skewX(-20deg); opacity: 0; }
}

.babeHotspots { z-index: 5; pointer-events: none; }
.babeHotspot {
  position: absolute;
  top: 3.486%;
  width: 12.201%;
  height: 21.679%;
  padding: 0;
  border: 0;
  border-radius: 46% 46% 18% 18%;
  background: transparent;
  pointer-events: auto;
}
.babeHotspot--green { left: 33.912%; }
.babeHotspot--blue { left: 51.316%; }
.babeHotspot--red { left: 68.720%; }
.babeHotspot:focus-visible {
  outline: max(2px, .18vw) solid #fff8b5;
  outline-offset: max(1px, .12vw);
}
.babeHotspot span,
.hotspot > span:not(.spinAutoplayCount) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.bonusHud {
  position: absolute;
  z-index: 8;
  left: 4.75%;
  top: 23.35%;
  width: 21.55%;
  aspect-ratio: 2 / 3;
  color: white;
  pointer-events: none;
  filter: drop-shadow(0 .6vw .62vw rgba(0, 7, 18, .7));
}
.bonusHudArt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.bonusHudReadout {
  position: absolute;
  left: 32%;
  width: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .9;
  text-align: center;
  text-shadow: 0 .13em .16em #00111c, 0 0 .35em rgba(46, 223, 255, .6);
}
.bonusHudReadout span {
  color: #d8fbff;
  font-size: clamp(6px, .58vw, 11px);
  font-weight: 1000;
  letter-spacing: .075em;
  white-space: nowrap;
}
.bonusHudReadout strong {
  color: #fff2a2;
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
}
.bonusHudReadout--spins {
  top: 17.4%;
  height: 34.6%;
}
.bonusSpinFlames {
  position: absolute;
  inset: 2% 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  width: 100%;
}
.wheelFreeSpinCount {
  position: absolute;
  inset: 2% 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* Grow the separation around the shared centre rather than nudging either
     line independently, so the complete 3 / SPINS lockup stays registered in
     the middle of the authored flame aperture at every cabinet scale. */
  gap: clamp(5px, .42vw, 8px);
}
.wheelFreeSpinCount strong {
  color: #fff2a2;
  font-size: clamp(28px, 4.1vw, 76px);
  line-height: .72;
  text-shadow: 0 .08em .08em #3b1802, 0 0 .28em #ffbf35;
}
.wheelFreeSpinCount span {
  color: #d8fbff;
  font-size: clamp(8px, .8vw, 15px);
  font-weight: 1000;
  letter-spacing: .12em;
}
.bonusHud.is-wheel-free .bonusSpinFlames { display: none; }
.bonusHud.is-wheel-free .wheelFreeSpinCount { display: flex; }
.bonusSpinFlame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  filter: drop-shadow(0 0 .22vw rgba(37, 231, 255, .5));
  transform-origin: 50% 72%;
}
.bonusSpinFlameArt {
  position: absolute;
  inset: calc(50% - 8px) auto auto 50%;
  display: block;
  width: auto;
  height: calc(100% - 2px);
  max-width: 70%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  transition: opacity .32s ease, filter .32s ease, transform .32s ease;
}
.bonusSpinFlameArt--lit {
  opacity: 0;
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 .3vw rgba(255, 207, 72, .82));
}
.bonusSpinFlameArt--out { opacity: 0; }
.bonusSpinFlame[data-state="lit"] .bonusSpinFlameArt--lit { opacity: 1; }
.bonusSpinFlame[data-state="lit"] .bonusSpinFlameArt--out { opacity: 0; }
.bonusSpinFlame[data-state="out"] .bonusSpinFlameArt--lit {
  opacity: 0;
  filter: brightness(.4) saturate(.35);
  transform: translate(-50%, -50%);
}
.bonusSpinFlame[data-state="out"] .bonusSpinFlameArt--out { opacity: 1; }
.bonusSpinFlame[data-state="lit"].is-changing { animation: bonusSpinFlameRelight .62s ease-out; }
.bonusSpinFlame[data-state="out"].is-changing { animation: bonusSpinFlameExtinguish .48s ease-out; }
@keyframes bonusSpinFlameRelight {
  0% { transform: scale(.72); filter: brightness(.85); }
  45% { transform: scale(1.22); filter: brightness(1.65) drop-shadow(0 0 .5vw #fff59a); }
  100% { transform: scale(1); }
}
@keyframes bonusSpinFlameExtinguish {
  0% { transform: scale(1); }
  38% { transform: scale(1.12, .86); filter: brightness(1.35); }
  100% { transform: scale(1); }
}
body.reduceMotion .bonusSpinFlame,
body.reduceMotion .bonusSpinFlameArt { animation: none !important; transition: none !important; }
.gameShell.is-document-hidden .bonusSpinFlame { animation-play-state: paused !important; }
.bonusHudReadout--multiplier {
  top: 61.2%;
  /* The supplied 1024px panel has transparent side gutters. Register the
     measured fitter to the actual 318px teal aperture, not the PNG canvas. */
  left: 34.5%;
  width: 31%;
  height: 24.5%;
}
.bonusMultiplierValue {
  --bonus-multiplier-scale: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: .12em;
  white-space: nowrap;
  transform: scale(var(--bonus-multiplier-scale));
  transform-origin: 50% 50%;
}
.bonusMultiplierValue strong {
  flex: 0 0 auto;
  font-size: clamp(20px, 2.65vw, 49px);
  letter-spacing: -.055em;
}
.bonusMultiplierValue b {
  flex: 0 0 auto;
  margin-left: .06em;
  color: #baf7ff;
  font-size: clamp(13px, 1.45vw, 27px);
  font-weight: 1000;
}
.activePowers { display: flex; gap: .28em; flex: 1; justify-content: center; }
.powerChip {
  min-width: 4.2em;
  padding: .35em .55em;
  border-radius: 999px;
  color: #fff;
  background: #0b6d5a;
  border: 1px solid #8cffb7;
  font-size: clamp(7px, .65vw, 12px);
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.powerChip--blue { background: #0756a0; border-color: #7bdcff; }
.powerChip--red { background: #a41d34; border-color: #ff9e9e; }
.powerChip--new {
  position: relative;
  animation: powerChipUnlock 1.15s cubic-bezier(.16, 1.35, .35, 1) both;
}
@keyframes powerChipUnlock {
  0% { opacity: 0; transform: scale(.25); filter: brightness(2.8); }
  38% { opacity: 1; transform: scale(1.48); filter: brightness(2.1); box-shadow: 0 0 2.1em #fff, 0 0 3.6em currentColor; }
  68% { transform: scale(.92); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 .85em currentColor; }
}

.cabinetMeter {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  top: 89.2667%;
  height: 4.6759%;
  padding: 0;
  border: 0;
  color: #fff1b1;
  font-size: clamp(12px, 1.34vw, 25px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 2px #001827, 0 0 9px #00d7ff55;
  pointer-events: none;
  transition: top 1.05s ease, height 1.05s ease;
}
.balanceMeter { left: 14.4139%; width: 11.9617%; }
.betMeter { left: 31.2201%; width: 8.9115%; }
.winMeter { left: 65.1914%; width: 17.3445%; }
.gameShell.is-bonus .cabinetMeter { top: 86.1849%; height: 7.7577%; }
.spinAutoplayCount {
  position: absolute;
  z-index: 3;
  left: calc(50% + var(--control-art-offset-x) + var(--stop-normal-offset-x));
  top: calc(50% + var(--stop-normal-offset-y));
  width: 31%;
  height: 30%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #4a1908;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(9px, min(2.05vw, 3.65vh), 34px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #fff0a6, 0 2px 2px #7d310a66;
  pointer-events: none;
}
.spinAutoplayCount.is-large {
  font-size: clamp(8px, min(1.65vw, 2.98vh), 28px);
  letter-spacing: -.06em;
}

.controls { z-index: 10; pointer-events: none; }
.hotspot {
  position: absolute;
  --control-art-width: 112%;
  --control-art-height: 112%;
  --control-art-offset-x: 0%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
}
.controlStateArt {
  position: absolute;
  left: calc(50% + var(--control-art-offset-x));
  top: 50%;
  z-index: 1;
  width: var(--control-art-width);
  height: var(--control-art-height);
  object-fit: fill;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity .08s ease, left 1.05s ease;
}
.hotspot:not(:disabled):hover .controlStateArt--hover,
.hotspot:not(:disabled):focus-visible .controlStateArt--hover { opacity: 1; }
.gameShell.is-autoplay .autoplayButton .controlStateArt--hover { opacity: 1; }
.hotspot:not(:disabled):active .controlStateArt--pressed { opacity: 1; }
.hotspot:not(:disabled):active .controlStateArt--hover { opacity: 0; }
.hotspot:disabled .controlStateArt { opacity: 0 !important; }
.spinButton.is-stop .controlStateArt { opacity: 0 !important; }
.stopControlArt {
  position: absolute;
  left: calc(50% + var(--control-art-offset-x));
  top: 50%;
  z-index: 2;
  width: var(--control-art-width);
  height: var(--control-art-height);
  object-fit: fill;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity .08s ease, left 1.05s ease;
}
.stopControlArt--normal {
  left: calc(50% + var(--control-art-offset-x) + var(--stop-normal-offset-x));
  top: calc(50% + var(--stop-normal-offset-y));
}
.spinButton.is-stop .stopControlArt--normal { opacity: 1; }
.spinButton.is-stop:not(:disabled):hover .stopControlArt--hover,
.spinButton.is-stop:not(:disabled):focus-visible .stopControlArt--hover { opacity: 1; }
.spinButton.is-stop:not(:disabled):active .stopControlArt--pressed { opacity: 1; }
.spinButton.is-stop:not(:disabled):active .stopControlArt--hover { opacity: 0; }

/* The cabinet mode changes underneath an opaque transition frame. Suppressing
   its usual crossfades for those two paints prevents the white reveal from
   exposing a half-base, half-nightclub cabinet. Keep this after the canonical
   art rules so their standalone geometry remains the primary registration. */
.gameShell.is-scene-covered .cabinetScene,
.gameShell.is-scene-covered .balconyArchitecture,
.gameShell.is-scene-covered .titleSignRepair,
.gameShell.is-scene-covered .titleSignRig,
.gameShell.is-scene-covered .titleSign,
.gameShell.is-scene-covered .cabinetMeter,
.gameShell.is-scene-covered .controlStateArt,
.gameShell.is-scene-covered .stopControlArt {
  transition: none !important;
}
.hotspot:focus-visible { outline: max(2px, .18vw) solid #fff8b5; outline-offset: .18vw; }
.hotspot:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.65); }
.menuButton { left: 6.69856459%; top: 83.84697131%; width: 7.41626794%; height: 13.17747078%; }
.betDownButton { left: 26.73444976%; top: 85.65356004%; width: 5.38277512%; height: 9.56429330%; }
.betUpButton { left: 39.29425837%; top: 85.65356004%; width: 5.38277512%; height: 9.56429330%; }
.spinButton {
  --control-art-width: 108%;
  --control-art-height: 108%;
  --stop-normal-offset-x: -2.624153%;
  --stop-normal-offset-y: -3.351802%;
  left: 43.89952153%;
  top: 78.10839532%;
  width: 12.32057416%;
  height: 21.89160468%;
}
.maxBetButton {
  --control-art-width: 110%;
  --control-art-height: 120%;
  left: 56.27990431%;
  top: 83.52816153%;
  width: 7.89473684%;
  height: 14.02763018%;
  border-radius: 24%;
}
.autoplayButton {
  --control-art-width: 100%;
  --control-art-height: 100%;
  left: 82.89473684%;
  top: 82.57173220%;
  width: 8.85167464%;
  height: 15.72794899%;
}
.gameShell.is-bonus .menuButton { --control-art-offset-x: -0.80645161%; }
.gameShell.is-bonus .betDownButton,
.gameShell.is-bonus .betUpButton { --control-art-offset-x: -1.11111111%; }
.gameShell.is-bonus .spinButton { --control-art-offset-x: -0.48543689%; }
.gameShell.is-bonus .maxBetButton { --control-art-offset-x: -0.75757576%; }
.autospinIcon {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.gameShell.is-autoplay .autoplayButton { filter: brightness(1); }
.gameShell.is-turbo .spinButton { filter: drop-shadow(0 0 12px #fff16b) saturate(1.25); }

.toast {
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: 12%;
  transform: translate(-50%, 8px);
  max-width: 62%;
  padding: .55em 1.1em;
  border: 2px solid #ffd86f;
  border-radius: 999px;
  background: rgba(3,38,53,.95);
  box-shadow: 0 7px 22px #000a, inset 0 0 16px #1caecc44;
  color: #fff1bd;
  font-size: clamp(9px, .9vw, 17px);
  font-weight: 900;
  letter-spacing: .035em;
  text-align: center;
  animation: toastIn .22s ease both;
}
@keyframes toastIn { to { transform: translate(-50%, 0); } }

.featureOverlay,
.bigWinOverlay {
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(0,18,31,.42);
  backdrop-filter: blur(2px);
}

.bonusTransition {
  --photo-stagger-ms: 190ms;
  --photo-enter-ms: 620ms;
  --flash-offset-ms: 470ms;
  --flash-duration-ms: 110ms;
  --photo-arrange-start-ms: 2450ms;
  --photo-arrange-ms: 700ms;
  --photo-total-reveal-ms: 3300ms;
  --photo-total-grow-ms: 1700ms;
  --photo-glint-start-ms: 3650ms;
  --photo-glint-ms: 760ms;
  --white-start-ms: 5300ms;
  --white-in-ms: 380ms;
  --white-out-ms: 520ms;
  z-index: 80;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  background:
    radial-gradient(ellipse at 50% 41%, #e99aaa 0, #d9768b 46%, #b94f68 76%, #743040 100%),
    #cb667b;
}
.bonusTransitionBackdrop,
.bonusTransitionPhotos,
.bonusTransitionFlashes,
.bonusTransitionWhiteout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bonusTransitionBackdrop {
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 231, 222, .23), transparent 59%),
    repeating-linear-gradient(105deg, rgba(255,255,255,.018) 0 .08vw, transparent .08vw .35vw),
    repeating-linear-gradient(12deg, rgba(91, 24, 43, .018) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(255, 199, 202, .05), rgba(77, 16, 37, .18));
  box-shadow: inset 0 0 10vw rgba(79, 18, 36, .48);
}
.bonusTransition.is-active:not(.is-reduced) .bonusTransitionBackdrop {
  animation: polaroidBackdropIn 520ms ease-out both;
}
.bonusTransitionPhotos { z-index: 1; }
.bonusTransitionPhotos::after {
  content: "";
  position: absolute;
  z-index: 20;
  left: -42%;
  top: -22%;
  width: 30%;
  height: 144%;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 0 30%,
    rgba(255, 237, 196, .08) 39%,
    rgba(255, 250, 226, .3) 49%,
    rgba(255, 255, 255, .2) 55%,
    transparent 69% 100%);
  filter: blur(.24vw);
  mix-blend-mode: screen;
  transform: translateX(0) skewX(-7deg);
  will-change: transform, opacity;
  pointer-events: none;
}
.bonusTransition.is-active:not(.is-reduced):not(.is-skipped) .bonusTransitionPhotos::after {
  animation: polaroidCollageGlint var(--photo-glint-ms) cubic-bezier(.3, .04, .64, .98) var(--photo-glint-start-ms) both;
}
.bonusTransitionPhoto {
  position: absolute;
  left: var(--photo-x);
  top: var(--photo-y);
  z-index: var(--photo-index);
  width: var(--photo-width);
  margin: 0;
  /* Percentage padding is resolved against the 1672-wide transition layer,
     so the instant-film frame tracks the cabinet even when it is letterboxed. */
  padding: .45% .45% 2.05%;
  overflow: hidden;
  border: max(2px, .13vw) solid rgba(94, 55, 44, .24);
  border-radius: .16vw;
  background:
    linear-gradient(145deg, rgba(255,255,255,.74), transparent 31%),
    linear-gradient(150deg, #fffef8, #fbf3df 76%, #ead9b8);
  box-shadow:
    0 1.05vw 2.2vw rgba(72, 15, 35, .48),
    0 .2vw .48vw rgba(71, 25, 22, .34),
    inset 0 0 .45vw rgba(126, 77, 24, .12);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.bonusTransitionPhoto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255,255,255,.22), transparent 22% 76%, rgba(116,72,19,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.36);
  pointer-events: none;
}
.bonusTransition.is-active:not(.is-reduced) .bonusTransitionPhoto {
  animation:
    polaroidCardDrop var(--photo-enter-ms) cubic-bezier(.18, .76, .22, 1) var(--photo-delay) both,
    polaroidCardFanOut var(--photo-arrange-ms) cubic-bezier(.17, .84, .24, 1) var(--photo-arrange-start-ms) forwards;
}
.bonusTransitionPhoto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 50%;
  border: 1px solid rgba(73, 44, 20, .24);
  filter: saturate(1.06) contrast(1.025) sepia(.025);
  pointer-events: none;
  user-select: none;
}
.bonusTransitionTotalOrb {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  /* 48% of the wide cabinet is about 85% of its height. The authored art
     extends to 112% of this shared text container, so its final frame reaches
     about 95.5% of the cabinet height without cropping its floral crown. */
  width: 48%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #fffdf1;
  background: transparent;
  transform: translate(-50%, -50%) scale(.16);
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.bonusTransitionTotalOrbArt {
  position: absolute;
  z-index: 0;
  inset: -6%;
  display: block;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 0 .7vw rgba(255,255,255,.76))
    drop-shadow(0 0 2.2vw rgba(74,218,249,.5));
  pointer-events: none;
  user-select: none;
}
.bonusTransition.is-orb-fallback .bonusTransitionTotalOrb {
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 1vw rgba(255,255,255,.64), 0 0 2.4vw rgba(82,218,247,.42);
}
.bonusTransitionTotalOrb span {
  position: relative;
  z-index: 1;
  color: #07506a;
  font-size: clamp(14px, 1.35vw, 26px);
  font-weight: 1000;
  letter-spacing: .18em;
  text-shadow: 0 1px 0 rgba(255,255,255,.96), 0 0 .34em rgba(255,255,255,.9);
}
.bonusTransitionTotalOrb output {
  position: relative;
  z-index: 1;
  margin-top: .08em;
  color: #ffe875;
  font-size: clamp(42px, 7.2vw, 132px);
  font-weight: 1000;
  line-height: .95;
  -webkit-text-stroke: .035em #07506a;
  paint-order: stroke fill;
  text-shadow: 0 .07em .11em rgba(4,56,78,.72), 0 0 .28em rgba(255,255,255,.94);
}
.bonusTransition.is-active.is-total:not(.is-reduced) .bonusTransitionTotalOrb {
  animation: polaroidTotalOrbIn var(--photo-total-grow-ms) cubic-bezier(.16, .88, .26, 1) var(--photo-total-reveal-ms) both;
}
.bonusTransitionFlashes { z-index: 3; mix-blend-mode: screen; }
.bonusTransitionFlashBurst {
  position: absolute;
  left: var(--flash-x);
  top: var(--flash-y);
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 5%, rgba(255,250,215,.9) 9%, rgba(150,239,255,.42) 25%, transparent 67%);
  filter: blur(.16vw);
  transform: translate(-50%, -50%) scale(.34);
}
.bonusTransition.is-active:not(.is-reduced) .bonusTransitionFlashBurst {
  animation: polaroidCameraFlash var(--flash-duration-ms) ease-out calc(var(--photo-delay) + var(--flash-offset-ms)) both;
}
.bonusTransitionWhiteout {
  z-index: 4;
  opacity: 0;
  background: #fffef5;
  will-change: opacity;
}
.bonusTransition.is-active:not(.is-reduced) .bonusTransitionWhiteout {
  animation: polaroidWhiteIn var(--white-in-ms) cubic-bezier(.2, .7, .25, 1) var(--white-start-ms) both;
}
.bonusTransition.is-active.is-covered .bonusTransitionWhiteout {
  opacity: 1;
  animation: none;
}
.bonusTransition.is-active.is-covered.is-revealing .bonusTransitionWhiteout {
  animation: polaroidWhiteOut var(--white-out-ms) ease-in both;
}
/* At full white the underlying cabinet has already been switched and painted.
   Retiring every outgoing layer (including the pink root surface) means the
   whiteout can reveal only that Base scene, never a one-frame total reprise. */
.bonusTransition.is-content-retired {
  background: transparent;
}
.bonusTransition.is-content-retired .bonusTransitionBackdrop,
.bonusTransition.is-content-retired .bonusTransitionPhotos,
.bonusTransition.is-content-retired .bonusTransitionTotalOrb,
.bonusTransition.is-content-retired .bonusTransitionFlashes {
  visibility: hidden;
  animation: none !important;
}
.bonusTransition.is-paused .bonusTransitionBackdrop,
.bonusTransition.is-paused .bonusTransitionPhotos::after,
.bonusTransition.is-paused .bonusTransitionPhoto,
.bonusTransition.is-paused .bonusTransitionTotalOrb,
.bonusTransition.is-paused .bonusTransitionFlashBurst,
.bonusTransition.is-paused .bonusTransitionWhiteout {
  animation-play-state: paused !important;
}
.bonusTransition.is-reduced .bonusTransitionBackdrop {
  opacity: .34;
  animation: none;
}
.bonusTransition.is-reduced .bonusTransitionPhoto {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--photo-rotation)) scale(1);
  animation: none;
}
.bonusTransition.is-reduced.is-total .bonusTransitionTotalOrb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}
.bonusTransition.is-reduced .bonusTransitionFlashBurst { display: none; animation: none; }
.bonusTransition.is-reduced .bonusTransitionFlashBurst:last-child {
  display: block;
  opacity: 0;
  animation: polaroidReducedFlash 90ms ease-out 40ms both;
}
.bonusTransition.is-reduced .bonusTransitionWhiteout { animation: none; }
.bonusTransition.is-skipped .bonusTransitionPhoto,
.bonusTransition.is-skipped .bonusTransitionFlashBurst { animation-play-state: paused; }

@keyframes polaroidBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes polaroidCardDrop {
  0% {
    opacity: 0;
    left: var(--photo-pile-x);
    top: var(--photo-pile-y);
    filter: blur(.11vw) brightness(1.14) saturate(.88);
    transform: translate(calc(-50% + var(--photo-from-x)), calc(-50% + var(--photo-from-y))) rotate(var(--photo-from-rotation)) scale(1.06);
  }
  9% { opacity: 1; }
  56% { filter: blur(.075vw) brightness(1.08) saturate(.94); }
  72% {
    opacity: 1;
    left: var(--photo-pile-x);
    top: var(--photo-pile-y);
    filter: blur(.02vw) brightness(1.04) saturate(1.03);
    transform: translate(-50%, -46.7%) rotate(calc(var(--photo-pile-rotation) + 1.8deg)) scale(calc(var(--photo-pile-scale) + .025));
  }
  82% { transform: translate(-50%, -51%) rotate(calc(var(--photo-pile-rotation) - .8deg)) scale(calc(var(--photo-pile-scale) - .008)); }
  91% { transform: translate(-50%, -49.5%) rotate(calc(var(--photo-pile-rotation) + .2deg)) scale(calc(var(--photo-pile-scale) + .003)); }
  100% {
    opacity: 1;
    left: var(--photo-pile-x);
    top: var(--photo-pile-y);
    filter: blur(0) brightness(1) saturate(1);
    transform: translate(-50%, -50%) rotate(var(--photo-pile-rotation)) scale(var(--photo-pile-scale));
  }
}
@keyframes polaroidCardFanOut {
  0% {
    left: var(--photo-pile-x);
    top: var(--photo-pile-y);
    transform: translate(-50%, -50%) rotate(var(--photo-pile-rotation)) scale(var(--photo-pile-scale));
  }
  72% {
    left: var(--photo-x);
    top: var(--photo-y);
    transform: translate(-50%, -48.6%) rotate(calc(var(--photo-rotation) + .45deg)) scale(1.018);
  }
  86% {
    left: var(--photo-x);
    top: var(--photo-y);
    transform: translate(-50%, -50.45%) rotate(calc(var(--photo-rotation) - .12deg)) scale(.997);
  }
  100% {
    left: var(--photo-x);
    top: var(--photo-y);
    transform: translate(-50%, -50%) rotate(var(--photo-rotation)) scale(1);
  }
}
@keyframes polaroidCollageGlint {
  0% { opacity: 0; transform: translateX(0) skewX(-7deg); }
  16% { opacity: .52; }
  70% { opacity: .4; }
  100% { opacity: 0; transform: translateX(470%) skewX(-7deg); }
}
@keyframes polaroidCameraFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  14% { opacity: .56; transform: translate(-50%, -50%) scale(.72); }
  42% { opacity: .18; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34); }
}
@keyframes polaroidReducedFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  24% { opacity: .34; transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes polaroidTotalOrbIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16); filter: brightness(1.75) blur(.16vw); }
  20% { opacity: .72; transform: translate(-50%, -50%) scale(.28); filter: brightness(1.42) blur(.045vw); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(.6); filter: brightness(1.18) blur(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(.84); filter: brightness(1.07) blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1) blur(0); }
}
@keyframes polaroidWhiteIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes polaroidWhiteOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.featureCurtain {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(13,188,211,.28) 19% 20%, transparent 21% 31%, rgba(255,97,164,.2) 32% 33%, transparent 34%),
    conic-gradient(from 0deg, #13c8e533, transparent 12%, #ff5e9c33 21%, transparent 32%, #ffe5642b 45%, transparent 58%, #36ec9c2b 72%, transparent 83%);
  animation: slowSpin 15s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
.featureCard,
.bigWinCard {
  position: relative;
  width: 46%;
  min-height: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.6% 4.2%;
  border: .45vw solid #c87923;
  border-radius: 2.3vw;
  color: #fff3c3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 24%),
    repeating-linear-gradient(92deg, #874315 0 2%, #a95d20 2.2% 4.3%, #6d3412 4.5% 6.8%);
  box-shadow: 0 0 0 .25vw #ffd368, 0 1.5vw 4vw #000d, inset 0 0 4vw #3a130b;
  text-align: center;
  overflow: hidden;
  animation: cardPop .45s cubic-bezier(.18,1.4,.4,1) both;
}
@keyframes cardPop { from { opacity: 0; transform: scale(.7) translateY(8%); } }
.featureCard::before,
.bigWinCard::before {
  content: "";
  position: absolute;
  inset: .7vw;
  border: .18vw solid rgba(255,218,113,.6);
  border-radius: 1.6vw;
  pointer-events: none;
}
.featureCard small,
.bigWinCard small { color: #72eeff; font-size: clamp(8px, .8vw, 15px); font-weight: 1000; letter-spacing: .2em; }
.featureCard h2,
.bigWinCard h2 { margin: .12em 0 .25em; color: #ffe782; font-size: clamp(28px, 4.3vw, 76px); line-height: .95; text-shadow: 0 .08em #8e2a1b, 0 .12em .18em #000; }
.featureCard p { max-width: 32em; margin: .75em 0 1em; font-size: clamp(9px, 1.02vw, 19px); line-height: 1.35; }
.featureActivation {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  pointer-events: none;
}
.featureActivationPanel {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 51.5%;
  width: 68%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2.2vw 2.6vw rgba(0, 0, 0, .66));
  animation: featurePanelIn .55s cubic-bezier(.17, 1.1, .36, 1) both;
  user-select: none;
}
.featureActivationBabe {
  position: absolute;
  z-index: 2;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.4vw 1.4vw rgba(0, 0, 0, .58));
  transform-origin: 50% 85%;
  user-select: none;
  animation: featureBabeIn .62s cubic-bezier(.17, 1.15, .33, 1) both;
}
.featureActivationBabe--green {
  left: 6%;
  bottom: -1%;
  width: 25%;
  transform: rotate(-3deg);
}
.featureActivationBabe--blue {
  right: 5.5%;
  bottom: -1%;
  width: 22%;
  transform: rotate(3deg);
}
.featureActivationBabe--red {
  z-index: 1;
  left: 50%;
  top: 0;
  width: 28%;
  transform: translateX(-50%) rotate(-1deg);
}
.featureActivation .featureCard {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 53.5%;
  width: 50%;
  min-height: 33%;
  padding: 1.1% 2.6% 1.5%;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: translate(-50%, -50%);
  animation: featureCopyIn .44s ease-out .22s both;
  pointer-events: auto;
}
.featureActivation .featureCard::before { display: none; }
.featureActivation .featureCard small {
  color: #6ff4ff;
  font-size: clamp(8px, .72vw, 14px);
  text-shadow: 0 2px 2px #001c20, 0 0 12px #00bacc;
}
.featureActivation .featureCard h2 {
  margin: .08em 0 .14em;
  font-size: clamp(24px, 3.45vw, 62px);
}
.featureActivation .featureCard p {
  margin: .35em 0 .62em;
  max-width: 39em;
  color: #fff4d4;
  font-size: clamp(8px, .82vw, 16px);
  text-shadow: 0 2px 3px #001;
}
.featureActivation .featurePowers {
  gap: clamp(5px, .55vw, 11px);
  align-items: stretch;
}
.featureActivationPower {
  --power-glow: rgba(104, 255, 137, .52);
  --power-deep: rgba(2, 46, 30, .96);
  --power-mid: rgba(24, 130, 68, .88);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 31%;
  display: grid;
  grid-template-columns: minmax(62px, 38%) 1fr;
  align-items: center;
  gap: .28em;
  padding: .5em .66em .48em .28em;
  border: clamp(2px, .13vw, 3px) solid #ffd477;
  border-radius: 1.05em;
  color: white;
  background:
    radial-gradient(circle at 18% 48%, var(--power-glow), transparent 35%),
    linear-gradient(145deg, var(--power-mid), var(--power-deep) 72%);
  box-shadow:
    0 0 0 .08em #6b330c,
    0 0 0 .15em rgba(255, 221, 122, .64),
    inset 0 0 0 .1em rgba(255, 246, 188, .34),
    inset 0 0 1.4em rgba(255, 228, 134, .16),
    0 .45em 1.15em rgba(0, 10, 9, .62),
    0 0 1.35em color-mix(in srgb, var(--power-glow) 68%, transparent);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
}
.featureActivationPower::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: .24em;
  border: 1px solid rgba(255, 241, 175, .46);
  border-radius: .78em;
  box-shadow: inset 0 0 .8em rgba(255, 244, 190, .12);
  pointer-events: none;
}
.featureActivationPower::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -54%;
  left: 42%;
  width: 18%;
  height: 205%;
  transform: rotate(19deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,224,.2), transparent);
  pointer-events: none;
}
.featureActivationParticles {
  position: absolute;
  z-index: 0;
  inset: .34em;
  overflow: hidden;
  border-radius: .76em;
  pointer-events: none;
}
.featureActivationParticle {
  --particle-x: 10%;
  --particle-y: 72%;
  --particle-size: .12vw;
  --particle-drift: .45em;
  --particle-start: 3px;
  --particle-rise: -13px;
  --particle-duration: 5.2s;
  --particle-delay: -1s;
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: clamp(2px, var(--particle-size), 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 .3em rgba(255, 255, 255, .86), 0 0 .65em rgba(255, 255, 255, .38);
  opacity: 0;
  will-change: transform, opacity;
  animation: featureActivationParticleFloat var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}
.featureActivationParticle:nth-child(1) { --particle-x: 8%; --particle-y: 78%; --particle-size: .11vw; --particle-drift: .5em; --particle-start: 3px; --particle-rise: -12px; --particle-duration: 4.8s; --particle-delay: -.8s; }
.featureActivationParticle:nth-child(2) { --particle-x: 19%; --particle-y: 38%; --particle-size: .17vw; --particle-drift: -.42em; --particle-start: 2px; --particle-rise: -15px; --particle-duration: 5.6s; --particle-delay: -3.2s; }
.featureActivationParticle:nth-child(3) { --particle-x: 32%; --particle-y: 67%; --particle-size: .1vw; --particle-drift: .34em; --particle-start: 3px; --particle-rise: -10px; --particle-duration: 4.3s; --particle-delay: -1.7s; }
.featureActivationParticle:nth-child(4) { --particle-x: 45%; --particle-y: 24%; --particle-size: .15vw; --particle-drift: -.48em; --particle-start: 2px; --particle-rise: -14px; --particle-duration: 6.2s; --particle-delay: -4.1s; }
.featureActivationParticle:nth-child(5) { --particle-x: 57%; --particle-y: 75%; --particle-size: .11vw; --particle-drift: .46em; --particle-start: 3px; --particle-rise: -11px; --particle-duration: 5.1s; --particle-delay: -2.6s; }
.featureActivationParticle:nth-child(6) { --particle-x: 69%; --particle-y: 43%; --particle-size: .16vw; --particle-drift: -.36em; --particle-start: 2px; --particle-rise: -16px; --particle-duration: 5.8s; --particle-delay: -.4s; }
.featureActivationParticle:nth-child(7) { --particle-x: 81%; --particle-y: 69%; --particle-size: .12vw; --particle-drift: .48em; --particle-start: 3px; --particle-rise: -13px; --particle-duration: 4.7s; --particle-delay: -3.8s; }
.featureActivationParticle:nth-child(8) { --particle-x: 92%; --particle-y: 31%; --particle-size: .14vw; --particle-drift: -.42em; --particle-start: 2px; --particle-rise: -12px; --particle-duration: 6s; --particle-delay: -1.1s; }
.featureActivation .featurePowers[data-card-count="2"] .featureActivationParticle:nth-child(3),
.featureActivation .featurePowers[data-card-count="2"] .featureActivationParticle:nth-child(6),
.featureActivation .featurePowers[data-card-count="3"] .featureActivationParticle:nth-child(2),
.featureActivation .featurePowers[data-card-count="3"] .featureActivationParticle:nth-child(4),
.featureActivation .featurePowers[data-card-count="3"] .featureActivationParticle:nth-child(5),
.featureActivation .featurePowers[data-card-count="3"] .featureActivationParticle:nth-child(7) { display: none; }
@keyframes featureActivationParticleFloat {
  0% { opacity: 0; transform: translate3d(0, var(--particle-start), 0) scale(.68); }
  20% { opacity: .38; }
  68% { opacity: .22; }
  100% { opacity: 0; transform: translate3d(var(--particle-drift), var(--particle-rise), 0) scale(1.08); }
}
.featureActivationPower[data-babe="blue"] {
  --power-glow: rgba(95, 225, 255, .56);
  --power-mid: rgba(25, 135, 210, .9);
  --power-deep: rgba(1, 31, 79, .97);
}
.featureActivationPower[data-babe="red"] {
  --power-glow: rgba(255, 113, 72, .58);
  --power-mid: rgba(199, 44, 35, .9);
  --power-deep: rgba(65, 4, 20, .97);
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPower {
  flex: 0 1 54%;
  max-width: 54%;
  grid-template-columns: clamp(92px, 36%, 150px) max-content;
  justify-content: center;
  column-gap: clamp(9px, .85vw, 14px);
  padding: .55em clamp(.7em, 1vw, 1.15em) .52em;
  background:
    radial-gradient(circle at 50% 50%, var(--power-glow), transparent 42%),
    linear-gradient(145deg, var(--power-mid), var(--power-deep) 72%);
}
.featureActivation .featurePowers[data-card-count="2"] .featureActivationPower {
  flex-basis: 44%;
  max-width: 44%;
}
.featureActivationPortrait {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.featureActivationPortrait::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: clamp(2px, .11vw, 3px) solid #ffe491;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, rgba(255,255,225,.5), transparent 24%),
    radial-gradient(circle, var(--power-glow), rgba(0, 22, 22, .82) 72%);
  box-shadow:
    0 0 0 .08em #75400f,
    0 0 0 .14em rgba(255, 232, 145, .7),
    inset 0 0 1em rgba(255,255,210,.36),
    0 0 .8em var(--power-glow);
}
.featureActivationSign {
  position: relative;
  z-index: 2;
  display: block;
  width: 126%;
  height: 112%;
  object-fit: contain;
  transform: translateY(1.5%);
  filter: drop-shadow(0 .16em .22em rgba(0, 0, 0, .55));
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPower[data-babe="green"] .featureActivationSign {
  width: 129%;
  transform: translate(1%, -3%);
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPower[data-babe="blue"] .featureActivationSign {
  width: 126%;
  transform: translate(1.25%, -3%);
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPower[data-babe="red"] .featureActivationSign {
  width: 123%;
  transform: translate(2%, -3%);
}
.featureActivationPowerCopy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  text-align: center;
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPowerCopy {
  justify-self: center;
  text-align: center;
}
.featureActivationPowerTitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .25vw, 5px);
  max-width: 100%;
  white-space: nowrap;
}
.featureActivationPowerIcon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(10px, .82vw, 16px);
  aspect-ratio: 1;
  place-items: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.featureActivationPowerIcon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 .08em .08em rgba(32, 15, 2, .88));
}
.featureActivationPowerIcon--collect {
  color: #b8ff78;
  filter: drop-shadow(0 0 .38em rgba(92, 255, 138, .86));
  animation: featureActivationCollectFlash .92s ease-in-out infinite;
}
.featureActivationPowerIcon--boost {
  color: #91edff;
  filter: drop-shadow(0 0 .42em rgba(61, 207, 255, .9));
  animation: featureActivationBoostRise 1.08s cubic-bezier(.3, 0, .28, 1) infinite;
}
.featureActivationPowerIcon--match {
  color: #fff06a;
  filter: drop-shadow(0 0 .4em rgba(255, 156, 61, .92));
  animation: featureActivationMatchShake .76s ease-in-out infinite;
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPowerIcon {
  width: clamp(13px, 1vw, 19px);
}
@keyframes featureActivationCollectFlash {
  0%, 100% { opacity: .62; transform: scale(.9); }
  48% { opacity: 1; transform: scale(1.08); }
}
@keyframes featureActivationBoostRise {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-.34em); }
  68% { transform: translateY(.08em); }
  84% { transform: translateY(0); }
}
@keyframes featureActivationMatchShake {
  0%, 38%, 100% { transform: translateX(0) rotate(0); }
  10% { transform: translateX(-1px) rotate(-7deg); }
  20% { transform: translateX(1px) rotate(7deg); }
  30% { transform: translateX(-.5px) rotate(-4deg); }
}
.featureActivationPower strong { display: block; }
.featureActivationPower strong {
  color: #fff8d2;
  font-size: clamp(9px, .9vw, 18px);
  line-height: .96;
  letter-spacing: .015em;
  text-shadow: 0 .09em #412006, 0 .14em .2em rgba(0,0,0,.8), 0 0 .55em var(--power-glow);
}
.featureActivationPowerCopy > span {
  position: relative;
  display: inline-block;
  margin-top: .42em;
  padding: .2em .66em .22em;
  border: 1px solid rgba(255, 229, 133, .88);
  border-radius: 999px;
  color: #fff7bd;
  background: linear-gradient(#8f4d12, #442305);
  box-shadow: inset 0 .08em .14em rgba(255,255,210,.35), 0 .14em .2em rgba(0,0,0,.48);
  font-size: clamp(7px, .58vw, 12px);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 .09em #321500;
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPower strong {
  font-size: clamp(12px, 1.14vw, 22px);
}
.featureActivation .featurePowers[data-card-count="1"] .featureActivationPowerCopy > span {
  font-size: clamp(8px, .67vw, 13px);
}
@keyframes featurePanelIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.82); }
}
@keyframes featureBabeIn {
  from { opacity: 0; translate: 0 9%; scale: .88; }
}
@keyframes featureCopyIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
}
.featurePowers { display: flex; justify-content: center; gap: .7em; width: 100%; }
.featurePower {
  padding: .55em .85em;
  border-radius: 999px;
  border: 2px solid #8dffad;
  background: #116944;
  color: white;
  font-size: clamp(9px, 1vw, 18px);
  font-weight: 1000;
  box-shadow: 0 0 15px #72ff9488;
}
.featurePower--blue { border-color: #75dcff; background: #075d9c; box-shadow-color: #66cfff88; }
.featurePower--red { border-color: #ff9292; background: #9b1730; box-shadow-color: #ff5d6988; }
#featureContinue,
.primaryButton {
  padding: .72em 1.55em;
  border: 3px solid #ffe783;
  border-radius: 999px;
  color: white;
  background: linear-gradient(#7bf13f, #159e2d 55%, #08711f);
  box-shadow: inset 0 0 12px #b6ff8a, 0 6px 0 #07541b, 0 10px 22px #0008;
  font-size: clamp(10px, 1.2vw, 22px);
  font-weight: 1000;
  letter-spacing: .04em;
  text-shadow: 0 2px 2px #07561c;
}
#featureContinue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    filter .18s ease,
    text-shadow .18s ease;
}
#featureContinue::after {
  content: "";
  position: absolute;
  inset: -45% -24%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.7) 49%, transparent 60%);
  transform: translateX(-92%);
  transition: transform .42s ease-out, opacity .14s ease;
}
#featureContinue:hover:not(:disabled),
#featureContinue:focus-visible {
  border-color: #fffbd0;
  color: #fffef2;
  background: linear-gradient(#a7ff65, #24c83e 54%, #087d25);
  box-shadow:
    inset 0 0 16px rgba(235,255,191,.88),
    0 6px 0 #07541b,
    0 0 0 3px rgba(117,245,255,.48),
    0 0 30px rgba(102,255,187,.8),
    0 12px 25px #0009;
  filter: saturate(1.12) brightness(1.08);
  text-shadow: 0 2px 2px #07561c, 0 0 12px rgba(255,255,203,.9);
}
#featureContinue:hover:not(:disabled)::after,
#featureContinue:focus-visible::after {
  opacity: .82;
  transform: translateX(92%);
}
#featureContinue:focus-visible {
  outline: 3px solid #c9fbff;
  outline-offset: 4px;
}
#featureContinue:active:not(:disabled) {
  transform: none;
  border-color: #ffe783;
  background: linear-gradient(#45bb31, #0c8524 58%, #055b1a);
  box-shadow:
    inset 0 5px 13px rgba(2,51,17,.72),
    inset 0 0 8px rgba(182,255,138,.58),
    0 6px 0 #07541b,
    0 9px 18px #0009;
  filter: brightness(.96) saturate(1.08);
  text-shadow: 0 2px 2px #033b12;
}
#featureContinue:active:not(:disabled)::after { opacity: 0; }
.primaryButton:active { transform: translateY(4px); box-shadow: inset 0 0 12px #b6ff8a, 0 2px 0 #07541b; }

.bigWinOverlay {
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  cursor: pointer;
}
.bigWinDimmer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(2, 122, 132, .48), rgba(0, 12, 28, .88) 68%),
    rgba(0, 4, 16, .76);
  opacity: 0;
  animation: bigWinDimIn .24s ease-out forwards;
}
.bigWinIntro {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.bigWinIntroWord {
  --word-left: 50%;
  position: absolute;
  left: var(--word-left);
  top: 50%;
  display: block;
  width: min(66%, 112vh);
  aspect-ratio: 2 / 1;
  margin: 0;
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 1.2vh 1vh rgba(38,10,0,.78)) drop-shadow(0 0 2.2vh rgba(255,231,92,.82));
  transform: translate(-50%, -50%) scale(.62);
  transform-origin: center;
  transition: opacity .08s ease-out;
}
.bigWinLetterSprite {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform-origin: center;
}
.bigWinLetterSprite--big { transform: translate(-.244%, -3.613%); }
.bigWinLetterSprite--win { transform: translate(.439%, 7.031%) scale(1.045); }
.bigWinLetterAtlas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.bigWinLetterSprite--win .bigWinLetterAtlas { top: -100%; }
.bigWinOverlay[data-intro-word="big"] .bigWinIntroWord--big,
.bigWinOverlay[data-intro-word="win"] .bigWinIntroWord--win {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.bigWinOverlay[data-intro-strike="big"] .bigWinIntroWord--big,
.bigWinOverlay[data-intro-strike="win"] .bigWinIntroWord--win {
  animation: bigWinWordHit .17s cubic-bezier(.16,1.42,.3,1) both;
}
.bigWinOverlay[data-intro-word="lockup"] .bigWinIntroWord {
  top: 50%;
  width: 34%;
  opacity: 1;
}
.bigWinOverlay[data-intro-word="lockup"] .bigWinIntroWord--big {
  --word-left: 36.5%;
  animation: bigWinLockupBigIn .24s cubic-bezier(.16,1.18,.28,1) both;
}
.bigWinOverlay[data-intro-word="lockup"] .bigWinIntroWord--win {
  --word-left: 63.5%;
  animation: bigWinLockupWinBridge .24s cubic-bezier(.2,.72,.3,1) both;
}
.bigWinOverlay[data-phase="count"] .bigWinIntroWord {
  top: 50%;
  width: 34%;
  opacity: 1;
  animation: bigWinLockupExit .38s cubic-bezier(.28,.04,.46,1) both;
}
.bigWinOverlay[data-phase="count"] .bigWinIntroWord--big { --word-left: 36.5%; }
.bigWinOverlay[data-phase="count"] .bigWinIntroWord--win { --word-left: 63.5%; }
.bigWinLightBlast {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.bigWinLightBlast::before,
.bigWinLightBlast::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 53%;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from -3deg,
    rgba(255,250,196,.92) 0 2.4deg,
    rgba(255,203,62,.42) 2.4deg 4.2deg,
    transparent 4.2deg 15deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 12%, rgba(0,0,0,.18) 16%, #000 28% 100%);
  mask-image: radial-gradient(circle, transparent 0 12%, rgba(0,0,0,.18) 16%, #000 28% 100%);
  opacity: .78;
  filter: blur(.45px) drop-shadow(0 0 1.4em rgba(255,197,44,.72));
  animation: bigWinPrimaryRaySpin 8.4s linear infinite;
}
.bigWinLightBlast::after {
  width: 102%;
  background: repeating-conic-gradient(
    from 7deg,
    rgba(136,244,255,.42) 0 1.5deg,
    rgba(255,255,255,.15) 1.5deg 3.4deg,
    transparent 3.4deg 20deg
  );
  opacity: .24;
  filter: blur(.6px) drop-shadow(0 0 1.2em rgba(132,240,255,.56));
  animation: bigWinSecondaryRaySpin 13.2s linear infinite reverse;
}
.bigWinTreasureBlast {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bigWinTreasureBlast--rear { z-index: 2; }
.bigWinTreasureBlast--near { z-index: 2; }
.bigWinTreasureSprite {
  position: absolute;
  left: 50%;
  top: 59%;
  display: block;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) scale(.12);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.bigWinTreasureBlast--rear .is-coin {
  width: clamp(28px, 3.2vw, 60px);
  aspect-ratio: 6 / 5;
}
.bigWinTreasureBlast--rear .is-diamond {
  width: clamp(22px, 2.55vw, 48px);
  aspect-ratio: 1;
}
.bigWinTreasureBlast--near .is-coin {
  width: clamp(42px, 4.65vw, 88px);
  aspect-ratio: 6 / 5;
}
.bigWinTreasureBlast--near .is-diamond {
  width: clamp(32px, 3.65vw, 68px);
  aspect-ratio: 1;
}
.bigWinTreasureBlast--rear .is-confetti { width: clamp(7px, .62vw, 12px); }
.bigWinTreasureBlast--near .is-confetti { width: clamp(10px, .86vw, 17px); }
.bigWinTreasureSprite.is-coin {
  background: none;
  filter: drop-shadow(0 .16em .16em rgba(22,8,0,.68));
}
.bigWinTreasureSprite.is-coin::before,
.bigWinTreasureSprite.is-coin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bigWinTreasureSprite.is-coin::before {
  background: url("../assets/art/symbols/coin.png") center / contain no-repeat;
  filter: var(--coin-material-filter) drop-shadow(0 0 .42em var(--coin-glow));
}
.bigWinTreasureSprite.is-coin::after {
  content: attr(data-value);
  display: grid;
  place-items: center;
  padding-top: 3%;
  color: var(--coin-label, #fff1a0);
  font: 900 clamp(7px, .58vw, 12px)/1 Impact, Haettenschweiler, sans-serif;
  letter-spacing: -.04em;
  text-shadow: 0 1px 1px #421600, 0 0 .2em #fff1a0;
  transform: translateZ(1px);
}
.bigWinTreasureSprite.is-bronze {
  --coin-material-filter: sepia(.9) saturate(1.05) hue-rotate(338deg) brightness(.74) contrast(1.14);
  --coin-glow: rgba(224,112,43,.72);
  --coin-label: #ffe4ba;
}
.bigWinTreasureSprite.is-silver {
  --coin-material-filter: grayscale(1) saturate(.12) brightness(1.28) contrast(1.08);
  --coin-glow: rgba(218,244,255,.78);
  --coin-label: #172b3c;
}
.bigWinTreasureSprite.is-silver::after {
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 .18em #fff;
}
.bigWinTreasureSprite.is-gold {
  --coin-material-filter: saturate(1.18) brightness(1.08) contrast(1.04);
  --coin-glow: rgba(255,214,50,.86);
}
.bigWinTreasureSprite.is-diamond {
  background-image: url("../assets/art/big-win/diamond-spin.png");
  background-size: 2000% 100%;
  background-position: 0 center;
  filter: drop-shadow(0 .16em .16em rgba(0,22,47,.68)) drop-shadow(0 0 .52em rgba(136,245,255,.82));
}
.bigWinTreasureSprite.is-confetti {
  aspect-ratio: .42;
  border-radius: 34% 8% 34% 8%;
  background:
    linear-gradient(108deg, rgba(255,255,255,.92) 0 10%, transparent 11% 44%, rgba(255,255,255,.34) 45% 57%, transparent 58%),
    var(--confetti-color, #ffcf32);
  box-shadow: 0 .12em .24em rgba(0,0,0,.42);
}
.bigWinClimaxFlash {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 53%;
  width: min(92%, 146vh);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
  background:
    repeating-conic-gradient(from 4deg, rgba(255,255,218,.84) 0 1.2deg, transparent 1.2deg 8deg),
    radial-gradient(circle, rgba(255,255,239,.96) 0 7%, rgba(255,217,63,.68) 17%, rgba(255,128,26,.2) 42%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, #000 0 72%, transparent 82%);
  mask-image: radial-gradient(circle, #000 0 72%, transparent 82%);
  mix-blend-mode: screen;
}
.bigWinPopup {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  width: min(86%, 126vh);
  aspect-ratio: 3 / 2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -45%) scale(.56);
  transform-origin: 50% 55%;
  filter: drop-shadow(0 2.2vh 3.4vh rgba(0,0,0,.66));
}
.bigWinPopupArt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.bigWinPopupLetters {
  position: absolute;
  z-index: 2;
  left: 51.05%;
  top: 44.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1%;
  width: 22%;
  filter: drop-shadow(0 .12em .08em rgba(40,12,0,.74)) drop-shadow(0 0 .3em rgba(255,220,69,.72));
  transform: translate(-50%, -50%);
}
.bigWinPopupLetters > span {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
}
.bigWinPopupLetters > span:first-child { width: 46%; }
.bigWinPopupLetters > span:last-child { width: 51%; }
.bigWinPopup output {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 67%;
  width: 39.5%;
  height: 12.2%;
  transform: translate(-50%, -50%);
}
.bigWinAmountGlyphs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 .12em .08em rgba(0,0,0,.78)) drop-shadow(0 0 .24em #ffd34b);
}
.bigWinGlyph {
  position: relative;
  flex: 0 1 auto;
  height: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.bigWinGlyph > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200%;
  height: 100%;
  max-width: none;
  transform: translateX(calc(var(--glyph-index) * -8.3333333333%));
}
.bigWinGlyph--punctuation {
  margin-inline: -.11em;
  scale: .76;
}
.bigWinOverlay[data-phase="count"] .bigWinPopup,
.bigWinOverlay[data-phase="hold"] .bigWinPopup,
.bigWinOverlay[data-phase="final"] .bigWinPopup {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .32s ease-out, transform .5s cubic-bezier(.13,1.35,.24,1);
}
.bigWinOverlay[data-phase="count"] .bigWinLightBlast,
.bigWinOverlay[data-phase="hold"] .bigWinLightBlast,
.bigWinOverlay[data-phase="final"] .bigWinLightBlast {
  opacity: 1;
  animation: bigWinRaysIn .36s ease-out both;
}
.bigWinTreasureSprite[data-active="true"] {
  animation: bigWinTreasureStream var(--stream-duration) cubic-bezier(.08,.6,.2,1) var(--stream-delay) infinite;
}
.bigWinTreasureSprite.is-diamond[data-active="true"] {
  animation:
    bigWinTreasureStream var(--stream-duration) cubic-bezier(.08,.6,.2,1) var(--stream-delay) infinite,
    bigWinDiamondSpinStream 620ms steps(19,end) var(--stream-delay) infinite;
}
.bigWinOverlay[data-celebration-stage="final"] .bigWinTreasureSprite {
  animation: bigWinTreasureFinal var(--final-duration) linear var(--final-delay) both;
}
.bigWinOverlay[data-celebration-stage="final"] .bigWinTreasureSprite.is-diamond {
  animation:
    bigWinTreasureFinal var(--final-duration) cubic-bezier(.05,.64,.2,1) var(--final-delay) both,
    bigWinDiamondSpinFinal 360ms steps(19,end) var(--final-delay) 3 both;
}
.bigWinOverlay[data-celebration-stage="final"] .bigWinClimaxFlash {
  animation: bigWinClimaxBurst .72s cubic-bezier(.08,.7,.2,1) both;
}
.gameShell.is-turbo .bigWinOverlay[data-celebration-stage="final"] .bigWinTreasureSprite:not([data-turbo="true"]) {
  animation: none;
  opacity: 0;
}
.gameShell.is-turbo .bigWinOverlay[data-celebration-stage="final"] .bigWinTreasureSprite[data-turbo="true"] {
  animation: bigWinTreasureTurbo 680ms cubic-bezier(.05,.64,.2,1) var(--final-delay) both;
}
.gameShell.is-turbo .bigWinOverlay[data-celebration-stage="final"] .bigWinTreasureSprite.is-diamond[data-turbo="true"] {
  animation:
    bigWinTreasureTurbo 680ms cubic-bezier(.05,.64,.2,1) var(--final-delay) both,
    bigWinDiamondSpinTurbo 300ms steps(19,end) var(--final-delay) 2 both;
}
.bigWinOverlay[data-beat-parity="0"] .bigWinPopup { animation: bigWinBeatA .22s ease-out; }
.bigWinOverlay[data-beat-parity="1"] .bigWinPopup { animation: bigWinBeatB .22s ease-out; }
.bigWinOverlay[data-phase="final"] .bigWinPopup { animation: bigWinFinalImpact .78s cubic-bezier(.16,1.35,.3,1) both; }
.bigWinOverlay[data-phase="final"] .bigWinLightBlast { animation: bigWinFinalLight .78s ease-out both; }
@keyframes bigWinDimIn { to { opacity: 1; } }
@keyframes bigWinWordHit {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.56) rotate(-6deg); filter: brightness(2.2) drop-shadow(0 0 .35em #fff7b2); }
  58% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(1deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes bigWinLockupBigIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.78); filter: brightness(2.1); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bigWinLockupWinBridge {
  0% { left: 50%; width: 66%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { left: 63.5%; width: 34%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bigWinLockupExit {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -138%) scale(.76); filter: brightness(1.65); }
}
@keyframes bigWinRaysIn { from { opacity: 0; transform: scale(.72); } }
@keyframes bigWinPrimaryRaySpin { to { transform: rotate(360deg); } }
@keyframes bigWinSecondaryRaySpin { to { transform: rotate(360deg); } }
@keyframes bigWinDiamondSpinStream { to { background-position: 100% center; } }
@keyframes bigWinDiamondSpinFinal { to { background-position: 100% center; } }
@keyframes bigWinDiamondSpinTurbo { to { background-position: 100% center; } }
@keyframes bigWinTreasureStream {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) rotate(0) rotateY(0) scale(.12); }
  9% { opacity: 1; }
  46% { opacity: 1; transform: translate(-50%, -50%) translate(var(--control-x), var(--control-y)) rotate(var(--control-spin)) rotateY(var(--control-flip)) scale(var(--burst-size)); }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--end-x), var(--end-y)) rotate(var(--burst-spin)) rotateY(var(--burst-flip)) scale(var(--burst-size)); }
}
@keyframes bigWinTreasureFinal {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) rotate(0) rotateY(0) scale(.16); animation-timing-function: cubic-bezier(.06,.72,.2,1); }
  7% { opacity: 1; }
  40% { opacity: 1; transform: translate(-50%, -50%) translate(var(--control-x), var(--control-y)) rotate(var(--control-spin)) rotateY(var(--control-flip)) scale(var(--impact-size)); animation-timing-function: cubic-bezier(.3,0,.82,.42); }
  93% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--final-end-x), var(--final-end-y)) rotate(var(--burst-spin)) rotateY(var(--burst-flip)) scale(var(--final-size)); }
}
@keyframes bigWinTreasureTurbo {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--start-x), var(--start-y)) rotate(0) rotateY(0) scale(.18); }
  10% { opacity: 1; }
  40% { opacity: 1; transform: translate(-50%, -50%) translate(var(--control-x), var(--control-y)) rotate(var(--control-spin)) rotateY(var(--control-flip)) scale(var(--impact-size)); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--end-x), var(--end-y)) rotate(var(--burst-spin)) rotateY(var(--burst-flip)) scale(var(--final-size)); }
}
@keyframes bigWinClimaxBurst {
  0% { opacity: 0; scale: .28; filter: brightness(2.4); }
  12% { opacity: 1; }
  58% { opacity: .76; }
  100% { opacity: 0; scale: 1.12; filter: brightness(1); }
}
@keyframes bigWinBeatA { 50% { transform: translate(-50%, -50%) scale(1.018); filter: brightness(1.12) drop-shadow(0 2.2vh 3.4vh rgba(0,0,0,.66)); } }
@keyframes bigWinBeatB { 50% { transform: translate(-50%, -50%) scale(1.018); filter: brightness(1.12) drop-shadow(0 2.2vh 3.4vh rgba(0,0,0,.66)); } }
@keyframes bigWinFinalImpact {
  0% { transform: translate(-50%, -50%) scale(.96); filter: brightness(2.1) drop-shadow(0 0 3vw #fff4a4); }
  48% { transform: translate(-50%, -50%) scale(1.055); filter: brightness(1.35) drop-shadow(0 0 2vw #ffce32); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes bigWinFinalLight {
  0% { opacity: 1; transform: scale(.96); filter: brightness(2.2); }
  48% { opacity: 1; transform: scale(1.055); filter: brightness(1.4); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.gameShell.is-document-hidden .bigWinOverlay *,
.gameShell.is-document-hidden .bigWinOverlay *::before,
.gameShell.is-document-hidden .bigWinOverlay *::after {
  animation-play-state: paused !important;
}
body.reduceMotion .bigWinIntro,
body.reduceMotion .bigWinIntroWord,
body.reduceMotion .bigWinPopup,
body.reduceMotion .bigWinLightBlast,
body.reduceMotion .bigWinLightBlast::before,
body.reduceMotion .bigWinLightBlast::after,
body.reduceMotion .bigWinClimaxFlash,
body.reduceMotion .bigWinTreasureSprite {
  animation: none !important;
  transition: none !important;
}
body.reduceMotion .bigWinOverlay[data-phase="final"] .bigWinPopup,
body.reduceMotion .bigWinOverlay[data-phase="final"] .bigWinLightBlast {
  opacity: 1;
}
body.reduceMotion .bigWinTreasureSprite { opacity: 0; }
body.reduceMotion .bigWinTreasureBlast--rear .bigWinTreasureSprite[data-reduced="true"] {
  opacity: .48;
  transform: translate(-50%, -50%) translate(var(--rest-x), var(--rest-y)) scale(var(--burst-size));
}
body.reduceMotion .bigWinTreasureBlast--near,
body.reduceMotion .bigWinClimaxFlash { display: none; }

.loadingScreen {
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(4,76,102,.52), rgba(1,36,54,.82)),
    url("../assets/art/cabana-base.png") center / cover no-repeat;
  transition: opacity .5s ease, visibility .5s ease;
}
.loadingScreen.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.loadingCard {
  position: relative;
  width: 36%;
  min-height: 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4%;
  border: .45vw solid #9e551d;
  border-radius: 3vw;
  background: linear-gradient(145deg, rgba(4,105,133,.96), rgba(1,47,68,.98));
  box-shadow: 0 0 0 .28vw #ffd269, 0 2vw 6vw #00121dcc, inset 0 0 3vw #2cf2e333;
}
.loadingSun { width: 5.3vw; aspect-ratio: 1; border-radius: 50%; background: #ffd84d; box-shadow: 0 0 2vw #ffdc5d; }
.loadingSun i { display: block; width: 100%; height: 100%; border-radius: inherit; background: repeating-conic-gradient(#fff0 0 12deg, #fff5 13deg 17deg, #fff0 18deg 30deg); animation: slowSpin 4s linear infinite; }
.loadingLogo { margin-top: .55em; display: flex; flex-direction: column; align-items: center; font-style: italic; line-height: .8; transform: rotate(-2deg); }
.loadingLogo span { color: #55eced; font-size: clamp(22px, 3vw, 55px); font-weight: 1000; text-shadow: 0 .08em #07526d, 0 .13em #01283c; }
.loadingLogo strong { color: #ff765d; font-size: clamp(28px, 4.1vw, 74px); text-shadow: 0 .07em #9b261f, 0 .12em #3a0b0c; }
.loadingCard p { margin: 1.4em 0 .7em; color: #fff1ae; font-size: clamp(8px, .8vw, 15px); font-weight: 900; letter-spacing: .13em; }
.loadingTrack { width: 88%; height: clamp(8px, .9vw, 16px); padding: 2px; border: 2px solid #e5bc5d; border-radius: 999px; background: #011d2a; overflow: hidden; }
.loadingTrack span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #26c99c, #84f33e, #fff45e); box-shadow: 0 0 12px #72f3b3; transition: width .2s ease; }
.loadingPercent { margin-top: .45em; font-size: clamp(9px, .8vw, 15px); font-weight: 900; }
.loadingScreen.is-error .loadingCard p { color: #ffd6c9; }
.loadingScreen.is-error .loadingTrack span { background: linear-gradient(90deg, #ffb14e, #ff5252); }

.orientationHint { z-index: 120; display: none; place-items: center; align-content: center; gap: 1em; background: #042f46f2; text-align: center; }
.orientationHint div { font-size: 15vw; line-height: .7; color: #62e7e8; animation: orientRock 1.3s ease-in-out infinite alternate; }
.orientationHint strong { font-size: 5vw; color: #ffe27d; }
.orientationHint span { font-size: 3vw; }
@keyframes orientRock { to { transform: rotate(90deg); } }

.devButton {
  position: absolute;
  z-index: 70;
  right: 1%;
  top: 1%;
  padding: .32em .5em;
  border: 1px solid #79e9ff;
  border-radius: .45em;
  color: #bff6ff;
  background: #002a3bcf;
  font-size: clamp(7px, .65vw, 12px);
  font-weight: 900;
}
.devPanel {
  position: absolute;
  z-index: 69;
  right: 1%;
  top: 5.7%;
  width: 11%;
  padding: .65%;
  border: 1px solid #4ed9ee;
  border-radius: .55vw;
  background: rgba(0,33,49,.94);
  box-shadow: 0 5px 20px #000b;
}
.devPanel strong { display: block; margin-bottom: .4em; font-size: clamp(6px,.58vw,11px); color: #78e8f6; }
.devPanel button { width: 100%; margin: .14em 0; padding: .25em; border: 1px solid #217d91; border-radius: .3em; background: #064357; font-size: clamp(6px,.58vw,11px); }

.gameDialog {
  width: min(780px, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  overflow: visible;
  color: var(--cream);
  background: transparent;
}
.gameDialog--wide { width: min(1120px, 94vw); }
.gameDialog::backdrop { background: rgba(0,13,25,.78); backdrop-filter: blur(5px); }
.dialogFrame {
  position: relative;
  max-height: 90vh;
  overflow: auto;
  padding: clamp(24px, 4vw, 48px);
  border: 8px solid #874315;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 50% 0, #08738e, #03394f 52%, #022638);
  box-shadow: 0 0 0 4px #f3bd4b, 0 22px 80px #000e, inset 0 0 45px #001722;
}
.dialogFrame::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 2px solid rgba(255,213,101,.46);
  border-radius: 17px;
  pointer-events: none;
}
.dialogClose {
  position: absolute;
  z-index: 2;
  right: 17px;
  top: 15px;
  width: 42px;
  height: 42px;
  border: 2px solid #ffd569;
  border-radius: 50%;
  color: white;
  background: #b6203f;
  box-shadow: 0 3px 0 #651128;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.dialogFrame header { text-align: center; }
.dialogFrame header small { color: #6be8f0; font-weight: 900; letter-spacing: .22em; }
.dialogFrame header h2 { margin: .2em 0 .75em; color: #ffe07a; font-size: clamp(28px, 4vw, 48px); line-height: 1; text-shadow: 0 3px #8a2f20, 0 6px 9px #0008; }

.menuGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.menuTile {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #dcae55;
  border-radius: 16px;
  color: #fff1bd;
  background: linear-gradient(#09677c, #034055);
  box-shadow: inset 0 0 16px #16cee22e, 0 5px 10px #001923;
  font-weight: 900;
}
.menuTile:hover { filter: brightness(1.15); border-color: #fff09a; }
.menuTile i { font-size: 34px; font-style: normal; color: #7df1f0; }
.menuTile.is-on { background: linear-gradient(#148a68, #07553b); border-color: #8cffaa; }
.volumeControls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 22px; }
.volumeControls label { display: grid; gap: 5px; font-size: 12px; font-weight: 900; color: #8aebf0; }
input[type="range"] { width: 100%; accent-color: #75e83f; }
.practiceNote { margin: 22px 0 0; color: #9ccbd0; font-size: 11px; text-align: center; letter-spacing: .08em; }

.dialogFrame fieldset { padding: 0; border: 0; }
.dialogFrame legend { width: 100%; margin-bottom: 12px; color: #79e3ec; font-size: 12px; font-weight: 900; text-align: center; letter-spacing: .14em; }
.autoChoices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.autoChoices input { position: absolute; opacity: 0; }
.autoChoices span { display: grid; place-items: center; min-height: 72px; border: 2px solid #bd914b; border-radius: 14px; background: #063f55; font-size: 25px; font-weight: 1000; }
.autoChoices input:checked + span { border-color: #ffec81; color: #fff391; background: #08718a; box-shadow: 0 0 17px #50dddf88; }
.autoRules { display: grid; gap: 12px; margin: 22px 0; }
.autoRules label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,25,38,.45); }
.autoRules input[type="checkbox"] { width: 20px; height: 20px; accent-color: #62de3f; }
.autoRules input[type="number"] { width: 90px; margin-left: auto; padding: 7px; border: 1px solid #64cdda; border-radius: 7px; color: white; background: #021f2d; }
.dialogFrame--auto .primaryButton { display: block; margin: auto; border-width: 2px; }

.paytableTabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.paytableTabs button {
  padding: 7px 11px;
  border: 1px solid #3bb7c6;
  border-radius: 999px;
  color: #b5edf1;
  background: #032d40;
  font-size: 11px;
  font-weight: 900;
}
.paytableTabs button[aria-selected="true"] { color: #073a47; background: #ffe07b; border-color: white; }
.paytableContent { min-height: 390px; padding: 18px; border: 2px solid #835521; border-radius: 18px; background: linear-gradient(#fff8dc, #f2dfb3); color: #153841; box-shadow: inset 0 0 28px #b1793540; }
.paytablePage h3 { margin: 0 0 12px; color: #a13c24; font-size: 25px; text-align: center; }
.paytablePage p { line-height: 1.45; }
.paytableFeatureSymbol {
  width: 92px;
  height: 92px;
  float: left;
  margin: 0 14px 8px 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px #4d260766);
}
.paytableGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.paytableSymbol { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 9px; min-height: 82px; padding: 6px; border: 1px solid #c69f5c; border-radius: 12px; background: #fffbed; }
.symbolIcon { width: 74px; height: 62px; background-image: url("../assets/art/symbols-atlas.png"); background-size: 370px 185px; background-repeat: no-repeat; }
.symbolIcon--j { background-position: 0 0; }
.symbolIcon--q { background-position: -74px 0; }
.symbolIcon--k { background-position: -148px 0; }
.symbolIcon--a { background-position: -222px 0; }
.symbolIcon--wild { background-position: -296px 0; }
.symbolIcon--palm { background-position: 0 -62px; }
.symbolIcon--surf { background-position: -74px -62px; }
.symbolIcon--flower { background-position: -148px -62px; }
.symbolIcon--ball { background-position: -222px -62px; }
.symbolIcon--coin { background-position: -296px -62px; }
.paytableSymbol strong { color: #8b321e; }
.paytableSymbol table { width: 100%; border-collapse: collapse; font-size: 12px; }
.paytableSymbol th, .paytableSymbol td { text-align: right; padding: 2px 3px; }
.featureRules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.ruleCard { padding: 15px; border: 2px solid #76bd75; border-radius: 14px; background: #effce9; }
.ruleCard--blue { border-color: #6ab6db; background: #eaf8ff; }
.ruleCard--red { border-color: #e38888; background: #fff0ed; }
.ruleCard h4 { margin: 0 0 7px; color: #8b321e; font-size: 18px; }
.coinValues { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.coinValues span { padding: 7px 10px; border: 2px solid #d59322; border-radius: 50%; color: #743413; background: #ffd752; font-weight: 900; }
.paytablePager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; }
.paytablePager button { width: 38px; height: 38px; border: 2px solid #ffd368; border-radius: 50%; color: white; background: #08718a; font-size: 28px; line-height: .7; }

.helpColumns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.helpColumns div { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: rgba(0,25,38,.42); }
kbd { min-width: 72px; padding: 7px; border: 1px solid #d6b15e; border-bottom-width: 4px; border-radius: 8px; color: #082f3d; background: #fff0bc; text-align: center; font-weight: 900; }
.dialogFrame--help p { line-height: 1.5; text-align: center; }

[hidden] { display: none !important; }
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px) {
  .dialogFrame { padding: 28px 22px; border-width: 5px; border-radius: 18px; }
  .menuGrid { grid-template-columns: repeat(2,1fr); }
  .menuTile { min-height: 82px; }
  .volumeControls { grid-template-columns: 1fr; }
  .paytableContent { min-height: 330px; }
  .paytableGrid { grid-template-columns: repeat(2,1fr); }
  .featureRules { grid-template-columns: 1fr; }
  .featureActivation .featurePowers[data-card-count="1"] .featureActivationPower {
    flex-basis: 64%;
    max-width: 64%;
    grid-template-columns: minmax(54px, 34%) minmax(0, 1fr);
    column-gap: clamp(5px, 1.4vw, 10px);
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .orientationHint { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .titleSignRig, .titleSignTextShine::after { animation: none !important; transform: none !important; }
  .titleSign { animation: none !important; transform: none !important; }
  .titleSignTextShine { display: none !important; }
  #featureContinue,
  #featureContinue::after { transition: none !important; }
  #featureContinue::after { display: none; }
  .bigWinIntro,
  .bigWinIntroWord,
  .bigWinPopup,
  .bigWinLightBlast,
  .bigWinLightBlast::before,
  .bigWinLightBlast::after,
  .bigWinClimaxFlash,
  .bigWinTreasureSprite {
    animation: none !important;
    transition: none !important;
  }
  .bigWinOverlay[data-phase="final"] .bigWinPopup,
  .bigWinOverlay[data-phase="final"] .bigWinLightBlast { opacity: 1; }
  .bigWinTreasureSprite { opacity: 0; }
  .bigWinTreasureBlast--rear .bigWinTreasureSprite[data-reduced="true"] {
    opacity: .48;
    transform: translate(-50%, -50%) translate(var(--rest-x), var(--rest-y)) scale(var(--burst-size));
  }
  .bigWinTreasureBlast--near,
  .bigWinClimaxFlash { display: none; }
}

body.reduceMotion *,
body.reduceMotion *::before,
body.reduceMotion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
body.reduceMotion .titleSignRig,
body.reduceMotion .titleSignTextShine::after { animation: none !important; transform: none !important; }
body.reduceMotion .titleSign { animation: none !important; transform: none !important; }
body.reduceMotion .titleSignTextShine { display: none !important; }
body.reduceMotion #featureContinue,
body.reduceMotion #featureContinue::after { transition: none !important; }
body.reduceMotion #featureContinue::after { display: none; }
.gameShell.is-document-hidden .featureActivationParticle,
.gameShell.is-document-hidden .featureActivationPowerIcon { animation-play-state: paused !important; }
body.reduceMotion .featureActivationParticle {
  animation: none !important;
  display: none !important;
  opacity: 0;
  transform: none !important;
  will-change: auto;
}
body.reduceMotion .featureActivationParticle:nth-child(1),
body.reduceMotion .featureActivationParticle:nth-child(3),
body.reduceMotion .featureActivationParticle:nth-child(6),
body.reduceMotion .featureActivationParticle:nth-child(8) {
  display: block !important;
  opacity: .22;
}
body.reduceMotion .featureActivationPowerIcon {
  animation: none !important;
  opacity: .9;
  transform: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .featureActivationParticle {
    animation: none !important;
    display: none !important;
    opacity: 0;
    transform: none !important;
    will-change: auto;
  }
  .featureActivationParticle:nth-child(1),
  .featureActivationParticle:nth-child(3),
  .featureActivationParticle:nth-child(6),
  .featureActivationParticle:nth-child(8) {
    display: block !important;
    opacity: .22;
  }
  .featureActivationPowerIcon {
    animation: none !important;
    opacity: .9;
    transform: none !important;
    will-change: auto;
  }
}

/* Reduced motion substitutes one short, low-opacity camera glint for the nine
   moving flashes; keep that intentional accessibility cue from being reduced
   to an invisible single frame by the global motion override. */
@media (prefers-reduced-motion: reduce) {
  .bonusTransition.is-reduced .bonusTransitionFlashBurst:last-child {
    animation-duration: 90ms !important;
    animation-delay: 40ms !important;
  }
}
body.reduceMotion .bonusTransition.is-reduced .bonusTransitionFlashBurst:last-child {
  animation-duration: 90ms !important;
  animation-delay: 40ms !important;
}

/* Wheel, five instant-Collect Free Spins, and deterministic Shell Pick. */
.wheelFeature {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: clip;
  pointer-events: none;
  --wheel-rest-angle: 0deg;
  --wheel-spin-angle: var(--wheel-rest-angle);
}
.wheelFeature.is-active[data-state^="free-spins"] {
  visibility: hidden;
  pointer-events: none;
}
.wheelFeature[hidden] { display: none; }
.wheelFeature[data-state="hidden"] { visibility: hidden; }
.gameShell.is-bonus .wheelFeature[data-state="idle"] { visibility: hidden; }
.wheelFeature.is-active { z-index: 32; pointer-events: auto; }
/* During the spoken activation the parked Wheel remains in its original z2
   relationship beneath the z3 reel frame. The door portal is a direct shell
   sibling at z75; only after it fully covers the cabinet does the Wheel move
   into its expanded z32 stacking context. */
.wheelFeature[data-state="wheel-entry-arming"],
.wheelFeature[data-state="wheel-entry-closing"] { z-index: 2; pointer-events: none; }
.wheelFeature[data-state="wheel-entry-covered"],
.wheelFeature[data-state="wheel-entry-opening"] { z-index: 32; }
.wheelFeatureDimmer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(3,34,48,.18), rgba(0,7,16,.9) 78%), rgba(0,4,12,.68);
  backdrop-filter: blur(0);
  transition: opacity .7s ease, backdrop-filter .7s ease;
}
.wheelFeature.is-active .wheelFeatureDimmer { opacity: 1; backdrop-filter: blur(2px) saturate(.65); }
.wheelEntryDoors {
  position: absolute;
  z-index: 75;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.wheelEntryDoors[hidden] { display: none; }
.wheelEntryDoor {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  transform: translate3d(var(--wheel-door-x),0,0);
  will-change: transform;
}
.wheelEntryDoor--left {
  left: 0;
  transform-origin: 0 50%;
}
.wheelEntryDoor--right {
  right: 0;
  transform-origin: 100% 50%;
}
.wheelEntryDoor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.wheelEntryDoors.is-slammed .wheelEntryDoor { animation: wheelEntryDoorImpact .28s ease-out both; }
@keyframes wheelEntryDoorImpact {
  0% { transform: translate3d(var(--wheel-door-x),0,0) scaleX(1); filter: brightness(1); }
  18% { transform: translate3d(var(--wheel-door-x),0,0) scaleX(1.006); filter: brightness(1.24); }
  38% { transform: translate3d(var(--wheel-door-x),0,0) scaleX(1.002); }
  62% { transform: translate3d(var(--wheel-door-x),0,0) scaleX(1.004); }
  100% { transform: translate3d(var(--wheel-door-x),0,0) scaleX(1); filter: brightness(1); }
}
.wheelEntryDoorFx {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.wheelEntryDoorSmoke,
.wheelEntryDoorSpark {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.wheelEntryDoorSmoke {
  left: -4.5vw;
  top: -4.5vw;
  width: 9vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,251,222,.72), rgba(188,219,217,.36) 38%, rgba(35,72,77,.08) 68%, transparent 74%);
  filter: blur(.4vw);
  mix-blend-mode: screen;
}
.wheelEntryDoorSpark {
  left: -.1vw;
  top: -.1vw;
  width: clamp(2px,.17vw,4px);
  height: clamp(10px,1.25vw,24px);
  border-radius: 99px;
  background: linear-gradient(#fff, #ffe16b 42%, #ff8a1d 72%, transparent);
  box-shadow: 0 0 .5vw #fff5a0;
  transform-origin: 50% 0;
}
.wheelEntryDoorFx.is-active .wheelEntryDoorSmoke {
  animation: wheelEntryDoorSmoke .78s var(--door-fx-delay) ease-out both;
}
.wheelEntryDoorFx.is-active .wheelEntryDoorSpark {
  animation: wheelEntryDoorSpark .46s var(--door-fx-delay) cubic-bezier(.17,.72,.3,1) both;
}
@keyframes wheelEntryDoorSmoke {
  0% { opacity: .68; transform: translate(0,0) scale(.18); }
  38% { opacity: .48; }
  100% { opacity: 0; transform: translate(var(--door-fx-x),var(--door-fx-y)) scale(1.45); }
}
@keyframes wheelEntryDoorSpark {
  0% { opacity: 1; transform: rotate(var(--door-fx-angle)) translateY(0) scaleY(.4); }
  58% { opacity: .92; }
  100% { opacity: 0; transform: rotate(var(--door-fx-angle)) translateY(calc(var(--door-fx-distance) * -1)) scaleY(.12); }
}
.wheelStage {
  position: absolute;
  z-index: 2;
  isolation: isolate;
  left: 8.7%;
  top: 29%;
  width: 29.25%;
  aspect-ratio: 1;
  clip-path: inset(0 50% 0 0);
  transform: translate3d(0,0,0);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1.2vw 1.3vw rgba(0,8,16,.56));
  transition: left .98s cubic-bezier(.18,.86,.23,1), top .98s cubic-bezier(.18,.86,.23,1), width .98s cubic-bezier(.18,.86,.23,1), clip-path .98s cubic-bezier(.18,.86,.23,1), filter .6s ease;
}
.wheelStage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -75%;
  top: -75%;
  width: 250%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,249,181,.34) 0 43%, rgba(83,228,255,.3) 50%, rgba(28,143,255,.12) 72%, rgba(28,143,255,.05) 100%),
    repeating-conic-gradient(from -7deg, rgba(255,246,157,.38) 0 2.6deg, rgba(77,222,255,.16) 2.6deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 42% 100%);
  mask: radial-gradient(circle, transparent 0 36%, #000 42% 100%);
  mix-blend-mode: screen;
  transform: scale(.78);
  transform-origin: 50% 50%;
  rotate: 0turn;
  will-change: transform, rotate, filter, opacity;
  transition: opacity .5s ease, transform .78s cubic-bezier(.18,.86,.23,1);
}
.wheelFeature[data-state="wheel-entry-covered"] .wheelStage::before,
.wheelFeature[data-state="wheel-entry-opening"] .wheelStage::before,
.wheelFeature[data-state="wheel-opening"] .wheelStage::before,
.wheelFeature[data-state="wheel-ready"] .wheelStage::before,
.wheelFeature[data-state="wheel-spinning"] .wheelStage::before,
.wheelFeature[data-state="wheel-resolve"] .wheelStage::before,
.wheelFeature[data-state="wheel-feature-closing"] .wheelStage::before {
  opacity: .192;
  transform: scale(1);
  animation: wheelStageCircleLightTurn 48s linear infinite, wheelStageCircleLightBreath 6s ease-in-out infinite alternate;
}
@keyframes wheelStageCircleLightTurn {
  from { rotate: 0turn; }
  to { rotate: 1turn; }
}
@keyframes wheelStageCircleLightBreath {
  from { filter: brightness(.9) saturate(.96); }
  to { filter: brightness(1.14) saturate(1.08); }
}
.wheelFeature.is-active .wheelStage {
  left: 50%;
  top: 11%;
  width: min(65.2%, 86vh);
  clip-path: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 2vw 2.8vw rgba(0,0,0,.88)) drop-shadow(0 0 1.8vw rgba(34,223,255,.35));
}
.wheelFeature[data-state="wheel-entry-arming"] .wheelFeatureDimmer,
.wheelFeature[data-state="wheel-entry-closing"] .wheelFeatureDimmer,
.wheelFeature[data-state="wheel-entry-covered"] .wheelFeatureDimmer {
  opacity: 0;
  backdrop-filter: none;
  transition: none;
}
.wheelFeature[data-state="wheel-entry-covered"] .wheelStage {
  opacity: 1;
  transition: none;
}
.wheelFeature.is-active[data-state="wheel-entry-arming"] .wheelStage,
.wheelFeature.is-active[data-state="wheel-entry-closing"] .wheelStage {
  left: 8.7%;
  top: 29%;
  width: 29.25%;
  clip-path: inset(0 50% 0 0);
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: drop-shadow(0 1.2vw 1.3vw rgba(0,8,16,.56));
  transition: none;
  pointer-events: none;
}
.wheelFeature[data-state="wheel-entry-opening"] .wheelStage,
.wheelFeature[data-state="wheel-entry-opening"] .wheelFeatureDimmer {
  opacity: 1;
  transition: none;
}
.wheelFeature.is-returning .wheelStage {
  left: 8.7%;
  top: 29%;
  width: 29.25%;
  clip-path: inset(0 50% 0 0);
  transform: translateX(0);
  filter: drop-shadow(0 1.2vw 1.3vw rgba(0,8,16,.56));
}
.wheelFeature[data-state^="free-spins"] .wheelStage { opacity: 0; pointer-events: none; }
/* Shell Pick owns an opaque full-artboard background. Remove the invisible
   filtered Wheel and backdrop from the compositor instead of continuing to
   animate/rasterize them underneath every shuffle and choice hold. */
.wheelFeature[data-state^="shell-"] .wheelStage,
.wheelFeature[data-state^="shell-"] .wheelFeatureDimmer { display: none; pointer-events: none; }
.wheelDisk {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: rotate(var(--wheel-spin-angle));
  transform-origin: 50% 50%;
  will-change: transform;
  isolation: isolate;
}
.wheelDiskArt {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.wheelDiskArt--side { opacity: 0; }
/* The parked half-wheel has its own authored hub plate. Dismissal enters the
   idle state before the stage travels home, so the return already carries the
   complete side-wheel artwork instead of exposing the interactive aperture. */
.wheelFeature[data-state="idle"] .wheelDiskArt--main { opacity: 0; }
.wheelFeature[data-state="idle"] .wheelDiskArt--side { opacity: 1; }
.wheelFeature[data-state="wheel-entry-arming"] .wheelDiskArt--main,
.wheelFeature[data-state="wheel-entry-closing"] .wheelDiskArt--main { opacity: 0; }
.wheelFeature[data-state="wheel-entry-arming"] .wheelDiskArt--side,
.wheelFeature[data-state="wheel-entry-closing"] .wheelDiskArt--side { opacity: 1; }
.wheelPrizeLayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wheelPrize {
  --prize-index: 0;
  --prize-angle: calc(var(--prize-index) * 40deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 20.25%;
  transform-origin: 50% 50%;
  transform: translate(-50%,-50%) rotate(var(--prize-angle)) translateY(-168.8889%);
  filter: drop-shadow(0 .16vw .1vw rgba(25,7,1,.7)) drop-shadow(0 0 .34vw rgba(255,214,94,.34));
}
.wheelPrize[data-wheel-prize-index="0"] { --prize-index: 0; --segment-color: #238b45; }
.wheelPrize[data-wheel-prize-index="1"] { --prize-index: 1; --segment-color: #1769c6; }
.wheelPrize[data-wheel-prize-index="2"] { --prize-index: 2; --segment-color: #7a39b8; }
.wheelPrize[data-wheel-prize-index="3"] { --prize-index: 3; --segment-color: #ca3039; }
.wheelPrize[data-wheel-prize-index="4"] { --prize-index: 4; --segment-color: #b72f86; }
.wheelPrize[data-wheel-prize-index="5"] { --prize-index: 5; --segment-color: #9a5b33; }
.wheelPrize[data-wheel-prize-index="6"] { --prize-index: 6; --segment-color: #8a9f27; }
.wheelPrize[data-wheel-prize-index="7"] { --prize-index: 7; --segment-color: #079a96; }
.wheelPrize[data-wheel-prize-index="8"] { --prize-index: 8; --segment-color: #e36732; }
.wheelPrizeArt {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.wheelPrize.is-winner { animation: wheelPrizeWinnerFlash .36s ease-in-out 3 both; }
.wheelPrize.is-winner-alt { animation: wheelPrizeWinnerFlashAlt .36s ease-in-out 3 both; }
@keyframes wheelPrizeWinnerFlash { 0%,100% { filter: brightness(1.05) drop-shadow(0 0 .3vw var(--segment-color)); } 50% { filter: brightness(2.25) drop-shadow(0 0 1.3vw var(--segment-color)); transform: translate(-50%,-50%) rotate(var(--prize-angle)) translateY(-168.8889%) scale(1.08); } }
@keyframes wheelPrizeWinnerFlashAlt { 0%,100% { filter: brightness(1.05) drop-shadow(0 0 .3vw var(--segment-color)); } 50% { filter: brightness(2.25) drop-shadow(0 0 1.3vw var(--segment-color)); transform: translate(-50%,-50%) rotate(var(--prize-angle)) translateY(-168.8889%) scale(1.08); } }
.wheelFeature[data-state="idle"] .wheelDisk { animation: wheelIdleTurn 48s linear infinite; }
.wheelFeature[data-state="wheel-entry-arming"] .wheelDisk,
.wheelFeature[data-state="wheel-entry-closing"] .wheelDisk { animation: wheelIdleTurn 48s linear infinite; }
@keyframes wheelIdleTurn {
  from { transform: rotate(var(--wheel-rest-angle)); }
  to { transform: rotate(calc(var(--wheel-rest-angle) + 360deg)); }
}
.wheelStopper {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: -4.9%;
  width: 14%;
  height: 9.34%;
  overflow: visible;
  transform: translateX(-50%);
  transform-origin: 50% 21.1%;
  filter: drop-shadow(0 .42vw .35vw rgba(0,0,0,.72));
}
.wheelStopper img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wheelFeature[data-state="idle"] .wheelStopper { visibility: hidden; }
.wheelFeature[data-state="wheel-entry-arming"] .wheelStopper,
.wheelFeature[data-state="wheel-entry-closing"] .wheelStopper { visibility: hidden; }
.wheelFeature.is-returning .wheelStopper { visibility: hidden; }
.wheelStopper.is-ticking { animation: wheelStopperTick .15s ease-out both; }
.wheelStopper.is-ticking-alt { animation: wheelStopperTickAlt .15s ease-out both; }
@keyframes wheelStopperTick {
  0% { transform: translateX(-50%) rotate(0); }
  42% { transform: translateX(-50%) rotate(14deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
@keyframes wheelStopperTickAlt {
  0% { transform: translateX(-50%) rotate(0); }
  42% { transform: translateX(-50%) rotate(14deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
.wheelSegmentFlash {
  position: absolute;
  z-index: 3;
  inset: 3.2%;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(
    from -20deg,
    transparent 0deg,
    color-mix(in srgb, var(--wheel-flash-color, #fff4a0) 92%, transparent) 10deg,
    rgba(255,255,255,.98) 20deg,
    color-mix(in srgb, var(--wheel-flash-color, #fff4a0) 92%, transparent) 30deg,
    transparent 40deg,
    transparent 40deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 23%, #000 29% 91%, transparent 97%);
  mask: radial-gradient(circle, transparent 0 23%, #000 29% 91%, transparent 97%);
  mix-blend-mode: screen;
}
.wheelSegmentFlash.is-ticking { animation: wheelSegmentTickFlash .2s ease-out both; }
.wheelSegmentFlash.is-ticking-alt { animation: wheelSegmentTickFlashAlt .2s ease-out both; }
.wheelSegmentFlash.is-winner { animation: wheelSegmentWinnerFlash .36s ease-in-out 3 both; }
.wheelSegmentFlash.is-winner-alt { animation: wheelSegmentWinnerFlashAlt .36s ease-in-out 3 both; }
.wheelFeature.is-turbo .wheelSegmentFlash.is-winner,
.wheelFeature.is-turbo .wheelSegmentFlash.is-winner-alt,
.wheelFeature.is-turbo .wheelPrize.is-winner,
.wheelFeature.is-turbo .wheelPrize.is-winner-alt { animation-duration: .1s; }
@keyframes wheelSegmentTickFlash {
  0% { opacity: 0; filter: brightness(1); }
  35% { opacity: .58; filter: brightness(1.6); }
  100% { opacity: 0; filter: brightness(1); }
}
@keyframes wheelSegmentTickFlashAlt {
  0% { opacity: 0; filter: brightness(1); }
  35% { opacity: .58; filter: brightness(1.6); }
  100% { opacity: 0; filter: brightness(1); }
}
@keyframes wheelSegmentWinnerFlash {
  0%, 100% { opacity: .18; filter: brightness(1.1) drop-shadow(0 0 .35vw #fff5a0); }
  45% { opacity: .92; filter: brightness(2) drop-shadow(0 0 1.3vw #fff3a0); }
}
@keyframes wheelSegmentWinnerFlashAlt {
  0%, 100% { opacity: .18; filter: brightness(1.1) drop-shadow(0 0 .35vw #fff5a0); }
  45% { opacity: .92; filter: brightness(2) drop-shadow(0 0 1.3vw #fff3a0); }
}
.wheelSpinButton {
  appearance: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 28.8%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  overflow: visible;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  transition: transform .48s cubic-bezier(.2,1.3,.28,1), filter .18s ease;
}
.wheelFeature[data-state="idle"] .wheelSpinButton,
.wheelFeature[data-state="wheel-entry-arming"] .wheelSpinButton,
.wheelFeature[data-state="wheel-entry-closing"] .wheelSpinButton,
.wheelFeature.is-returning .wheelSpinButton {
  opacity: 0;
  pointer-events: none;
}
.wheelSpinButtonArt {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 106.6667%;
  height: 106.6667%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%,-50%);
  pointer-events: none;
  user-select: none;
  transition: opacity .08s ease;
}
.wheelSpinButtonArt--normal { opacity: 1; }
.wheelFeature[data-state="wheel-opening"] .wheelSpinButton,
.wheelFeature[data-state="wheel-ready"] .wheelSpinButton,
.wheelFeature[data-state="wheel-spinning"] .wheelSpinButton,
.wheelFeature[data-state="wheel-resolve"] .wheelSpinButton {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.wheelFeature[data-state="wheel-ready"] .wheelSpinButton {
  animation: wheelSpinButtonPulse 1.4s ease-in-out infinite;
}
.wheelSpinButton:not(:disabled):hover .wheelSpinButtonArt--normal,
.wheelSpinButton:not(:disabled):focus-visible .wheelSpinButtonArt--normal { opacity: 0; }
.wheelSpinButton:not(:disabled):hover .wheelSpinButtonArt--hover,
.wheelSpinButton:not(:disabled):focus-visible .wheelSpinButtonArt--hover { opacity: 1; }
.wheelSpinButton:not(:disabled):active .wheelSpinButtonArt--normal,
.wheelSpinButton:not(:disabled):active .wheelSpinButtonArt--hover { opacity: 0; }
.wheelSpinButton:not(:disabled):active .wheelSpinButtonArt--pressed { opacity: 1; }
.wheelSpinButton:focus-visible:not(:disabled) { outline: 0; }
.wheelSpinButton:disabled { cursor: default; }
@keyframes wheelSpinButtonPulse {
  0%, 100% { filter: brightness(1) saturate(1) drop-shadow(0 0 .14vw rgba(255,232,111,.16)); }
  45% { filter: brightness(1.32) saturate(1.16) drop-shadow(0 0 1.05vw rgba(255,238,128,.92)); }
}
.wheelResult {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: min(76%, 1080px);
  aspect-ratio: 60 / 13;
  transform: translate(-50%,-50%);
  isolation: isolate;
  pointer-events: none;
  text-align: center;
  filter: drop-shadow(0 1.25vw 1.35vw rgba(22,8,1,.78)) drop-shadow(0 0 1.45vw rgba(255,190,52,.38));
}
.wheelResult[hidden] { display: none; }
.wheelResult::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,231,137,.48), rgba(255,158,28,.18) 42%, transparent 72%);
  filter: blur(.65vw);
}
.wheelResultPlaque {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.wheelResultContent {
  position: absolute;
  z-index: 2;
  inset: 18% 10% 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.wheelResult small {
  display: block;
  margin-bottom: .42em;
  color: #ffe8a0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px,.84vw,16px);
  font-weight: 1000;
  letter-spacing: .22em;
  text-shadow: 0 .12em .08em #4b1908, 0 0 .45em rgba(255,215,91,.74);
}
.wheelResultGlyphs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  gap: .02em;
}
.wheelResultGlyphLine {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  white-space: nowrap;
}
.wheelResultGlyph {
  display: inline-block;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px,3.08vw,58px);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: -.055em;
  -webkit-text-stroke: .035em #71300d;
  background-image: url("../assets/art/big-win/letters.png"), linear-gradient(180deg,#fff7b3 0%,#ffd52f 28%,#f49a09 74%,#9a3c04 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 245% 490%, 100% 100%;
  background-position: var(--wheel-result-atlas-x,50%) var(--wheel-result-atlas-y,0%), 50% 50%;
  background-blend-mode: screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 .075em 0 #4b1604) drop-shadow(0 .11em .075em rgba(34,8,0,.86)) drop-shadow(0 0 .16em rgba(255,224,105,.66));
}
.wheelResultGlyph--space {
  width: .34em;
  background: none;
  filter: none;
  -webkit-text-stroke: 0;
}
.wheelResult[data-layout="compact"] .wheelResultGlyph { font-size: clamp(18px,2.82vw,52px); }
.wheelResult[data-layout="stacked"] .wheelResultContent { inset: 14% 11% 12%; }
.wheelResult[data-layout="stacked"] .wheelResultGlyphs { gap: .08em; }
.wheelResult[data-layout="stacked"] .wheelResultGlyph { font-size: clamp(16px,2.18vw,42px); }
.wheelResult.is-presented { animation: wheelResultArrive .7s cubic-bezier(.15,1.34,.31,1) both; }
.wheelResult.is-presented-alt { animation: wheelResultArriveAlt .7s cubic-bezier(.15,1.34,.31,1) both; }
.wheelFeature.is-turbo .wheelResult.is-presented { animation-duration: .32s; }
.wheelFeature.is-turbo .wheelResult.is-presented-alt { animation-duration: .32s; }
.wheelFeature.is-reduced .wheelResult.is-presented { animation: none; opacity: 1; transform: translate(-50%,-50%); }
.wheelFeature.is-reduced .wheelResult.is-presented-alt { animation: none; opacity: 1; transform: translate(-50%,-50%); }
@keyframes wheelResultArrive {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.24) rotate(-4deg); }
  62% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(.8deg); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
}
@keyframes wheelResultArriveAlt {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.24) rotate(-4deg); }
  62% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(.8deg); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
}
.shellPickFeature {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.shellPickFeature[hidden] { display: none; }
.shellPickBackdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.shellPickHeader {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.shellPickHeader h2 {
  position: absolute;
  left: 33.5%;
  top: calc(3.65% + 8px);
  width: 33%;
  height: 10.35%;
  display: grid;
  place-items: center;
  margin: 0;
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px,min(3.8vw,6.76vh),70px);
  font-weight: 1000;
  letter-spacing: -.015em;
  line-height: 1;
  -webkit-text-stroke: .035em #71300d;
  background-image: url("../assets/art/big-win/letters.png"), linear-gradient(180deg,#fff7b3 0%,#ffd52f 28%,#f49a09 74%,#9a3c04 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 245% 490%, 100% 100%;
  background-position: 50% 0%, 50% 50%;
  background-blend-mode: screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 .075em 0 #4b1604) drop-shadow(0 .11em .075em rgba(34,8,0,.86)) drop-shadow(0 0 .16em rgba(255,224,105,.66));
}
.shellPickHeader p {
  position: absolute;
  left: 33%;
  top: 17.45%;
  width: 34%;
  height: 6.8%;
  display: grid;
  place-items: center;
  padding: 0 1.8%;
  margin: 0;
  color: #fff2c1;
  font-size: clamp(14px,min(1.45vw,2.58vh),27px);
  font-weight: 1000;
  letter-spacing: .015em;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 .12em .08em #260e05, 0 0 .45em rgba(255,193,77,.48);
}
.shellPickMeters {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}
.shellPickMeter {
  position: absolute;
  top: 7.65%;
  width: 13.4%;
  height: 6.8%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .35em 1em .1em;
}
.shellPickMeter--round { left: 5.35%; }
.shellPickMeter--prize { right: 5.35%; }
.shellPickMeters span {
  display: block;
  color: #8cf4ff;
  font-size: clamp(7px,.72vw,14px);
  font-weight: 1000;
  letter-spacing: .12em;
  line-height: 1;
  text-shadow: 0 .12em .08em #00131d, 0 0 .45em rgba(76,222,255,.5);
}
.shellPickMeters strong {
  display: block;
  margin-top: .1em;
  color: #fff0a0;
  font-size: clamp(17px,2.05vw,39px);
  line-height: 1;
  transform: translateY(-4px);
  text-shadow: 0 .1em .08em #260d04, 0 0 .45em rgba(255,193,59,.54);
}
.shellTable {
  position: absolute;
  z-index: 3;
  left: 11%;
  right: 11%;
  top: 46%;
  bottom: 22.18%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  overflow: visible;
  perspective: 70vw;
  pointer-events: none;
}
.shellCupSlot {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.shellCupSlot::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 76%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.18);
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,252,194,.98) 0 10%,
    rgba(255,210,73,.72) 25%,
    rgba(71,236,255,.48) 46%,
    transparent 72%);
  filter: blur(.25vw) drop-shadow(0 0 1vw #fff1a0);
}
.shellCupSlot.is-shell-found::before {
  animation: shellFoundRearLight 1s ease-out both;
}
@keyframes shellFoundRearLight {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(.9); }
  55% { opacity: .78; transform: translate(-50%,-50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.42); }
}
@keyframes shellFoundRearLightReduced {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
  1%, 80% { opacity: .55; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}
.shellCup {
  position: absolute;
  z-index: 3;
  left: 6%;
  bottom: 15px;
  width: 88%;
  height: 95.53%;
  --cup-lift: 0%;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate3d(
      var(--shuffle-x,0%),
      calc(var(--shuffle-y,0%) + var(--cup-lift)),
      0)
    scale(var(--shuffle-scale,1)) rotate(var(--shuffle-rotate,0deg));
  transform-origin: 50% 92%;
  transition: transform .58s cubic-bezier(.16,.9,.28,1), filter .22s ease;
  will-change: transform, filter;
  touch-action: manipulation;
  pointer-events: auto;
}
.shellCupArt {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .75vw .5vw #0009);
  pointer-events: none;
  transition: opacity .08s linear;
}
.shellTable.is-shuffling { overflow: visible; }
.shellTable.is-shuffling::before,
.shellTable.is-shuffling::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: -24%;
  width: 148%;
  height: 15%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 5%, #b8fbff 24%, #fff8b0 48% 52%, #84e9ff 76%, transparent 95%);
  filter: blur(.34vw) drop-shadow(0 0 .7vw #fff29b);
  mix-blend-mode: screen;
}
.shellTable.is-shuffling::before { top: 36%; animation: shellSwooshUpper .54s ease-in-out infinite; }
.shellTable.is-shuffling::after { top: 63%; animation: shellSwooshLower .63s .11s ease-in-out infinite reverse; }
.shellTable.is-shuffling .shellCup {
  z-index: 4;
  transition: none;
  filter: blur(var(--shuffle-blur,.2vw)) brightness(1.35)
    drop-shadow(calc(var(--shuffle-direction,1) * 1.5vw) 0 .42vw #8ff4ffbb)
    drop-shadow(calc(var(--shuffle-direction,1) * -1.2vw) .18vw .38vw #fff09f99);
}
@keyframes shellSwooshUpper {
  0%, 100% { opacity: 0; transform: translateX(-25%) skewX(-28deg) scaleX(.4); }
  28% { opacity: .82; }
  62% { opacity: .25; transform: translateX(23%) skewX(-28deg) scaleX(.82); }
}
@keyframes shellSwooshLower {
  0%, 100% { opacity: 0; transform: translateX(-28%) skewX(25deg) scaleX(.35); }
  34% { opacity: .7; }
  68% { opacity: .18; transform: translateX(27%) skewX(25deg) scaleX(.75); }
}
.shellCup:not(:disabled):hover,
.shellCup:not(:disabled):focus-visible {
  filter: brightness(1.22) saturate(1.08) drop-shadow(0 0 1vw #fff5a3);
  outline: none;
}
.shellCup.is-attention {
  animation-name: shellCupAttention;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--attention-duration,3.17s);
  animation-delay: var(--attention-delay,.12s);
}
@keyframes shellCupAttention {
  0%, 18%, 100% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent); }
  4% { filter: brightness(1.35) saturate(1.15) drop-shadow(0 0 1.05vw rgba(255,245,168,.92)); }
  8% { filter: brightness(1.06) saturate(1.03) drop-shadow(0 0 .28vw rgba(255,245,168,.28)); }
  12% { filter: brightness(1.24) saturate(1.1) drop-shadow(0 0 .78vw rgba(112,239,255,.72)); }
}
.shellCup.is-chosen { filter: brightness(1.24) saturate(1.08) drop-shadow(0 0 1.25vw #fff5a3); }
.shellCup.is-shaking { animation: shellCupShake 2.403s ease-in-out both; }
@keyframes shellCupShake {
  0%, 28%, 36%, 64%, 72%, 100% { transform: translate3d(var(--shuffle-x,0%), var(--shuffle-y,0%), 0) scale(1) rotate(0deg); }
  5%, 41%, 77% { transform: translate3d(calc(var(--shuffle-x,0%) - 3.2%), var(--shuffle-y,0%), 0) scale(1.012) rotate(-2.1deg); }
  10%, 46%, 82% { transform: translate3d(calc(var(--shuffle-x,0%) + 3.5%), var(--shuffle-y,0%), 0) scale(1.016) rotate(2.35deg); }
  15%, 51%, 87% { transform: translate3d(calc(var(--shuffle-x,0%) - 2.45%), var(--shuffle-y,0%), 0) scale(1.01) rotate(-1.55deg); }
  20%, 56%, 92% { transform: translate3d(calc(var(--shuffle-x,0%) + 1.65%), var(--shuffle-y,0%), 0) scale(1.006) rotate(1deg); }
  24%, 60%, 96% { transform: translate3d(calc(var(--shuffle-x,0%) - .65%), var(--shuffle-y,0%), 0) scale(1.003) rotate(-.4deg); }
}
.shellCup.is-lowering {
  --cup-lift: 0%;
  transition-duration: .76s;
}
.shellCup.is-lift-stage-1 {
  --cup-lift: -3%;
}
.shellCup.is-lift-stage-2 {
  --cup-lift: -6%;
}
.shellCup.is-lift-stage-3,
.shellCup.is-lifted {
  --cup-lift: -9%;
}
.shellCup.is-lift-stage-1,
.shellCup.is-lift-stage-2,
.shellCup.is-lift-stage-3 { transition-duration: 1.1s; }
.shellCup.is-intro-reveal,
.shellCup.is-result-reveal {
  --cup-lift: -54%;
  transition-duration: .82s;
}
.shellCup.is-found,
.shellCup.is-shell {
  filter: brightness(1.28) saturate(1.12) drop-shadow(0 0 1.15vw rgba(255,245,164,.9));
}
.shellCup.is-empty { filter: brightness(.86) saturate(.66) drop-shadow(0 .55vw .55vw rgba(0,0,0,.52)); }
.shellCup.is-actual-reveal {
  filter: brightness(1.2) saturate(1.08) drop-shadow(0 0 1vw rgba(112,239,255,.82));
}
.shellToken {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 2.2%;
  width: 46%;
  opacity: 0;
  transform: translate(-48.55%,-24%) scale(.38);
  transform-origin: 50% 78%;
  filter: drop-shadow(0 .38vw .34vw rgba(0,0,0,.55)) drop-shadow(0 0 1vw #fff7a8);
  transition: opacity .24s ease, transform .58s cubic-bezier(.15,1.35,.3,1), filter .25s ease;
  pointer-events: none;
}
.shellToken.is-visible { opacity: 1; transform: translate(-48.55%,-6%) scale(1); }
.shellCupSlot.is-intro-reveal .shellToken,
.shellCupSlot.is-found .shellToken,
.shellCupSlot.is-shell .shellToken,
.shellCupSlot.is-actual-reveal .shellToken,
.shellCupSlot:has(.shellCup.is-intro-reveal) .shellToken,
.shellCupSlot:has(.shellCup.is-found) .shellToken,
.shellCupSlot:has(.shellCup.is-actual-reveal) .shellToken,
.shellToken.is-found,
.shellToken.is-actual-reveal {
  opacity: 1;
  transform: translate(-48.55%,-6%) scale(1);
}
.shellCupSlot.is-lowering .shellToken,
.shellCupSlot:has(.shellCup.is-lowering) .shellToken {
  opacity: 0;
  transform: translate(-48.55%,-14%) scale(.62);
}
.wheelFeature.is-paused *,
.gameShell.is-document-hidden .wheelFeature * { animation-play-state: paused !important; }
.wheelFeature.is-paused .wheelStage::before,
.gameShell.is-document-hidden .wheelFeature .wheelStage::before { animation-play-state: paused !important; }
.wheelFeature.is-paused .shellCupSlot::before,
.gameShell.is-document-hidden .wheelFeature .shellCupSlot::before { animation-play-state: paused !important; }
.wheelEntryDoors.is-paused *,
.gameShell.is-document-hidden .wheelEntryDoors * { animation-play-state: paused !important; }
.wheelEntryDoors.is-reduced .wheelEntryDoorFx,
body.reduceMotion .wheelEntryDoorFx { display: none; }
.wheelEntryDoors.is-reduced .wheelEntryDoor,
body.reduceMotion .wheelEntryDoor { animation: none !important; }
.wheelFeature.is-reduced .wheelDisk, .wheelFeature.is-reduced .wheelStopper, .wheelFeature.is-reduced .wheelSpinButton, body.reduceMotion .wheelDisk { animation: none !important; }
.wheelFeature.is-reduced .wheelSegmentFlash { animation: none !important; }
.wheelFeature.is-reduced .wheelPrize.is-winner,
.wheelFeature.is-reduced .wheelPrize.is-winner-alt { animation: none !important; filter: brightness(1.55) drop-shadow(0 0 .8vw var(--segment-color)); }
.wheelFeature.is-reduced .wheelStage::before { animation: none !important; rotate: 0turn; filter: brightness(1); will-change: auto; }
.wheelFeature.is-reduced .wheelSegmentFlash.is-ticking,
.wheelFeature.is-reduced .wheelSegmentFlash.is-ticking-alt { opacity: .32; }
.wheelFeature.is-reduced .wheelSegmentFlash.is-winner,
.wheelFeature.is-reduced .wheelSegmentFlash.is-winner-alt { opacity: .82; filter: brightness(1.8) drop-shadow(0 0 .8vw #fff3a0); }
.wheelFeature.is-reduced .wheelStage, .wheelFeature.is-reduced .wheelFeatureDimmer, .wheelFeature.is-reduced .wheelSpinButton, .wheelFeature.is-reduced .shellCup, .wheelFeature.is-reduced .shellToken { transition-duration: .001ms !important; }
.wheelFeature.is-reduced .shellCup.is-attention,
.wheelFeature.is-reduced .shellCup.is-shaking { animation: none !important; }
.wheelFeature.is-reduced .shellCup.is-attention { filter: brightness(1.16) saturate(1.06) drop-shadow(0 0 .5vw rgba(255,245,168,.62)); }
.wheelFeature.is-reduced .shellCupSlot.is-shell-found::before {
  animation: shellFoundRearLightReduced 1s linear both;
}
.wheelFeature.is-reduced .wheelStage::before { transition-duration: .001ms !important; }
.wheelFeature.is-turbo .wheelStage::before { transition-duration: .24s; }
@media (max-aspect-ratio: 1.35) {
  .wheelFeature.is-active .wheelStage { left: 50%; top: 10.5%; width: min(90%, 82vh); transform: translateX(-50%); }
}