/*
 * Original Vortangle online bonus games.
 * Screen-first playfields, with no physical cabinet or machine silhouette.
 */
@font-face {
  font-family: "Russo One";
  src: url("fonts/russo-one-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.online-originals-library {
  display: grid;
  gap: .8rem;
  padding-block-start: .35rem;
}

.online-originals-library > header {
  padding: .25rem .15rem;
}

.online-originals-library > header small {
  color: #a8f7f8;
  font: 850 .875rem/1.2 var(--mono);
  letter-spacing: .09em;
}

.online-originals-library > header h3 {
  margin: .2rem 0;
  color: #f7ffff;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.8rem);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.online-originals-library > header p {
  max-inline-size: 46rem;
  margin: 0;
  color: #9fc4ca;
  font-size: .875rem;
  line-height: 1.5;
}

.online-originals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

@media (min-width: 52rem) {
  .flow-hub-modal:has(#rewards-panel-bonus:not([hidden])) {
    inline-size: min(76rem, calc(100% - 2rem));
  }

  .flow-hub-modal:has(#rewards-panel-bonus:not([hidden])) .flow-hub-card {
    inline-size: 100%;
  }

  #rewards-panel-bonus .bonus-constellation-hero > :not(.bonus-constellation-sky) {
    max-inline-size: 31rem;
  }

  #rewards-panel-bonus .bonus-constellation-hero h3 {
    max-inline-size: 29rem;
  }
}

.online-original-card {
  --online-card-accent: #74f1e7;
  --online-card-shadow: #164c5b;
  position: relative;
  display: grid;
  min-inline-size: 0;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .7rem;
  overflow: hidden;
  padding: .72rem;
  border: .08rem solid color-mix(in oklab, var(--online-card-accent), transparent 50%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--online-card-accent), transparent 78%), transparent 42%),
    linear-gradient(145deg, rgb(10 47 59 / 97%), rgb(15 20 55 / 98%));
  box-shadow:
    0 .2rem 0 var(--online-card-shadow),
    0 .65rem 1.2rem rgb(0 5 20 / 26%),
    inset 0 .06rem 0 rgb(255 255 255 / 14%);
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}

.online-original-card:is(.is-starfalldrop, .is-bingo) {
  --online-card-accent: #ffd866;
  --online-card-shadow: #704d22;
}

.online-original-card.is-dice {
  --online-card-accent: #ff8dcf;
  --online-card-shadow: #6d305f;
}

.online-original-card.is-locked {
  filter: saturate(.34);
  opacity: .76;
}

.online-original-card.is-ready {
  border-color: var(--online-card-accent);
  box-shadow:
    0 .2rem 0 var(--online-card-shadow),
    0 0 1rem color-mix(in oklab, var(--online-card-accent), transparent 58%),
    inset 0 .06rem 0 rgb(255 255 255 / 20%);
}

.online-card-art {
  position: relative;
  display: grid;
  inline-size: 5.4rem;
  aspect-ratio: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: .22rem;
  padding: .48rem;
  border: .08rem solid rgb(255 255 255 / 25%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--online-card-accent), transparent 65%), transparent 48%),
    linear-gradient(145deg, #173d54, #211c59);
  box-shadow: inset 0 .08rem 0 rgb(255 255 255 / 16%);
}

.online-card-art i {
  display: grid;
  min-inline-size: 0;
  aspect-ratio: 1;
  place-items: center;
  border-radius: .38rem;
  background: color-mix(in oklab, var(--online-card-accent), transparent 76%);
  color: #fff;
  font: 900 .875rem/1 var(--mono);
  font-style: normal;
  text-shadow: 0 0 .5rem var(--online-card-accent);
}

.online-original-card.is-ready .online-card-art {
  animation: online-card-breathe 2.8s ease-in-out infinite alternate;
}

.online-original-card > div:nth-child(2) {
  min-inline-size: 0;
}

.online-original-card small {
  color: var(--online-card-accent);
  font: 850 .875rem/1.2 var(--mono);
  letter-spacing: .08em;
}

.online-original-card h3 {
  margin: .14rem 0 .22rem;
  color: #fff;
  font-size: 1rem;
  letter-spacing: -.025em;
}

.online-original-card p {
  margin: 0 0 .45rem;
  color: #a6c5ca;
  font-size: .875rem;
  line-height: 1.4;
}

.online-original-card [data-online-game-status] {
  display: block;
  color: color-mix(in oklab, var(--online-card-accent), white 18%);
  font: 800 .875rem/1.35 var(--mono);
}

.online-original-card > button {
  grid-column: 1 / -1;
  min-block-size: 2.85rem;
  border: .08rem solid rgb(255 255 255 / 76%);
  border-radius: .75rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--online-card-accent), white 25%), var(--online-card-accent));
  color: #123743;
  box-shadow: 0 .22rem 0 var(--online-card-shadow), inset 0 .08rem 0 rgb(255 255 255 / 60%);
  font-size: .875rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.online-original-card > button:is(:hover, :focus-visible) {
  outline: .14rem solid #fff;
  outline-offset: .12rem;
  filter: brightness(1.08);
  transform: translateY(-.08rem);
}

.online-original-card > button:active {
  transform: translateY(.12rem) scale(.985);
}

/* Full-viewport online presentation for all eleven games. */
.bonus-game-modal {
  inline-size: 100dvw;
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin: 0;
}

.bonus-game-modal::backdrop {
  background: #020714;
  backdrop-filter: none;
}

.bonus-game-modal[open] {
  animation: bonus-screen-arrive 320ms ease-out both;
}

.bonus-game-machine {
  min-block-size: 100dvh;
  max-block-size: 100dvh;
  gap: clamp(.38rem, 1dvh, .75rem);
  padding:
    max(.65rem, env(safe-area-inset-top))
    max(.72rem, env(safe-area-inset-right))
    max(.65rem, env(safe-area-inset-bottom))
    max(.72rem, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% -14%, color-mix(in oklab, var(--machine-accent), transparent 58%), transparent 36%),
    radial-gradient(circle at 95% 70%, color-mix(in oklab, var(--machine-secondary), transparent 76%), transparent 30%),
    linear-gradient(155deg, #0a3045, #0b1439 58%, #221441);
  box-shadow: none;
}

.bonus-game-machine.is-celebrating {
  animation: bonus-screen-celebrate 720ms ease-out both;
}

.bonus-game-machine::after {
  border-radius: 0;
}

.bonus-screen-aurora {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bonus-screen-aurora::before,
.bonus-screen-aurora::after {
  position: absolute;
  inline-size: 62dvw;
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: color-mix(in oklab, var(--machine-accent), transparent 78%);
  filter: blur(4rem);
  content: "";
  opacity: .55;
  transform: rotate(-14deg);
}

.bonus-screen-aurora::before {
  inset: 12% auto auto -18%;
}

.bonus-screen-aurora::after {
  inset: auto -22% 4% auto;
  background: color-mix(in oklab, var(--machine-secondary), transparent 82%);
  transform: rotate(18deg);
}

.bonus-game-machine[data-bonus-game="cascade"] {
  --machine-accent: #6ff9d9;
  --machine-secondary: #8b83ff;
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="matrix"]
) .bonus-machine-balance {
  display: none;
}

.bonus-game-machine:is([data-bonus-game="starfalldrop"], [data-bonus-game="bingo"]) {
  --machine-accent: #ffdf68;
  --machine-secondary: #68eaf1;
}

.bonus-game-machine[data-bonus-game="dice"] {
  --machine-accent: #ff8fcf;
  --machine-secondary: #ffd86a;
}

.online-original-scene {
  min-block-size: 0;
  grid-template-rows: minmax(17rem, 1fr) auto auto auto;
  align-content: stretch;
}

.online-game-stage {
  position: relative;
  display: grid;
  inline-size: min(64rem, 100%);
  min-block-size: min(53dvh, 31rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch;
  overflow: hidden;
  border: .08rem solid color-mix(in oklab, var(--machine-accent), transparent 48%);
  border-radius: 1.3rem;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in oklab, var(--machine-accent), transparent 76%), transparent 34%),
    radial-gradient(circle, rgb(255 255 255 / 55%) 0 .045rem, transparent .065rem) 0 0 / 1.25rem 1.25rem,
    linear-gradient(155deg, rgb(7 32 53 / 96%), rgb(14 12 48 / 98%));
  box-shadow:
    0 1rem 3rem rgb(0 0 0 / 36%),
    inset 0 0 2rem color-mix(in oklab, var(--machine-accent), transparent 88%);
  isolation: isolate;
}

