:root {
  color-scheme: dark;
  font-family: "Arial Narrow", "Trebuchet MS", system-ui, sans-serif;
  --gold: #ffc936;
  --gold-hi: #fff2a6;
  --navy: #04152c;
  --blue: #0876d1;
  --green: #00a846;
  --stage-ratio: 1.775770457;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #01050b;
}

button,
input,
select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, #0b4072 0, #04152d 38%, #01050b 78%),
    #01050b;
}

.stage {
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  height: min(100vh, calc(100vw / var(--stage-ratio)));
  aspect-ratio: 1671 / 941;
  overflow: hidden;
  isolation: isolate;
  background: #020a13;
  box-shadow: 0 0 7vmin #000;
  user-select: none;
}

.cabinet-art,
.goal-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.cabinet-art { z-index: 1; }

.bonus-video-overlay {
  --bonus-video-crossfade-ms: 1000ms;
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.bonus-video-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bonus-video-lane {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.bonus-video-lane-left,
.bonus-video-lane-right {
  top: 0;
  width: 13.764213046080%;
  height: 83.315621679065%;
}

.bonus-video-lane-left {
  left: 0;
  -webkit-mask-image:
    linear-gradient(to right, #000 0, #000 82%, rgba(0,0,0,.82) 89%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 89%, rgba(0,0,0,.72) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0, #000 82%, rgba(0,0,0,.82) 89%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 89%, rgba(0,0,0,.72) 94%, transparent 100%);
  mask-composite: intersect;
}

.bonus-video-lane-right {
  right: 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 0, #000 82%, rgba(0,0,0,.82) 89%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 89%, rgba(0,0,0,.72) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 0, #000 82%, rgba(0,0,0,.82) 89%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 89%, rgba(0,0,0,.72) 94%, transparent 100%);
  mask-composite: intersect;
}

.bonus-video-lane-top {
  z-index: 2;
  left: 13.883901855177%;
  top: 0;
  width: 71.035307001795%;
  height: 18.490967056323%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.72) 4%, #000 8%, #000 92%, rgba(0,0,0,.72) 96%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 70%, rgba(0,0,0,.82) 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, rgba(0,0,0,.72) 4%, #000 8%, #000 92%, rgba(0,0,0,.72) 96%, transparent 100%),
    linear-gradient(to bottom, #000 0, #000 70%, rgba(0,0,0,.82) 80%, transparent 100%);
  mask-composite: intersect;
}

.bonus-video-lane video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: fill;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--bonus-video-crossfade-ms) linear;
}

.bonus-video-lane video.is-current { opacity: 1; }

.logo-sting {
  position: absolute;
  z-index: 2;
  left: 27.648114901257%;
  top: 0;
  width: 44.284859365649%;
  height: 18.703506907545%;
  transform: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  contain: layout paint;
  will-change: opacity;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 7%, #000 17%, #000 83%, rgba(0,0,0,.45) 93%, transparent 100%), linear-gradient(to bottom, #000 0, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.45) 7%, #000 17%, #000 83%, rgba(0,0,0,.45) 93%, transparent 100%), linear-gradient(to bottom, #000 0, #000 72%, rgba(0,0,0,.72) 84%, transparent 100%);
  mask-composite: intersect;
}

.logo-sting.is-playing {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.logo-sting video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: fill;
  pointer-events: none;
}

.stadium-ambience {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stadium-ambience::before {
  content: "";
  position: absolute;
  left: 8%;
  top: -5%;
  width: 84%;
  height: 39%;
  opacity: .72;
  background:
    radial-gradient(ellipse at 18% 0, rgba(255,244,185,.54), transparent 34%),
    radial-gradient(ellipse at 82% 0, rgba(255,223,122,.48), transparent 34%),
    radial-gradient(ellipse at 50% 5%, rgba(71,157,255,.38), transparent 45%);
  filter: blur(.28cqw);
  mix-blend-mode: screen;
}

.stadium-ambience span {
  position: absolute;
  top: 8%;
  width: .42%;
  min-width: 3px;
  aspect-ratio: .58;
  border-radius: 12%;
  opacity: .52;
  background: #ffd439;
  box-shadow: 0 0 .35cqw currentColor;
  animation: ambient-confetti-drift 6.8s ease-in-out infinite alternate;
}

.stadium-ambience span:nth-child(1) { left: 7%; color: #ff4338; background: currentColor; animation-delay: -1.2s; }
.stadium-ambience span:nth-child(2) { left: 14%; top: 13%; color: #ffd439; background: currentColor; animation-delay: -4.8s; }
.stadium-ambience span:nth-child(3) { left: 22%; top: 7%; color: #2787ff; background: currentColor; animation-delay: -2.4s; }
.stadium-ambience span:nth-child(4) { left: 31%; top: 15%; color: #26bd58; background: currentColor; animation-delay: -5.1s; }
.stadium-ambience span:nth-child(5) { left: 3%; top: 9%; color: #ff9d1d; background: currentColor; animation-delay: -.7s; }
.stadium-ambience span:nth-child(6) { left: 18%; top: 16%; color: #fff; background: currentColor; animation-delay: -3.9s; }
.stadium-ambience span:nth-child(7) { left: 82%; top: 8%; color: #ffd439; background: currentColor; animation-delay: -2s; }
.stadium-ambience span:nth-child(8) { left: 97%; top: 14%; color: #e83d38; background: currentColor; animation-delay: -5.8s; }
.stadium-ambience span:nth-child(9) { left: 72%; top: 7%; color: #2185ff; background: currentColor; animation-delay: -3.1s; }
.stadium-ambience span:nth-child(10) { left: 80%; top: 16%; color: #20b858; background: currentColor; animation-delay: -4.4s; }
.stadium-ambience span:nth-child(11) { left: 88%; top: 10%; color: #ff9d1d; background: currentColor; animation-delay: -1.6s; }
.stadium-ambience span:nth-child(12) { left: 94%; top: 14%; color: #fff; background: currentColor; animation-delay: -5.4s; }

.ways-badge {
  position: absolute;
  z-index: 12;
  top: 45.1%;
  width: 6%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle, #082b50 0 68%, #021326 69% 100%);
  pointer-events: none;
  filter: drop-shadow(0 .35cqw .3cqw rgba(0,0,0,.72)) drop-shadow(0 0 .32cqw rgba(255,208,55,.65));
}

.ways-badge-left { left: 8.9%; }
.ways-badge-right { right: 8.9%; }

.effects-canvas {
  position: absolute;
  inset: 0;
  z-index: 89;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.reel-window {
  position: absolute;
  z-index: 3;
  left: calc(100% * 230 / 1671);
  top: calc(100% * 182 / 941);
  width: calc(100% * 1211 / 1671);
  height: calc(100% * 580 / 941);
  overflow: hidden;
  contain: layout paint;
}

.reels {
  position: absolute;
  inset: 0;
}

.reel {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.reel-static,
.reel-tape {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: grid;
  grid-auto-rows: calc(100% / 3);
  width: 100%;
}

.reel-static { height: 100%; }

.reel-static > .symbol-cell { position: absolute; }

.reel-tape {
  height: auto;
  will-change: transform;
  filter: saturate(.93) blur(.45px);
}

.reel.spinning .reel-static { opacity: 0; }

.symbol-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  contain: paint;
  padding: 1.8% 2.8%;
}

.symbol-cell::after {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 15%;
  opacity: 0;
  pointer-events: none;
}

.symbol-cell.win::after {
  opacity: 1;
  border: .18em solid rgba(255, 238, 138, .9);
  box-shadow: inset 0 0 1.2em #fff, 0 0 1.6em #ffd126;
  animation: win-cell-pulse .78s ease-in-out 3;
}

.symbol-cell.win .symbol-img {
  animation: win-symbol-pulse .78s ease-in-out 3;
}

.symbol-img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  --symbol-scale: 96%;
  --symbol-render-scale: var(--symbol-scale);
  --symbol-pulse-scale: 1.1;
  --symbol-optical-x: 0%;
  --symbol-optical-y: 0%;
  width: auto;
  height: var(--symbol-render-scale);
  aspect-ratio: 5 / 4;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: 50% 50%;
  transform: translate3d(
    calc(-50% + var(--symbol-optical-x)),
    calc(-50% + var(--symbol-optical-y)),
    0
  );
  transform-origin:
    calc(50% - var(--symbol-optical-x))
    calc(50% - var(--symbol-optical-y));
  will-change: transform;
  filter: drop-shadow(0 .22em .22em rgba(0, 0, 0, .62));
  pointer-events: none;
}

.symbol-video-source-hidden {
  opacity: 0 !important;
}

.symbol-video-overlay {
  pointer-events: none;
  animation: none !important;
  opacity: 1;
  transition: opacity .12s ease-out;
}

.symbol-video-overlay-exit {
  opacity: 0 !important;
}

.symbol-img[data-symbol^="PLAYER_"] { --symbol-scale: 96%; }
.symbol-img[data-symbol="FLAG"] { --symbol-scale: 94%; }
.symbol-img[data-symbol="WHISTLE"] { --symbol-scale: 89%; }
.symbol-img[data-symbol="BOOTS"] { --symbol-scale: 93%; }
.symbol-img[data-symbol="WILD"] { --symbol-scale: 92%; }
.symbol-img[data-symbol="BONUS"] { --symbol-scale: 91%; }
.symbol-img[data-symbol="REF"] { --symbol-scale: 97%; }
.symbol-img[data-symbol^="REF_WILD_"] { --symbol-scale: 98%; }

.reel.spinning .symbol-img {
  filter: blur(.65px) brightness(.9) drop-shadow(0 .2em .16em rgba(0,0,0,.52));
}

.sticky-ref {
  position: absolute;
  z-index: 9;
  width: 20%;
  height: 33.333%;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: ref-lock .7s cubic-bezier(.2,.85,.25,1) both;
}

.sticky-ref img { width: auto; height: var(--symbol-render-scale); aspect-ratio: 5 / 4; object-fit: contain; }

.free-hud {
  position: absolute;
  z-index: 15;
  inset: 0;
  color: white;
  pointer-events: none;
}

.free-hud-panel {
  position: absolute;
  display: grid;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 .35cqw .38cqw rgba(0,0,0,.82)) drop-shadow(0 0 .42cqw rgba(42,137,255,.28));
}

.free-hud-left {
  left: .6%;
  top: 3.15%;
  width: 27%;
  height: 11.6%;
  grid-template-columns: 1fr 1fr;
  padding: 1.55% 2.65% .75%;
  background-image: url("../assets/art/ui/bonus-hud-left.png");
}

.free-hud-right {
  right: 4%;
  top: 1.7%;
  width: 24%;
  height: 14.55%;
  grid-template-columns: 1fr;
  padding: 1.75% 2.4% .8%;
  background-image: url("../assets/art/ui/bonus-hud-right.png");
}

.free-hud-panel span {
  display: grid;
  place-items: center;
  align-content: center;
  line-height: .95;
}

.free-hud b {
  color: #fff7c7;
  font-size: clamp(12px, 1.48cqw, 27px);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .08em .1em #000, 0 0 .35em rgba(255,210,57,.52);
}

.free-hud small {
  color: #ffd239;
  font-size: clamp(6px, .61cqw, 12px);
  font-weight: 900;
  letter-spacing: .09em;
  text-shadow: 0 .12em .12em #000;
}

.meter-value {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  margin: 0;
  color: #f5f6ff;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 .08em .1em #000, 0 0 .3em rgba(110,175,255,.45);
  pointer-events: none;
}

.meter-balance {
  left: 13.62%; top: 88.02%; width: 13.54%; height: 6.62%;
  font-size: clamp(15px, 2.25cqw, 38px);
}

.meter-bet {
  left: 32.43%; top: 88.08%; width: 7.38%; height: 6.55%;
  font-size: clamp(14px, 1.82cqw, 31px);
}

.meter-win {
  left: 66.88%; top: 88.30%; width: 18.72%; height: 6.62%;
  font-size: clamp(15px, 2.25cqw, 38px);
}

.hotspot {
  position: absolute;
  z-index: 18;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  cursor: pointer;
}

.hotspot::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  opacity: 0;
  box-shadow: inset 0 0 1cqw rgba(255,255,255,.95), 0 0 1.2cqw #ffe069;
  transition: opacity .16s ease;
}

.hotspot:hover::after,
.hotspot:focus-visible::after { opacity: .7; }
.hotspot:active::after { transform: scale(.94); }
.hotspot-spin:active .control-button-art { transform: scale(.96); }
.hotspot:disabled { cursor: default; filter: grayscale(.35); }
.hotspot:disabled::after { display: none; }

.hotspot-menu { left: 4.1%; top: 83.35%; width: 7.25%; height: 13%; }
.hotspot-bet-down { left: 28.55%; top: 85.18%; width: 4.05%; height: 9%; }
.hotspot-bet-up { left: 39.71%; top: 85.18%; width: 4.05%; height: 9%; }
.hotspot-bet-down::after,
.hotspot-bet-up::after {
  inset: auto;
  top: 20%;
  width: 75%;
  height: 64%;
}
.hotspot-bet-down::after { left: 14%; }
.hotspot-bet-up::after { left: 5%; }
.hotspot-spin { z-index: 22; left: 44.25%; top: 78.53%; width: 11.62%; height: 20.65%; }
.hotspot-max { left: 56.48%; top: 83.36%; width: 9.47%; height: 12.92%; border-radius: 13%; }
.hotspot-auto { left: 87.45%; top: 83.3%; width: 7.45%; height: 13.1%; }

.control-button-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.spin-button-art { filter: drop-shadow(0 0 .4cqw rgba(97,255,121,.72)); }
.stop-button-art { filter: drop-shadow(0 0 .4cqw #ff1616); }
.hotspot-spin::after { z-index: 4; }

.auto-remaining {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 42%;
  color: #011637;
  font-size: clamp(12px, 1.8cqw, 30px);
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 2px 0 #fff;
}

.goal-scene {
  position: absolute;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  background: #00193b;
}

.goal-background { z-index: 0; object-fit: cover; }

.goalkeeper-rig {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 27%;
  width: 34%;
  height: 41%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: left, bottom, transform;
}

.goalkeeper-shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 8.2%;
  width: 24%;
  height: 5.8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.74) 0 28%, rgba(0,0,0,.36) 52%, transparent 76%);
  filter: blur(.16cqw);
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.goalkeeper {
  --keeper-pose-y: 0%;
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translate3d(0,var(--keeper-pose-y),0);
  transform-origin: 50% 88%;
  pointer-events: none;
  will-change: transform, filter;
  filter: drop-shadow(0 .55cqw .42cqw rgba(0,0,0,.68));
}

.goalkeeper-rig.is-idle .goalkeeper { animation: goalkeeper-idle-planted 1.8s ease-in-out infinite alternate; }
.goalkeeper-rig.is-ready .goalkeeper { animation: goalkeeper-ready .26s cubic-bezier(.2,.75,.24,1) both; }
.goalkeeper-rig.is-dive-left { animation: goalkeeper-dive-left .735s cubic-bezier(.18,.72,.22,1) both; }
.goalkeeper-rig.is-dive-centre { animation: goalkeeper-dive-centre .735s cubic-bezier(.18,.72,.22,1) both; }
.goalkeeper-rig.is-dive-right { animation: goalkeeper-dive-right .735s cubic-bezier(.18,.72,.22,1) both; }
.goalkeeper-rig.is-save { animation-duration: .505s; }
.goalkeeper-rig.is-dive-left .goalkeeper { --keeper-pose-y: 12.2%; }
.goalkeeper-rig.is-dive-right .goalkeeper { --keeper-pose-y: 9.9%; }
.goalkeeper-rig.is-recover.from-left { animation: goalkeeper-recover-left .48s cubic-bezier(.2,.72,.24,1) both; }
.goalkeeper-rig.is-recover.from-centre { animation: goalkeeper-recover-centre .48s cubic-bezier(.2,.72,.24,1) both; }
.goalkeeper-rig.is-recover.from-right { animation: goalkeeper-recover-right .48s cubic-bezier(.2,.72,.24,1) both; }
.goalkeeper-rig.is-save .goalkeeper { filter: drop-shadow(0 0 1cqw rgba(255,223,59,.9)) drop-shadow(0 .55cqw .42cqw rgba(0,0,0,.68)); }
.goalkeeper-rig.is-wrong-way .goalkeeper { filter: drop-shadow(0 0 .75cqw rgba(49,174,255,.78)) drop-shadow(0 .55cqw .42cqw rgba(0,0,0,.68)); }
.goalkeeper-rig.is-ready .goalkeeper-shadow { animation: goalkeeper-shadow-ready .26s ease-out both; }
.goalkeeper-rig.is-dive-left .goalkeeper-shadow,
.goalkeeper-rig.is-dive-centre .goalkeeper-shadow,
.goalkeeper-rig.is-dive-right .goalkeeper-shadow { animation: goalkeeper-shadow-flight .735s ease-in-out both; }
.goalkeeper-rig.is-save .goalkeeper-shadow { animation-duration: .505s; }
.goalkeeper-rig.is-recover .goalkeeper-shadow { animation: goalkeeper-shadow-recover .48s ease-out both; }

.goal-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,12,35,.72), transparent 20%, transparent 77%, rgba(0,12,28,.65)),
    radial-gradient(circle at 50% 48%, transparent 34%, rgba(0,0,0,.28) 90%);
}

.goal-scoreboard {
  position: absolute;
  z-index: 5;
  left: 7%;
  top: 3.2%;
  width: 86%;
  height: 11%;
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  align-items: center;
  padding: .8% 2%;
  border: .25cqw solid var(--gold);
  border-radius: 1.2cqw;
  background: linear-gradient(180deg, rgba(5,40,85,.96), rgba(1,12,31,.96));
  box-shadow: inset 0 0 2cqw #087fd5, 0 .5cqw 1.5cqw #000;
  color: white;
  text-align: center;
}

.goal-scoreboard span:not(.goal-title) { display: grid; line-height: 1; }
.goal-scoreboard b { color: #fff1a2; font-size: clamp(16px, 2.4cqw, 42px); }
.goal-scoreboard small { color: #ffc928; font-weight: 900; font-size: clamp(7px, .72cqw, 13px); letter-spacing: .1em; }
.goal-title {
  width: 100%;
  height: 78%;
  color: transparent;
  font-size: 0;
  background: url("../assets/art/ui/goal-shootout-title.png") center / contain no-repeat;
  filter: drop-shadow(0 .14cqw .08cqw #001024) drop-shadow(0 0 .4cqw rgba(255,210,48,.72));
}

.goal-targets {
  position: absolute;
  z-index: 6;
  inset: 0;
}

.goal-targets button {
  position: absolute;
  top: 28.5%;
  width: 16%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
}

.goal-targets button:nth-child(1) { left: 15%; }
.goal-targets button:nth-child(2) { left: 42%; }
.goal-targets button:nth-child(3) { left: 69%; }

.goal-targets button span,
.goal-targets button::before,
.goal-targets button::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.goal-targets button::before {
  inset: 4%;
  border: .45cqw solid rgba(255,226,61,.98);
  box-shadow: 0 0 1.4cqw #ffdf2b, inset 0 0 1cqw #ff6;
  animation: target-spin 4s linear infinite;
}

.goal-targets button::after {
  inset: 24%;
  border: .28cqw solid white;
  box-shadow: 0 0 .8cqw #2ddcff;
}

.goal-targets button span {
  inset: 45%;
  background: #fff;
  box-shadow: 0 0 1.2cqw #fff;
}

.goal-targets button:hover,
.goal-targets button:focus-visible { transform: scale(1.08); filter: brightness(1.3); outline: none; }
.goal-targets button:disabled { opacity: .45; cursor: default; transform: none; }
.goal-targets button.is-hinting:not(:disabled) {
  z-index: 2;
  animation: goal-target-hint .7s cubic-bezier(.2,.9,.24,1) both;
}
.goal-targets button.is-hinting:not(:disabled)::before {
  border-color: #fff9ba;
  animation: goal-target-hint-ring .7s ease-out both;
}
.goal-targets button.is-hinting:not(:disabled)::after {
  border-color: #fff;
  box-shadow: 0 0 1.5cqw #57e8ff, 0 0 2.4cqw rgba(255,222,53,.92);
}

.shot-ball {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 3.8%;
  transform: translateX(-50%);
  display: block;
  width: 8.6%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 .25cqw .2cqw #000);
  pointer-events: none;
}

.shot-ball.kick-left { animation: kick-left 1s cubic-bezier(.15,.85,.28,1) forwards; }
.shot-ball.kick-centre { animation: kick-centre 1s cubic-bezier(.15,.85,.28,1) forwards; }
.shot-ball.kick-right { animation: kick-right 1s cubic-bezier(.15,.85,.28,1) forwards; }
.shot-ball.miss { will-change: left, top, transform; }
.shot-ball.is-deflected { filter: drop-shadow(0 0 .35cqw #fff) drop-shadow(0 .3cqw .25cqw #000); }

.shot-result {
  position: absolute;
  z-index: 12;
  left: 24%;
  top: 60%;
  width: 52%;
  aspect-ratio: 1535 / 342;
  display: block;
  animation: popup-in .55s cubic-bezier(.18,.95,.2,1.1) both;
  pointer-events: none;
  filter: drop-shadow(0 .75cqw .65cqw rgba(0,0,0,.72));
}

.shot-result img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shot-result strong,
.shot-result small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.var-wheel-overlay {
  position: absolute;
  z-index: 85;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.var-wheel-overlay.is-surface-hidden { visibility: hidden; }

.var-award-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}

.var-award-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60.32316%;
  height: 95.21785%;
  display: block;
  transform: translate3d(-50%,-50%,0);
  filter: drop-shadow(0 .65cqw .7cqw rgba(0,0,0,.62));
}

.var-award-media {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.var-wheel-overlay.is-awarding .var-award-layer {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.var-wheel-overlay.is-award-exiting .var-award-layer {
  opacity: 0;
  visibility: visible;
  transition: opacity .24s ease;
}

.var-wheel-overlay.is-awarding .var-wheel-rig,
.var-wheel-overlay.is-award-exiting .var-wheel-rig {
  opacity: 0;
  visibility: hidden;
}

.var-wheel-scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(3,35,77,.54) 0 18%, rgba(0,8,24,.88) 68%, rgba(0,3,12,.96) 100%),
    rgba(0,4,16,.82);
  opacity: 0;
  transition: opacity .4s ease;
}

.var-wheel-overlay.is-entering .var-wheel-scrim,
.var-wheel-overlay.is-spinning .var-wheel-scrim,
.var-wheel-overlay.is-revealed .var-wheel-scrim,
.var-wheel-overlay.is-prize .var-wheel-scrim,
.var-wheel-overlay.is-awarding .var-wheel-scrim,
.var-wheel-overlay.is-award-exiting .var-wheel-scrim { opacity: 1; }
.var-wheel-overlay.is-exiting .var-wheel-scrim { opacity: 0; }

.var-wheel-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}

.var-wheel-overlay.is-entering .var-wheel-particles,
.var-wheel-overlay.is-spinning .var-wheel-particles,
.var-wheel-overlay.is-revealed .var-wheel-particles { opacity: .74; }
.var-wheel-overlay.is-prize .var-wheel-particles { opacity: .48; }
.var-wheel-overlay.is-exiting .var-wheel-particles {
  opacity: 0;
  transition-duration: .65s;
}

.var-wheel-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(2px,.22cqw,5px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e9f8ff;
  box-shadow: 0 0 .22cqw #fff, 0 0 .55cqw rgba(96,190,255,.9);
  opacity: 0;
  animation: var-wheel-spark var(--duration) ease-in-out var(--delay) infinite;
}

.var-wheel-particles i:nth-child(3n) {
  width: clamp(3px,.32cqw,7px);
  border-radius: 18%;
  background: #ffe8a6;
  box-shadow: 0 0 .2cqw rgba(255,244,205,.9), 0 0 .48cqw rgba(92,177,255,.72);
}

.var-wheel-rig {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55.26%;
  width: 44.285%;
  aspect-ratio: 1;
  transform: translate3d(-50%,-50%,0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.var-wheel-overlay.is-entering .var-wheel-rig {
  animation: var-wheel-drop .76s cubic-bezier(.16,.88,.2,1.04) both;
}

.var-wheel-overlay.is-exiting .var-wheel-rig {
  animation: var-wheel-lift .65s cubic-bezier(.62,.02,.86,.42) both;
}

.var-wheel-overlay.is-prize .var-wheel-rig {
  opacity: 0;
  visibility: hidden;
}

.var-wheel-halo {
  position: absolute;
  z-index: 0;
  inset: -62%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(245,252,255,.74) 0 7%,
    rgba(155,218,255,.42) 20%,
    rgba(47,139,231,.22) 41%,
    rgba(13,71,145,.1) 57%,
    transparent 73%);
  opacity: .78;
  filter: blur(.52cqw);
  transform-origin: 50% 50%;
  transition: opacity .65s ease;
  animation: var-wheel-halo-breathe 4.2s ease-in-out infinite alternate;
}

.var-wheel-halo::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(207,237,255,.075) 0 2.5deg,
    transparent 2.5deg 14deg);
  -webkit-mask: radial-gradient(circle, transparent 0 12%, #000 31%, transparent 69%);
  mask: radial-gradient(circle, transparent 0 12%, #000 31%, transparent 69%);
  animation: var-wheel-halo-spin 28s linear infinite;
}

.var-wheel-overlay.is-exiting .var-wheel-halo { opacity: 0; }

.var-wheel-title {
  position: absolute;
  z-index: 6;
  left: 3%;
  top: -20%;
  width: 94%;
  height: 16%;
  object-fit: contain;
  filter: drop-shadow(0 .35cqw .25cqw rgba(0,0,0,.88)) drop-shadow(0 0 .75cqw rgba(255,213,67,.86));
}

.var-wheel-ring,
.var-wheel-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.var-wheel-ring {
  border-radius: 50%;
  will-change: transform;
  /* A directional shadow on a rotating element orbits with the ring and reads as
     an off-centre wheel. Keep the shadow radial so the exact 50% pivot stays
     visually fixed throughout both counter-rotating spins. */
  filter: drop-shadow(0 0 .48cqw rgba(0,0,0,.8));
}

.var-wheel-ring-outer { z-index: 1; }
.var-wheel-ring-inner { z-index: 2; inset: 0; transform-origin: 50% 50%; }
.var-wheel-frame { z-index: 4; object-fit: contain; pointer-events: none; }
.var-wheel-ring > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

.var-wheel-pointer {
  position: absolute;
  z-index: 5;
  left: 45%;
  top: -5.9%;
  width: 10%;
  height: 12.5%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 .25cqw .18cqw rgba(0,0,0,.9)) drop-shadow(0 0 .48cqw rgba(255,221,76,.72));
}

.var-wheel-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 50%;
}

.var-wheel-ring-outer .var-wheel-labels {
  -webkit-mask-image: url("../assets/art/ui/wheel-var-outer-icon-mask.png");
  mask-image: url("../assets/art/ui/wheel-var-outer-icon-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.var-wheel-ring-inner .var-wheel-labels {
  -webkit-mask-image: url("../assets/art/ui/wheel-var-inner-icon-mask.png");
  mask-image: url("../assets/art/ui/wheel-var-inner-icon-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.var-wheel-labels li {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--segment) * var(--wheel-step)));
  transform-origin: 50% 50%;
  color: #fff6bf;
  font-weight: 1000;
  line-height: .93;
  letter-spacing: .015em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .11em .05em #001126, 0 0 .22em #00285c, 0 0 .35em #000;
}

.var-wheel-labels li::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  clip-path: var(--segment-sector);
  background: linear-gradient(180deg, rgba(245,252,255,.18), rgba(122,202,255,.055));
  filter:
    drop-shadow(0 0 .035cqw rgba(242,251,255,.96))
    drop-shadow(0 0 .15cqw rgba(188,233,255,.84))
    drop-shadow(0 0 .38cqw rgba(72,168,255,.42));
  opacity: 0;
  box-sizing: border-box;
}

.var-wheel-prize-icon {
  position: absolute;
  left: calc(50% + var(--prize-shift-x));
  transform: translateX(-50%);
  object-fit: contain;
  object-position: 50% 50%;
  clip-path: var(--prize-focus-shape);
  pointer-events: none;
  filter: drop-shadow(0 .12cqw .12cqw rgba(0,0,0,.84));
}

.var-wheel-ring-outer {
  --wheel-step: 45deg;
  --segment-sector: polygon(50% 50%, 29.2893% 0, 70.7107% 0);
  --prize-top: 10.57%;
  --prize-width: 24.86%;
  --prize-height: 9.15%;
  --prize-shift-x: .38%;
  --prize-focus-shape: polygon(0 0, 100% 0, 88.4% 100%, 11.6% 100%);
}
.var-wheel-ring-inner {
  --wheel-step: 60deg;
  --segment-sector: polygon(50% 50%, 21.1325% 0, 78.8675% 0);
  --prize-top: 28.13%;
  --prize-width: 18.58%;
  --prize-height: 10.16%;
  --prize-shift-x: .28%;
  --prize-focus-shape: polygon(0 0, 100% 0, 76.8% 100%, 23.2% 100%);
}
.var-wheel-ring-outer .var-wheel-prize-icon {
  top: var(--prize-top);
  width: var(--prize-width);
  height: var(--prize-height);
}
.var-wheel-ring-inner .var-wheel-prize-icon {
  top: var(--prize-top);
  width: var(--prize-width);
  height: var(--prize-height);
}

.var-wheel-prize-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.var-wheel-hub {
  position: absolute;
  z-index: 5;
  left: 40.5%;
  top: 40.5%;
  width: 19%;
  height: 19%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff2a1;
  font-size: clamp(16px,2.1cqw,38px);
  font-weight: 1000;
  letter-spacing: .06em;
  text-shadow: 0 .1em .05em #001126, 0 0 .28em #177dff, 0 0 .52em #ffd83a;
}

.var-wheel-labels li.is-active::before {
  opacity: .82;
  animation: var-wheel-active-frame .72s ease-in-out infinite alternate;
}
.var-wheel-labels li.is-active .var-wheel-prize-icon {
  filter: brightness(1.14) saturate(1.06) drop-shadow(0 0 .22cqw rgba(238,250,255,.95)) drop-shadow(0 0 .38cqw rgba(93,186,255,.62));
}

.var-wheel-labels li.is-winner::before {
  opacity: 1;
  animation: var-wheel-prize-flash .42s ease-in-out 3 alternate;
}
.var-wheel-labels li.is-winner .var-wheel-prize-icon {
  animation: var-wheel-prize-text .42s ease-in-out 3 alternate;
}

.var-wheel-summary {
  position: absolute;
  z-index: 6;
  left: 13%;
  bottom: -1%;
  width: 74%;
  min-height: 8%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: .3% 2%;
  border: max(2px,.1cqw) solid #f4c83d;
  border-radius: 999px;
  color: #fff5b6;
  background: linear-gradient(180deg,rgba(7,51,105,.96),rgba(0,16,48,.98));
  box-shadow: inset 0 0 .75cqw rgba(49,148,255,.46), 0 .3cqw .65cqw rgba(0,0,0,.78), 0 0 .6cqw rgba(255,207,49,.36);
  font-size: clamp(8px,.88cqw,16px);
  font-weight: 1000;
  letter-spacing: .045em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .12em .06em #000;
  opacity: 0;
  transform: translateY(18%);
}

.var-wheel-overlay.is-revealed .var-wheel-summary {
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .25s ease;
}

.var-prize-popup {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
}

.var-prize-popup[hidden] { display: none; }

.var-prize-popup.is-entering {
  animation: var-prize-popup-in .44s cubic-bezier(.16,.9,.22,1.08) both;
}

.var-prize-popup.is-exiting {
  animation: var-prize-popup-out .22s ease-in both;
}

.var-prize-popup-art {
  position: absolute;
  left: 4%;
  top: 16%;
  width: 92%;
  height: 68%;
  object-fit: contain;
  filter:
    drop-shadow(0 .72cqw .72cqw rgba(0,0,0,.72))
    drop-shadow(0 0 .78cqw rgba(74,165,255,.28));
}

.var-prize-popup-content {
  position: absolute;
  z-index: 1;
  left: 4%;
  top: 16%;
  width: 92%;
  height: 68%;
}

.var-prize-popup-title {
  position: absolute;
  left: 33.2%;
  top: 5.78125%;
  width: 33.6%;
  height: 12.2%;
  display: grid;
  place-items: center;
}

.var-prize-popup-title-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.var-prize-popup-icons {
  position: absolute;
  inset: 0;
}

.var-prize-popup-icons > img {
  position: absolute;
  top: 25.94%;
  width: 18.55%;
  height: 44.53%;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 .35cqw .3cqw rgba(0,0,0,.8))
    drop-shadow(0 0 .5cqw rgba(255,215,73,.42));
}

.var-prize-popup-icons > img:first-child { left: 21.16%; }
.var-prize-popup-icons > img:last-child { left: 60.29%; }

.var-prize-popup-connector {
  position: absolute;
  left: 46.6146%;
  top: 41.09375%;
  display: grid;
  place-items: center;
  width: 7.03125%;
  height: 16.875%;
}

.var-prize-popup-plus {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 .22cqw rgba(255,220,92,.42));
}

.var-prize-popup-summary {
  position: absolute;
  left: 27.34%;
  top: 78.9%;
  width: 45.32%;
  height: 10%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff8d0;
  font-size: clamp(12px,1.12cqw,21px);
  font-weight: 1000;
  letter-spacing: .045em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .12em .06em #000, 0 0 .3em rgba(62,161,255,.68);
}

.stadium-gates {
  position: absolute;
  z-index: 80;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gate {
  position: absolute;
  top: 0;
  width: calc(50% + 1px);
  height: 100%;
  overflow: hidden;
  will-change: transform;
  filter: drop-shadow(0 0 1.2cqw rgba(0,0,0,.85));
}

.gate img {
  position: absolute;
  top: 0;
  width: calc(200% - 2px);
  max-width: none;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.gate-left { left: 0; transform: translateX(-101%); }
.gate-left img { left: 0; }
.gate-right { right: 0; transform: translateX(101%); }
.gate-right img { right: 0; }

.stadium-gates.closing .gate-left { animation: gate-left-close .76s cubic-bezier(.3,.82,.2,1) forwards; }
.stadium-gates.closing .gate-right { animation: gate-right-close .76s cubic-bezier(.3,.82,.2,1) forwards; }
.stadium-gates.closed .gate { transform: translateX(0); }
.stadium-gates.opening .gate-left { animation: gate-left-open .72s cubic-bezier(.58,.05,.82,.55) forwards; }
.stadium-gates.opening .gate-right { animation: gate-right-open .72s cubic-bezier(.58,.05,.82,.55) forwards; }
.stadium-gates i { position: absolute; z-index: 3; left: calc(50% - 1px); top: 0; width: 2px; height: 100%; background: white; box-shadow: 0 0 2.5cqw #ffd428; opacity: 0; }
.stadium-gates.closed i { animation: seam-flash .45s ease-out; }

.feature-popup {
  position: absolute;
  z-index: 90;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 72%;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: popup-in .65s cubic-bezier(.18,.95,.2,1.06) both;
}

.feature-popup.is-exiting { animation: feature-popup-out .18s ease-in both; }
.feature-plaque-generic { position: absolute; left: 4%; bottom: 0; width: 92%; height: 58%; object-fit: contain; }
.feature-plaque-goal,
.feature-holder-front,
.feature-award-halo { display: none; }
.feature-character { position: absolute; z-index: 1; left: 31%; top: -2%; width: 38%; height: 62%; object-fit: contain; filter: drop-shadow(0 1cqw 1cqw #000); }
.feature-copy { position: absolute; z-index: 2; left: 17%; bottom: 9%; width: 66%; height: 35%; display: grid; place-items: center; align-content: center; text-align: center; }
.feature-copy h2 { margin: 0; color: #fff0a0; font-size: clamp(22px, 4.1cqw, 70px); line-height: .95; letter-spacing: .03em; text-shadow: 0 .08em #001024, 0 0 .4em #ffd83c; }
.feature-copy p { margin: 2% 0 0; color: white; font-size: clamp(10px, 1.3cqw, 24px); font-weight: 900; letter-spacing: .14em; text-shadow: 0 2px 2px #000; }
.feature-goal-stats { display: none; }

.feature-popup.is-goal-shootout {
  inset: 0;
  width: auto;
  height: auto;
}
.feature-popup.is-goal-shootout .feature-plaque-generic { display: none; }
.feature-popup.is-goal-shootout .feature-plaque-goal,
.feature-popup.is-goal-shootout .feature-holder-front { display: block; position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.feature-popup.is-goal-shootout .feature-award-halo {
  display: block;
  position: absolute;
  z-index: 0;
  left: 34%;
  top: 1.4%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,236,146,.24) 0 10%, rgba(255,205,72,.11) 23%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(68,179,255,.28) 0 29%, rgba(22,109,209,.14) 48%, rgba(5,37,104,.06) 62%, transparent 76%);
  filter: blur(clamp(8px, .85cqw, 15px));
  opacity: .68;
  mix-blend-mode: screen;
  transform: scale(.96);
  animation: feature-halo-breathe 3.8s ease-in-out infinite alternate;
}
.feature-popup.is-goal-shootout .feature-character { z-index: 2; left: 35%; top: 6.5%; width: 30%; height: 46.4%; filter: drop-shadow(0 .75cqw .85cqw rgba(0,0,0,.88)) drop-shadow(0 0 1cqw rgba(255,213,66,.68)); }
.feature-popup.is-goal-shootout .feature-holder-front { display: none; }
.feature-popup.is-goal-shootout .feature-copy {
  z-index: 4;
  left: 22%;
  top: 54%;
  bottom: auto;
  width: 56%;
  height: 24%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.feature-popup.is-goal-shootout .feature-copy h2 {
  display: block;
  flex: 0 0 58%;
  width: 100%;
  height: auto;
  margin: 0;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  background: url("../assets/art/ui/goal-shootout-title.png") center / contain no-repeat;
  filter: drop-shadow(0 .18cqw .1cqw #001024) drop-shadow(0 0 .52cqw rgba(255,214,54,.72));
}
.feature-popup.is-goal-shootout .feature-copy > #featureBody {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feature-popup.is-goal-shootout .feature-goal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4%;
  flex: 0 0 34%;
  align-self: center;
  width: 58%;
  margin-top: .4%;
  transform: translateY(10%);
}
.feature-goal-stat {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: .3cqw 1cqw;
  overflow: hidden;
  border: max(2px, .12cqw) solid #dba92c;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,61,117,.98), #031b43 48%, #010d28);
  box-shadow:
    inset 0 0 0 max(1px, .05cqw) rgba(255,244,174,.75),
    inset 0 0 .8cqw rgba(32,132,231,.45),
    0 .22cqw .4cqw rgba(0,0,0,.72),
    0 0 .42cqw rgba(255,202,48,.34);
}
.feature-goal-stat::before {
  content: "";
  position: absolute;
  inset: max(2px, .15cqw);
  border: 1px solid rgba(84,174,255,.58);
  border-radius: inherit;
  pointer-events: none;
}
.feature-goal-stat strong {
  color: #fff4bd;
  font-size: clamp(18px,2.05cqw,36px);
  font-weight: 1000;
  line-height: .82;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .09em .1em #000, 0 0 .34em rgba(255,210,57,.55);
}
.feature-goal-stat small {
  margin-top: .18em;
  color: #ffc928;
  font-size: clamp(6px,.68cqw,12px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
  text-shadow: 0 .12em .12em #000;
}

.feature-popup.is-bonus-total {
  inset: 0;
  width: auto;
  height: auto;
  animation: bonus-total-win-in .4s ease-out both;
}
.feature-popup.is-bonus-total.is-exiting {
  animation: bonus-total-win-out .32s ease-in both;
}
.feature-popup.is-bonus-total .feature-character,
.feature-popup.is-bonus-total .feature-plaque-goal,
.feature-popup.is-bonus-total .feature-holder-front,
.feature-popup.is-bonus-total .feature-award-halo {
  display: none;
}
.feature-popup.is-bonus-total .feature-plaque-generic {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature-popup.is-bonus-total .feature-copy {
  left: 17%;
  top: 33%;
  bottom: auto;
  width: 66%;
  height: 34%;
}
.feature-popup.is-bonus-total .feature-copy h2 {
  font-size: clamp(30px,3.1cqw,52px);
  letter-spacing: .14em;
}
.feature-popup.is-bonus-total .feature-copy p {
  margin-top: 2.5%;
  color: #fff;
  font-size: clamp(52px,7cqw,112px);
  line-height: .88;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .07em .03em #001024, 0 0 .32em rgba(255,224,90,.88);
}

.free-spins-award {
  position: absolute;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  text-align: center;
  animation: free-spins-award-in .42s cubic-bezier(.18,.95,.2,1.04) both;
}
.free-spins-award.is-exiting {
  animation: free-spins-award-out .2s ease-in both;
}
.free-spins-award-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.05cqw 1.1cqw rgba(0,0,0,.82));
}
.free-spins-award h2 {
  position: absolute;
  z-index: 1;
  left: 19%;
  top: 27%;
  width: 62%;
  height: 16%;
  margin: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  white-space: nowrap;
  text-shadow: none;
  background: url("../assets/art/ui/free-spins-awarded-title.png") center / contain no-repeat;
  filter: drop-shadow(0 .12cqw .08cqw rgba(0,0,0,.9)) drop-shadow(0 0 .42cqw rgba(255,195,22,.82));
}
.free-spins-award > p {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.free-spins-award-values {
  position: absolute;
  z-index: 1;
  left: 11.4%;
  top: 52.8%;
  width: 77.2%;
  height: 25.8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12.5%;
}
.free-spins-award-values span {
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.free-spins-award-values strong {
  display: block;
  width: 100%;
  color: #fff;
  font-size: clamp(38px,5.1cqw,86px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  line-height: .86;
  letter-spacing: .015em;
  text-shadow: 0 .075em .025em #001126, 0 0 .34em rgba(77,184,255,.72), 0 0 .5em rgba(255,218,64,.45);
}
.free-spins-award-values small {
  display: block;
  width: 100%;
  margin-top: 4%;
  color: #ffd94f;
  font-size: clamp(13px,1.4cqw,24px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .13em;
  text-shadow: 0 .1em .08em #001024, 0 0 .28em rgba(255,204,33,.55);
}

.big-win {
  position: absolute;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background: #020a13;
  animation: big-win-in .7s ease-out both;
}

.big-win-rays {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 95%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,228,76,.35) 0 5deg, transparent 5deg 12deg);
  filter: blur(.18cqw);
  animation: ray-spin 18s linear infinite;
}

.big-win-art,
.big-win-holder-front,
.big-win-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.big-win-art {
  z-index: 1;
  object-fit: fill;
}

.big-win-ball-video {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.big-win-ball-video[hidden] { display: none; }

.big-win-effects {
  z-index: 2;
  display: block;
}

.big-win-holder-front {
  z-index: 3;
  inset: auto;
  left: 16.447368421053%;
  top: 56.641870350691%;
  width: 66.985645933014%;
  height: 35.069075451647%;
  object-fit: fill;
}

.big-win-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  text-align: center;
  pointer-events: none;
}

.big-win-copy h2 {
  position: absolute;
  left: 14%;
  top: 3.5%;
  width: 72%;
  height: 20%;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background-image: url("../assets/art/ui/letters.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: auto 455%;
  filter: drop-shadow(0 .12cqw .08cqw rgba(0,0,0,.9)) drop-shadow(0 0 .42cqw rgba(255,195,22,.82));
  white-space: nowrap;
  text-shadow: none;
}

.big-win-copy h2[data-tier="big"] { background-position-y: 1.9366197183%; }
.big-win-copy h2[data-tier="mega"] { background-position-y: 33.9788732394%; }
.big-win-copy h2[data-tier="epic"] { background-position-y: 66.0211267606%; }
.big-win-copy h2[data-tier="legend"] { background-size: auto 360%; background-position-y: 101.9230769231%; }

.big-win-copy output {
  position: absolute;
  left: 22%;
  top: 60.5%;
  width: 56%;
  height: 20%;
  display: grid;
  place-items: center;
  margin: 0;
  color: white;
  font-size: clamp(32px, 5.25cqw, 90px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 .08em #06172b, 0 0 .35em #ffd437;
}

.game-dialog {
  width: min(82cqw, 1100px);
  max-width: 82%;
  max-height: 78%;
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  overflow: visible;
}

.game-dialog::backdrop { background: rgba(0,5,15,.78); backdrop-filter: blur(5px); }

.dialog-frame {
  position: relative;
  overflow: hidden;
  border: max(2px,.28cqw) solid #f6c436;
  border-radius: 1.4cqw;
  background:
    linear-gradient(180deg, rgba(12,72,128,.97), rgba(2,17,43,.99) 22% 100%);
  box-shadow: inset 0 0 3cqw #00152e, 0 1cqw 4cqw #000;
}

.dialog-frame::before {
  content: "";
  position: absolute;
  inset: .45cqw;
  border: .12cqw solid rgba(255,233,137,.45);
  border-radius: 1cqw;
  pointer-events: none;
}

.dialog-frame header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8cqw;
  padding: .8cqw 1.5cqw;
  border-bottom: .14cqw solid #e3ad24;
  background: linear-gradient(90deg, rgba(255,206,54,.15), transparent, rgba(255,206,54,.15));
}

.dialog-frame h2 { margin: 0; color: #ffe47c; font-size: clamp(20px,2.3cqw,38px); letter-spacing: .08em; text-shadow: 0 2px #000; }
.dialog-frame header button { width: 3.1cqw; min-width: 36px; aspect-ratio: 1; border: .13cqw solid #ffd75f; border-radius: 50%; color: white; background: #801a21; font-size: clamp(22px,2.3cqw,38px); cursor: pointer; }

.dialog-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: .5cqw; padding: .8cqw 1.2cqw; }
.dialog-tabs button,
.auto-options button,
.dev-panel button {
  border: .12cqw solid #c99624;
  border-radius: .5cqw;
  color: white;
  background: linear-gradient(#0a5594,#052b57);
  font-weight: 900;
  cursor: pointer;
}
.dialog-tabs button { min-height: 2.8cqw; }
.dialog-tabs button.active { color: #061832; background: linear-gradient(#fff4a0,#eeb623); box-shadow: 0 0 .8cqw #ffcf32; }

.dialog-pages { min-height: 24cqw; max-height: 56vh; overflow: auto; padding: .8cqw 1.8cqw 1.6cqw; }
.dialog-pages > section { display: none; }
.dialog-pages > section.active { display: block; }
.dialog-pages h3 { margin: 1.2cqw 0 .4cqw; color: #ffdc5e; font-size: clamp(16px,1.8cqw,30px); }
.dialog-pages p { margin: .45cqw 0 1.2cqw; font-size: clamp(12px,1.08cqw,18px); line-height: 1.55; }

.paytable-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .65cqw; }
.paytable-entry { display: grid; grid-template-columns: 4.5cqw 1fr; align-items: center; min-height: 4.8cqw; padding: .35cqw .7cqw; border: .08cqw solid rgba(255,210,68,.4); border-radius: .5cqw; background: rgba(0,0,0,.22); }
.paytable-entry img { width: 4.1cqw; height: 4.1cqw; object-fit: contain; }
.paytable-entry b { color: #fff4aa; }
.paytable-entry span { font-variant-numeric: tabular-nums; font-size: clamp(10px,.9cqw,16px); }

.setting-row { display: flex; align-items: center; justify-content: space-between; padding: .9cqw 1cqw; border-bottom: 1px solid rgba(255,255,255,.12); font-size: clamp(14px,1.3cqw,22px); font-weight: 800; }
.setting-row input { width: 2.4cqw; min-width: 28px; height: 1.5cqw; min-height: 18px; accent-color: #ffc72c; }

.compact-dialog { width: min(48cqw,720px); }
.auto-options { display: grid; grid-template-columns: repeat(4,1fr); gap: .8cqw; padding: 1.8cqw; }
.auto-options button { min-height: 4.5cqw; color: #fff2a0; font-size: clamp(18px,2.2cqw,36px); }
.auto-options button:hover { filter: brightness(1.25); box-shadow: 0 0 1cqw #ffd73d; }

.dev-drawer {
  position: absolute;
  z-index: 130;
  right: .7%;
  top: .9%;
  width: min(22%, 370px);
  color: white;
  font-size: clamp(8px,.72cqw,13px);
}

.dev-toggle {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 2.8cqw;
  min-width: 30px;
  aspect-ratio: 1;
  border: .12cqw solid #ffd44d;
  border-radius: 50%;
  color: #fff;
  background: rgba(2,21,50,.9);
  cursor: pointer;
}

.dev-panel {
  display: none;
  margin-top: 3.2cqw;
  padding: .8cqw;
  border: .12cqw solid #ffd44d;
  border-radius: .7cqw;
  background: rgba(2,15,37,.95);
  box-shadow: 0 1cqw 2cqw #000;
}
.dev-drawer.open .dev-panel { display: block; }
.dev-panel h2 { margin: 0 0 .6cqw; color: #ffdf69; font-size: clamp(11px,1cqw,17px); }
.dev-panel label { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: .4cqw; margin: .4cqw 0; }
.dev-panel select { min-width: 0; padding: .25cqw; border: 1px solid #97701f; color: white; background: #05264d; }
.dev-actions { display: grid; gap: .35cqw; margin-top: .65cqw; }
.dev-panel button { min-height: 1.85cqw; }
.dev-panel pre { max-height: 9cqw; overflow: auto; margin: .65cqw 0 0; padding: .4cqw; color: #8effb8; background: #00101f; font-size: .58cqw; white-space: pre-wrap; }

.loading-screen {
  position: absolute;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.1cqw;
  background:
    radial-gradient(circle at 50% 45%, rgba(6,85,151,.96), rgba(1,12,29,.99) 62%),
    #020914;
  transition: opacity .45s ease;
}
.loading-screen.ready { opacity: 0; pointer-events: none; }
.loading-ball { font-size: clamp(50px,7cqw,120px); animation: loading-ball 1.15s cubic-bezier(.3,.7,.3,1) infinite; filter: drop-shadow(0 .7cqw .4cqw #000); }
.loading-screen strong { color: #ffe36d; font-size: clamp(24px,3.7cqw,64px); letter-spacing: .08em; text-shadow: 0 2px #000,0 0 1cqw #ffb900; }
.loading-track { width: 31%; height: .75cqw; min-height: 7px; overflow: hidden; border: .09cqw solid #ffcf3c; border-radius: 2cqw; background: #00152f; }
.loading-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#00a646,#fff16b); box-shadow: 0 0 .8cqw #8dffae; transition: width .2s ease; }
.loading-screen span { color: #dbeaff; font-size: clamp(10px,.9cqw,16px); }

.rotate-notice {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4vmin;
  color: #ffe36a;
  background: radial-gradient(circle,#083a69,#010710 75%);
  text-align: center;
}
.rotate-notice span { font-size: 18vmin; animation: rotate-device 1.8s ease-in-out infinite; }
.rotate-notice strong { font-size: 6vmin; letter-spacing: .08em; }

@keyframes ambient-confetti-drift { from { transform: translate3d(-.5cqw,-.25cqw,0) rotate(-14deg); } to { transform: translate3d(.65cqw,2.3cqw,0) rotate(28deg); } }
@keyframes goalkeeper-idle-planted {
  from { transform: translate3d(0,var(--keeper-pose-y),0) rotate(-.35deg) scale3d(.998,1.002,1); }
  to { transform: translate3d(0,var(--keeper-pose-y),0) rotate(.35deg) scale3d(1.002,.998,1); }
}
@keyframes goalkeeper-ready {
  from { transform: translate3d(0,calc(var(--keeper-pose-y) + 1.8%),0) scale3d(1.035,.965,1); }
  to { transform: translate3d(0,var(--keeper-pose-y),0) scale3d(1,1,1); }
}
@keyframes goalkeeper-dive-left {
  0% { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
  18% { left: 48%; bottom: 26.6%; transform: translateX(-50%) scale3d(1.04,.96,1); }
  52% { left: 32%; bottom: 32%; transform: translateX(-50%) scale3d(1.02,1.02,1); }
  78% { left: 24%; bottom: 28.5%; transform: translateX(-50%) scale3d(1.035,.985,1); }
  100% { left: 24%; bottom: 27%; transform: translateX(-50%) scale3d(1.055,.945,1); }
}
@keyframes goalkeeper-dive-centre {
  0% { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
  18% { left: 50%; bottom: 26.6%; transform: translateX(-50%) scale3d(1.05,.95,1); }
  52% { left: 50%; bottom: 38%; transform: translateX(-50%) scale3d(.98,1.04,1); }
  80% { left: 50%; bottom: 30%; transform: translateX(-50%) scale3d(1.02,.99,1); }
  100% { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1.06,.94,1); }
}
@keyframes goalkeeper-dive-right {
  0% { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
  18% { left: 52%; bottom: 26.6%; transform: translateX(-50%) scale3d(1.04,.96,1); }
  52% { left: 68%; bottom: 32%; transform: translateX(-50%) scale3d(1.02,1.02,1); }
  78% { left: 76%; bottom: 28.5%; transform: translateX(-50%) scale3d(1.035,.985,1); }
  100% { left: 76%; bottom: 27%; transform: translateX(-50%) scale3d(1.055,.945,1); }
}
@keyframes goalkeeper-recover-left {
  from { left: 24%; bottom: 27%; transform: translateX(-50%) scale3d(1.055,.945,1); }
  42% { left: 35%; bottom: 29%; transform: translateX(-50%) scale3d(.98,1.02,1); }
  to { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
}
@keyframes goalkeeper-recover-centre {
  from { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1.06,.94,1); }
  45% { left: 50%; bottom: 28.2%; transform: translateX(-50%) scale3d(.985,1.015,1); }
  to { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
}
@keyframes goalkeeper-recover-right {
  from { left: 76%; bottom: 27%; transform: translateX(-50%) scale3d(1.055,.945,1); }
  42% { left: 65%; bottom: 29%; transform: translateX(-50%) scale3d(.98,1.02,1); }
  to { left: 50%; bottom: 27%; transform: translateX(-50%) scale3d(1,1,1); }
}
@keyframes goalkeeper-shadow-ready {
  from { opacity: .82; transform: translateX(-50%) scaleX(1.15); }
  to { opacity: .66; transform: translateX(-50%) scaleX(.9); }
}
@keyframes goalkeeper-shadow-flight {
  0%,18% { opacity: .68; transform: translateX(-50%) scaleX(.92); }
  52% { opacity: .18; transform: translateX(-50%) scaleX(.48); }
  78% { opacity: .4; transform: translateX(-50%) scaleX(.82); }
  100% { opacity: .86; transform: translateX(-50%) scaleX(1.34); }
}
@keyframes goalkeeper-shadow-recover {
  from { opacity: .86; transform: translateX(-50%) scaleX(1.34); }
  to { opacity: .7; transform: translateX(-50%) scaleX(1); }
}
@keyframes var-wheel-drop {
  from { opacity: 0; transform: translate3d(-50%,-155%,0) scale(.82); }
  72% { opacity: 1; transform: translate3d(-50%,-46.5%,0) scale(1.018); }
  to { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
}
@keyframes var-wheel-lift {
  from { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1); }
  to { opacity: 0; transform: translate3d(-50%,-158%,0) scale(.86); }
}
@keyframes var-wheel-halo-spin { to { transform: rotate(360deg); } }
@keyframes var-wheel-halo-breathe {
  from { transform: scale(.97); filter: blur(.48cqw) brightness(.92); }
  to { transform: scale(1.035); filter: blur(.62cqw) brightness(1.12); }
}
@keyframes var-wheel-spark {
  0% { opacity: 0; transform: translate3d(0,2cqw,0) scale(.5) rotate(0); }
  18% { opacity: .88; }
  64% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(var(--drift),-12cqw,0) scale(1.25) rotate(135deg); }
}
@keyframes var-wheel-active-frame {
  from { opacity: .48; }
  to { opacity: .9; }
}
@keyframes var-wheel-prize-flash {
  from { opacity: .5; }
  to { opacity: 1; }
}
@keyframes var-wheel-prize-text {
  from { transform: translateX(-50%) scale(1); filter: brightness(1); }
  to { transform: translateX(-50%) scale(1.065); filter: brightness(1.28) drop-shadow(0 0 .28cqw rgba(226,247,255,.95)); }
}
@keyframes var-prize-popup-in {
  from { opacity: 0; transform: translate3d(0,3%,0) scale(.78); }
  68% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes var-prize-popup-out {
  to { opacity: 0; transform: translate3d(0,1.5%,0) scale(.96); }
}
@keyframes win-cell-pulse { 50% { opacity: .4; transform: scale(.95); } }
@keyframes win-symbol-pulse { 50% { transform: translate3d(calc(-50% + var(--symbol-optical-x)), calc(-50% + var(--symbol-optical-y)), 0) scale(var(--symbol-pulse-scale)); filter: brightness(1.35) drop-shadow(0 0 .55em #fff); } }
@keyframes ref-lock { from { opacity: 0; transform: scale(1.8) rotate(-9deg); filter: brightness(2.5); } to { opacity: 1; transform: scale(1); } }
@keyframes target-spin { to { transform: rotate(360deg); } }
@keyframes goal-target-hint {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.16); filter: brightness(1.8) saturate(1.2); }
  70% { transform: scale(1.08); filter: brightness(1.35); }
}
@keyframes goal-target-hint-ring {
  0% { transform: scale(.78); opacity: .35; box-shadow: 0 0 .4cqw #fff; }
  45% { transform: scale(1.13); opacity: 1; box-shadow: 0 0 2cqw #fff, inset 0 0 1.3cqw #ffec52; }
  100% { transform: scale(1); opacity: .92; box-shadow: 0 0 1.4cqw #ffdf2b, inset 0 0 1cqw #ff6; }
}
@keyframes kick-left { 0% { transform: translate(-50%,0) scale(1) rotate(0); } 60%,100% { left: 23%; bottom: 47%; transform: translate(-50%,0) scale(.28) rotate(720deg); } }
@keyframes kick-centre { 0% { transform: translate(-50%,0) scale(1) rotate(0); } 60%,100% { left: 50%; bottom: 44%; transform: translate(-50%,0) scale(.28) rotate(720deg); } }
@keyframes kick-right { 0% { transform: translate(-50%,0) scale(1) rotate(0); } 60%,100% { left: 77%; bottom: 47%; transform: translate(-50%,0) scale(.28) rotate(720deg); } }
@keyframes popup-in { from { opacity: 0; transform: translateY(8%) scale(.55); } 70% { opacity: 1; } to { transform: none; } }
@keyframes gate-left-close { to { transform: translateX(0); } }
@keyframes gate-right-close { to { transform: translateX(0); } }
@keyframes gate-left-open { from { transform: translateX(0); } to { transform: translateX(-101%); } }
@keyframes gate-right-open { from { transform: translateX(0); } to { transform: translateX(101%); } }
@keyframes feature-popup-out { to { opacity: 0; transform: translateY(2%) scale(.97); } }
@keyframes bonus-total-win-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bonus-total-win-out { from { opacity: 1; } to { opacity: 0; transform: scale(.99); } }
@keyframes free-spins-award-in { from { opacity: 0; transform: translateY(2.5%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes free-spins-award-out { from { opacity: 1; } to { opacity: 0; transform: scale(.985); } }
@keyframes feature-halo-breathe { from { opacity: .56; transform: scale(.95); } to { opacity: .74; transform: scale(1.025); } }
@keyframes seam-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes big-win-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes ray-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes loading-ball { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.2cqw) rotate(180deg); } }
@keyframes rotate-device { 0%,100% { transform: rotate(-25deg); } 50% { transform: rotate(65deg); } }

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

@media (orientation: portrait) {
  .stage { visibility: hidden; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .dialog-pages { max-height: 48vh; }
  .dev-drawer { width: 24%; }
}

@media (pointer: coarse) {
  .hotspot::after { display: none; }
  .dev-toggle { min-width: 42px; }
}

.reduced-motion .goalkeeper-rig,
.reduced-motion .goalkeeper,
.reduced-motion .stadium-ambience span,
.reduced-motion .big-win { animation: none !important; }
.reduced-motion .var-wheel-rig,
.reduced-motion .var-wheel-halo,
.reduced-motion .var-wheel-halo::before,
.reduced-motion .var-wheel-particles i,
.reduced-motion .var-wheel-labels li,
.reduced-motion .var-wheel-labels li::before,
.reduced-motion .var-wheel-prize-icon,
.reduced-motion .var-prize-popup { animation: none !important; }
.reduced-motion .var-wheel-particles { display: none !important; }
.reduced-motion .logo-sting,
.reduced-motion .bonus-video-overlay { opacity: 0 !important; visibility: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .loading-ball,
  .goalkeeper-rig,
  .goalkeeper,
  .stadium-ambience span,
  .goal-targets button::before,
  .goal-targets button.is-hinting,
  .goal-targets button.is-hinting::before,
  .feature-award-halo,
  .var-wheel-rig,
  .var-wheel-halo,
  .var-wheel-halo::before,
  .var-wheel-particles i,
  .var-wheel-labels li,
  .var-wheel-labels li::before,
  .var-wheel-prize-icon,
  .var-prize-popup,
  .big-win,
  .big-win-rays { animation: none; }
  .var-wheel-particles { display: none; }
  .logo-sting,
  .bonus-video-overlay { opacity: 0 !important; visibility: hidden !important; }
}