/*
 * Original Vortangle online bonus games.
 * Screen-first playfields, with no physical cabinet or machine silhouette.
 */
.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 .64rem/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: .74rem;
  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-plinko, .is-bingo) {
  --online-card-accent: #ffd866;
  --online-card-shadow: #704d22;
}

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

.online-original-card:is(.is-vault, .is-scratch) {
  --online-card-accent: #aa98ff;
  --online-card-shadow: #43377e;
}

.online-original-card.is-rocket {
  --online-card-accent: #ff9a68;
  --online-card-shadow: #70382a;
}

.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 .65rem/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 .58rem/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: .68rem;
  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 .58rem/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: .69rem;
  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="plinko"], [data-bonus-game="bingo"]) {
  --machine-accent: #ffdf68;
  --machine-secondary: #68eaf1;
}

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

.bonus-game-machine:is([data-bonus-game="vault"], [data-bonus-game="scratch"]) {
  --machine-accent: #af9bff;
  --machine-secondary: #6ff1ea;
}

.bonus-game-machine[data-bonus-game="rocket"] {
  --machine-accent: #ff9b68;
  --machine-secondary: #ffe36b;
}

.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 .54rem/1 var(--mono);
  letter-spacing: .08em;
}

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

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

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

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

.online-game-choices {
  z-index: 5;
  display: grid;
  inline-size: min(34rem, calc(100% - 1rem));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  justify-self: center;
  padding-block-end: .7rem;
}

.online-game-choices[hidden] {
  display: none;
}

.online-game-choices button {
  min-block-size: 4rem;
  padding: .5rem;
  border: .08rem solid rgb(255 255 255 / 74%);
  border-radius: .8rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--machine-accent), white 20%), var(--machine-accent));
  color: #173444;
  box-shadow:
    0 .24rem 0 color-mix(in oklab, var(--machine-accent), black 58%),
    inset 0 .08rem 0 rgb(255 255 255 / 64%);
  cursor: pointer;
}

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

.online-game-choices button:active {
  transform: translateY(.14rem) scale(.98);
}

.online-game-choices button span,
.online-game-choices button strong {
  display: block;
}

.online-game-choices button span {
  margin-block-end: .16rem;
  font: 950 1rem/1 var(--mono);
}

.online-game-choices button strong {
  font-size: .62rem;
}

.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 .78rem/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%);
  border-radius: .75rem;
  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 {
  animation: online-prism-tumble 700ms var(--bonus-spring) both;
  animation-delay: calc(var(--cell-order) * 18ms);
}

.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 Plinko */
.online-plinko-board {
  position: relative;
  inline-size: min(30rem, 96%);
  block-size: min(20rem, 39dvh);
  min-block-size: 15rem;
}

.online-plinko-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-plinko-pegs i {
  inline-size: .5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .65rem var(--machine-secondary);
}

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

.online-plinko-launch,
.online-plinko-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-plinko-token {
  --landing-x: 0rem;
}

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

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

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

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

.online-plinko-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 .7rem/1 var(--mono);
}