.online-game-depth {
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  aspect-ratio: 1;
  border: .08rem solid color-mix(in oklab, var(--machine-secondary), transparent 76%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.online-game-depth.is-far {
  inline-size: 78%;
}

.online-game-depth.is-near {
  inline-size: 48%;
  transform: translate(-50%, -50%) rotate(24deg);
}

.online-game-feature-bar {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .62rem .78rem;
  border-block-end: .08rem solid rgb(166 238 241 / 18%);
  background: rgb(4 20 38 / 66%);
  backdrop-filter: blur(.65rem);
}

.online-game-feature-bar span {
  display: grid;
  gap: .08rem;
}

.online-game-feature-bar span:last-child {
  text-align: end;
}

.online-game-feature-bar small,
.online-game-meter small {
  color: #93bac3;
  font: 800 .875rem/1 var(--mono);
  letter-spacing: .08em;
}

.online-game-feature-bar strong {
  color: #fff;
  font: 950 .875rem/1.1 var(--mono);
}

.online-game-feature-bar b {
  color: #ffe46b;
  font-size: 1rem;
}

.online-game-feature-bar i {
  color: #ffe46b;
  font-style: normal;
}

.quantum-dice-help-pill {
  position: absolute;
  z-index: 12;
  inset-block-start: clamp(.55rem, 1.5cqi, .9rem);
  inset-inline-end: clamp(.55rem, 1.5cqi, .9rem);
  display: grid;
  min-inline-size: 3.5rem;
  min-block-size: 2.75rem;
  place-items: center;
  padding: .45rem .72rem;
  border: .1rem solid #fff3a1;
  border-radius: 999px;
  background: linear-gradient(145deg, #763ec5, #d63d9f 58%, #ff9d51);
  color: #fff;
  box-shadow: 0 .18rem 0 #45215e, 0 0 .9rem rgb(255 121 221 / 54%);
  font: 400 .875rem/1 var(--bonus-display);
  letter-spacing: .08em;
  cursor: pointer;
}

.quantum-dice-help-pill[hidden] {
  display: none;
}

.quantum-dice-help-pill:focus-visible {
  outline: .18rem solid #fff;
  outline-offset: .16rem;
}

.online-game-playfield {
  position: relative;
  z-index: 2;
  display: grid;
  min-block-size: 0;
  place-items: center;
  padding: .8rem;
}

.online-game-meter {
  display: grid;
  inline-size: min(34rem, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.online-game-meter > span {
  display: grid;
  justify-items: center;
  gap: .12rem;
  padding: .48rem .62rem;
  border: .08rem solid rgb(151 228 234 / 24%);
  border-radius: .72rem;
  background: rgb(5 28 46 / 72%);
}

.online-game-meter strong {
  color: #fff;
  font: 950 .875rem/1 var(--mono);
}

.online-game-action {
  inline-size: min(28rem, 100%);
}

/* Prism Cascade */
.online-cascade-grid {
  display: grid;
  inline-size: min(25rem, 92%);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.3rem, 1.2vw, .6rem);
  perspective: 45rem;
}

.online-cascade-grid > span {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: .08rem solid rgb(255 255 255 / 50%);
  background:
    radial-gradient(circle at 38% 30%, rgb(255 255 255 / 50%), transparent 17%),
    linear-gradient(145deg, color-mix(in oklab, var(--machine-accent), white 12%), color-mix(in oklab, var(--machine-secondary), #152049 48%));
  color: #fff;
  box-shadow:
    0 .25rem 0 rgb(10 31 60 / 78%),
    0 0 .8rem color-mix(in oklab, var(--machine-accent), transparent 72%);
  font-size: clamp(1rem, 3.4vw, 1.7rem);
  font-weight: 950;
}

.online-cascade-grid.is-tumbling > span {
  --prism-drop-height: 28rem;
  --prism-drop-delay: 80ms;
  animation: online-prism-drop 1.3s cubic-bezier(.2, .72, .2, 1) both;
  animation-delay: var(--prism-drop-delay);
}

.online-cascade-grid.is-tumbling > span:nth-child(5n + 1) {
  --prism-drop-delay: 180ms;
}

.online-cascade-grid.is-tumbling > span:nth-child(5n + 2) {
  --prism-drop-height: 34rem;
  --prism-drop-delay: 20ms;
}

.online-cascade-grid.is-tumbling > span:nth-child(5n + 3) {
  --prism-drop-height: 38rem;
  --prism-drop-delay: 125ms;
}

.online-cascade-grid.is-tumbling > span:nth-child(5n + 4) {
  --prism-drop-height: 31rem;
  --prism-drop-delay: 0ms;
}

.online-cascade-grid.is-tumbling > span:nth-child(5n) {
  --prism-drop-height: 36rem;
  --prism-drop-delay: 65ms;
}

.online-cascade-grid > span.is-winning {
  border-color: #fff59c;
  background: linear-gradient(145deg, #fff6a8, #ffae58 55%, #f154c5);
  color: #5b315c;
  box-shadow: 0 0 1.25rem #ffe872;
  animation: online-prism-win 620ms var(--bonus-spring) both;
}

/* Starfall Drop */
.online-starfalldrop-board {
  position: relative;
  inline-size: min(30rem, 96%);
  block-size: min(20rem, 39dvh);
  min-block-size: 15rem;
  container-type: inline-size;
}

.online-starfalldrop-pegs {
  position: absolute;
  inset: 1.9rem 3rem 3.25rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: center;
}

.online-starfalldrop-pegs i {
  inline-size: .5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .65rem var(--machine-secondary);
}

.online-starfalldrop-pegs i:nth-child(7n + 1),
.online-starfalldrop-pegs i:nth-child(7n + 7) {
  opacity: .36;
}

.online-starfalldrop-launch,
.online-starfalldrop-token {
  position: absolute;
  z-index: 4;
  inset: .3rem auto auto 50%;
  color: #fff18a;
  filter: drop-shadow(0 0 .7rem #ffcf55);
  font-size: 1.7rem;
  transform: translateX(-50%);
}

.online-starfalldrop-token {
  --landing-x: 0rem;
}

.online-starfalldrop-token[data-lane="0"] { --landing-x: -11.3rem; }
.online-starfalldrop-token[data-lane="1"] { --landing-x: -7.55rem; }
.online-starfalldrop-token[data-lane="2"] { --landing-x: -3.78rem; }
.online-starfalldrop-token[data-lane="3"] { --landing-x: 0rem; }
.online-starfalldrop-token[data-lane="4"] { --landing-x: 3.78rem; }
.online-starfalldrop-token[data-lane="5"] { --landing-x: 7.55rem; }
.online-starfalldrop-token[data-lane="6"] { --landing-x: 11.3rem; }

.online-starfalldrop-token.is-dropping {
  animation: online-starfalldrop-drop 1.6s cubic-bezier(.42, 0, .75, 1) both;
}

.online-starfalldrop-token.is-landed {
  inset-block-start: calc(100% - 3.3rem);
  transform: translateX(calc(-50% + var(--landing-x)));
}

.online-starfalldrop-bins {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .18rem;
}

.online-starfalldrop-bins > span {
  display: grid;
  min-block-size: 2.65rem;
  place-items: center;
  border: .08rem solid rgb(255 255 255 / 38%);
  border-radius: .45rem .45rem .7rem .7rem;
  background: rgb(7 33 52 / 84%);
  color: #d5f8f6;
  font: 950 .875rem/1 var(--mono);
}

.online-starfalldrop-bins > span.is-winning {
  border-color: #fff;
  background: linear-gradient(180deg, #fff3a2, #ffc557);
  color: #603d23;
  box-shadow: 0 0 1rem #ffdf68;
}

/* Quantum Dice */
.online-dice-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 11rem));
  gap: clamp(.7rem, 4vw, 2rem);
  place-items: center;
  perspective: 45rem;
}

.online-dice-field > strong {
  grid-column: 1 / -1;
  color: #fff0a0;
  font: 950 .875rem/1 var(--mono);
  letter-spacing: .08em;
  text-shadow: 0 0 .7rem #ff8cca;
}

/* Orbit Bingo */
.online-bingo-grid {
  display: grid;
  inline-size: min(25rem, 90%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.35rem, 1.5vw, .7rem);
}

.online-bingo-grid > span {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: .08rem solid rgb(255 255 255 / 42%);
  border-radius: 50%;
  background: rgb(15 50 65 / 78%);
  color: #b9dde0;
  box-shadow: inset 0 0 1rem rgb(99 235 240 / 12%);
}

.online-bingo-grid b {
  font: 950 clamp(1rem, 4vw, 1.8rem)/1 var(--mono);
}

.online-bingo-grid i {
  position: absolute;
  color: #fff;
  font-size: .875rem;
  font-style: normal;
  opacity: 0;
}

.online-bingo-grid > span.is-drawn {
  background: radial-gradient(circle at 38% 28%, #fffbd1, #ffda64 38%, #f582a9 72%);
  color: #603957;
  box-shadow: 0 0 1.3rem #ffdb69;
}

.online-bingo-grid > span.is-new-draw {
  animation: online-bingo-draw 260ms var(--bonus-spring) both;
}

.online-bingo-grid > span.is-drawn i {
  opacity: .52;
  transform: translate(1.3rem, -1.3rem);
}

@keyframes online-card-breathe {
  to { transform: translateY(-.12rem); filter: brightness(1.08); }
}

@keyframes bonus-screen-arrive {
  from { opacity: 0; filter: brightness(.72) saturate(.82); }
  to { opacity: 1; filter: brightness(1) saturate(1); }
}

@keyframes bonus-screen-celebrate {
  0%,
  100% { filter: brightness(1) saturate(1); }
  36% { filter: brightness(1.1) saturate(1.12); }
  68% { filter: brightness(1.035) saturate(1.05); }
}

@keyframes online-prism-drop {
  0% {
    opacity: 0;
    transform: translateY(calc(0rem - var(--prism-drop-height))) scale(.88);
  }
  72% {
    opacity: 1;
    transform: translateY(.32rem) scale(1.025, .965);
  }
  86% { transform: translateY(-.14rem) scale(.99, 1.01); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes online-prism-win {
  0% { transform: scale(1); }
  52% { transform: scale(1.16) rotate(3deg); }
  to { transform: scale(.92); opacity: .62; }
}

@keyframes online-starfalldrop-drop {
  0% { transform: translate(-50%, 0) scale(.8); }
  17% { transform: translate(calc(-50% - .8rem), 3rem) scale(1); }
  34% { transform: translate(calc(-50% + 1.1rem), 6rem); }
  51% { transform: translate(calc(-50% - 1.4rem), 9rem); }
  70% { transform: translate(calc(-50% + var(--landing-x)), 12rem); }
  88% { transform: translate(calc(-50% + var(--landing-x)), calc(100% + 13.7rem)) scale(1.08); }
  to { transform: translate(calc(-50% + var(--landing-x)), calc(100% + 13.2rem)) scale(1); }
}

@keyframes online-bingo-draw {
  0% { opacity: .35; transform: translateZ(.35rem) scale(.42); }
  68% { opacity: 1; transform: translateZ(1.55rem) scale(1.13); }
  to { opacity: 1; transform: translateZ(1.05rem) scale(1.055); }
}

@media (max-width: 48rem) {
  .online-originals-grid {
    grid-template-columns: 1fr;
  }

  .online-game-stage {
    min-block-size: min(50dvh, 27rem);
  }

  .online-original-scene {
    grid-template-rows: minmax(15rem, 1fr) auto auto auto;
  }
}

@media (max-width: 32rem) {
  .online-original-card {
    grid-template-columns: 4.8rem minmax(0, 1fr);
  }

  .online-card-art {
    inline-size: 4.7rem;
  }

  .online-game-stage {
    min-block-size: min(46dvh, 23rem);
    border-inline: 0;
    border-radius: .9rem;
  }

  .online-game-playfield {
    padding: .48rem;
  }

  .online-dice-field {
    grid-template-columns: repeat(2, minmax(5.8rem, 8rem));
    gap: .6rem;
  }

  .online-starfalldrop-token[data-lane="0"] { --landing-x: -8.2rem; }
  .online-starfalldrop-token[data-lane="1"] { --landing-x: -5.45rem; }
  .online-starfalldrop-token[data-lane="2"] { --landing-x: -2.72rem; }
  .online-starfalldrop-token[data-lane="4"] { --landing-x: 2.72rem; }
  .online-starfalldrop-token[data-lane="5"] { --landing-x: 5.45rem; }
  .online-starfalldrop-token[data-lane="6"] { --landing-x: 8.2rem; }

}

@media (max-width: 48rem) and (max-height: 44rem) and (orientation: landscape) {
  .bonus-game-machine {
    grid-template-columns: minmax(12rem, .55fr) minmax(20rem, 1.45fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bonus-machine-header {
    grid-column: 1 / -1;
  }

  .bonus-machine-title {
    align-self: center;
    padding-inline: .8rem;
  }

  .bonus-scene,
  .online-original-scene {
    grid-column: 2;
    grid-row: 2;
    min-block-size: 0;
  }

  .online-game-stage {
    min-block-size: min(55dvh, 23rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-game-modal[open],
  .bonus-game-machine.is-celebrating,
  .online-original-card.is-ready .online-card-art,
  .online-cascade-grid.is-tumbling > span,
  .online-cascade-grid > span.is-winning,
  .online-starfalldrop-token.is-dropping,
  .online-starfalldrop-bins .starfall-prize-bay.is-winning,
  .starfall-impact-burst > i,
  .online-bingo-grid > span.is-new-draw {
    animation: none;
  }

  .bonus-progress-marquee :is(
    #bonus-marquee-turns,
    #bonus-marquee-win,
    #bonus-marquee-balance
  ).is-counting,
  .bonus-progress-marquee :is(
    #bonus-marquee-turns,
    #bonus-marquee-balance
  ).is-morphing {
    animation: none;
  }

  .online-starfalldrop-token.is-dropping {
    inset-block-start: calc(100% - 3.3rem);
    transform: translateX(calc(-50% + var(--landing-x)));
  }

  .starfall-peg-spark {
    display: none;
  }
}

/* Shared 2026 status crown: remaining plays and the Spark wallet are the two
   primary readouts; the last result remains available without competing with
   the resources that determine what the player can do next. */
.bonus-progress-marquee {
  position: relative;
  z-index: 7;
  display: grid;
  inline-size: min(60rem, 100%);
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .72fr) minmax(0, 1.24fr);
  justify-self: center;
  align-items: stretch;
  gap: clamp(.18rem, .55vw, .52rem);
  padding: clamp(.18rem, .42vw, .36rem);
  overflow: hidden;
  border: .1rem solid rgb(221 251 255 / 88%);
  border-radius: clamp(.8rem, 1.5vw, 1.3rem);
  background:
    linear-gradient(90deg, rgb(88 230 255 / 16%), transparent 22% 78%, rgb(113 255 209 / 13%)),
    linear-gradient(165deg, rgb(12 31 70 / 97%), rgb(5 9 35 / 98%) 52%, rgb(8 27 43 / 97%));
  box-shadow:
    0 .26rem 0 #020719,
    0 .55rem 1.2rem rgb(0 0 0 / 48%),
    0 0 1.25rem color-mix(in oklab, var(--machine-accent), transparent 40%),
    inset 0 .08rem 0 rgb(255 255 255 / 32%),
    inset 0 0 1rem rgb(80 221 255 / 8%);
  container-name: bonus-progress;
  container-type: inline-size;
  isolation: isolate;
}

.bonus-progress-marquee::before {
  position: absolute;
  z-index: -1;
  inset: -.8rem 6%;
  background:
    radial-gradient(ellipse at 24% 50%, rgb(81 179 255 / 44%), transparent 42%),
    radial-gradient(ellipse at 76% 50%, rgb(70 255 198 / 36%), transparent 42%);
  content: "";
  filter: blur(.68rem);
  opacity: .86;
}

.bonus-progress-marquee > span {
  position: relative;
  display: grid;
  min-inline-size: 0;
  grid-template-areas:
    "symbol label"
    "symbol value";
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  column-gap: clamp(.24rem, .7vw, .62rem);
  row-gap: .08rem;
  overflow: hidden;
  padding: clamp(.38rem, .7dvh, .65rem) clamp(.24rem, .72vw, .72rem);
  border: .08rem solid rgb(255 255 255 / 76%);
  border-radius: clamp(.55rem, 1vw, .9rem);
  background:
    radial-gradient(circle at 26% 8%, rgb(255 255 255 / 28%), transparent 30%),
    linear-gradient(155deg, #195897, #24215f 58%, #401a61);
  box-shadow:
    inset 0 .08rem 0 rgb(255 255 255 / 42%),
    inset 0 -.32rem .66rem rgb(1 4 28 / 40%);
}

.bonus-progress-marquee > span::before {
  grid-area: symbol;
  display: grid;
  inline-size: clamp(1.45rem, 2.8vw, 2.2rem);
  aspect-ratio: 1;
  place-items: center;
  border: .07rem solid rgb(255 255 255 / 62%);
  border-radius: 50%;
  background: rgb(2 12 41 / 42%);
  color: #fff;
  content: attr(data-status-symbol);
  font: 1000 clamp(.875rem, 1.5vw, 1.12rem)/1 var(--mono);
  text-shadow: 0 0 .45rem currentColor;
  box-shadow: inset 0 .05rem 0 rgb(255 255 255 / 32%), 0 0 .55rem rgb(75 218 255 / 30%);
}

.bonus-progress-marquee > span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / 12%) 42%, transparent 58%);
  content: "";
  pointer-events: none;
}

.bonus-progress-marquee > span.is-primary {
  border-width: .11rem;
  border-color: rgb(237 254 255 / 94%);
  box-shadow:
    inset 0 .09rem 0 rgb(255 255 255 / 54%),
    inset 0 -.34rem .7rem rgb(1 4 28 / 38%),
    0 0 .8rem rgb(63 181 255 / 38%);
}

.bonus-progress-marquee > span.is-turns {
  background:
    radial-gradient(circle at 28% 8%, rgb(255 255 255 / 40%), transparent 28%),
    linear-gradient(152deg, #2e90d0, #3746b3 52%, #65278f);
}

.bonus-progress-marquee > span.is-turns::before {
  background: linear-gradient(145deg, #092d62, #31146c);
  color: #9ff7ff;
  box-shadow: inset 0 .05rem 0 rgb(255 255 255 / 38%), 0 0 .7rem rgb(103 235 255 / 50%);
}

.bonus-progress-marquee > span.is-win {
  background:
    radial-gradient(circle at 28% 10%, rgb(255 255 255 / 30%), transparent 28%),
    linear-gradient(160deg, #86553b, #6b285c 54%, #352052);
  box-shadow:
    inset 0 .08rem 0 rgb(255 255 255 / 38%),
    inset 0 -.32rem .68rem rgb(29 6 48 / 42%),
    0 0 .55rem rgb(255 125 79 / 24%);
}

.bonus-progress-marquee > span.is-win::before {
  inline-size: clamp(1.2rem, 2.2vw, 1.7rem);
  border-color: rgb(255 227 151 / 58%);
  background: rgb(57 18 57 / 48%);
  color: #ffe59a;
}

.bonus-progress-marquee > span.is-balance {
  background:
    radial-gradient(circle at 28% 8%, rgb(255 255 255 / 44%), transparent 28%),
    linear-gradient(152deg, #74c45e, #139d92 54%, #126383);
  box-shadow:
    inset 0 .09rem 0 rgb(255 255 255 / 58%),
    inset 0 -.34rem .7rem rgb(2 61 80 / 38%),
    0 0 .9rem rgb(63 238 194 / 46%);
}

.bonus-progress-marquee > span.is-balance::before {
  background: linear-gradient(145deg, #0b583e, #075072);
  color: #eaff99;
  box-shadow: inset 0 .05rem 0 rgb(255 255 255 / 40%), 0 0 .72rem rgb(100 255 188 / 50%);
}

.bonus-progress-marquee small {
  z-index: 1;
  grid-area: label;
  justify-self: center;
  color: #fff;
  font: 1000 clamp(.875rem, .49rem + .24vw, .875rem)/1 var(--mono);
  letter-spacing: .085em;
  text-align: center;
  text-shadow: 0 .1rem .18rem rgb(0 0 0 / 72%);
}

.bonus-progress-marquee strong {
  z-index: 1;
  display: flex;
  grid-area: value;
  min-inline-size: 0;
  align-items: baseline;
  justify-content: center;
  gap: .32rem;
  color: #fff;
  font: 1000 clamp(1.8rem, 1.05rem + 3vw, 4.1rem)/.8 var(--mono);
  letter-spacing: -.075em;
  text-shadow:
    0 .12rem 0 rgb(5 16 54 / 74%),
    0 0 .55rem rgb(255 255 255 / 54%);
}

.bonus-progress-marquee .is-win strong {
  color: #fff5d4;
  font-size: clamp(1.15rem, .75rem + 1.6vw, 2.55rem);
  text-shadow:
    0 .12rem 0 #4c1f4e,
    0 0 .42rem rgb(255 235 184 / 72%);
}

.bonus-progress-marquee strong b {
  font: inherit;
}

.bonus-progress-marquee strong em {
  max-inline-size: 8rem;
  overflow: hidden;
  color: #fff3b4;
  font: 1000 clamp(.875rem, .36rem + .24vw, .875rem)/1.05 var(--mono);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-shadow: 0 .08rem .18rem rgb(0 0 0 / 72%);
}

@container bonus-progress (max-width: 28rem) {
  .bonus-progress-marquee > span {
    grid-template-areas:
      "label"
      "value";
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .bonus-progress-marquee > span::before {
    display: none;
  }

  .bonus-progress-marquee small {
    letter-spacing: .045em;
  }
}

.bonus-progress-marquee :is(#bonus-marquee-turns, #bonus-marquee-win).is-counting {
  animation: bonus-count-down 620ms cubic-bezier(.18, 1.35, .3, 1) both;
}

.bonus-progress-marquee :is(#bonus-marquee-turns, #bonus-marquee-balance).is-morphing {
  animation: bonus-tally-morph 280ms ease-in-out infinite alternate;
  transform-origin: 50% 68%;
}

@keyframes bonus-tally-morph {
  to {
    scale: 1.12;
    filter: brightness(1.5) saturate(1.2);
    text-shadow:
      0 .14rem 0 rgb(5 16 54 / 74%),
      0 0 .7rem #fff,
      0 0 1.2rem #ffea66;
  }
}

/* Distinct, saturated space stages. These use only original gradients and
   geometric star/ring motifs, with contrast kept behind the play objects. */
.bonus-game-machine[data-bonus-game="wheel"] {
  background:
    radial-gradient(circle at 50% 42%, rgb(255 215 103 / 24%), transparent 28%),
    radial-gradient(circle at 12% 55%, rgb(27 205 189 / 24%), transparent 30%),
    radial-gradient(circle at 88% 50%, rgb(196 45 126 / 23%), transparent 32%),
    linear-gradient(145deg, #03131d 0%, #071c2c 48%, #170d20 100%);
}

.bonus-game-machine[data-bonus-game="matrix"] {
  background:
    radial-gradient(circle at 18% 45%, rgb(74 229 255 / 42%), transparent 25%),
    radial-gradient(circle at 82% 38%, rgb(255 80 206 / 48%), transparent 28%),
    radial-gradient(circle at 50% 92%, rgb(151 88 255 / 52%), transparent 38%),
    linear-gradient(145deg, #0b3270 0%, #23105d 50%, #68195f 100%);
}

.bonus-game-machine .bonus-machine-title {
  max-block-size: 10rem;
  overflow: clip;
}

.bonus-game-machine.is-feature-started .bonus-machine-title {
  pointer-events: none;
  animation: bonus-title-depart 1.1s cubic-bezier(.3, 0, .16, 1) forwards;
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="starfalldrop"],
  [data-bonus-game="dice"],
  [data-bonus-game="bingo"]
) {
  background:
    radial-gradient(circle at 14% 44%, color-mix(in oklab, var(--machine-accent), transparent 48%), transparent 26%),
    radial-gradient(circle at 86% 34%, color-mix(in oklab, var(--machine-secondary), transparent 44%), transparent 29%),
    radial-gradient(circle at 50% 96%, rgb(226 66 204 / 36%), transparent 38%),
    linear-gradient(145deg, #06365e 0%, #151256 50%, #57154f 100%);
}

.bonus-screen-aurora {
  background:
    repeating-conic-gradient(from 22deg at 50% 55%, rgb(255 255 255 / 8%) 0deg 2deg, transparent 2deg 18deg),
    radial-gradient(circle at 50% 54%, transparent 0 18%, rgb(255 255 255 / 10%) 18.5% 19%, transparent 19.5% 31%, rgb(255 255 255 / 7%) 31.5% 32%, transparent 32.5%);
  opacity: .86;
}

@media (max-width: 32rem) {
  .bonus-progress-marquee {
    gap: .2rem;
    padding: .18rem;
    border-radius: .72rem;
  }

  .bonus-progress-marquee > span {
    padding: .34rem .12rem;
    border-radius: .48rem;
  }

  .bonus-progress-marquee strong {
    font-size: clamp(1.15rem, 7vw, 1.95rem);
  }

  .bonus-progress-marquee .is-win strong {
    font-size: clamp(1.35rem, 8vw, 2.25rem);
  }

  .bonus-progress-marquee strong em {
    display: none;
  }
}

@media (max-width: 48rem) and (max-height: 44rem) and (orientation: landscape) {
  .bonus-progress-marquee {
    inline-size: min(44rem, 100%);
  }

  .bonus-progress-marquee > span {
    padding-block: .25rem;
  }

  .bonus-progress-marquee strong {
    font-size: clamp(1.2rem, 4dvh, 2rem);
  }
}

html[data-battery-saver="true"] :is(
  .bonus-screen-aurora,
  .online-game-depth,
  .starfall-peg-spark
) {
  display: none;
}

html[data-battery-saver="true"] .online-original-card.is-ready .online-card-art {
  animation: none;
}

@media (forced-colors: active) {
  .online-original-card,
  .online-card-art,
  .online-game-stage,
  .online-game-meter > span,
  .online-cascade-grid > span,
  .online-starfalldrop-bins > span,
  .online-bingo-grid > span {
    border-color: CanvasText;
  }

  .online-original-card.is-ready,
  .online-cascade-grid > span.is-winning,
  .online-starfalldrop-bins > span.is-winning,
  .online-bingo-grid > span.is-drawn {
    outline: .15rem solid Highlight;
  }
}

/*
 * Wormhole Matrix is a full-field reel game. The former cabinet shell, arch,
 * rails, and reactor have been removed so the symbols own the play area.
 */
.bonus-matrix-scene {
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
}

/* Starfall launch rail, graphical countdown, and large multiplier lettering. */
.online-starfalldrop-token.is-aiming {
  inset: .25rem auto auto 50%;
  animation: starfall-launch-sweep 2s ease-in-out both;
  will-change: transform;
}

.online-starfalldrop-board::before {
  position: absolute;
  z-index: 2;
  inset: 1.1rem 7% auto;
  block-size: .28rem;
  border: .08rem solid rgb(255 255 255 / 86%);
  border-radius: 99rem;
  background: linear-gradient(90deg, #38dfff, #fff6a6 50%, #ff4fbd);
  box-shadow: 0 0 .85rem #59e8ff, 0 0 1.4rem rgb(255 72 189 / 46%);
  content: "";
}

.starfall-drop-countdown {
  position: absolute;
  z-index: 9;
  inset: clamp(2.8rem, 9cqi, 4.2rem) auto auto 50%;
  display: grid;
  min-inline-size: clamp(8rem, 30cqi, 14rem);
  justify-items: center;
  padding: .38rem .8rem .52rem;
  border: .14rem solid #fff;
  border-radius: 1rem;
  background: linear-gradient(155deg, #fff070, #ff884e 54%, #cf32a3);
  color: #2a1336;
  box-shadow: 0 .32rem 0 #67235f, 0 0 1.4rem rgb(255 200 78 / 74%);
  font-family: var(--bonus-display);
  line-height: .82;
  pointer-events: none;
  transform: translateX(-50%);
}

.starfall-drop-countdown small {
  font: 400 clamp(.875rem, 2.8cqi, 1.15rem)/1 var(--bonus-display);
  letter-spacing: .08em;
}

.starfall-drop-countdown b {
  font: 400 clamp(2.8rem, 12cqi, 6.2rem)/.82 var(--bonus-display);
  text-shadow: 0 .08rem 0 rgb(255 255 255 / 64%);
}

.online-starfalldrop-bins > span {
  font: 400 clamp(.95rem, 3.5cqi, 1.75rem)/1 var(--bonus-display);
  text-shadow: 0 .08rem 0 #000;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-action {
  font: 400 clamp(1.25rem, 4vw, 2rem)/1 var(--bonus-display);
  letter-spacing: .06em;
}

@keyframes starfall-launch-sweep {
  0% { transform: translateX(calc(-50% - 42cqi)) rotate(-16deg); }
  22% { transform: translateX(calc(-50% + 42cqi)) rotate(16deg); }
  44% { transform: translateX(calc(-50% - 42cqi)) rotate(-16deg); }
  66% { transform: translateX(calc(-50% + 42cqi)) rotate(16deg); }
  82% { transform: translateX(calc(-50% - 42cqi)) rotate(-16deg); }
  100% { transform: translateX(calc(-50% + var(--launch-end))) rotate(0); }
}

.bonus-game-machine[data-bonus-game="starfalldrop"] :is(
  .bonus-machine-title p,
  .online-game-feature-bar small,
  .online-game-feature-bar strong,
  .online-game-meter small,
  .online-game-meter strong,
  .bonus-scene-status,
  .online-game-action
) {
  font-family: var(--bonus-display);
  font-weight: 400;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-feature-bar small,
.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-meter small {
  font-size: clamp(.875rem, 1.7vw, .88rem);
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-feature-bar strong {
  font-size: clamp(.92rem, 2.5vw, 1.35rem);
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-feature-bar b,
.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-meter strong {
  font-size: clamp(1.4rem, 4.2vw, 2.35rem);
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .bonus-scene-status {
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  letter-spacing: .025em;
}

.bonus-game-machine[data-bonus-game="starfalldrop"]:has(.online-starfalldrop-token.is-aiming) .online-game-action:not(:disabled) {
  border-color: #fff;
  background: linear-gradient(145deg, #fff36f, #ff9950 50%, #f13caf);
  color: #25143d;
  filter: none;
  opacity: 1;
  box-shadow: 0 .3rem 0 #762b68, 0 0 1.25rem rgb(255 218 85 / 64%);
  animation: starfall-drop-button-countdown 560ms ease-in-out infinite alternate;
}

.bonus-game-machine[data-bonus-game="starfalldrop"]:has(.online-starfalldrop-board.is-auto-drop) .online-game-action:disabled {
  border-color: rgb(255 255 255 / 72%);
  background: linear-gradient(145deg, #8eeaff, #7978ff 52%, #bc4fd7);
  color: #fff;
  filter: saturate(.82);
  opacity: .76;
  box-shadow: 0 .3rem 0 #392c79, 0 0 .9rem rgb(108 210 255 / 40%);
}

@keyframes starfall-drop-button-countdown {
  to {
    filter: brightness(1.16) saturate(1.12);
    box-shadow: 0 .3rem 0 #762b68, 0 0 1.7rem rgb(255 218 85 / 82%);
  }
}

@media (max-width: 48rem) {
  .bonus-matrix-scene {
    grid-template-rows: minmax(7.5rem, 1fr) auto auto;
    padding-block-end: max(.4rem, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .bonus-matrix-scene .bonus-action-row {
    flex: 0 0 auto;
    padding-block-end: max(.25rem, env(safe-area-inset-bottom));
  }

  .bonus-matrix-scene .wormhole-machine {
    min-block-size: 0;
    max-block-size: none;
  }

  .bonus-matrix-scene .wormhole-reels {
    min-block-size: 0;
  }
}

/*
 * Sphere-scale bonus presentation.
 * Each playfield takes the largest size the live viewport can hold while the
 * action dock remains visible without scrolling.
 */
.bonus-game-machine {
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.bonus-machine-title {
  align-self: start;
}

.bonus-machine-title > [hidden] {
  display: none;
}

.bonus-machine-title p {
  color: #d1e8eb;
  font-size: clamp(.875rem, .7rem + .3vw, .94rem);
}

.bonus-scene {
  min-block-size: 0;
  align-content: center;
  overflow: hidden;
}

.bonus-wheel-scene {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.galactic-wheel-stage {
  inline-size: min(52rem, 94dvw, calc(100dvh - 20.5rem));
  max-inline-size: 100%;
  aspect-ratio: 1;
}

.galactic-wheel {
  inline-size: 90%;
  border-width: clamp(.52rem, 1.2vw, .82rem);
  box-shadow:
    0 .72rem 0 #35445f,
    0 .92rem 0 #111a31,
    0 1.6rem 2.6rem rgb(0 0 0 / 58%),
    0 0 2.8rem color-mix(in oklab, var(--machine-secondary), transparent 34%),
    inset 0 0 0 .24rem rgb(8 24 42 / 66%),
    inset 0 0 1.6rem rgb(255 255 255 / 52%);
}

.galactic-wheel > span {
  --wheel-segment-radius: clamp(-13.6rem, -19dvw, -6.1rem);

  inline-size: clamp(2.7rem, 6dvw, 4.5rem);
  border-width: .16rem;
  background:
    radial-gradient(circle at 35% 25%, #fff 0 7%, transparent 8%),
    linear-gradient(155deg, #fff, #e9f9f4 72%);
  box-shadow:
    0 .28rem 0 rgb(20 37 58 / 88%),
    0 .5rem .7rem rgb(0 6 20 / 42%),
    0 0 0 .1rem rgb(5 20 38 / 55%),
    inset 0 .1rem 0 #fff;
  transform:
    translate(-50%, -50%)
    rotate(var(--segment-angle))
    translateY(var(--wheel-segment-radius))
    scale(1);
}

.galactic-wheel > span .bonus-symbol {
  inline-size: 76%;
  block-size: 76%;
  filter:
    drop-shadow(0 .1rem 0 rgb(4 17 34 / 82%))
    drop-shadow(0 0 .14rem #fff);
}

.galactic-wheel > span[data-bonus-symbol="stardust"],
.galactic-wheel > span[data-bonus-symbol="supernova"] { color: #a85b00; }
.galactic-wheel > span[data-bonus-symbol="current"] { color: #c31f55; }
.galactic-wheel > span[data-bonus-symbol="plasma"] { color: #5031c8; }
.galactic-wheel > span[data-bonus-symbol="recycler"] { color: #006d70; }
.galactic-wheel > span[data-bonus-symbol="hyper"] { color: #71289c; }
.galactic-wheel > span[data-bonus-symbol="orbit"] { color: #236c25; }

.galactic-wheel-pointer {
  inset-block-start: -.35rem;
  inline-size: clamp(.625rem, 1.2dvw, .85rem);
  block-size: clamp(2.9rem, 5.6dvw, 3.9rem);
  border-width: .06rem;
  border-radius: .3rem .3rem .42rem .42rem;
}

.galactic-wheel-pointer::before {
  inset-block-start: .2rem;
  inline-size: clamp(.22rem, .44dvw, .31rem);
  border-width: .06rem;
}

.galactic-wheel-pointer i {
  inset-block-end: -.36rem;
  inline-size: clamp(.3rem, .58dvw, .42rem);
  border-inline-end-width: .07rem;
  border-block-end-width: .07rem;
}

.online-original-scene {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}

.online-game-stage {
  inline-size: min(76rem, 100%);
  block-size: clamp(14.5rem, calc(100dvh - 21rem), 48rem);
  min-block-size: 14.5rem;
  border-color: color-mix(in oklab, var(--machine-accent), white 22%);
  background:
    radial-gradient(circle at 50% 36%, color-mix(in oklab, var(--machine-accent), transparent 66%), transparent 36%),
    radial-gradient(circle, rgb(255 255 255 / 68%) 0 .05rem, transparent .075rem) 0 0 / 1.25rem 1.25rem,
    linear-gradient(155deg, #061f35 0%, #0b0c32 74%);
  box-shadow:
    0 1.1rem 3.4rem rgb(0 0 0 / 52%),
    0 0 1.4rem color-mix(in oklab, var(--machine-accent), transparent 74%),
    inset 0 0 2.5rem color-mix(in oklab, var(--machine-accent), transparent 82%);
}

.online-game-feature-bar {
  border-block-end-color: rgb(199 249 251 / 42%);
  background: rgb(2 14 31 / 92%);
}

.online-game-feature-bar small,
.online-game-meter small {
  color: #c3e6eb;
}

.online-game-meter {
  inline-size: min(42rem, 100%);
}

.online-game-meter > span {
  border-color: rgb(181 244 247 / 48%);
  background: rgb(2 18 35 / 92%);
}

.bonus-scene-status {
  max-inline-size: min(46rem, 100%);
  border-color: rgb(182 244 247 / 48%);
  background: rgb(2 17 34 / 94%);
  color: #f4ffff;
  font-size: clamp(.875rem, .72rem + .25vw, .92rem);
}

.online-cascade-grid {
  inline-size: min(42rem, 96%, 58dvh);
}

.online-cascade-grid > span {
  border-color: rgb(255 255 255 / 78%);
  font-size: clamp(1.2rem, 4vw, 2.35rem);
}

.online-starfalldrop-board {
  inline-size: min(38rem, 96%);
  block-size: min(28rem, 49dvh);
}

.online-starfalldrop-bins > span {
  border-color: rgb(255 255 255 / 62%);
  background: rgb(2 22 40 / 96%);
  color: #f3ffff;
}

.online-dice-field {
  grid-template-columns: repeat(2, minmax(8rem, 15rem));
}

.online-bingo-grid {
  inline-size: min(38rem, 94%, 52dvh);
}

.bonus-action-row {
  display: grid;
  inline-size: min(38rem, 100%);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: .68rem;
}

.bonus-action-row > .bonus-launch-button {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 4rem;
  margin: 0;
}

@media (max-width: 32rem) {
  .bonus-game-machine {
    gap: .3rem;
  }

  .bonus-machine-title h2 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .bonus-machine-title p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .galactic-wheel-stage {
    inline-size: min(96dvw, calc(100dvh - 19.5rem));
  }

  .galactic-wheel > span {
    --wheel-segment-radius: clamp(-8.7rem, -25dvw, -5.6rem);

    transform:
      translate(-50%, -50%)
      rotate(var(--segment-angle))
      translateY(var(--wheel-segment-radius))
      scale(1);
  }

  .online-game-stage {
    block-size: clamp(14rem, calc(100dvh - 20.5rem), 34rem);
    min-block-size: 14rem;
  }

  .bonus-action-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
  }

  .bonus-action-row > .bonus-launch-button {
    min-block-size: 3.65rem;
    padding-inline: .55rem;
    font-size: .875rem;
  }

  .online-dice-field {
    grid-template-columns: repeat(2, minmax(6.2rem, 9rem));
  }
}

@media (max-width: 48rem) and (max-height: 44rem) and (orientation: landscape) {
  .galactic-wheel-stage {
    inline-size: min(58dvh, 34rem);
  }

  .online-game-stage {
    block-size: min(72dvh, 30rem);
    min-block-size: min(58dvh, 20rem);
  }
}

@media (prefers-contrast: more) {
  .bonus-game-machine,
  .online-game-stage,
  .bonus-scene-status,
  .online-game-meter > span,
  .galactic-wheel > span {
    border-color: #fff;
  }

  .bonus-machine-title p,
  .online-game-feature-bar small,
  .online-game-meter small {
    color: #fff;
  }
}

/* High-legibility bonus pass: vivid playfields, readable reels, and a persistent
   turn counter that remains visible without covering the active controls. */
.bonus-game-machine {
  color: #f8ffff;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in oklab, var(--machine-accent), transparent 58%), transparent 35%),
    linear-gradient(155deg, #071d35 0%, #090d28 72%, #15092e 100%);
}

.bonus-machine-title small {
  color: #b9fbff;
}

.bonus-machine-title p {
  color: #e7fbff;
  max-inline-size: 34rem;
  font-size: clamp(1.05rem, .92rem + .62vw, 1.42rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 .12rem .32rem #000;
}

.bonus-turn-counter {
  position: absolute;
  z-index: 18;
  inset: clamp(.65rem, 2cqi, 1.2rem) clamp(.65rem, 2cqi, 1.2rem) auto auto;
  display: grid;
  min-inline-size: clamp(5.6rem, 14cqi, 8.8rem);
  justify-items: center;
  gap: .15rem;
  padding: clamp(.5rem, 1.2cqi, .8rem) clamp(.65rem, 1.8cqi, 1rem);
  border: .13rem solid #fff;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 28% 20%, rgb(255 255 255 / 36%), transparent 27%),
    linear-gradient(145deg, #ffef74, #ff8a63 55%, #d73f9e);
  color: #301434;
  box-shadow:
    0 .28rem 0 #611d5e,
    0 .7rem 1.5rem rgb(0 0 0 / 42%),
    0 0 1.1rem rgb(255 182 83 / 52%),
    inset 0 .1rem 0 rgb(255 255 255 / 80%);
  pointer-events: none;
}

.bonus-turn-counter small {
  color: #351936;
  font: 1000 clamp(.875rem, 1.35cqi, .875rem)/1 var(--mono);
  letter-spacing: .07em;
}

.bonus-turn-counter strong {
  color: #25112f;
  font: 1000 clamp(2.25rem, 7cqi, 4.8rem)/.82 var(--mono);
  letter-spacing: -.08em;
  text-shadow: 0 .08rem 0 rgb(255 255 255 / 60%);
}

.bonus-turn-counter strong.is-counting {
  animation: bonus-count-down 620ms cubic-bezier(.18, 1.35, .3, 1) both;
}

.online-game-meter strong {
  color: #fff;
  font-size: clamp(1.2rem, 3.4cqi, 2.15rem);
  text-shadow: 0 0 .55rem color-mix(in oklab, var(--machine-accent), transparent 28%);
}

.online-game-meter small {
  color: #dffcff;
  font-weight: 950;
}

.online-game-stage {
  filter: saturate(1.2) contrast(1.06);
}

.online-game-playfield {
  color: #fff;
}

.online-game-result,
.bonus-scene-status {
  text-shadow: 0 .08rem .18rem #000;
}

.bonus-action-row[data-turn-cooldown="true"] {
  filter: saturate(.86);
}

@keyframes bonus-count-down {
  0% { opacity: .45; transform: translateY(-.7rem) scale(1.28); filter: brightness(1.7); }
  58% { opacity: 1; transform: translateY(.08rem) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (max-width: 32rem) {
  .bonus-turn-counter {
    min-inline-size: 5rem;
    border-radius: .75rem;
  }

  .bonus-turn-counter strong {
    font-size: clamp(1.75rem, 9vw, 2.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-game-machine[data-bonus-game="starfalldrop"]:has(.online-starfalldrop-token.is-aiming) .online-game-action:disabled {
    animation: none;
  }

  .bonus-turn-counter strong.is-counting {
    animation-duration: 1ms;
  }

}

/* The marquee is the single dominant spin counter. */
.bonus-turn-counter {
  display: none;
}

/* Keep the jackpot-style progress crown fully sized above every playfield.
   The crown lives inside the header, so campaign entries need exactly three
   rows: header, title, and the flexible scene. A fourth row leaves the active
   scene in an auto-sized track and collapses its playfield. */
.bonus-game-machine {
  grid-template-rows: auto auto minmax(0, 1fr);
}

@media (min-width: 48.01rem) and (min-height: 44.01rem) {
  .galactic-wheel-stage {
    inline-size: min(54rem, 94dvw, calc(100dvh - 26rem));
  }
}

/* Standalone arcade frames display only the selected game. Campaign state is
   kept out of sight and is not persisted by the game runtime. */
html[data-standalone-arcade="true"] {
  color-scheme: dark;
  background: #020714;
}

html[data-standalone-arcade="true"] body {
  min-block-size: 100dvh;
  overflow: hidden;
  background: #020714;
}

html[data-standalone-arcade="true"] .app-shell,
html[data-standalone-arcade="true"] body > dialog:not(#bonus-game-dialog) {
  display: none !important;
}

html[data-standalone-arcade="true"] .skip-link {
  display: none;
}

html[data-standalone-arcade="true"] .bonus-game-modal {
  max-inline-size: none;
  max-block-size: none;
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] {
  min-block-size: 100dvh;
  max-block-size: 100dvh;
  grid-template-rows: auto auto minmax(0, 1fr);
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] > .modal-close,
html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-back,
html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-balance {
  display: none !important;
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-header {
  display: none;
}

@media (min-width: 48.01rem) {
  html[data-standalone-arcade="true"] .online-original-scene .online-game-stage {
    block-size: auto;
    min-block-size: 0;
    align-self: stretch;
  }
}

/* Quantum Dice use complete six-sided cubes rather than flat die glyphs. */
.online-dice-field {
  --dice-roll-ease: cubic-bezier(.12, .68, .16, 1);
  --dice-lock-ease: cubic-bezier(.12, .68, .18, 1);

  column-gap: clamp(.8rem, 4vw, 2.2rem);
  row-gap: clamp(2.35rem, 5cqi, 3.35rem);
  perspective: 54rem;
  perspective-origin: 50% 34%;
}

.online-die-rig {
  position: relative;
  display: grid;
  inline-size: clamp(7rem, 18cqi, 11.5rem);
  aspect-ratio: 1;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.online-die-rig::after {
  position: absolute;
  z-index: -1;
  inset: auto 10% -18% 10%;
  block-size: 20%;
  border-radius: 50%;
  background: rgb(0 0 0 / 58%);
  content: "";
  filter: blur(.7rem);
  transform: rotateX(68deg);
}

.online-die-showcase {
  display: grid;
  inline-size: var(--die-display-size, 94%);
  aspect-ratio: 1;
  place-items: center;
  transform: translateZ(0);
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    filter 220ms ease-out,
    transform 260ms cubic-bezier(.18, .78, .22, 1);
}

.online-die-cube {
  --die-size: clamp(6.4rem, 16cqi, 10.2rem);
  --die-half: calc(var(--die-size) / 2);
  --die-result-x: -14deg;
  --die-result-y: var(--die-settle-y);

  position: relative;
  display: block;
  inline-size: var(--die-size);
  block-size: var(--die-size);
  transform: rotateX(var(--die-result-x)) rotateY(var(--die-result-y));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.online-die-cube[data-die-value="2"] { --die-result-y: calc(-90deg + var(--die-settle-y)); }
.online-die-cube[data-die-value="3"] { --die-result-y: calc(180deg + var(--die-settle-y)); }
.online-die-cube[data-die-value="4"] { --die-result-y: calc(90deg + var(--die-settle-y)); }
.online-die-cube[data-die-value="5"] {
  --die-result-x: -76deg;
  --die-result-y: var(--die-settle-y);
}
.online-die-cube[data-die-value="6"] {
  --die-result-x: 76deg;
  --die-result-y: var(--die-settle-y);
}

.online-die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5%;
  padding: 15%;
  border: .14rem solid #fff;
  border-radius: 18%;
  background:
    radial-gradient(circle at 28% 20%, rgb(255 255 255 / 92%), transparent 22%),
    linear-gradient(145deg, #fffbd9, #d7f7ff 48%, #8fc8ec);
  box-shadow:
    inset .22rem .22rem .42rem rgb(255 255 255 / 72%),
    inset -.28rem -.32rem .55rem rgb(41 67 139 / 30%),
    0 0 .45rem rgb(112 234 255 / 48%);
  backface-visibility: hidden;
}

.online-die-face.is-front { transform: translateZ(var(--die-half)); }
.online-die-face.is-right { transform: rotateY(90deg) translateZ(var(--die-half)); }
.online-die-face.is-back { transform: rotateY(180deg) translateZ(var(--die-half)); }
.online-die-face.is-left { transform: rotateY(-90deg) translateZ(var(--die-half)); }
.online-die-face.is-top { transform: rotateX(90deg) translateZ(var(--die-half)); }
.online-die-face.is-bottom { transform: rotateX(-90deg) translateZ(var(--die-half)); }

.online-die-face i {
  display: block;
  inline-size: 74%;
  aspect-ratio: 1;
  place-self: center;
  border-radius: 50%;
}

.online-die-face i.is-pip {
  background:
    radial-gradient(circle at 34% 28%, #fff 0 9%, transparent 11%),
    linear-gradient(145deg, #6330a9, #24145f);
  box-shadow:
    inset .08rem .1rem .12rem rgb(11 7 52 / 68%),
    0 .06rem 0 #fff,
    0 0 .22rem rgb(117 53 194 / 52%);
}

.online-die-result-number {
  position: absolute;
  z-index: 8;
  inset: auto 50% -27%;
  display: grid;
  min-inline-size: 4.8rem;
  justify-items: center;
  padding: .28rem .55rem .34rem;
  border: .1rem solid #fff5a3;
  border-radius: .72rem;
  background: linear-gradient(145deg, rgb(17 29 78 / 96%), rgb(71 24 102 / 96%));
  box-shadow:
    0 .18rem 0 #361f68,
    0 0 .8rem rgb(255 216 90 / 42%),
    inset 0 .08rem 0 rgb(255 255 255 / 26%);
  color: #fff;
  font-style: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(.65rem) scale(.64);
}

.online-die-result-number b {
  color: #fff18a;
  font: 400 clamp(1.25rem, 4.5cqi, 2.2rem)/.9 var(--bonus-display);
  text-shadow: 0 .08rem .12rem #000, 0 0 .55rem #ff9c4b;
}

@supports (animation-timing-function: linear(0, 1)) {
  .online-dice-field {
    --dice-roll-ease: linear(
      0, .12 7%, .29 15%, .48 26%, .66 39%, .8 53%,
      .9 66%, .96 78%, .985 88%, .996 95%, 1
    );
    --dice-lock-ease: linear(
      0, .16 9%, .35 20%, .56 34%, .73 49%, .85 63%,
      .93 76%, .975 87%, .994 95%, 1
    );
  }
}

@media (max-width: 32rem) {
  .online-die-rig {
    inline-size: clamp(6rem, 28vw, 7.4rem);
  }

  .online-die-cube {
    --die-size: clamp(5.4rem, 25vw, 6.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-dice-field:is(.is-rolling, .is-revealing) :is(
    .online-die-cube,
    .online-die-rig,
    .online-die-result-number
  ) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

/*
 * Graphical display language.
 * Text stays semantic and scalable, but every player-facing headline, number,
 * prize, objective, and action is rendered as illuminated game artwork.
 */
.bonus-game-machine {
  --bonus-display: "Russo One", "Arial Black", sans-serif;
  color-scheme: dark;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in oklab, var(--machine-accent), transparent 78%), transparent 34%),
    radial-gradient(circle at 82% 72%, color-mix(in oklab, var(--machine-secondary), transparent 82%), transparent 38%),
    linear-gradient(155deg, #030a18 0%, #07091f 52%, #110827 100%);
}

.bonus-machine-title :is(.eyebrow, h2),
.bonus-progress-marquee :is(small, strong, em),
.bonus-scene .bonus-launch-button,
.bonus-scene-status,
.online-game-feature-bar :is(small, strong),
.online-game-meter :is(strong, small),
.online-cascade-objective,
.online-cascade-reason,
.online-bingo-header,
.online-bingo-win-line b {
  font-family: var(--bonus-display);
  font-weight: 400;
}

.bonus-machine-title h2 {
  color: #fff8cb;
  font-size: clamp(2rem, 1.35rem + 3.3vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.035em;
  paint-order: stroke fill;
  text-shadow:
    0 .08em 0 #7a2b7b,
    0 .16em 0 #281755,
    0 0 .32em rgb(255 220 102 / 86%),
    0 0 .7em rgb(254 78 200 / 48%);
  -webkit-text-stroke: .018em #fff;
}

.bonus-machine-title .eyebrow,
.online-game-feature-bar small,
.online-game-meter small {
  letter-spacing: .12em;
  text-shadow: 0 .11em .16em #000, 0 0 .45em currentColor;
}

.bonus-machine-title p {
  color: #fff;
  font-family: var(--bonus-display);
  font-size: clamp(.92rem, .75rem + .58vw, 1.3rem);
  line-height: 1.16;
  text-shadow: 0 .1rem .18rem #000, 0 0 .5rem rgb(88 226 255 / 48%);
}

.bonus-launch-button {
  letter-spacing: .015em;
  text-transform: uppercase;
  text-shadow: 0 .08em 0 rgb(255 255 255 / 46%);
}

.bonus-progress-marquee strong,
.online-game-meter strong {
  font-family: var(--bonus-display);
  font-weight: 400;
  paint-order: stroke fill;
  -webkit-text-stroke: .015em rgb(255 255 255 / 80%);
}

/* Roulette-inspired Galactic Wheel with original photoreal space prizes. */
.galactic-wheel {
  border: clamp(.65rem, 1.5vw, 1rem) double #ffe6a0;
  background:
    repeating-conic-gradient(
      from 11.25deg,
      #ffe49a 0deg .8deg,
      transparent .8deg 22.5deg
    ),
    repeating-conic-gradient(
      from 11.25deg,
      #0a3540 0deg 22.5deg,
      #531737 22.5deg 45deg
    );
  box-shadow:
    0 .32rem 0 #b78323,
    0 .72rem 0 #4a2c12,
    0 1rem 0 #10111a,
    0 1.7rem 2.8rem rgb(0 0 0 / 64%),
    0 0 0 .2rem #624115,
    0 0 2.4rem rgb(255 210 101 / 42%),
    inset 0 0 0 .2rem #6e4617,
    inset 0 0 2rem rgb(0 0 0 / 52%);
}

.galactic-wheel::before {
  inset: -1.12rem;
  inline-size: auto;
  aspect-ratio: auto;
  border: .48rem double #f4cb6a;
  background: transparent;
  box-shadow:
    0 0 0 .12rem #5f3a12,
    0 0 .9rem rgb(255 211 100 / 62%),
    inset 0 0 0 .12rem #fff0b1,
    inset 0 0 .75rem rgb(0 0 0 / 54%);
  transform: none;
  animation: none;
}

.galactic-wheel::after {
  inset: 22%;
  inline-size: auto;
  aspect-ratio: auto;
  border: .38rem double #f2ca6b;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / 26%), transparent 18%),
    radial-gradient(circle, #173b42 0 34%, #081b24 35% 68%, #3e2711 69%);
  box-shadow:
    inset 0 0 1.1rem rgb(0 0 0 / 72%),
    0 0 0 .13rem #674514,
    0 0 .85rem rgb(255 216 117 / 46%);
  transform: none;
}

.galactic-wheel > span {
  display: grid;
  inline-size: clamp(3.15rem, 5.4dvw, 4.55rem);
  aspect-ratio: .72;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: .04rem;
  overflow: hidden;
  padding: .18rem .2rem .3rem;
  border: .16rem solid #f8d77d;
  border-radius: .48rem .48rem .72rem .72rem;
  background:
    radial-gradient(circle at 34% 18%, rgb(255 255 255 / 20%), transparent 24%),
    linear-gradient(180deg, #06151e 0 64%, #e0ad43 65% 100%);
  box-shadow:
    0 .28rem 0 #5f3a12,
    0 .48rem .8rem rgb(0 0 0 / 54%),
    0 0 0 .08rem rgb(15 7 3 / 70%),
    inset 0 .12rem 0 rgb(255 248 205 / 52%),
    inset 0 0 .7rem rgb(0 0 0 / 54%);
}

.galactic-wheel-core {
  border: clamp(.14rem, 1.8cqi, .24rem) solid #ffe59a;
  background:
    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 78%) 0 4%, transparent 5%),
    radial-gradient(circle, #153d4b 0 46%, #0a2633 47% 65%, #020c14 66% 100%);
  color: #fff1ac;
  box-shadow:
    0 .26rem 0 #4b2d0b,
    0 0 0 .1rem #6e4715,
    0 0 clamp(.8rem, 14cqi, 1.7rem) rgb(255 207 92 / 62%),
    0 0 clamp(1.4rem, 23cqi, 2.8rem) rgb(89 231 255 / 28%),
    inset 0 .12rem 0 rgb(255 255 255 / 48%),
    inset 0 0 clamp(.6rem, 10cqi, 1.2rem) rgb(0 0 0 / 76%);
  filter: saturate(1.08);
  transition: filter 420ms ease, scale 520ms cubic-bezier(.22, 1, .36, 1);
}

.galactic-wheel-core::before {
  border: clamp(.08rem, 1.2cqi, .15rem) solid rgb(255 231 150 / 72%);
  background:
    repeating-conic-gradient(from 12deg, #fff1a8 0 2deg, transparent 2deg 20deg),
    conic-gradient(from 30deg, #ffcb55, #ff65cc, #75eaff, #b8ff78, #ffcb55);
  box-shadow:
    0 0 .5rem rgb(255 234 154 / 82%),
    0 0 1rem rgb(83 230 255 / 34%);
  opacity: .72;
  animation: wheel-fortune-halo-turn 14s linear infinite;
  will-change: rotate;
}

.galactic-wheel-core::after {
  border-color: rgb(166 242 255 / 52%);
  background:
    repeating-conic-gradient(from 0deg, transparent 0 17deg, rgb(255 255 255 / 16%) 18deg 19deg, transparent 20deg 44deg),
    radial-gradient(circle, transparent 0 62%, rgb(104 235 255 / 12%) 63% 100%);
  box-shadow:
    inset 0 0 .7rem rgb(89 231 255 / 18%),
    0 0 .55rem rgb(100 233 255 / 24%);
}

.galactic-wheel-core-orbit {
  border: .07rem solid rgb(255 228 142 / 30%);
  box-shadow: inset 0 0 .5rem rgb(85 229 255 / 16%);
  animation: wheel-fortune-orbit-turn 18s linear infinite;
  will-change: rotate;
}

.galactic-wheel-core-orbit > b {
  border: .06rem solid rgb(255 240 182 / 72%);
  background:
    radial-gradient(circle at 34% 28%, #fff 0 10%, transparent 11%),
    linear-gradient(145deg, #294c59, #071b28);
  color: #fff0a0;
  box-shadow:
    0 0 .35rem rgb(255 218 114 / 52%),
    inset 0 .06rem 0 rgb(255 255 255 / 34%);
  text-shadow: 0 0 .35rem #ffd85e;
  animation: wheel-fortune-sigil-counter 18s linear infinite;
  will-change: rotate;
}

.galactic-wheel-core-medallion {
  overflow: hidden;
  border: clamp(.08rem, 1.3cqi, .16rem) solid #ffe28a;
  background:
    radial-gradient(circle at 36% 25%, rgb(255 255 255 / 88%) 0 6%, transparent 7%),
    radial-gradient(circle, #ffe78b 0 8%, #d99825 9% 17%, #643d11 18% 24%, #123b47 25% 64%, #04131d 65% 100%);
  box-shadow:
    0 .12rem 0 #4d2e09,
    0 0 .65rem rgb(255 215 101 / 58%),
    inset 0 .1rem 0 rgb(255 255 255 / 48%),
    inset 0 0 .65rem rgb(0 0 0 / 58%);
  animation: wheel-fortune-core-breathe 3.8s ease-in-out infinite;
  will-change: scale;
}

/* Four overlapping light petals form a subtle universal luck mark behind V. */
.galactic-wheel-core-medallion::before {
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 18%, rgb(211 255 151 / 52%) 0 13%, transparent 14%),
    radial-gradient(ellipse at 82% 50%, rgb(110 239 255 / 46%) 0 13%, transparent 14%),
    radial-gradient(ellipse at 50% 82%, rgb(255 159 224 / 42%) 0 13%, transparent 14%),
    radial-gradient(ellipse at 18% 50%, rgb(255 226 117 / 52%) 0 13%, transparent 14%);
  filter: drop-shadow(0 0 .18rem rgb(255 242 173 / 52%));
}

.galactic-wheel-core-medallion::after {
  inset: 10%;
  border: .05rem solid rgb(255 242 186 / 36%);
  border-radius: 50%;
}

.galactic-wheel-core-medallion > strong {
  background: linear-gradient(180deg, #fffbd0 0 30%, #ffd766 31% 62%, #d2861d 63% 100%);
  color: transparent;
  filter: drop-shadow(0 .08rem 0 #3c240a) drop-shadow(0 0 .22rem rgb(255 222 114 / 72%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.galactic-wheel-core-medallion > small {
  color: #c9fbff;
  text-shadow: 0 0 .28rem #55dcff;
}

.galactic-wheel-core-sweep {
  border: .05rem solid rgb(255 255 255 / 20%);
}

.galactic-wheel-core-sweep::before {
  background: linear-gradient(90deg, transparent 36%, rgb(255 255 255 / 8%) 43%, rgb(255 250 205 / 82%) 49%, rgb(98 231 255 / 22%) 56%, transparent 64%);
  animation: wheel-fortune-sweep 5.4s ease-in-out infinite;
  will-change: translate, opacity;
}

@container (max-width: 4rem) {
  .galactic-wheel-core-medallion > strong {
    font-size: clamp(.875rem, 31cqi, 1.2rem);
    line-height: 1;
  }

  .galactic-wheel-core-medallion > small {
    display: none;
  }
}

.galactic-wheel-stage.is-spinning .galactic-wheel-core {
  filter: brightness(1.1) saturate(1.24);
  scale: 1.025;
}

.galactic-wheel-stage.is-spinning .galactic-wheel-core::before {
  animation-duration: 1.05s;
}

.galactic-wheel-stage.is-spinning .galactic-wheel-core-orbit,
.galactic-wheel-stage.is-spinning .galactic-wheel-core-orbit > b {
  animation-duration: 1.8s;
}

.galactic-wheel-stage.is-spinning .galactic-wheel-core-medallion {
  animation-duration: .78s;
}

.galactic-wheel-stage.is-spinning .galactic-wheel-core-sweep::before {
  animation-duration: .92s;
}

.galactic-wheel-stage.is-settling .galactic-wheel-core {
  filter: brightness(1.18) saturate(1.12);
  scale: .965;
}

.galactic-wheel-stage.is-settling .galactic-wheel-core::before {
  animation-duration: 2.4s;
}

.galactic-wheel-stage.is-settling .galactic-wheel-core-orbit,
.galactic-wheel-stage.is-settling .galactic-wheel-core-orbit > b {
  animation-duration: 3.2s;
}

.galactic-wheel-stage.is-landed .galactic-wheel-core {
  filter: brightness(1.16) saturate(1.2);
  scale: 1;
}

.galactic-wheel-stage.is-landed .galactic-wheel-core::after {
  animation: wheel-fortune-landed-aura 1.15s ease-out both;
}

.galactic-wheel-stage.is-landed .galactic-wheel-core-medallion {
  animation: wheel-fortune-core-lock 1.05s cubic-bezier(.2, .8, .2, 1) both;
  animation-timing-function: linear(0, .52 16%, 1.13 48%, .94 68%, 1.025 84%, 1);
}

.galactic-wheel-stage.is-landed .galactic-wheel-core-orbit > b {
  color: #fffbd1;
  text-shadow: 0 0 .28rem #fff, 0 0 .7rem #ffd65d;
}

@keyframes wheel-fortune-halo-turn {
  to { rotate: 1turn; }
}

@keyframes wheel-fortune-orbit-turn {
  to { rotate: 1turn; }
}

@keyframes wheel-fortune-sigil-counter {
  to { rotate: -1turn; }
}

@keyframes wheel-fortune-core-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.045; }
}

@keyframes wheel-fortune-sweep {
  0%, 18% { opacity: 0; translate: -120% 0; }
  32% { opacity: .72; }
  58% { opacity: 0; translate: 120% 0; }
  100% { opacity: 0; translate: 120% 0; }
}

@keyframes wheel-fortune-landed-aura {
  0% { opacity: .34; scale: .78; }
  42% { opacity: 1; scale: 1.14; }
  100% { opacity: .6; scale: 1; }
}

@keyframes wheel-fortune-core-lock {
  0% { rotate: -7deg; scale: .82; }
  48% { rotate: 2deg; scale: 1.13; }
  100% { rotate: 0deg; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .galactic-wheel-core,
  .galactic-wheel-core::before,
  .galactic-wheel-core::after,
  .galactic-wheel-core-orbit,
  .galactic-wheel-core-orbit > b,
  .galactic-wheel-core-medallion,
  .galactic-wheel-core-sweep::before {
    animation: none !important;
    transition: none !important;
  }
}

html[data-battery-saver="true"] .galactic-wheel-core,
html[data-battery-saver="true"] .galactic-wheel-core::before,
html[data-battery-saver="true"] .galactic-wheel-core::after,
html[data-battery-saver="true"] .galactic-wheel-core-orbit,
html[data-battery-saver="true"] .galactic-wheel-core-orbit > b,
html[data-battery-saver="true"] .galactic-wheel-core-medallion,
html[data-battery-saver="true"] .galactic-wheel-core-sweep::before,
html[data-graphics-tier="economy"] .galactic-wheel-core,
html[data-graphics-tier="economy"] .galactic-wheel-core::before,
html[data-graphics-tier="economy"] .galactic-wheel-core::after,
html[data-graphics-tier="economy"] .galactic-wheel-core-orbit,
html[data-graphics-tier="economy"] .galactic-wheel-core-orbit > b,
html[data-graphics-tier="economy"] .galactic-wheel-core-medallion,
html[data-graphics-tier="economy"] .galactic-wheel-core-sweep::before {
  animation: none !important;
  transition: none !important;
}

@media (forced-colors: active) {
  .galactic-wheel-core,
  .galactic-wheel-core-medallion,
  .galactic-wheel-core-orbit > b {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .galactic-wheel-core::before,
  .galactic-wheel-core-sweep {
    display: none;
  }
}

.wheel-space-object,
.matrix-space-object,
.online-prism-object {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-repeat: no-repeat;
}

.wheel-space-object {
  min-block-size: 0;
  background-image: url("assets/images/bonus/galactic-wheel-space-atlas.webp");
  background-size: 400% 200%;
  filter: drop-shadow(0 0 .35rem rgb(255 255 255 / 58%));
}

.galactic-wheel [data-bonus-symbol="stardust"] .wheel-space-object { background-position: 0 0; }
.galactic-wheel [data-bonus-symbol="current"] .wheel-space-object { background-position: 33.333% 0; }
.galactic-wheel [data-bonus-symbol="plasma"] .wheel-space-object { background-position: 66.667% 0; }
.galactic-wheel [data-bonus-symbol="recycler"] .wheel-space-object { background-position: 100% 0; }
.galactic-wheel [data-bonus-symbol="hyper"] .wheel-space-object { background-position: 0 100%; }
.galactic-wheel [data-bonus-symbol="orbit"] .wheel-space-object { background-position: 33.333% 100%; }
.galactic-wheel [data-bonus-symbol="supernova"] .wheel-space-object { background-position: 100% 100%; }

.galactic-wheel > span > b {
  display: grid;
  inline-size: 100%;
  place-items: center;
  color: #2d123b;
  font: 400 clamp(.875rem, 1.08dvw, .88rem)/.82 var(--bonus-display);
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 .07em 0 #fff;
}

.galactic-wheel > span > b small {
  color: #3c1845;
  font: 400 clamp(.875rem, .58dvw, .875rem)/1 var(--bonus-display);
  letter-spacing: .06em;
}

.galactic-wheel > span.is-winning {
  border-color: #fff;
  background:
    radial-gradient(circle at 35% 22%, rgb(255 255 255 / 30%), transparent 22%),
    linear-gradient(180deg, #102d36 0 64%, #fff0a2 65%);
  box-shadow:
    0 .3rem 0 #6b4517,
    0 0 0 .16rem #ffd96b,
    0 0 2.2rem #fff,
    0 0 3.4rem #ffc750;
}

.galactic-wheel-stage:is(.is-spinning, .is-settling, .is-landed) .galactic-wheel-pointer {
  animation: none;
  transform-origin: 50% 8%;
  will-change: rotate;
}

.galactic-wheel-ball {
  position: absolute;
  z-index: 18;
  inset: 0 auto auto 0;
  inline-size: var(--roulette-ball-size, 1.15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}

.galactic-wheel-ball[hidden] {
  display: none;
}

.galactic-wheel-ball {
  isolation: isolate;
  overflow: visible;
  border: .08rem solid rgb(255 255 255 / 92%);
  background:
    radial-gradient(ellipse at 28% 20%, #fff 0 8%, rgb(255 255 255 / 76%) 9% 14%, transparent 16%),
    radial-gradient(ellipse at 66% 78%, rgb(95 226 255 / 44%) 0 9%, transparent 23%),
    linear-gradient(128deg, transparent 30%, rgb(255 255 255 / 56%) 43%, transparent 51%),
    radial-gradient(circle at 38% 35%, #f8feff 0 17%, #b7d7e4 39%, #617f92 66%, #172f40 88%, #07131e 100%);
  box-shadow:
    0 .18rem .28rem rgb(0 0 0 / 72%),
    inset -.14rem -.2rem .25rem rgb(3 17 28 / 68%),
    inset .13rem .1rem .16rem rgb(255 255 255 / 74%),
    0 0 .42rem #fff,
    0 0 .85rem rgb(93 231 255 / 82%);
  will-change: transform;
}

.galactic-wheel-ball::after {
  position: absolute;
  z-index: 2;
  inset: -6%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 29% 17%, rgb(255 255 255 / 96%) 0 7%, transparent 9%),
    radial-gradient(ellipse at 51% 7%, transparent 0 39%, rgb(255 255 255 / 58%) 43% 48%, transparent 53%),
    linear-gradient(112deg, transparent 28%, rgb(255 255 255 / 46%) 43%, transparent 54%);
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
  transform: rotate(var(--roulette-ball-reflection-spin, 0rad));
  transform-origin: center;
}

.galactic-wheel-stage.is-ball-running .galactic-wheel-ball {
  filter: drop-shadow(0 0 .35rem #fff) drop-shadow(0 0 .7rem #71eaff);
}

.galactic-wheel > span.is-ball-winning {
  z-index: 9;
  border-color: #9ffbff;
  box-shadow:
    0 .3rem 0 #31546b,
    0 0 0 .18rem #fff,
    0 0 2.2rem #79f4ff,
    0 0 3.8rem #ff61d0;
}

/* Wormhole Matrix photoreal symbol atlas. */
.matrix-space-object {
  --matrix-backdrop-primary: rgb(93 226 255 / 54%);
  --matrix-backdrop-secondary: rgb(196 89 255 / 44%);
  --matrix-backdrop-angle: 24deg;
  --matrix-backdrop-duration: 7.8s;
  --matrix-backdrop-delay: 0s;
  --matrix-idle-animation: matrix-idle-stardust-drift;
  --matrix-idle-duration: 6s;
  --matrix-idle-delay: 0s;
  --matrix-idle-easing: ease-in-out;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: url("assets/images/bonus/wormhole-matrix-space-atlas.webp");
  background-size: 300% 200%;
  font-style: normal;
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 .45rem rgb(115 224 255 / 52%));
}

.matrix-space-object[data-space-object="asteroid"] {
  --matrix-backdrop-primary: rgb(255 119 44 / 58%);
  --matrix-backdrop-secondary: rgb(42 225 222 / 42%);
  --matrix-backdrop-angle: 18deg;
  --matrix-backdrop-duration: 8.6s;
  --matrix-backdrop-delay: -2.2s;
  --matrix-idle-animation: matrix-idle-asteroid-tumble;
  --matrix-idle-duration: 5.8s;
  --matrix-idle-delay: -1.3s;

  background-position: 0 0;
}

.matrix-space-object[data-space-object="plasma"] {
  --matrix-backdrop-primary: rgb(190 82 255 / 62%);
  --matrix-backdrop-secondary: rgb(54 224 255 / 48%);
  --matrix-backdrop-angle: 76deg;
  --matrix-backdrop-duration: 6.4s;
  --matrix-backdrop-delay: -3.7s;
  --matrix-idle-animation: matrix-idle-plasma-coil;
  --matrix-idle-duration: 4.6s;
  --matrix-idle-delay: -2.1s;

  background-position: 50% 0;
}

.matrix-space-object[data-space-object="supernova"] {
  --matrix-backdrop-primary: rgb(255 178 52 / 62%);
  --matrix-backdrop-secondary: rgb(54 135 255 / 52%);
  --matrix-backdrop-angle: 132deg;
  --matrix-backdrop-duration: 5.8s;
  --matrix-backdrop-delay: -1.4s;
  --matrix-idle-animation: matrix-idle-supernova-flare;
  --matrix-idle-duration: 3.8s;
  --matrix-idle-delay: -.8s;

  background-position: 100% 0;
}

.matrix-space-object[data-space-object="black-hole"] {
  --matrix-backdrop-primary: rgb(255 88 54 / 56%);
  --matrix-backdrop-secondary: rgb(93 71 255 / 48%);
  --matrix-backdrop-angle: 214deg;
  --matrix-backdrop-duration: 9.2s;
  --matrix-backdrop-delay: -5.1s;
  --matrix-idle-animation: matrix-idle-black-hole-lens;
  --matrix-idle-duration: 7.4s;
  --matrix-idle-delay: -4.2s;

  background-position: 0 100%;
}

.matrix-space-object[data-space-object="rift"] {
  --matrix-backdrop-primary: rgb(37 232 255 / 64%);
  --matrix-backdrop-secondary: rgb(255 66 220 / 52%);
  --matrix-backdrop-angle: 286deg;
  --matrix-backdrop-duration: 6.8s;
  --matrix-backdrop-delay: -2.9s;
  --matrix-idle-animation: matrix-idle-rift-shear;
  --matrix-idle-duration: 4.9s;
  --matrix-idle-delay: -1.7s;

  background-position: 50% 100%;
}

.matrix-space-object[data-space-object="stardust"] {
  --matrix-backdrop-primary: rgb(255 116 218 / 60%);
  --matrix-backdrop-secondary: rgb(133 206 255 / 50%);
  --matrix-backdrop-angle: 338deg;
  --matrix-backdrop-duration: 7.2s;
  --matrix-backdrop-delay: -4.3s;
  --matrix-idle-animation: matrix-idle-stardust-drift;
  --matrix-idle-duration: 6.2s;
  --matrix-idle-delay: -3.5s;

  background-position: 100% 100%;
}

.matrix-space-object:is(
  [data-space-object="moon"],
  [data-space-object="golden-comet"],
  [data-space-object="ring-world"],
  [data-space-object="alien-monolith"],
  [data-space-object="quantum-vault"]
) {
  background-image: url("assets/images/bonus/wormhole-matrix-premium-atlas.webp");
  background-size: 300% 200%;
}

.matrix-space-object[data-space-object="moon"] {
  --matrix-backdrop-primary: rgb(98 185 255 / 58%);
  --matrix-backdrop-secondary: rgb(221 241 255 / 46%);
  --matrix-backdrop-angle: 42deg;
  --matrix-backdrop-duration: 10.4s;
  --matrix-backdrop-delay: -6.2s;
  --matrix-idle-animation: matrix-idle-moon-parallax;
  --matrix-idle-duration: 8.6s;
  --matrix-idle-delay: -5.4s;

  background-position: 0 0;
}

.matrix-space-object[data-space-object="golden-comet"] {
  --matrix-backdrop-primary: rgb(255 184 45 / 68%);
  --matrix-backdrop-secondary: rgb(185 73 255 / 46%);
  --matrix-backdrop-angle: 118deg;
  --matrix-backdrop-duration: 5.4s;
  --matrix-backdrop-delay: -1.8s;
  --matrix-idle-animation: matrix-idle-golden-comet-pass;
  --matrix-idle-duration: 4.2s;
  --matrix-idle-delay: -1.1s;

  background-position: 50% 0;
}

.matrix-space-object[data-space-object="ring-world"] {
  --matrix-backdrop-primary: rgb(72 151 255 / 62%);
  --matrix-backdrop-secondary: rgb(244 88 255 / 48%);
  --matrix-backdrop-angle: 172deg;
  --matrix-backdrop-duration: 8.8s;
  --matrix-backdrop-delay: -4.8s;
  --matrix-idle-animation: matrix-idle-ring-precession;
  --matrix-idle-duration: 7.2s;
  --matrix-idle-delay: -3.2s;

  background-position: 100% 0;
}

.matrix-space-object[data-space-object="alien-monolith"] {
  --matrix-backdrop-primary: rgb(40 241 231 / 58%);
  --matrix-backdrop-secondary: rgb(44 124 255 / 46%);
  --matrix-backdrop-angle: 248deg;
  --matrix-backdrop-duration: 9.8s;
  --matrix-backdrop-delay: -7.1s;
  --matrix-idle-animation: matrix-idle-monolith-scan;
  --matrix-idle-duration: 5.2s;
  --matrix-idle-delay: -2.8s;

  background-position: 0 100%;
}

.matrix-space-object[data-space-object="quantum-vault"] {
  --matrix-backdrop-primary: rgb(255 205 70 / 62%);
  --matrix-backdrop-secondary: rgb(89 235 157 / 44%);
  --matrix-backdrop-angle: 312deg;
  --matrix-backdrop-duration: 7.6s;
  --matrix-backdrop-delay: -3.4s;
  --matrix-idle-animation: matrix-idle-vault-lock;
  --matrix-idle-duration: 5.6s;
  --matrix-idle-delay: -2.4s;

  background-position: 50% 100%;
}

.matrix-space-object[data-space-object="nasa-bar"],
.matrix-space-object[data-space-object="spin-bonus"] {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .04em;
  background-image: none;
  color: #fff;
  font-family: var(--bonus-display);
  line-height: .82;
  text-align: center;
  text-transform: uppercase;
  filter: none;
}

.matrix-space-object[data-space-object="nasa-bar"] {
  --matrix-backdrop-primary: rgb(82 220 255 / 62%);
  --matrix-backdrop-secondary: rgb(255 197 67 / 48%);
  --matrix-backdrop-angle: 96deg;
  --matrix-backdrop-duration: 6.2s;
  --matrix-backdrop-delay: -2.6s;
  --matrix-idle-animation: matrix-idle-nasa-telemetry;
  --matrix-idle-duration: 4.8s;
  --matrix-idle-delay: -1.9s;
}

.matrix-space-object[data-space-object="spin-bonus"] {
  --matrix-backdrop-primary: rgb(255 237 84 / 68%);
  --matrix-backdrop-secondary: rgb(75 220 255 / 52%);
  --matrix-backdrop-angle: 264deg;
  --matrix-backdrop-duration: 5.6s;
  --matrix-backdrop-delay: -4.1s;
  --matrix-idle-animation: matrix-idle-spin-core;
  --matrix-idle-duration: 4.4s;
  --matrix-idle-delay: -3.1s;
}

.matrix-space-object[data-space-object="nasa-bar"] {
  border-block: clamp(.12rem, .65cqi, .34rem) solid #ffce55;
  background:
    radial-gradient(circle at 18% 20%, rgb(92 225 255 / 48%), transparent 22%),
    linear-gradient(180deg, #081126 0 22%, #173e78 23% 76%, #071127 77%);
  box-shadow:
    inset 0 0 0 clamp(.05rem, .22cqi, .12rem) #fff,
    inset 0 0 1.1rem rgb(29 220 255 / 42%);
}

.matrix-space-object[data-space-object="nasa-bar"] strong {
  position: relative;
  z-index: 2;
  font-size: clamp(.875rem, 4.7cqi, 2.7rem);
  letter-spacing: .035em;
  paint-order: stroke fill;
  -webkit-text-stroke: .045em #071127;
  text-shadow: 0 .09em 0 #b32c3f, 0 0 .38em #fff;
}

.matrix-space-object[data-space-object="nasa-bar"] small {
  position: relative;
  z-index: 2;
  max-inline-size: 100%;
  color: #ffdc6e;
  font-size: clamp(.875rem, 1.45cqi, .875rem);
  letter-spacing: .08em;
  white-space: nowrap;
  text-wrap: nowrap;
  text-shadow: 0 .1em 0 #351944;
}

.matrix-space-object[data-space-object="spin-bonus"] {
  grid-template-rows: auto auto;
  border: clamp(.1rem, .5cqi, .28rem) solid #fff083;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, #fff 0 4%, transparent 6%),
    radial-gradient(circle, #163c83 0 25%, #5f25a9 26% 43%, #121b55 44% 56%, #07b3c9 57% 67%, #07102b 68%);
  box-shadow:
    inset 0 0 .7rem #fff,
    0 0 .7rem #51edff;
}

.matrix-space-object[data-space-object="spin-bonus"] strong {
  position: relative;
  z-index: 2;
  display: block;
  inline-size: 100%;
  color: #fff;
  font-size: clamp(.875rem, 5.2cqi, 3rem);
  paint-order: stroke fill;
  -webkit-text-stroke: .055em #32105d;
  text-shadow: 0 .08em 0 #541b74, 0 0 .4em #fff56c;
}

.matrix-space-object[data-space-object="spin-bonus"] small {
  position: relative;
  z-index: 2;
  display: block;
  inline-size: 100%;
  color: #fff37b;
  font-size: clamp(.875rem, 1.65cqi, .92rem);
  letter-spacing: .12em;
  text-shadow: 0 .1em 0 #6d275c;
}

/*
 * Settled symbols and the final symbols entering during reel slowdown keep a
 * rigid tile silhouette. Motion is clipped inside the artwork: no tile scale,
 * width, height, or outer transform is animated.
 */
.wormhole-machine [data-matrix-reel="1"] { --matrix-idle-reel-delay: -.27s; }
.wormhole-machine [data-matrix-reel="2"] { --matrix-idle-reel-delay: -.51s; }
.wormhole-machine [data-matrix-reel="3"] { --matrix-idle-reel-delay: -.76s; }
.wormhole-machine [data-matrix-reel="4"] { --matrix-idle-reel-delay: -1.03s; }

.wormhole-machine .matrix-symbol-cell:nth-child(5n + 1) { --matrix-idle-cell-delay: -.18s; }
.wormhole-machine .matrix-symbol-cell:nth-child(5n + 2) { --matrix-idle-cell-delay: -.42s; }
.wormhole-machine .matrix-symbol-cell:nth-child(5n + 3) { --matrix-idle-cell-delay: -.67s; }
.wormhole-machine .matrix-symbol-cell:nth-child(5n + 4) { --matrix-idle-cell-delay: -.91s; }
.wormhole-machine .matrix-symbol-cell:nth-child(5n) { --matrix-idle-cell-delay: -1.16s; }

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-symbol-cell .matrix-space-object::before {
  position: absolute;
  z-index: 1;
  inset: -28%;
  background:
    radial-gradient(circle at 26% 30%, var(--matrix-backdrop-primary) 0 5%, transparent 34%),
    radial-gradient(circle at 72% 66%, var(--matrix-backdrop-secondary) 0 4%, transparent 31%),
    conic-gradient(
      from var(--matrix-backdrop-angle),
      transparent 0 15%,
      var(--matrix-backdrop-primary) 26%,
      transparent 42% 68%,
      var(--matrix-backdrop-secondary) 82%,
      transparent
    );
  content: "";
  mix-blend-mode: screen;
  opacity: .26;
  pointer-events: none;
  transform: translate3d(-5%, -3%, 0) rotate(-5deg) scale(1.06);
  animation:
    matrix-symbol-backdrop-drift
    var(--matrix-backdrop-duration)
    ease-in-out
    calc(
      var(--matrix-backdrop-delay)
      + var(--matrix-idle-reel-delay, 0s)
      + var(--matrix-idle-cell-delay, 0s)
    )
    infinite alternate;
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-symbol-cell .matrix-space-object::after {
  position: absolute;
  z-index: 1;
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: center;
  animation-name: var(--matrix-idle-animation);
  animation-duration: var(--matrix-idle-duration);
  animation-timing-function: var(--matrix-idle-easing);
  animation-delay: calc(
    var(--matrix-idle-delay)
    + var(--matrix-idle-reel-delay, 0s)
    + var(--matrix-idle-cell-delay, 0s)
  );
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="asteroid"]::after {
  inset: 12%;
  border: .08rem dashed rgb(255 215 144 / 76%);
  border-radius: 44% 56% 48% 52% / 57% 42% 58% 43%;
  background:
    radial-gradient(circle at 14% 62%, rgb(255 255 255 / 86%) 0 2%, transparent 4%),
    radial-gradient(circle at 84% 28%, rgb(71 237 223 / 78%) 0 2%, transparent 4%);
  box-shadow: inset .18rem -.12rem .36rem rgb(255 116 51 / 35%), 0 0 .28rem rgb(78 235 225 / 42%);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="plasma"]::after {
  inset: 9%;
  border-radius: 46% 54% 61% 39% / 55% 42% 58% 45%;
  background: conic-gradient(
    from 12deg,
    transparent 0 12%,
    rgb(255 139 239 / 72%) 18%,
    transparent 29% 48%,
    rgb(93 238 255 / 78%) 57%,
    transparent 68% 88%,
    rgb(255 226 140 / 58%)
  );
  box-shadow: inset 0 0 .46rem rgb(199 80 255 / 48%), 0 0 .28rem rgb(77 232 255 / 44%);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="supernova"]::after {
  inset: 8%;
  clip-path: polygon(48% 0, 57% 36%, 86% 14%, 67% 42%, 100% 50%, 65% 59%, 84% 88%, 56% 66%, 49% 100%, 42% 65%, 14% 87%, 35% 57%, 0 49%, 37% 41%, 14% 14%, 43% 36%);
  background: radial-gradient(circle, #fff 0 8%, rgb(255 243 151 / 76%) 12% 23%, rgb(255 131 80 / 38%) 34%, transparent 63%);
  filter: drop-shadow(0 0 .24rem rgb(255 229 114 / 76%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="black-hole"]::after {
  inset: 25% 6%;
  border: .1rem solid rgb(255 171 112 / 66%);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 6%, rgb(255 230 192 / 34%) 48%, transparent 94%);
  box-shadow:
    0 0 .3rem rgb(255 84 71 / 56%),
    inset 0 0 .34rem rgb(96 74 255 / 56%);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="rift"]::after {
  inset: 10% 18%;
  clip-path: polygon(46% 0, 64% 22%, 53% 38%, 76% 53%, 48% 61%, 59% 77%, 38% 100%, 43% 73%, 24% 56%, 47% 43%, 34% 26%);
  background:
    linear-gradient(90deg, transparent 34%, rgb(218 251 255 / 92%) 45% 54%, transparent 66%),
    linear-gradient(135deg, rgb(91 236 255 / 46%), rgb(255 72 221 / 54%));
  filter: drop-shadow(0 0 .24rem #4df1ff) drop-shadow(0 0 .32rem #b549ff);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="stardust"]::after {
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 24%, #fff 0 1.5%, transparent 3%),
    radial-gradient(circle at 72% 19%, rgb(151 224 255 / 94%) 0 1.8%, transparent 3.5%),
    radial-gradient(circle at 84% 66%, rgb(255 137 226 / 92%) 0 1.4%, transparent 3%),
    radial-gradient(circle at 38% 82%, rgb(255 243 168 / 88%) 0 1.7%, transparent 3.2%),
    radial-gradient(circle at 49% 47%, rgb(255 255 255 / 72%) 0 2%, transparent 5%);
  filter: drop-shadow(0 0 .18rem rgb(166 219 255 / 72%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="moon"]::after {
  inset: 13%;
  border-block: .09rem solid rgb(222 244 255 / 72%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 31%, rgb(255 255 255 / 72%) 0 5%, transparent 7%),
    linear-gradient(112deg, transparent 36%, rgb(125 201 255 / 40%) 49%, transparent 62%);
  box-shadow: inset .14rem 0 .28rem rgb(112 197 255 / 34%), 0 0 .24rem rgb(207 239 255 / 44%);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="golden-comet"]::after {
  inset: 30% 4%;
  clip-path: polygon(0 42%, 72% 24%, 100% 50%, 72% 76%, 0 58%, 54% 50%);
  background: linear-gradient(90deg, transparent, rgb(255 161 62 / 42%) 28%, rgb(255 236 134 / 82%) 72%, #fff 96%);
  filter: drop-shadow(0 0 .25rem rgb(255 205 79 / 72%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="ring-world"]::after {
  inset: 23% 8%;
  border: .09rem solid rgb(169 226 255 / 78%);
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 30%, rgb(255 137 244 / 44%) 48%, transparent 66%);
  box-shadow: 0 0 .3rem rgb(112 196 255 / 58%), inset 0 0 .26rem rgb(251 111 255 / 42%);
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="alien-monolith"]::after {
  inset: 5% auto 5% -14%;
  inline-size: 14%;
  background:
    repeating-linear-gradient(0deg, transparent 0 7%, rgb(178 255 247 / 74%) 9% 12%, transparent 14% 22%),
    linear-gradient(90deg, transparent, rgb(75 243 255 / 82%), transparent);
  filter: drop-shadow(0 0 .22rem rgb(62 232 255 / 72%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="quantum-vault"]::after {
  inset: 17%;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background:
    repeating-conic-gradient(from 8deg, rgb(255 232 127 / 68%) 0 5deg, transparent 6deg 32deg),
    radial-gradient(circle, transparent 0 37%, rgb(114 255 194 / 38%) 40% 47%, transparent 50%);
  filter: drop-shadow(0 0 .25rem rgb(255 211 83 / 68%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="nasa-bar"]::after {
  inset: 0 auto 0 -18%;
  inline-size: 16%;
  background:
    repeating-linear-gradient(0deg, transparent 0 9%, rgb(146 240 255 / 72%) 10% 12%, transparent 13% 21%),
    linear-gradient(90deg, transparent, rgb(255 255 255 / 82%), transparent);
  filter: drop-shadow(0 0 .2rem rgb(103 229 255 / 68%));
}

.wormhole-machine:is(:not(.is-spinning), .is-settling-symbols) .matrix-space-object[data-space-object="spin-bonus"]::after {
  inset: 8%;
  border: .1rem dotted rgb(255 255 255 / 92%);
  border-radius: 46% 54% 44% 56% / 55% 44% 56% 45%;
  background:
    conic-gradient(from 20deg, transparent 0 14%, rgb(255 240 91 / 62%) 18%, transparent 23% 47%, rgb(92 236 255 / 68%) 53%, transparent 59%);
  box-shadow: 0 0 .35rem #fff76e, inset 0 0 .28rem rgb(88 230 255 / 52%);
}

/* Prism Cascade objects fill their cells; the true winning path explains pay. */
.online-cascade-field {
  display: grid;
  inline-size: min(46rem, 98%);
  justify-items: center;
  gap: clamp(.4rem, 1.1dvh, .75rem);
}

.online-cascade-objective {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .38rem .76rem;
  border: .12rem solid #fff;
  border-radius: .72rem;
  background: linear-gradient(135deg, #3ef2db, #4471e4 52%, #e94eb3);
  color: #fff;
  box-shadow: 0 .22rem 0 #172863, 0 0 .9rem rgb(74 230 235 / 54%);
  text-shadow: 0 .1rem .15rem #17205c;
}

.online-cascade-objective strong {
  font-size: clamp(.875rem, 2.8cqi, 1.45rem);
}

.online-cascade-objective small {
  font-size: clamp(.875rem, 1.3cqi, .875rem);
  letter-spacing: .05em;
}

.online-cascade-grid {
  position: relative;
  inline-size: min(36rem, 96%, 34dvh);
  gap: clamp(.22rem, .7vw, .46rem);
}

.online-cascade-grid > span {
  overflow: hidden;
  padding: 0;
  border-width: .12rem;
  border-radius: .75rem;
  background: #020716;
}

.online-prism-object {
  background-image: url("assets/images/bonus/prism-cascade-atlas.webp");
  background-size: 500% 100%;
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.08);
}

.online-prism-object[data-prism="ice"] { background-position: 0 0; }
.online-prism-object[data-prism="star"] { background-position: 25% 0; }
.online-prism-object[data-prism="plasma"] { background-position: 50% 0; }
.online-prism-object[data-prism="emerald"] { background-position: 75% 0; }
.online-prism-object[data-prism="solar"] { background-position: 100% 0; }

.online-cascade-grid > span.is-winning {
  z-index: 2;
  border-color: #fff6a1;
  background: #050819;
  box-shadow: 0 0 0 .13rem #ffbd43, 0 0 1.3rem #fff186;
}

.online-cascade-grid > span.is-winning .online-prism-object {
  animation: online-prism-object-win 720ms var(--bonus-spring) both;
}

.online-cascade-win-path {
  position: absolute;
  z-index: 4;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.online-cascade-win-path polyline {
  fill: none;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: online-cascade-path-draw 620ms 100ms ease-out forwards;
}

.online-cascade-path-rail {
  stroke: #6d27ff;
  stroke-width: 13;
  opacity: .94;
  filter: drop-shadow(0 0 .48rem #bd4dff);
}

.online-cascade-path-core {
  stroke: #fff7a8;
  stroke-width: 4.5;
  filter:
    drop-shadow(0 0 .2rem #ff9f42)
    drop-shadow(0 0 .72rem #fff);
}

.online-cascade-reason {
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .08rem .65rem;
  padding: .48rem .8rem;
  border: .14rem solid #fff;
  border-radius: .8rem;
  background: linear-gradient(145deg, #fff385, #ff9b4f 52%, #e63ea2);
  color: #351642;
  box-shadow: 0 .28rem 0 #7b2857, 0 0 1.2rem rgb(255 224 101 / 76%);
  opacity: 0;
  transform: translateY(.8rem) scale(.78);
  animation: online-cascade-reason-in 420ms 430ms var(--bonus-spring) forwards;
}

.online-cascade-reason strong {
  grid-row: 1 / 3;
  font-size: clamp(1.05rem, 3.5cqi, 1.9rem);
}

.online-cascade-reason small {
  font-size: clamp(.875rem, 1.1cqi, .875rem);
  letter-spacing: .08em;
}

.online-cascade-reason b {
  font: 400 clamp(.875rem, 2.2cqi, 1.2rem)/1 var(--bonus-display);
}

@keyframes online-prism-object-win {
  0% { transform: scale(.8); filter: brightness(1.7) saturate(1.35); }
  58% { transform: scale(1.19); }
  100% { transform: scale(1.08); filter: brightness(1.12) saturate(1.22); }
}

@keyframes online-cascade-path-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes online-cascade-reason-in {
  62% { opacity: 1; transform: translateY(-.12rem) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Starfall Drop: a true luminous star follows the measured physics path. */
.online-starfalldrop-launch,
.online-starfalldrop-token {
  position: relative;
  display: grid;
  inline-size: var(--starfall-star-size, clamp(1.25rem, 4.5cqi, 2rem));
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  background:
    radial-gradient(circle at 45% 38%, #fff 0 8%, transparent 9%),
    linear-gradient(145deg, #fffbd1 0 18%, #ffcf4f 38%, #ff6aaa 68%, #8737b8 100%);
  clip-path: polygon(50% 0, 61% 34%, 97% 35%, 68% 56%, 79% 92%, 50% 71%, 21% 92%, 32% 56%, 3% 35%, 39% 34%);
  color: #fff;
  filter:
    drop-shadow(0 .2rem 0 #602b6f)
    drop-shadow(0 0 .42rem #fff2a5)
    drop-shadow(0 0 .9rem #ff8aca);
}

.starfall-star-core {
  inline-size: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .3rem #fff, 0 0 .66rem #fff9a8;
}

.online-starfalldrop-token.is-dropping {
  z-index: 8;
  inset: 0 auto auto 0;
  animation: none;
  transform: none;
  will-change: transform;
}

.online-starfalldrop-token.is-dropping.is-entering-bin {
  z-index: 14;
  animation: starfall-star-enter-bin 420ms cubic-bezier(.35, .02, .72, 1) both;
}

.online-starfalldrop-board.is-fast-forwarding .online-starfalldrop-token.is-dropping {
  filter: drop-shadow(0 -1.1rem .55rem rgb(255 224 91 / 72%));
}

.online-starfalldrop-token[data-lane="0"] { --landing-left: 7.142%; }
.online-starfalldrop-token[data-lane="1"] { --landing-left: 21.428%; }
.online-starfalldrop-token[data-lane="2"] { --landing-left: 35.714%; }
.online-starfalldrop-token[data-lane="3"] { --landing-left: 50%; }
.online-starfalldrop-token[data-lane="4"] { --landing-left: 64.286%; }
.online-starfalldrop-token[data-lane="5"] { --landing-left: 78.572%; }
.online-starfalldrop-token[data-lane="6"] { --landing-left: 92.858%; }

.online-starfalldrop-token.is-landed {
  inset: auto auto .18rem var(--landing-left);
  transform: translateX(-50%);
  animation: starfall-star-land 620ms var(--bonus-spring) both;
}

.online-starfalldrop-pegs i {
  inline-size: clamp(.58rem, 1.6cqi, .9rem);
  border: .06rem solid #fff;
  background: radial-gradient(circle at 35% 25%, #fff, #5ae8f3 46%, #4d4cb6);
  box-shadow: 0 .12rem 0 #183a66, 0 0 .7rem #80f5ff;
}

.online-starfalldrop-pegs {
  inset: 1.9rem 2.2rem 4rem;
  display: block;
}

.online-starfalldrop-pegs i {
  position: absolute;
  inset: var(--peg-y) auto auto var(--peg-x);
  opacity: 1;
  transform: translate(-50%, -50%);
}

.online-starfalldrop-pegs i.is-hit {
  animation: starfall-peg-impact 150ms ease-out both;
}

.online-starfalldrop-bins > span {
  min-block-size: clamp(3.25rem, 10cqi, 4.4rem);
  font-size: clamp(.875rem, 2.1cqi, 1rem);
}

@keyframes starfall-peg-impact {
  50% {
    transform: translate(-50%, -50%) scale(1.65);
    filter: brightness(2);
    box-shadow: 0 0 1.25rem #fff, 0 0 2rem #65f5ff;
  }
}

@keyframes starfall-peg-spark-ring {
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.3);
  }
}

@keyframes starfall-peg-spark-flight {
  12% { opacity: 1; }
  68% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      rotate(var(--starfall-peg-spark-angle))
      translateY(calc(var(--starfall-peg-spark-reach) * -1))
      scale(.12);
  }
}

@keyframes starfall-star-land {
  0% { translate: 0 -1.4rem; scale: .86 1.14; }
  56% { translate: 0 0; scale: 1 .82; }
  78% { translate: 0 -.2rem; scale: .96 1.04; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes starfall-star-enter-bin {
  0% {
    opacity: 1;
    scale: .94;
  }
  72% {
    opacity: 1;
    scale: .98 .9;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@media (forced-colors: active) {
  .online-starfalldrop-launch,
  .online-starfalldrop-token {
    background: CanvasText;
    filter: none;
  }

  .starfall-star-core {
    background: Canvas;
    box-shadow: none;
  }
}

/* Starfall's prize bays are the result presentation: increasingly spectacular
   light, impact, motion, sound, and haptics scale with the landed multiplier. */
.bonus-game-machine[data-bonus-game="starfalldrop"] .online-original-scene {
  grid-template-rows: minmax(0, 1fr) auto;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] :is(
  .online-game-meter,
  .online-original-scene > .bonus-scene-status
) {
  display: none;
}

.online-starfalldrop-bins {
  z-index: 5;
  grid-template-columns: var(--starfall-bin-columns, repeat(7, minmax(0, 1fr)));
  gap: var(--starfall-bin-gap, clamp(.12rem, .7cqi, .34rem));
  perspective: 30rem;
}

.online-starfalldrop-bins .starfall-prize-bay {
  --bay-bright: #59efff;
  --bay-mid: #1779c5;
  --bay-deep: #142a78;

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  min-block-size: clamp(4.2rem, 12cqi, 5.7rem);
  place-items: center;
  overflow: visible;
  padding: .48rem .08rem .3rem;
  border: .13rem solid #eaffff;
  border-block-start-width: .28rem;
  border-radius: .42rem .42rem .85rem .85rem;
  background:
    radial-gradient(circle at 50% 4%, rgb(255 255 255 / 82%), transparent 15%),
    linear-gradient(90deg, transparent 0 12%, rgb(255 255 255 / 20%) 14% 19%, transparent 22% 78%, rgb(255 255 255 / 14%) 81% 86%, transparent 88%),
    linear-gradient(180deg, var(--bay-bright), var(--bay-mid) 25%, var(--bay-deep) 88%);
  color: #fff;
  box-shadow:
    0 .32rem 0 color-mix(in oklab, var(--bay-deep), #02061c 55%),
    0 .55rem .8rem rgb(0 0 0 / 52%),
    0 0 .62rem color-mix(in oklab, var(--bay-bright), transparent 38%),
    inset 0 .12rem .15rem rgb(255 255 255 / 54%),
    inset 0 -.35rem .5rem rgb(0 0 0 / 34%);
  transform-origin: 50% 100%;
}

.online-starfalldrop-bins .starfall-prize-bay::before {
  position: absolute;
  z-index: 3;
  inset: -.4rem -.18rem auto;
  block-size: .58rem;
  border: .1rem solid #fff;
  border-radius: 999rem;
  background: linear-gradient(180deg, #fff, var(--bay-bright) 36%, var(--bay-mid) 72%, #071634);
  box-shadow: 0 0 .65rem var(--bay-bright), inset 0 .08rem .1rem #fff;
  content: "";
}

.online-starfalldrop-bins .starfall-prize-bay::after {
  position: absolute;
  z-index: -1;
  inset: 18% 12% 8%;
  border-radius: 50%;
  background: var(--bay-bright);
  content: "";
  filter: blur(.55rem);
  opacity: .3;
}

.starfall-prize-bay.is-value-3 {
  --bay-bright: #ff7be7;
  --bay-mid: #e82d9c;
  --bay-deep: #71145f;
}

.starfall-prize-bay.is-value-8 {
  --bay-bright: #a6fffb;
  --bay-mid: #9a51ff;
  --bay-deep: #471576;
}

.starfall-prize-bay.is-value-25 {
  --bay-bright: #fff48a;
  --bay-mid: #ff9d35;
  --bay-deep: #a72c69;
}

.starfall-bin-foreground {
  position: absolute;
  z-index: 20;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: var(--starfall-bin-columns, repeat(7, minmax(0, 1fr)));
  gap: var(--starfall-bin-gap, clamp(.12rem, .7cqi, .34rem));
  pointer-events: none;
}

.starfall-bin-rail {
  --rail-bright: #59efff;
  --rail-deep: #142a78;

  display: block;
  min-block-size: clamp(4.6rem, 16cqb, 6.2rem);
  border: clamp(.16rem, .65cqi, .3rem) solid var(--rail-bright);
  border-block-start: clamp(.28rem, 1.05cqi, .48rem) solid #efffff;
  border-block-end-color: var(--rail-deep);
  border-radius: clamp(.55rem, 1.8cqi, 1rem);
  background: transparent;
  box-shadow:
    inset .16rem 0 .2rem rgb(2 6 24 / 84%),
    inset -.16rem 0 .2rem rgb(2 6 24 / 84%),
    inset 0 .18rem .18rem var(--rail-bright),
    0 0 .38rem color-mix(in oklab, var(--rail-bright), transparent 28%);
}

.starfall-bin-rail.is-value-3 {
  --rail-bright: #ff7be7;
  --rail-deep: #71145f;
}

.starfall-bin-rail.is-value-8 {
  --rail-bright: #a6fffb;
  --rail-deep: #471576;
}

.starfall-bin-rail.is-value-25 {
  --rail-bright: #fff48a;
  --rail-deep: #a72c69;
}

.starfall-prize-bay > b {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  color: #fff;
  font-family: var(--bonus-display);
  font-style: normal;
  font-weight: 400;
  line-height: .78;
  paint-order: stroke fill;
  text-shadow:
    0 .09em 0 color-mix(in oklab, var(--bay-deep), #000 35%),
    0 0 .32em var(--bay-bright);
  -webkit-text-stroke: .035em color-mix(in oklab, var(--bay-deep), #000 25%);
}

.starfall-prize-bay > b strong {
  font: inherit;
  font-size: clamp(.95rem, 34cqi, 3rem);
}

.starfall-prize-bay > b em {
  margin-inline-start: -.06em;
  font: inherit;
  font-size: clamp(.875rem, 18cqi, 1.45rem);
}

.starfall-prize-bay > b small {
  flex-basis: 100%;
  margin-block-start: .2rem;
  color: #fff;
  font: 400 clamp(.875rem, 11cqi, .875rem)/1 var(--bonus-display);
  letter-spacing: .045em;
  text-align: center;
  text-shadow: 0 .1em 0 #14051f, 0 0 .45em var(--bay-bright);
  -webkit-text-stroke: .04em #14051f;
}

.starfall-prize-bay.is-wager-paytable > b strong {
  font-size: clamp(.875rem, 25cqi, 1.85rem);
}

.starfall-prize-bay.is-wager-paytable > b em {
  margin-inline-start: .08em;
  font-size: clamp(.875rem, 13cqi, .92rem);
}

.starfall-bay-energy {
  position: absolute;
  z-index: 1;
  inset: auto 18% .22rem;
  block-size: .28rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .35rem #fff, 0 0 .8rem var(--bay-bright);
  opacity: .72;
}

.starfall-bay-crown {
  position: absolute;
  z-index: 7;
  inset: -.95rem auto auto 50%;
  inline-size: 1.35rem;
  aspect-ratio: 1.4;
  background: linear-gradient(180deg, #fffbd0, #ffd943 55%, #ff7d39);
  clip-path: polygon(0 100%, 7% 36%, 30% 63%, 50% 0, 70% 63%, 93% 36%, 100% 100%);
  filter: drop-shadow(0 0 .35rem #ffe75f);
  opacity: 0;
  transform: translateX(-50%) scale(.55);
}

.starfall-prize-bay.is-value-25 .starfall-bay-crown {
  opacity: 1;
  transform: translateX(-50%);
}

.online-starfalldrop-bins .starfall-prize-bay.is-winning {
  z-index: 12;
  border-color: #fff;
  color: #fff;
  animation: starfall-bay-win 1.25s cubic-bezier(.16, .82, .24, 1.18) both;
}

.online-starfalldrop-bins .starfall-prize-bay.is-capturing {
  z-index: 12;
  border-color: #fff;
  box-shadow:
    0 .24rem 0 #03091f,
    0 0 1rem #fff,
    0 0 2rem var(--bay-bright),
    inset 0 0 1.1rem var(--bay-bright);
  animation: starfall-bay-capture 420ms ease-out both;
}

.online-starfalldrop-board.is-power-2 .starfall-prize-bay.is-winning {
  animation-name: starfall-bay-win-2;
}

.online-starfalldrop-board:is(.is-power-3, .is-power-8, .is-power-25) .starfall-prize-bay.is-winning {
  animation-name: starfall-bay-win-major;
  animation-duration: 1.65s;
}

.online-starfalldrop-board.is-power-25 .starfall-prize-bay.is-winning {
  animation-name: starfall-bay-win-jackpot;
  animation-duration: 2.1s;
}

.online-starfalldrop-board.is-celebrating .starfall-prize-bay:not(.is-winning) {
  filter: brightness(.56) saturate(.72);
  opacity: .72;
  transform: scale(.94);
}

.starfall-impact-burst {
  --burst-distance: -3.2rem;

  position: absolute;
  z-index: 11;
  inset: auto auto 2.55rem var(--landing-left, 50%);
  inline-size: .1rem;
  block-size: .1rem;
  pointer-events: none;
}

.starfall-impact-burst[data-power="3"] { --burst-distance: -5.4rem; }
.starfall-impact-burst[data-power="8"] { --burst-distance: -7rem; }
.starfall-impact-burst[data-power="25"] { --burst-distance: -9rem; }

.starfall-impact-burst > i {
  position: absolute;
  inset: 0;
  inline-size: clamp(.18rem, .8cqi, .34rem);
  block-size: clamp(.8rem, 3.2cqi, 1.5rem);
  border-radius: 999rem;
  background: linear-gradient(#fff, #fff36e 42%, #ff5fcf);
  box-shadow: 0 0 .45rem #fff, 0 0 1rem #ffdc58;
  opacity: 0;
  transform: rotate(var(--particle-angle)) translateY(-.5rem) scaleY(.25);
  transform-origin: 50% 100%;
  animation: starfall-impact-particle 1.15s cubic-bezier(.12, .7, .18, 1) both;
}

.starfall-impact-burst[data-power="3"] > i {
  animation-duration: 1.45s;
}

.starfall-impact-burst:is([data-power="8"], [data-power="25"]) > i {
  inline-size: clamp(.25rem, 1cqi, .45rem);
  animation-duration: 1.9s;
}

.starfall-impact-burst[data-power="25"] > i {
  inline-size: clamp(.3rem, 1.2cqi, .52rem);
  animation-duration: 2.25s;
}

@keyframes starfall-bay-win {
  0% { filter: brightness(1); transform: scale(.94, 1.08); }
  28% { filter: brightness(1.8) saturate(1.35); transform: translateY(-.2rem) scale(1.16, .9); }
  58% { transform: translateY(-.08rem) scale(1.04, 1.1); }
  100% { filter: brightness(1.2) saturate(1.15); transform: scale(1.04); }
}

@keyframes starfall-bay-capture {
  0% { filter: brightness(1); }
  48% { filter: brightness(1.7) saturate(1.3); }
  100% { filter: brightness(1.2); }
}

@keyframes starfall-bay-win-2 {
  0% { filter: brightness(1); transform: scale(.9, 1.12); }
  24% { filter: brightness(2) saturate(1.42); transform: translateY(-.4rem) scale(1.28, .86); }
  52% { transform: translateY(-.12rem) scale(1.08, 1.18); }
  76% { transform: translateY(-.22rem) scale(1.16, .96); }
  100% { filter: brightness(1.28) saturate(1.22); transform: scale(1.1); }
}

@keyframes starfall-bay-win-major {
  0% { filter: brightness(1); transform: scale(.86, 1.16); }
  20% { filter: brightness(2.4) saturate(1.55); transform: translateY(-.7rem) scale(1.42, .82) rotate(-2deg); }
  42% { transform: translateY(-.18rem) scale(1.12, 1.24) rotate(2deg); }
  66% { transform: translateY(-.42rem) scale(1.28, .92); }
  82% { transform: translateY(-.12rem) scale(1.13, 1.1); }
  100% { filter: brightness(1.36) saturate(1.32); transform: scale(1.18); }
}

@keyframes starfall-bay-win-jackpot {
  0% { filter: brightness(1); transform: scale(.82, 1.2); }
  16% { filter: brightness(2.8) saturate(1.7); transform: translateY(-1rem) scale(1.62, .76) rotate(-3deg); }
  34% { transform: translateY(-.22rem) scale(1.18, 1.38) rotate(3deg); }
  52% { transform: translateY(-.72rem) scale(1.48, .86) rotate(-2deg); }
  70% { transform: translateY(-.18rem) scale(1.2, 1.24) rotate(1deg); }
  84% { transform: translateY(-.4rem) scale(1.36, .94); }
  100% { filter: brightness(1.5) saturate(1.45); transform: scale(1.27); }
}

@keyframes starfall-impact-particle {
  0% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(-.5rem) scaleY(.18); }
  16% { opacity: 1; }
  64% { opacity: 1; transform: rotate(var(--particle-angle)) translateY(var(--burst-distance)) scaleY(1.25); }
  100% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(var(--burst-distance)) scaleY(.25); }
}

/*
 * Starfall's gravity field consumes the complete play scene. Eight staggered
 * peg rows use both dimensions, while the landed star moves into a clipped
 * orbital docking well inside the winning bay.
 */
.online-game-playfield:has(.online-starfalldrop-board) {
  overflow: hidden;
  padding: clamp(.12rem, .5cqi, .35rem);
  container-type: size;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-game-stage {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-starfalldrop-board {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  container-type: size;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-starfalldrop-pegs {
  inset:
    clamp(3rem, 10cqb, 4.8rem)
    clamp(.65rem, 3.5cqi, 2.2rem)
    clamp(5rem, 18cqb, 7rem);
  cursor: pointer;
  touch-action: manipulation;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-starfalldrop-pegs i {
  --starfall-pin-face-size: clamp(.56rem, 1.85cqi, 1.28rem);

  inline-size: clamp(.48rem, 1.35cqi, .84rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  isolation: isolate;
}

.bonus-game-machine[data-bonus-game="starfalldrop"] .online-starfalldrop-pegs i::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  inline-size: var(--starfall-pin-face-size);
  aspect-ratio: 1;
  border: .06rem solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff, #5ae8f3 46%, #4d4cb6);
  box-shadow: 0 .12rem 0 #183a66, 0 0 .7rem #80f5ff;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.starfall-peg-spark {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.starfall-peg-spark::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: var(--starfall-pin-face-size, 1rem);
  aspect-ratio: 1;
  border: .1rem solid #fffbd0;
  border-radius: 50%;
  box-shadow: 0 0 .65rem #fff, 0 0 1.1rem #7ff8ff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  animation: starfall-peg-spark-ring 380ms ease-out both;
}

.starfall-peg-spark > b {
  position: absolute;
  inset: -.1rem auto auto -.1rem;
  inline-size: .2rem;
  block-size: .46rem;
  border-radius: 999px;
  background: linear-gradient(#fff, #fff49c 45%, #55eef5);
  box-shadow: 0 0 .45rem #fff, 0 0 .75rem #63efff;
  opacity: 0;
  transform: rotate(var(--starfall-peg-spark-angle)) translateY(0) scale(.25);
  animation: starfall-peg-spark-flight 440ms cubic-bezier(.12, .72, .18, 1) var(--starfall-peg-spark-delay) both;
}

.online-starfalldrop-bins .starfall-prize-bay {
  min-block-size: clamp(4.6rem, 16cqb, 6.2rem);
  overflow: visible;
  border: .12rem solid #9ff7ff;
  border-block-start-width: .18rem;
  border-radius: clamp(.55rem, 1.8cqi, 1rem);
  background:
    linear-gradient(90deg, rgb(148 240 255 / 8%), rgb(255 255 255 / 28%) 48% 52%, rgb(148 240 255 / 8%)),
    linear-gradient(180deg, #1e4779 0 12%, #0a163b 13% 78%, #274c84 79%);
  box-shadow:
    0 .24rem 0 #03091f,
    0 .5rem .75rem rgb(0 0 0 / 58%),
    0 0 .72rem var(--bay-bright),
    inset 0 0 .75rem rgb(82 223 255 / 28%);
}

.online-starfalldrop-bins .starfall-prize-bay::before {
  inset: -.28rem .1rem auto;
  block-size: .38rem;
  border-width: .07rem;
  background:
    linear-gradient(90deg, #12355f, #d9fdff 18% 26%, var(--bay-bright) 42% 58%, #d9fdff 74% 82%, #12355f);
}

.starfall-bin-well {
  position: absolute;
  z-index: 2;
  inset: .38rem .16rem .28rem;
  display: block;
  overflow: hidden;
  border: .07rem solid rgb(216 253 255 / 72%);
  border-radius: .48rem;
  background:
    radial-gradient(ellipse at 50% 44%, rgb(255 255 255 / 22%) 0 4%, transparent 6%),
    radial-gradient(ellipse at 50% 72%, var(--bay-bright) 0 7%, var(--bay-mid) 24%, #050c28 62%, #020617 100%);
  box-shadow:
    inset 0 0 .85rem rgb(0 0 0 / 78%),
    inset 0 0 1.2rem color-mix(in oklab, var(--bay-bright), transparent 52%);
  pointer-events: none;
}

.starfall-bin-well::before,
.starfall-bin-well::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.starfall-bin-well::before {
  inset: 39% 5% auto;
  block-size: 30%;
  border: .1rem solid var(--bay-bright);
  border-block-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 .48rem var(--bay-bright);
  rotate: -7deg;
}

.starfall-bin-well::after {
  inset: 10%;
  background:
    radial-gradient(circle, #fff 0 .035rem, transparent .055rem) 0 0 / .72rem .72rem;
  opacity: .62;
}

.starfall-bin-horizon {
  position: absolute;
  z-index: 1;
  inset: auto 12% 14%;
  block-size: .18rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .35rem #fff, 0 0 .8rem var(--bay-bright);
}

.starfall-bin-well > .online-starfalldrop-token.is-landed {
  z-index: 2;
  inset: auto auto .1rem 50%;
  transform: translateX(-50%);
}

.starfall-prize-bay > b {
  z-index: 4;
}

/* Orbit Lines drifts as a 3D constellation console. A separate card layer can
   perform an occasional quick axis spin without disturbing the slow pivot. */
.online-bingo-rig {
  --orbit-board-tilt: 14deg;

  position: relative;
  z-index: 2;
  align-self: center;
  inline-size: min(38rem, 96%, 78cqb);
  max-block-size: 100%;
  animation: orbit-lines-space-pivot 24s ease-in-out infinite;
  transform: rotateX(var(--orbit-board-tilt)) rotateY(0deg) rotateZ(-.65deg);
  transform-origin: 50% 78%;
  transform-style: preserve-3d;
  will-change: transform;
}

.online-bingo-card {
  position: relative;
  isolation: isolate;
  display: grid;
  cursor: pointer;
  touch-action: manipulation;
  inline-size: 100%;
  max-block-size: 100%;
  gap: clamp(.18rem, .7cqi, .38rem);
  padding: clamp(.35rem, 1.2cqi, .72rem);
  border: clamp(.14rem, .38cqi, .24rem) solid #c9fbff;
  border-radius: clamp(.9rem, 2.8cqi, 1.55rem);
  background:
    radial-gradient(ellipse at 50% -18%, rgb(128 248 255 / 52%), transparent 44%),
    radial-gradient(circle at 12% 74%, rgb(235 62 211 / 34%), transparent 30%),
    radial-gradient(circle at 88% 70%, rgb(85 106 255 / 38%), transparent 34%),
    linear-gradient(145deg, #071c3d 0%, #10114d 56%, #2e0d50 100%);
  box-shadow:
    0 .5rem 0 #050c27,
    0 .9rem 1.6rem rgb(0 0 0 / 54%),
    0 0 1.2rem rgb(105 236 255 / 72%),
    0 0 2.8rem rgb(181 76 255 / 34%),
    inset 0 0 2rem rgb(80 224 255 / 20%);
  transform: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes orbit-lines-space-pivot {
  0%, 100% {
    transform: rotateX(calc(var(--orbit-board-tilt) - 1deg)) rotateY(-3.2deg) rotateZ(-1.1deg);
  }
  25% {
    transform: rotateX(calc(var(--orbit-board-tilt) + 2.4deg)) rotateY(1.8deg) rotateZ(.55deg);
  }
  50% {
    transform: rotateX(calc(var(--orbit-board-tilt) - 2deg)) rotateY(3.6deg) rotateZ(-.25deg);
  }
  75% {
    transform: rotateX(calc(var(--orbit-board-tilt) + 1.3deg)) rotateY(-1.7deg) rotateZ(.9deg);
  }
}

.online-bingo-card::before {
  position: absolute;
  z-index: -1;
  inset: .28rem;
  border: .06rem solid rgb(187 245 255 / 38%);
  border-radius: inherit;
  background:
    radial-gradient(circle, #fff 0 .055rem, transparent .075rem) 0 0 / 1.2rem 1.2rem,
    radial-gradient(circle, #82edff 0 .04rem, transparent .065rem) .5rem .35rem / 1.75rem 1.75rem;
  content: "";
  opacity: .6;
  pointer-events: none;
  transform: translateZ(.12rem);
}

.online-bingo-card::after {
  position: absolute;
  z-index: -2;
  inset: .62rem -.34rem -.82rem .34rem;
  border: .14rem solid rgb(117 226 255 / 58%);
  border-radius: inherit;
  background:
    linear-gradient(90deg, #07112f, #35155c 72%, #12072c),
    #07112f;
  box-shadow:
    0 .72rem 1rem rgb(0 0 0 / 56%),
    0 0 1.1rem rgb(87 221 255 / 36%),
    inset 0 -.7rem .9rem rgb(0 0 0 / 44%);
  content: "";
  pointer-events: none;
  transform: translateZ(-1.45rem);
}

.online-bingo-nav {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: clamp(.35rem, 1.4cqi, .72rem);
  min-block-size: clamp(1.7rem, 5.2cqi, 2.65rem);
  padding: .24rem clamp(.38rem, 1.2cqi, .7rem);
  border: .08rem solid rgb(182 248 255 / 66%);
  border-radius: .62rem;
  background: linear-gradient(90deg, rgb(5 22 65 / 92%), rgb(47 18 99 / 84%));
  box-shadow: inset 0 0 .72rem rgb(94 232 255 / 20%), 0 0 .55rem rgb(76 217 255 / 26%);
  color: #ecfeff;
  transform: translateZ(.82rem);
}

.online-bingo-nav span {
  display: grid;
  gap: .08rem;
}

.online-bingo-nav small,
.online-bingo-nav em {
  font: 800 clamp(.875rem, 1.35cqi, .875rem)/1 var(--mono);
  letter-spacing: .08em;
}

.online-bingo-nav strong {
  color: #fff18b;
  font: 950 clamp(.875rem, 2.1cqi, 1.05rem)/1 var(--bonus-display);
  text-shadow: 0 0 .45rem #ff8edc;
}

.online-bingo-nav > i {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.14rem, .48cqi, .3rem);
  block-size: clamp(.35rem, 1.05cqi, .58rem);
}

.online-bingo-nav > i b {
  border: .05rem solid rgb(134 224 255 / 46%);
  border-radius: 99rem;
  background: #071329;
  box-shadow: inset 0 0 .22rem rgb(0 0 0 / 74%);
}

.online-bingo-nav > i b.is-locked {
  border-color: #fff;
  background: linear-gradient(90deg, #65efff, #fff173, #ff69ca);
  box-shadow: 0 0 .34rem #fff, 0 0 .7rem #68ecff;
  animation: orbit-lines-route-lock 520ms var(--bonus-spring) both;
}

.online-bingo-nav em {
  color: #85f4ff;
  font-style: normal;
  text-align: right;
  text-shadow: 0 0 .4rem #41bbff;
  white-space: nowrap;
}

.online-bingo-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .22rem;
  transform: translateZ(.7rem);
  transform-style: preserve-3d;
}

.online-bingo-header span {
  position: relative;
  display: grid;
  min-block-size: clamp(1.7rem, 4.5cqi, 2.6rem);
  place-items: center;
  overflow: hidden;
  border: .1rem solid #e8feff;
  border-radius: .58rem;
  background:
    radial-gradient(circle at 50% 115%, rgb(255 240 118 / 88%), transparent 45%),
    linear-gradient(180deg, #45e5ff, #5754dc 56%, #c13ac5);
  color: #fffbd0;
  box-shadow:
    inset 0 .1rem 0 rgb(255 255 255 / 44%),
    0 0 .55rem rgb(87 224 255 / 48%);
  font-size: clamp(.9rem, 3.2cqi, 1.72rem);
  paint-order: stroke fill;
  text-shadow: 0 .1em 0 #3a1c76, 0 0 .35em #fff;
  -webkit-text-stroke: .025em #251251;
  transform: translateZ(.22rem);
}

.online-bingo-grid {
  position: relative;
  inline-size: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.16rem, .55cqi, .32rem);
  transform: translateZ(.62rem);
  transform-style: preserve-3d;
}

.online-bingo-grid > span {
  --orbit-planet: #5de9ff;
  --orbit-deep: #17539e;

  isolation: isolate;
  overflow: hidden;
  border-width: .11rem;
  border-color: #bdf9ff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 10%), transparent 64%),
    rgb(3 15 42 / 94%);
  color: #fff;
  box-shadow:
    inset 0 0 .85rem rgb(91 224 255 / 24%),
    0 0 .42rem rgb(84 224 255 / 32%);
  transform: translateZ(.38rem);
  transform-style: preserve-3d;
}

.online-bingo-grid > span:nth-child(3n + 2) {
  --orbit-planet: #ff71d4;
  --orbit-deep: #74309e;
}

.online-bingo-grid > span:nth-child(3n) {
  --orbit-planet: #ffd75f;
  --orbit-deep: #b84b67;
}

.online-bingo-grid > span::before {
  position: absolute;
  z-index: -1;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 24%, #fff 0 5%, transparent 7%),
    radial-gradient(circle at 62% 65%, rgb(255 255 255 / 22%) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 38%, var(--orbit-planet), var(--orbit-deep) 68%, #080d31 100%);
  box-shadow:
    inset -.18rem -.24rem .38rem rgb(0 0 0 / 42%),
    0 0 .72rem color-mix(in oklab, var(--orbit-planet), transparent 28%);
  content: "";
  transform: translateZ(.18rem);
}

.online-bingo-grid > span::after {
  position: absolute;
  z-index: -1;
  inset: 38% 4%;
  border: .07rem solid rgb(238 254 255 / 72%);
  border-radius: 50%;
  content: "";
  opacity: .72;
  transform: translateZ(.26rem) rotate(-18deg);
}

.online-bingo-grid > span b {
  position: relative;
  z-index: 2;
  font: 400 clamp(.92rem, 3.2cqi, 1.72rem)/1 var(--bonus-display);
  paint-order: stroke fill;
  text-shadow: 0 .11em .12em #000, 0 0 .38em #07142d;
  -webkit-text-stroke: .025em #07142d;
  transform: translateZ(.46rem);
}

.online-bingo-grid > span.is-free {
  border-color: #fff3a2;
  background:
    conic-gradient(from 20deg, #ffec78, #ff6fc5, #6ceeff, #ffec78);
  color: #fff;
  box-shadow: 0 0 .9rem #fff, 0 0 1.4rem #ff69d1;
  transform: translateZ(.78rem);
}

.online-bingo-grid > span.is-free::before {
  inset: 18%;
  background:
    radial-gradient(circle, #020617 0 18%, #7029a9 20% 42%, #5cf3ff 46% 54%, #12053c 58%);
  box-shadow: 0 0 .85rem #fff, 0 0 1.35rem #8c5cff;
}

.online-bingo-grid > span:not(.is-drawn, .is-free) {
  border-color: #345071;
  background: #020918;
  color: #768ba5;
  box-shadow:
    inset 0 0 .8rem rgb(0 0 0 / 78%),
    0 0 .16rem rgb(84 224 255 / 14%);
}

.online-bingo-grid > span:not(.is-drawn, .is-free)::before {
  filter: grayscale(.82) saturate(.42) brightness(.48);
  opacity: .58;
}

.online-bingo-grid > span:not(.is-drawn, .is-free)::after {
  border-color: rgb(111 139 166 / 38%);
  opacity: .34;
}

.online-bingo-grid > span.is-route-candidate {
  border-color: rgb(123 242 255 / 80%);
  box-shadow:
    inset 0 0 .8rem rgb(72 231 255 / 18%),
    0 0 .32rem rgb(93 231 255 / 72%);
}

.online-bingo-grid > span.is-route-gap:not(.is-drawn, .is-free) {
  background:
    repeating-conic-gradient(from 22deg, rgb(85 228 255 / 14%) 0 7deg, transparent 7deg 22deg),
    #020918;
  animation: orbit-lines-route-gap 1.35s ease-in-out infinite alternate;
}

.online-bingo-grid > span.is-drawn {
  border-color: #fffdea;
  border-width: .2rem;
  background:
    radial-gradient(circle at 32% 22%, #fff 0 7%, transparent 9%),
    radial-gradient(circle at 50% 50%, #fff8a6 0 24%, #ffb638 48%, #ee398f 76%, #6117a5 100%);
  color: #fff;
  box-shadow:
    0 0 0 .08rem #ffdd52,
    0 0 .72rem #fff,
    0 0 1.55rem #ffcf43,
    inset 0 .12rem .22rem rgb(255 255 255 / 76%),
    inset 0 -.28rem .42rem rgb(76 10 108 / 54%);
  transform: translateZ(1.05rem) scale(1.055);
}

.online-bingo-grid > span.is-drawn::before {
  filter: saturate(1.7) brightness(1.7);
  opacity: 1;
}

.online-bingo-grid > span.is-drawn::after {
  border-color: #fff;
  border-width: .13rem;
  box-shadow: 0 0 .45rem #fff, 0 0 .85rem #ffea66;
  opacity: 1;
}

.online-bingo-grid > span.is-drawn b {
  color: #fff;
  font-size: clamp(1.08rem, 3.65cqi, 1.95rem);
  text-shadow: 0 .12em .1em #3b075c, 0 0 .38em #3b075c, 0 0 .7em #fff;
  -webkit-text-stroke: .045em #300545;
}

.online-bingo-grid > span.is-drawn i {
  z-index: 4;
  inset: .06rem .08rem auto auto;
  display: grid;
  inline-size: clamp(.78rem, 2.45cqi, 1.25rem);
  aspect-ratio: 1;
  place-items: center;
  border: .08rem solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff78b, #ff4fae);
  color: #fff;
  font-size: clamp(.875rem, 1.4cqi, .875rem);
  opacity: 1;
  text-shadow: 0 0 .24rem #8b125f;
  transform: translateZ(.52rem);
}

.online-bingo-grid > span.is-winning-cell {
  z-index: 2;
  box-shadow: 0 0 0 .09rem #fff, 0 0 1.35rem #fff179;
  transform: translateZ(1.42rem) scale(1.07);
}

.online-bingo-signal-trail {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  transform: translateZ(.72rem);
}

.online-bingo-signal-trail polyline {
  fill: none;
  stroke: rgb(108 238 255 / 72%);
  stroke-dasharray: .025 .025;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: .55;
  filter: drop-shadow(0 0 .75px #fff) drop-shadow(0 0 2px #5eeaff);
  animation: orbit-lines-trail-flow 1.2s linear infinite;
  vector-effect: non-scaling-stroke;
}

.online-bingo-win-line {
  position: absolute;
  z-index: 6;
  inset: var(--line-y) auto auto var(--line-x);
  inline-size: var(--line-length);
  block-size: .34rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, #fff, #ffe65c 46%, #ff5dbd);
  box-shadow: 0 0 .35rem #fff, 0 0 .9rem #ffe15e, 0 0 1.4rem #ff56bf;
  pointer-events: none;
  transform: translateZ(1.85rem) rotate(var(--line-angle)) scaleX(0);
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: online-bingo-line-draw 940ms 180ms cubic-bezier(.18, .78, .15, 1) forwards;
}

.online-bingo-win-line::after {
  position: absolute;
  inset: 50% -.35rem auto auto;
  inline-size: .85rem;
  aspect-ratio: 1;
  border: .12rem solid #fff;
  border-radius: 50%;
  background: #ffda59;
  box-shadow: 0 0 .8rem #fff;
  content: "";
  transform: translateY(-50%);
}

.online-bingo-win-line b {
  position: absolute;
  inset: auto auto .8rem 50%;
  padding: .28rem .58rem;
  border: .1rem solid #fff;
  border-radius: .52rem;
  background: linear-gradient(135deg, #fff17a, #ff8c4e 60%, #e73da4);
  color: #35153e;
  font-size: clamp(.875rem, 2cqi, 1rem);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) rotate(calc(var(--line-angle) * -1)) scale(.6);
  animation: online-bingo-label-pop 520ms 980ms var(--bonus-spring) forwards;
}

.online-bingo-pulse-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-block-size: clamp(1.35rem, 4.2cqi, 2.1rem);
  padding: .18rem .48rem;
  border-radius: .52rem;
  background: rgb(1 9 31 / 76%);
  color: #dffeff;
  font: 850 clamp(.875rem, 1.45cqi, .875rem)/1 var(--mono);
  letter-spacing: .055em;
  transform: translateZ(.62rem);
}

.online-bingo-pulse-hint b {
  color: #fff08b;
  font-size: max(.875rem, .92em);
  white-space: nowrap;
}

.online-bingo-card.is-pulse-ready .online-bingo-pulse-hint span {
  animation: orbit-lines-pulse-prompt .86s ease-in-out infinite alternate;
}

@keyframes orbit-lines-route-lock {
  from { opacity: .35; transform: scaleX(.18); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes orbit-lines-route-gap {
  from { filter: brightness(.82); }
  to { filter: brightness(1.25); }
}

@keyframes orbit-lines-trail-flow {
  to { stroke-dashoffset: -.1; }
}

@keyframes orbit-lines-pulse-prompt {
  to { color: #fff79b; text-shadow: 0 0 .5rem #56eaff; }
}

@keyframes online-bingo-line-draw {
  74% { transform: translateZ(1.85rem) rotate(var(--line-angle)) scaleX(1.04); }
  100% { transform: translateZ(1.85rem) rotate(var(--line-angle)) scaleX(1); }
}

@keyframes online-bingo-label-pop {
  to { opacity: 1; transform: translateX(-50%) rotate(calc(var(--line-angle) * -1)) scale(1); }
}

/*
 * Dice and Orbit Lines use the full play scene. Their large top counters already
 * carry progress, so the duplicated two-cell meter is removed.
 */
.bonus-game-machine:is(
  [data-bonus-game="dice"],
  [data-bonus-game="bingo"]
) .online-original-scene {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.bonus-game-machine[data-bonus-game="bingo"] .online-original-scene {
  grid-template-rows: minmax(0, 1fr) auto;
}

.bonus-game-machine[data-bonus-game="bingo"] .online-original-scene > .bonus-scene-status {
  display: none;
}

.bonus-game-machine:is(
  [data-bonus-game="dice"],
  [data-bonus-game="bingo"]
) .online-game-meter {
  display: none;
}

.online-game-playfield:has(.online-dice-field),
.online-game-playfield:has(.online-bingo-card) {
  overflow: hidden;
  container-type: size;
}

.online-game-playfield:has(.online-bingo-card) {
  perspective: clamp(42rem, 120cqi, 76rem);
  perspective-origin: 50% 32%;
}

.online-game-playfield:has(.online-bingo-card)::before {
  position: absolute;
  z-index: 0;
  inset: 48% -18% -32%;
  background:
    repeating-linear-gradient(90deg, rgb(91 229 255 / 22%) 0 .06rem, transparent .06rem 8%),
    repeating-linear-gradient(0deg, rgb(181 88 255 / 18%) 0 .06rem, transparent .06rem 12%),
    linear-gradient(180deg, rgb(31 112 176 / 22%), rgb(31 11 76 / 4%) 74%);
  content: "";
  opacity: .72;
  pointer-events: none;
  transform: rotateX(67deg) translateZ(-4.5rem);
  transform-origin: center top;
}

.online-game-playfield:has(.online-bingo-card)::after {
  position: absolute;
  z-index: 1;
  inset: auto auto 2% 50%;
  inline-size: min(72%, 38rem);
  block-size: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(63 219 255 / 42%), rgb(149 55 255 / 18%) 48%, transparent 72%);
  content: "";
  filter: blur(.5rem);
  opacity: .72;
  pointer-events: none;
  transform: translateX(-50%) translateZ(-3rem) rotateX(70deg);
}

.online-dice-field {
  inline-size: 100%;
  block-size: 100%;
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  column-gap: clamp(.65rem, 3cqi, 2.4rem);
  row-gap: clamp(.5rem, 1.8cqb, 1rem);
  touch-action: manipulation;
}

.quantum-dice-roll-vfx {
  --dice-fx-angle: 0deg;
  --dice-fx-direction: 1;
  --dice-fx-speed: 920ms;
  --dice-fx-phase: 0ms;
  --dice-fx-primary: #72f6ff;
  --dice-fx-secondary: #ff69d4;

  position: absolute;
  z-index: 0;
  inset: 16% 3% 10%;
  overflow: hidden;
  border-radius: 45%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--dice-fx-angle)) scaleX(var(--dice-fx-direction));
  transform-origin: center;
}

.quantum-dice-roll-vfx::before,
.quantum-dice-roll-vfx::after {
  position: absolute;
  content: "";
  opacity: 0;
  will-change: transform, opacity;
}

.quantum-dice-roll-vfx::before {
  inset: 15% 25%;
  border: clamp(.12rem, .55cqi, .28rem) solid var(--dice-fx-primary);
  border-radius: 50%;
  box-shadow:
    0 0 1.2rem var(--dice-fx-primary),
    inset 0 0 1.4rem var(--dice-fx-secondary);
  transform: rotate(0deg) scale(.4);
}

.quantum-dice-roll-vfx::after {
  inset: 48% -18% auto;
  block-size: clamp(.12rem, .5cqi, .28rem);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--dice-fx-primary), #fff, var(--dice-fx-secondary), transparent);
  transform: translate3d(-55%, 0, 0) scaleX(.2);
}

.quantum-dice-roll-vfx i {
  --spark-x: 50%;
  --spark-y: 50%;
  --spark-dx: 5rem;
  --spark-dy: -3rem;
  --spark-delay: 0ms;

  position: absolute;
  inline-size: clamp(.18rem, .72cqi, .38rem);
  aspect-ratio: 1;
  inset: var(--spark-y) auto auto var(--spark-x);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .5rem var(--dice-fx-primary), 0 0 1rem var(--dice-fx-secondary);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.2);
  will-change: transform, opacity;
}

.quantum-dice-roll-vfx i:nth-child(1) { --spark-x: 26%; --spark-y: 34%; --spark-dx: -4.8rem; --spark-dy: -3.6rem; --spark-delay: 0ms; }
.quantum-dice-roll-vfx i:nth-child(2) { --spark-x: 72%; --spark-y: 28%; --spark-dx: 5.2rem; --spark-dy: -2.8rem; --spark-delay: 90ms; }
.quantum-dice-roll-vfx i:nth-child(3) { --spark-x: 38%; --spark-y: 58%; --spark-dx: -3.5rem; --spark-dy: 3.9rem; --spark-delay: 180ms; }
.quantum-dice-roll-vfx i:nth-child(4) { --spark-x: 64%; --spark-y: 62%; --spark-dx: 4.3rem; --spark-dy: 3.5rem; --spark-delay: 270ms; }
.quantum-dice-roll-vfx i:nth-child(5) { --spark-x: 18%; --spark-y: 54%; --spark-dx: -5.8rem; --spark-dy: 1rem; --spark-delay: 360ms; }
.quantum-dice-roll-vfx i:nth-child(6) { --spark-x: 82%; --spark-y: 48%; --spark-dx: 6rem; --spark-dy: -.8rem; --spark-delay: 450ms; }
.quantum-dice-roll-vfx i:nth-child(7) { --spark-x: 48%; --spark-y: 22%; --spark-dx: -.8rem; --spark-dy: -4.8rem; --spark-delay: 540ms; }
.quantum-dice-roll-vfx i:nth-child(8) { --spark-x: 54%; --spark-y: 74%; --spark-dx: .9rem; --spark-dy: 4.6rem; --spark-delay: 630ms; }

.online-dice-field[data-roll-effect="comet"] .quantum-dice-roll-vfx {
  --dice-fx-primary: #fff279;
  --dice-fx-secondary: #ff6c8e;
}

.online-dice-field[data-roll-effect="nova"] .quantum-dice-roll-vfx {
  --dice-fx-primary: #a2ff83;
  --dice-fx-secondary: #56c8ff;
}

.online-dice-field[data-roll-effect="prism"] .quantum-dice-roll-vfx {
  --dice-fx-primary: #d49aff;
  --dice-fx-secondary: #53ffdc;
}

.online-dice-field:is(.is-rolling, .is-rerolling) .quantum-dice-roll-vfx {
  opacity: 1;
}

.online-dice-field:is(.is-rolling, .is-rerolling) .quantum-dice-roll-vfx::before {
  animation: quantum-dice-rift-pulse var(--dice-fx-speed) var(--dice-fx-phase) ease-in-out infinite;
}

.online-dice-field:is(.is-rolling, .is-rerolling) .quantum-dice-roll-vfx::after {
  animation: quantum-dice-energy-sweep var(--dice-fx-speed) var(--dice-fx-phase) ease-in-out infinite;
}

.online-dice-field:is(.is-rolling, .is-rerolling) .quantum-dice-roll-vfx i {
  animation: quantum-dice-spark-flight var(--dice-fx-speed) calc(var(--dice-fx-phase) + var(--spark-delay)) ease-out infinite;
}

.online-dice-field[data-roll-effect="comet"] .quantum-dice-roll-vfx::before {
  animation-name: quantum-dice-comet-orbit;
}

.online-dice-field[data-roll-effect="nova"] .quantum-dice-roll-vfx::before {
  animation-name: quantum-dice-nova-pop;
}

.online-dice-field[data-roll-effect="prism"] .quantum-dice-roll-vfx::before {
  animation-direction: alternate-reverse;
}

.online-die-rig {
  --die-display-size: clamp(5.2rem, min(36cqi, 49cqb), 13.5rem);

  z-index: 2;
  inline-size: clamp(5.7rem, min(39cqi, 54cqb), 14.5rem);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.online-die-cube {
  --die-size: var(--die-display-size);
}

.quantum-contract-hud {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  inline-size: min(28rem, 92%);
  align-items: center;
  gap: clamp(.45rem, 2cqi, 1rem);
  padding: clamp(.3rem, 1.2cqb, .6rem) clamp(.55rem, 2cqi, 1rem);
  border: .1rem solid rgb(134 242 255 / 72%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(12 32 79 / 88%), rgb(67 28 111 / 94%), rgb(12 32 79 / 88%));
  box-shadow: inset 0 .08rem 0 rgb(255 255 255 / 20%), 0 0 1rem rgb(92 224 255 / 24%);
  color: #dcfbff;
}

.quantum-contract-hud small,
.quantum-contract-hud em {
  font: 400 clamp(.875rem, 2cqi, .875rem)/1.1 var(--bonus-display);
  letter-spacing: .045em;
  text-wrap: balance;
}

.quantum-contract-hud small {
  text-align: end;
}

.quantum-contract-hud b {
  display: grid;
  inline-size: clamp(2.55rem, 8cqi, 3.6rem);
  aspect-ratio: 1;
  place-items: center;
  border: .12rem solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff49a, #ff9d4e);
  box-shadow: 0 0 .8rem #ffb34d;
  color: #3a225d;
  font: 400 clamp(1.25rem, 5cqi, 2rem)/1 var(--bonus-display);
}

.quantum-contract-hud em {
  color: #fff2a8;
  font-style: normal;
}

.quantum-contract-hud > span {
  display: grid;
  gap: .16rem;
}

.quantum-contract-hud > span strong {
  color: #d8fbff;
  font: 400 clamp(.875rem, 1.75cqi, .875rem)/1 var(--bonus-display);
  letter-spacing: .035em;
}

.quantum-contract-status {
  justify-items: end;
}

.quantum-contract-status em {
  color: #95f8ff;
  font-size: clamp(.875rem, 1.7cqi, .875rem);
}

.quantum-contract-status em.is-ready {
  padding: .22rem .35rem;
  border: 1px solid rgb(216 255 122 / 72%);
  border-radius: 999px;
  background: rgb(151 255 148 / 13%);
  box-shadow: 0 0 .7rem rgb(151 255 148 / 28%);
  color: #d8ff7a;
}

.online-dice-field > strong {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  max-inline-size: 94%;
  text-align: center;
  text-wrap: balance;
}

.online-dice-field:is(.is-decision, .is-rerolling) .online-die-result-number {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.online-dice-field.is-rerolling .online-die-rig {
  animation: quantum-single-die-hop 760ms cubic-bezier(.16, .74, .22, 1) both;
  animation-delay: calc(var(--die-order) * 70ms);
}

.online-dice-field.is-rerolling .online-die-cube {
  animation: online-die-cube-roll 760ms var(--dice-roll-ease) both;
  animation-delay: calc(var(--die-order) * 70ms);
}

.quantum-risk-actions {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: min(24rem, 92%);
  gap: clamp(.45rem, 2cqi, .8rem);
}

.quantum-risk-actions button {
  min-block-size: 3.1rem;
  padding: .5rem .65rem;
  border: .1rem solid rgb(213 252 255 / 76%);
  border-radius: .8rem;
  background: linear-gradient(145deg, #174f75, #352174 62%, #6c277d);
  box-shadow:
    0 .22rem 0 #101843,
    inset 0 .08rem 0 rgb(255 255 255 / 22%),
    0 0 .75rem rgb(82 225 255 / 24%);
  color: #efffff;
  font: 400 clamp(.875rem, 2.7cqi, 1rem)/1 var(--bonus-display);
  letter-spacing: .035em;
  touch-action: manipulation;
  transition: filter 180ms ease, transform 220ms cubic-bezier(.18, .78, .22, 1);
}

.quantum-risk-actions button:last-child {
  border-color: #fff39a;
  background: linear-gradient(145deg, #ffcd55, #ef614e 52%, #ba39c9);
  color: #2c1749;
  box-shadow: 0 .22rem 0 #70275f, 0 0 1rem rgb(255 126 85 / 42%);
}

.quantum-risk-actions button:is(:hover, :focus-visible) {
  filter: brightness(1.16) saturate(1.08);
  outline: .18rem solid #fff;
  outline-offset: .12rem;
  transform: translate3d(0, -.12rem, 0) scale(1.025);
}

.quantum-risk-actions b {
  color: #fff59b;
  font: inherit;
}

.quantum-risk-actions button:last-child b {
  color: #361847;
}

.quantum-contract-settlement {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.45rem, 2cqi, .85rem);
  padding: .36rem .72rem;
  border: .08rem solid rgb(255 255 255 / 48%);
  border-radius: 999px;
  background: rgb(13 23 68 / 78%);
  color: #fff;
}

.quantum-contract-settlement b {
  color: #fff08b;
  font: 400 clamp(.875rem, 2.8cqi, 1.05rem)/1 var(--bonus-display);
}

.quantum-contract-settlement em {
  color: #d8faff;
  font: 400 clamp(.875rem, 2.1cqi, .875rem)/1 var(--bonus-display);
  font-style: normal;
}

.online-bingo-rig {
  align-self: center;
}

/* Quantum Dice keep one continuous tumble, then reveal each final face in turn. */
.online-dice-field.is-rolling .online-die-cube {
  animation: online-die-cube-roll 1.46s var(--dice-roll-ease) both;
  animation-delay: calc(var(--die-order) * 70ms);
}

.online-dice-field.is-rolling .online-die-rig {
  animation: online-die-cube-hop-smooth 1.46s linear both;
  animation-delay: calc(var(--die-order) * 70ms);
}

.online-dice-field.is-revealing .online-die-cube {
  animation: online-die-face-lock 900ms var(--dice-lock-ease) both;
  animation-delay: calc(var(--die-order) * 480ms);
}

.online-dice-field.is-revealing .online-die-rig::before {
  position: absolute;
  z-index: -1;
  inset: 8%;
  border: .18rem solid #fff5a3;
  border-radius: 50%;
  box-shadow: 0 0 1.2rem #ff9b62, inset 0 0 1rem #70edf2;
  content: "";
  opacity: 0;
  transform: scale(.45);
  animation: online-die-lock-wave 620ms 500ms ease-out both;
  animation-delay: calc(680ms + var(--die-order) * 480ms);
}

.online-dice-field.is-revealing .online-die-result-number {
  animation: online-die-number-reveal 420ms var(--bonus-spring) both;
  animation-delay: calc(720ms + var(--die-order) * 480ms);
}

.online-dice-field.is-revealing.is-quick-drop .online-die-cube {
  animation-duration: 120ms;
  animation-delay: 0ms;
}

.online-dice-field.is-revealing.is-quick-drop .online-die-rig::before {
  animation-duration: 140ms;
  animation-delay: 0ms;
}

.online-dice-field.is-revealing.is-quick-drop .online-die-result-number {
  animation-duration: 120ms;
  animation-delay: 0ms;
}

.online-dice-field.is-revealing.is-no-face-flip .online-die-cube {
  animation: none;
}

.online-dice-field.is-complete .online-die-result-number {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.online-dice-field.is-revealing > strong {
  animation: online-dice-lock-copy 720ms ease-in-out infinite alternate;
}

.online-dice-field.is-match .online-die-result-number {
  border-color: #fff;
  background: linear-gradient(145deg, #7347c4, #df3f9e 58%, #ff9c4b);
  box-shadow:
    0 .18rem 0 #6c2d70,
    0 0 1.1rem rgb(255 226 101 / 76%),
    inset 0 .08rem 0 rgb(255 255 255 / 38%);
}

.bonus-game-machine[data-bonus-game="dice"] .bonus-action-row > .bonus-launch-button {
  min-block-size: 4.35rem;
  padding-inline: .48rem;
  color: #182645;
  font: 400 clamp(1.35rem, 6.2cqi, 1.85rem)/.88 var(--bonus-display);
  letter-spacing: .015em;
  text-wrap: balance;
  -webkit-text-stroke: .025em rgb(255 255 255 / 28%);
  text-shadow:
    0 .08em 0 rgb(255 255 255 / 72%),
    0 .16em .08em rgb(22 18 72 / 30%);
}

.bonus-game-machine[data-bonus-game="dice"] .bonus-launch-button.is-auto-playing {
  color: #3d1737;
  text-shadow:
    0 .08em 0 rgb(255 255 255 / 70%),
    0 .16em .08em rgb(100 26 71 / 30%);
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-action-row > .bonus-launch-button {
  min-block-size: 4.65rem;
  padding-inline: .48rem;
  color: #172b45;
  font: 400 clamp(1.35rem, 6.2cqi, 1.85rem)/.86 var(--bonus-display);
  letter-spacing: .012em;
  text-wrap: balance;
  paint-order: stroke fill;
  -webkit-text-stroke: .025em rgb(255 255 255 / 30%);
  text-shadow:
    0 .08em 0 rgb(255 255 255 / 76%),
    0 .17em .09em rgb(35 18 74 / 32%),
    0 0 .35em rgb(255 242 153 / 48%);
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-launch-button.is-auto-playing {
  color: #431b3b;
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-action-label > span {
  font-size: max(.875rem, .72em);
}

.bonus-game-machine[data-bonus-game="dice"] .bonus-action-label > span {
  font-size: max(.875rem, .82em);
}

.online-die-face {
  border-color: #fff;
  background:
    radial-gradient(circle at 28% 20%, rgb(255 255 255 / 38%), transparent 22%),
    linear-gradient(145deg, #263a78, #171b4c 48%, #090d28);
  box-shadow:
    inset .22rem .22rem .42rem rgb(255 255 255 / 24%),
    inset -.28rem -.32rem .55rem rgb(0 0 0 / 42%),
    0 0 .72rem rgb(104 232 255 / 62%);
}

.online-die-face i.is-pip {
  position: relative;
  background:
    radial-gradient(circle at 31% 24%, #fff 0 8%, transparent 10%),
    radial-gradient(circle at 56% 60%, rgb(255 255 255 / 28%) 0 5%, transparent 7%),
    radial-gradient(circle at 42% 42%, #7df8ff 0 12%, #4878ff 38%, #6b2da5 68%, #170d45 100%);
  border: .055rem solid rgb(194 252 255 / 88%);
  box-shadow:
    inset .08rem .1rem .12rem rgb(12 9 65 / 56%),
    0 .06rem 0 rgb(255 255 255 / 78%),
    0 0 .32rem #fff,
    0 0 .58rem #64dfff;
}

.online-die-face i.is-pip:nth-child(3n + 1) {
  background:
    radial-gradient(circle at 31% 24%, #fff 0 8%, transparent 10%),
    radial-gradient(circle at 58% 62%, rgb(255 236 161 / 34%) 0 6%, transparent 8%),
    radial-gradient(circle at 42% 42%, #fff27a 0 12%, #ff9b42 42%, #df398f 70%, #4b145c 100%);
  border-color: #fff0a4;
  box-shadow:
    inset .08rem .1rem .12rem rgb(91 24 78 / 52%),
    0 .06rem 0 rgb(255 255 255 / 78%),
    0 0 .32rem #fff,
    0 0 .58rem #ffb94f;
}

.online-die-face i.is-pip:nth-child(3n) {
  background:
    radial-gradient(circle at 31% 24%, #fff 0 8%, transparent 10%),
    radial-gradient(circle at 56% 60%, rgb(255 255 255 / 26%) 0 5%, transparent 7%),
    radial-gradient(circle at 42% 42%, #ffb8ff 0 12%, #d745de 42%, #6e3fd3 70%, #24115d 100%);
  border-color: #ffd0ff;
  box-shadow:
    inset .08rem .1rem .12rem rgb(52 14 91 / 58%),
    0 .06rem 0 rgb(255 255 255 / 78%),
    0 0 .32rem #fff,
    0 0 .58rem #e96cff;
}

.online-die-face i.is-pip::after {
  position: absolute;
  inset: 39% -24% auto;
  block-size: 18%;
  border-block-start: .07rem solid rgb(255 255 255 / 86%);
  border-radius: 50%;
  box-shadow: 0 0 .16rem currentColor;
  content: "";
  rotate: -17deg;
}

@keyframes online-die-cube-roll {
  0% {
    transform:
      rotateX(calc(var(--die-result-x) - 1260deg))
      rotateY(calc(var(--die-result-y) + 1080deg))
      rotateZ(-28deg);
  }
  100% {
    transform:
      rotateX(var(--die-result-x))
      rotateY(var(--die-result-y))
      rotateZ(0);
  }
}

@keyframes quantum-dice-rift-pulse {
  0% { opacity: 0; transform: rotate(0deg) scale(.42); }
  26% { opacity: .88; }
  58% { opacity: .46; transform: rotate(190deg) scale(1.08); }
  100% { opacity: 0; transform: rotate(360deg) scale(1.45); }
}

@keyframes quantum-dice-comet-orbit {
  0% { opacity: 0; transform: translate3d(-32%, 18%, 0) rotate(-24deg) scale(.34); }
  24% { opacity: .95; }
  68% { opacity: .52; transform: translate3d(18%, -12%, 0) rotate(210deg) scale(.9); }
  100% { opacity: 0; transform: translate3d(34%, 14%, 0) rotate(390deg) scale(.5); }
}

@keyframes quantum-dice-nova-pop {
  0% { opacity: 0; transform: rotate(-20deg) scale(.18); }
  38% { opacity: .98; transform: rotate(70deg) scale(1.14); }
  64% { opacity: .32; }
  100% { opacity: 0; transform: rotate(170deg) scale(1.58); }
}

@keyframes quantum-dice-energy-sweep {
  0% { opacity: 0; transform: translate3d(-58%, 0, 0) scaleX(.18); }
  28% { opacity: .92; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(58%, 0, 0) scaleX(1.08); }
}

@keyframes quantum-dice-spark-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2); }
  24% { opacity: .96; }
  72% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(var(--spark-dx), var(--spark-dy), 0) scale(1.05); }
}

@keyframes online-die-cube-hop-smooth {
  0% { translate: 0 0; }
  18% { translate: 0 -1.4rem; }
  43% { translate: 0 -.08rem; }
  58% { translate: 0 -.62rem; }
  76% { translate: 0 0; }
  88% { translate: 0 -.18rem; }
  100% { translate: 0 0; }
}

@keyframes quantum-single-die-hop {
  0% { translate: 0 0; }
  28% { translate: 0 -1.1rem; }
  62% { translate: 0 .12rem; }
  82% { translate: 0 -.22rem; }
  100% { translate: 0 0; }
}

@keyframes online-die-face-lock {
  from {
    transform:
      rotateX(var(--die-reveal-start-x))
      rotateY(var(--die-reveal-start-y))
      rotateZ(0)
      scale(1);
  }
  to {
    transform:
      rotateX(var(--die-result-x))
      rotateY(var(--die-result-y))
      rotateZ(0)
      scale(1);
  }
}

@keyframes online-die-lock-wave {
  0% { opacity: 0; transform: scale(.45); }
  32% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes online-die-number-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(.65rem) scale(.64); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes online-dice-lock-copy {
  from { filter: brightness(1); transform: scale(.98); }
  to { filter: brightness(1.4); transform: scale(1.035); }
}

@media (max-width: 32rem) {
  .bonus-machine-title h2 {
    font-size: clamp(1.65rem, 8vw, 2.5rem);
  }

  .galactic-wheel > span {
    inline-size: clamp(2.5rem, 10.4vw, 3.25rem);
  }

  .galactic-wheel > span > b {
    font-size: clamp(.875rem, 2.05vw, .875rem);
  }

  .galactic-wheel > span > b small {
    font-size: clamp(.875rem, 1.25vw, .875rem);
  }

  .online-cascade-objective {
    gap: .35rem;
    padding: .28rem .48rem;
  }

  .online-cascade-reason {
    padding: .36rem .56rem;
  }

  .online-bingo-rig {
    --orbit-board-tilt: 10deg;

    inline-size: min(23rem, 96%, 45dvh);
  }

  .online-bingo-card {
    padding: .32rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-bingo-rig {
    animation: none;
    transform: rotateX(var(--orbit-board-tilt)) rotateY(0deg) rotateZ(-.65deg);
  }

  .galactic-wheel::before,
  .galactic-wheel-stage.is-spinning .galactic-wheel-pointer,
  .matrix-reel-strip,
  .online-dice-field:is(.is-rolling, .is-revealing) :is(
    .online-die-cube,
    .online-die-rig,
    .online-die-rig::before,
    .online-die-result-number
  ),
  .online-dice-field.is-revealing > strong {
    animation-duration: 1ms;
    animation-delay: 0ms;
    animation-iteration-count: 1;
  }

  .online-dice-field.is-rerolling :is(.online-die-rig, .online-die-cube) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .online-die-showcase {
    transition: none;
  }

  .quantum-risk-actions button {
    transition: none;
  }

  .quantum-risk-actions button:is(:hover, :focus-visible) {
    transform: none;
  }

  .quantum-dice-roll-vfx {
    display: none;
  }

  .online-bingo-nav > i b.is-locked,
  .online-bingo-grid > span.is-route-gap:not(.is-drawn, .is-free),
  .online-bingo-signal-trail polyline,
  .online-bingo-card.is-pulse-ready .online-bingo-pulse-hint span {
    animation: none;
  }

}

html[data-battery-saver="true"] .online-bingo-rig {
  animation: none;
  transform: rotateX(var(--orbit-board-tilt)) rotateY(0deg) rotateZ(-.65deg);
}

html[data-battery-saver="true"] :is(
  .online-bingo-nav > i b.is-locked,
  .online-bingo-grid > span.is-route-gap:not(.is-drawn, .is-free),
  .online-bingo-signal-trail polyline,
  .online-bingo-card.is-pulse-ready .online-bingo-pulse-hint span
) {
  animation: none;
}

html[data-battery-saver="true"] .quantum-dice-roll-vfx {
  display: none;
}

/*
 * Transient Matter.js layers.
 *
 * These classes exist only while an active result is moving. Battery Saver
 * never adds them, so the compositor-driven fallback remains the low-power
 * path.
 */
.online-cascade-grid.is-tumbling.is-physics-running {
  overflow: visible;
}

.online-cascade-grid.is-tumbling.is-physics-running > span {
  animation: none;
  will-change: transform;
}

.online-cascade-grid.is-tumbling.is-physics-settling > span {
  animation: none;
}

.online-cascade-grid.is-physics-settling > span {
  transition: transform 300ms cubic-bezier(.18, .82, .28, 1.12);
}

.online-dice-field.is-physics-running {
  position: relative;
}

.online-dice-field.is-rolling:is(.is-physics-pending, .is-physics-running) .online-die-rig {
  animation: none;
  will-change: transform;
}

.online-dice-field.is-physics-settling .online-die-rig {
  transition: transform 420ms cubic-bezier(.16, .76, .22, 1);
}

.online-dice-field.is-quick-drop.is-physics-settling .online-die-rig {
  transition-duration: 0ms;
}

/*
 * Prism Cascade full-screen field.
 *
 * The matrix owns the available play scene while the action dock remains
 * reachable. Container units preserve square symbols on wide and tall screens.
 */
.bonus-game-machine[data-bonus-game="cascade"] .online-original-scene {
  grid-template-rows: minmax(0, 1fr) auto;
}

.bonus-game-machine[data-bonus-game="cascade"] .online-game-meter {
  display: none;
}

.bonus-game-machine[data-bonus-game="cascade"] .online-original-scene > .bonus-scene-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.online-game-playfield:has(.online-cascade-field) {
  overflow: hidden;
  padding: clamp(.3rem, .8cqi, .75rem);
  container-type: size;
}

.online-cascade-field {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(.3rem, .8dvh, .58rem);
}

.online-cascade-grid {
  inline-size: min(100cqw, calc((100cqh - 3.25rem) * 1.25)) !important;
  max-inline-size: 100%;
  aspect-ratio: 5 / 4;
}

.online-cascade-reason {
  position: absolute;
  z-index: 8;
  inset: auto auto .3rem 50%;
  inline-size: max-content;
  max-inline-size: calc(100% - .6rem);
  translate: -50% 0;
}

/*
 * Wormhole Matrix command cores.
 *
 * The recurring action uses oversized display lettering, a layered luminous
 * surface, and a distinct auto-play state without borrowing another game's art.
 */
.bonus-matrix-scene .bonus-action-row {
  inline-size: min(44rem, 100%);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.55rem, 1.2cqi, .85rem);
}

#bonus-matrix-spin {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(4.8rem, 9cqb, 6rem);
  overflow: hidden;
  border-width: .15rem;
  border-radius: clamp(.9rem, 2.2cqi, 1.35rem);
  font-family: var(--bonus-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .02em;
  text-wrap: balance;
  text-transform: uppercase;
  transform: translateZ(0);
}

#bonus-matrix-spin {
  border-color: #fff7a7;
  background:
    radial-gradient(circle at 18% 0, rgb(255 255 255 / 70%) 0 .1rem, transparent .16rem),
    radial-gradient(circle at 50% 130%, rgb(124 255 239 / 56%), transparent 48%),
    linear-gradient(155deg, #ffe76f 0%, #ff8d58 42%, #e23da7 72%, #6d2bd4 100%);
  background-size: 1.2rem 1.2rem, auto, auto;
  color: #fff;
  box-shadow:
    0 .3rem 0 #792967,
    0 .62rem 1.25rem rgb(0 0 0 / 50%),
    0 0 1.1rem rgb(255 110 201 / 58%),
    inset 0 .12rem 0 rgb(255 255 255 / 82%),
    inset 0 -.24rem .55rem rgb(68 16 112 / 44%);
  font-size: clamp(1.18rem, .9rem + 1.2cqi, 1.8rem);
  paint-order: stroke fill;
  -webkit-text-stroke: .018em rgb(76 21 91 / 78%);
  text-shadow:
    0 .1em 0 #6e235b,
    0 .2em .25em rgb(35 5 69 / 52%),
    0 0 .45em rgb(255 255 255 / 82%);
}

#bonus-matrix-spin::before {
  position: absolute;
  z-index: -1;
  inset: -80% auto -80% -35%;
  inline-size: 32%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 72%), transparent);
  content: "";
  rotate: 18deg;
  translate: -220% 0;
  pointer-events: none;
}

#bonus-matrix-spin::after {
  position: absolute;
  z-index: -1;
  inset: .24rem;
  border: .06rem solid rgb(255 255 255 / 42%);
  border-radius: calc(clamp(.9rem, 2.2cqi, 1.35rem) - .2rem);
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(255 255 255 / 16%) 8% 8.8%, transparent 8.8% 91.2%, rgb(255 255 255 / 16%) 91.2% 92%, transparent 92%);
  content: "";
  pointer-events: none;
}

#bonus-matrix-spin:not(:disabled) {
  animation: matrix-command-glow 2.4s ease-in-out infinite;
}

#bonus-matrix-spin:not(:disabled)::before {
  animation: matrix-command-sweep 2.8s cubic-bezier(.2, .72, .24, 1) infinite;
}

#bonus-matrix-spin .bonus-action-label > span {
  display: inline-block;
  margin-inline-start: .24em;
  color: #fff7a7;
  font-size: 1.08em;
  filter: drop-shadow(0 0 .28em #fff);
  animation: matrix-command-glyph 1.45s ease-in-out infinite;
}

#bonus-matrix-spin.is-auto-playing {
  border-color: #fff4a0;
  background:
    radial-gradient(circle at 50% 130%, rgb(255 90 192 / 54%), transparent 50%),
    linear-gradient(115deg, #fff2a0, #ff9a5f 28%, #ec4fb6 54%, #7557ec 78%, #fff2a0);
  background-size: auto, 220% 100%;
  color: #fff;
  box-shadow:
    0 .3rem 0 #8c315f,
    0 .62rem 1.2rem rgb(0 0 0 / 48%),
    0 0 1.35rem rgb(255 88 191 / 70%),
    inset 0 .12rem 0 rgb(255 255 255 / 82%);
  animation: matrix-auto-core 1.7s linear infinite;
}

#bonus-matrix-spin:is(:hover, :focus-visible):not(:disabled) {
  filter: brightness(1.1) saturate(1.12);
  translate: 0 -.08rem;
}

#bonus-matrix-spin:active:not(:disabled) {
  translate: 0 .16rem;
  box-shadow:
    0 .12rem 0 #5a275e,
    0 .28rem .7rem rgb(0 0 0 / 44%),
    inset 0 .12rem .4rem rgb(46 8 78 / 34%);
}

.bonus-game-machine[data-bonus-game="matrix"].is-playing #bonus-matrix-spin {
  border-color: #c9fbff;
  background:
    radial-gradient(circle at 50% 120%, rgb(101 232 255 / 52%), transparent 48%),
    linear-gradient(155deg, #235f94, #373093 52%, #792d9a);
  animation: matrix-command-processing .72s ease-in-out infinite alternate;
}

@keyframes matrix-command-sweep {
  0%, 58% { translate: -220% 0; }
  82%, 100% { translate: 520% 0; }
}

@keyframes matrix-command-glow {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 .1em 0 #6e235b, 0 .2em .25em rgb(35 5 69 / 52%), 0 0 .35em rgb(255 255 255 / 68%);
  }
  50% {
    filter: brightness(1.09);
    text-shadow: 0 .1em 0 #6e235b, 0 .2em .25em rgb(35 5 69 / 52%), 0 0 .7em #fff;
  }
}

@keyframes matrix-command-glyph {
  0%, 100% { scale: .94; rotate: -8deg; }
  50% { scale: 1.14; rotate: 8deg; }
}

@keyframes matrix-auto-core {
  to { background-position: 0 0, -220% 0; }
}

@keyframes matrix-command-processing {
  to { filter: brightness(1.22) saturate(1.18); }
}

@media (max-width: 32rem) {
  .bonus-matrix-scene .bonus-action-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .42rem;
  }

  #bonus-matrix-spin {
    min-block-size: 4.35rem;
    padding-inline: .55rem;
    border-radius: .9rem;
  }

  #bonus-matrix-spin {
    font-size: clamp(1rem, 4.6vw, 1.32rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #bonus-matrix-spin,
  #bonus-matrix-spin::before,
  #bonus-matrix-spin .bonus-action-label > span {
    animation: none;
  }
}

@media (forced-colors: active) {
  #bonus-matrix-spin {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    -webkit-text-stroke: 0;
  }
}

.bonus-machine-header {
  position: relative;
  z-index: 14;
  grid-template-columns: minmax(0, 1fr) auto;
}

.bonus-game-machine {
  gap: clamp(.15rem, .28dvh, .3rem);
}

@media (max-width: 42rem) {
  .bonus-machine-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .bonus-machine-balance {
    display: none;
  }
}

/*
 * Wormhole Matrix 5 × 5 field.
 *
 * Five true reel columns land five symbols apiece. Winning runs are traced
 * across the physical cell centres while the reels own the full play area.
 */
.bonus-matrix-scene .wormhole-machine {
  position: relative;
  display: grid;
  inline-size: min(70rem, 100%);
  block-size: 100%;
  min-block-size: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  overflow: visible;
  container-type: size;
}

.bonus-matrix-scene .wormhole-reels {
  position: relative;
  isolation: isolate;
  display: grid;
  inline-size: min(100%, 70rem, 100cqh);
  block-size: auto;
  max-block-size: 100%;
  aspect-ratio: 1;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.14rem, .55cqi, .46rem);
  overflow: visible;
  padding: clamp(.22rem, .72cqi, .58rem);
  border: clamp(.11rem, .28cqi, .22rem) solid #d8fbff;
  border-radius: clamp(.72rem, 1.8cqi, 1.45rem);
  background:
    radial-gradient(circle at 50% -22%, rgb(186 116 255 / 50%), transparent 48%),
    linear-gradient(145deg, #152d69, #071127 48%, #200a48);
  box-shadow:
    0 .36rem 0 #07102b,
    0 .75rem 1.4rem rgb(0 0 0 / 58%),
    0 0 1.65rem rgb(100 203 255 / 38%),
    inset 0 .08rem 0 rgb(255 255 255 / 38%);
  container-type: inline-size;
}

.bonus-matrix-scene .wormhole-reel {
  position: relative;
  display: grid;
  cursor: pointer;
  touch-action: manipulation;
  block-size: 100%;
  min-block-size: 0;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(.12rem, .42cqi, .34rem);
  overflow: hidden;
  border: clamp(.08rem, .18cqi, .15rem) solid #91eaff;
  border-radius: clamp(.48rem, 1.15cqi, .9rem);
  background: #020611;
  box-shadow:
    0 0 .65rem rgb(93 225 255 / 52%),
    inset 0 0 1rem rgb(37 83 161 / 72%);
}

.matrix-symbol-cell {
  position: relative;
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
  place-items: center;
  overflow: hidden;
  border: .06rem solid rgb(172 237 255 / 34%);
  border-radius: clamp(.28rem, .75cqi, .62rem);
  background:
    radial-gradient(circle at 50% 45%, rgb(84 130 213 / 34%), transparent 72%),
    linear-gradient(155deg, #071a3c, #020713 66%, #11062c);
  box-shadow: inset 0 .05rem 0 rgb(255 255 255 / 16%);
  scale: 1;
}

.matrix-symbol-cell .matrix-space-object {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  flex: none;
  background-repeat: no-repeat;
  filter:
    saturate(1.42)
    contrast(1.18)
    brightness(1.08)
    drop-shadow(0 .12rem .2rem rgb(0 0 0 / 84%))
    drop-shadow(0 0 .42rem rgb(110 223 255 / 48%));
}

.bonus-matrix-scene .matrix-reel-strip {
  position: absolute;
  inset: 0;
  display: grid;
  inline-size: 100%;
  block-size: 800%;
  grid-template-rows: repeat(40, minmax(0, 1fr));
  will-change: transform;
}

.bonus-matrix-scene .matrix-reel-symbol {
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
  place-items: center;
  overflow: hidden;
}

.bonus-matrix-scene .matrix-reel-strip .matrix-space-object {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}

.matrix-symbol-cell .matrix-space-object:is(
  [data-space-object="nasa-bar"],
  [data-space-object="spin-bonus"]
) {
  display: grid;
}

.bonus-matrix-scene .wormhole-reel.is-spinning .matrix-reel-strip {
  animation: matrix-grid-scroll var(--matrix-reel-duration, 1.5s) both;
}

.wormhole-machine.is-fast-forwarding-awards .matrix-match-banner.is-entering {
  animation-duration: 36ms;
}

.wormhole-machine.is-fast-forwarding-awards.is-extra-spins-award .wormhole-reels {
  animation-duration: 120ms;
  animation-iteration-count: 1;
}

.matrix-symbol-cell.is-match-active {
  --matrix-match-color: hsl(var(--matrix-match-hue, 50) 100% 72%);

  z-index: 6;
  isolation: isolate;
  border-color: var(--matrix-match-color);
  box-shadow:
    inset 0 0 1.1rem color-mix(in oklab, var(--matrix-match-color), transparent 52%),
    0 0 .34rem #fff,
    0 0 .82rem var(--matrix-match-color),
    0 0 1.3rem color-mix(in oklab, var(--matrix-match-color), transparent 24%);
}

.matrix-symbol-cell.is-match-active .matrix-space-object {
  position: relative;
  z-index: 1;
}

.matrix-symbol-cell.is-match-active::before,
.matrix-symbol-cell.is-match-active::after {
  position: absolute;
  z-index: 3;
  inset: clamp(.035rem, .12cqi, .09rem);
  border: clamp(.1rem, .32cqi, .22rem) solid var(--matrix-match-color);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.matrix-symbol-cell.is-match-active::before {
  box-shadow:
    inset 0 0 .38rem #fff,
    inset 0 0 .85rem var(--matrix-match-color),
    0 0 .32rem #fff,
    0 0 .74rem var(--matrix-match-color);
  animation: matrix-match-border-pulse 760ms ease-in-out calc(var(--matrix-match-order, 0) * 45ms) infinite alternate both;
}

.matrix-symbol-cell.is-match-active::after {
  inset: clamp(.11rem, .32cqi, .24rem);
  border-color: #fff transparent var(--matrix-match-color) transparent;
  filter: drop-shadow(0 0 .28rem #fff) drop-shadow(0 0 .52rem var(--matrix-match-color));
  animation: matrix-match-border-glint 1.25s ease-in-out calc(var(--matrix-match-order, 0) * -90ms) infinite both;
}

.wormhole-machine.is-fast-forwarding-awards .matrix-symbol-cell.is-match-active::before,
.wormhole-machine.is-fast-forwarding-awards .matrix-symbol-cell.is-match-active::after {
  animation-duration: 100ms;
  animation-iteration-count: 1;
}

.matrix-match-banner {
  position: absolute;
  z-index: 10;
  inset: clamp(.36rem, 1cqi, .7rem) auto auto 50%;
  display: grid;
  min-inline-size: min(16rem, 62%);
  justify-items: center;
  gap: .04rem;
  padding: clamp(.28rem, .7cqi, .48rem) clamp(.65rem, 1.6cqi, 1.2rem);
  border: clamp(.08rem, .2cqi, .14rem) solid #fff9aa;
  border-radius: .72rem;
  background:
    radial-gradient(circle at 50% 0, rgb(255 249 164 / 34%), transparent 70%),
    rgb(9 10 40 / 94%);
  color: #fff;
  box-shadow:
    0 .25rem .7rem rgb(0 0 0 / 62%),
    0 0 1rem rgb(255 205 78 / 64%);
  font-family: var(--bonus-display);
  line-height: .9;
  text-align: center;
  translate: -50% 0;
  pointer-events: none;
}

.matrix-match-banner[hidden] {
  display: none;
}

.matrix-match-banner.is-entering {
  animation: matrix-banner-enter 310ms cubic-bezier(.16, 1.34, .28, 1) both;
}

.matrix-match-banner.is-extra-spins {
  min-inline-size: min(28rem, 86%);
  border-width: clamp(.12rem, .3cqi, .22rem);
  border-color: #fff;
  background:
    radial-gradient(circle at 50% -20%, rgb(255 255 255 / 78%), transparent 42%),
    linear-gradient(145deg, #fff268 0%, #ff8d3d 35%, #ed32cf 68%, #7130de 100%);
  box-shadow:
    0 .36rem .9rem rgb(0 0 0 / 72%),
    0 0 1.1rem #fff,
    0 0 2.4rem #ffdf50,
    0 0 3.6rem rgb(255 47 208 / 74%);
}

.matrix-match-banner.is-extra-spins small {
  color: #fff;
  font-size: clamp(.875rem, 2cqi, 1.22rem);
  text-shadow: 0 .1em 0 #7c296f, 0 0 .4rem #fff;
}

.matrix-match-banner.is-extra-spins strong {
  font-size: clamp(1.35rem, 4.1cqi, 2.7rem);
  -webkit-text-stroke-width: .035em;
  text-shadow: 0 .1em 0 #701d6e, 0 0 .6rem #fff;
}

.matrix-match-banner.is-extra-spins b {
  color: #fffbd0;
  font-size: clamp(1rem, 3cqi, 2rem);
  text-shadow: 0 .1em 0 #a73b31, 0 0 .6rem #fff26a;
}

.wormhole-machine.is-extra-spins-award .wormhole-reels {
  animation: matrix-extra-spins-frame 1.15s ease-in-out 2;
}

.matrix-match-banner small {
  color: #92f7ff;
  font: 400 clamp(.875rem, 1.45cqi, .875rem)/1 var(--bonus-display);
  letter-spacing: .09em;
  text-shadow: 0 0 .38rem #21d4ff;
}

.matrix-match-banner strong {
  font: 400 clamp(.875rem, 2.5cqi, 1.5rem)/.95 var(--bonus-display);
  letter-spacing: .035em;
  paint-order: stroke fill;
  -webkit-text-stroke: .025em #381154;
  text-shadow: 0 .08em 0 #5b1d79, 0 0 .45rem #fff;
}

.matrix-match-banner b {
  color: #fff07b;
  font: 400 clamp(.875rem, 2.25cqi, 1.36rem)/.95 var(--bonus-display);
  letter-spacing: .035em;
  text-shadow: 0 .08em 0 #8d3e20, 0 0 .5rem #ffb84d;
}

.matrix-flying-payout {
  position: fixed;
  z-index: 40;
  display: grid;
  min-inline-size: 3.2em;
  place-items: center;
  padding: .18em .36em;
  border: .08em solid #fff9a5;
  border-radius: .38em;
  background: linear-gradient(145deg, #fff486, #ff8e4f 52%, #ed43be);
  color: #fff;
  box-shadow:
    0 .12em 0 #762658,
    0 0 .65em #fff,
    0 0 1.15em #ffb63d;
  font: 400 clamp(1.25rem, 4cqi, 2.6rem)/1 var(--bonus-display);
  letter-spacing: -.025em;
  paint-order: stroke fill;
  -webkit-text-stroke: .025em #58205e;
  text-shadow: 0 .08em 0 #782553;
  pointer-events: none;
}

.matrix-flying-payout.is-free-spins {
  min-inline-size: 4.6em;
  border-width: .11em;
  background:
    radial-gradient(circle at 50% 0, #fff, transparent 34%),
    linear-gradient(145deg, #72f8ff, #4e83ff 35%, #ce42f1 68%, #ffdf58);
  box-shadow:
    0 .14em 0 #421b79,
    0 0 .8em #fff,
    0 0 1.7em #58e9ff,
    0 0 2.4em #ff55d7;
  font-size: clamp(2rem, 6cqi, 4rem);
  -webkit-text-stroke-width: .035em;
}

@keyframes bonus-title-depart {
  0% {
    max-block-size: 10rem;
    opacity: 1;
    translate: 0;
    filter: brightness(1);
  }
  55% {
    max-block-size: 10rem;
    opacity: 0;
    translate: 0 -55%;
    filter: brightness(2);
  }
  100% {
    max-block-size: 0;
    opacity: 0;
    translate: 0 -100%;
    filter: brightness(2);
  }
}

@keyframes matrix-grid-scroll {
  0% {
    transform: translateY(0);
    animation-timing-function: linear;
  }
  33.333% {
    transform: translateY(var(--matrix-reel-cruise-stop, -44%));
    animation-timing-function: cubic-bezier(.25, .5, .2, 1);
  }
  100% {
    transform: translateY(var(--matrix-reel-scroll-stop, -87.5%));
  }
}

@supports (animation-timing-function: linear(0, 1)) {
  @keyframes matrix-grid-scroll {
    0% {
      transform: translateY(0);
      animation-timing-function: linear;
    }
    33.333% {
      transform: translateY(var(--matrix-reel-cruise-stop, -44%));
      animation-timing-function: linear(
        0,
        .12493 6.25%,
        .24895 12.5%,
        .37012 18.75%,
        .48584 25%,
        .59334 31.25%,
        .69006 37.5%,
        .77396 43.75%,
        .84375 50%,
        .89896 56.25%,
        .94006 62.5%,
        .96834 68.75%,
        .98584 75%,
        .99512 81.25%,
        .99895 87.5%,
        .99993 93.75%,
        1
      );
    }
    100% {
      transform: translateY(var(--matrix-reel-scroll-stop, -87.5%));
    }
  }
}

@keyframes matrix-symbol-backdrop-drift {
  0% {
    opacity: .2;
    transform: translate3d(-7%, -4%, 0) rotate(-7deg) skewX(-2deg);
  }
  34% {
    opacity: .38;
    transform: translate3d(3%, -6%, 0) rotate(2deg) skewX(1deg);
  }
  68% {
    opacity: .46;
    transform: translate3d(7%, 5%, 0) rotate(8deg) skewX(3deg);
  }
  100% {
    opacity: .3;
    transform: translate3d(-2%, 7%, 0) rotate(-1deg) skewX(-1deg);
  }
}

@keyframes matrix-idle-asteroid-tumble {
  0% { opacity: .32; transform: translate3d(-3%, 2%, 0) rotate(-12deg) skewX(-3deg); }
  26% { opacity: .68; transform: translate3d(4%, -5%, 0) rotate(79deg) skewX(4deg); }
  53% { opacity: .42; transform: translate3d(7%, 3%, 0) rotate(176deg) skewY(-3deg); }
  78% { opacity: .74; transform: translate3d(-4%, 6%, 0) rotate(269deg) skewY(4deg); }
  100% { opacity: .32; transform: translate3d(-3%, 2%, 0) rotate(348deg) skewX(-3deg); }
}

@keyframes matrix-idle-plasma-coil {
  0% { opacity: .28; transform: translate3d(-3%, 1%, 0) rotate(0deg) skewX(2deg); }
  25% { opacity: .7; transform: translate3d(3%, -4%, 0) rotate(92deg) skewY(-5deg); }
  52% { opacity: .38; transform: translate3d(5%, 4%, 0) rotate(188deg) skewX(-3deg); }
  76% { opacity: .76; transform: translate3d(-4%, 3%, 0) rotate(276deg) skewY(4deg); }
  100% { opacity: .28; transform: translate3d(-3%, 1%, 0) rotate(360deg) skewX(2deg); }
}

@keyframes matrix-idle-supernova-flare {
  0%, 100% { opacity: .22; transform: rotate(-12deg) scale(.78, 1.12); }
  18% { opacity: .82; transform: rotate(8deg) scale(1.08, .86); }
  37% { opacity: .36; transform: translate3d(3%, -2%, 0) rotate(31deg) scale(.9, 1.05); }
  59% { opacity: .9; transform: translate3d(-2%, 2%, 0) rotate(54deg) scale(1.12, .82); }
  81% { opacity: .42; transform: rotate(77deg) scale(.86, 1.08); }
}

@keyframes matrix-idle-black-hole-lens {
  0% { opacity: .3; transform: rotate(-18deg) skewX(9deg) translate3d(-2%, 0, 0); }
  24% { opacity: .7; transform: rotate(72deg) skewX(-6deg) translate3d(2%, -3%, 0); }
  51% { opacity: .38; transform: rotate(166deg) skewX(10deg) translate3d(3%, 2%, 0); }
  76% { opacity: .76; transform: rotate(252deg) skewX(-8deg) translate3d(-3%, 3%, 0); }
  100% { opacity: .3; transform: rotate(342deg) skewX(9deg) translate3d(-2%, 0, 0); }
}

@keyframes matrix-idle-rift-shear {
  0%, 100% { opacity: .28; transform: translate3d(-8%, -2%, 0) rotate(-7deg) skewY(-8deg); }
  17% { opacity: .86; transform: translate3d(5%, 3%, 0) rotate(4deg) skewY(11deg); }
  39% { opacity: .42; transform: translate3d(-2%, 7%, 0) rotate(-4deg) skewX(-9deg); }
  61% { opacity: .9; transform: translate3d(8%, -5%, 0) rotate(8deg) skewX(12deg); }
  83% { opacity: .36; transform: translate3d(-5%, 2%, 0) rotate(-2deg) skewY(-6deg); }
}

@keyframes matrix-idle-stardust-drift {
  0%, 100% { opacity: .26; transform: translate3d(-7%, 6%, 0) rotate(-9deg); }
  23% { opacity: .74; transform: translate3d(4%, -5%, 0) rotate(4deg); }
  48% { opacity: .34; transform: translate3d(8%, 2%, 0) rotate(13deg); }
  72% { opacity: .82; transform: translate3d(-3%, -8%, 0) rotate(2deg); }
}

@keyframes matrix-idle-moon-parallax {
  0%, 100% { opacity: .28; transform: translate3d(-7%, 2%, 0) rotate(-14deg) skewY(2deg); }
  27% { opacity: .68; transform: translate3d(3%, -4%, 0) rotate(-3deg) skewY(-3deg); }
  54% { opacity: .42; transform: translate3d(8%, 3%, 0) rotate(9deg) skewY(3deg); }
  79% { opacity: .72; transform: translate3d(-2%, 6%, 0) rotate(2deg) skewY(-2deg); }
}

@keyframes matrix-idle-golden-comet-pass {
  0%, 12% { opacity: 0; transform: translate3d(-48%, 34%, 0) rotate(-24deg) skewX(-12deg); }
  31% { opacity: .86; transform: translate3d(-15%, 11%, 0) rotate(-17deg) skewX(-5deg); }
  62% { opacity: .7; transform: translate3d(18%, -13%, 0) rotate(-12deg) skewX(5deg); }
  84%, 100% { opacity: 0; transform: translate3d(52%, -38%, 0) rotate(-7deg) skewX(12deg); }
}

@keyframes matrix-idle-ring-precession {
  0% { opacity: .3; transform: rotate(-20deg) skewX(11deg) translate3d(-2%, 0, 0); }
  25% { opacity: .72; transform: rotate(70deg) skewX(-7deg) translate3d(2%, -3%, 0); }
  50% { opacity: .38; transform: rotate(160deg) skewX(10deg) translate3d(3%, 2%, 0); }
  75% { opacity: .78; transform: rotate(250deg) skewX(-9deg) translate3d(-3%, 3%, 0); }
  100% { opacity: .3; transform: rotate(340deg) skewX(11deg) translate3d(-2%, 0, 0); }
}

@keyframes matrix-idle-monolith-scan {
  0%, 14% { opacity: 0; transform: translate3d(0, 4%, 0) skewX(-5deg); }
  29% { opacity: .76; transform: translate3d(170%, -3%, 0) skewX(3deg); }
  58% { opacity: .46; transform: translate3d(390%, 2%, 0) skewX(-2deg); }
  76% { opacity: .82; transform: translate3d(610%, -4%, 0) skewX(4deg); }
  92%, 100% { opacity: 0; transform: translate3d(810%, 3%, 0) skewX(-4deg); }
}

@keyframes matrix-idle-vault-lock {
  0%, 100% { opacity: .28; transform: translate3d(-2%, 2%, 0) rotate(-8deg) scale(.9); }
  22% { opacity: .72; transform: translate3d(3%, -2%, 0) rotate(44deg) scale(1.03, .94); }
  47% { opacity: .4; transform: translate3d(-3%, -3%, 0) rotate(91deg) scale(.94, 1.05); }
  69% { opacity: .84; transform: translate3d(2%, 3%, 0) rotate(137deg) scale(1.06, .93); }
  86% { opacity: .46; transform: translate3d(0, -2%, 0) rotate(174deg) scale(.96, 1.02); }
}

@keyframes matrix-idle-nasa-telemetry {
  0%, 16% { opacity: 0; transform: translate3d(0, 8%, 0) skewX(-7deg); }
  32% { opacity: .76; transform: translate3d(160%, -4%, 0) skewX(4deg); }
  54% { opacity: .42; transform: translate3d(350%, 6%, 0) skewX(-3deg); }
  74% { opacity: .84; transform: translate3d(560%, -6%, 0) skewX(5deg); }
  91%, 100% { opacity: 0; transform: translate3d(760%, 3%, 0) skewX(-5deg); }
}

@keyframes matrix-idle-spin-core {
  0% { opacity: .34; transform: translate3d(-2%, 1%, 0) rotate(0deg) skewX(2deg); }
  24% { opacity: .8; transform: translate3d(3%, -3%, 0) rotate(92deg) skewY(-4deg); }
  51% { opacity: .42; transform: translate3d(2%, 4%, 0) rotate(188deg) skewX(-3deg); }
  76% { opacity: .86; transform: translate3d(-4%, -2%, 0) rotate(278deg) skewY(4deg); }
  100% { opacity: .34; transform: translate3d(-2%, 1%, 0) rotate(360deg) skewX(2deg); }
}

@keyframes matrix-match-border-pulse {
  from { opacity: .58; transform: scale(.965); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes matrix-match-border-glint {
  0%, 100% { opacity: .24; transform: scale(.94); }
  48% { opacity: 1; transform: scale(1); }
  72% { opacity: .62; transform: scale(.985); }
}

@keyframes matrix-banner-enter {
  0% { opacity: 0; translate: -50% -45%; scale: .74; }
  58% { opacity: 1; translate: -50% 5%; scale: 1.08; }
  100% { opacity: 1; translate: -50% 0; scale: 1; }
}

@keyframes matrix-extra-spins-frame {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      0 .36rem 0 #07102b,
      0 .75rem 1.4rem rgb(0 0 0 / 58%),
      0 0 1.65rem rgb(100 203 255 / 38%),
      inset 0 .08rem 0 rgb(255 255 255 / 38%);
  }
  50% {
    filter: brightness(1.35) saturate(1.38);
    box-shadow:
      0 .36rem 0 #07102b,
      0 .75rem 1.4rem rgb(0 0 0 / 58%),
      0 0 1.4rem #fff,
      0 0 3rem #ffe761,
      0 0 4.6rem #ff3fd0,
      inset 0 .08rem 0 rgb(255 255 255 / 62%);
  }
}

@media (max-width: 32rem) {
  .bonus-matrix-scene .wormhole-machine {
    gap: .22rem;
  }

  .bonus-matrix-scene .wormhole-reels {
    border-radius: .68rem;
    padding: .2rem;
  }

  .matrix-match-banner {
    min-inline-size: 58%;
    padding-block: .22rem;
  }
}

@media (max-width: 48rem) {
  .bonus-matrix-scene .wormhole-machine {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .bonus-matrix-scene .wormhole-reels {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-game-machine.is-feature-started .bonus-machine-title,
  .bonus-matrix-scene .wormhole-reel.is-spinning .matrix-reel-strip,
  .matrix-match-banner.is-entering,
  .wormhole-machine.is-extra-spins-award .wormhole-reels {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }

  .matrix-symbol-cell.is-match-active::before,
  .matrix-symbol-cell.is-match-active::after {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .matrix-symbol-cell.is-match-active::after {
    display: none;
  }
}

html[data-battery-saver="true"] .matrix-symbol-cell.is-match-active::before,
html[data-battery-saver="true"] .matrix-symbol-cell.is-match-active::after,
html[data-graphics-tier="economy"] .matrix-symbol-cell.is-match-active::before,
html[data-graphics-tier="economy"] .matrix-symbol-cell.is-match-active::after {
  animation: none;
  opacity: 1;
  transform: none;
}

html[data-battery-saver="true"] .matrix-symbol-cell.is-match-active::after,
html[data-graphics-tier="economy"] .matrix-symbol-cell.is-match-active::after {
  display: none;
}

@media (forced-colors: active) {
  .bonus-matrix-scene .wormhole-reels,
  .bonus-matrix-scene .wormhole-reel,
  .matrix-symbol-cell,
  .matrix-match-banner {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .matrix-symbol-cell.is-match-active {
    border-color: Highlight;
    outline: .12rem solid Highlight;
    outline-offset: -.22rem;
  }

  .matrix-symbol-cell.is-match-active::before,
  .matrix-symbol-cell.is-match-active::after {
    display: none;
  }
}

/*
 * Shared graphical action lettering.
 *
 * Every bonus game now uses the Galactic Wheel's large display treatment while
 * retaining its own button surface and state colors. The dock scales from the
 * live viewport instead of holding every button at its maximum dimensions.
 */
.bonus-game-machine .bonus-action-row {
  inline-size: min(38rem, 100%);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.3rem, 1.25vw, .68rem);
  container-type: inline-size;
}

.bonus-wager-controls {
  display: grid;
  min-inline-size: 0;
  gap: .18rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.bonus-wager-controls > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.28rem, 1.2cqi, .52rem);
}

.bonus-wager-controls button {
  position: relative;
  /* Keep every explicit Spark choice reachable on a phone without asking a
     player to rely on a tiny target or a hover-only explanation. */
  min-block-size: 2.75rem;
  min-inline-size: 0;
  padding: .34rem .45rem;
  border: .08rem solid rgb(171 239 244 / 58%);
  border-radius: .7rem;
  background: linear-gradient(145deg, rgb(12 48 70 / 96%), rgb(27 19 72 / 96%));
  color: #f4ffff;
  box-shadow:
    0 .16rem 0 rgb(2 9 27 / 82%),
    inset 0 .06rem 0 rgb(255 255 255 / 16%);
  font: 850 clamp(.875rem, 2.4cqi, .875rem)/1 var(--mono);
  letter-spacing: .035em;
  text-wrap: balance;
  touch-action: manipulation;
}

.bonus-wager-controls button strong {
  color: #fff099;
  font: 400 1.15em/1 var(--bonus-display);
}

.bonus-matrix-scene .bonus-wager-controls > div {
  grid-template-columns: repeat(auto-fit, minmax(min(5.4rem, 100%), 1fr));
}

.bonus-matrix-scene .bonus-wager-controls button {
  min-block-size: 3rem;
  padding: .58rem .4rem;
  border-width: .11rem;
  border-radius: .88rem;
  font-size: clamp(.875rem, 2.8cqi, .875rem);
  white-space: nowrap;
}

.bonus-matrix-scene .bonus-wager-controls button strong {
  font-size: 1.35em;
}

.bonus-wager-controls button[aria-pressed="true"] {
  padding-inline-end: 1.7rem;
  border-color: #e5ff8a;
  background: linear-gradient(145deg, #19746d, #4d347f);
  box-shadow:
    0 .16rem 0 #102845,
    0 0 .8rem rgb(215 255 120 / 34%),
    inset 0 .06rem 0 rgb(255 255 255 / 30%);
}

.bonus-wager-controls button[aria-pressed="true"]::after {
  position: absolute;
  inset: 50% .55rem auto auto;
  color: #e5ff8a;
  content: "✓";
  font: 950 .875rem/1 var(--mono);
  translate: 0 -50%;
}

.bonus-wager-controls button:focus-visible {
  outline: .16rem solid #fff;
  outline-offset: .12rem;
}

.bonus-wager-controls button:disabled {
  filter: grayscale(.45);
  opacity: .42;
}

.bonus-wager-controls > small {
  min-block-size: .72rem;
  color: #c7e9ed;
  font: 750 clamp(.875rem, 2cqi, .875rem)/1.2 var(--mono);
  letter-spacing: .025em;
  text-align: center;
}

@container (max-width: 22rem) {
  .bonus-wager-controls button {
    padding-inline: .32rem;
    font-size: .875rem;
  }
}

.bonus-game-machine .bonus-action-row > :is(
  #bonus-wheel-spin,
  #bonus-matrix-spin,
  #online-game-action
) {
  min-block-size: clamp(3rem, 8dvh, 4.65rem);
  padding:
    clamp(.28rem, 1dvh, .65rem)
    clamp(.35rem, 1.3vw, .7rem);
  font: 400 clamp(1rem, min(5vw, 2.8dvh), 1.85rem)/.86 var(--bonus-display);
  letter-spacing: .012em;
  overflow-wrap: anywhere;
  paint-order: stroke fill;
  -webkit-text-stroke: .025em rgb(255 255 255 / 30%);
  text-shadow:
    0 .08em 0 rgb(255 255 255 / 76%),
    0 .17em .09em rgb(35 18 74 / 32%),
    0 0 .35em rgb(255 242 153 / 48%);
}

.bonus-game-machine .bonus-action-row > :is(
  #bonus-wheel-spin,
  #bonus-matrix-spin,
  #online-game-action
) .bonus-action-label > span {
  font-size: max(.875rem, .72em);
}

.bonus-game-machine .bonus-action-row > .bonus-launch-button {
  --bonus-auto-hold-duration: 650ms;

  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  place-content: center;
  gap: clamp(.12rem, .45dvh, .25rem);
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.bonus-action-label,
.bonus-action-hint {
  position: relative;
  z-index: 2;
  display: block;
}

.bonus-action-label {
  line-height: .9;
  text-wrap: balance;
}

.bonus-action-hint {
  color: currentColor;
  font: 800 clamp(.875rem, min(2.7vw, 1.45dvh), .875rem)/1.05 "Manrope", sans-serif;
  letter-spacing: .035em;
  opacity: .82;
  paint-order: normal;
  text-shadow: none;
  text-transform: none;
  -webkit-text-stroke: 0;
}

.bonus-action-hold-progress {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  block-size: clamp(.22rem, .65dvh, .34rem);
  border-radius: 0 0 .9rem .9rem;
  background: #fff7a0;
  box-shadow: 0 0 .65rem #fff, 0 0 1.1rem var(--machine-secondary);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

.bonus-launch-button.is-holding-for-auto {
  outline: .16rem solid #fff7a0;
  outline-offset: .12rem;
  filter: brightness(1.08) saturate(1.08);
}

.bonus-launch-button.is-holding-for-auto .bonus-action-hold-progress {
  animation: bonus-auto-hold-fill var(--bonus-auto-hold-duration) linear forwards;
}

.bonus-launch-button.is-auto-playing {
  border-color: #fff3a0;
  background: linear-gradient(180deg, #fff3a0, #ff9a70);
  color: #3f2030;
}

@keyframes bonus-auto-hold-fill {
  from {
    opacity: .58;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-launch-button.is-holding-for-auto .bonus-action-hold-progress {
    animation: none;
    opacity: 1;
    transform: scaleX(.68);
  }
}

@media (forced-colors: active) {
  .bonus-launch-button.is-holding-for-auto,
  .bonus-launch-button.is-auto-playing {
    border-color: Highlight;
    outline-color: Highlight;
  }

  .bonus-action-hold-progress {
    background: Highlight;
    box-shadow: none;
  }
}

/*
 * Galactic Wheel final layout and result presentation.
 * The wheel owns the full space above the action dock. The winning card is a
 * dedicated large render, so its artwork and lettering are repainted at the
 * presentation size instead of scaling a small wheel tile.
 */
.bonus-game-machine[data-bonus-game="wheel"] .bonus-wheel-scene {
  align-content: stretch;
  gap: clamp(.2rem, .55dvh, .45rem);
  container-type: size;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-stage {
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(98cqw, 60rem);
  max-block-size: min(100%, 98cqw, 60rem);
  aspect-ratio: 1;
  align-self: stretch;
  justify-self: center;
}

/* Keep the short Wheel wager summary readable and in its own dock. Full odds
   and award details remain available in the adjacent Paytable. */
.bonus-game-machine[data-bonus-game="wheel"] .bonus-action-row {
  position: relative;
  z-index: 12;
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-wager-disclosure,
.bonus-game-machine[data-bonus-game="wheel"] .bonus-wager-controls > small {
  font-size: clamp(.875rem, 2.4cqi, 1rem) !important;
  line-height: 1.25;
  letter-spacing: .012em;
  text-wrap: balance;
}

/* The wager line changes between ready, locked, and settled copy. Keep it to
   one reserved line so its text cannot take height from the responsive wheel. */
.bonus-game-machine[data-bonus-game="wheel"] .bonus-wager-controls > small {
  inline-size: 100%;
  min-block-size: 1.25em;
  block-size: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: nowrap;
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-wager-disclosure {
  margin-block-end: .25rem;
  text-align: center;
}

.bonus-game-machine[data-bonus-game="wheel"] .bonus-wager-controls button {
  font-size: clamp(.875rem, 2.5cqi, .95rem);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-stage::before,
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-stage::after {
  display: none;
  animation: none;
  content: none;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel {
  inline-size: 96%;
  container-type: size;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transform: none;
  transform-origin: 50% 50%;
  transform-style: flat;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: rotate;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pins {
  position: absolute;
  z-index: 12;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin {
  --wheel-pin-index: 0;

  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: clamp(.72rem, 2.7cqi, 1.65rem);
  block-size: clamp(.96rem, 3.5cqi, 2.1rem);
  border: clamp(.06rem, .2cqi, .12rem) solid #fffdf0;
  border-radius: 46% 46% 38% 38% / 40% 40% 60% 60%;
  background:
    radial-gradient(circle at 30% 20%, #fff 0 13%, rgb(255 255 255 / 18%) 14% 24%, transparent 26%),
    linear-gradient(112deg, #fff 0 14%, #bfeeff 28%, #fff7ce 43%, #e3a735 62%, #7a3d0b 82%, #f7d477 100%);
  box-shadow:
    0 .18rem .13rem rgb(22 9 2 / 88%),
    0 0 0 .09rem rgb(47 20 3 / 88%),
    0 0 .34rem #fff,
    0 0 .8rem rgb(103 226 255 / 78%),
    0 0 1.05rem rgb(255 202 73 / 70%),
    inset -.16rem -.2rem .2rem rgb(54 22 2 / 70%),
    inset .12rem .11rem .15rem rgb(255 255 255 / 92%);
  transform:
    translate(-50%, -50%)
    rotate(calc(11.25deg + var(--wheel-pin-index) * 22.5deg))
    translateY(-49.4cqi);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin::before,
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin::after {
  position: absolute;
  inset-inline: 16%;
  border-radius: 999rem;
  content: "";
  pointer-events: none;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin::before {
  inset-block-start: 10%;
  block-size: 28%;
  background: linear-gradient(90deg, transparent, #fff 38% 64%, transparent);
  box-shadow: 0 0 .28rem #fff;
  opacity: .94;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin::after {
  inset-block-end: 8%;
  block-size: 18%;
  background: linear-gradient(90deg, #6a3006, #ffd66d 48%, #4b2104);
  box-shadow: inset 0 .06rem .08rem rgb(255 255 255 / 58%);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(2) { --wheel-pin-index: 1; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(3) { --wheel-pin-index: 2; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(4) { --wheel-pin-index: 3; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(5) { --wheel-pin-index: 4; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(6) { --wheel-pin-index: 5; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(7) { --wheel-pin-index: 6; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(8) { --wheel-pin-index: 7; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(9) { --wheel-pin-index: 8; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(10) { --wheel-pin-index: 9; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(11) { --wheel-pin-index: 10; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(12) { --wheel-pin-index: 11; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(13) { --wheel-pin-index: 12; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(14) { --wheel-pin-index: 13; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(15) { --wheel-pin-index: 14; }
.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin:nth-child(16) { --wheel-pin-index: 15; }

@media (forced-colors: active) {
  .bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-pin {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel > span {
  --wheel-segment-radius: -35cqi;
  --wheel-card-width: 14cqi;
  --wheel-card-ratio: .58;

  inline-size: clamp(3rem, var(--wheel-card-width), 8.6rem);
  z-index: 2;
  aspect-ratio: var(--wheel-card-ratio);
  grid-template-rows: minmax(0, 1fr) minmax(1.5rem, 30%);
  gap: clamp(.04rem, .3cqi, .18rem);
  padding:
    clamp(.08rem, .38cqi, .28rem)
    clamp(.06rem, .25cqi, .2rem)
    clamp(.14rem, .58cqi, .4rem);
  border-width: clamp(.1rem, .34cqi, .22rem);
  border-radius: clamp(.22rem, .7cqi, .52rem);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  transition:
    inline-size 720ms cubic-bezier(.18, .78, .22, 1),
    aspect-ratio 720ms cubic-bezier(.18, .78, .22, 1),
    padding 720ms cubic-bezier(.18, .78, .22, 1);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel > span .wheel-space-object {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  align-self: center;
  background-size: 400% 200%;
  image-rendering: auto;
  transform: scale(1.02);
  transition: transform 720ms cubic-bezier(.18, .78, .22, 1);
}

.bonus-game-machine.is-feature-started[data-bonus-game="wheel"] .galactic-wheel > span {
  --wheel-card-width: 15.1cqi;
  --wheel-card-ratio: .54;
}

.bonus-game-machine.is-feature-started[data-bonus-game="wheel"] .galactic-wheel > span .wheel-space-object {
  transform: scale(1.06);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel > span > b {
  z-index: 2;
  inline-size: 78%;
  block-size: 100%;
  align-self: end;
  padding: .16em .06em .2em;
  border: clamp(.04rem, .13cqi, .1rem) solid #fff0a6;
  border-radius: clamp(.18rem, .45cqi, .34rem);
  background:
    radial-gradient(circle at 28% 12%, rgb(255 255 255 / 72%), transparent 26%),
    linear-gradient(145deg, #fff38a 0 16%, #ffb642 48%, #e85a8d 100%);
  box-shadow:
    0 .12rem 0 #622a4e,
    0 0 .42rem rgb(255 236 150 / 76%),
    inset 0 .06rem 0 rgb(255 255 255 / 72%);
  color: #32143d;
  font-size: clamp(.875rem, 2.55cqi, 1.22rem);
  paint-order: stroke fill;
  -webkit-text-stroke: .015em rgb(255 255 255 / 58%);
  text-shadow: 0 .08em 0 #fff1a6, 0 0 .24rem rgb(255 255 255 / 68%);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel > span > b small {
  color: #3c1747;
  font-size: clamp(.875rem, 1.26cqi, .875rem);
  letter-spacing: .075em;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel[data-wager-paytable] > span > b {
  background:
    radial-gradient(circle at 28% 12%, rgb(255 255 255 / 78%), transparent 26%),
    linear-gradient(145deg, #faff9a 0 16%, #67f1df 48%, #9d6bf3 100%);
  box-shadow:
    0 .12rem 0 #293763,
    0 0 .5rem rgb(111 245 229 / 82%),
    inset 0 .06rem 0 rgb(255 255 255 / 76%);
  color: #141d47;
  text-shadow: 0 .08em 0 #efffff, 0 0 .24rem rgb(255 255 255 / 72%);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel[data-wager-paytable="double-orbit"] > span > b {
  background:
    radial-gradient(circle at 28% 12%, rgb(255 255 255 / 82%), transparent 26%),
    linear-gradient(145deg, #fff59a 0 14%, #70e7ff 44%, #ef6fde 100%);
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel[data-wager-paytable] > span > b small {
  color: #18204c;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-base {
  display: none;
}

.bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel > span.is-winning {
  z-index: 8;
  animation: none;
}

.galactic-wheel-prize {
  position: absolute;
  z-index: 24;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: .16rem;
  overflow: hidden;
  padding: .55rem .62rem .82rem;
  border: clamp(.18rem, 1.7cqi, .34rem) solid #fff3ad;
  border-radius: clamp(.8rem, 7cqi, 1.35rem);
  background:
    radial-gradient(circle at 34% 18%, rgb(255 255 255 / 24%), transparent 24%),
    linear-gradient(180deg, #06151e 0 64%, #f0c25c 65% 100%);
  box-shadow:
    0 .58rem 0 #5f3a12,
    0 1.25rem 2.2rem rgb(0 0 0 / 64%),
    0 0 0 .14rem rgb(15 7 3 / 74%),
    0 0 2.6rem #fff,
    0 0 4.4rem #ffc750,
    inset 0 .16rem 0 rgb(255 248 205 / 60%),
    inset 0 0 1.1rem rgb(0 0 0 / 54%);
  opacity: 1;
  pointer-events: none;
  container-type: inline-size;
}

.galactic-wheel-prize[hidden] {
  display: none;
}

.bonus-game-popup {
  position: absolute;
  z-index: 80;
  inset: 50% auto auto 50%;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
  inline-size: min(calc(100% - 2rem), 28rem);
  align-items: center;
  gap: .72rem;
  padding: clamp(.8rem, 2.5vw, 1.1rem);
  border: .12rem solid rgb(255 246 173 / 88%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 18% 14%, rgb(255 255 255 / 16%), transparent 32%),
    linear-gradient(145deg, rgb(4 22 35 / 97%), rgb(38 14 56 / 97%));
  box-shadow:
    0 1rem 3rem rgb(0 0 0 / 64%),
    0 0 0 .16rem rgb(84 244 238 / 28%),
    0 0 2.4rem rgb(255 93 201 / 38%);
  color: #fff;
  pointer-events: none;
  translate: -50% -50%;
  animation: bonus-game-popup-arrive 280ms var(--bonus-spring) both;
  text-align: center;
}

.bonus-game-popup::after {
  inline-size: 2.9rem;
  content: "";
}

.bonus-game-popup[hidden] {
  display: none;
}

.bonus-game-popup-icon {
  display: grid;
  inline-size: 2.9rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #efff8d, #63f0e9);
  color: #10233a;
  font: 400 1.3rem/1 var(--bonus-display);
  box-shadow: 0 0 1.2rem rgb(106 245 238 / 58%);
}

.bonus-game-popup[data-bonus-overlay="praise"] {
  border-color: rgb(255 249 174 / 96%);
  background:
    radial-gradient(circle at 16% 8%, rgb(255 255 255 / 28%), transparent 28%),
    linear-gradient(135deg, rgb(14 43 58 / 98%), rgb(66 20 86 / 98%));
  box-shadow:
    0 1rem 3rem rgb(0 0 0 / 68%),
    0 0 0 .18rem rgb(95 244 233 / 36%),
    0 0 3rem rgb(255 91 207 / 56%);
}

.bonus-game-popup[data-bonus-overlay="praise"] .bonus-game-popup-icon {
  background: linear-gradient(145deg, #fff7a0, #79fff0 56%, #ff7ddd);
  box-shadow:
    0 0 1.25rem rgb(112 255 239 / 76%),
    0 0 2.1rem rgb(255 91 207 / 42%);
}

.bonus-game-popup[data-bonus-overlay="praise"] strong {
  font-size: clamp(1.08rem, 4.6vw, 1.65rem);
  letter-spacing: .06em;
}

.bonus-game-popup > span:last-child {
  min-inline-size: 0;
}

.bonus-game-popup strong,
.bonus-game-popup small {
  display: block;
  text-wrap: balance;
}

.bonus-game-popup strong {
  color: #fff4a8;
  font: 400 clamp(.92rem, 3.8vw, 1.35rem)/1.05 var(--bonus-display);
  letter-spacing: .035em;
  text-shadow: 0 .08rem 0 #7a2d75, 0 0 .7rem rgb(255 103 207 / 44%);
}

.bonus-game-popup small {
  margin-block-start: .28rem;
  color: #e8fdff;
  font-size: clamp(.875rem, 2.8vw, .95rem);
  line-height: 1.35;
}

.bonus-game-popup .bonus-game-popup-dismiss-hint {
  display: none;
  margin-block-start: .6rem;
  color: #fff4a8;
  font: 850 .875rem/1.2 var(--bonus-sans);
  letter-spacing: .02em;
}

.bonus-game-popup[data-dismiss-mode="click"] .bonus-game-popup-dismiss-hint {
  display: block;
}

@keyframes bonus-game-popup-arrive {
  from {
    opacity: 0;
    scale: .82;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.galactic-wheel-prize .wheel-space-object {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  min-block-size: 0;
  image-rendering: auto;
}

.galactic-wheel-prize[data-bonus-symbol="stardust"] .wheel-space-object {
  background-position: 0 0;
}

.galactic-wheel-prize[data-bonus-symbol="current"] .wheel-space-object {
  background-position: 33.333% 0;
}

.galactic-wheel-prize[data-bonus-symbol="plasma"] .wheel-space-object {
  background-position: 66.667% 0;
}

.galactic-wheel-prize[data-bonus-symbol="recycler"] .wheel-space-object {
  background-position: 100% 0;
}

.galactic-wheel-prize[data-bonus-symbol="hyper"] .wheel-space-object {
  background-position: 0 100%;
}

.galactic-wheel-prize[data-bonus-symbol="orbit"] .wheel-space-object {
  background-position: 33.333% 100%;
}

.galactic-wheel-prize[data-bonus-symbol="supernova"] .wheel-space-object {
  background-position: 100% 100%;
}

.galactic-wheel-prize > b {
  display: grid;
  inline-size: 100%;
  place-items: center;
  color: #2d123b;
  font: 400 clamp(1rem, 15cqi, 2rem)/.82 var(--bonus-display);
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 .07em 0 #fff;
}

.galactic-wheel-prize > b small {
  color: #3c1845;
  font: 400 clamp(.875rem, 7.2cqi, .95rem)/1 var(--bonus-display);
  letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .wormhole-machine .matrix-symbol-cell .matrix-space-object::before,
  .wormhole-machine .matrix-space-object::after {
    animation: none !important;
  }

  .galactic-wheel-prize {
    transition: none;
  }

  .bonus-game-popup {
    animation: none;
  }
}

html[data-battery-saver="true"] .wormhole-machine .matrix-symbol-cell .matrix-space-object::before,
html[data-battery-saver="true"] .wormhole-machine .matrix-space-object::after {
  animation: none !important;
}

/*
 * Prism Cascade reactor field.
 *
 * This is deliberately not a reel matrix: fifty-six individually selectable
 * faceted prisms form a tall light reactor. A chosen crystal releases the
 * connected beam path while the same settled DOM remains on screen.
 */
.bonus-game-machine[data-bonus-game="cascade"] .online-cascade-field {
  inline-size: 100%;
  block-size: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  contain: layout paint;
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="starfalldrop"]
) .online-game-stage {
  grid-template-rows: minmax(0, 1fr);
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="starfalldrop"]
) .online-game-feature-bar {
  display: none;
}

.bonus-game-machine[data-bonus-game="cascade"] .online-cascade-grid {
  inline-size: min(100cqw, calc((100cqh - 3.1rem) * .875)) !important;
  block-size: min(calc(100cqw / .875), calc(100cqh - 3.1rem));
  max-inline-size: 100%;
  max-block-size: 100%;
  aspect-ratio: 7 / 8;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(.12rem, .55cqi, .34rem);
  padding: clamp(.2rem, .8cqi, .5rem);
  border: clamp(.1rem, .35cqi, .22rem) solid rgb(181 252 255 / 72%);
  border-radius: clamp(.8rem, 2.2cqi, 1.4rem);
  background:
    repeating-conic-gradient(from 22.5deg, rgb(255 255 255 / 5%) 0 45deg, transparent 45deg 90deg) 50% / 2.6rem 2.6rem,
    radial-gradient(circle at 50% 48%, rgb(115 255 230 / 22%), transparent 44%),
    linear-gradient(155deg, #04162f, #100b39 58%, #290c42);
  box-shadow:
    0 0 1.4rem rgb(84 238 231 / 30%),
    inset 0 0 2.4rem rgb(84 119 255 / 20%);
  isolation: isolate;
}

.bonus-game-machine[data-bonus-game="cascade"] .online-cascade-grid > [data-prism-cell] {
  position: relative;
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 .14rem 0 rgb(4 8 34 / 90%))
    drop-shadow(0 0 .34rem rgb(104 237 245 / 34%));
}

.bonus-game-machine[data-bonus-game="cascade"] .online-cascade-grid.is-tumbling > [data-prism-cell] {
  animation-duration: 320ms;
}

.online-cascade-grid [data-prism-choice] {
  position: relative;
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: .09rem solid rgb(229 255 255 / 82%);
  background:
    radial-gradient(circle at 34% 20%, rgb(255 255 255 / 52%), transparent 15%),
    linear-gradient(155deg, #284d79, #211764 55%, #56206d);
  clip-path: polygon(50% 0, 94% 19%, 86% 83%, 50% 100%, 14% 83%, 6% 19%);
  cursor: default;
  opacity: 1;
  transition: filter 150ms ease, scale 150ms ease;
}

.online-cascade-grid [data-prism-choice]:disabled {
  opacity: 1;
}

.online-cascade-field.is-primary-action {
  cursor: pointer;
  touch-action: manipulation;
}

.online-cascade-field.is-primary-action [data-prism-choice]:disabled {
  pointer-events: none;
}

.online-cascade-field.is-awaiting-choice [data-prism-choice] {
  cursor: pointer;
}

.online-cascade-field.is-awaiting-choice [data-prism-choice]:is(:hover, :focus-visible) {
  outline: .16rem solid #fff7a6;
  outline-offset: .08rem;
  filter: brightness(1.45) saturate(1.25);
  scale: 1.09;
}

.online-cascade-grid > [data-prism-cell].is-charged {
  z-index: 3;
  filter:
    drop-shadow(0 0 .45rem #fff)
    drop-shadow(0 0 1rem #fff268)
    drop-shadow(0 0 1.6rem #ff4fd0);
}

.online-cascade-grid > [data-prism-cell].is-matchable:not(.is-charged) {
  filter:
    drop-shadow(0 0 .3rem rgb(255 255 255 / 66%))
    drop-shadow(0 0 .7rem rgb(83 241 231 / 54%));
}

.online-cascade-grid > [data-prism-cell].is-blocked-pair {
  filter: saturate(.5) brightness(.72);
  opacity: .72;
}

.online-cascade-field.is-awaiting-choice [data-prism-cell].is-blocked-pair [data-prism-choice] {
  cursor: not-allowed;
}

.online-cascade-grid > [data-prism-cell].is-empty {
  filter: none;
  pointer-events: none;
}

.online-cascade-grid > [data-prism-cell].is-empty [data-prism-choice] {
  border-color: rgb(118 204 222 / 10%);
  background: rgb(6 19 48 / 18%);
  opacity: .22;
  cursor: default;
}

.online-cascade-grid > [data-prism-cell].is-invalid [data-prism-choice] {
  animation: online-prism-invalid 260ms ease-out both;
}

.online-cascade-grid.is-dropping-prisms [data-prism-choice] {
  will-change: transform, opacity;
}

.online-cascade-grid [data-prism-choice].is-refill-dropping {
  z-index: 9;
  will-change: filter, opacity, transform;
}

.online-cascade-grid .online-prism-clear-echo {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.online-cascade-grid > [data-prism-cell].is-charged [data-prism-choice] {
  animation: online-prism-charge-pulse 760ms ease-in-out infinite alternate;
}

.online-prism-charge {
  position: absolute;
  inset: 10%;
  border: .12rem solid #fff9aa;
  clip-path: inherit;
  opacity: 0;
  pointer-events: none;
}

.is-charged .online-prism-charge {
  opacity: 1;
  animation: online-prism-charge-ring 900ms ease-out infinite;
}

.online-cascade-grid > [data-prism-cell].is-selected [data-prism-choice] {
  filter: brightness(1.7) saturate(1.35);
  scale: 1.12;
}

.online-cascade-grid > [data-prism-cell].is-winning {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 0 .45rem #fff)
    drop-shadow(0 0 1rem #ffdc62);
}

.online-cascade-grid > [data-prism-cell].is-winning [data-prism-choice] {
  background: linear-gradient(155deg, #fff7a8, #ff914f 52%, #dc39bf);
  animation: online-prism-win 620ms var(--bonus-spring) both;
}

.online-cascade-grid > [data-prism-cell] .online-prism-object {
  pointer-events: none;
  transform: scale(1.18);
}

.online-cascade-grid > [data-prism-cell].is-wildcard {
  z-index: 5;
  filter:
    drop-shadow(0 0 .34rem #fff)
    drop-shadow(0 0 .72rem #54f7ff)
    drop-shadow(0 0 1.2rem #ff42cf);
}

.online-cascade-grid > [data-prism-cell].is-wildcard::before,
.online-cascade-grid > [data-prism-cell].is-wildcard::after {
  position: absolute;
  z-index: 0;
  inset: -38%;
  border-radius: 48% 52% 45% 55%;
  background:
    conic-gradient(from 20deg, transparent, rgb(82 246 255 / 72%), transparent 28%, rgb(255 62 202 / 64%), transparent 56%, rgb(255 232 68 / 58%), transparent 82%);
  content: "";
  filter: blur(.24rem);
  opacity: .72;
  pointer-events: none;
  animation: online-prism-wildcard-wisp 2.8s ease-in-out infinite alternate;
}

.online-cascade-grid > [data-prism-cell].is-wildcard::after {
  inset: -20%;
  border-radius: 58% 42% 62% 38%;
  animation-direction: alternate-reverse;
  animation-duration: 2.1s;
  opacity: .5;
}

.online-cascade-grid > [data-prism-cell].is-wildcard [data-prism-choice] {
  z-index: 1;
  border-color: #fff;
  background: #050712;
  box-shadow:
    inset 0 0 .7rem rgb(255 255 255 / 38%),
    0 0 .7rem #53f7ff,
    0 0 1.25rem rgb(255 65 207 / 84%);
}

.online-prism-object[data-prism="wildcard"] {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 24%, #080912 24% 30%, transparent 30% 67%, #080912 67% 74%, transparent 74%),
    linear-gradient(0deg, transparent 0 29%, #080912 29% 36%, transparent 36% 62%, #080912 62% 69%, transparent 69%),
    linear-gradient(135deg, #fff 0 18%, #ffdd35 18% 37%, #ff3b76 37% 56%, #28dcff 56% 77%, #5e55ff 77% 100%);
  background-position: center;
  background-size: 100% 100%;
  filter: brightness(1.18) saturate(1.35);
  animation: online-prism-wildcard-face 1.9s ease-in-out infinite alternate;
}

.online-cascade-grid.is-shuffling-prisms::before {
  position: absolute;
  z-index: 8;
  inset: -4%;
  border-radius: 1.4rem;
  background:
    repeating-radial-gradient(ellipse at 50% 52%, transparent 0 7%, rgb(255 255 255 / 18%) 8%, transparent 10%),
    conic-gradient(from 0deg, transparent, rgb(67 246 255 / 38%), transparent 22%, rgb(255 64 211 / 34%), transparent 48%, rgb(255 225 62 / 28%), transparent 74%);
  content: "";
  filter: blur(.18rem);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: online-prism-shuffle-wisps 760ms cubic-bezier(.16, .82, .2, 1) both;
}

.online-cascade-win-path {
  z-index: 7;
}

.online-cascade-win-path polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.prism-premium-popup {
  --game-popup-shift-x: 0px;
  --game-popup-shift-y: 0px;

  position: absolute;
  z-index: 48;
  inset: 50% auto auto 50%;
  display: grid;
  inline-size: min(19rem, 72%);
  min-block-size: 8.25rem;
  place-content: center;
  justify-items: center;
  gap: clamp(.12rem, .65cqi, .32rem);
  padding: clamp(.72rem, 2.5cqi, 1.2rem);
  border: clamp(.12rem, .38cqi, .2rem) solid #fff;
  border-radius: clamp(.8rem, 2cqi, 1.2rem);
  background:
    radial-gradient(circle at 50% 20%, rgb(255 255 255 / 62%), transparent 26%),
    repeating-conic-gradient(from -12deg, rgb(255 247 143 / 18%) 0 8deg, transparent 8deg 18deg),
    linear-gradient(145deg, #ffda3f, #ff6b48 46%, #bb2ee9 78%, #3923a0);
  box-shadow:
    0 .28rem 0 #40155e,
    0 0 .72rem #fff38c,
    0 0 1.8rem rgb(255 67 211 / 58%),
    inset 0 0 .9rem rgb(255 255 255 / 32%);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  translate:
    calc(-50% + var(--game-popup-shift-x))
    calc(-50% + var(--game-popup-shift-y));
  transition: translate 120ms ease-out;
  animation: prism-premium-pop 1.5s cubic-bezier(.18, .86, .24, 1.08) both;
}

.prism-premium-popup::before {
  position: absolute;
  z-index: -1;
  inset: .38rem;
  border: .1rem solid rgb(255 255 255 / 68%);
  border-radius: calc(clamp(.8rem, 2cqi, 1.2rem) - .24rem);
  background: radial-gradient(circle, rgb(26 11 77 / 18%), rgb(26 11 77 / 64%));
  content: "";
}

.prism-premium-popup small,
.prism-premium-popup b,
.prism-premium-popup span {
  font-family: var(--bonus-display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .045em;
  -webkit-text-stroke: .055em #26103f;
  paint-order: stroke fill;
  text-shadow:
    0 .12em 0 #531a65,
    0 0 .38em rgb(255 255 255 / 72%);
}

.prism-premium-popup small {
  font-size: clamp(.875rem, 3cqi, 1.2rem);
}

.prism-premium-popup strong {
  color: #fff9a0;
  font: 400 clamp(2.7rem, 12cqi, 4.8rem)/.8 var(--bonus-display);
  letter-spacing: -.035em;
  -webkit-text-stroke: .055em #24103f;
  paint-order: stroke fill;
  text-shadow:
    0 .085em 0 #671b62,
    0 0 .18em #fff,
    0 0 .42em #ffef6d;
}

.prism-premium-popup b {
  font-size: clamp(.88rem, 3.5cqi, 1.4rem);
}

.prism-premium-popup span {
  margin-block-start: .22rem;
  padding: .32em .62em .26em;
  border: .11em solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #42f3d7, #436dff 58%, #9a2ff0);
  box-shadow: 0 .12em 0 #241660, 0 0 .48em #5ffce5;
  font-size: clamp(1rem, 4.1cqi, 1.65rem);
}

.prism-premium-popup.is-multiplier-up {
  background:
    radial-gradient(circle at 50% 18%, rgb(255 255 255 / 72%), transparent 27%),
    repeating-conic-gradient(from -12deg, rgb(255 253 172 / 28%) 0 8deg, transparent 8deg 18deg),
    linear-gradient(145deg, #ffea57, #ff7138 42%, #ee2da7 70%, #5724be);
  box-shadow:
    0 .28rem 0 #40155e,
    0 0 .9rem rgb(255 255 255 / 82%),
    0 0 2.2rem rgb(255 89 197 / 68%),
    inset 0 0 1rem rgb(255 255 255 / 38%);
}

@keyframes prism-premium-pop {
  0% { opacity: 0; scale: .82; filter: brightness(1.35); }
  16% { opacity: 1; scale: 1.03; filter: brightness(1.08); }
  30%, 84% { opacity: 1; scale: 1; filter: brightness(1); }
  100% { opacity: 0; scale: 1.04; }
}

@keyframes prism-premium-fade {
  0%, 100% { opacity: 0; }
  12%, 88% { opacity: 1; }
}

@keyframes online-prism-charge-pulse {
  to {
    filter: brightness(1.45) saturate(1.32);
    scale: 1.07;
  }
}

@keyframes online-prism-wildcard-face {
  0% { scale: 1.12; rotate: -2deg; filter: brightness(1.08) saturate(1.22); }
  55% { scale: 1.22; rotate: 1.4deg; filter: brightness(1.5) saturate(1.62); }
  100% { scale: 1.16; rotate: 3deg; filter: brightness(1.22) saturate(1.42); }
}

@keyframes online-prism-wildcard-wisp {
  0% { opacity: .34; transform: rotate(-18deg) scale(.78, .96); }
  56% { opacity: .84; transform: rotate(112deg) scale(1.08, .86); }
  100% { opacity: .48; transform: rotate(224deg) scale(.9, 1.12); }
}

@keyframes online-prism-shuffle-wisps {
  0% { opacity: 0; transform: rotate(-24deg) scale(.72); }
  34% { opacity: .92; transform: rotate(38deg) scale(1.06); }
  76% { opacity: .56; transform: rotate(116deg) scale(.98); }
  100% { opacity: 0; transform: rotate(176deg) scale(1.12); }
}

@keyframes online-prism-charge-ring {
  0% { opacity: .9; scale: .55; }
  75% { opacity: .52; }
  100% { opacity: 0; scale: 1.16; }
}

@keyframes online-prism-invalid {
  0%, 100% { translate: 0; filter: brightness(1); }
  28% { translate: -.22rem 0; filter: brightness(1.5) saturate(.65); }
  58% { translate: .2rem 0; }
  82% { translate: -.08rem 0; }
}

@media (max-width: 32rem) {
  .bonus-game-machine[data-bonus-game="cascade"] .online-cascade-grid {
    gap: .1rem;
    padding: .16rem;
  }

  .bonus-game-machine[data-bonus-game="cascade"] .online-cascade-objective {
    padding: .24rem .42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prism-premium-popup {
    animation-name: prism-premium-fade;
    animation-duration: 1.5s;
  }

  .online-cascade-grid > [data-prism-cell].is-charged [data-prism-choice],
  .is-charged .online-prism-charge,
  .online-cascade-grid > [data-prism-cell].is-invalid [data-prism-choice],
  .online-cascade-grid > [data-prism-cell].is-wildcard::before,
  .online-cascade-grid > [data-prism-cell].is-wildcard::after,
  .online-prism-object[data-prism="wildcard"],
  .online-cascade-grid.is-shuffling-prisms::before {
    animation: none;
  }
}

html[data-battery-saver="true"] .online-cascade-grid > [data-prism-cell].is-wildcard::before,
html[data-battery-saver="true"] .online-cascade-grid > [data-prism-cell].is-wildcard::after,
html[data-battery-saver="true"] .online-prism-object[data-prism="wildcard"],
html[data-battery-saver="true"] .online-cascade-grid.is-shuffling-prisms::before {
  animation: none;
}

@media (forced-colors: active) {
  .online-cascade-grid [data-prism-choice] {
    border-color: CanvasText;
  }

  .online-cascade-grid > [data-prism-cell].is-charged [data-prism-choice] {
    outline: .16rem solid Highlight;
  }
}

/* Compact game-entry crown. The two resource cards carry the strongest type,
   light, and width while the utility controls stay in the same shallow row. */
.bonus-machine-header {
  grid-template-columns: auto minmax(7rem, .3fr) auto minmax(22rem, 1.7fr);
  align-items: center;
  gap: clamp(.28rem, .7vw, .65rem);
  min-block-size: 3.4rem;
  padding: .1rem 2.9rem .1rem .1rem;
}

.bonus-header-game-title {
  overflow: hidden;
  color: #fff8cb;
  font: 400 clamp(.875rem, 1.2vw, 1.15rem)/1 var(--bonus-display);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  text-shadow: 0 .08em 0 #6b276f, 0 0 .42em var(--machine-accent);
  white-space: nowrap;
}

.bonus-machine-balance {
  display: none;
}

.bonus-machine-header .bonus-progress-marquee {
  inline-size: 100%;
  gap: clamp(.11rem, .28vw, .24rem);
  padding: .12rem;
  border-width: .08rem;
  border-radius: .72rem;
  box-shadow:
    0 .18rem 0 #020719,
    0 .32rem .82rem rgb(0 0 0 / 46%),
    0 0 .75rem color-mix(in oklab, var(--machine-accent), transparent 38%),
    inset 0 .05rem 0 rgb(255 255 255 / 28%);
}

.bonus-machine-header .bonus-progress-marquee::before {
  inset: -.25rem 10%;
  filter: blur(.3rem);
}

.bonus-machine-header .bonus-progress-marquee > span {
  min-block-size: 2.85rem;
  column-gap: clamp(.18rem, .42vw, .38rem);
  row-gap: .03rem;
  padding: .18rem clamp(.16rem, .42vw, .38rem);
  border-radius: .5rem;
}

.bonus-machine-header .bonus-progress-marquee > span::before {
  inline-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-size: clamp(.875rem, 1.1vw, .92rem);
}

.bonus-machine-header .bonus-progress-marquee > span.is-win::before {
  inline-size: clamp(1.08rem, 1.7vw, 1.4rem);
  font-size: clamp(.875rem, .9vw, .875rem);
}

.bonus-machine-header .bonus-progress-marquee small {
  font-size: clamp(.875rem, .56vw, .875rem);
  letter-spacing: .055em;
}

.bonus-machine-header .bonus-progress-marquee strong {
  gap: .15rem;
  font-size: clamp(1.45rem, 2.05vw, 2.05rem);
  line-height: .78;
}

.bonus-machine-header .bonus-progress-marquee .is-win strong {
  font-size: clamp(.92rem, 1.22vw, 1.22rem);
  line-height: .84;
}

.bonus-machine-header .bonus-progress-marquee strong em {
  font-size: clamp(.875rem, .45vw, .875rem);
}

.bonus-paytable-trigger {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  padding: .4rem .72rem;
  border: .09rem solid #d8fbff;
  border-radius: .62rem;
  background:
    radial-gradient(circle at 28% 10%, rgb(255 255 255 / 44%), transparent 28%),
    linear-gradient(145deg, #19519a, #492580 58%, #922a76);
  color: #fff9b0;
  box-shadow:
    0 .17rem 0 #080e38,
    0 0 .7rem rgb(87 229 255 / 42%),
    inset 0 .06rem 0 rgb(255 255 255 / 48%);
  font: 900 clamp(.875rem, .62rem + .2vw, .875rem)/1 var(--mono);
  letter-spacing: .055em;
  text-shadow: 0 .08rem 0 #522068, 0 0 .35rem #fff;
  white-space: nowrap;
}

.bonus-paytable-trigger > span {
  color: #71f5ff;
  font-size: 1.1em;
}

.bonus-paytable-trigger:is(:hover, :active),
.bonus-paytable-trigger[aria-expanded="true"] {
  border-color: #fff28a;
  background: linear-gradient(145deg, #257cc0, #702e99 55%, #ca3a7e);
  box-shadow: 0 .17rem 0 #080e38, 0 0 1rem #65efff;
}

.bonus-paytable-trigger:focus-visible,
.bonus-paytable-close:focus-visible,
.bonus-paytable-scroll:focus-visible {
  outline: .18rem solid #fff58f;
  outline-offset: .14rem;
}

/* Shared casino-style paytable. A star-chart shell gives every Bonus Arcade
   game one consistent place for exact prizes and optional wager returns. */
.bonus-paytable-dialog {
  position: fixed;
  inset: 0;
  isolation: isolate;
  box-sizing: border-box;
  inline-size: min(64rem, calc(100vw - 1.4rem));
  max-inline-size: none;
  block-size: min(88dvh, 52rem);
  max-block-size: calc(100dvh - 1.4rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: .14rem solid #c9f8ff;
  border-radius: clamp(1rem, 2.4vw, 1.8rem);
  background:
    radial-gradient(circle at 13% 16%, rgb(101 232 255 / 32%), transparent 24%),
    radial-gradient(circle at 87% 22%, rgb(255 93 210 / 30%), transparent 28%),
    radial-gradient(circle at 50% 110%, rgb(129 91 255 / 48%), transparent 42%),
    radial-gradient(circle, rgb(255 255 255 / 78%) 0 .055rem, transparent .075rem) 0 0 / 1.75rem 1.75rem,
    linear-gradient(155deg, #061533, #17104a 52%, #3b125b);
  color: #f7feff;
  box-shadow:
    0 1.4rem 4rem rgb(0 0 0 / 72%),
    0 0 0 .28rem rgb(93 229 255 / 15%),
    0 0 2.4rem rgb(96 225 255 / 48%),
    inset 0 .08rem 0 rgb(255 255 255 / 48%);
}

.bonus-paytable-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  animation: bonus-paytable-arrive 260ms cubic-bezier(.2, .9, .25, 1) both;
}

.bonus-paytable-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 45%, rgb(38 45 112 / 48%), rgb(0 3 18 / 86%) 68%),
    rgb(0 3 18 / 72%);
  backdrop-filter: blur(.42rem) saturate(.72);
}

.bonus-paytable-dialog > :not(.bonus-paytable-orbit) {
  position: relative;
  z-index: 2;
}

.bonus-paytable-orbit {
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  border: .08rem solid rgb(134 238 255 / 24%);
  border-radius: 50%;
  pointer-events: none;
  translate: -50% -50%;
}

.bonus-paytable-orbit::before,
.bonus-paytable-orbit::after {
  position: absolute;
  inline-size: .48rem;
  block-size: .48rem;
  border-radius: 50%;
  background: #fff58f;
  box-shadow: 0 0 .55rem #fff, 0 0 1.1rem #6eeaff;
  content: "";
}

.bonus-paytable-orbit.is-outer {
  inline-size: 82%;
  aspect-ratio: 2.4;
  rotate: -9deg;
}

.bonus-paytable-orbit.is-outer::before {
  inset: 45% auto auto -.24rem;
}

.bonus-paytable-orbit.is-outer::after {
  inset: 45% -.24rem auto auto;
}

.bonus-paytable-orbit.is-inner {
  inline-size: 48%;
  aspect-ratio: 1.45;
  rotate: 18deg;
}

.bonus-paytable-orbit.is-inner::before {
  inset: -.24rem auto auto 50%;
}

.bonus-paytable-orbit.is-inner::after {
  inset: auto auto -.24rem 50%;
}

.bonus-paytable-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.85rem, 2vw, 1.35rem) clamp(1rem, 2.8vw, 2rem) .72rem;
  border-block-end: .08rem solid rgb(150 236 255 / 32%);
  background: linear-gradient(90deg, rgb(9 31 77 / 94%), rgb(56 21 91 / 88%));
}

.bonus-paytable-dialog > header > span {
  min-inline-size: 0;
}

.bonus-paytable-dialog > header small {
  display: block;
  margin-block-end: .28rem;
  color: #76f3ff;
  font: 850 clamp(.875rem, .58rem + .24vw, .875rem)/1 var(--mono);
  letter-spacing: .15em;
}

.bonus-paytable-dialog h2 {
  margin: 0;
  color: #fff8ae;
  font: 400 clamp(1.45rem, 1rem + 2.1vw, 2.75rem)/.95 var(--bonus-display);
  letter-spacing: -.025em;
  text-shadow: 0 .1rem 0 #681d74, 0 0 .7rem rgb(255 255 255 / 48%);
}

.bonus-paytable-close {
  flex: 0 0 auto;
  inline-size: 2.7rem;
  block-size: 2.7rem;
  border: .1rem solid #d8fbff;
  border-radius: 50%;
  background: linear-gradient(145deg, #273c85, #8e276e);
  color: #fff;
  box-shadow: 0 .16rem 0 #12072f, 0 0 .65rem rgb(114 237 255 / 48%);
  font: 800 1.55rem/1 var(--mono);
}

.bonus-paytable-intro {
  margin: 0;
  padding: .72rem clamp(1rem, 2.8vw, 2rem);
  background: rgb(4 18 52 / 76%);
  color: #eafcff;
  font: 650 clamp(.875rem, .72rem + .25vw, .95rem)/1.45 var(--mono);
}

.bonus-paytable-content {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .85rem clamp(.72rem, 2.4vw, 1.7rem) 1rem;
  scrollbar-color: #6eeaff rgb(4 17 48 / 72%);
  scrollbar-width: thin;
}

.bonus-paytable-section {
  flex: 0 0 auto;
  min-inline-size: 0;
  overflow: hidden;
  border: .08rem solid rgb(137 230 255 / 42%);
  border-radius: .82rem;
  background: rgb(4 15 45 / 76%);
  box-shadow: inset 0 .08rem 0 rgb(255 255 255 / 12%), 0 .28rem .85rem rgb(0 0 0 / 24%);
}

.bonus-paytable-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.bonus-paytable-dialog table {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: separate;
  border-spacing: .12rem;
  font: 700 clamp(.875rem, .64rem + .22vw, .875rem)/1.25 var(--mono);
}

.bonus-paytable-dialog[data-bonus-game="matrix"] .bonus-paytable-section:first-child table {
  min-inline-size: 47rem;
}

.bonus-paytable-dialog table[data-columns="2"] {
  min-inline-size: 100%;
}

.bonus-paytable-dialog caption {
  padding: .68rem .8rem .55rem;
  background: linear-gradient(90deg, rgb(22 76 131 / 88%), rgb(83 35 126 / 88%));
  color: #fff69e;
  font: 400 clamp(.9rem, .875rem + .55vw, 1.25rem)/1 var(--bonus-display);
  letter-spacing: .02em;
  text-align: start;
  text-shadow: 0 .08rem 0 #511a69;
}

.bonus-paytable-dialog :is(th, td) {
  padding: .48rem .58rem;
  border: .05rem solid rgb(158 230 255 / 25%);
  text-align: center;
}

.bonus-paytable-dialog thead th {
  background: linear-gradient(180deg, #244c91, #22255e);
  color: #aef8ff;
  font-size: max(.875rem, .82em);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bonus-paytable-dialog tbody th {
  display: flex;
  min-inline-size: 11rem;
  align-items: center;
  gap: .58rem;
  background: linear-gradient(100deg, rgb(28 47 105 / 96%), rgb(50 25 91 / 96%));
  color: #fff;
  text-align: start;
}

.bonus-paytable-dialog tbody td {
  background: rgb(7 21 58 / 90%);
  color: #fff6a0;
}

.bonus-paytable-dialog tbody tr:nth-child(even) td {
  background: rgb(29 24 76 / 92%);
}

.bonus-paytable-art {
  display: grid;
  flex: 0 0 2.75rem;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  place-items: center;
  border: .06rem solid rgb(187 243 255 / 45%);
  border-radius: .5rem;
  background: radial-gradient(circle, rgb(96 226 255 / 28%), rgb(5 15 47 / 86%));
  color: #70efff;
  font: 900 1.35rem/1 var(--bonus-display);
  box-shadow: inset 0 0 .5rem rgb(126 228 255 / 20%);
}

.bonus-paytable-art svg,
.bonus-paytable-matrix-symbol {
  inline-size: 100%;
  block-size: 100%;
}

.bonus-paytable-matrix-symbol {
  border-radius: .4rem;
}

.bonus-paytable-matrix-symbol:is([data-space-object="nasa-bar"], [data-space-object="spin-bonus"]) strong {
  font-size: .875rem;
}

.bonus-paytable-matrix-symbol:is([data-space-object="nasa-bar"], [data-space-object="spin-bonus"]) small {
  font-size: .875rem;
}

.bonus-paytable-value {
  display: inline-grid;
  justify-items: center;
  gap: .12rem;
  white-space: nowrap;
}

.bonus-paytable-value > strong {
  color: #fff39a;
  font: 400 clamp(.9rem, .875rem + .55vw, 1.25rem)/1 var(--bonus-display);
  text-shadow: 0 0 .36rem rgb(255 221 80 / 54%);
}

.bonus-paytable-value > small {
  color: #8ef6ff;
  font-size: max(.875rem, .72em);
  letter-spacing: .03em;
}

.bonus-paytable-notes {
  display: grid;
  gap: .42rem;
  margin: 0;
  padding: .72rem .85rem .72rem 2.15rem;
  border: .08rem solid rgb(255 238 129 / 34%);
  border-radius: .78rem;
  background: rgb(59 25 86 / 72%);
  color: #e9fbff;
  font: 650 clamp(.875rem, .66rem + .2vw, .875rem)/1.42 var(--mono);
}

.bonus-paytable-notes li::marker {
  color: #fff18b;
}

.bonus-paytable-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-block-size: 2.55rem;
  padding: .55rem 1rem;
  border-block-start: .08rem solid rgb(147 236 255 / 34%);
  background: linear-gradient(90deg, #092f65, #3d1a70 50%, #7b225f);
  color: #fff6a0;
  font: 850 clamp(.875rem, .56rem + .2vw, .875rem)/1.25 var(--mono);
  letter-spacing: .05em;
  text-align: center;
}

.bonus-paytable-dialog > footer > span {
  color: #75f5ff;
}

@keyframes bonus-paytable-arrive {
  from { opacity: 0; transform: translateY(.8rem) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 42rem) {
  .bonus-paytable-trigger {
    justify-self: end;
  }

  .bonus-paytable-dialog {
    inline-size: calc(100vw - .7rem);
    block-size: calc(100dvh - .7rem);
    max-block-size: none;
    border-radius: .9rem;
  }

  .bonus-paytable-dialog > header {
    padding: .72rem .78rem .58rem;
  }

  .bonus-paytable-dialog h2 {
    font-size: clamp(1.25rem, 7vw, 1.8rem);
  }

  .bonus-paytable-intro {
    padding: .58rem .78rem;
  }

  .bonus-paytable-content {
    padding: .62rem .5rem .72rem;
  }

  .bonus-paytable-dialog > footer {
    padding-inline: .55rem;
  }
}

@media (max-width: 22rem) {
  .bonus-paytable-trigger {
    inline-size: 2.75rem;
    padding-inline: .4rem;
  }

  .bonus-paytable-trigger .bonus-paytable-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bonus-paytable-dialog[open] {
    animation: none;
  }
}

html[data-battery-saver="true"] .bonus-paytable-orbit {
  display: none;
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

html[data-standalone-arcade="true"][data-arcade-frame="true"][data-arcade-chrome="playing"] .bonus-game-machine[data-entry="arcade"] {
  grid-template-rows: minmax(0, 1fr);
}

html[data-standalone-arcade="true"][data-arcade-frame="true"][data-arcade-chrome="playing"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-header {
  position: fixed;
  z-index: 62;
  inset: max(.35rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) auto auto;
  inline-size: min(calc(100% - 1rem), 31rem);
  grid-area: auto;
  padding: .24rem;
  border: .08rem solid rgb(191 246 255 / 32%);
  border-radius: 1rem;
  background: rgb(3 17 38 / 78%);
  box-shadow: 0 .45rem 1.35rem rgb(0 0 0 / 24%);
  backdrop-filter: blur(.8rem);
}

html[data-standalone-arcade="true"][data-arcade-frame="true"][data-arcade-chrome="playing"] .bonus-game-machine[data-entry="arcade"] :is(
  .bonus-scene,
  .online-original-scene
) {
  grid-row: 1;
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-header {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr);
  padding-inline: .18rem;
}

/* The standalone game runs in a non-cancelable dialog, so its own header must
   carry every destination rather than depending on the outer arcade frame. */
.standalone-arcade-nav {
  display: none;
}

html[data-standalone-arcade="true"] .standalone-arcade-nav {
  display: flex;
  grid-column: 1 / -1;
  gap: .38rem;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: .08rem .1rem .22rem;
  scrollbar-color: rgb(202 248 250 / 72%) transparent;
  scrollbar-width: thin;
}

/* arcade.html owns game switching for framed sessions, so the embedded game
   keeps only its progress header instead of repeating the same destinations. */
html[data-arcade-frame="true"] .standalone-arcade-nav {
  display: none;
}

html[data-standalone-arcade="true"] .standalone-arcade-nav a {
  display: grid;
  flex: 0 0 max-content;
  min-block-size: 2.75rem;
  padding-inline: .72rem;
  place-items: center;
  border: .08rem solid rgb(188 245 250 / 64%);
  border-radius: .68rem;
  background: rgb(4 26 53 / 84%);
  color: #f6ffff;
  font: 800 clamp(.875rem, 2.3cqi, .875rem)/1 var(--mono);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

html[data-standalone-arcade="true"] .standalone-arcade-nav a:focus-visible {
  outline: .16rem solid #fff7a0;
  outline-offset: .12rem;
}

html[data-standalone-arcade="true"] .standalone-arcade-nav a:is(:hover, :active) {
  border-color: #fff7a0;
  background: rgb(23 69 93 / 94%);
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] :is(
  .bonus-header-game-title,
  .bonus-machine-title
) {
  display: none;
}

html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] :is(
  .bonus-scene,
  .online-original-scene
) {
  grid-column: 1;
  grid-row: 2;
}

@media (min-width: 48.01rem) and (max-height: 56.25rem) {
  .bonus-game-machine:is(
    [data-entry="vortex-die"],
    [data-entry="constellation"],
    [data-entry="arcade"]
  ) {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bonus-game-machine:is(
    [data-entry="vortex-die"],
    [data-entry="constellation"],
    [data-entry="arcade"]
  ) .bonus-machine-title {
    display: none;
  }

  .bonus-game-machine:is(
    [data-entry="vortex-die"],
    [data-entry="constellation"],
    [data-entry="arcade"]
  ) :is(.bonus-scene, .online-original-scene) {
    grid-row: 2;
  }
}

@media (max-width: 42rem) {
  .bonus-machine-header {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: .18rem;
  }

  .bonus-header-game-title {
    display: none;
  }

  .bonus-machine-header .bonus-progress-marquee {
    grid-column: 1 / -1;
  }

  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-paytable-trigger {
    grid-column: 1;
  }

  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-progress-marquee {
    grid-column: 2;
    min-inline-size: 0;
  }

  .bonus-machine-header .bonus-progress-marquee > span {
    min-block-size: 2.7rem;
    padding-block: .14rem;
  }

  .bonus-machine-header .bonus-progress-marquee strong {
    font-size: clamp(1.35rem, 5.4vw, 1.75rem);
  }

  .bonus-machine-header .bonus-progress-marquee .is-win strong {
    font-size: clamp(.88rem, 3.6vw, 1.08rem);
  }
}

html[data-graphics-tier="economy"] :is(
  .bonus-screen-aurora,
  .online-game-depth,
  .starfall-impact-burst,
  .starfall-peg-spark
) {
  display: none;
}

html[data-graphics-tier="economy"] .bonus-progress-marquee::before,
html[data-graphics-tier="economy"] .bonus-game-machine::before,
html[data-graphics-tier="economy"] .bonus-game-machine::after {
  display: none;
}

html[data-graphics-tier="economy"] :is(
  .online-original-card.is-ready .online-card-art,
  #bonus-matrix-spin,
  #bonus-matrix-spin::before,
  #bonus-matrix-spin .bonus-action-label > span,
  .online-prism-charge
) {
  animation: none;
}

html[data-graphics-tier="balanced"] .bonus-progress-marquee::before {
  filter: none;
  opacity: .42;
}

/* Short mobile landscape viewports need width, rather than scarce height, to
   carry the action dock. Keep every game surface in a full-height left lane
   and place its wager/action controls in a compact right lane. */
@media (max-width: 48rem) and (max-height: 44rem) and (orientation: landscape) {
  .bonus-machine-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: clamp(.16rem, .6vw, .34rem);
    min-block-size: 3rem;
    padding-block: .06rem;
  }

  .bonus-header-game-title {
    display: none;
  }

  .bonus-machine-header .bonus-machine-back {
    grid-column: 1;
  }

  .bonus-machine-header .bonus-paytable-trigger {
    grid-column: 2;
  }

  .bonus-machine-header .bonus-progress-marquee {
    grid-column: 3;
    min-inline-size: 0;
  }

  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-machine-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-paytable-trigger {
    grid-column: 1;
  }

  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] .bonus-progress-marquee {
    grid-column: 2;
  }

  .bonus-game-machine,
  html[data-standalone-arcade="true"] .bonus-game-machine[data-entry="arcade"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bonus-game-machine .bonus-machine-title {
    display: none;
  }

  .bonus-game-machine :is(.bonus-scene, .online-original-scene) {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .72fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    column-gap: clamp(.4rem, 1.2vw, .8rem);
    overflow: hidden;
  }

  .bonus-game-machine :is(
    .bonus-wheel-scene > .galactic-wheel-stage,
    .bonus-matrix-scene > .wormhole-machine,
    .online-original-scene > .online-game-stage
  ) {
    grid-column: 1;
    grid-row: 1 / -1;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    align-self: stretch;
  }

  .bonus-game-machine :is(.bonus-scene, .online-original-scene) > .bonus-action-row {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .bonus-game-machine :is(.bonus-scene, .online-original-scene) > .bonus-scene-status,
  .bonus-game-machine .online-original-scene > .online-game-meter {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .bonus-game-machine[data-bonus-game="wheel"] .galactic-wheel-stage {
    inline-size: min(100cqw, 100cqh);
    justify-self: center;
  }

  .bonus-game-machine:is(
    [data-bonus-game="dice"],
    [data-bonus-game="bingo"]
  ) :is(.online-game-feature-bar, .online-game-meter) {
    display: none;
  }

  .bonus-game-machine:is(
    [data-bonus-game="dice"],
    [data-bonus-game="bingo"]
  ) .online-game-stage {
    grid-template-rows: minmax(0, 1fr);
  }
}

/*
 * Hidden dialogs must not be the sizing source for a size-contained playfield.
 * Each game reserves a viewport-bounded intrinsic block size in CSS, so its
 * field is visible on the first layout pass without a post-open hide/show or
 * forced reflow. The field may still grow into the scene's flexible grid row.
 */
.bonus-game-machine[data-bonus-game="wheel"] {
  --bonus-playfield-intrinsic-block-size: clamp(12rem, 40dvb, 34rem);
}

.bonus-game-machine[data-bonus-game="matrix"] {
  --bonus-playfield-intrinsic-block-size: clamp(10rem, 36dvb, 30rem);
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="starfalldrop"]
) {
  --bonus-playfield-intrinsic-block-size: clamp(14rem, 44dvb, 38rem);
}

.bonus-game-machine:is(
  [data-bonus-game="dice"],
  [data-bonus-game="bingo"]
) {
  --bonus-playfield-intrinsic-block-size: clamp(12rem, 40dvb, 34rem);
}

.bonus-game-machine[data-bonus-game] :is(
  .bonus-wheel-scene > .galactic-wheel-stage,
  .bonus-matrix-scene > .wormhole-machine,
  .online-original-scene > .online-game-stage
) {
  min-block-size: var(--bonus-playfield-intrinsic-block-size);
  contain-intrinsic-block-size: var(--bonus-playfield-intrinsic-block-size);
}

/* Prism Cascade wide-screen reactor layout.
 * Moving the control dock into a dedicated side rail lets the flexible stage
 * consume the scene's complete block axis. Narrow and portrait screens retain
 * the stacked dock so neither the reactor nor its controls become cramped. */
@media (min-width: 64rem) and (orientation: landscape) {
  .bonus-game-machine[data-bonus-game="cascade"] .online-original-scene {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, .38fr);
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    column-gap: clamp(.6rem, 1.4cqi, 1.1rem);
  }

  .bonus-game-machine[data-bonus-game="cascade"] .online-original-scene > .online-game-stage {
    grid-column: 1;
    grid-row: 1;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    align-self: stretch;
  }

  .bonus-game-machine[data-bonus-game="cascade"] .online-original-scene > .bonus-action-row {
    grid-column: 2;
    grid-row: 1;
    inline-size: 100%;
    max-inline-size: 24rem;
    align-self: center;
  }
}

/* Suite review: a zero result is an explicit resolved state, not a return to
   READY. Color, symbol, and wording distinguish it without relying on color. */
.bonus-progress-marquee > .is-win[data-outcome-tone="miss"] {
  border-color: rgba(255, 177, 171, 0.86);
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(160deg, #713b4a, #541f47 54%, #291b3d);
  box-shadow:
    inset 0 0.08rem 0 rgba(255, 255, 255, 0.3),
    inset 0 -0.32rem 0.68rem rgba(29, 6, 48, 0.42),
    0 0 0.6rem rgba(255, 112, 120, 0.28);
}

.bonus-progress-marquee > .is-win[data-outcome-tone="miss"]::before {
  border-color: rgba(255, 190, 184, 0.72);
  background: rgba(80, 19, 48, 0.72);
  color: #ffd3cd;
}

.bonus-progress-marquee > .is-win[data-outcome-tone="miss"] strong {
  color: #fff0ed;
  text-shadow: 0 0.12rem 0 #4f172b, 0 0 0.42rem rgba(255, 177, 171, 0.66);
}

/*
 * Emergency rendering floor.
 *
 * Survival keeps result-bearing transforms and DOM in place, but removes
 * decorative CSS motion and the most expensive paint effects. JavaScript and
 * Matter fallbacks still place every selected result in its final position.
 */
html[data-graphics-tier="survival"] :is(
  .bonus-screen-aurora,
  .online-game-depth,
  .starfall-impact-burst,
  .starfall-peg-spark,
  .galactic-wheel-core-orbit,
  .galactic-wheel-core-sweep,
  .bonus-win-ray,
  .bonus-win-particle
) {
  display: none !important;
}

html[data-graphics-tier="survival"] :is(
  .bonus-progress-marquee::before,
  .bonus-game-machine::before,
  .bonus-game-machine::after,
  .matrix-symbol-cell.is-match-active::after
) {
  display: none !important;
}

html[data-graphics-tier="survival"] .bonus-game-machine,
html[data-graphics-tier="survival"] .bonus-game-machine *,
html[data-graphics-tier="survival"] .bonus-game-machine *::before,
html[data-graphics-tier="survival"] .bonus-game-machine *::after {
  filter: none !important;
  text-shadow: none !important;
}

html[data-graphics-tier="survival"] .bonus-game-machine *,
html[data-graphics-tier="survival"] .bonus-game-machine *::before,
html[data-graphics-tier="survival"] .bonus-game-machine *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
}

html[data-graphics-tier="survival"] :is(
  .bonus-game-machine,
  .bonus-progress-marquee,
  .bonus-scene,
  .online-original-card,
  .matrix-symbol-cell,
  .starfall-bin,
  .quantum-die,
  .orbit-bingo-cell
) {
  box-shadow: none !important;
}