.online-plinko-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-die {
  display: grid;
  inline-size: 100%;
  aspect-ratio: 1;
  place-items: center;
  border: .1rem solid rgb(255 255 255 / 82%);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 32% 22%, #fff, transparent 25%),
    linear-gradient(145deg, #ffb5e1, #c475e8 54%, #5e65ce);
  color: #291d55;
  box-shadow:
    0 .45rem 0 #493674,
    0 1rem 2rem rgb(0 0 0 / 30%),
    inset 0 .12rem 0 rgb(255 255 255 / 75%);
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
}

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

.online-dice-field.is-rolling .online-die:first-child {
  animation: online-die-roll 900ms var(--bonus-spring) both;
}

.online-dice-field.is-rolling .online-die:nth-child(2) {
  animation: online-die-roll 900ms 80ms var(--bonus-spring) both reverse;
}

/* Nova Vaults */
.online-vault-field {
  display: grid;
  inline-size: min(32rem, 96%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  perspective: 50rem;
}

.online-vault-field > span {
  position: relative;
  display: grid;
  aspect-ratio: .78;
  place-content: center;
  border: .1rem solid rgb(255 255 255 / 58%);
  border-radius: 5rem 5rem .8rem .8rem;
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 20%), transparent 22%),
    linear-gradient(145deg, #735ed0, #33266f 68%, #181844);
  box-shadow: 0 .4rem 0 #282052, inset 0 0 1.4rem rgb(113 241 235 / 20%);
  text-align: center;
}

.online-vault-field.is-powered > span {
  box-shadow:
    0 .4rem 0 #282052,
    0 0 1rem color-mix(in oklab, var(--machine-accent), transparent 45%),
    inset 0 0 1.4rem rgb(113 241 235 / 34%);
}

.online-vault-field :is(i, b) {
  display: block;
  font-style: normal;
}

.online-vault-field i {
  color: #aefbf1;
  font: 950 clamp(1.5rem, 5vw, 2.7rem)/1 var(--mono);
}

.online-vault-field b {
  margin-block-start: .35rem;
  color: #fff;
  font: 900 .62rem/1 var(--mono);
  letter-spacing: .12em;
}

.online-vault-field > span.is-open {
  border-color: #fff19b;
  background: radial-gradient(circle, #fff6bc, #ffbb5d 36%, #e64ca8 70%, #4e2e86);
  box-shadow: 0 0 2rem #ffdd6d;
  animation: online-vault-open 620ms var(--bonus-spring) both;
}

/* Rift Rocket */
.online-rocket-field {
  position: relative;
  display: grid;
  inline-size: min(32rem, 96%);
  block-size: min(20rem, 38dvh);
  place-content: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgb(255 233 127 / 10%) 19% 20%, transparent 21% 34%, rgb(255 141 91 / 12%) 35% 36%, transparent 37%),
    conic-gradient(from 20deg, transparent, rgb(255 151 97 / 18%), transparent 28%, rgb(255 225 102 / 16%), transparent 58%);
  text-align: center;
}

.online-rift-trail {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 78%;
  block-size: .22rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, transparent, #ff9768 58%, #fff09a);
  box-shadow: 0 0 1rem #ff9b68;
  transform: translate(-50%, -50%) rotate(-28deg);
}

.online-rocket-ship {
  position: absolute;
  z-index: 2;
  inset: 30% auto auto 63%;
  color: #fff;
  filter: drop-shadow(0 0 .7rem #ff9b68);
  font-size: clamp(2.2rem, 8vw, 4rem);
  transform: rotate(-28deg);
}

.online-rocket-field.is-flying .online-rocket-ship {
  animation: online-rocket-flight 900ms ease-in-out infinite alternate;
}

.online-rocket-field strong {
  z-index: 3;
  color: #fff;
  font: 1000 clamp(3rem, 12vw, 6.5rem)/.9 var(--mono);
  letter-spacing: -.1em;
  text-shadow: 0 0 1.2rem #ff7d69;
}

.online-rocket-field small {
  z-index: 3;
  margin-block-start: .55rem;
  color: #fff1a3;
  font: 900 .66rem/1 var(--mono);
  letter-spacing: .1em;
}

.online-rocket-field.is-crashed {
  filter: saturate(.35);
}

/* Nebula Scratch */
.online-scratch-signal {
  display: flex;
  inline-size: min(30rem, 90%);
  align-items: center;
  justify-content: center;
  gap: .7rem;
}

.online-scratch-signal span {
  display: grid;
  inline-size: clamp(4rem, 13vw, 7rem);
  aspect-ratio: 1;
  place-items: center;
  border: .1rem solid rgb(255 255 255 / 65%);
  border-radius: 50%;
  background: linear-gradient(145deg, #836ddc, #302369);
  color: #fff;
  box-shadow: 0 0 1rem #8670df;
  font: 950 clamp(2rem, 6vw, 3.8rem)/1 var(--mono);
}

.online-scratch-signal i {
  flex: 1;
  block-size: .08rem;
  background: linear-gradient(90deg, transparent, var(--machine-accent), transparent);
}

.online-scratch-signal strong {
  color: #fff09e;
  font: 950 .82rem/1 var(--mono);
}

.online-game-choices .online-scratch-panel {
  min-block-size: 4.8rem;
  background:
    repeating-linear-gradient(125deg, rgb(255 255 255 / 14%) 0 .18rem, transparent .18rem .38rem),
    linear-gradient(145deg, #8e79e8, #51429e);
}

.online-game-choices .online-scratch-panel.is-revealed {
  background: radial-gradient(circle, #fff5ad, #ffb55c 54%, #e450aa);
  color: #4b2f5f;
}

/* Solar Ladder */
.online-solar-ladder {
  display: grid;
  inline-size: min(32rem, 96%);
  gap: .38rem;
}

.online-solar-ladder > span {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  opacity: .45;
}

.online-solar-ladder i {
  block-size: .12rem;
  background: linear-gradient(90deg, transparent, rgb(255 143 207 / 70%));
}

.online-solar-ladder i:last-child {
  background: linear-gradient(90deg, rgb(255 216 106 / 70%), transparent);
}

.online-solar-ladder b {
  display: grid;
  min-inline-size: 7rem;
  min-block-size: 2.8rem;
  place-items: center;
  border: .08rem solid rgb(255 255 255 / 42%);
  border-radius: 99rem;
  background: rgb(39 24 75 / 74%);
  color: #f6d7ec;
  font: 900 .62rem/1 var(--mono);
}

.online-solar-ladder > span:is(.is-current, .is-cleared) {
  opacity: 1;
}

.online-solar-ladder > span.is-current b {
  border-color: #fff;
  background: linear-gradient(90deg, #ff86cb, #ffdd69);
  color: #4f2c57;
  box-shadow: 0 0 1.2rem #ff9acb;
  animation: online-ladder-current 1.3s ease-in-out infinite alternate;
}

.online-solar-ladder > span.is-cleared b {
  border-color: #b6f9dd;
  background: #216c6b;
  color: #fff;
}

/* 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: .7rem;
  font-style: normal;
  opacity: 0;
}

.online-bingo-grid > span.is-drawn {
  border-color: #fff;
  background: radial-gradient(circle at 38% 28%, #fffbd1, #ffda64 38%, #f582a9 72%);
  color: #603957;
  box-shadow: 0 0 1.3rem #ffdb69;
  animation: online-bingo-draw 520ms 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-tumble {
  from { opacity: 0; transform: translateY(-2.5rem) rotateX(48deg) scale(.74); }
  72% { opacity: 1; transform: translateY(.12rem) rotateX(-4deg) scale(1.03); }
  to { opacity: 1; transform: translateY(0) rotateX(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-plinko-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-die-roll {
  0% { opacity: .6; transform: translateY(-1.5rem) rotateX(0) rotateY(0) scale(.78); }
  70% { opacity: 1; transform: translateY(.2rem) rotateX(390deg) rotateY(280deg) scale(1.06); }
  to { opacity: 1; transform: translateY(0) rotateX(360deg) rotateY(360deg) scale(1); }
}

@keyframes online-vault-open {
  0% { transform: rotateY(0) scale(1); }
  54% { transform: rotateY(16deg) scale(1.08); }
  to { transform: rotateY(0) scale(1); }
}

@keyframes online-rocket-flight {
  to { transform: translate(.8rem, -.65rem) rotate(-24deg) scale(1.08); }
}

@keyframes online-ladder-current {
  to { filter: brightness(1.1); transform: scale(1.025); }
}

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

@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-game-choices {
    gap: .3rem;
  }

  .online-game-choices button {
    min-block-size: 3.4rem;
    padding: .32rem;
  }

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

  .online-die {
    border-radius: 1rem;
    font-size: 3.8rem;
  }

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

  .online-vault-field {
    gap: .35rem;
  }
}

@media (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-plinko-token.is-dropping,
  .online-dice-field.is-rolling .online-die,
  .online-vault-field > span.is-open,
  .online-rocket-field.is-flying .online-rocket-ship,
  .online-solar-ladder > span.is-current b,
  .online-bingo-grid > span.is-drawn {
    animation: none;
  }

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

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

/* Original top-of-screen progress marquee inspired by the clarity of modern
   digital bonus games: huge values, distinct tiers, no money framing. */
.bonus-game-machine {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.bonus-progress-marquee {
  position: relative;
  z-index: 7;
  display: grid;
  inline-size: min(60rem, 100%);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .9fr);
  justify-self: center;
  align-items: stretch;
  gap: clamp(.25rem, .8vw, .7rem);
  padding: clamp(.2rem, .5vw, .42rem);
  border: .12rem solid #fff;
  border-radius: clamp(.8rem, 1.5vw, 1.3rem);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 22%), transparent 18% 82%, rgb(255 255 255 / 18%)),
    #080c2b;
  box-shadow:
    0 .34rem 0 #020719,
    0 .75rem 1.5rem rgb(0 0 0 / 52%),
    0 0 1.2rem color-mix(in oklab, var(--machine-accent), transparent 36%),
    inset 0 .08rem 0 rgb(255 255 255 / 34%);
  isolation: isolate;
}

.bonus-progress-marquee::before {
  position: absolute;
  z-index: -1;
  inset: -1rem 8%;
  background: radial-gradient(ellipse, color-mix(in oklab, var(--machine-accent), transparent 48%), transparent 68%);
  content: "";
  filter: blur(.75rem);
  opacity: .78;
}

.bonus-progress-marquee > span {
  position: relative;
  display: grid;
  min-inline-size: 0;
  place-items: center;
  align-content: center;
  gap: .12rem;
  overflow: hidden;
  padding: clamp(.38rem, .7dvh, .65rem) clamp(.2rem, .8vw, .7rem);
  border: .1rem solid rgb(255 255 255 / 86%);
  border-radius: clamp(.55rem, 1vw, .9rem);
  background:
    radial-gradient(circle at 30% 12%, rgb(255 255 255 / 42%), transparent 28%),
    linear-gradient(160deg, #1c73b9, #22267a 58%, #47166d);
  box-shadow:
    inset 0 .1rem 0 rgb(255 255 255 / 48%),
    inset 0 -.35rem .7rem rgb(1 4 28 / 42%),
    0 0 .75rem rgb(63 155 255 / 35%);
}

.bonus-progress-marquee > span.is-win {
  background:
    radial-gradient(circle at 28% 12%, rgb(255 255 255 / 56%), transparent 25%),
    linear-gradient(160deg, #ffef6f, #ff8a4e 54%, #e12e91);
  box-shadow:
    inset 0 .1rem 0 rgb(255 255 255 / 72%),
    inset 0 -.38rem .72rem rgb(95 13 69 / 36%),
    0 0 1.05rem rgb(255 125 79 / 52%);
}

.bonus-progress-marquee > span.is-balance {
  background:
    radial-gradient(circle at 28% 12%, rgb(255 255 255 / 48%), transparent 25%),
    linear-gradient(160deg, #9cf267, #19bda9 56%, #0a6797);
  box-shadow:
    inset 0 .1rem 0 rgb(255 255 255 / 62%),
    inset 0 -.38rem .72rem rgb(2 61 80 / 38%),
    0 0 .9rem rgb(63 238 194 / 42%);
}

.bonus-progress-marquee small {
  color: #fff;
  font: 1000 clamp(.48rem, .42rem + .24vw, .7rem)/1 var(--mono);
  letter-spacing: .1em;
  text-align: center;
  text-shadow: 0 .1rem .18rem rgb(0 0 0 / 72%);
}

.bonus-progress-marquee strong {
  display: flex;
  min-inline-size: 0;
  align-items: baseline;
  justify-content: center;
  gap: .32rem;
  color: #fff;
  font: 1000 clamp(1.55rem, 1rem + 2.7vw, 3.6rem)/.82 var(--mono);
  letter-spacing: -.075em;
  text-shadow:
    0 .12rem 0 rgb(5 16 54 / 74%),
    0 0 .48rem rgb(255 255 255 / 48%);
}

.bonus-progress-marquee .is-win strong {
  color: #fffbe4;
  font-size: clamp(1.85rem, 1.1rem + 3.4vw, 4.25rem);
  text-shadow:
    0 .14rem 0 #8a254c,
    0 0 .55rem #fff;
}

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

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

.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;
}

/* 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 18% 42%, rgb(255 224 75 / 46%), transparent 24%),
    radial-gradient(circle at 84% 36%, rgb(50 245 235 / 42%), transparent 27%),
    radial-gradient(circle at 50% 94%, rgb(232 59 177 / 42%), transparent 38%),
    linear-gradient(145deg, #063b70 0%, #13135e 52%, #5b145d 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[data-bonus-game="probe"] {
  background:
    radial-gradient(circle at 16% 42%, rgb(202 255 83 / 40%), transparent 25%),
    radial-gradient(circle at 85% 34%, rgb(61 236 255 / 48%), transparent 28%),
    radial-gradient(circle at 50% 94%, rgb(61 123 255 / 40%), transparent 38%),
    linear-gradient(145deg, #064868 0%, #0c2458 54%, #251164 100%);
}

.bonus-game-machine:is(
  [data-bonus-game="cascade"],
  [data-bonus-game="plinko"],
  [data-bonus-game="dice"],
  [data-bonus-game="vault"],
  [data-bonus-game="rocket"],
  [data-bonus-game="scratch"],
  [data-bonus-game="ladder"],
  [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-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) {
  display: none;
}

html[data-battery-saver="true"] :is(
  .online-original-card.is-ready .online-card-art,
  .online-rocket-field.is-flying .online-rocket-ship,
  .online-solar-ladder > span.is-current b
) {
  animation: none;
}

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

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

/*
 * 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 p {
  color: #d1e8eb;
  font-size: clamp(.78rem, .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 - 17.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 {
  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(clamp(-15rem, -21dvw, -6.8rem))
    rotate(calc(var(--segment-angle) * -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"],
.galactic-wheel > span[data-bonus-symbol="probe"] { color: #006d70; }
.galactic-wheel > span[data-bonus-symbol="hyper"] { color: #71289c; }
.galactic-wheel > span[data-bonus-symbol="orbit"] { color: #236c25; }

.galactic-wheel-pointer {
  inline-size: clamp(3.3rem, 7dvw, 4.8rem);
  block-size: clamp(4.3rem, 8.8dvw, 6.1rem);
}

.wormhole-machine,
.planetary-system {
  inline-size: min(50rem, 96%, calc(100dvh - 19rem));
}

.wormhole-machine {
  min-block-size: clamp(17rem, 47dvh, 31rem);
}

.planetary-system {
  max-block-size: min(53dvh, 38rem);
}

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

.online-game-stage {
  inline-size: min(76rem, 100%);
  block-size: clamp(18rem, calc(100dvh - 18rem), 48rem);
  min-block-size: 18rem;
  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(.78rem, .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-plinko-board {
  inline-size: min(38rem, 96%);
  block-size: min(28rem, 49dvh);
}

.online-plinko-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-vault-field,
.online-rocket-field,
.online-solar-ladder {
  inline-size: min(46rem, 96%);
}

.online-rocket-field {
  block-size: min(29rem, 49dvh);
}

.online-scratch-signal {
  inline-size: min(42rem, 94%);
}

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

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

.bonus-action-row > :is(.bonus-launch-button, .bonus-auto-spin-button) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 4rem;
  margin: 0;
}

.bonus-auto-spin-button {
  border-color: rgb(255 255 255 / 88%);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--machine-secondary), white 30%), var(--machine-secondary));
  color: #102c3b;
  font-weight: 950;
}

.bonus-auto-spin-button[aria-pressed="true"] {
  border-color: #fff3a0;
  background: linear-gradient(180deg, #fff3a0, #ff9a70);
  color: #3f2030;
}

@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 - 16.5rem));
  }

  .galactic-wheel > span {
    transform:
      translate(-50%, -50%)
      rotate(var(--segment-angle))
      translateY(clamp(-9.4rem, -28dvw, -6.25rem))
      rotate(calc(var(--segment-angle) * -1));
  }

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

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

  .bonus-action-row > :is(.bonus-launch-button, .bonus-auto-spin-button) {
    min-block-size: 3.65rem;
    padding-inline: .55rem;
    font-size: .76rem;
  }

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

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

  .wormhole-machine,
  .planetary-system {
    inline-size: min(70dvh, 36rem, 96%);
  }

  .wormhole-machine {
    min-block-size: min(56dvh, 22rem);
  }

  .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(.54rem, 1.35cqi, .72rem)/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;
}

.wormhole-machine {
  border-color: #f7fbff;
  background:
    radial-gradient(circle at 50% 18%, #c47cff 0%, rgb(196 124 255 / 35%) 24%, transparent 36%),
    linear-gradient(150deg, #536fc0, #20165e 46%, #702c83);
  box-shadow:
    0 .65rem 0 #0b1034,
    0 1.25rem 2.4rem rgb(0 0 0 / 56%),
    0 0 2.4rem rgb(185 100 255 / 54%),
    inset 0 .2rem 0 rgb(255 255 255 / 44%);
}

.wormhole-reels {
  border-color: #fff;
  background: linear-gradient(#0d3263, #040d26);
  box-shadow:
    0 .42rem 0 #6f4ed4,
    0 0 1.7rem rgb(139 107 255 / 88%),
    inset 0 .16rem 0 rgb(255 255 255 / 32%);
}

.wormhole-reel {
  border-width: .17rem;
  border-color: #fff;
  background:
    radial-gradient(circle at 50% 42%, #fff 0 25%, #eefeff 58%, #9ddce7 100%);
  box-shadow:
    inset 0 .25rem .7rem rgb(15 50 77 / 18%),
    0 .34rem 0 #222b66,
    0 0 .75rem rgb(151 239 255 / 46%);
}

.wormhole-reel .bonus-symbol {
  inline-size: 74%;
  block-size: 74%;
  filter:
    drop-shadow(0 .12rem 0 #fff)
    drop-shadow(0 .25rem .18rem rgb(3 12 42 / 52%));
}

.wormhole-reel[data-bonus-symbol="asteroid"] { color: #26355f; }
.wormhole-reel[data-bonus-symbol="plasma"] { color: #6127cf; }
.wormhole-reel[data-bonus-symbol="supernova"] { color: #a94d00; }
.wormhole-reel[data-bonus-symbol="rift"] { color: #006591; }
.wormhole-reel[data-bonus-symbol="stardust"] { color: #9a5300; }

.wormhole-reel.is-spinning {
  animation-duration: 420ms;
}

.wormhole-reel.is-spinning .bonus-symbol {
  animation-duration: 420ms;
}

.wormhole-reel.is-landing {
  animation-duration: 680ms;
}

.wormhole-reel.is-landing .bonus-symbol {
  animation: matrix-cosmic-symbol-lock 680ms cubic-bezier(.18, 1.35, .3, 1) both;
}

.wormhole-reel:nth-child(2).is-landing .bonus-symbol {
  animation-delay: 80ms;
}

.wormhole-reel:nth-child(3).is-landing .bonus-symbol {
  animation-delay: 160ms;
}

.matrix-round-meter,
.probe-round-meter {
  border-color: rgb(217 252 255 / 72%);
  background: #03172e;
  color: #fff;
}

.matrix-round-meter strong,
.probe-round-meter strong,
.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%);
}

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

.planetary-system {
  border-color: #fff;
  filter: saturate(1.24) contrast(1.08);
}

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

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

.online-game-choices button {
  border-width: .13rem;
  border-color: #fff;
  filter: saturate(1.12) contrast(1.04);
}

.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); }
}

@keyframes matrix-cosmic-symbol-lock {
  0% { opacity: .38; transform: translateY(-1rem) rotate(-12deg) scale(.62); filter: brightness(2.2) blur(.08rem); }
  52% { opacity: 1; transform: translateY(.1rem) rotate(4deg) scale(1.18); filter: brightness(1.7) drop-shadow(0 0 .85rem currentColor); }
  76% { transform: translateY(-.05rem) rotate(-2deg) scale(.96); filter: brightness(1.16) drop-shadow(0 0 .45rem currentColor); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: drop-shadow(0 .12rem 0 #fff) drop-shadow(0 .25rem .18rem rgb(3 12 42 / 52%)); }
}

@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-turn-counter strong.is-counting {
    animation-duration: 1ms;
  }

  .wormhole-reel.is-landing .bonus-symbol {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}