@import './tokens.css';

* {
  box-sizing: border-box;
}

button,
[role="button"],
a,
input,
select,
textarea {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  color: var(--text);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 500;
  background: #151515;
}

body.asset-pack-train {
  --train-wes-ink: #25183d;
  --train-wes-pine: #2f6656;
  --train-wes-sage: #8fb99f;
  --train-wes-cream: #f4d9a6;
  --train-wes-sand: #d8ad78;
  --train-wes-clay: #b15f45;
  --train-wes-rust: #8f3d36;
  --train-wes-dust: rgba(246, 217, 166, 0.62);
}

body::before {
  display: none;
}

body.booting .scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #151515;
  transition: opacity 0.28s ease;
}

.boot-loader.done {
  opacity: 0;
  pointer-events: none;
}

.boot-loader-card {
  width: min(300px, calc(100vw - 64px));
}

/* The whole wordmark is the progress bar: a dim copy underneath and a bright
   copy above it, revealed left to right by width. Both layers are the same SVG. */
.boot-brand {
  position: relative;
  width: 100%;
  aspect-ratio: 568 / 102;
}

.boot-brand-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

.boot-brand-base {
  opacity: 0.22;
}

.boot-brand-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  transition: width 0.18s ease;
}

/* The revealed copy holds the full mark's width, so the growing box wipes
   across it instead of squashing it. */
.boot-brand-fill .boot-brand-layer {
  width: min(300px, calc(100vw - 64px));
}

.scene {
  --bonus-mult-value-font-size: clamp(90px, 8.4vw, 125px);
  --bonus-mult-game-font-size: clamp(26px, 5vw, 50px);
  --bonus-mult-game-top: 60px;
  --bonus-mult-value-top: calc(50px + var(--bonus-mult-game-font-size));
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  animation: settle 0.7s ease-out both;
}

@keyframes settle {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.topbar {
  display: grid;
  grid-template-columns: 461px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.brand {
  width: clamp(132px, 11vw, 158px);
  margin: 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.glassy {
  background: rgba(21, 21, 21, 0.8); /* Neutral 950 @ 80% — keeps slight translucency over the sky */
  border: 1px solid #2a2a2a; /* Neutral 875 */
  border-radius: 10px;
  padding: 6px;
}

.history-strip,
.utility-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-strip {
  justify-self: start;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  padding: 7px;
}

.history-chip {
  border: 1px solid #525252;
  background: var(--chip);
  color: #f3f3f3;
  border-radius: 8px;
  height: 27px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.history-chip.warm {
  color: #ffcf6b;
}

.history-chip.green {
  color: #35cf58;
}

.history-chip.lime {
  color: #a0e03b;
}

.history-chip.icon-chip {
  width: 29px;
  padding: 0;
  color: #a4a4a4;
}

.history-chip svg {
  width: 15px;
  height: 15px;
}

.utility-chip {
  width: 28px;
  height: 27px;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.utility-chip img {
  width: 16px;
  height: 16px;
}

.mobile-left-icons {
  display: none;
}

.mobile-tab-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #525252;
  background: #303030;
  color: #a0a0a0;
  border-radius: 8px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mobile-tab-btn svg {
  width: 18px;
  height: 18px;
}

.mobile-tab-btn.active {
  background: #343434;
  color: #ffffff;
  border-color: #6a6a6a;
}

.mobile-tab-btn:hover,
.mobile-tab-btn:focus-visible {
  background: #3a3a3a;
  color: #ffffff;
  border-color: #6a6a6a;
  outline: none;
}

.mobile-history-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}

/* The header chips are filled by JS; display:contents lets them flow as direct
   flex items of .mobile-history-right so each can be measured and hidden to fit. */
.header-history-chips {
  display: contents;
}

.mobile-history-right .history-chip {
  flex: 0 0 auto;
}

.live-bets-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f3f3f3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.live-bets-summary.hidden {
  display: none;
}

.live-bets-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-bets-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #525252;
  border-radius: 8px;
  background: #303030;
  color: #a0a0a0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.live-bets-icon svg {
  width: 18px;
  height: 18px;
}

.live-bets-total {
  color: #00f66f;
  white-space: nowrap;
}

.mobile-live-bets-summary {
  display: none;
}

.layout {
  display: grid;
  grid-template-columns: 461px minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.shell-panel {
  background: var(--shell);
  border-radius: var(--radius);
}

.sidebar {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid #151515;
  background: #151515;
  border-radius: 12px;
  overflow: hidden;
}

.tab {
  border: 0;
  background: #151515;
  color: #a0a0a0;
  font: inherit;
  font-size: 13px;
  padding: 8px 0;
  cursor: pointer;
}

.tab.active {
  background: #434343;
  color: #ffffff;
  border-radius: 10px;
}

.topbets-filters {
  display: grid;
  gap: 0;
  margin-bottom: 8px;
}

.topbets-row {
  display: grid;
  border: 2px solid #151515;
  background: #151515;
  border-radius: 12px;
  overflow: hidden;
}

.topbets-row.topbets-row-metric {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topbets-row.topbets-row-range {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topbets-row + .topbets-row {
  margin-top: 8px;
}

.topbets-pill {
  border: 0;
  background: #151515;
  color: #a0a0a0;
  font: inherit;
  font-size: 13px;
  padding: 8px 0;
  border-radius: 0;
  cursor: pointer;
}

.topbets-pill.active {
  background: #343434;
  color: #ffffff;
  border-radius: 10px;
}

.topbets-pill:not(.active):hover,
.topbets-pill:not(.active):focus-visible {
  background: #1f1f1f;
  color: #f3f3f3;
  outline: none;
}

.previous-result {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 96px;
  padding: 10px 6px;
  background: transparent;
  border: 0;
}

.previous-result-label {
  margin: 0;
  color: #a0a0a0;
  font-size: 13px;
  line-height: 1;
}

.previous-result-value {
  margin: 0;
  font-size: clamp(44px, 5.6vw, 62px);
  line-height: 0.9;
}

.previous-result-value.green {
  color: #35cf58;
}

.previous-result-value.lime {
  color: #97f049;
}

.previous-result-value.warm {
  color: #ffcf6b;
}

.card-panel {
  background: #272727;
  border: 1px solid #3f3f3f;
  border-radius: var(--radius);
}

.players {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

/* The player count moved into the game stage and the total is hidden here,
   so this summary bar is empty — collapse it to remove the gap above the list. */
.sidebar-live-bets-summary {
  display: none;
}

.sidebar-live-bets-summary .live-bets-count {
  gap: 7px;
}

.sidebar-live-bets-summary .live-bets-icon {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sidebar-live-bets-summary .live-bets-total {
  display: none;
}

.player-row {
  height: 30px;
  border-bottom: 1px solid #3f3f3f;
  border-radius: 0;
  background: #272727;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  column-gap: 8px;
  font-size: 13px;
}

.player-row:nth-child(1),
.player-row:nth-child(2) {
  height: 28px;
}

.player-row.has-datetime,
.player-row.has-datetime:nth-child(1),
.player-row.has-datetime:nth-child(2) {
  height: 42px;
}

.user-meta {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.user-main {
  line-height: 1;
}

.user-time {
  font-size: 10px;
  color: #a0a0a0;
  line-height: 1;
}


.player-row:last-child {
  border-bottom: 1px solid #3f3f3f;
}

.user {
  color: var(--muted);
  text-transform: none;
}

.multi {
  text-align: center;
  color: var(--muted);
}

.multi.hot {
  color: #ea6528;
}

.multi.gold {
  color: #ffdd00;
}

.multi.teal {
  color: #25bfc5;
}

.multi.peach {
  color: #ff956b;
}

.multi.green {
  color: var(--green);
}

.amount {
  text-align: right;
  color: #f3f3f3;
}

.amount.money {
  color: var(--green);
}

.amount.hot {
  color: #ea6528;
}

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
  overflow: hidden;
}

.muted {
  color: #a0a0a0;
}

.chat-lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 13px;
}

.chat-lines p {
  margin: 0;
  color: #f3f3f3;
  line-height: 1;
}

.name {
  margin-right: 8px;
}

.name.orange,
.name.cyan,
.name.violet,
.name.blue {
  color: var(--muted);
}

.quick-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-reactions button {
  border: 1px solid #272727;
  background: #3b3b3b;
  color: #fff;
  border-radius: 999px;
  min-height: 40px;
  padding: 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.chat-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-compose[hidden] {
  display: none;
}

/* One row of emojis, opened from the button in the input and scrolled sideways
   rather than growing the composer into a keyboard-sized grid. */
.chat-emoji-grid {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.chat-emoji-grid::-webkit-scrollbar {
  display: none;
}

.chat-emoji-grid[hidden] {
  display: none;
}

.chat-emoji-grid button {
  flex: 0 0 auto;
  width: 34px;
  border: 1px solid #272727;
  background: #2c2c2c;
  border-radius: 8px;
  padding: 5px 0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.chat-emoji-grid button:hover {
  background: #3b3b3b;
}

.chat-compose-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.chat-compose-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 1px solid #525252;
  background: #2c2c2c;
  color: #fff;
  border-radius: 999px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
}

.chat-compose-input::placeholder {
  color: #8a8a8a;
}

.chat-compose-input:focus {
  outline: none;
  border-color: #767676;
}

.chat-emoji-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid #525252;
  background: #2c2c2c;
  color: #cfcfcf;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chat-emoji-btn:hover {
  background: #3b3b3b;
  color: #fff;
}

.chat-emoji-btn.active {
  border-color: #767676;
  background: #3b3b3b;
  color: #fff;
}

.chat-emoji-btn svg {
  display: block;
}

.chat-send-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid #1f7a45;
  background: var(--accent);
  color: #08210f;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chat-send-btn:disabled {
  border-color: #525252;
  background: #2c2c2c;
  color: #6f6f6f;
  cursor: default;
}

.chat-send-btn svg {
  width: 16px;
  height: 16px;
}

.game-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  padding-bottom: 0;
}

.sky-stage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #748ba1;
  background: #73a0cb;
}

.lofi {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid #2a2f32;
  background: rgba(15, 17, 18, 0.8);
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.lofi img {
  width: 16px;
  height: 16px;
}

/* Player count lives in the game-stage footage overlay; hide the summary copies. */
.live-bets-count {
  display: none;
}

.cloud {
  position: absolute;
  filter: blur(1px);
  background: rgba(221, 233, 243, 0.47);
  border-radius: 999px;
}

.cloud-a {
  top: 100px;
  right: 34px;
  width: 300px;
  height: 60px;
}

.cloud-b {
  top: 240px;
  right: 74px;
  width: 230px;
  height: 45px;
}

.cloud-c {
  top: 52px;
  left: -22px;
  width: 75px;
  height: 26px;
}

.jet {
  position: absolute;
  right: 350px;
  top: 112px;
  width: 66px;
  height: 22px;
  transform: rotate(14deg);
  animation: glide 6s ease-in-out infinite alternate;
}

@keyframes glide {
  from {
    transform: translateX(-8px) rotate(13deg);
  }

  to {
    transform: translateX(10px) rotate(16deg);
  }
}

.jet-body {
  position: absolute;
  inset: 2px 0 4px;
  border-radius: 12px 30px 8px 8px;
  background: linear-gradient(180deg, #8b939a, #697178);
}

.jet-wing {
  position: absolute;
  left: 20px;
  top: -2px;
  width: 22px;
  height: 13px;
  background: linear-gradient(180deg, #666f77, #515a62);
  clip-path: polygon(0 100%, 35% 0, 100% 8%, 70% 100%);
}

.contrail {
  position: absolute;
  right: 416px;
  top: 146px;
  width: 295px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(221, 240, 255, 0.68), transparent);
}

.lofi,
.cloud,
.jet,
.contrail {
  display: none;
}

.multiplier {
  position: absolute;
  left: 50%;
  top: 64px;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 29;
  font-size: clamp(90px, 8.4vw, 125px);
  font-weight: 800;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: var(--mult-shadow-soft);
  animation: breathe 1.5s ease-in-out infinite;
}

.multiplier.crashed {
  color: #ff3b30;
  text-shadow:
    0 0 10px rgba(255, 59, 48, 0.75),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

.multiplier.default-bet-live:not(.crashed) {
  color: #ffcc00;
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.18), var(--mult-shadow-soft);
}

body.asset-pack-train .multiplier {
  left: 0;
  right: 0;
  top: 42px;
  width: 4.25em;
  margin-inline: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 102px;
  line-height: 0.92;
  font-weight: 800;
  color: #24153e;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  font-kerning: none;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-shadow: none;
  animation: none;
  contain: none;
}

body.asset-pack-train .multiplier.crashed {
  color: #7a2232;
  text-shadow: 0 2px 0 rgba(255, 231, 176, 0.34);
}

body.asset-pack-train .multiplier.hypersonic-cashout-pop {
  animation: none;
}

body.asset-pack-train .multiplier .multiplier-char,
body.asset-pack-train .hypersonic-game-mult .multiplier-char {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.58em;
  text-align: center;
  font-kerning: none;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body.asset-pack-train .multiplier .multiplier-char-dot,
body.asset-pack-train .hypersonic-game-mult .multiplier-char-dot {
  width: 0.2em;
}

body.asset-pack-train .multiplier .multiplier-char-x,
body.asset-pack-train .hypersonic-game-mult .multiplier-char-x {
  width: 0.42em;
  text-align: left;
}


.stage-banner {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 28px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 17, 18, 0.5);
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.stage-banner.visible {
  opacity: 1;
}

.stage-banner.phase-ended {
  color: #ffcf6b;
  border-color: rgba(255, 207, 107, 0.45);
}
.countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.countdown-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-overlay:not(.align-top) .countdown-header {
  transform: translateY(-72px);
}

.countdown-overlay.align-top {
  justify-content: flex-start;
  padding-top: clamp(20px, 5vh, 46px);
}

.countdown-overlay.align-top .countdown-header {
  flex-direction: row;
  gap: 10px;
}

.countdown-overlay.align-top .countdown-title {
  margin: 0;
}

.countdown-overlay.align-top .countdown-ring {
  width: 28px;
  height: 28px;
}

.countdown-overlay.align-top .countdown-ring svg {
  width: 28px;
  height: 28px;
}

.countdown-overlay.align-top #countdownNumber {
  display: none;
}

.countdown-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(20px, 4vw, 26px);
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.5s ease;
}

.countdown-ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.countdown-ring svg {
  position: absolute;
  inset: 0;
  width: 80px;
  height: 80px;
}

.countdown-bg {
  stroke: #ffffff;
  stroke-width: 8;
  fill: none;
  opacity: 0.2;
}

.countdown-progress {
  stroke: #ffffff;
  stroke-width: 8;
  fill: none;
  opacity: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 251.327;
  stroke-dashoffset: 251.327;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke 0.5s ease;
}

#countdownNumber {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.5s ease;
}

body.mode-bomb-pick .countdown-overlay .countdown-title,
body.mode-bomb-pick .countdown-overlay .countdown-ring {
  display: none;
}

/* V7 shows only the total: the "2.09 x 20" working above it is dropped. */
body.mode-camera-approach .hypersonic-game-mult {
  display: none;
}

/* V7 flight amounts: bigger, and seated on a glass chip so they read against the sky. */
body.mode-camera-approach .flight-amount.jet-amount:not(.v5-drop-cashout-amount),
body.mode-camera-approach .flight-amount.pod-amount:not(.v5-drop-cashout-amount) {
  padding: 2px 8px 3px;
  border-radius: 999px; /* fully rounded ends, whatever the figure's width */
  background: rgba(10, 18, 30, 0.42);
  backdrop-filter: blur(5px) saturate(115%);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
}

body.mode-camera-approach .flight-amount.jet-amount:not(.v5-drop-cashout-amount),
body.mode-camera-approach .flight-amount.pod-amount:not(.v5-drop-cashout-amount) {
  font-size: clamp(15px, calc(21px * var(--jet-scale)), 23px);
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(4, 10, 18, 0.45);
}

body.mode-camera-approach .flight-amount.v5-drop-cashout-amount {
  font-size: clamp(18px, calc(26px * var(--jet-scale)), 30px);
}

/* Cashed-out bombs read as a banked green tag: solid fill, white figures.
   The pack rules below set a green text colour, so this needs the pack class too. */
body.mode-camera-approach.asset-pack-v6 .flight-amount.cashed,
body.mode-camera-approach.asset-pack-v7 .flight-amount.cashed,
body.mode-camera-approach .flight-amount.cashed {
  padding: 2px 9px 3px;
  border-radius: 999px; /* round ends, matching the live chip above it */
  background: rgba(34, 170, 68, 0.94);
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 4px rgba(3, 26, 12, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.countdown-load {
  display: none;
}

/* V7 launch loader: one thick, high-contrast HUD bar replaces the numeric lock-on
   countdown. Its clipped corners and amber optics match the footage instrumentation. */
body.mode-camera-approach .countdown-overlay,
body.mode-camera-approach .countdown-overlay.align-top {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
}

body.mode-camera-approach .countdown-overlay .countdown-header {
  position: relative;
  align-self: stretch;
  width: 100%;
  gap: 0;
  opacity: var(--v7-cd-fade, 1);
  transform: none;
}

body.mode-camera-approach .countdown-load {
  position: relative;
  z-index: 1;
}

body.mode-camera-approach .countdown-title {
  display: none;
}

body.mode-camera-approach .countdown-ring {
  display: none;
}

body.mode-camera-approach #countdownNumber {
  display: none;
}

body.mode-camera-approach .countdown-load {
  width: 100%;
  display: block;
}

.countdown-load-track {
  position: relative;
  height: 34px;
  overflow: hidden;
  background: rgba(28, 28, 28, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
}

.countdown-load-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #00f27e 0%, #63ffb0 100%);
  box-shadow: 0 0 14px rgba(0, 242, 126, 0.45);
  transition: transform 0.08s linear;
  will-change: transform, filter;
}





/* Bonus rounds keep the same bottom anchor and place the reel above the launch bar. */
body.mode-camera-approach .countdown-overlay.align-top {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
}

body.mode-camera-approach .countdown-overlay.align-top .countdown-header {
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 0;
}

body.mode-camera-approach .countdown-overlay.align-top #countdownNumber {
  display: none;
}

body.mode-camera-approach .countdown-overlay.align-top .countdown-ring {
  display: none;
}

/* V7 bonus selector: a restrained flight-deck rail, integrated into the sky instead
   of a floating casino card. The selected factor stays dominant while its neighbours
   remain readable enough to explain the draw. */
body.mode-camera-approach .countdown-arm {
  position: relative;
  display: block;
  width: 100%;
  height: 88px;
  margin: 0 0 14px;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(243, 249, 252, 0.035) 17%,
    rgba(243, 249, 252, 0.1) 50%,
    rgba(243, 249, 252, 0.035) 83%,
    transparent 100%
  );
  backdrop-filter: blur(2px) saturate(0.94);
  -webkit-backdrop-filter: blur(2px) saturate(0.94);
  text-align: center;
  font-size: clamp(46px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #ea6528;
  opacity: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-shadow: 0 1px 2px rgba(8, 18, 28, 0.2);
  transform-origin: center top;
  animation: v7ArmEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.24s ease;
}

/* Short centre marks locate the winning position without crossing the figures. */
body.mode-camera-approach .countdown-arm::before,
body.mode-camera-approach .countdown-arm::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: rgba(234, 101, 40, 0.92);
  transform: translateX(-50%);
  pointer-events: none;
}

body.mode-camera-approach .countdown-arm::before {
  top: 7px;
}

body.mode-camera-approach .countdown-arm::after {
  bottom: 7px;
}

body.mode-camera-approach .countdown-arm.hidden {
  display: none;
}

/* A generous edge fade keeps three choices legible without clipping the outer text. */
.countdown-arm-window {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
}

.countdown-arm-strip {
  display: flex;
  align-items: center;
  filter: blur(0);
  transition: filter 0.2s ease-out;
  will-change: transform;
}

body.mode-v8 .countdown-arm.spinning-fast .countdown-arm-strip {
  filter: blur(0.65px);
}

body.mode-v8 .countdown-arm.slowing .countdown-arm-strip {
  filter: blur(0);
}

.countdown-arm-item {
  flex: 0 0 clamp(116px, 26vw, 150px);
  min-width: 0;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  color: #ea6528;
  opacity: 0.14;
  transform: scale(0.86);
  transform-origin: center;
}

body.mode-camera-approach .countdown-arm.locking .countdown-arm-item,
body.mode-camera-approach .countdown-arm.landed .countdown-arm-item {
  transition:
    opacity 0.24s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.mode-camera-approach .countdown-arm.locking .countdown-arm-item:not(.reel-selected),
body.mode-camera-approach .countdown-arm.landed .countdown-arm-item:not(.reel-selected) {
  opacity: 0.18 !important;
  transform: scale(0.88) !important;
}

body.mode-camera-approach .countdown-arm.locking .countdown-arm-item.reel-selected,
body.mode-camera-approach .countdown-arm.landed .countdown-arm-item.reel-selected {
  color: #ea6528 !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

body.mode-camera-approach .countdown-arm.landed {
  opacity: 1;
  color: #ea6528;
  text-shadow: 0 1px 2px rgba(8, 18, 28, 0.2);
}

body.mode-camera-approach .countdown-arm.transferring .countdown-arm-item.reel-selected {
  opacity: 0 !important;
  transition: none !important;
}

body.mode-camera-approach .countdown-arm.locking .countdown-arm-window {
  animation: v7ArmLock 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.mode-v8 .countdown-arm.locking .countdown-arm-window {
  animation: v8ArmLock 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.v7-bonus-transfer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  white-space: nowrap;
  color: #ea6528;
  text-align: center;
  text-shadow: 0 1px 2px rgba(8, 18, 28, 0.2);
  will-change: transform, opacity;
}

/* The selected factor replaces the dormant 1.00x: the ghost melts away as the
   flyer arrives, and the landed value parks in its place until flight start. */
body.mode-camera-approach .sky-stage.v7-bonus-transferring .multiplier {
  opacity: 0 !important;
  transform: translateX(-50%) scale(0.96) !important;
  animation: none !important;
  /* Hold the ghost through the first half of the glide, then melt and recede
     right as the flyer converges on it - it reads as the value replacing it. */
  transition: opacity 0.26s ease 0.26s, transform 0.26s ease 0.26s;
}

body.mode-camera-approach .hypersonic-mult.bonus-transfer-receiving .hypersonic-boost-mult {
  opacity: 0;
  transform: translateX(-50%) scale(1);
}

body.mode-camera-approach .hypersonic-mult.bonus-transfer-arrived .hypersonic-boost-mult {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: none;
}

@keyframes v7ArmEnter {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



@keyframes v7ArmLock {
  0% {
    transform: scale(0.997);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes v8ArmLock {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.986);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .countdown-load-fill {
    transition: none;
  }
}

body.mode-bomb-pick .sky-stage::before {
  top: 0;
  transform: translateY(-100%);
  background: linear-gradient(
    to bottom,
    #07090c 0%,
    #0a0d11 78%,
    rgba(14, 18, 23, 0.99) 100%
  );
  border-bottom: 1px solid rgba(255, 185, 109, 0.22);
  box-shadow: 0 12px 28px rgba(1, 4, 8, 0.24);
}

body.mode-bomb-pick .sky-stage::after {
  bottom: 0;
  transform: translateY(100%);
  background: linear-gradient(
    to top,
    #07090c 0%,
    #0a0d11 78%,
    rgba(14, 18, 23, 0.99) 100%
  );
  border-top: 1px solid rgba(255, 185, 109, 0.2);
  box-shadow: 0 -12px 28px rgba(1, 4, 8, 0.24);
}

body.mode-bomb-pick .sky-stage.v6-cinematic-loading {
  border-color: rgba(113, 103, 92, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 185, 109, 0.06);
}

body.mode-bomb-pick .sky-stage.v6-cinematic-loading::before,
body.mode-bomb-pick .sky-stage.v6-cinematic-loading::after {
  transition-duration: 0.08s;
  transition-timing-function: linear;
}

body.mode-bomb-pick .sky-stage.v6-cinematic-loading::before {
  transform: translateY(var(--v6-cinema-top-offset, -100%));
}

body.mode-bomb-pick .sky-stage.v6-cinematic-loading::after {
  transform: translateY(var(--v6-cinema-bottom-offset, 100%));
}

.v6-cinema-status {
  display: none;
}

body.mode-bomb-pick .v6-cinema-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 36;
  height: var(--v6-cinema-shutter-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding-bottom: 7px;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  opacity: 0;
  color: rgba(224, 231, 236, 0.82);
  font-size: clamp(9px, 1.15vw, 11px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
  will-change: transform, opacity;
  transition:
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease;
}

body.mode-bomb-pick .v6-cinema-status strong {
  color: rgba(255, 193, 122, 0.94);
  font-size: 1.1em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body.mode-bomb-pick .sky-stage.v6-cinematic-loading .v6-cinema-status {
  transform: translateY(var(--v6-cinema-top-offset, -100%));
  opacity: 1;
  transition:
    transform 0.08s linear,
    opacity 0.24s ease 0.12s;
}

/* ---- V6: faceted flight-HUD treatment for the rotating bonus multiplier ---- */
body.mode-bomb-pick .vegas-slot-frame,
body.mode-camera-approach .vegas-slot-frame {
  --v6-slot-cut: clamp(12px, 1.35vw, 18px);
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    var(--v6-slot-cut) 0,
    calc(100% - var(--v6-slot-cut)) 0,
    100% var(--v6-slot-cut),
    100% calc(100% - var(--v6-slot-cut)),
    calc(100% - var(--v6-slot-cut)) 100%,
    var(--v6-slot-cut) 100%,
    0 calc(100% - var(--v6-slot-cut)),
    0 var(--v6-slot-cut)
  );
  -webkit-clip-path: polygon(
    var(--v6-slot-cut) 0,
    calc(100% - var(--v6-slot-cut)) 0,
    100% var(--v6-slot-cut),
    100% calc(100% - var(--v6-slot-cut)),
    calc(100% - var(--v6-slot-cut)) 100%,
    var(--v6-slot-cut) 100%,
    0 calc(100% - var(--v6-slot-cut)),
    0 var(--v6-slot-cut)
  );
  background: linear-gradient(
    90deg,
    rgba(255, 142, 73, 0.96) 0%,
    rgba(255, 142, 73, 0.96) 12%,
    rgba(211, 233, 247, 0.76) 24%,
    rgba(211, 233, 247, 0.76) 76%,
    rgba(255, 142, 73, 0.96) 88%,
    rgba(255, 142, 73, 0.96) 100%
  );
  box-shadow: none;
  filter: drop-shadow(0 10px 18px rgba(9, 20, 34, 0.28));
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  isolation: isolate;
  animation: v6SlotFrameIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background 0.24s ease, filter 0.24s ease, opacity 0.24s ease;
}

body.mode-bomb-pick .vegas-slot-frame::before,

body.mode-camera-approach .vegas-slot-frame::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(
    var(--v6-slot-cut) 0,
    calc(100% - var(--v6-slot-cut)) 0,
    100% var(--v6-slot-cut),
    100% calc(100% - var(--v6-slot-cut)),
    calc(100% - var(--v6-slot-cut)) 100%,
    var(--v6-slot-cut) 100%,
    0 calc(100% - var(--v6-slot-cut)),
    0 var(--v6-slot-cut)
  );
  -webkit-clip-path: polygon(
    var(--v6-slot-cut) 0,
    calc(100% - var(--v6-slot-cut)) 0,
    100% var(--v6-slot-cut),
    100% calc(100% - var(--v6-slot-cut)),
    calc(100% - var(--v6-slot-cut)) 100%,
    var(--v6-slot-cut) 100%,
    0 calc(100% - var(--v6-slot-cut)),
    0 var(--v6-slot-cut)
  );
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%),
    linear-gradient(145deg, rgba(9, 23, 39, 0.88) 0%, rgba(32, 54, 72, 0.76) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -18px 28px rgba(2, 9, 17, 0.16);
  transition: opacity 0.2s ease;
}

@keyframes v6SlotFrameIn {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-frame {
  animation: bonusReelFrameLock 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-item.reel-selected {
  animation: bonusReelValueLock 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-item:not(.reel-selected),
body.mode-bomb-pick .vegas-slot.is-landed .vegas-slot-item:not(.reel-selected) {
  opacity: 0 !important;
  transform: scale(0.8) !important;
  filter: blur(1.5px) !important;
}

body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-item.reel-selected,
body.mode-bomb-pick .vegas-slot.is-landed .vegas-slot-item.reel-selected {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: none !important;
}

@keyframes bonusReelFrameLock {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  52% {
    opacity: 1;
    transform: scale(1.012);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bonusReelValueLock {
  0% {
    transform: scale(0.96);
    text-shadow: 0 0 16px rgba(255, 204, 0, 0.42), 0 3px 10px rgba(0, 0, 0, 0.42);
  }

  55% {
    transform: scale(1.045);
    text-shadow: 0 0 23px rgba(255, 204, 0, 0.62), 0 3px 12px rgba(0, 0, 0, 0.48);
  }

  100% {
    transform: scale(1);
    text-shadow: 0 0 18px rgba(255, 204, 0, 0.42), 0 3px 10px rgba(0, 0, 0, 0.42);
  }
}

body.mode-bomb-pick .vegas-slot.is-landed .vegas-slot-frame,

body.mode-camera-approach .vegas-slot.is-landed .vegas-slot-frame {
  background: transparent;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.mode-bomb-pick .vegas-slot.is-landed .vegas-slot-frame::before,

body.mode-camera-approach .vegas-slot.is-landed .vegas-slot-frame::before {
  opacity: 0;
}

body.mode-bomb-pick .vegas-slot-mask,

body.mode-camera-approach .vegas-slot-mask {
  background: linear-gradient(
    to bottom,
    rgba(7, 18, 31, 0.94) 0%,
    rgba(11, 25, 40, 0.28) 30%,
    transparent 43%,
    transparent 57%,
    rgba(18, 36, 52, 0.3) 70%,
    rgba(8, 19, 31, 0.94) 100%
  );
}

body.mode-bomb-pick .vegas-slot-line,

body.mode-camera-approach .vegas-slot-line {
  display: none;
}

/* Every V6 bonus value uses the same yellow from spin through settle. */
body.mode-bomb-pick .vegas-slot-item,
body.mode-camera-approach .vegas-slot-item {
  color: #ffcc00;
  text-shadow: 0 0 18px rgba(255, 204, 0, 0.42), 0 3px 10px rgba(0, 0, 0, 0.42);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition:
    color 0.18s ease,
    text-shadow 0.18s ease,
    opacity 0.07s linear,
    filter 0.07s linear;
}

body.mode-bomb-pick .vegas-slot.is-settled .vegas-slot-item,

body.mode-camera-approach .vegas-slot.is-settled .vegas-slot-item {
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.mode-bomb-pick .sky-stage,
  body.mode-bomb-pick .sky-stage::before,
  body.mode-bomb-pick .sky-stage::after {
    transition: none;
  }

  body.mode-bomb-pick .sky-stage.v6-cinematic-loading::before,
  body.mode-bomb-pick .sky-stage.v6-cinematic-loading::after {
    transform: translateY(0);
  }

  body.mode-bomb-pick .sky-stage.v6-cinematic-loading .v6-cinema-status {
    transform: translateY(0);
  }

  body.mode-bomb-pick .vegas-slot-frame,

  body.mode-camera-approach .vegas-slot-frame {
    animation: none;
  }

  body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-frame,
  body.mode-bomb-pick .vegas-slot.is-locking .vegas-slot-item.reel-selected {
    animation: none;
  }
}

body.asset-pack-train .countdown-title {
  color: var(--train-wes-ink);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(244, 217, 166, 0.62),
    0 8px 18px rgba(93, 80, 52, 0.16);
}

body.asset-pack-train .countdown-ring {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 217, 166, 0.5) 0%, rgba(244, 217, 166, 0.18) 48%, transparent 70%);
  box-shadow:
    inset 0 0 0 2px rgba(47, 102, 86, 0.12),
    0 8px 18px rgba(113, 87, 47, 0.12);
}

body.asset-pack-train .countdown-bg {
  stroke: var(--train-wes-cream);
  opacity: 0.72;
}

body.asset-pack-train .countdown-progress {
  stroke: var(--train-wes-pine);
  opacity: 0.96;
}

body.asset-pack-train #countdownNumber {
  color: var(--train-wes-rust);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(244, 217, 166, 0.5);
}

.vegas-slot {
  --slot-font-size: var(--bonus-mult-value-font-size);
  --slot-item-height: calc(var(--slot-font-size) * 1.12);
  --slot-frame-width: min(518px, calc(var(--slot-font-size) * 4.1));
  position: absolute;
  left: 50%;
  top: var(--bonus-mult-value-top);
  z-index: 32;
  display: block;
  transform: translateX(-50%);
  pointer-events: none;
}

.vegas-slot-frame {
  position: relative;
  width: var(--slot-frame-width);
  height: var(--slot-item-height);
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid rgba(255, 204, 0, 0.4);
  background: linear-gradient(145deg, #1a1a2e 0%, #0d0d1a 100%);
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: border-color 0.12s ease-out, background 0.12s ease-out, box-shadow 0.12s ease-out;
}

.vegas-slot.is-landed .vegas-slot-frame {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.vegas-slot.is-landed .vegas-slot-mask,
.vegas-slot.is-landed .vegas-slot-line {
  opacity: 0;
}

.vegas-slot.is-landed .vegas-slot-strip {
  z-index: 4;
}

.vegas-slot-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 13, 26, 0.9) 0%, transparent 25%, transparent 75%, rgba(13, 13, 26, 0.9) 100%);
  transition: opacity 0.08s ease-out;
}

.vegas-slot-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.3), transparent);
  transition: opacity 0.08s ease-out;
}

.vegas-slot-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  will-change: transform;
}

.vegas-slot-item {
  box-sizing: border-box;
  height: var(--slot-item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--slot-font-size);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: #ffcc00;
  text-shadow: 0 0 16px rgba(255, 204, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.04s ease-out, text-shadow 0.04s ease-out;
}

body.asset-pack-train .vegas-slot {
  --slot-frame-width: min(448px, calc(var(--slot-font-size) * 3.72));
  top: calc(var(--bonus-mult-value-top) + 2px);
}

body.asset-pack-train .vegas-slot::before,
body.asset-pack-train .vegas-slot::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(28px, 5vw, 58px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 61, 54, 0.5), transparent);
  transform: translateY(-50%);
}

body.asset-pack-train .vegas-slot::before {
  right: calc(100% + 10px);
}

body.asset-pack-train .vegas-slot::after {
  left: calc(100% + 10px);
}

body.asset-pack-train .vegas-slot-frame {
  border-radius: 8px;
  border: 2px solid rgba(47, 102, 86, 0.78);
  background:
    linear-gradient(90deg, rgba(143, 61, 54, 0.16) 0 8px, transparent 8px calc(100% - 8px), rgba(143, 61, 54, 0.16) calc(100% - 8px)),
    linear-gradient(180deg, rgba(255, 245, 220, 0.74) 0%, rgba(244, 217, 166, 0.86) 48%, rgba(216, 173, 120, 0.7) 100%);
  box-shadow:
    0 8px 0 rgba(102, 78, 49, 0.16),
    0 16px 28px rgba(84, 59, 34, 0.14),
    inset 0 0 0 4px rgba(255, 247, 221, 0.24);
}

body.asset-pack-train .vegas-slot.is-landed .vegas-slot-frame {
  border-color: rgba(143, 61, 54, 0.38);
  background: rgba(244, 217, 166, 0.18);
  box-shadow: none;
}

body.asset-pack-train .vegas-slot-mask {
  background:
    linear-gradient(to bottom, rgba(244, 217, 166, 0.92) 0%, rgba(244, 217, 166, 0.12) 24%, rgba(244, 217, 166, 0.12) 76%, rgba(216, 173, 120, 0.88) 100%);
}

body.asset-pack-train .vegas-slot-line {
  display: none;
}

body.asset-pack-train .vegas-slot-item {
  padding-bottom: 0.12em;
  color: var(--train-wes-rust);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(255, 240, 200, 0.56),
    0 8px 18px rgba(91, 58, 38, 0.18);
}

.hypersonic-mult {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  pointer-events: none;
}

.hypersonic-game-mult {
  position: absolute;
  left: 50%;
  top: var(--bonus-mult-game-top);
  transform: translateX(-50%);
  min-width: 4.1em;
  white-space: nowrap;
  font-size: calc(var(--bonus-mult-game-font-size) * 0.7);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: var(--mult-shadow-soft);
  transition: font-size 0.5s ease, opacity 0.5s ease;
}

.hypersonic-boost-mult {
  position: absolute;
  left: 50%;
  top: var(--bonus-mult-value-top);
  margin-top: 0;
  transform: translateX(-50%);
  min-width: 3.4em;
  font-size: var(--bonus-mult-value-font-size);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: #ffcc00;
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.18), var(--mult-shadow-soft);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hypersonic-mult.cashout-total .hypersonic-boost-mult {
  color: #ffffff;
  text-shadow: var(--mult-shadow-soft);
}

.hypersonic-mult.cashed .hypersonic-game-mult {
  font-size: clamp(46px, 9vw, 98px);
  opacity: 0.9;
  color: #ffffff;
}

.hypersonic-mult.cashed .hypersonic-boost-mult {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}

body.asset-pack-train .hypersonic-game-mult {
  left: 0;
  right: 0;
  width: 4.25em;
  margin-inline: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #24153e;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-kerning: none;
  text-shadow: 0 1px 0 rgba(255, 241, 205, 0.66);
  box-shadow: none;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  overflow: visible;
  contain: none;
}

body.asset-pack-train .hypersonic-boost-mult {
  left: 0;
  right: 0;
  width: 3.4em;
  margin-inline: auto;
  transform: none;
  padding: 2px 18px 8px;
  border-radius: 8px;
  color: var(--train-wes-rust);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-kerning: none;
  text-shadow:
    0 3px 0 rgba(244, 217, 166, 0.78),
    0 10px 24px rgba(84, 53, 39, 0.22);
}

body.asset-pack-train .hypersonic-mult.cashed .hypersonic-game-mult {
  color: var(--train-wes-rust);
  background: transparent;
}

.flew-away {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.flew-away-title {
  font-size: clamp(46px, 10vw, 98px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: var(--mult-shadow-soft);
}

.flew-away-mult {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(22px, 5vw, 46px);
  font-weight: 700;
  text-shadow: var(--mult-shadow-soft);
}

.flight-amount {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-weight: 800;
  color: #ffffff;
  opacity: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.jet-amount {
  top: calc(-28px * var(--jet-scale));
  font-size: calc(22px * var(--jet-scale));
  z-index: 15;
}

.pod-amount {
  bottom: calc(-28px * var(--jet-scale));
  font-size: calc(22px * var(--jet-scale));
  z-index: 25;
}

.flight-amount.live {
  color: #ffffff;
}

.flight-amount.cashed {
  color: #00e676;
}

.multiplier.hypersonic-cashout-pop {
  animation: hypersonicCashoutMultiplierPop 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hypersonicCashoutMultiplierPop {
  0% {
    opacity: 0.78;
    transform: translateX(-50%) scale(0.92);
  }

  70% {
    opacity: 1;
    transform: translateX(-50%) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.012);
  }
}

.ground-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #272727;
  border: 1px solid #303030;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 18px;
  min-height: 0;
}

.control-panel {
  width: min(362px, 100%);
  margin: 0 auto;
  background: #272727;
  border: 1px solid #3f3f3f;
  padding: 20px;
  border-radius: var(--radius);
}

.balance {
  color: #a0a0a0;
  font-size: 13px;
  line-height: 1;
  min-width: 0;
  height: 27px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.balance strong {
  color: #d0d0d0;
}

.bet-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.bet-entry-row.single-action {
  grid-template-columns: minmax(0, 1fr);
}

.hypersonic-mode-panel {
  --bonus-accent: #ea6528;
  --bonus-accent-hover: #f17436;
  position: relative;
  margin-bottom: 14px;
}

.hypersonic-mode-panel.locked {
  cursor: default;
}

.preflight-options-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.bomb-count-button {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 52px;
  border: 1px solid #525252;
  border-radius: 8px;
  background: #383838;
  color: #f5f5f5;
  font: inherit;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 8px;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.bomb-count-button:not(:disabled):hover,
.bomb-count-button:not(:disabled):focus-visible {
  background: #454545;
  border-color: #525252;
  outline: none;
}

.bomb-count-button:not(:disabled):active {
  background: #4b4b4b;
}

.bomb-count-button:disabled {
  cursor: default;
}

.bomb-count-value {
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.bomb-count-label {
  color: #a7a7a7;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.bomb-count-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 16;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid #525252;
  border-radius: 8px;
  background: #2f2f2f;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.bomb-count-menu.hidden {
  display: none;
}

.bomb-count-option {
  height: 30px;
  border: 1px solid #525252;
  border-radius: 6px;
  background: #383838;
  color: #d9d9d9;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
}

.bomb-count-option:hover,
.bomb-count-option:focus-visible {
  background: #454545;
  color: #f3f3f3;
  outline: none;
}

.bomb-count-option.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #151515;
}

.bonus-switch-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 52px;
  border: 1px solid #525252;
  background: #383838;
  border-radius: 8px;
  color: #f5f5f5;
  font: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease, visibility 0.16s ease;
}

/* V5: while the auto-cash bonus rides, the panel is a centred BONUS readout card —
   title + live amount in the switch's orange accent, no ON/OFF knob. */
.bonus-switch-panel.bonus-ride {
  justify-content: center;
  pointer-events: none;
}

.bonus-switch-panel.bonus-ride .bonus-switch-visual {
  display: none;
}

.bonus-switch-panel.bonus-ride .bonus-switch-copy {
  justify-items: center;
  text-align: center;
  width: 100%;
}

.bonus-switch-panel.bonus-ride .bonus-switch-subtitle {
  font-size: 20px;
  font-weight: 800;
}

.hypersonic-mode-panel.locked .bonus-switch-panel.bonus-ride {
  opacity: 1; /* the readout stays fully visible while the ride is live */
}

.hypersonic-mode-panel.locked .bonus-switch-panel {
  opacity: 0.52;
  cursor: default;
}

.hypersonic-mode-panel.locked .bomb-count-button {
  opacity: 0.52;
  cursor: default;
}

.bonus-switch-panel:disabled {
  cursor: default;
}

.bomb-count-button:disabled {
  cursor: default;
}

.hypersonic-mode-panel.total-win-live .bonus-switch-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.hypersonic-mode-panel.total-win-live .bomb-count-button,
.hypersonic-mode-panel.total-win-live .bomb-count-menu {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.bonus-switch-panel:not(:disabled):hover,
.bonus-switch-panel:not(:disabled):focus-visible {
  background: #454545;
  border-color: #525252;
  outline: none;
}

.bonus-switch-panel:not(:disabled):active {
  background: #4b4b4b;
}

.bonus-switch-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bonus-switch-title {
  color: #f5f5f5;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.bonus-switch-subtitle {
  color: var(--bonus-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bonus-switch-visual {
  position: relative;
  width: 68px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #4b4b4b;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 9px;
  color: #d5d5d5;
  cursor: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, color 0.18s ease;
  pointer-events: none;
}

.bonus-switch-panel.active .bonus-switch-visual {
  justify-content: flex-start;
  background: var(--bonus-accent);
  color: #ffffff;
}

.bonus-switch-state {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.bonus-switch-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f2f2f2;
  transition: left 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.bonus-switch-panel.active .bonus-switch-knob {
  left: calc(100% - 30px);
}

.bonus-switch-panel:disabled .bonus-switch-visual {
  background: #3a3a3a;
  color: #8d8d8d;
}

.bonus-switch-panel.active:disabled .bonus-switch-visual {
  background: #743818;
  color: #c8b1a6;
}

.bonus-switch-panel:disabled .bonus-switch-knob {
  background: #a9a9a9;
}

.bonus-switch-panel:not(:disabled):hover .bonus-switch-visual,
.bonus-switch-panel:not(:disabled):focus-visible .bonus-switch-visual {
  background: #5a5a5a;
}

.bonus-switch-panel.active:not(:disabled):hover .bonus-switch-visual,
.bonus-switch-panel.active:not(:disabled):focus-visible .bonus-switch-visual {
  background: var(--bonus-accent-hover);
}

@media (max-width: 560px) {
  .preflight-options-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px;
  }

  .bomb-count-button {
    min-height: 48px;
    padding: 7px 6px;
  }

  .bomb-count-value {
    font-size: 16px;
  }

  .bomb-count-label {
    font-size: 8px;
  }

  .bomb-count-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .bonus-switch-panel {
    min-height: 48px;
    gap: 8px;
    padding: 8px 8px 8px 10px;
  }

  .bonus-switch-copy {
    gap: 3px;
  }

  .bonus-switch-title {
    font-size: 9px;
  }

  .bonus-switch-subtitle {
    font-size: 12px;
  }

  .bonus-switch-visual {
    width: 58px;
    height: 30px;
    padding: 0 8px;
  }

  .bonus-switch-state {
    font-size: 10px;
  }

  .bonus-switch-knob {
    left: 4px;
    top: 4px;
    width: 22px;
    height: 22px;
  }

  .bonus-switch-panel.active .bonus-switch-knob {
    left: calc(100% - 26px);
  }
}

.top-total-win {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 2px solid #151515;
  border-radius: 12px;
  background: #151515;
  color: #dbdbdb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.64s cubic-bezier(0.16, 1, 0.3, 1);
}

.hypersonic-mode-panel.total-win-active .top-total-win {
  opacity: 1;
}

.hypersonic-mode-panel.total-win-settle .top-total-win {
  transform: translateY(62px);
}

.top-total-win-value {
  color: #00f27e;
  font-size: 17px;
  display: inline-block;
  min-width: 7ch;
  overflow: hidden;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform-origin: center center;
  will-change: transform, filter;
}

.top-total-win-value.top-total-win-count-up {
  animation: topTotalWinCountUp 0.52s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes topTotalWinCountUp {
  0% {
    opacity: 0.78;
    transform: translateY(-8px) scale(0.96);
    filter: brightness(1.25);
  }

  42% {
    opacity: 1;
    transform: translateY(2px) scale(1.08);
    filter: brightness(1.38);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.powerups {
  position: relative;
  min-height: 96px;
  margin-bottom: 0;
}

.mini-graph {
  position: relative;
  height: 83px;
  margin-bottom: 8px;
  border-radius: 20px;
  border: 1px solid #2f2f2f;
  background: rgba(30, 30, 30, 0.6);
  overflow: hidden;
}

.mini-graph canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.power-card {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  top: auto;
  width: 100%;
  background: #383838;
  border: 1px solid #4a4a4a;
  border-radius: 12px;
  height: 96px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  cursor: pointer;
  z-index: 2;
  transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.32s cubic-bezier(0.22, 1, 0.36, 1), right 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}

#podCard {
  left: 0;
}

#hypersonicCard {
  left: auto;
  right: auto;
}

.power-card.active-addon {
  background: #2a2a2a;
  border-color: #4a4a4a;
}

.power-card.sequence-pending {
  border-color: rgba(0, 242, 126, 0.68);
  animation: addon-sequence-pending 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.power-card.hypersonic-accepted {
  cursor: default;
  background: #c1c1c1;
  border-color: transparent;
  color: #151515;
}

.power-card.disabled {
  cursor: default;
  background: #2a2a2a; /* Neutral 875 */
  border-color: #3f3f3f; /* Neutral 700 */
}

.power-card.disabled .icon-pod {
  filter: brightness(0) invert(0.42); /* ~Neutral 400 gray */
}

.power-card.disabled .label,
.power-card.disabled .buy,
.power-card.disabled .missile-price {
  color: #6a6a6a; /* Neutral 400 */
}

.power-card.hypersonic-accepted .icon-pod {
  display: none;
}

.power-card.hypersonic-accepted .label,
.power-card.hypersonic-accepted .buy,
.power-card.hypersonic-accepted .missile-price {
  left: 12px;
  right: 12px;
  width: auto;
  color: #151515;
  text-align: center;
}

.power-card.hypersonic-accepted .label {
  top: 32px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.72;
}

.power-card.hypersonic-accepted .missile-price {
  display: none;
}

.power-card.hypersonic-accepted .buy {
  top: 53px;
  font-size: 13px;
  font-weight: 500;
}

#podCard:not(.disabled) .icon-pod,
#hypersonicCard:not(.disabled) .icon-pod,
.power-card.active-addon .icon-pod {
  filter: brightness(0) saturate(100%) invert(56%) sepia(87%) saturate(2348%) hue-rotate(353deg) brightness(95%) contrast(94%);
}

.power-card.docked {
  top: auto;
  width: 100%;
  transform: none;
  z-index: 7;
  pointer-events: none;
}

#podCard.docked {
  left: 6px;
  right: auto;
}

#hypersonicCard.docked {
  right: 6px;
  left: auto;
}

.icon-pod {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 34px;
  height: auto;
  max-height: 20px;
  object-fit: contain;
  transition: filter 0.18s ease, opacity 0.18s ease;
}

#hypersonicCard .icon-pod {
  left: 11px;
  right: auto;
}

.label,
.buy,
.missile-price {
  line-height: 1;
  position: absolute;
  left: 13px;
}

.label {
  top: 36px;
  color: rgba(219, 219, 219, 0.7);
  font-size: 12px;
}

.buy {
  top: 56px;
  color: #dbdbdb;
  font-size: 13px;
}

.missile-price {
  top: 47px;
  color: rgba(219, 219, 219, 0.58);
  font-size: 10px;
  font-weight: 500;
}

#hypersonicCard:not(.missile-loader):not(.cashout-all):not(.take-half):not(.cancel-addon) .label,
#hypersonicCard:not(.missile-loader):not(.cashout-all):not(.take-half):not(.cancel-addon) .buy,
#hypersonicCard:not(.missile-loader):not(.cashout-all):not(.take-half):not(.cancel-addon) .missile-price {
  left: 12px;
  right: 12px;
  width: auto;
  text-align: center;
}

.power-card.missile-loader {
  background: #2a2a2a;
  border-color: #4a4a4a;
}

.power-card.missile-loader .label {
  top: 55px;
  color: rgba(219, 219, 219, 0.72);
}

.power-card.missile-loader .buy {
  top: 24px;
  color: #00f27e;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.power-card.missile-loader .missile-price {
  top: 72px;
}

.missile-count-number {
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

.missile-count-unit {
  font-size: 0.58em;
  font-weight: 600;
  line-height: 1;
}

.power-card.cashout-all,
.power-card.take-half {
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  border: 2px solid #4b4b4b;
  border-radius: 12px;
  background: #292929;
}

.power-card.cashout-all .icon-pod,
.power-card.take-half .icon-pod {
  display: none;
}

.power-card.cashout-all .label,
.power-card.cashout-all .buy,
.power-card.take-half .label,
.power-card.take-half .buy {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.power-card.cashout-all .label {
  color: #ffb52b;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
}

.power-card.take-half .label {
  color: rgba(219, 219, 219, 0.72);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.power-card.cashout-all .buy,
.power-card.take-half .buy {
  display: block;
  color: #e7e7e7;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
}

.power-card.cancel-addon {
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: #383838;
  border-color: transparent;
  color: #ff5c5c;
  transform: none;
}

.power-card.cancel-addon .icon-pod {
  display: none;
}

.power-card.cancel-addon .label,
.power-card.cancel-addon .buy {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.power-card.cancel-addon .label {
  color: #ff5c5c;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  text-transform: uppercase;
}

.power-card.cancel-addon .buy {
  display: none;
}

.missile-add-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 8;
  width: 30px;
  height: 30px;
  border: 1px solid #5f5f5f;
  border-radius: 10px;
  background: #00f27e;
  color: #151515;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  cursor: pointer;
}

.missile-add-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.action-stack {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 0;
}

.action-stack .bet-btn {
  margin-bottom: 0;
}

.bet-entry-row .bet-btn.state-win .btn-line-one {
  font-size: 30px;
  letter-spacing: -0.8px;
}

.action-stack.pod-mode .bet-btn {
  line-height: 1.1;
  transition: none;
}

.action-stack.pod-mode.pod-after-save .bet-btn {
  transition: height 0.35s ease;
}

.action-stack.pod-mode .bet-btn .btn-line-one,
.action-stack.pod-mode .bet-btn .btn-line-two {
  font-size: 13px;
}

.action-stack.pod-mode.pod-before-save #podActionBtn {
  height: 96px;
}

.action-stack.pod-mode.pod-before-save #betBtn {
  height: 36px;
}

.action-stack.pod-mode.pod-after-save #podActionBtn {
  height: 36px;
}

.action-stack.pod-mode.pod-after-save #betBtn {
  height: 96px;
}

.action-stack.pod-mode.pod-before-save #betBtn.state-cashout {
  background: #5a5a5a;
  color: #d1d1d1;
}

.action-stack.accepted-shift-left #betBtn.state-accepted {
  text-align: left;
  align-items: flex-start;
  padding: 16px 182px 16px 22px;
}

.action-stack.accepted-shift-right #betBtn.state-accepted {
  text-align: right;
  align-items: flex-end;
  padding: 16px 22px 16px 182px;
}

.bet-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  height: 96px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #151515;
  font: inherit;
  margin-bottom: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
  line-height: 1.1;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.bet-btn .btn-line-one,
.bet-btn .btn-line-two {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bet-btn .btn-line-one {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
}

.bet-btn .btn-line-two {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  opacity: 0.72;
}

.bet-btn.state-bet .btn-line-two {
  font-size: 17px;
}

.bet-btn > *,
.power-card > *,
.secondary-cashout-btn > * {
  pointer-events: none;
}

.bet-btn.state-bet {
  background: var(--accent);
  color: #151515;
}

.bet-btn.state-bet.hypersonic-mode {
  background: #ea6528;
  color: #ffffff;
}

.bet-btn.state-bet:disabled {
  background: #4b4b4b;
  color: #d1d1d1;
  cursor: default;
}

.bet-btn.state-bet.hypersonic-mode:disabled {
  background: #73391f;
  color: #ffd8c7;
}

.bet-btn.state-accepted {
  background: #c1c1c1;
  color: #151515;
  font-size: 13px;
  line-height: 1.14;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 20px;
}

.bet-btn.state-accepted.hypersonic-mode {
  background: #ea6528;
  color: #151515;
}

.bet-btn.state-accepted .btn-line-one,
.bet-btn.state-accepted .btn-line-two {
  font-size: 13px;
  line-height: 1.14;
  display: block;
  opacity: 1;
}

.bet-btn.state-missile-loader {
  position: relative;
  align-items: flex-start;
  gap: 3px;
  padding: 17px calc(30% + 72px) 14px 20px;
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  color: #dbdbdb;
  text-align: left;
  cursor: default;
}

.bet-btn.state-missile-loader.fixed-bomb-loader {
  padding-right: 20px;
}

.bet-btn.state-missile-loader .btn-missile-count,
.bet-btn.state-missile-loader .btn-missile-label,
.bet-btn.state-missile-loader .btn-missile-price,
.bet-btn.state-missile-loader .btn-missile-icons {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bet-btn.state-missile-loader .btn-missile-count {
  color: #00f27e;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-count {
  color: #ea6528;
}

.bet-btn.state-missile-loader .btn-missile-label {
  color: rgba(219, 219, 219, 0.72);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
}

.bet-btn.state-missile-loader .btn-missile-price {
  color: rgba(219, 219, 219, 0.58);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.05;
}

.bet-btn.state-missile-loader .btn-missile-icons {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(92px, 30%, 118px);
  right: calc(30% + 12px);
  height: 44px;
  display: block;
  overflow: hidden;
  transform: translateY(-50%);
}

.bet-btn.state-missile-loader.fixed-bomb-loader .btn-missile-icons {
  left: clamp(118px, 38%, 150px);
  right: 18px;
}

.bet-btn.state-missile-loader .btn-missile-icon {
  position: absolute;
  top: var(--missile-top, 0);
  right: calc(var(--missile-col, 0) * 42px);
  width: 36px;
  height: 8px;
  background: #00f66f;
  -webkit-mask: url('./assets/icons/missile-loader.svg?v=20260513-alt') center / contain no-repeat;
  mask: url('./assets/icons/missile-loader.svg?v=20260513-alt') center / contain no-repeat;
  opacity: 0.95;
  transform: translateX(0) scale(1);
  transform-origin: center center;
  animation: missileIconLoad 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--missile-index) * 18ms);
}

.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-icon {
  background: #ea6528;
}

.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-add {
  background: #ea6528;
}

.bet-btn.state-missile-loader.missile-add-disabled .btn-missile-add,
.bet-btn.state-missile-loader.hypersonic-mode.missile-add-disabled .btn-missile-add {
  background: #2a2a2a;
  color: #6a6a6a;
  border-color: #3f3f3f;
  cursor: default;
  pointer-events: none;
}

.bet-btn.state-missile-loader .btn-missile-add {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 30%;
  height: 100%;
  border: 0;
  border-left: 1px solid #5f5f5f;
  border-radius: 0 12px 12px 0;
  background: #00f27e;
  color: #151515;
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center center;
}

.bet-btn.state-missile-loader .btn-missile-add.missile-add-press-pulse {
  animation: missileAddPressPulse 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-add.missile-add-press-pulse {
  animation-name: missileAddBonusPressPulse;
}

@keyframes missileIconLoad {
  0% {
    opacity: 0;
    transform: translateX(12px) scale(0.9);
  }

  100% {
    opacity: 0.95;
    transform: translateX(0) scale(1);
  }
}

@keyframes missileAddPressPulse {
  0% {
    transform: scale(1);
    background-color: #00f27e;
    filter: brightness(1);
  }

  44% {
    transform: scale(1.04);
    background-color: #37ff9c;
    filter: brightness(1.03);
  }

  100% {
    transform: scale(1);
    background-color: #00f27e;
    filter: brightness(1);
  }
}

@keyframes missileAddBonusPressPulse {
  0% {
    transform: scale(1);
    background-color: #ea6528;
    filter: brightness(1);
  }

  44% {
    transform: scale(1.04);
    background-color: #ff8242;
    filter: brightness(1.04);
  }

  100% {
    transform: scale(1);
    background-color: #ea6528;
    filter: brightness(1);
  }
}

.bet-btn.state-cashout {
  background: #ffbd30;
  color: #151515;
}

/* V5 bonus ride: the main button is an inert dark card — BONUS ACTIVE with an
   "Auto cash on crash" subtitle — matching the panel's readout card. */
#betBtn.bonus-ride-btn.state-cashout {
  background: #383838;
  border: 1px solid #4f4f4f;
  color: #f5f5f5;
  padding: 10px 12px;
  overflow: hidden;
}

#betBtn.bonus-ride-btn.state-cashout:disabled {
  opacity: 0.92;
}

#betBtn.bonus-ride-btn.state-cashout .btn-line-one {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #f5f5f5;
  white-space: nowrap;
}

#betBtn.bonus-ride-btn.state-cashout .btn-line-two {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.bet-btn.state-cashout .btn-line-one {
  font-weight: 700;
}

.bet-btn.state-cashout.bomb-cashout {
  --drop-bomb-icon-color: rgba(21, 21, 21, 0.5);
  --drop-bomb-count-color: #151515;
  --drop-bomb-count-opacity: 0.42;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  background: #ffbd30;
  color: #151515;
  text-align: center;
  overflow: hidden;
}

.bet-btn.state-cashout.bomb-cashout .btn-missile-count,
.bet-btn.state-cashout.bomb-cashout .btn-missile-label,
.bet-btn.state-cashout.bomb-cashout .btn-missile-icons,
.bet-btn.state-cashout .btn-cashout-title,
.bet-btn.state-cashout .btn-cashout-action,
.bet-btn.state-cashout .btn-cashout-value {
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.bet-btn.state-cashout.bomb-cashout .btn-missile-count {
  position: absolute;
  top: 17px;
  left: 20px;
  color: var(--drop-bomb-count-color) !important;
  opacity: var(--drop-bomb-count-opacity);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}

.bet-btn.state-cashout.bomb-cashout .btn-missile-label {
  position: absolute;
  top: 50px;
  left: 20px;
  color: var(--drop-bomb-count-color) !important;
  opacity: var(--drop-bomb-count-opacity);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
  text-shadow: none;
}

.bet-btn.state-cashout.bomb-cashout .btn-missile-icons {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(118px, 38%, 150px);
  right: 18px;
  height: 44px;
  display: block;
  overflow: hidden;
  transform: translateY(-50%);
}

.bet-btn.state-cashout.bomb-cashout .btn-missile-icon {
  position: absolute;
  top: var(--missile-top, 0);
  right: calc(var(--missile-col, 0) * 42px);
  width: 36px;
  height: 8px;
  background: var(--drop-bomb-icon-color);
  -webkit-mask: url('./assets/icons/missile-loader.svg?v=20260513-alt') center / contain no-repeat;
  mask: url('./assets/icons/missile-loader.svg?v=20260513-alt') center / contain no-repeat;
  opacity: 1;
}

.bet-btn.state-cashout.bomb-cashout .btn-cashout-action {
  position: relative;
  z-index: 1;
  color: #151515;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.bet-btn.state-cashout .btn-cashout-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.08;
}

.bet-btn.state-cashout .btn-cashout-value {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.bet-btn.state-cashout .btn-line-two {
  font-size: 17px;
  font-weight: 800;
}

.bet-btn.state-drop {
  background: #e86a1c;
  color: #ffffff;
}

.bet-btn.state-cancel {
  background: #e04343;
  color: #ffffff;
}

.bet-btn.state-ended {
  background: #4b4b4b;
  color: #d1d1d1;
}

.bet-btn.state-accepted .btn-line-two,
.bet-btn.state-cashout .btn-line-two,
.bet-btn.state-drop .btn-line-two,
.bet-btn.state-cancel .btn-line-two,
.bet-btn.state-ended .btn-line-two {
  opacity: 1;
}

.bet-btn.state-win {
  background: #00f27e;
  color: #ffffff;
}

.bet-btn.state-win .btn-line-one {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  opacity: 1;
}

.bet-btn.state-win .btn-line-two {
  display: none;
}

.action-stack.pod-mode #podActionBtn.state-win .btn-line-one {
  font-size: 26px;
  letter-spacing: -0.8px;
}

.action-stack.pod-mode #betBtn.state-win .btn-line-one {
  font-size: 38px;
  letter-spacing: -1px;
}

.bet-btn.state-saved {
  background: #303030;
  color: #00f27e;
}

.bet-btn.state-saved .btn-line-one {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  opacity: 1;
}

.bet-btn.state-saved .btn-line-two {
  display: none;
}

.action-stack.pod-mode .bet-btn.state-saved .btn-line-one {
  font-size: 13px;
}

.bet-btn.win-react {
  animation: none;
}

.bet-btn.state-swap-enter,
.power-card.state-swap-enter,
.secondary-cashout-btn.state-swap-enter {
  animation: buttonStateEnter 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

.bet-btn.bet-mode-transition {
  animation: betModeSurfaceTransition 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

.bet-btn.bet-mode-transition .btn-line-one,
.bet-btn.bet-mode-transition .btn-line-two {
  animation: betModeCopyTransition 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bet-btn.cashout-press-pulse,
.power-card.cashout-press-pulse,
.secondary-cashout-btn.cashout-press-pulse {
  animation: cashoutPressPulse 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

.power-card.cashout-press-pulse,
.secondary-cashout-btn.cashout-press-pulse {
  animation-name: cashoutCardPressPulse;
}

.bet-btn.state-swap-enter .btn-line-one,
.bet-btn.state-swap-enter .btn-line-two,
.power-card.state-swap-enter .label,
.power-card.state-swap-enter .buy,
.power-card.state-swap-enter .missile-price,
.secondary-cashout-btn.state-swap-enter .secondary-cashout-label,
.secondary-cashout-btn.state-swap-enter .secondary-cashout-value {
  animation: buttonTextEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bet-btn.amount-pop-enter {
  animation: buttonWinPulse 0.4s linear both;
  transform-origin: center center;
}

.bet-btn.amount-pop-enter .btn-line-one {
  display: inline-block;
  animation: amountTextEnter 0.2s ease-out 0.05s both;
  transform-origin: center center;
}
@keyframes buttonStateEnter {
  0% {
    opacity: 0.85;
    transform: translateY(7px) scale(0.985);
    filter: brightness(1.1);
  }

  58% {
    opacity: 1;
    transform: translateY(0) scale(1.01);
    filter: brightness(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes betModeSurfaceTransition {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  42% {
    transform: scale(0.985);
    filter: brightness(1.06);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes betModeCopyTransition {
  from {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(1.5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes desktopButtonStateEnter {
  0% {
    opacity: 0.88;
    transform: scale(0.985);
    filter: brightness(1.1);
  }

  58% {
    opacity: 1;
    transform: scale(1.01);
    filter: brightness(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes cashoutPressPulse {
  0% {
    transform: scale(1);
    background-color: #ffc940;
    filter: brightness(1);
  }

  44% {
    transform: scale(1.035);
    background-color: #ffe36a;
    filter: brightness(1.02);
  }

  100% {
    transform: scale(1);
    background-color: #ffc940;
    filter: brightness(1);
  }
}
@keyframes cashoutCardPressPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  44% {
    transform: scale(1.035);
    filter: brightness(1.04);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
@keyframes buttonTextEnter {
  0% {
    opacity: 1;
    transform: translateY(1px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes buttonWinPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 242, 126, 0.8);
  }

  30% {
    transform: scale(1.08);
    box-shadow: 0 0 50px rgba(0, 242, 126, 1);
  }

  100% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 242, 126, 0.8);
  }
}
@keyframes amountTextEnter {
  0% {
    opacity: 0;
    transform: scale(0.8);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: none;
  }
}

@keyframes podCashoutRise {
  0% {
    transform: translateY(12px);
    opacity: 0.72;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.bet-bottom-slot {
  position: relative;
  height: 36.99px;
}

.bet-bottom-slot > .adjustment,
.bet-bottom-slot > .cancel-bet-btn,
.bet-bottom-slot > .secondary-cashout-btn {
  position: absolute;
  inset: 0;
}

.bet-bottom-slot > .hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.bet-bottom-slot > .adjustment.hidden {
  display: grid !important;
}

.bet-bottom-slot > .cancel-bet-btn.hidden {
  display: block !important;
}

.bet-bottom-slot > .secondary-cashout-btn.hidden {
  display: flex !important;
}

.adjustment {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  height: 36.99px;
}

.amount-box,
.adjust-btn {
  border: 1px solid #525252;
  background: #383838;
  color: #d9d9d9;
  font: inherit;
  font-size: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.amount-box {
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  font-size: 16px;
}

.amount-input {
  border: 1px solid #6a6a6a;
  background: #2a2a2a;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  text-align: center;
  border-radius: 8px 0 0 8px;
  outline: none;
  -moz-appearance: textfield;
}

/* ── Bet amount keypad ─────────────────────────────────────────────────────
   The native keyboard is suppressed on the amount field (inputmode=none);
   on phones and tablets this fixed sheet replaces it, so opening it never
   reflows or scrolls the page. Desktops never open it (script gates on a
   coarse primary pointer) - the field edits plainly there. Digits and the
   dot edit the field in place; ⌫ deletes; the green OK commits through the
   same close path Enter always used. */
/* No backdrop and no dim: the page stays fully visible behind the sheet.
   The wrapper spans the screen only to position the sheet, so it must not
   swallow taps itself. */
.bet-keypad {
  position: fixed;
  inset: 0;
  z-index: 320;
  pointer-events: none;
}

.bet-keypad.hidden {
  display: none;
}

/* Dressed in the panel's own materials: the card surface, the chip recipe,
   the token green. Positioned by script - just above the amount field, so
   the entry is never covered; the bottom placement is only the fallback. */
.bet-keypad-sheet {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 20px));
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(68px, 0.85fr);
  gap: 7px;
  padding: 8px;
  background: #191a1a;
  border: 1px solid #2e2e2e;
  border-radius: var(--radius, 12px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

/* The sheet may still overlap other panels, so the entry also lives on the
   keypad: this strip mirrors the field on every edit. */
.bet-keypad-display {
  grid-column: 1 / -1;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151515;
  border: 1px solid #444444;
  border-radius: 8px;
  color: var(--text, #f3f3f3);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.bet-keypad-display::before {
  content: "$";
  color: var(--muted, #a0a0a0);
  margin-right: 4px;
  font-size: 16px;
}

.bet-keypad-key {
  height: 44px;
  border: 1px solid #575757;
  border-radius: 6px;
  background: var(--chip, #303030);
  color: #d0d0d0;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.bet-keypad-key:active {
  background: #3a3a3a;
  transform: scale(0.96);
}

.bet-keypad-back {
  font-size: 18px;
}

.bet-keypad-ok {
  grid-column: 4;
  grid-row: 2 / span 4;
  border: 0;
  border-radius: 8px;
  background: var(--green, #35cf58);
  color: #151515;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.bet-keypad-ok:active {
  background: #2eb84e;
  transform: scale(0.98);
}

/* V19: the amount box below stays visible and live, so the keypad drops its
   own readout strip and the OK column climbs to fill all four rows. */
body.mode-v19 .bet-keypad-display {
  display: none;
}

body.mode-v19 .bet-keypad-ok {
  grid-row: 1 / span 4;
}


.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.adjust-btn:last-child {
  border-radius: 0 8px 8px 0;
}

.adjust-btn {
  color: #c3c3c3;
}

.adjust-btn svg {
  width: 12px;
  height: 12px;
}


.adjust-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.adjustment.locked .amount-box,
.adjustment.locked .adjust-btn {
  opacity: 0.45;
}

.cancel-bet-btn {
  width: 100%;
  height: 36.99px;
  border: 1px solid #e04343;
  border-radius: 12px;
  background: #e04343;
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}

.cancel-bet-main,
.cancel-bet-sub {
  display: block;
  pointer-events: none;
  line-height: 1;
}

.cancel-bet-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  font-weight: 500;
  opacity: 0.9;
}

.secondary-cashout-btn {
  width: 100%;
  height: 36.99px;
  border: 1px solid #4b4b4b;
  border-radius: 12px;
  background: #292929;
  color: #ffb52b;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  text-align: center;
}

.secondary-cashout-btn.take-half {
  color: rgba(219, 219, 219, 0.72);
}

/* V6 one-bomb rounds: CASH OUT ALL stays visible but inert. */
.secondary-cashout-btn:disabled:not(.hidden) {
  color: rgba(255, 255, 255, 0.32);
  border-color: #3d3d3d;
  cursor: default;
}

.secondary-cashout-btn:disabled:not(.hidden) .secondary-cashout-value {
  color: rgba(255, 255, 255, 0.32);
}

.secondary-cashout-label,
.secondary-cashout-value {
  display: block;
  pointer-events: none;
  line-height: 1;
}

.secondary-cashout-value {
  color: #e7e7e7;
  font-size: 10px;
  font-weight: 500;
}

.sidebar-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #a4a4a4;
  font-size: 10px;
  line-height: 27px;
}

.fairness,
.credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fairness img {
  width: 16px;
  height: 16px;
}

.credit img {
  width: 68px;
  height: 14px;
}

/* The creator mark carries its own wordmark, so it sits at the label's height
   and takes whatever width that gives it. */
.credit img.credit-logo {
  width: auto;
  height: 16px;
}

/* The mark links out to its maker; the anchor is only a wrapper, so it must not
   add a line box of its own around the image. */
.credit-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.credit-link:hover,
.credit-link:focus-visible {
  opacity: 0.75;
}

@media (max-height: 860px) {
  .scene {
    --bonus-mult-value-font-size: clamp(65px, 9.8vh, 103px);
    --bonus-mult-game-font-size: clamp(22px, 4.6vh, 40px);
    --bonus-mult-game-top: 42px;
    --bonus-mult-value-top: calc(32px + var(--bonus-mult-game-font-size));
    padding: 8px 20px 10px;
    gap: 8px;
  }

  .topbar {
    gap: 10px;
  }

  .layout {
    gap: 6px;
  }

  .sidebar {
    padding: 12px;
    gap: 12px;
  }

  .player-row {
    height: 24px;
    font-size: 13px;
  }

  .chat {
    padding: 10px 20px;
    gap: 8px;
  }

  .chat-lines,
  .quick-reactions button {
    font-size: 13px;
  }

  .game-column {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .multiplier {
    font-size: clamp(65px, 9.8vh, 103px);
    top: 44px;
    bottom: auto;
  }

  body.mode-camera-approach #countdownNumber {
    font-size: clamp(65px, 9.8vh, 103px);
  }

  body.mode-camera-approach .hypersonic-boost-mult {
    --v7-mult-top: 44px;
  }



  .flew-away {
    bottom: 32px;
  }

  .control-panel {
    padding: 14px;
  }
}


.modal.modal-round-info {
  width: min(480px, calc(100vw - 32px));
}

.modal.modal-round-info,
.modal.modal-round-info * {
  font-family: "Nunito", system-ui, sans-serif;
}

/* Title bar — "Round Info" + close */
.round-info-head {
  align-items: center;
}

.round-info-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.round-info-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #a0a0a0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.round-info-title strong {
  color: #f3f3f3;
  font-weight: 700;
  margin-left: 4px;
}

.round-copy-inline {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: #6a6a6a;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}

.round-copy-inline:hover,
.round-copy-inline:focus-visible {
  color: #f3f3f3;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.round-copy-inline.copied {
  color: #9af7b8;
}

/* Body is the flex column that stacks: date → big result → tabs → active panel.
   Inherits flex:1 + min-height:0 + overflow:hidden from .modal-body so the
   modal caps total height and the active panel scrolls internally. */
.round-info-body.round-info-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 20px;
}

/* Header info block (date + big result) — flex: 0 0 auto keeps them
   pinned at natural height when the modal hits the 84vh cap, so only
   the active tab panel shrinks. */
.round-info-date {
  margin: 0;
  text-align: center;
  color: #a0a0a0;
  font-size: 12px;
  line-height: 1.2;
  flex: 0 0 auto;
}

.round-info-big-result {
  margin: 2px 0 6px;
  text-align: center;
  font-size: clamp(44px, 5.6vw, 62px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f3f3f3;
  flex: 0 0 auto;
}

.round-info-big-result.green { color: #35cf58; }
.round-info-big-result.lime { color: #97f049; }
.round-info-big-result.warm { color: #ffcf6b; }

/* Tab switcher — same spec as .tabbar / .tab in the left sidebar.
   flex: 0 0 auto keeps the switcher pinned at natural height when the
   body is height-capped. */
.round-info-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid #151515;
  background: #151515;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}

.round-info-tab {
  border: 0;
  background: #151515;
  color: #a0a0a0;
  font: inherit;
  font-size: 13px;
  padding: 8px 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.round-info-tab:not(.active):hover,
.round-info-tab:not(.active):focus-visible {
  background: #1f1f1f;
  color: #f3f3f3;
  border-radius: 10px;
  outline: none;
}

.round-info-tab.active {
  background: #343434;
  color: #ffffff;
  border-radius: 10px;
}

/* Tab panels — active one fills remaining space and scrolls internally
   so the title, date, big result, and tab switcher all stay pinned at top. */
.round-info-tab-panel {
  display: none;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.round-info-tab-panel.active {
  display: flex;
  /* flex-basis: auto so the panel sizes to content when the modal is
     shorter than 84vh; flex-shrink: 1 + min-height: 0 + overflow-y: auto
     let it shrink and scroll when content would exceed the cap. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Subtle scrollbar so users see it's scrollable */
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a transparent;
}

.round-info-tab-panel.active::-webkit-scrollbar {
  width: 8px;
}

.round-info-tab-panel.active::-webkit-scrollbar-track {
  background: transparent;
}

.round-info-tab-panel.active::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 4px;
}

.round-info-tab-panel.active::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

.round-info-section {
  display: grid;
  gap: 8px;
}

.round-info-section h3 {
  margin: 0;
  font-size: 13px;
  color: #c3c3c3;
  font-weight: 700;
}

.round-info-section p {
  margin: 0;
  font-size: 12px;
  color: #a0a0a0;
}

.round-info-label {
  font-size: 12px;
  color: #a0a0a0;
  line-height: 1.2;
}

.round-info-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.round-info-verify-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #f3f3f3;
  word-break: break-all;
}

/* Actions (What is Provably Fair? link) */
.round-info-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

/* Leaderboard container — renders the sidebar's .player-row children
   inside a rounded bordered box. Sized by content so the parent panel
   (.round-info-tab-panel.active) scrolls it when rows overflow. */
.round-leaderboard {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  border: 1px solid #3f3f3f;
  border-radius: 12px;
  overflow: hidden;
  background: #272727;
}

.round-leaderboard .player-row:last-child {
  border-bottom: 0;
}

.round-leaderboard-empty {
  padding: 24px;
  text-align: center;
  color: #a0a0a0;
  font-size: 12px;
}

.round-copy-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--n-border-soft);
  background: var(--n-bg);
  border-radius: 16px;
  padding: 6px 8px 6px 12px;
}

.round-copy-field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--n-text);
  font-size: 12px;
  line-height: 1.3;
  outline: none;
  padding: 0;
}

.round-copy-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--n-border);
  border-radius: 10px;
  background: var(--n-surface);
  color: var(--n-icon);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.round-copy-btn:hover,
.round-copy-btn:focus-visible {
  background: var(--n-hover-bg);
  border-color: var(--n-hover-border);
  color: var(--n-hover-text);
  outline: none;
}

.round-copy-btn.copied {
  border-color: #4f9f67;
  color: #9af7b8;
}

.round-client-list {
  display: grid;
  gap: 8px;
}

.round-client-card {
  border: 1px solid var(--n-border-soft);
  border-radius: 16px;
  background: var(--n-bg);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.round-client-line {
  font-size: 12px;
  color: var(--n-text);
  line-height: 1.3;
}

.round-client-line .muted {
  color: var(--n-icon);
}

.round-fair-link {
  border: 0;
  background: none;
  color: #9ca5a6;
  font-size: 12px;
  cursor: pointer;
  justify-self: center;
  padding: 2px 0;
}

.round-fair-link:hover,
.round-fair-link:focus-visible {
  color: #c4cbcc;
  outline: none;
}

@media (max-width: 1024px) {
  .scene {
    --mobile-topbar-height: 104px;
    height: auto;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
    overflow: visible;
  }

  .scene.mobile-sidebar-open {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand utility"
      "history history";
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }

  .brand {
    grid-area: brand;
    width: clamp(118px, 36vw, 138px);
  }

  .utility-strip {
    grid-area: utility;
    justify-self: end;
  }

  .history-strip {
    grid-area: history;
    width: 100%;
    justify-content: flex-start;
    padding: 7px 0;
  }

  .mobile-left-icons {
    display: none;
  }

  .sidebar-live-bets-summary {
    display: none !important;
  }

  .mobile-history-right {
    margin-left: 0;
    margin-right: auto;
    gap: 6px;
  }

  .layout {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: calc(100dvh - var(--mobile-topbar-height, 104px));
    padding: 0 12px 8px;
    overflow: visible;
  }

  .sidebar {
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px;
    gap: 10px;
    order: 2;
    overflow: visible;
  }

  .sidebar > .tabbar {
    position: sticky;
    top: 0;
    z-index: 4;
    flex: 0 0 auto;
  }

  .tabbar.mobile-sub-tabs {
    display: none;
  }

  .players {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .chat-lines {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-footer {
    display: none;
  }

  .game-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(100dvh - var(--mobile-topbar-height, 104px) - 8px);
    height: calc(100dvh - var(--mobile-topbar-height, 104px) - 8px);
    min-height: 0;
    gap: 8px;
    padding-bottom: 0;
    order: 1;
  }

  .sky-stage {
    flex: 1;
    min-height: 180px;
  }

  .ground-stage {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .control-panel {
    width: calc(100% - 4px);
    margin: 0 auto;
    padding: 20px;
  }

  .sidebar-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-height: 740px) and (min-width: 1025px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .game-column {
    min-height: 560px;
    grid-template-rows: minmax(0, 1fr) auto;
  }
}

.hidden {
  display: none !important;
}

body.modal-open {
  overflow: hidden;
}

.menu-anchor {
  position: relative;
}

.menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 190px;
  z-index: 40;
  background: #272727;
  border: 1px solid #3f3f3f;
  border-radius: 10px;
  padding: 6px;
  /* The version list grows with every build; without a ceiling the newest rows
     fall below the fold with no way to reach them. */
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-dropdown::-webkit-scrollbar {
  width: 6px;
}

.menu-dropdown::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #4b4b4b;
}

.menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #f3f3f3;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: #313131;
  color: #ffffff;
  outline: none;
}

.menu-divider {
  height: 1px;
  background: #3f3f3f;
  margin: 6px 4px;
}

.menu-switch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: #f3f3f3;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.menu-switch-row:hover {
  background: #313131;
}

.menu-switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.menu-switch-slider {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #525252;
  background: #232323;
}

.menu-switch-slider::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #919191;
}

.menu-switch-input:checked + .menu-switch-slider {
  background: #224734;
  border-color: #35cf58;
}

.menu-switch-input:checked + .menu-switch-slider::after {
  transform: translateX(14px);
  background: #35cf58;
}

.menu-switch-input:focus-visible + .menu-switch-slider {
  outline: 1px solid #6a6a6a;
  outline-offset: 2px;
}

.history-chip,
.mobile-tab-btn,
.utility-chip,
.tab,
.topbets-pill,
.quick-reactions button,
.bet-btn,
.adjust-btn,
.amount-box,
.reaction-btn,
.menu-item,
.menu-switch-row,
.menu-switch-slider,
.menu-switch-slider::after,
.fairness,
.history-row,
.modal-action,
.modal-close,
.cancel-bet-btn,
.missile-add-btn {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease, height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.power-card {
  transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.32s cubic-bezier(0.22, 1, 0.36, 1), right 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}

.history-chip,
.mobile-tab-btn,
.utility-chip,
.tab,
.topbets-pill,
.quick-reactions button,
.quick-reactions button *,
.bet-btn,
.bet-btn *,
.adjust-btn,
.adjust-btn *,
.reaction-btn,
.reaction-btn *,
.menu-item,
.menu-item *,
.menu-switch-row,
.menu-switch-row *,
.power-card,
.power-card *,
.fairness,
.fairness *,
.history-row,
.history-row *,
.modal-action,
.modal-action *,
.modal-close,
.cancel-bet-btn,
.cancel-bet-btn *,
.missile-add-btn,
.icon-pod {
  user-select: none;
  -webkit-user-select: none;
}


.history-chip:hover,
.history-chip:focus-visible {
  transform: translateY(-1px);
  background: #3a3a3a;
  border-color: #6a6a6a;
  outline: none;
}

.utility-chip:hover,
.utility-chip:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: translateY(-1px);
  opacity: 0.86;
  outline: none;
}

.utility-chip.muted-btn {
  opacity: 0.65;
}

.tab:not(.active):hover,
.tab:not(.active):focus-visible {
  background: #1f1f1f;
  color: #f3f3f3;
  border-radius: 10px;
  outline: none;
}

.player-row:hover {
  background: #313131;
}

.quick-reactions button:hover,
.quick-reactions button:focus-visible {
  background: #474747;
  border-color: #5a5a5a;
  outline: none;
}

.bet-btn:hover,
.bet-btn:focus-visible {
  background: #14ff89;
  outline: none;
}

.bet-btn.state-bet:disabled:hover,
.bet-btn.state-bet:disabled:focus-visible {
  background: #4b4b4b;
  transform: none;
}

.bet-btn.state-bet.hypersonic-mode:hover,
.bet-btn.state-bet.hypersonic-mode:focus-visible {
  background: #f17436;
}

.bet-btn.state-bet.hypersonic-mode:disabled:hover,
.bet-btn.state-bet.hypersonic-mode:disabled:focus-visible {
  background: #73391f;
  transform: none;
}

.bet-btn.state-cashout:hover,
.bet-btn.state-cashout:focus-visible {
  background: #ffc940;
}

.bet-btn.state-cashout.bomb-cashout:hover,
.bet-btn.state-cashout.bomb-cashout:focus-visible {
  background: #ffc940;
}

.bet-btn.state-cashout:active,
.power-card.cashout-all:active,
.power-card.take-half:active,
.secondary-cashout-btn:active {
  transform: scale(1.035);
}

.bet-btn.state-cashout:active {
  background: #ffe36a;
}

.bet-btn.state-cashout.bomb-cashout:active {
  background: #ffe36a;
}

.action-stack.pod-mode.pod-before-save #betBtn.state-cashout:hover,
.action-stack.pod-mode.pod-before-save #betBtn.state-cashout:focus-visible {
  background: #5a5a5a;
  transform: none;
}

.action-stack.pod-mode.pod-before-save #betBtn.state-cashout:active {
  background: #5a5a5a;
  transform: none;
}

.bet-btn.state-drop:hover,
.bet-btn.state-drop:focus-visible {
  background: #e86a1c;
  transform: none;
}

.bet-btn.state-cancel:hover,
.bet-btn.state-cancel:focus-visible {
  background: #c93a3a;
}

.power-card.cancel-addon:hover,
.power-card.cancel-addon:focus-visible {
  background: #444444;
  transform: none;
  outline: none;
}

.missile-add-btn:hover,
.missile-add-btn:focus-visible {
  background: #14ff89;
  border-color: #82ffc0;
  outline: none;
  transform: translateY(-1px);
}

.cancel-bet-btn:hover,
.cancel-bet-btn:focus-visible {
  background: #c93a3a;
  border-color: #c93a3a;
  outline: none;
}

.secondary-cashout-btn:hover,
.secondary-cashout-btn:focus-visible {
  background: #2c2c2c;
  border-color: #585858;
  outline: none;
}

.bet-btn.state-accepted:hover,
.bet-btn.state-accepted:focus-visible {
  background: #c1c1c1;
  transform: none;
}

.bet-btn.state-accepted.hypersonic-mode:hover,
.bet-btn.state-accepted.hypersonic-mode:focus-visible {
  background: #ea6528;
  transform: none;
}

.bet-btn.state-missile-loader:hover,
.bet-btn.state-missile-loader:focus-visible {
  background: #2a2a2a;
  outline: none;
  transform: none;
}

.bet-btn.state-missile-loader .btn-missile-add:hover,
.bet-btn.state-missile-loader .btn-missile-add:focus-visible {
  background: #14ff89;
}

.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-add:hover,
.bet-btn.state-missile-loader.hypersonic-mode .btn-missile-add:focus-visible {
  background: #f17436;
}

.bet-btn.state-missile-loader.missile-add-disabled .btn-missile-add:hover,
.bet-btn.state-missile-loader.missile-add-disabled .btn-missile-add:focus-visible,
.bet-btn.state-missile-loader.hypersonic-mode.missile-add-disabled .btn-missile-add:hover,
.bet-btn.state-missile-loader.hypersonic-mode.missile-add-disabled .btn-missile-add:focus-visible {
  background: #2a2a2a;
}

.bet-btn.state-missile-loader:disabled,
.bet-btn.state-missile-loader:disabled:hover,
.bet-btn.state-missile-loader:disabled:focus-visible {
  background: #2a2a2a;
  border-color: #3f3f3f;
  cursor: default;
  transform: none;
}

.bet-btn.state-missile-loader:disabled .btn-missile-count,
.bet-btn.state-missile-loader:disabled .btn-missile-label,
.bet-btn.state-missile-loader:disabled .btn-missile-price,
.bet-btn.state-missile-loader:disabled .btn-missile-add {
  color: #6a6a6a;
  border-color: #3f3f3f;
  background: #2a2a2a;
}

.bet-btn.state-missile-loader:disabled .btn-missile-icon {
  opacity: 0.32;
}

.bet-btn.state-ended:hover,
.bet-btn.state-ended:focus-visible,
.bet-btn.state-win:hover,
.bet-btn.state-win:focus-visible,
.bet-btn.state-saved:hover,
.bet-btn.state-saved:focus-visible {
  transform: none;
  cursor: default;
}

.adjust-btn:hover,
.adjust-btn:focus-visible,
.amount-box:hover,
.amount-box:focus-visible {
  background: #454545;
  color: #f3f3f3;
  outline: none;
}

.power-card:hover {
  background: #343434;
  border-color: #525252;
  transform: translateY(-1px);
}


.power-card.disabled:hover,
.power-card.active-addon:hover {
  transform: none;
}

.power-card.disabled:hover {
  background: #2a2a2a; /* Neutral 875 — keep disabled look on hover */
  border-color: #3f3f3f; /* Neutral 700 */
}

.power-card.hypersonic-accepted:hover,
.power-card.hypersonic-accepted:focus-visible {
  background: #c1c1c1;
  border-color: transparent;
  transform: none;
  outline: none;
  cursor: default;
}

@keyframes bet-btn-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes addon-sequence-pending {
  0% { transform: translateY(0) scale(1); }
  54% { transform: translateY(-2px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}

.bet-btn.shake,
.power-card.shake {
  animation: bet-btn-shake 0.36s ease-in-out;
}

.power-card.active-addon:hover {
  background: #2a2a2a;
  border-color: #4a4a4a;
}

.power-card.cashout-all:hover,
.power-card.take-half:hover {
  background: #2c2c2c;
  border-color: #585858;
  transform: translateY(-1px);
}

.power-card.docked:hover {
  background: #2a2a2a;
  border-color: #4a4a4a;
  transform: none;
}

.fairness {
  cursor: pointer;
}

.fairness:hover,
.fairness:focus-visible {
  color: #d0d0d0;
  outline: none;
}

.name.lime {
  color: var(--muted);
}

.new-message {
  animation: messageIn 0.3s ease-out;
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop .modal {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.modal-backdrop.is-open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  max-height: min(84vh, 920px);
  background: var(--shell); /* #272727 — matches left sidebar panel bg */
  border: 1px solid #3f3f3f;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal.modal-wide {
  width: min(520px, calc(100vw - 32px));
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #3f3f3f;
  flex: 0 0 auto;
}

.modal-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #f3f3f3;
}

.modal-close {
  width: 28px;
  height: 28px;
  border: 1px solid #525252;
  border-radius: 6px;
  background: #313131;
  color: #c3c3c3;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: #3b3b3b;
  border-color: #6a6a6a;
  outline: none;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.info-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #c3c3c3;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
}

/* History X + Provably Fair modal — reuses provably-settings language so
   both provably-fair surfaces feel like one family. */
.modal.modal-provably-history {
  width: min(460px, calc(100vw - 32px));
}

.provably-history-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.provably-history-lead {
  margin: 0;
  color: #aeb7b8;
  font-size: 13px;
  line-height: 1.35;
}

.provably-history-section {
  display: grid;
  gap: 8px;
}

.provably-history-section h3 {
  margin: 0;
  color: #d0d6d7;
  font-size: 13px;
  font-weight: 500;
}

.provably-history-input {
  width: 100%;
  border: 1px solid var(--n-border);
  background: var(--n-surface);
  color: var(--n-text);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, background .15s, color .15s;
}

.provably-history-input:hover {
  background: var(--n-hover-bg);
  border-color: var(--n-hover-border);
  color: var(--n-hover-text);
}

.provably-history-input:focus-visible {
  border-color: var(--n-hover-border);
  color: var(--n-hover-text);
  background: var(--n-hover-bg);
}

.provably-history-btn {
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #151515;
  font-family: inherit;
  font-size: 13px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
}

.provably-history-btn:hover,
.provably-history-btn:focus-visible {
  background: #1aff94;
  outline: none;
}

.provably-history-result {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  color: #9ca5a6;
  line-height: 1.4;
}

.provably-history-result.is-ok   { color: #9af7b8; }
.provably-history-result.is-err  { color: #ff9696; }

.provably-history-table {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

/* History rows (rounded, neutral-palette variant — matches docs .row-history) */
.history-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--n-border-soft);
  background: var(--n-bg);
  color: var(--n-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.history-row:hover,
.history-row:focus-visible {
  border-color: var(--n-hover-border);
  background: var(--n-hover-bg);
  color: var(--n-hover-text);
  outline: none;
}

.history-row > span:nth-child(2) { color: #35cf58; }    /* crash value */
.history-row > span:nth-child(3) { color: var(--n-icon); font-size: 11px; }  /* seed */
.history-row > span:nth-child(4) { color: var(--n-icon); font-size: 11px; }  /* nonce */

@media (max-width: 1024px) {
  .menu-dropdown {
    width: 180px;
  }

  .history-row {
    grid-template-columns: auto auto 1fr;
    font-size: 12px;
  }

  .history-row > span:nth-child(4) {
    display: none;
  }

  .round-info-meta {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .round-info-label {
    font-size: 12px;
  }

  .round-info-meta-item strong {
    font-size: 13px;
  }

  .round-copy-field {
    border-radius: 12px;
  }

  .round-client-card {
    border-radius: 12px;
  }

  .round-result-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .previous-result {
    min-height: 90px;
    padding: 8px 6px;
  }

  .previous-result-value {
    font-size: 42px;
  }
}

#playerRows {
  min-height: 0;
}

.player-row.active-bet {
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.player-row.active-bet:hover {
  background: rgba(49, 49, 49, 0.78);
}

.player-row.cashed-out .amount {
  color: var(--green);
}

/* Gameplay visual port from source Game animation */
.sky-stage {
  border-radius: 12px;
  border: 1px solid #748ba1;
  background: #73a0cb;
  isolation: isolate;
}

body.asset-pack-v2 .sky-stage {
  border-color: #6f8c88;
  background: #abc8c2;
}

body.asset-pack-v4 .sky-stage {
  border-color: #777b7d;
  background: linear-gradient(to bottom, #4c7794 0%, #708ea0 30%, #9bb2bd 62%, #c3d1d6 84%, #d5e1e4 100%);
}

body.asset-pack-train .sky-stage {
  border-color: #78a88c;
  background: #9fceb9;
}

@keyframes v4BayDoorFlash {
  0% {
    opacity: 0;
    transform: rotate(-5deg) scaleX(0.25);
  }
  24%, 72% {
    opacity: 0.82;
    transform: rotate(-5deg) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(-5deg) scaleX(0.42);
  }
}

.sky-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #5b9fd4 0%, #7bb8e3 44%, #a3cee8 100%);
  z-index: 0;
  transition: background 0.6s ease;
}

body.asset-pack-train .sky-bg {
  background:
    radial-gradient(circle at 50% 47%, rgba(250, 225, 168, 0.38) 0%, rgba(250, 225, 168, 0.18) 28%, rgba(250, 225, 168, 0) 52%),
    linear-gradient(to bottom, #82bfaa 0%, #9fceb9 42%, #c7ddbd 66%, #f0d7a6 100%);
}

.sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sky-clouds {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 100%;
  will-change: background-position, clip-path, opacity, transform;
}

.clouds-layer {
  z-index: 1;
}

.cloud-distant-layer {
  clip-path: inset(0 0 var(--cloud-distant-floor, 43%) 0);
  background-image: none;
  background-size: auto var(--cloud-distant-bg-height, 104%);
}

.cloud-close-layer {
  top: 4%;
  z-index: 10;
  clip-path: inset(0 0 var(--cloud-close-floor, 37%) 0);
  background-image: none;
  background-size: auto var(--cloud-close-bg-height, 108%);
}

body.asset-pack-v2 .sky-stage {
  --cloud-distant-floor: 48%;
  --cloud-close-floor: 42%;
}

body.asset-pack-v4 .clouds-layer {
  z-index: 4;
  mix-blend-mode: normal;
}

body.asset-pack-v4 .cloud-close-layer {
  z-index: 10;
}

body.asset-pack-train .cloud-distant-layer {
  top: 1.5%;
  z-index: 3;
  clip-path: none;
  background-image: none;
  background-size: 550px auto;
  background-position: 0 1.5%;
  opacity: 0.96;
}

body.asset-pack-train .cloud-close-layer {
  display: none;
}

/* "V2" (v6) countdown clouds — 3 clouds drift across, covering the plane during the countdown. */
.nova-countdown-clouds {
  position: absolute;
  inset: 0;
  z-index: 20; /* above the aircraft-layer (11), below the multiplier (29) / countdown (31) */
  pointer-events: none;
  overflow: hidden;
}

/* V3 uses V2's naturally feathered upper clouds without its lowest strip. */
body.asset-pack-v7 .nova-countdown-clouds {
  clip-path: none;
}

body.asset-pack-v7 .nova-cloud-3 {
  display: none;
}

body.asset-pack-v7 .nova-cloud-1 {
  top: calc(25% - 40px);
}

body.asset-pack-v7 .nova-cloud-2 {
  top: calc(34% - 40px);
}

@media (min-width: 1025px) {
  body.asset-pack-v7 .nova-cloud-1 {
    top: 15%;
    width: auto;
    height: 11.1%;
  }

  body.asset-pack-v7 .nova-cloud-2 {
    top: 24%;
    width: auto;
    height: 18%;
  }
}

.nova-cloud {
  position: absolute;
  left: 0;
  height: auto;
  will-change: transform;
  user-select: none;
  transform: translate3d(0, 0, 0);
}
.nova-cloud-1 {
  top: 25%;
  width: 100%;
}
.nova-cloud-2 {
  top: 34%;
  width: 122%;
}
.nova-cloud-3 {
  top: 43%;
  width: 105%;
}

.v4-footage-noise,
.v4-footage-overlay {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v4-footage-noise {
  z-index: 27;
  opacity: 0;
  image-rendering: pixelated;
  mix-blend-mode: soft-light;
  filter: contrast(1.45) brightness(1.08);
}

.v4-footage-overlay {
  z-index: 28;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  color: rgba(232, 240, 231, 0.78);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(7px, 1.1vw, 10px);
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(28, 35, 38, 0.72);
  transition: opacity 0.25s ease;
  contain: paint;
}

body.asset-pack-v4 .v4-footage-overlay {
  display: block;
}

body.asset-pack-v4 .v4-footage-noise {
  display: none;
  opacity: 0;
}

body.asset-pack-v4 .v4-footage-overlay {
  opacity: 1;
}

body.asset-pack-train .v4-footage-overlay,
body.asset-pack-train .v4-footage-noise {
  display: none;
  opacity: 0;
}

.v4-footage-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.v4-footage-mark {
  position: absolute;
  z-index: 1;
  padding: 3px 6px;
  border: 1px solid rgba(226, 233, 225, 0.34);
  background: rgba(20, 28, 30, 0.16);
  line-height: 1;
  opacity: 0.74;
}

/* Plain bold text - no plate - so it reads as a caption, not another tag. */
.v4-footage-mark.mark-bottom-center {
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
  /* Two points up on the corner tags so the figure carries. Dark and unshadowed:
     it sits on pale sky, where the overlay's light-on-dark treatment vanishes. */
  font-size: calc(clamp(7px, 1.1vw, 10px) + 2px);
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #16242e;
  text-shadow: none;
  /* Fades and scales in on arrival, fades out when the round takes off. */
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.v4-footage-mark.mark-bottom-center.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .v4-footage-mark.mark-bottom-center {
    transform: translateX(-50%) scale(1);
    transition: opacity 0.2s ease;
  }
}

.v4-footage-mark::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(226, 233, 225, 0.62);
  opacity: 0.72;
}

.v4-footage-mark.mark-top-left {
  top: 12px;
  left: 12px;
}

.v4-footage-mark.mark-pilots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pilots-icon {
  display: block;
  width: 11px;
  height: 11px;
  fill: currentColor;
  opacity: 0.9;
}

.v4-footage-mark.mark-top-left::before {
  left: -7px;
  top: -7px;
  border-left: 2px solid;
  border-top: 2px solid;
}

.v4-footage-mark.mark-top-right {
  top: 12px;
  right: 12px;
}

.v4-footage-mark.mark-top-right::before {
  right: -7px;
  top: -7px;
  border-right: 2px solid;
  border-top: 2px solid;
}

.v4-footage-mark.mark-bottom-left {
  left: 12px;
  bottom: 12px;
}

.v4-footage-mark.mark-bottom-left::before {
  left: -7px;
  bottom: -7px;
  border-left: 2px solid;
  border-bottom: 2px solid;
}

.v4-footage-mark.mark-bottom-right {
  right: 12px;
  bottom: 12px;
}

.v4-footage-mark.mark-bottom-right::before {
  right: -7px;
  bottom: -7px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.round-cashout-hud {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 31;
  width: min(196px, calc(100% - 24px));
  padding: 8px;
  border: 1px solid rgba(226, 233, 225, 0.34);
  /* Airy translucent panel, but tinted enough that white ink survives a bright sky.
     The backdrop blur frosts whatever drifts behind (post-cashout clouds) so the
     rows stay crisp instead of washing out through the translucent body. */
  background: rgba(20, 28, 30, 0.3);
  -webkit-backdrop-filter: blur(8px) saturate(0.92);
  backdrop-filter: blur(8px) saturate(0.92);
  color: rgba(244, 249, 244, 0.98);
  /* Same face as the footage marks (B2 TEST RANGE / UNCLASSIFIED): inherit the
     overlay's Nunito 700 and swap the soft halo for a crisp drop shadow. */
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(8, 12, 12, 0.8);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  transform-origin: left bottom;
}

.round-cashout-hud::before,
.round-cashout-hud::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.round-cashout-hud::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 242, 126, 0), rgba(0, 242, 126, 0.2), rgba(255, 255, 255, 0.14), rgba(0, 242, 126, 0)),
    linear-gradient(rgba(232, 240, 231, 0.1) 1px, transparent 1px);
  background-size: 100% 100%, 100% 4px;
  opacity: 0;
  transform: translateX(-105%);
}

.round-cashout-hud::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 242, 126, 0), rgba(0, 242, 126, 0.86), rgba(0, 242, 126, 0));
  opacity: 0;
  transform: translateY(0);
}

.round-cashout-hud > * {
  position: relative;
  z-index: 1;
}

.round-cashout-hud.round-cashout-reveal {
  animation: round-cashout-hud-reveal 0.68s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.round-cashout-hud.round-cashout-reveal::before {
  animation: round-cashout-hud-sweep 0.78s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.round-cashout-hud.round-cashout-reveal::after {
  animation: round-cashout-hud-scan 0.72s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.round-cashout-hud.round-cashout-reveal .round-cashout-winners {
  animation: round-cashout-line-reveal 0.34s steps(4, end) both;
  animation-delay: 0.17s;
}

body.asset-pack-v4 .round-cashout-hud {
  bottom: 40px;
}

.round-cashout-winners {
  display: grid;
  gap: 4px;
}

.round-cashout-winner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
}

.round-cashout-winner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-cashout-winner strong {
  color: rgba(248, 252, 248, 0.98);
  font-size: 11px;
  font-weight: 700;
}

.round-cashout-empty {
  color: rgba(232, 240, 231, 0.78);
  font-size: 11px;
  font-weight: 700;
}

@keyframes round-cashout-hud-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 100% 0);
    transform: translate(-8px, 4px) scaleX(0.18) scaleY(0.12);
    filter: blur(1px) brightness(1.5);
  }
  42% {
    opacity: 1;
    clip-path: inset(0 0 82% 0);
    transform: translate(0, 0) scaleX(1) scaleY(0.16);
  }
  72% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0) scaleX(1.015) scaleY(1.03);
    filter: blur(0) brightness(1.12);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0) scale(1);
    filter: none;
  }
}

@keyframes round-cashout-hud-sweep {
  0% {
    opacity: 0;
    transform: translateX(-105%);
  }
  28% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translateX(105%);
  }
}

@keyframes round-cashout-hud-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(92px);
  }
}

@keyframes round-cashout-line-reveal {
  0% {
    opacity: 0;
    transform: translateX(-6px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .round-cashout-hud.round-cashout-reveal,
  .round-cashout-hud.round-cashout-reveal::before,
  .round-cashout-hud.round-cashout-reveal::after,
  .round-cashout-hud.round-cashout-reveal .round-cashout-winners {
    animation: none;
  }
}

body.asset-pack-v4 .sky-stage.v4-footage-hit .v4-footage-overlay::after {
  display: none;
}

body.asset-pack-v4 .sky-stage.hypersonic-dark .v4-footage-overlay {
  color: rgba(255, 238, 170, 0.72);
}

.stars-layer {
  z-index: 3;
  opacity: 0;
}

.trail-layer {
  z-index: 8;
  filter: blur(1.4px);
}

.runway-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 37%;
  z-index: 2;
  background: url('./assets/road.png') repeat-x center bottom / auto 100%;
  transform-origin: bottom center;
  transition: transform 0.22s ease;
}

.runway-layer::before {
  content: "";
  position: absolute;
  inset: 10% 5% 10%;
  border-radius: 8px;
  border: 1px solid rgba(167, 187, 205, 0.15);
}

.v2-scenery {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 100%;
  will-change: background-position, opacity, transform;
}

body.asset-pack-v2 .v2-scenery {
  display: block;
}

body.asset-pack-v4 .v2-landscape {
  display: none;
  bottom: 24.5%;
  height: 23%;
  z-index: 3;
  opacity: 0.96;
  background-image: none;
  background-size: auto 100%;
  filter: saturate(0.82) contrast(0.93) brightness(1);
  transition: transform 0.12s linear;
}

body.asset-pack-train .v2-landscape {
  display: block;
  bottom: calc(30% - 40px);
  height: 21%;
  z-index: 4;
  opacity: 1;
  background-image: url('./assets/background.png');
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 100%;
  filter: saturate(1.02) contrast(1.01);
}

.v2-mountains {
  bottom: 31%;
  height: 35%;
  z-index: 1;
  opacity: 0.58;
  background-image: url('./assets/v2/Mountains.png');
}

.v2-forest {
  bottom: 28%;
  height: 30%;
  z-index: 2;
  opacity: 0.72;
  background-image: url('./assets/v2/Forest.png');
}

.v2-landscape {
  bottom: 25%;
  height: 28%;
  z-index: 3;
  opacity: 0.82;
  background-image: url('./assets/v2/Landscape.png');
}

.v2-ground-props {
  display: none;
  position: absolute;
  left: 0;
  bottom: 30%;
  width: var(--v2-props-track-width, 2200px);
  height: 30%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
}

body.asset-pack-v2 .v2-ground-props {
  display: block;
}

.v2-prop {
  position: absolute;
  bottom: var(--prop-bottom, 0px);
  left: var(--prop-left, 0px);
  height: var(--prop-height, 82px);
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.95) contrast(0.96);
}

.v2-prop.house {
  filter: saturate(0.9) contrast(0.94);
}

.v2-prop.box {
  z-index: 2;
}

body.asset-pack-v2 .runway-layer {
  height: 42%;
  z-index: 5;
  background-size: auto 100%;
}

body.asset-pack-v4 .runway-layer {
  bottom: -6px;
  height: 37%;
  z-index: 5;
  background: url('./assets/b2/base_road.png?v=20260523-b2-road-refresh') repeat-x center bottom / auto 100%;
  filter: saturate(0.88) contrast(0.96) brightness(0.98);
  transition: transform 0.12s linear;
}

body.asset-pack-v2 .runway-layer::before {
  display: none;
}

body.asset-pack-v4 .runway-layer::before {
  display: none;
}

body.asset-pack-train .runway-layer {
  bottom: -40px;
  height: 33%;
  z-index: 7;
  background-image: url('./assets/rails.png');
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 100%;
  filter: saturate(1.02) contrast(1.02);
  transition: none;
}

body.asset-pack-train .runway-layer::before {
  display: none;
}

.aircraft-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

/* V1 in play: the aircraft rides above the drifting clouds (20), still under
   the multiplier (29). */
.aircraft-layer.plane-above-clouds {
  z-index: 22;
}

.aircraft {
  position: absolute;
  --jet-scale: 1;
  width: calc(170px * var(--jet-scale));
  height: calc(66px * var(--jet-scale));
  overflow: visible;
  transform-origin: center center;
  will-change: transform;
}

.aircraft .jet-body,
.aircraft .jet-wing,
.aircraft .jet-tail {
  display: none;
}

.jet-shadow {
  position: absolute;
  left: calc(-2px * var(--jet-scale));
  top: calc(44px * var(--jet-scale));
  width: calc(175px * var(--jet-scale));
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  transform-origin: center center;
  will-change: opacity, transform;
}

.jet-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(170px * var(--jet-scale));
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  filter: none;
  transition: filter 0.22s ease;
}

body.asset-pack-v2 .aircraft {
  width: calc(180px * var(--jet-scale));
  height: calc(82px * var(--jet-scale));
}

body.asset-pack-v2 .jet-plane {
  left: calc(-17px * var(--jet-scale));
  top: calc(-31px * var(--jet-scale));
  width: calc(220px * var(--jet-scale));
  z-index: 5;
}

body.asset-pack-v2 .jet-plane.v2-hypersonic-frame {
  left: calc(-36px * var(--jet-scale));
  top: calc(-38px * var(--jet-scale));
  width: calc(255px * var(--jet-scale));
}

body.asset-pack-v2 .jet-plane.v2-flyaway-frame {
  left: calc(-38px * var(--jet-scale));
  top: calc(-28px * var(--jet-scale));
  width: calc(255px * var(--jet-scale));
}

body.asset-pack-v2 .jet-shadow {
  left: calc(-3px * var(--jet-scale));
  top: calc(58px * var(--jet-scale));
  width: calc(192px * var(--jet-scale));
  opacity: 0.2;
}

body.asset-pack-v3 .aircraft {
  width: calc(265.2px * var(--jet-scale));
  height: calc(103.2px * var(--jet-scale));
}

body.asset-pack-v3 .jet-plane {
  left: calc(-29.3px * var(--jet-scale));
  top: calc(-1px * var(--jet-scale));
  width: calc(265.2px * var(--jet-scale));
  filter: brightness(0.72) contrast(1.08) saturate(0.92);
}

body.asset-pack-v3 .engine-flame {
  left: calc(var(--v3-thrust-left, 84.2px) * var(--jet-scale));
  top: calc(var(--v3-thrust-top, 34px) * var(--jet-scale));
  width: calc(18px * var(--jet-scale));
  height: calc(18px * var(--jet-scale));
  transform: translateY(-50%) rotate(-6deg);
  z-index: 5;
}

body.asset-pack-v4-aircraft .aircraft {
  width: calc(318px * var(--jet-scale));
  height: calc(126px * var(--jet-scale));
  transform-origin: center bottom;
  z-index: 26;
}

body.asset-pack-v4-aircraft .aircraft::after {
  content: "";
  position: absolute;
  left: calc(88px * var(--jet-scale));
  top: calc(30px * var(--jet-scale));
  width: calc(40px * var(--jet-scale));
  height: calc(7px * var(--jet-scale));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(2, 4, 5, 0.78), rgba(0, 0, 0, 0.08));
  opacity: 0;
  transform: rotate(-5deg) scaleX(0.35);
  transform-origin: center center;
  pointer-events: none;
  z-index: 7;
}

body.asset-pack-v4-aircraft .aircraft.v4-bay-open::after {
  animation: v4BayDoorFlash 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.asset-pack-v4-aircraft .jet-plane {
  left: calc(-75px * var(--jet-scale));
  top: calc(-96px * var(--jet-scale));
  width: calc(350px * var(--jet-scale));
  z-index: 28;
  filter: brightness(0.82) contrast(1.12) saturate(0.86);
}

body.asset-pack-v4-aircraft .b2-sequence-plane {
  position: absolute;
  left: calc(-75px * var(--jet-scale));
  top: calc(-96px * var(--jet-scale));
  width: calc(350px * var(--jet-scale));
  height: calc(197px * var(--jet-scale));
  z-index: 28;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint size;
  transform: translateZ(0);
  filter: brightness(0.82) contrast(1.12) saturate(0.86);
}

body.asset-pack-v4-aircraft .b2-sequence-atlas {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(3500px * var(--jet-scale));
  height: calc(985px * var(--jet-scale));
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* The V11/V12 rotation sprite rides in the flight sprite's window. Two rows of
   the same 350x197 grid, so only the atlas height differs. */
body.asset-pack-v4-aircraft .b2-rotation-atlas {
  height: calc(394px * var(--jet-scale));
}

/* V19's roll-in atlas is the same grid, 19 rows deep (131 roll frames plus
   59 settle frames). On V19 this img only ever shows the entry atlas - no
   exit rotations there. */
body.mode-v19 .b2-rotation-atlas {
  height: calc(3743px * var(--jet-scale));
}

/* Invisible, never display:none, on V19: the browser keeps the big atlas
   decoded and layered between rounds, so each roll-in starts without a
   re-decode hitch. */
body.mode-v19 .b2-rotation-atlas.hidden {
  display: block;
  visibility: hidden;
}

body.asset-pack-v4-aircraft .b2-sequence-atlas.rotation-hidden {
  visibility: hidden;
}

.b2-bay-bombs-label {
  display: none;
  position: absolute;
  left: calc(var(--bay-label-x, 0px) * var(--jet-scale));
  top: calc(var(--bay-label-y, 0px) * var(--jet-scale));
  transform: translate(-50%, -50%);
  z-index: 31;
  pointer-events: none;
  user-select: none;
  /* Light stencil ink — black vanished against the near-black door panel. */
  color: rgb(233, 238, 235);
  text-shadow: 0 calc(1px * var(--jet-scale)) calc(1px * var(--jet-scale)) rgba(0, 0, 0, 0.85);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: calc(10px * var(--jet-scale));
  font-weight: 900;
  letter-spacing: calc(0.6px * var(--jet-scale));
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.b2-bay-bombs-label.bay-label-visible {
  opacity: 0.5;
}

.b2-bay-bombs-label .bay-bomb-icon {
  display: block;
  height: calc(7px * var(--jet-scale));
  width: auto;
  aspect-ratio: 331 / 73;
  fill: currentColor;
}

body.asset-pack-v6 .b2-bay-bombs-label,
body.asset-pack-v7 .b2-bay-bombs-label {
  display: inline-flex;
  align-items: center;
  gap: calc(3px * var(--jet-scale));
}

/* The bay slab carries the SPIRIT wordmark (V15 and V16 wear V18's slab), so
   the little bomb icon is redundant - the count stands alone, larger. */
body.mode-v15 .b2-bay-bombs-label .bay-bomb-icon,
body.mode-v19 .b2-bay-bombs-label .bay-bomb-icon,
body.mode-v16 .b2-bay-bombs-label .bay-bomb-icon,
body.mode-v17 .b2-bay-bombs-label .bay-bomb-icon,
body.mode-v18 .b2-bay-bombs-label .bay-bomb-icon {
  display: none;
}

body.mode-v15 .b2-bay-bombs-label,
body.mode-v19 .b2-bay-bombs-label,
body.mode-v16 .b2-bay-bombs-label,
body.mode-v17 .b2-bay-bombs-label,
body.mode-v18 .b2-bay-bombs-label {
  font-size: calc(19px * var(--jet-scale));
  letter-spacing: calc(0.8px * var(--jet-scale));
}

/* V6's panel is the shallowest of the family, so the shared 19px count sat
   close to its edges. At 17px the digits' ink spans rows 29-51 of the art's
   65 - the same band the SPIRIT wordmark occupies - so the two read as one
   line of type on the panel rather than the count crowding it. */
body.mode-v23 .b2-bay-bombs-label,
body.mode-v24 .b2-bay-bombs-label {
  font-size: calc(17px * var(--jet-scale));
  letter-spacing: calc(0.7px * var(--jet-scale));
}

/* Standing alone on the slab, the count carries the readout by itself, so it
   is not dimmed the way the icon-and-number pair was. */
body.mode-v15 .b2-bay-bombs-label.bay-label-visible,
body.mode-v19 .b2-bay-bombs-label.bay-label-visible,
body.mode-v16 .b2-bay-bombs-label.bay-label-visible,
body.mode-v17 .b2-bay-bombs-label.bay-label-visible,
body.mode-v18 .b2-bay-bombs-label.bay-label-visible {
  opacity: 0.92;
}

.aircraft-wing-strobe {
  display: none;
  position: absolute;
  left: calc(var(--wingtip-x, -52px) * var(--jet-scale));
  top: calc(var(--wingtip-y, -46px) * var(--jet-scale));
  width: calc(10px * var(--jet-scale));
  height: calc(10px * var(--jet-scale));
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 30;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--wingtip-opacity, 1);
}

body.asset-pack-v4-aircraft .aircraft-wing-strobe {
  display: block;
}

.aircraft-wing-strobe::before,
.aircraft-wing-strobe::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: aircraft-wingtip-double-blink 1.52s linear infinite;
}

.aircraft-wing-strobe::before {
  width: calc(3px * var(--jet-scale));
  height: calc(3px * var(--jet-scale));
  background: #fff8d7;
  box-shadow:
    0 0 calc(4px * var(--jet-scale)) rgba(255, 255, 230, 0.95),
    0 0 calc(11px * var(--jet-scale)) rgba(255, 246, 170, 0.86),
    0 0 calc(22px * var(--jet-scale)) rgba(255, 232, 96, 0.48);
}

.aircraft-wing-strobe::after {
  width: calc(13px * var(--jet-scale));
  height: calc(13px * var(--jet-scale));
  background: radial-gradient(circle, rgba(255, 251, 216, 0.7) 0 12%, rgba(255, 220, 96, 0.28) 34%, transparent 72%);
  animation-delay: 0.012s;
}

@keyframes aircraft-wingtip-double-blink {
  0%, 7% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  13% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  25%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
  }
}

body.asset-pack-train .aircraft {
  width: var(--train-total-w, 960px);
  height: var(--train-loco-h, 160px);
  transform-origin: left top;
  z-index: 18;
}

body.asset-pack-train .jet-plane {
  display: none;
}

.train-locomotive-sprite {
  display: none;
  position: absolute;
  left: var(--train-loco-left, 680px);
  top: -2px;
  width: var(--train-loco-w, 320px);
  height: var(--train-loco-h, 160px);
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  contain: layout size;
  transform: translateZ(0);
}

body.asset-pack-train .train-locomotive-sprite {
  display: block;
}

.train-locomotive-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  contain: layout paint size;
  transform: translateZ(0);
  filter: drop-shadow(0 calc(5px * var(--jet-scale)) calc(3px * var(--jet-scale)) rgba(53, 33, 20, 0.2));
}

.train-locomotive-atlas {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.train-smoke-sequence {
  display: none;
  position: absolute;
  left: calc((-126px * var(--jet-scale)) + 10px);
  top: calc(-54px * var(--jet-scale));
  z-index: 1;
  width: calc(508px * var(--jet-scale));
  height: calc(156px * var(--jet-scale));
  max-width: none;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
}

body.asset-pack-train .train-smoke-sequence {
  display: block;
}

.train-smoke-sequence.active {
  opacity: 0.92;
}

body.asset-pack-train .jet-shadow,
body.asset-pack-train .engine-flame,
body.asset-pack-train .jet-wheel,
body.asset-pack-train .b2-sequence-plane,
body.asset-pack-train .aircraft-wing-strobe,
body.asset-pack-train .pod-model,
body.asset-pack-train .parachute-model,
body.asset-pack-train .v4-impact-effect {
  display: none;
}

.train-detached-railcars {
  position: absolute;
  inset: 0;
  z-index: 17;
  overflow: visible;
  pointer-events: none;
}

.train-railcar,
.train-detached-railcar {
  position: absolute;
  z-index: 3;
  transform-origin: center 86%;
  will-change: transform, opacity;
  pointer-events: none;
}

.train-railcar img,
.train-detached-railcar img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 calc(4px * var(--jet-scale)) calc(2px * var(--jet-scale)) rgba(52, 31, 18, 0.22));
}

.train-railcar.active img {
  filter:
    drop-shadow(0 0 calc(4px * var(--jet-scale)) rgba(36, 93, 70, 0.24))
    drop-shadow(0 calc(4px * var(--jet-scale)) calc(2px * var(--jet-scale)) rgba(52, 31, 18, 0.22));
}

.train-railcar-amount {
  position: absolute;
  left: 50%;
  top: calc(-78px * var(--jet-scale) - 4px);
  z-index: 6;
  min-width: max(40px, calc(106px * var(--jet-scale)));
  padding: max(2px, calc(6px * var(--jet-scale))) max(6px, calc(14px * var(--jet-scale))) max(2px, calc(5px * var(--jet-scale)));
  border: max(1px, calc(2px * var(--jet-scale))) solid rgba(36, 96, 70, 0.95);
  border-radius: 999px;
  background: rgba(224, 236, 202, 0.56);
  color: #225a42;
  font-weight: 800;
  font-size: clamp(17px, calc(32px * var(--jet-scale) + 8px), 24px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: none;
  box-shadow: 0 calc(6px * var(--jet-scale)) calc(14px * var(--jet-scale)) rgba(55, 85, 56, 0.1);
}

.train-railcar-amount.cashed {
  border-color: rgba(34, 96, 70, 0.88);
  background: rgba(243, 223, 174, 0.76);
  color: #1f4f39;
}

body.asset-pack-train .flight-amount {
  display: none;
}

body.asset-pack-v4-aircraft .sky-stage.hypersonic-dark .jet-plane,
body.asset-pack-v4-aircraft .sky-stage.hypersonic-dark .b2-sequence-plane {
  filter:
    brightness(0.92)
    contrast(1.13)
    saturate(0.9)
    drop-shadow(calc(2px * var(--jet-scale)) calc(-2px * var(--jet-scale)) calc(3px * var(--jet-scale)) rgba(255, 238, 158, 0.52))
    drop-shadow(calc(7px * var(--jet-scale)) calc(-5px * var(--jet-scale)) calc(10px * var(--jet-scale)) rgba(255, 196, 74, 0.24));
}

body.asset-pack-v4-aircraft .jet-shadow {
  left: calc(-80px * var(--jet-scale));
  top: calc(-6px * var(--jet-scale));
  width: calc(300px * var(--jet-scale));
  opacity: 0.5;
  filter: none;
}

/* v5/nova: use the theme shadow asset while keeping the same model-space anchor below the plane. */
body.asset-pack-v5 .jet-shadow {
  left: calc(3px * var(--jet-scale));
  top: calc(10px * var(--jet-scale));
  width: calc(188px * var(--jet-scale));
  height: calc(32px * var(--jet-scale));
  border-radius: 0;
  background: url("./assets/themes/nova/shadow.png") center / 100% 100% no-repeat;
  filter: none;
}

body.asset-pack-v5 .jet-amount {
  top: calc(-58px * var(--jet-scale));
  font-size: clamp(13px, calc(17px * var(--jet-scale)), 18px);
  text-shadow:
    0 calc(1px * var(--jet-scale)) calc(2px * var(--jet-scale)) rgba(0, 0, 0, 0.6),
    0 0 calc(7px * var(--jet-scale)) rgba(255, 255, 255, 0.72);
}

/* V5 auto-cash ride: the live amount rides below the plane, not above it. */
.jet-amount.bonus-ride-amount {
  top: calc(64px * var(--jet-scale));
}

body.asset-pack-v6 .pod-model.v4-missile-standby .pod-amount {
  left: calc(50% + 15px);
  bottom: calc((-28px * var(--jet-scale)) - 16px);
  font-weight: 900;
  transition: none;
}

body.asset-pack-v7 .pod-model.v4-missile-standby .pod-amount {
  bottom: calc((-36px * var(--jet-scale)) - 8px);
  font-size: clamp(18px, calc(26px * var(--jet-scale)), 32px);
  font-weight: 900;
  line-height: 1;
  transition: none;
}

body.asset-pack-v7 .pod-model.v4-missile-drop .pod-amount {
  font-size: clamp(18px, calc(26px * var(--jet-scale)), 32px);
  font-weight: 900;
  line-height: 1;
}

body.asset-pack-v6 .flight-amount.v5-drop-cashout-amount,
body.asset-pack-v7 .flight-amount.v5-drop-cashout-amount {
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 26;
  color: #35cf58;
  font-size: clamp(14px, calc(18px * var(--jet-scale)), 22px);
  font-weight: 900;
  -webkit-text-stroke: calc(0.35px * var(--jet-scale)) rgba(3, 24, 12, 0.72);
  text-shadow:
    0 calc(1px * var(--jet-scale)) calc(2px * var(--jet-scale)) rgba(0, 0, 0, 0.78),
    0 0 calc(5px * var(--jet-scale)) rgba(53, 207, 88, 0.34);
  transition: none;
  animation: none;
  will-change: transform, opacity;
}

body.asset-pack-v7 .flight-amount.v5-drop-cashout-amount {
  font-size: clamp(18px, calc(26px * var(--jet-scale)), 32px);
}

body.asset-pack-v4-aircraft .engine-flame {
  left: calc(var(--v3-thrust-left, 66px) * var(--jet-scale));
  top: calc(var(--v3-thrust-top, 18px) * var(--jet-scale));
  width: calc(22px * var(--jet-scale));
  height: calc(22px * var(--jet-scale));
  transform: translateY(-50%) rotate(-6deg);
  z-index: 5;
}

.engine-flame {
  position: absolute;
  left: calc(8px * var(--jet-scale));
  top: 32%;
  width: calc(14px * var(--jet-scale));
  height: calc(14px * var(--jet-scale));
  transform: translateY(-50%);
  opacity: 0;
  transform-origin: right center;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
  --thrust-intensity: 0.3;
  --flame-glow-outer: rgba(255, 255, 255, 0.3);
  --flame-plume: rgba(255, 255, 255, 0.6);
  --flame-plume-mid: rgba(230, 230, 230, 0.25);
  --flame-mid: rgba(255, 255, 255, 0.9);
  --flame-mid-edge: rgba(240, 240, 240, 0.45);
  --flame-core: rgba(255, 255, 255, 1);
  --flame-core-edge: rgba(255, 255, 255, 0.85);
  --flame-nozzle: rgba(255, 255, 255, 1);
  --flame-nozzle-mid: rgba(245, 245, 245, 0.8);
  --flame-diamond: rgba(255, 255, 255, 0.95);
  --flame-spark: rgba(255, 255, 255, 0.95);
  --flame-spark-glow: rgba(230, 230, 230, 0.7);
}

.v2-thrust-image {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(var(--v2-thrust-size, 18px) * var(--jet-scale));
  height: auto;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  opacity: var(--v2-thrust-opacity, 0.8);
  filter: drop-shadow(0 0 calc(3px * var(--jet-scale)) rgba(255, 185, 60, 0.75));
}

body.asset-pack-v2 .engine-flame {
  left: calc(var(--v2-thrust-left, -20px) * var(--jet-scale));
  top: calc(var(--v2-thrust-top, 35px) * var(--jet-scale));
  width: calc(18px * var(--jet-scale));
  height: calc(18px * var(--jet-scale));
  z-index: 3;
}

body.asset-pack-v2 .engine-flame .flame-layer,
body.asset-pack-v2 .engine-flame .flame-diamond,
body.asset-pack-v2 .engine-flame .flame-spark {
  display: none;
}

body.asset-pack-v2 .v2-thrust-image {
  display: block;
}

.engine-flame .flame-layer {
  position: absolute;
  right: 0;
  top: 50%;
  border-radius: 50%;
  transform-origin: right center;
}

.engine-flame .flame-ambient {
  width: calc(140px * var(--thrust-intensity) * var(--jet-scale));
  height: calc(50px * var(--thrust-intensity) * var(--jet-scale));
  background: radial-gradient(ellipse 90% 75% at 85% 50%, var(--flame-glow-outer), transparent 75%);
  filter: blur(calc(10px * var(--jet-scale)));
  animation: flame-ambient-flicker 0.4s linear infinite;
}

.engine-flame .flame-outer {
  width: calc(110px * var(--thrust-intensity) * var(--jet-scale));
  height: calc(32px * var(--thrust-intensity) * var(--jet-scale));
  background: radial-gradient(ellipse 85% 70% at 82% 50%, var(--flame-plume), var(--flame-plume-mid) 45%, transparent 82%);
  filter: blur(calc(5px * var(--jet-scale)));
  animation: flame-outer-flicker 0.25s linear infinite;
}

.engine-flame .flame-mid {
  width: calc(80px * var(--thrust-intensity) * var(--jet-scale));
  height: calc(20px * var(--thrust-intensity) * var(--jet-scale));
  background: radial-gradient(ellipse 80% 65% at 78% 50%, var(--flame-mid), var(--flame-mid-edge) 50%, transparent 85%);
  filter: blur(calc(2.5px * var(--jet-scale)));
  animation: flame-mid-flicker 0.16s linear infinite;
}

.engine-flame .flame-core {
  width: calc(48px * var(--thrust-intensity) * var(--jet-scale));
  height: calc(10px * var(--thrust-intensity) * var(--jet-scale));
  background: radial-gradient(ellipse 75% 55% at 72% 50%, var(--flame-core), var(--flame-core-edge) 40%, transparent 80%);
  filter: blur(calc(1px * var(--jet-scale)));
  animation: flame-core-flicker 0.1s linear infinite;
}

.engine-flame .flame-nozzle {
  right: calc(-1px * var(--jet-scale));
  width: calc(14px * var(--jet-scale));
  height: calc(14px * var(--thrust-intensity) * var(--jet-scale));
  background: radial-gradient(circle at 60% 50%, var(--flame-nozzle), var(--flame-nozzle-mid) 40%, transparent 75%);
  animation: flame-nozzle-flicker 0.08s linear infinite;
}

.engine-flame .flame-diamond {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--flame-diamond), transparent 70%);
  filter: blur(calc(0.5px * var(--jet-scale)));
  animation-name: flame-diamond-flicker;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--diamond-duration);
  animation-delay: var(--diamond-delay);
}

.engine-flame .diamond-1 {
  right: calc(14px * var(--jet-scale));
  width: calc(7px * var(--jet-scale));
  height: calc(7px * var(--jet-scale));
  --diamond-delay: 0s;
  --diamond-duration: 0.12s;
}

.engine-flame .diamond-2 {
  right: calc(30px * var(--jet-scale));
  width: calc(5.5px * var(--jet-scale));
  height: calc(5.5px * var(--jet-scale));
  --diamond-delay: 0.03s;
  --diamond-duration: 0.16s;
}

.engine-flame .diamond-3 {
  right: calc(46px * var(--jet-scale));
  width: calc(4px * var(--jet-scale));
  height: calc(4px * var(--jet-scale));
  --diamond-delay: 0.06s;
  --diamond-duration: 0.2s;
}

.engine-flame .flame-spark {
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(3px * var(--jet-scale));
  height: calc(3px * var(--jet-scale));
  border-radius: 50%;
  background: var(--flame-spark);
  box-shadow: 0 0 calc(5px * var(--jet-scale)) var(--flame-spark-glow);
  animation-name: flame-spark-fly;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-duration: var(--spark-duration);
  animation-delay: var(--spark-delay);
}

.engine-flame .spark-1 {
  --spark-x: calc(-56px * var(--jet-scale));
  --spark-y: calc(-8px * var(--jet-scale));
  --spark-delay: 0s;
  --spark-duration: 0.36s;
}

.engine-flame .spark-2 {
  --spark-x: calc(-64px * var(--jet-scale));
  --spark-y: calc(7px * var(--jet-scale));
  --spark-delay: 0.06s;
  --spark-duration: 0.41s;
}

.engine-flame .spark-3 {
  --spark-x: calc(-78px * var(--jet-scale));
  --spark-y: calc(-11px * var(--jet-scale));
  --spark-delay: 0.12s;
  --spark-duration: 0.48s;
}

.engine-flame .spark-4 {
  --spark-x: calc(-92px * var(--jet-scale));
  --spark-y: calc(12px * var(--jet-scale));
  --spark-delay: 0.18s;
  --spark-duration: 0.54s;
}

.engine-flame .spark-5 {
  --spark-x: calc(-71px * var(--jet-scale));
  --spark-y: calc(-4px * var(--jet-scale));
  --spark-delay: 0.24s;
  --spark-duration: 0.39s;
}

.engine-flame .spark-6 {
  --spark-x: calc(-84px * var(--jet-scale));
  --spark-y: calc(10px * var(--jet-scale));
  --spark-delay: 0.3s;
  --spark-duration: 0.47s;
}

.engine-flame .spark-7 {
  --spark-x: calc(-108px * var(--jet-scale));
  --spark-y: calc(-6px * var(--jet-scale));
  --spark-delay: 0.36s;
  --spark-duration: 0.58s;
}

.engine-flame .spark-8 {
  --spark-x: calc(-65px * var(--jet-scale));
  --spark-y: calc(5px * var(--jet-scale));
  --spark-delay: 0.42s;
  --spark-duration: 0.37s;
}

.engine-flame .spark-9 {
  --spark-x: calc(-97px * var(--jet-scale));
  --spark-y: calc(-13px * var(--jet-scale));
  --spark-delay: 0.48s;
  --spark-duration: 0.6s;
}

.engine-flame .spark-10 {
  --spark-x: calc(-114px * var(--jet-scale));
  --spark-y: calc(9px * var(--jet-scale));
  --spark-delay: 0.54s;
  --spark-duration: 0.62s;
}

@keyframes flame-ambient-flicker {
  0% {
    transform: translate(8%, -50%) scale(1, 1);
    opacity: 0.18;
  }
  25% {
    transform: translate(8%, -50%) scale(1.06, 1.12);
    opacity: 0.25;
  }
  50% {
    transform: translate(8%, -50%) scale(0.97, 0.92);
    opacity: 0.15;
  }
  75% {
    transform: translate(8%, -50%) scale(1.04, 1.08);
    opacity: 0.22;
  }
  100% {
    transform: translate(8%, -50%) scale(1, 1);
    opacity: 0.18;
  }
}

@keyframes flame-outer-flicker {
  0% {
    transform: translate(6%, -50%) scale(1, 1);
    opacity: 0.5;
  }
  25% {
    transform: translate(6%, -50%) scale(1.1, 1.18);
    opacity: 0.65;
  }
  50% {
    transform: translate(6%, -50%) scale(0.94, 0.88);
    opacity: 0.4;
  }
  75% {
    transform: translate(6%, -50%) scale(1.06, 1.12);
    opacity: 0.55;
  }
  100% {
    transform: translate(6%, -50%) scale(1, 1);
    opacity: 0.5;
  }
}

@keyframes flame-mid-flicker {
  0% {
    transform: translate(4%, -50%) scale(1, 1);
    opacity: 0.75;
  }
  25% {
    transform: translate(4%, -50%) scale(1.14, 1.25);
    opacity: 0.9;
  }
  50% {
    transform: translate(4%, -50%) scale(0.91, 0.82);
    opacity: 0.65;
  }
  75% {
    transform: translate(4%, -50%) scale(1.08, 1.18);
    opacity: 0.82;
  }
  100% {
    transform: translate(4%, -50%) scale(1, 1);
    opacity: 0.75;
  }
}

@keyframes flame-core-flicker {
  0% {
    transform: translate(2%, -50%) scaleX(1);
    opacity: 0.9;
  }
  25% {
    transform: translate(2%, -50%) scaleX(1.07);
    opacity: 1;
  }
  50% {
    transform: translate(2%, -50%) scaleX(0.96);
    opacity: 0.82;
  }
  75% {
    transform: translate(2%, -50%) scaleX(1.04);
    opacity: 0.95;
  }
  100% {
    transform: translate(2%, -50%) scaleX(1);
    opacity: 0.9;
  }
}

@keyframes flame-nozzle-flicker {
  0% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 0.85;
  }
  25% {
    transform: translateY(-50%) scale(1.12, 1.3);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(0.95, 0.8);
    opacity: 0.7;
  }
  75% {
    transform: translateY(-50%) scale(1.06, 1.15);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50%) scale(1, 1);
    opacity: 0.85;
  }
}

@keyframes flame-diamond-flicker {
  0% {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.9);
  }
  25% {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.15);
  }
  50% {
    opacity: 0.4;
    transform: translateY(-50%) scale(0.85);
  }
  75% {
    opacity: 0.75;
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.9);
  }
}

@keyframes flame-spark-fly {
  0% {
    transform: translate(0, -50%) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--spark-x), calc(-50% + var(--spark-y))) scale(0.15);
    opacity: 0;
  }
}
.jet-wheel {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition: none;
  z-index: 2;
}

.jet-wheel-back {
  width: calc(28.34px * var(--jet-scale));
  height: auto;
  left: calc(50.11px * var(--jet-scale));
  top: calc(33.71px * var(--jet-scale));
  opacity: 1;
}

.jet-wheel-front {
  width: calc(21.49px * var(--jet-scale));
  height: auto;
  left: calc(118.73px * var(--jet-scale));
  top: calc(37.39px * var(--jet-scale));
  opacity: 1;
}

body.asset-pack-v2 .jet-wheel-back {
  width: calc(82px * var(--jet-scale));
  left: calc(10px * var(--jet-scale));
  top: calc(27px * var(--jet-scale));
  z-index: 3;
}

body.asset-pack-v2 .jet-wheel-front {
  width: calc(76px * var(--jet-scale));
  left: calc(102px * var(--jet-scale));
  top: calc(29px * var(--jet-scale));
  z-index: 3;
}

body.asset-pack-v3 .jet-wheel {
  display: none;
}

body.asset-pack-v4-aircraft .jet-wheel {
  display: none;
}

.pod-model {
  position: absolute;
  width: calc(77px * var(--jet-scale));
  height: calc(29px * var(--jet-scale));
  --pod-visual-scale: 0.82;
  transform-origin: center center;
  z-index: 11;
  will-change: transform;
}

.pod-model img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(var(--pod-visual-scale));
  transform-origin: center center;
  filter: none;
}

body.asset-pack-v2 .pod-model.v2-box-drop {
  width: calc(96px * var(--jet-scale));
  height: calc(96px * var(--jet-scale));
  --pod-visual-scale: 1;
  transform-origin: center top;
}

body.asset-pack-v2 .pod-model.v2-box-drop .pod-amount {
  bottom: calc(-18px * var(--jet-scale));
  font-size: calc(20px * var(--jet-scale));
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-standby,
body.asset-pack-v4-aircraft .pod-model.v4-missile-drop {
  width: calc(93.8px * var(--jet-scale));
  height: calc(19.6px * var(--jet-scale));
  --pod-visual-scale: 1;
  transform-origin: 52% 50%;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-standby {
  z-index: 16;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-standby img {
  opacity: 0;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-drop {
  z-index: 20;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-drop.v4-missile-release-mask {
  z-index: 17;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-drop.v4-missile-release-mask.v4-missile-released {
  z-index: 20;
}

.pod-model.v4-missile-clone {
  pointer-events: none;
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-standby img,
body.asset-pack-v4-aircraft .pod-model.v4-missile-drop img {
  filter: drop-shadow(0 calc(3px * var(--jet-scale)) calc(4px * var(--jet-scale)) rgba(0, 0, 0, 0.45));
}

body.asset-pack-v4-aircraft .pod-model.v4-missile-clone img {
  filter: none;
}

body.asset-pack-v4-aircraft .pod-model.v4-impact-cash {
  width: calc(260px * var(--jet-scale));
  height: calc(84px * var(--jet-scale));
  --pod-visual-scale: 1;
  z-index: 24;
}

body.asset-pack-v4-aircraft .pod-model.v4-impact-cash img {
  opacity: 0;
}

body.asset-pack-v4-aircraft .pod-model.v4-impact-cash .pod-amount {
  bottom: calc(34px * var(--jet-scale));
  font-size: clamp(16px, calc(32px * var(--jet-scale)), 32px);
  color: #064b34;
  -webkit-text-stroke: calc(0.8px * var(--jet-scale)) rgba(255, 255, 255, 0.9);
  text-shadow:
    0 calc(1px * var(--jet-scale)) 0 rgba(255, 255, 255, 0.9),
    0 0 calc(8px * var(--jet-scale)) rgba(255, 255, 255, 0.95),
    0 calc(3px * var(--jet-scale)) calc(7px * var(--jet-scale)) rgba(0, 0, 0, 0.32);
}

.v4-impact-effect {
  position: absolute;
  width: calc(256px * var(--v4-impact-scale, 1));
  height: calc(256px * var(--v4-impact-scale, 1));
  z-index: 22;
  pointer-events: none;
  transform: translate(-50%, -100%);
  background: url('./assets/b2/Explosion_1.png') no-repeat center / 100% 100%;
  filter: none;
  image-rendering: auto;
  will-change: opacity, background-image;
  --v4-impact-progress: 0;
}

.v4-impact-effect::before,
.v4-impact-effect::after {
  content: "";
  display: none;
}

.v4-impact-fire,
.v4-impact-core,
.v4-impact-smoke {
  display: none;
}

.parachute-model {
  position: absolute;
  width: calc(105px * var(--jet-scale));
  height: calc(90px * var(--jet-scale));
  transform-origin: center bottom;
  z-index: 19;
  opacity: 0;
}

.parachute-model img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.parachute-canopy,
.parachute-lines {
  display: none;
}

.modal.modal-history-list {
  width: min(460px, calc(100vw - 32px));
}

/* History X modal uses a 2-column tabbar (vs sidebar's 3-column). All colors,
   typography, active/hover behavior inherit from .tabbar / .tab above. */
.history-view-tabs {
  grid-template-columns: 1fr 1fr;
  margin: 10px 14px 0;
}

.history-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding-right: 2px;
}

.history-chips-grid .history-chip {
  font-size: 13px;
  padding: 6px 10px;
  min-width: 0;
  width: auto;
}

.history-chips-grid.hidden,
.history-list-view.hidden {
  display: none;
}

.history-list-view {
  display: grid;
  gap: 8px;
}

.history-icon-body {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.history-icon-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  padding: 0 8px;
  color: var(--n-icon);
  font-size: 11px;
  letter-spacing: -0.2px;
}

.history-icon-list {
  display: grid;
  gap: 6px;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding-right: 2px;
}

.history-icon-row {
  width: 100%;
  border: 1px solid var(--n-border-soft);
  border-radius: 10px;
  background: var(--n-bg);
  color: var(--n-text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.history-icon-row:hover,
.history-icon-row:focus-visible {
  background: var(--n-hover-bg);
  border-color: var(--n-hover-border);
  outline: none;
}

.history-icon-time,
.history-icon-round {
  color: var(--n-text);
}

.history-icon-mult {
  font-weight: 600;
}

.history-icon-mult.hot {
  color: #ff772f;
}

.history-icon-mult.gold {
  color: #fce11f;
}

.history-icon-mult.teal {
  color: #30c7d0;
}

.history-icon-mult.peach {
  color: #ff9a70;
}

.history-icon-mult.muted {
  color: #b6bebf;
}

/* Chip-tone classes so the list tab matches the chips above it */
.history-icon-mult.warm {
  color: #ffcf6b;
}

.history-icon-mult.green {
  color: #35cf58;
}

.history-icon-mult.lime {
  color: #a0e03b;
}

.modal.modal-provably-settings,
.modal.modal-game-limits {
  width: min(520px, calc(100vw - 32px));
}

.provably-settings-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.provably-settings-lead {
  margin: 0;
  color: #aeb7b8;
  font-size: 13px;
  line-height: 1.35;
}

.provably-settings-section {
  display: grid;
  gap: 8px;
}

.provably-settings-section h3 {
  margin: 0;
  color: #d0d6d7;
  font-size: 13px;
  font-weight: 500;
}

.provably-settings-section p {
  margin: 0;
  color: #9ca5a6;
  font-size: 12px;
  line-height: 1.35;
}

.provably-seed-field {
  margin-top: 2px;
}

.provably-seed-field input {
  min-width: 0;
  font-family: inherit;
}

.provably-manual-link {
  border: 0;
  background: none;
  color: #58a8ff;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.provably-manual-link:hover,
.provably-manual-link:focus-visible {
  color: #82beff;
  outline: none;
}

.provably-settings-foot {
  margin: 0;
  color: #8f989a;
  font-size: 13px;
  text-align: center;
}

.game-limits-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.game-limits-lead {
  margin: 0 0 6px;
  text-align: center;
  color: #b5bdbe;
  font-size: 13px;
  line-height: 1.35;
}

.game-limit-card {
  border: 1px solid #4a4a4a;
  background: #4a4a4a;
  border-radius: 12px;
  padding: 14px 16px;
  color: #bcc4c5;
  font-size: 13px;
  line-height: 1.2;
}

.game-limit-card strong {
  color: #dfe5e6;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .history-icon-row {
    grid-template-columns: 1fr auto;
  }

  .history-icon-round {
    display: none;
  }
}

.control-panel.shell-panel {
  --secondary-row-height: 40px;
  box-sizing: border-box;
  position: relative;
  width: min(500px, 100%);
  max-width: 500px;
  height: 196px;
  min-height: 0;
  max-height: 196px;
  margin: 0 auto;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #424242;
  border-radius: var(--radius);
  background: #242424;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 0.96fr);
  gap: 18px;
  align-items: stretch;
}

/* Win celebration: covers the panel for ~2s after a final cash-out, then fades to
   reveal the betting controls. */
.win-celebration {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 130% at 50% 38%, #2f2f2f 0%, #242424 62%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  perspective: 620px;
  transition: opacity 0.34s ease, visibility 0.34s ease;
}

.win-celebration.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none; /* appear instantly to cover the controls; only the fade-out animates */
}

.win-celebration-label {
  position: relative;
  z-index: 4;
  color: #a7a7a7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.win-celebration-value {
  position: relative;
  z-index: 4;
  color: #00f27e;
  max-width: calc(100% - 28px);
  font-size: clamp(46px, 9vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 242, 126, 0.22);
}

/* Soft reward burst behind the amount */
.win-celebration-burst {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 197, 64, 0.22) 0%, rgba(247, 197, 64, 0.11) 38%, rgba(247, 197, 64, 0) 72%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.2px);
}

.win-celebration-coins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 520px;
}

/* X container: constant horizontal velocity + fade, centred on the emit point. */
.win-celebration-coins i {
  --size: 24px;
  --cx: 0px;     /* horizontal drift (linear) */
  --rise: 110px; /* apex height above the emit point */
  --fall: 150px; /* final depth below the emit point (past the panel bottom) */
  --spin: 720deg;
  --axis: 1 0 0; /* tumble axis */
  --arc: coinArcB; /* which arc-shape keyframes to use */
  --delay: 0s;
  --dur: 0.9s;
  position: absolute;
  top: 63%; /* emit from the bottom of the amount */
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  opacity: 0;
  transform-style: preserve-3d;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.28));
  will-change: translate, opacity;
}

/* The coin disk: flat gold face with a simple offset side for extrusion. */
.win-celebration-coins i b {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  isolation: isolate;
  background: #f5bf32;
  border: max(2px, calc(var(--size) * 0.08)) solid #ffd766;
  box-shadow:
    calc(var(--size) * 0.1) calc(var(--size) * 0.1) 0 #a86712,
    0 6px 8px rgba(0, 0, 0, 0.26);
  backface-visibility: visible;
  will-change: translate, rotate;
}

.win-celebration-coins i b::before,
.win-celebration-coins i b::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.win-celebration-coins i b::before {
  inset: calc(var(--size) * 0.22);
  z-index: 1;
  border-radius: 50%;
  border: max(1px, calc(var(--size) * 0.05)) solid rgba(128, 78, 8, 0.5);
  background: transparent;
}

.win-celebration-coins i b::after {
  content: "$";
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #7a4a08;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: calc(var(--size) * 0.52);
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.win-celebration.show .win-celebration-label {
  animation: winLabelIn 0.4s ease 0.05s both;
}

.win-celebration.show .win-celebration-value {
  animation: winValuePop 0.62s cubic-bezier(0.18, 1.6, 0.4, 1) both, winValueGlow 1.7s ease-in-out 0.55s infinite;
}

.win-celebration.show .win-celebration-burst {
  animation: winBurst 0.95s ease-out both;
}

.win-celebration.show .win-celebration-coins i {
  animation: coinFly var(--dur) linear var(--delay) both;
}

.win-celebration.show .win-celebration-coins i b {
  /* --arc picks one of several arc shapes (different apex timing) per coin so the
     coins don't all peak together. coinTumble inherits the same duration/delay. */
  animation-name: var(--arc), coinTumble;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  animation-timing-function: linear;
  animation-fill-mode: both;
}

/* Varied launches so coins spray out and fall off the bottom naturally. */
.win-celebration-coins i:nth-child(1)  { --size: 32px; --cx: -126px; --rise: 34px; --fall: 132px; --spin: 620deg;  --axis: 1 0 0;     --arc: coinArcB; --delay: 0s;    --dur: 1.04s; }
.win-celebration-coins i:nth-child(2)  { --size: 23px; --cx: 172px;  --rise: 16px; --fall: 114px; --spin: -540deg; --axis: 0 0 1;     --arc: coinArcA; --delay: 0.05s; --dur: 0.78s; }
.win-celebration-coins i:nth-child(3)  { --size: 36px; --cx: -46px;  --rise: 44px; --fall: 148px; --spin: 580deg;  --axis: 1 0.2 0;   --arc: coinArcC; --delay: 0.01s; --dur: 1.18s; }
.win-celebration-coins i:nth-child(4)  { --size: 22px; --cx: 96px;   --rise: 22px; --fall: 118px; --spin: -760deg; --axis: 0.7 0.3 0; --arc: coinArcA; --delay: 0.09s; --dur: 0.82s; }
.win-celebration-coins i:nth-child(5)  { --size: 31px; --cx: -194px; --rise: 28px; --fall: 128px; --spin: 500deg;  --axis: 1 0 0;     --arc: coinArcB; --delay: 0.02s; --dur: 0.98s; }
.win-celebration-coins i:nth-child(6)  { --size: 27px; --cx: 38px;   --rise: 38px; --fall: 138px; --spin: -660deg; --axis: 0.6 0.5 0; --arc: coinArcC; --delay: 0.06s; --dur: 1.12s; }
.win-celebration-coins i:nth-child(7)  { --size: 20px; --cx: -84px;  --rise: 14px; --fall: 110px; --spin: 560deg;  --axis: 0 0 1;     --arc: coinArcA; --delay: 0.12s; --dur: 0.74s; }
.win-celebration-coins i:nth-child(8)  { --size: 33px; --cx: 136px;  --rise: 32px; --fall: 142px; --spin: -620deg; --axis: 1 0.1 0;   --arc: coinArcB; --delay: 0.02s; --dur: 1.06s; }
.win-celebration-coins i:nth-child(9)  { --size: 25px; --cx: -158px; --rise: 20px; --fall: 118px; --spin: 760deg;  --axis: 0.8 0.3 0; --arc: coinArcA; --delay: 0.07s; --dur: 0.86s; }
.win-celebration-coins i:nth-child(10) { --size: 29px; --cx: 14px;   --rise: 44px; --fall: 148px; --spin: -560deg; --axis: 1 0 0;     --arc: coinArcC; --delay: 0s;    --dur: 1.16s; }
.win-celebration-coins i:nth-child(11) { --size: 22px; --cx: 204px;  --rise: 18px; --fall: 116px; --spin: 640deg;  --axis: 0 0 1;     --arc: coinArcA; --delay: 0.05s; --dur: 0.8s; }
.win-celebration-coins i:nth-child(12) { --size: 34px; --cx: -104px; --rise: 36px; --fall: 140px; --spin: -700deg; --axis: 1 0.2 0;   --arc: coinArcB; --delay: 0.03s; --dur: 1.08s; }
.win-celebration-coins i:nth-child(13) { --size: 21px; --cx: 68px;   --rise: 12px; --fall: 108px; --spin: 500deg;  --axis: 0.7 0.4 0; --arc: coinArcA; --delay: 0.1s;  --dur: 0.76s; }
.win-celebration-coins i:nth-child(14) { --size: 28px; --cx: -28px;  --rise: 40px; --fall: 144px; --spin: -620deg; --axis: 1 0 0;     --arc: coinArcC; --delay: 0.01s; --dur: 1.14s; }
.win-celebration-coins i:nth-child(15) { --size: 25px; --cx: 116px;  --rise: 24px; --fall: 124px; --spin: 700deg;  --axis: 0 0 1;     --arc: coinArcB; --delay: 0.07s; --dur: 0.94s; }
.win-celebration-coins i:nth-child(16) { --size: 30px; --cx: -178px; --rise: 30px; --fall: 134px; --spin: -640deg; --axis: 1 0.3 0;   --arc: coinArcB; --delay: 0.03s; --dur: 1s; }
.win-celebration-coins i:nth-child(17) { --size: 20px; --cx: 156px;  --rise: 16px; --fall: 112px; --spin: 540deg;  --axis: 0.6 0.5 0; --arc: coinArcA; --delay: 0.12s; --dur: 0.78s; }
.win-celebration-coins i:nth-child(18) { --size: 31px; --cx: -66px;  --rise: 34px; --fall: 142px; --spin: -680deg; --axis: 1 0.1 0;   --arc: coinArcC; --delay: 0.04s; --dur: 1.1s; }

@keyframes winValuePop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes winValueGlow {
  0%, 100% { text-shadow: 0 0 7px rgba(0, 242, 126, 0.2); }
  50% { text-shadow: 0 0 14px rgba(0, 242, 126, 0.42); }
}

@keyframes winLabelIn {
  from { transform: translateY(10px); opacity: 0; letter-spacing: 4px; }
  to { transform: translateY(0); opacity: 1; letter-spacing: 1.5px; }
}

@keyframes winBurst {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Horizontal: constant velocity (linear) + quick fade in, fade out near the end. */
@keyframes coinFly {
  0%   { translate: 0 0; opacity: 0; }
  6%   { opacity: 1; }
  84%  { opacity: 1; }
  100% { translate: var(--cx) 0; opacity: 0; }
}

/* Vertical arcs: rise decelerating to the apex (ease-out), then fall accelerating
   (ease-in). Three variants peak at different times so coins don't move in unison. */
@keyframes coinArcA { /* quick high pop */
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(0.1, 0.82, 0.3, 1); }
  26%  { translate: 0 calc(var(--rise) * -1); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.4); }
  100% { translate: 0 var(--fall); }
}
@keyframes coinArcB { /* balanced */
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(0.2, 0.72, 0.4, 1); }
  40%  { translate: 0 calc(var(--rise) * -1); animation-timing-function: cubic-bezier(0.52, 0, 0.86, 0.45); }
  100% { translate: 0 var(--fall); }
}
@keyframes coinArcC { /* lazy, late apex */
  0%   { translate: 0 0; animation-timing-function: cubic-bezier(0.26, 0.64, 0.46, 1); }
  52%  { translate: 0 calc(var(--rise) * -1); animation-timing-function: cubic-bezier(0.55, 0, 0.88, 0.5); }
  100% { translate: 0 var(--fall); }
}

/* End-over-end tumble at a constant rate. */
@keyframes coinTumble {
  from { rotate: var(--axis) 0deg; }
  to   { rotate: var(--axis) var(--spin); }
}

@media (prefers-reduced-motion: reduce) {
  .win-celebration.show .win-celebration-label,
  .win-celebration.show .win-celebration-value,
  .win-celebration.show .win-celebration-burst,
  .win-celebration.show .win-celebration-coins i {
    animation: none;
  }
}

.bet-panel-left,
.bet-panel-right {
  min-width: 0;
  min-height: 0;
  position: relative;
}

/* Both columns distribute their controls top-to-bottom with even gaps, so the
   layout is identical on desktop and mobile. space-between keeps the stepper /
   BET pinned to the bottom even when the chips hide (no jump after a bet). */
.bet-panel-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bet-panel-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bet-panel-divider {
  width: 1px;
  min-height: 0;
  margin: 16px 0;
  background: #3F3F3F;
  align-self: stretch;
}

/* Left column top slot: AUTO PLAY (idle) swaps with TOTAL WIN (live) */
.bet-left-top {
  position: relative;
  flex: 0 0 46px;
  height: 46px;
}

/* The single TOTAL WIN readout is replaced by the per-railcar cash-out list. */
.bet-left-top .top-total-win {
  display: none;
}

/* Cash-out log: one line per cashed railcar, filling the left column above the stepper. */
.cashout-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.cashout-list.show {
  bottom: 0;
  gap: 6px;
  opacity: 1;
  visibility: visible;
}

.cashout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  padding: 8px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  animation: cashoutRowIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cashout-row-car {
  color: #c9c9c9;
  letter-spacing: 0.3px;
}

.cashout-row-bomb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cashout-row-bomb .bomb-pick-icon {
  flex: 0 0 auto;
  width: 34px;
  max-width: none;
  height: auto;
  fill: currentColor;
}

.cashout-row-bomb-number {
  min-width: 0.7em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.cashout-row-amt {
  color: #00f27e;
  font-variant-numeric: tabular-nums;
}

@keyframes cashoutRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Quick-add bet chips: 29px rows with a 4px gap */
/* V6: horizontal 3-bomb selector in place of the quick chips. Clicking a bomb selects
   that many bombs — the row fills left-to-right — and the choice persists across rounds. */
.bomb-pick {
  flex: 0 0 auto;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.bomb-pick-option {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid #4f4f4f;
  border-radius: 8px;
  background: #383838;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 8px 4px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bomb-pick-option::after {
  content: attr(data-bomb-pick);
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #8a8a8a;
  transition: color 0.15s ease;
}

.bomb-pick-icon {
  display: block;
  width: 100%;
  max-width: 37.8px;
  height: auto;
  aspect-ratio: 331 / 73;
  fill: #6b6b6b;
  transition: fill 0.15s ease;
}

.bomb-pick-option.selected {
  border-color: #777777;
  background: #444444;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.07);
}

.bomb-pick-option.selected .bomb-pick-icon {
  fill: #ffc400;
}

.bomb-pick-option.selected::after {
  color: #ffc400;
}

@media (hover: hover) {
  .bomb-pick-option:not(.selected):not(:disabled):hover {
    border-color: #6f6f6f;
  }
}

.bomb-pick-option:disabled {
  cursor: default;
  opacity: 0.55;
}

.quick-bet-chips {
  flex: 0 0 auto;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 29px;
  gap: 4px;
}

.quick-bet-chips.hidden {
  display: none;
}

.quick-bet-chip {
  border: 1px solid #4f4f4f;
  border-radius: 8px;
  background: #383838;
  color: #f3f3f3;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  place-items: center;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.quick-bet-chip:not(:disabled):hover,
.quick-bet-chip:not(:disabled):focus-visible {
  background: #454545;
  border-color: #6a6a6a;
  outline: none;
}

.quick-bet-chip:not(:disabled):active {
  transform: scale(0.95);
}

.quick-bet-chip:disabled {
  opacity: 0.42;
  cursor: default;
}

/* Stepper sits at the bottom of the chips+stepper group (see .bet-left-bottom) */
.bet-panel-left .adjustment {
  flex: 0 0 auto;
}

/* Bomb list retained for game logic but hidden in the new layout */
.bet-panel-left .bet-bomb-list {
  display: none !important;
}

.bet-panel-title {
  margin: 0 0 5px;
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.bet-panel-title.auto-target-editing {
  color: #ffc400;
}

.control-panel .adjustment {
  height: 46px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border: 1px solid #505050;
  border-radius: 11px;
  background: #191a1a;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.control-panel .adjustment:focus-within {
  border-color: #727272;
  background: #202020;
}

.control-panel .adjustment.auto-target-editing {
  border-color: #ffc400;
  box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.46);
}

.control-panel .amount-box,
.control-panel .amount-input,
.control-panel .adjust-btn {
  border: 0;
  font-family: inherit;
}

.control-panel .amount-box,
.control-panel .amount-input {
  min-width: 0;
  height: 100%;
  border-radius: 0;
  background: transparent;
  color: #f6f6f6;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color 0.16s ease, filter 0.16s ease;
}

.control-panel .amount-box.auto-target-value {
  color: #ffc400;
}

.control-panel .amount-input {
  width: 100%;
  grid-column: 2;
  text-align: center;
  outline: none;
}

.control-panel .adjust-btn {
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  justify-self: center;
  align-self: center;
  border: 1px solid #575757;
  border-radius: 50%;
  background: #383838;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.control-panel .adjust-btn:first-child {
  justify-self: start;
}

.control-panel .adjust-btn:last-child {
  justify-self: end;
}

.control-panel .adjust-btn:not(:disabled):hover,
.control-panel .adjust-btn:not(:disabled):focus-visible {
  border-color: #727272;
  background: #474747;
  color: #ffffff;
  outline: none;
}

.control-panel .adjust-btn:not(:disabled):active {
  transform: scale(0.94);
}

.control-panel .amount-box:not(.hidden):hover,
.control-panel .amount-box:not(.hidden):focus-visible,
.control-panel .amount-input:focus {
  filter: brightness(1.18);
  outline: none;
}

.control-panel .adjustment.locked .amount-box,
.control-panel .adjustment.locked .adjust-btn {
  opacity: 0.42;
  cursor: default;
}

.bet-bomb-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 16px;
  padding-right: 2px;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: none;
}

.bet-bomb-list::-webkit-scrollbar {
  display: none;
}

.bet-bomb-row {
  --row-text: #f5f5f5;
  position: relative;
  width: 100%;
  min-height: 22px;
  border: 0;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(90deg, #242424 0%, #303030 76%, #3a3a3a 100%);
  color: var(--row-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 23px 0 8px;
  text-align: left;
  cursor: default;
  user-select: none;
  clip-path: polygon(0 0, 85% 0, 99% 44%, 99% 56%, 85% 100%, 0 100%);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bet-bomb-row span,
.bet-bomb-row strong {
  pointer-events: none;
}

.bet-bomb-row strong {
  font-weight: 700;
  min-width: 5.2ch;
  text-align: right;
}

.bet-bomb-row.auto-targets {
  grid-template-columns: minmax(0, 1fr) auto;
}

.bet-bomb-label {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.bet-bomb-auto-target {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
}

.bet-bomb-auto-target-value {
  color: #ffc400;
  font-size: 1em;
  opacity: 1;
  animation: autoTargetValuePop 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
  transform-origin: center center;
}

.bet-bomb-row.auto-editable {
  cursor: pointer;
}

.bet-bomb-row.auto-editable:hover,
.bet-bomb-row.auto-editable:focus-visible {
  outline: none;
  filter: brightness(1.08);
}

.bet-bomb-row.auto-target-selected {
  background: #ffc400;
  color: #151515;
  opacity: 1;
}

.bet-bomb-row.auto-target-selected .bet-bomb-label,
.bet-bomb-row.auto-target-selected .bet-bomb-name,
.bet-bomb-row.auto-target-selected .bet-bomb-auto-target,
.bet-bomb-row.auto-target-selected .bet-bomb-auto-target-value,
.bet-bomb-row.auto-target-selected .bet-bomb-amount {
  color: #151515;
  opacity: 1;
}

.bet-bomb-row strong.amount-hidden {
  opacity: 0;
}

.bet-bomb-row strong.amount-preview {
  animation: betBombAmountPreview 1.08s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--amount-delay, 0ms);
  transform-origin: center center;
}

.bet-bomb-row strong.amount-reveal {
  animation: betBombAmountReveal 0.32s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: var(--amount-delay, 0ms);
  transform-origin: center center;
}

@keyframes autoTargetValuePop {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.9);
  }

  64% {
    opacity: 1;
    transform: translateY(-1px) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes betBombAmountPreview {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }

  12%,
  72% {
    opacity: 0.92;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2px);
  }
}

@keyframes betBombAmountReveal {
  0% {
    opacity: 0;
    transform: translateY(-9px) scale(0.96);
    filter: brightness(1.2);
  }

  62% {
    opacity: 1;
    transform: translateY(1px) scale(1.04);
    filter: brightness(1.12);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.bet-bomb-row.unselected {
  opacity: 0.48;
}

.bet-bomb-row.idle span,
.bet-bomb-row.idle strong {
  color: #d0d0d0;
  opacity: 0.56;
}

.bet-bomb-row.idle .bet-bomb-label,
.bet-bomb-row.idle .bet-bomb-auto-target,
.bet-bomb-row.idle .bet-bomb-auto-target-value {
  opacity: 1;
}

.bet-bomb-row.idle .bet-bomb-auto-target {
  color: inherit;
}

.bet-bomb-row.idle .bet-bomb-auto-target-value {
  color: #ffc400;
}

.bet-bomb-row.idle.auto-target-selected .bet-bomb-label,
.bet-bomb-row.idle.auto-target-selected .bet-bomb-name,
.bet-bomb-row.idle.auto-target-selected .bet-bomb-auto-target,
.bet-bomb-row.idle.auto-target-selected .bet-bomb-auto-target-value,
.bet-bomb-row.idle.auto-target-selected .bet-bomb-amount {
  color: #151515;
  opacity: 1;
}

.bet-bomb-row.selected {
  opacity: 1;
}

.bet-bomb-row.locked {
  color: #f5f5f5;
  cursor: default;
}

.bet-bomb-row.next {
  color: #d0d0d0;
  opacity: 1;
}

.bet-bomb-row.live-pending {
  color: #d0d0d0;
  opacity: 1;
}

.bet-bomb-row.live-pending span,
.bet-bomb-row.live-pending strong {
  opacity: 0.56;
}

.bet-bomb-row.locked.next,
.bet-bomb-row.locked.live-pending {
  color: #f5f5f5;
}

.bet-bomb-row.locked.next span,
.bet-bomb-row.locked.next strong,
.bet-bomb-row.locked.live-pending span,
.bet-bomb-row.locked.live-pending strong {
  opacity: 1;
}

.bet-bomb-row.current {
  background: #ffc400;
  color: #151515;
  opacity: 1;
}

.bet-bomb-row.current .bet-bomb-auto-target,
.bet-bomb-row.current .bet-bomb-auto-target-value {
  color: #151515;
  opacity: 1;
}

.bet-bomb-row.cashed {
  background: linear-gradient(90deg, rgba(33, 34, 34, 0.28) 0%, rgba(18, 49, 33, 0.74) 58%, rgba(24, 82, 47, 0.92) 100%);
  color: #00f27e;
  opacity: 1;
}

/* BUY BONUS card in the right top slot */
.bet-panel-right .hypersonic-mode-panel {
  margin: 0;
  height: 80px;
  min-height: 80px;
  flex: 0 0 80px;
  border: 1px solid #4b4b4b;
  border-radius: 12px;
  background-color: #2f2f2f;
  overflow: hidden;
  transition:
    background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.bet-panel-right .hypersonic-mode-panel.active {
  background-color: #342b27;
  border-color: rgba(234, 101, 40, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(234, 101, 40, 0.08),
    0 0 18px rgba(234, 101, 40, 0.08);
}

/* Keep the slot's space so the BET/CASH OUT button stays the same size across states */
.bet-panel-right .hypersonic-mode-panel.total-win-active {
  visibility: hidden;
}

.bet-panel-right .bonus-switch-panel {
  min-height: 0;
  height: 100%;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "amount switch";
  align-content: center;
  gap: 6px 12px;
  transition:
    background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.24s ease,
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.bet-panel-right .bonus-switch-copy {
  display: contents;
}

.bet-panel-right .bonus-switch-panel:not(:disabled):hover,
.bet-panel-right .bonus-switch-panel:not(:disabled):focus-visible,
.bet-panel-right .bonus-switch-panel:not(:disabled):active {
  background: transparent;
  outline: none;
}

.bet-panel-right .bonus-switch-title {
  grid-area: title;
  color: #ffffff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.28s ease, opacity 0.28s ease;
}

.bet-panel-right .bonus-switch-subtitle {
  grid-area: amount;
  margin-top: 0;
  color: var(--bonus-accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
}

.bet-panel-right .bonus-switch-visual {
  --bonus-knob-travel: 32px;
  grid-area: switch;
  width: 56px;
  height: 24px;
  padding: 0 6px;
  background: #666666;
  transition:
    background-color 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.bet-panel-right .bonus-switch-panel.active .bonus-switch-visual {
  background: var(--bonus-accent);
  box-shadow: 0 0 14px rgba(234, 101, 40, 0.22);
}

.bet-panel-right .bonus-switch-panel:disabled .bonus-switch-visual {
  background: #4b4b4b;
}

.bet-panel-right .bonus-switch-panel.active:disabled .bonus-switch-visual {
  background: #873f1e;
}

.bet-panel-right .bonus-switch-state {
  font-size: 10px;
  font-weight: 700;
}

.bet-panel-right .bonus-switch-knob {
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bet-panel-right .bonus-switch-panel.active .bonus-switch-knob {
  left: 3px;
  transform: translateX(var(--bonus-knob-travel));
}

.bet-panel-left .auto-play-panel {
  margin: 0;
  display: block;
  height: 100%;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* During an Autoplay session the same slot becomes the remaining-round counter.
   Once cashouts take over the left panel, the counter yields to the payout list. */
.bet-panel-left .auto-play-panel.total-win-active {
  display: none;
}

.bet-panel-left .auto-play-open-btn {
  width: 100%;
  height: 100%;
  min-height: 26px;
  padding: 0;
  border: 1px solid #4b4b4b;
  border-radius: 7px;
  background: #303030;
  color: #d0d0d0;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.bet-panel-left .auto-play-open-btn:not(:disabled):hover,
.bet-panel-left .auto-play-open-btn:not(:disabled):focus-visible {
  border-color: #6a6a6a;
  background: #383838;
  color: #ffffff;
  outline: none;
}

.bet-panel-left .auto-play-open-btn:not(:disabled):active {
  transform: scale(0.98);
}

.bet-panel-left .auto-play-open-icon {
  display: block;
  width: 20px;
  height: 20px;
  justify-self: center;
  transform: none;
  transition: none;
}

.bet-panel-left .auto-play-open-icon path {
  fill: currentColor;
}

.bet-panel-left .auto-play-open-btn.active {
  border-color: rgba(0, 246, 111, 0.55);
  color: #00f66f;
}

.bet-panel-left .auto-play-rounds-left {
  display: none;
  justify-self: center;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bet-panel-left .auto-play-open-btn.active .auto-play-open-icon {
  display: none;
}

.bet-panel-left .auto-play-open-btn.active .auto-play-rounds-left {
  display: block;
}

.bet-panel-left .auto-play-open-btn.locked {
  opacity: 0.52;
}

.bet-panel-left .auto-play-open-btn.active.locked {
  opacity: 1;
}

.bet-panel-left .auto-play-open-btn:disabled {
  cursor: default;
}

.modal.modal-auto-play {
  width: min(520px, calc(100vw - 32px));
}

.auto-play-modal-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.auto-play-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(158px, 0.72fr);
  align-items: end;
  gap: 8px;
}

.auto-play-bet-control,
.auto-play-bonus-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.auto-play-bet-label,
.auto-play-bonus-label,
.auto-play-targets-label {
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.auto-play-bet-stepper,
.auto-play-target-stepper {
  display: grid;
  align-items: stretch;
  gap: 0;
  border: 1px solid #4b4b4b;
  background: #191a1a;
}

.auto-play-bet-stepper {
  height: 36px;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  padding: 4px;
  border-radius: 11px;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.auto-play-bet-stepper:focus-within,
.auto-play-target-stepper:focus-within {
  border-color: #727272;
  background: #202020;
}

.auto-play-stepper-btn,
.auto-play-target-btn {
  border: 1px solid #575757;
  background: #383838;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.auto-play-stepper-btn {
  border-radius: 8px;
  font-size: 18px;
}

.auto-play-stepper-btn:not(:disabled):hover,
.auto-play-stepper-btn:not(:disabled):focus-visible,
.auto-play-target-btn:not(:disabled):hover,
.auto-play-target-btn:not(:disabled):focus-visible {
  border-color: #727272;
  background: #474747;
  color: #ffffff;
  outline: none;
}

.auto-play-stepper-btn:not(:disabled):active,
.auto-play-target-btn:not(:disabled):active {
  transform: scale(0.94);
}

.auto-play-bet-value,
.auto-play-target-value {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  outline: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.16s ease, filter 0.16s ease;
}

.auto-play-bet-value {
  font-size: 18px;
}

.auto-play-bet-value:focus,
.auto-play-target-value:focus {
  filter: brightness(1.18);
}

.auto-play-bet-value:disabled,
.auto-play-target-value:disabled {
  cursor: default;
  opacity: 0.52;
}

.auto-play-bonus-switch {
  --bonus-accent: #ea6528;
  --bonus-accent-hover: #f17436;
  min-height: 36px;
  padding: 4px 7px 4px 8px;
  border-color: #4b4b4b;
  background: #383838;
  gap: 6px;
}

.auto-play-bonus-switch .bonus-switch-title {
  font-size: 8px;
}

.auto-play-bonus-switch .bonus-switch-subtitle {
  color: var(--bonus-accent);
  font-size: 11px;
}

.auto-play-bonus-switch .bonus-switch-visual {
  width: 46px;
  height: 20px;
  padding: 0 5px;
  background: #666666;
}

.auto-play-bonus-switch.active .bonus-switch-visual {
  background: var(--bonus-accent);
}

.auto-play-bonus-switch.active:not(:disabled):hover .bonus-switch-visual,
.auto-play-bonus-switch.active:not(:disabled):focus-visible .bonus-switch-visual {
  background: var(--bonus-accent-hover);
}

.auto-play-bonus-switch .bonus-switch-state {
  font-size: 8px;
}

.auto-play-bonus-switch .bonus-switch-knob {
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
}

.auto-play-bonus-switch.active .bonus-switch-knob {
  left: calc(100% - 17px);
}

.auto-play-rounds {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.auto-play-rounds.hidden {
  display: none;
}

.auto-play-rounds-label {
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.auto-play-round-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.auto-play-round-chip {
  height: 34px;
  border: 1px solid #4b4b4b;
  border-radius: 6px;
  background: #303030;
  color: #cfcfcf;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.auto-play-round-chip.active {
  border-color: #00f66f;
  background: #00f66f;
  color: #151515;
}

.auto-play-round-chip:not(:disabled):hover,
.auto-play-round-chip:not(:disabled):focus-visible {
  border-color: #6a6a6a;
  background: #3b3b3b;
  color: #ffffff;
  outline: none;
}

.auto-play-round-chip.active:not(:disabled):hover,
.auto-play-round-chip.active:not(:disabled):focus-visible {
  border-color: #15ff7d;
  background: #15ff7d;
  color: #151515;
}

.auto-play-round-chip:not(:disabled):active {
  transform: scale(0.96);
}

.auto-play-round-chip:disabled {
  cursor: default;
  opacity: 0.48;
}

.auto-play-targets {
  display: grid;
  gap: 6px;
}

.auto-play-targets.hidden {
  display: none;
}

.auto-play-target-editor {
  display: grid;
  gap: 6px;
}

.auto-play-target-title {
  color: #ffc400;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.auto-play-target-adjustment {
  height: 42px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border: 1px solid #ffc400;
  border-radius: 12px;
  background: #191a1a;
}

.auto-play-target-adjust,
.auto-play-target-value {
  border: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1;
}

.auto-play-target-adjust {
  border: 1px solid #575757;
  border-radius: 8px;
  background: #383838;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

.auto-play-target-adjust:disabled {
  cursor: default;
  opacity: 0.38;
}

.auto-play-target-value {
  display: grid;
  place-items: center;
  color: #ffc400;
  font-size: 20px;
}

.auto-play-target-list {
  display: grid;
  grid-auto-rows: minmax(38px, 1fr);
  gap: 5px;
}

.auto-play-target-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(30px, 0.28fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 700;
}

.auto-play-target-bomb {
  color: #ffffff;
}

.auto-play-target-at {
  color: #bdbdbd;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.auto-play-target-stepper {
  height: 36px;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  padding: 3px;
  border-radius: 10px;
}

.auto-play-target-btn {
  border-radius: 7px;
  font-size: 15px;
}

.auto-play-target-btn:disabled,
.auto-play-stepper-btn:disabled,
.auto-play-start-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.auto-play-target-value {
  color: #ffc400;
  font-size: 15px;
}

.auto-play-start-panel {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.auto-play-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: #00f66f;
  color: #151515;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

.auto-play-start-label {
  pointer-events: none;
}

.auto-play-start-btn:not(:disabled):hover,
.auto-play-start-btn:not(:disabled):focus-visible {
  background: #15ff7d;
  color: #151515;
  outline: none;
  filter: brightness(1.04);
}

.auto-play-start-btn:not(:disabled):active {
  transform: scale(0.98);
}

.auto-play-start-rounds {
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.bet-panel-left .top-total-win {
  border: 0;
  border-radius: 10px;
  background: #242424;
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  gap: 6px;
}

.bet-panel-left .top-total-win-value {
  color: #00f27e;
  font-size: 22px;
}

/* BET / CASH OUT group sits at the bottom of the right column (space-between) */
.bet-panel-right .bet-action-group {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.bet-panel-right .action-stack {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
}

.bet-panel-right .bet-btn {
  height: 80px;
  min-height: 80px;
  margin: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.1;
  /* don't transition height (drop it from the shared transition list) so state
     swaps between BET / CASH OUT / CANCEL never animate the button size */
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.16s ease, opacity 0.18s ease;
}

.bet-panel-right .bet-btn .btn-line-one {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 1.1;
}

.bet-panel-right .bet-btn .btn-line-two {
  display: none;
}

/* V6 BET shows the total stake (bet x bombs) on a second line */
.bet-panel-right .bet-btn.state-bet .btn-line-two {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
  opacity: 1;
}

/* CASH OUT shows the payout amount on a second line */
.bet-panel-right .bet-btn.state-cashout .btn-line-one {
  font-size: 12px;
  font-weight: 700;
}

.bet-panel-right .bet-btn.state-cashout .btn-line-two {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
}

.bet-panel-right .bet-btn.state-bet {
  background: #00f66f;
  color: #151515;
  transition:
    background-color 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.24s ease,
    box-shadow 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.24s ease;
}

.bet-panel-right .bet-btn.state-bet.hypersonic-mode {
  background: #ea6528;
  color: #151515;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 20px rgba(234, 101, 40, 0.12);
}

.bet-panel-right .bet-btn.state-cashout {
  background: #ffc400;
  color: #151515;
}

.bet-panel-right .bet-btn.state-cancel {
  background: #e04343;
  color: #ffffff;
}

.bet-panel-right .bet-btn.state-accepted,
.bet-panel-right .bet-btn.state-ended,
.bet-panel-right .bet-btn.state-bet:disabled {
  background: #4b4b4b;
  color: #d1d1d1;
}

.bet-panel-right .bet-btn.state-bet.hypersonic-mode:disabled,
.bet-panel-right .bet-btn.state-accepted.hypersonic-mode {
  background: #873f1e;
  color: #ffd7c5;
}

body.mode-bomb-pick .bet-panel-right .bet-btn.state-accepted.hypersonic-mode {
  background: #4b4b4b;
  color: #d1d1d1;
}

.bet-panel-right .bet-btn.state-cancel .btn-line-two {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  opacity: 0.9;
}

/* V6: cancel goes solid red with white text, and the locked BET ACCEPTED
   state carries the paid amount on its second line. */
body.mode-bomb-pick .bet-btn.state-cancel,
body.mode-bomb-pick .bet-panel-right .bet-btn.state-cancel,
body.mode-camera-approach .bet-btn.state-cancel,
body.mode-camera-approach .bet-panel-right .bet-btn.state-cancel {
  background: #e04343;
  color: #ffffff;
}

body.mode-bomb-pick .bet-panel-right .bet-btn.state-cancel .btn-line-two,
body.mode-camera-approach .bet-panel-right .bet-btn.state-cancel .btn-line-two {
  color: rgba(255, 255, 255, 0.88);
}

body.mode-bomb-pick .bet-btn.state-cancel:hover,
body.mode-bomb-pick .bet-btn.state-cancel:focus-visible,
body.mode-camera-approach .bet-btn.state-cancel:hover,
body.mode-camera-approach .bet-btn.state-cancel:focus-visible {
  background: #c93a3a;
}

body.mode-bomb-pick .bet-panel-right .bet-btn.state-accepted .btn-line-two {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
}

.bet-panel-right .cancel-bet-btn {
  height: var(--secondary-row-height);
  min-height: var(--secondary-row-height);
  margin-top: 8px;
  font-size: 12px;
  overflow: hidden;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease,
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.bet-panel-right .cancel-bet-btn.hidden {
  display: block !important;
  height: 0;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bet-panel-right .cancel-bet-btn.secondary-row-reveal-enter {
  animation: secondaryRowRevealEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes secondaryRowRevealEnter {
  0% {
    height: 0;
    min-height: 0;
    margin-top: 0;
    opacity: 0;
  }

  100% {
    height: var(--secondary-row-height);
    min-height: var(--secondary-row-height);
    margin-top: 8px;
    opacity: 1;
  }
}

/* CASH OUT ALL overlays the BUY BONUS card slot while a bet is live.
   Absolute so the slot height (and the BET/CASH OUT button below it) never shifts. */
.bet-panel-right .secondary-cashout-btn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  min-height: 80px;
  margin: 0;
  border-radius: 12px;
  font-size: 12px;
  gap: 4px; /* match CASH OUT button */
}

.bet-panel-right .secondary-cashout-btn.hidden {
  display: none !important;
}

.bet-panel-right .secondary-cashout-btn.secondary-row-reveal-enter {
  animation: none;
}

/* Match the CASH OUT button's label + amount typography */
.bet-panel-right .secondary-cashout-label {
  font-size: 12px;
  font-weight: 700;
}

.bet-panel-right .secondary-cashout-value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
}

.bet-panel-right .powerups,
.bet-panel-right .mini-graph {
  display: none !important;
}

@media (max-width: 1200px) {
  .control-panel.shell-panel {
    width: min(500px, 100%);
    max-width: 500px;
    height: 196px;
    min-height: 0;
    max-height: 196px;
    gap: 18px;
    padding: 14px;
  }

  .bet-panel-title {
    font-size: 10px;
  }

  .control-panel .adjustment {
    height: 46px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .control-panel .amount-box,
  .control-panel .amount-input {
    font-size: 14px;
  }

  .control-panel .adjust-btn {
    font-size: 18px;
  }

  .bet-bomb-list {
    max-height: none;
    margin-top: 16px;
  }

  .bet-bomb-row {
    min-height: 22px;
    font-size: 14px;
  }

  .bet-panel-right .hypersonic-mode-panel {
    margin: 0;
    height: 80px;
    min-height: 80px;
  }

  .bet-panel-right .bonus-switch-title {
    font-size: 10px;
  }

  .bet-panel-right .bonus-switch-subtitle {
    font-size: 14px;
  }

  .bet-panel-right .bonus-switch-visual {
    width: 56px;
    height: 24px;
  }

  .bet-panel-right .bonus-switch-state {
    font-size: 10px;
  }

  .bet-panel-right .bonus-switch-knob {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
  }

  .bet-panel-right .bonus-switch-panel.active .bonus-switch-knob {
    left: 3px;
    transform: translateX(var(--bonus-knob-travel));
  }

  .bet-panel-right .bet-btn {
    height: 80px;
    min-height: 80px;
    border-radius: 12px;
  }
}

@media (min-width: 1025px) {
  .control-panel .adjustment {
    height: 46px;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    padding: 5px;
    border-radius: 14px;
  }

  .control-panel .amount-box,
  .control-panel .amount-input {
    font-size: 18px;
  }

  .control-panel .adjust-btn {
    border-radius: 50%;
    font-size: 22px;
  }

  .bet-panel-right .hypersonic-mode-panel {
    height: 80px;
    min-height: 80px;
    margin: 0;
  }

  .bet-panel-right .bonus-switch-panel {
    min-height: 0;
    height: 100%;
    gap: 6px 14px;
  }

  .bet-panel-right .bonus-switch-title {
    font-size: 11px;
  }

  .bet-panel-right .bonus-switch-subtitle {
    font-size: 15px;
  }

  .bet-panel-right .bonus-switch-visual {
    width: 56px;
    height: 24px;
    padding: 0 6px;
  }

  .bet-panel-right .bonus-switch-state {
    font-size: 10px;
  }

  .bet-panel-right .bonus-switch-knob {
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
  }

  .bet-panel-right .bonus-switch-panel.active .bonus-switch-knob {
    left: 3px;
    transform: translateX(var(--bonus-knob-travel));
  }

  .bet-panel-right .bet-btn.state-swap-enter {
    animation-name: desktopButtonStateEnter;
  }

}

@media (max-width: 1024px) {
  .ground-stage {
    padding: 0;
  }

  .control-panel.shell-panel {
    width: 100%;
    max-width: none;
    height: 196px;
    max-height: 196px;
    --secondary-row-height: 40px;
  }

  /* Narrow columns: tighten the BUY BONUS card so the price doesn't truncate */
  .bet-panel-right .bonus-switch-panel {
    padding: 0 10px;
    gap: 4px 8px;
  }

  .bet-panel-right .bonus-switch-visual {
    --bonus-knob-travel: 24px;
    width: 48px;
  }

  .bet-bomb-list {
    max-height: 169px;
    gap: 5px;
  }

  .bet-bomb-row {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  body.asset-pack-train .multiplier {
    top: 38px;
    font-size: 84px;
  }

  body.asset-pack-train .v2-landscape {
    bottom: calc(31% - 40px);
    height: 18%;
  }

  body.asset-pack-train .runway-layer {
    height: 31%;
  }
}

@media (max-width: 560px) {
  body.asset-pack-train .multiplier {
    top: 30px;
    font-size: 62px;
  }

  body.asset-pack-train .v2-landscape {
    bottom: 25%;
  }

  body.asset-pack-train .runway-layer {
    bottom: 0;
    height: 27%;
  }

  body.asset-pack-train .train-locomotive-sprite {
    top: 0;
  }

  .train-railcar-amount {
    top: calc(-78px * var(--jet-scale) - 9px);
    min-width: max(34px, calc(94px * var(--jet-scale)));
    padding-right: max(6px, calc(14px * var(--jet-scale)));
    padding-left: max(6px, calc(14px * var(--jet-scale)));
  }
}

/* ── v5 (nova theme): Spirit's gameplay screen layered over train's B2 base ── */
body.asset-pack-v5 .sky-stage {
  border-color: #9fb4c4;
  background: url('./assets/themes/nova/bg/Sky.png') center bottom / cover no-repeat;
}

body.asset-pack-v5 .sky-bg {
  background: url('./assets/themes/nova/bg/Sky_loop.png') 0 bottom / auto 100% repeat-x;
  /* No transition: the sky drift is set per-frame via background-position;
     a transition animates each step and snaps the wrap back to the right. */
  transition: none;
}

body.asset-pack-v5 .clouds-layer {
  display: none;
}

body.asset-pack-v5 .engine-flame {
  display: none;
}

body.asset-pack-v5 .trail-layer {
  filter: none;
}

body.asset-pack-v5 .v2-landscape {
  display: block;
  bottom: 33%;
  height: 17%;
  z-index: 1;
  opacity: 1;
  background-image: url('./assets/themes/nova/bg/Mountains.png');
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: auto 100%;
  filter: none;
  /* Match the runway: the game loop writes this transform every frame. */
  transition: none;
}

body.asset-pack-v5 .runway-layer {
  bottom: -6px;
  height: 37%;
  background: url('./assets/themes/nova/bg/Land.png') repeat-x center bottom / auto 100%;
  filter: none;
  /* No CSS transition: the game animates the runway drop per-frame via runwayShift,
     so a transition only adds lag and can leave the road visible after takeoff. */
  transition: none;
}

body.asset-pack-v5 .runway-layer::before {
  display: none;
}

/* ---- V7: the spin panel drops V6's faceted skin for the aperture language ----
   Square-cornered glass plate with the same light border as the amount chips, so the
   count, brackets, panel and chips read as one instrument. */
body.mode-camera-approach .vegas-slot-frame {
  clip-path: none;
  -webkit-clip-path: none;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(10, 18, 30, 0.42);
  filter: none;
  box-shadow: 0 3px 10px rgba(4, 10, 18, 0.24);
  backdrop-filter: blur(5px) saturate(115%);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  animation: none;
}

body.mode-camera-approach .vegas-slot-frame::before {
  display: none;
}

body.mode-camera-approach .vegas-slot-mask {
  background: linear-gradient(to bottom, rgba(10, 18, 30, 0.8) 0%, transparent 32%, transparent 68%, rgba(10, 18, 30, 0.8) 100%);
}

body.mode-camera-approach .vegas-slot-line {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
}

body.mode-camera-approach .vegas-slot.is-landed .vegas-slot-frame {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* V7 has no spin panel: the armed multiplier lives inside the lock box readout. */
body.mode-camera-approach .vegas-slot {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .bet-btn.bet-mode-transition,
  .bet-btn.bet-mode-transition .btn-line-one,
  .bet-btn.bet-mode-transition .btn-line-two {
    animation: none;
  }

  .bet-panel-right .hypersonic-mode-panel,
  .bet-panel-right .bonus-switch-panel,
  .bet-panel-right .bonus-switch-visual,
  .bet-panel-right .bonus-switch-knob,
  .bet-panel-right .bet-btn.state-bet {
    transition: none;
  }
}

/* ---- V7 runs on Sora ---- */
body.mode-camera-approach,
body.mode-camera-approach * {
  font-family: "Sora", "Nunito", system-ui, sans-serif;
}

/* V7: tabular figures everywhere a multiplier is shown, so digits keep their columns and
   the trailing x stops shuffling as the value climbs. */
body.mode-camera-approach .multiplier,
body.mode-camera-approach .hypersonic-game-mult,
body.mode-camera-approach .hypersonic-boost-mult,
body.mode-camera-approach #countdownNumber,
body.mode-camera-approach .countdown-arm,
body.mode-camera-approach .countdown-arm-item {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* V7: the live bonus value occupies the plain multiplier's exact typography and box.
   The transferred factor can therefore become the running number without a position jump. */
body.mode-camera-approach .hypersonic-boost-mult {
  top: var(--v7-mult-top, 64px);
  min-width: 0;
  line-height: normal;
  letter-spacing: 0px;
  transition: none;
}

/* ── V8: V7 flight, cleaner launch bar and a simplified betting hierarchy ──── */
body.mode-v8 .countdown-overlay,
body.mode-v8 .countdown-overlay.align-top {
  box-sizing: border-box;
  /* Lifted clear of the bottom footage tags so they stay readable. */
  padding: 0 22px 46px;
}

body.mode-v8 .countdown-load {
  width: 100%;
}

body.mode-v8 .countdown-load-track {
  box-sizing: border-box;
  height: 18px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  background: rgba(18, 24, 28, 0.52);
  box-shadow: 0 5px 18px rgba(8, 14, 18, 0.18);
}

body.mode-v8 .countdown-load-fill {
  height: 100%;
  border-radius: 2px;
  /* The CASH OUT button's yellow, flat - the loader reads as part of the betting furniture. */
  background: #ffc400;
  box-shadow: 0 0 9px rgba(255, 196, 0, 0.38);
}

body.mode-v8 .control-panel.shell-panel {
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: 14px;
}

body.mode-v8 .bet-panel-divider {
  display: none;
}

body.mode-v8 .bet-panel-left {
  justify-content: flex-start;
  gap: 0;
}

body.mode-v8 .bet-panel-left .adjustment {
  order: -3;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 124px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(64px, 1fr) 52px;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  overflow: hidden;
}

body.mode-v8 .control-panel .adjust-btn {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  justify-self: stretch;
  padding: 0;
  border: 1px solid #575757;
  border-radius: 6px;
  background: #303030;
  color: #d0d0d0;
  font-size: 22px;
  line-height: 1;
}

body.mode-v8 .control-panel .adjust-btn:first-child {
  grid-row: 2;
  grid-column: 1;
  justify-self: stretch;
}

body.mode-v8 .control-panel .amount-box,
body.mode-v8 .control-panel .amount-input {
  grid-row: 1;
  grid-column: 1 / -1;
  border-bottom: 0;
  font-size: 20px;
}

body.mode-v8 .control-panel #increaseBtn {
  grid-row: 2;
  grid-column: 3;
  justify-self: stretch;
}

body.mode-v8 .control-panel .adjust-btn:not(:disabled):active {
  transform: scale(0.96);
}

.v8-amount-nominal {
  display: none;
}

body.mode-v8.v8-amount-editing .control-panel .adjust-btn {
  visibility: hidden;
  pointer-events: none;
}

body.mode-v8.v8-amount-editing .bet-left-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal {
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid #575757;
  border-radius: 6px;
  background: #303030;
  color: #d0d0d0;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-v8-nominal="1"] {
  grid-column: 1;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-v8-nominal="2"] {
  grid-column: 2;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-v8-nominal="5"] {
  grid-column: 3;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal:hover,
body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal:focus-visible {
  border-color: #727272;
  background: #474747;
  color: #ffffff;
  outline: none;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal:active {
  transform: scale(0.96);
}

body.mode-v8 .bet-left-top {
  position: absolute;
  z-index: 4;
  left: 5px;
  right: 5px;
  bottom: 5px;
  width: auto;
  height: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  pointer-events: none;
}

body.mode-v8 .bet-left-top .auto-play-panel {
  grid-column: 2;
  min-width: 0;
  pointer-events: auto;
}

body.mode-v8 .bet-left-top .auto-play-open-btn {
  border-radius: 6px;
  font-size: 9px;
  white-space: nowrap;
}

body.mode-v8 .bet-panel-right .bet-btn.waiting-next-round .btn-line-two {
  font-size: 11px;
}

body.mode-v8 .cashout-list.show {
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #505050;
  border-radius: 8px;
  background: #191a1a;
  gap: 3px;
}

body.mode-v8 .cashout-list.show .cashout-row {
  flex: 1 1 0;
  min-height: 0;
  padding: 5px 9px;
  border: 1px solid #454545;
  border-radius: 6px;
  background: #303030;
  animation: none;
}

body.mode-v8 .cashout-list.show .cashout-row.is-pending {
  border-color: #3d3d3d;
  background: #252626;
}

body.mode-v8 .cashout-list.show .cashout-row.is-pending .cashout-row-bomb {
  color: #e7ad46;
  animation: v8LoadedBombBreath 2.4s ease-in-out infinite;
}

body.mode-v8 .cashout-list.show .cashout-row.is-pending .cashout-row-amt {
  color: #848484;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  animation: v8LoadedBombBreath 2.4s ease-in-out infinite;
}

body.mode-v8 .cashout-list.show .cashout-row.is-cashed .cashout-row-bomb {
  color: #d0d0d0;
}

/* The icons alone carry the inventory; the row's aria-label still names each bomb. */
body.mode-v8 .cashout-list.show .cashout-row-bomb-number {
  display: none;
}

@keyframes v8LoadedBombBreath {
  0%,
  100% {
    opacity: 0.58;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-v8 .cashout-list.show .cashout-row.is-pending .cashout-row-bomb,
  body.mode-v8 .cashout-list.show .cashout-row.is-pending .cashout-row-amt {
    animation: none;
    opacity: 0.82;
  }
}

/* CASH OUT ALL wears the BONUS BET button's orange, dark figures and all. */
body.mode-v8 .secondary-cashout-btn {
  border-color: transparent;
  background: #ea6528;
  color: #151515;
}

body.mode-v8 .secondary-cashout-btn .secondary-cashout-label,
body.mode-v8 .secondary-cashout-btn .secondary-cashout-value {
  color: #151515;
}

body.mode-v8 .quick-bet-chips {
  display: none !important;
}

@media (max-width: 560px) {
  body.mode-v8 .countdown-overlay,
  body.mode-v8 .countdown-overlay.align-top {
    padding: 0 12px 42px;
  }

  body.mode-v8 .countdown-load-track {
    height: 16px;
  }

  body.mode-v8 .control-panel.shell-panel {
    gap: 10px;
  }

  body.mode-v8 .control-panel .amount-box,
  body.mode-v8 .control-panel .amount-input {
    font-size: 18px;
  }
}

/* ── V9: the V8 build with the bet/cash-out palette swapped ────────────────
   V9 carries mode-v8 as well, so everything above applies and these override. */
body.mode-v9 .bet-panel-right .bet-btn.state-bet:not(.hypersonic-mode):not(:disabled) {
  background: #ffc400;
  color: #151515;
}

body.mode-v9 .bet-panel-right .bet-btn.state-cashout:not(:disabled),
body.mode-v9 .bet-panel-right .bet-btn.state-cashout.bomb-cashout:not(:disabled) {
  background: #00f66f;
  color: #151515;
}

/* CASH OUT ALL takes the BONUS BET card's neutral panel - it shares that slot -
   with a green label over the white figure. */
body.mode-v9 .secondary-cashout-btn {
  border: 1px solid #4b4b4b;
  background: #2f2f2f;
}

body.mode-v9 .secondary-cashout-btn .secondary-cashout-label {
  color: #00f66f;
}

body.mode-v9 .secondary-cashout-btn .secondary-cashout-value {
  color: #ffffff;
}

/* The right column splits 40 / 60: the bonus-or-cash-out-all slot over the main
   button. space-between leaves exactly the gap between them. */
body.mode-v9 .bet-panel-right {
  --v9-stack-gap: 6px;
}

body.mode-v9 .bet-panel-right .hypersonic-mode-panel,
body.mode-v9 .bet-panel-right .secondary-cashout-btn {
  flex: 0 0 auto;
  height: calc((100% - var(--v9-stack-gap)) * 0.4);
  min-height: 0;
}

body.mode-v9 .bet-panel-right .bet-action-group {
  flex: 0 0 auto;
  height: calc((100% - var(--v9-stack-gap)) * 0.6);
  min-height: 0;
}

body.mode-v9 .bet-panel-right .action-stack,
body.mode-v9 .bet-panel-right .bet-btn {
  height: 100%;
  min-height: 0;
}

/* The base states paint the cash-out button's press in yellow; V9's cash-out is
   green, and its BET is the yellow, so both need their own hover/press family. */
body.mode-v9 .bet-panel-right .bet-btn.state-cashout:not(:disabled):hover,
body.mode-v9 .bet-panel-right .bet-btn.state-cashout:not(:disabled):focus-visible,
body.mode-v9 .bet-panel-right .bet-btn.state-cashout.bomb-cashout:not(:disabled):hover,
body.mode-v9 .bet-panel-right .bet-btn.state-cashout.bomb-cashout:not(:disabled):focus-visible {
  background: #14ff89;
}

body.mode-v9 .bet-panel-right .bet-btn.state-cashout:not(:disabled):active,
body.mode-v9 .bet-panel-right .bet-btn.state-cashout.bomb-cashout:not(:disabled):active {
  background: #5cffab;
}

/* The tap pulse keyframes the background too, in yellow - V9 needs a green copy
   or every press flashes yellow for a quarter second. */
body.mode-v9 .bet-btn.cashout-press-pulse {
  animation-name: v9CashoutPressPulse;
}

@keyframes v9CashoutPressPulse {
  0% {
    transform: scale(1);
    background-color: #14ff89;
    filter: brightness(1);
  }

  44% {
    transform: scale(1.035);
    background-color: #5cffab;
    filter: brightness(1.02);
  }

  100% {
    transform: scale(1);
    background-color: #14ff89;
    filter: brightness(1);
  }
}

body.mode-v9 .bet-panel-right .bet-btn.state-bet:not(.hypersonic-mode):not(:disabled):hover,
body.mode-v9 .bet-panel-right .bet-btn.state-bet:not(.hypersonic-mode):not(:disabled):focus-visible {
  background: #ffc940;
}

body.mode-v9 .bet-panel-right .bet-btn.state-bet:not(.hypersonic-mode):not(:disabled):active {
  background: #ffe36a;
}

body.mode-v9 .secondary-cashout-btn:not(:disabled):hover,
body.mode-v9 .secondary-cashout-btn:not(:disabled):focus-visible {
  background: #3a3a3a;
}

body.mode-v9 .secondary-cashout-btn:not(:disabled):active {
  background: #454545;
}

/* Loaded bombs hold still in V9 - no breathing - and stay neutral until they
   bank, when they turn green with their amount. */
body.mode-v9 .cashout-list.show .cashout-row.is-pending .cashout-row-bomb,
body.mode-v9 .cashout-list.show .cashout-row.is-pending .cashout-row-amt {
  animation: none;
  opacity: 0.82;
}

body.mode-v9 .cashout-list.show .cashout-row.is-pending .cashout-row-bomb {
  color: #9c9c9c;
}

body.mode-v9 .cashout-list.show .cashout-row.is-cashed .cashout-row-bomb {
  color: #00f27e;
}

/* The TOTAL WIN figure banks in the money green the coin rain falls in - the
   base rule and its keyframed glow already carry it, so V9 up add nothing. */

/* A bet placed during the countdown is locked: the button reads BET ACCEPTED and
   goes inert, its figures green so the accepted charge still stands out. */
body.mode-v9 .bet-panel-right .bet-btn.state-accepted,
body.mode-v9 .bet-panel-right .bet-btn.state-accepted.hypersonic-mode {
  border: 1px solid #4b4b4b;
  background: #292929;
  color: #00f66f;
}

body.mode-v9 .bet-panel-right .bet-btn.state-accepted .btn-line-one,
body.mode-v9 .bet-panel-right .bet-btn.state-accepted .btn-line-two {
  color: #00f66f;
}

/* The right panel hides second lines outside the BET state; the accepted charge
   needs its own, sized like the CONFIRM BET total it replaces. */
body.mode-v9 .bet-panel-right .bet-btn.state-accepted .btn-line-two {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
  opacity: 1;
}

/* The amount the player edits is labelled, same as the button it feeds. */
body.mode-v9 .bet-panel-left .adjustment {
  position: relative;
}

body.mode-v9 .bet-panel-left .adjustment::before {
  content: "BET";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  pointer-events: none;
}

/* V9 gives the reel a wider pitch; the dial treatment itself lives at the end
   of the file, guarded to pure V9 so V10's box keeps its own frame. */
body.mode-v9 {
  --v9-reel-pitch: clamp(132px, 30vw, 168px);
}

body.mode-v9 .countdown-arm-item {
  flex-basis: var(--v9-reel-pitch);
}

/* V9 names the autoplay targets with the bomb itself instead of T1..T5. */
body.mode-v9 .auto-play-target-bomb {
  display: block;
  width: 30px;
  height: 11px;
  font-size: 0;
  line-height: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 331 73'%3E%3Cpath fill='%23ffffff' d='M2 33 L3 29 L4 3 L16 2 L30 3 L44 3 L55 5 L58 7 L61 9 L64 11 L66 13 L69 15 L70 17 L72 19 L84 17 L86 16 L91 14 L96 12 L100 11 L105 9 L114 8 L128 8 L142 9 L156 9 L170 9 L184 9 L198 9 L212 9 L226 9 L240 9 L254 9 L268 10 L277 12 L282 13 L287 15 L293 17 L296 18 L301 20 L306 22 L310 23 L313 25 L317 27 L320 29 L324 31 L327 33 L329 35 L329 37 L327 39 L324 41 L321 43 L317 45 L313 47 L310 49 L306 50 L301 52 L296 54 L294 55 L288 57 L282 59 L278 60 L268 62 L254 63 L240 63 L226 63 L212 63 L198 63 L184 63 L170 63 L156 63 L142 63 L128 64 L114 64 L105 63 L100 61 L96 60 L91 58 L86 56 L84 55 L72 53 L70 55 L69 57 L66 59 L63 61 L61 63 L58 65 L54 67 L44 69 L30 69 L16 70 L3 69 L2 39 Z'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* A bonus bet during the countdown charges the launch bar with the bonus orange. */
body.mode-v9 .countdown-load.bonus-charged .countdown-load-fill {
  background: #ea6528;
  box-shadow: 0 0 9px rgba(234, 101, 40, 0.38);
}

/* V9 drops the bomb number from the cash-out label and shows the bomb instead,
   so a single-bomb drop reads at a glance. */
body.mode-v9 .bet-btn.bomb-drop-cashout .btn-line-one {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.mode-v9 .bet-btn.bomb-drop-cashout .btn-line-one::after {
  content: "";
  width: 26px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 331 73'%3E%3Cpath fill='%23151515' d='M2 33 L3 29 L4 3 L16 2 L30 3 L44 3 L55 5 L58 7 L61 9 L64 11 L66 13 L69 15 L70 17 L72 19 L84 17 L86 16 L91 14 L96 12 L100 11 L105 9 L114 8 L128 8 L142 9 L156 9 L170 9 L184 9 L198 9 L212 9 L226 9 L240 9 L254 9 L268 10 L277 12 L282 13 L287 15 L293 17 L296 18 L301 20 L306 22 L310 23 L313 25 L317 27 L320 29 L324 31 L327 33 L329 35 L329 37 L327 39 L324 41 L321 43 L317 45 L313 47 L310 49 L306 50 L301 52 L296 54 L294 55 L288 57 L282 59 L278 60 L268 62 L254 63 L240 63 L226 63 L212 63 L198 63 L184 63 L170 63 L156 63 L142 63 L128 64 L114 64 L105 63 L100 61 L96 60 L91 58 L86 56 L84 55 L72 53 L70 55 L69 57 L66 59 L63 61 L61 63 L58 65 L54 67 L44 69 L30 69 L16 70 L3 69 L2 39 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* V9 spells the autoplay control out instead of drawing it. Once a session is
   running the button switches to its rounds-left count, as before. */
body.mode-v9 .auto-play-open-btn:not(.active) .auto-play-open-icon {
  display: none;
}

body.mode-v9 .auto-play-open-btn:not(.active)::before {
  content: "AUTO";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* ── V10: V9's game with the footage marks relabelled ──────────────────────
   V10 carries mode-v9 too, so everything above applies and these override. */

/* The autoplay dialog: the dialog already says BONUS above the switch, so the
   switch drops its own caption and gives the figure the room. The target icons
   sit at the caption's weight, not brighter than the words beside them. */
body.mode-v10 .auto-play-bonus-switch .bonus-switch-title {
  display: none;
}

/* Both figures read at the rounds chips' size, so the dialog holds one scale. */
body.mode-v10 .auto-play-bonus-switch .bonus-switch-subtitle,
body.mode-v10 .auto-play-bet-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

body.mode-v10 .auto-play-target-bomb {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 331 73'%3E%3Cpath fill='%23bdbdbd' d='M2 33 L3 29 L4 3 L16 2 L30 3 L44 3 L55 5 L58 7 L61 9 L64 11 L66 13 L69 15 L70 17 L72 19 L84 17 L86 16 L91 14 L96 12 L100 11 L105 9 L114 8 L128 8 L142 9 L156 9 L170 9 L184 9 L198 9 L212 9 L226 9 L240 9 L254 9 L268 10 L277 12 L282 13 L287 15 L293 17 L296 18 L301 20 L306 22 L310 23 L313 25 L317 27 L320 29 L324 31 L327 33 L329 35 L329 37 L327 39 L324 41 L321 43 L317 45 L313 47 L310 49 L306 50 L301 52 L296 54 L294 55 L288 57 L282 59 L278 60 L268 62 L254 63 L240 63 L226 63 L212 63 L198 63 L184 63 L170 63 L156 63 L142 63 L128 64 L114 64 L105 63 L100 61 L96 60 L91 58 L86 56 L84 55 L72 53 L70 55 L69 57 L66 59 L63 61 L61 63 L58 65 L54 67 L44 69 L30 69 L16 70 L3 69 L2 39 Z'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* The winning value sits in a hairline rectangle instead of V9's brackets. */
body.mode-v10 .countdown-arm::before {
  left: 50%;
  top: 50%;
  /* Full slot width and tall enough for the figures - z-index 0 keeps the tinted
     pane behind the value, which the window paints after it. */
  z-index: 0;
  width: var(--v9-reel-pitch);
  height: 66px;
  border: 1px solid rgba(234, 101, 40, 0.75);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -50%);
}

body.mode-v10 .countdown-arm::after {
  content: none;
}

/* The reel's frame travels with the value: outline + a spread shadow draw it
   outside the flyer's box, so nothing shifts the glyphs, and both dissolve once
   the number has landed. The reel's own frame goes as the value lifts off. */
body.mode-v10 .v7-bonus-transfer {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.16);
  outline: 1px solid rgba(234, 101, 40, 0.75);
  outline-offset: 12px;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    outline-color 0.16s ease;
}

body.mode-v10 .v7-bonus-transfer.frame-out {
  background-color: transparent;
  box-shadow: 0 0 0 12px transparent;
  outline-color: transparent;
}

body.mode-v10 .countdown-arm.transferring::before {
  opacity: 0;
  transition: opacity 0.16s ease;
}

/* The win readout moves into the bottom-right mark, so the centred one goes. */
body.mode-v10 .v4-footage-mark.mark-bottom-center {
  display: none;
}

/* The drop button loses its words: the bomb alone reads as "drop one". */
body.mode-v10 .bet-btn.bomb-drop-cashout .btn-line-one::after {
  width: 54px;
  height: 20px;
}

body.mode-v10 .bet-btn.bomb-drop-cashout .btn-line-one {
  gap: 0;
}

/* The two readouts keep the faint plate the other footage marks wear - the
   alphas are the base values pre-multiplied by that 0.74 opacity - and only the
   text is lifted to white so the figures stay legible. */
body.mode-v10 .v4-footage-mark.mark-bottom-left,
body.mode-v10 .v4-footage-mark.mark-bottom-right {
  opacity: 1;
  border-color: rgba(226, 233, 225, 0.25);
  background: rgba(20, 28, 30, 0.12);
  color: #ffffff;
  /* A tight, darker halo rather than a soft glow: on pale sky the blur was
     spending itself before it separated the white from the background. */
  text-shadow: 0 0 1px rgba(16, 22, 26, 0.85), 0 1px 1px rgba(16, 22, 26, 0.55);
}

/* From V9 up, the TOTAL WIN celebration is a coin rain, not a burst: more
   coins, slightly smaller, falling from above the frame past the bottom with a
   light sideways drift. The panel clips them, and the figure stays on top (its
   z-index wins). The extra coins past 18 exist only for this rain - hidden
   everywhere else. V8 keeps the original burst. */
.win-celebration-coins i:nth-child(n+19) {
  display: none;
}

body.mode-v9 .win-celebration-coins i:nth-child(n+19) {
  display: block;
}

body.mode-v9 .win-celebration-coins {
  overflow: hidden;
  border-radius: inherit;
}

body.mode-v9 .win-celebration-coins i {
  top: -44px;
  scale: 0.78;
}

body.mode-v9 .win-celebration.show .win-celebration-coins i {
  animation-name: v10CoinRain;
  /* a soft accelerate reads as gravity without the burst's snap */
  animation-timing-function: cubic-bezier(0.34, 0.08, 0.72, 0.62);
}

/* Tumble only on the coin face - the arc shapes belong to the burst. */
body.mode-v9 .win-celebration.show .win-celebration-coins i b {
  animation-name: coinTumble;
  animation-timing-function: linear;
}

@keyframes v10CoinRain {
  0% {
    translate: 0 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    translate: var(--v10-sway, 0px) 470px;
    opacity: 0;
  }
}

/* Quick falls in two side lanes - nothing crosses the middle third, so the
   figure sits in clear air while the coins pour down either side of it. */
body.mode-v9 .win-celebration-coins i:nth-child(1) { left: 6%; --delay: 0.0s; --dur: 1.1s; --v10-sway: -10px; }
body.mode-v9 .win-celebration-coins i:nth-child(2) { left: 93%; --delay: 0.05s; --dur: 1.25s; --v10-sway: 12px; }
body.mode-v9 .win-celebration-coins i:nth-child(3) { left: 22%; --delay: 0.12s; --dur: 0.95s; --v10-sway: 8px; }
body.mode-v9 .win-celebration-coins i:nth-child(4) { left: 78%; --delay: 0.02s; --dur: 1.15s; --v10-sway: -10px; }
body.mode-v9 .win-celebration-coins i:nth-child(5) { left: 12%; --delay: 0.2s; --dur: 1.3s; --v10-sway: 6px; }
body.mode-v9 .win-celebration-coins i:nth-child(6) { left: 88%; --delay: 0.16s; --dur: 1.0s; --v10-sway: -8px; }
body.mode-v9 .win-celebration-coins i:nth-child(7) { left: 28%; --delay: 0.06s; --dur: 1.2s; --v10-sway: 10px; }
body.mode-v9 .win-celebration-coins i:nth-child(8) { left: 72%; --delay: 0.24s; --dur: 1.05s; --v10-sway: -12px; }
body.mode-v9 .win-celebration-coins i:nth-child(9) { left: 17%; --delay: 0.32s; --dur: 1.15s; --v10-sway: 8px; }
body.mode-v9 .win-celebration-coins i:nth-child(10) { left: 83%; --delay: 0.28s; --dur: 1.25s; --v10-sway: -6px; }
body.mode-v9 .win-celebration-coins i:nth-child(11) { left: 25%; --delay: 0.18s; --dur: 1.0s; --v10-sway: -10px; }
body.mode-v9 .win-celebration-coins i:nth-child(12) { left: 75%; --delay: 0.1s; --dur: 1.35s; --v10-sway: 8px; }
body.mode-v9 .win-celebration-coins i:nth-child(13) { left: 8%; --delay: 0.36s; --dur: 1.2s; --v10-sway: 12px; }
body.mode-v9 .win-celebration-coins i:nth-child(14) { left: 95%; --delay: 0.34s; --dur: 1.05s; --v10-sway: -8px; }
body.mode-v9 .win-celebration-coins i:nth-child(15) { left: 30%; --delay: 0.4s; --dur: 1.25s; --v10-sway: 6px; }
body.mode-v9 .win-celebration-coins i:nth-child(16) { left: 70%; --delay: 0.38s; --dur: 1.1s; --v10-sway: -8px; }
body.mode-v9 .win-celebration-coins i:nth-child(17) { left: 15%; --delay: 0.3s; --dur: 1.0s; --v10-sway: 8px; }
body.mode-v9 .win-celebration-coins i:nth-child(18) { left: 85%; --delay: 0.44s; --dur: 1.2s; --v10-sway: -8px; }
body.mode-v9 .win-celebration-coins i:nth-child(19) { left: 3%; --delay: 0.08s; --dur: 1.15s; --v10-sway: 8px; --size: 22px; --spin: 540deg; --axis: 1 0 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(20) { left: 97%; --delay: 0.14s; --dur: 1.25s; --v10-sway: -10px; --size: 26px; --spin: -620deg; --axis: 0 0 1; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(21) { left: 20%; --delay: 0.26s; --dur: 1.05s; --v10-sway: 8px; --size: 20px; --spin: 600deg; --axis: 1 0.2 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(22) { left: 80%; --delay: 0.04s; --dur: 1.3s; --v10-sway: -6px; --size: 30px; --spin: -540deg; --axis: 0.7 0.3 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(23) { left: 10%; --delay: 0.46s; --dur: 1.0s; --v10-sway: 10px; --size: 24px; --spin: 660deg; --axis: 1 0 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(24) { left: 90%; --delay: 0.42s; --dur: 1.15s; --v10-sway: -8px; --size: 21px; --spin: -700deg; --axis: 0 0 1; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(25) { left: 26%; --delay: 0.5s; --dur: 1.25s; --v10-sway: 6px; --size: 27px; --spin: 520deg; --axis: 0.6 0.5 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(26) { left: 74%; --delay: 0.22s; --dur: 1.05s; --v10-sway: -10px; --size: 23px; --spin: -580deg; --axis: 1 0.1 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(27) { left: 18%; --delay: 0.48s; --dur: 1.2s; --v10-sway: 8px; --size: 25px; --spin: 640deg; --axis: 0.8 0.3 0; --rise: 0px; --fall: 0px; }
body.mode-v9 .win-celebration-coins i:nth-child(28) { left: 82%; --delay: 0.52s; --dur: 1.0s; --v10-sway: -6px; --size: 22px; --spin: -600deg; --axis: 1 0 0; --rise: 0px; --fall: 0px; }

/* V12: the round's running take, centre stage, wearing the same small bold
   treatment as the last-win mark rather than a headline of its own. */
.v12-drop-total {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 30;
  transform: translateX(-50%) scale(0.82);
  /* The take reads in the money's own yellow. A tight dark halo carries it over
     pale sky, the same way the BET and LAST WIN tags either side of it hold. */
  color: #ffc400;
  /* A soft blurred drop under a faint edge: at button size the 1px halo read
     as a hard outline, so the depth moves into the blur. */
  text-shadow: 0 0 2px rgba(16, 22, 26, 0.55), 0 2px 9px rgba(16, 22, 26, 0.5);
  /* The cash-out button's amount size: the running take and the figure it grows
     by read at the same weight. */
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.v12-drop-total.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .v12-drop-total {
    transform: translateX(-50%) scale(1);
    transition: opacity 0.2s ease;
  }
}

/* V9 and V12 read the climb in white whoever is flying it: no live-bet yellow,
   no bonus orange, on the plain multiplier or the bonus readout that replaces
   it. Only the crash still recolours. */
body.mode-v9:not(.mode-v10) .multiplier:not(.crashed),
body.mode-v13 .multiplier:not(.crashed),
body.mode-v14 .multiplier:not(.crashed),
body.mode-v9:not(.mode-v10) .hypersonic-boost-mult,
body.mode-v12 .multiplier:not(.crashed),
body.mode-v12 .hypersonic-boost-mult {
  color: #ffffff;
  text-shadow: var(--mult-shadow-soft);
}

/* ── V12: V9's dial, stood on end ──
   V9's aim language verbatim - a needle above and below the winning value, the
   hairline rail under its digits, the same type cut, values on open sky with
   the neighbours sunk - but the strip rolls vertically. The window is tall
   enough to glimpse the next and previous rows tipping away (the painter turns
   them on the drum), and everything else is exactly the V9 instrument. */
body.mode-v12 .countdown-arm {
  display: none;
}

body.mode-v12 .vegas-slot {
  /* Riding the overlay's flex column instead of floating over the sky puts the
     reel exactly where the rail sat: hard above the loading line, whatever the
     stage height. order:-1 lifts it past the header it follows in the markup.
     Relative, so the needle pair anchors to this box. */
  position: relative;
  left: auto;
  top: auto;
  order: -1;
  display: block;
  margin-bottom: 14px;
  transform: none;
  /* V9's reel type, and a window of nearly two rows: the centre value with a
     sliver of each neighbour turning past above and below. */
  --slot-font-size: clamp(46px, 5vw, 64px);
  --slot-item-height: calc(var(--slot-font-size) * 1.06);
  --slot-frame-width: min(360px, calc(var(--slot-font-size) * 5));
  --v12-window: calc(var(--slot-item-height) * 1.85);
  perspective: 380px;
}

/* Nothing rides up with the value but the value: V10's white pane and its
   orange outline belong to the rail, and this dial has no frame at all. */
body.mode-v12 .v7-bonus-transfer {
  background: none;
  box-shadow: none;
  outline: none;
}

/* No plate, no border, no glass - the values turn in open sky, and the window
   fades its own edges so a row leaving dissolves over the back of the drum. */
body.mode-v12 .vegas-slot-frame {
  clip-path: none;
  -webkit-clip-path: none;
  height: var(--v12-window);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  animation: none;
  transform-style: preserve-3d;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}

/* The window is taller than a row, so the strip starts half the difference
   down - the target row lands dead centre without touching the spin math. */
body.mode-v12 .vegas-slot-strip {
  top: calc((var(--v12-window) - var(--slot-item-height)) / 2);
}

body.mode-v12 .vegas-slot-mask {
  display: none;
}

body.mode-v12 .vegas-slot-line {
  display: none;
}

/* The vertical half of the reticle: one tick below the value, clear of the
   digits - with the side dashes it closes the aim around it. */
body.mode-v12 .vegas-slot-frame::before {
  content: none;
}

body.mode-v12 .vegas-slot-frame::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  z-index: 5;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: rgba(234, 101, 40, 0.92);
  box-shadow: 0 0 6px rgba(234, 101, 40, 0.35);
  transform: translateX(-50%);
  transition: height 0.2s ease, box-shadow 0.2s ease, opacity 0.16s ease;
  pointer-events: none;
  animation: none;
}

body.mode-v12 .vegas-slot-frame::after {
  top: auto;
  bottom: calc(50% - var(--slot-item-height) / 2 - 24px);
}

body.mode-v12 .vegas-slot.is-locking .vegas-slot-frame::after,
body.mode-v12 .vegas-slot.is-landed .vegas-slot-frame::after {
  height: 20px;
  box-shadow: 0 0 10px rgba(234, 101, 40, 0.55);
}

body.mode-v12 .vegas-slot.is-landed .vegas-slot-frame::after {
  animation: v9NeedleBloom 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The needle pair flanks the winning row - a horizontal dash either side at
   the row's height, never touching the digits. Locking stretches each toward
   the value (they grow from their outer anchors); landing blooms them. */
body.mode-v12 .vegas-slot::before,
body.mode-v12 .vegas-slot::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: rgba(234, 101, 40, 0.92);
  box-shadow: 0 0 6px rgba(234, 101, 40, 0.35);
  transform: translateY(-50%);
  transition: width 0.2s ease, box-shadow 0.2s ease, opacity 0.16s ease;
  pointer-events: none;
}

body.mode-v12 .vegas-slot::before {
  left: calc(50% - 96px);
  right: auto;
}

body.mode-v12 .vegas-slot::after {
  left: auto;
  right: calc(50% - 96px);
}

body.mode-v12 .vegas-slot.is-locking::before,
body.mode-v12 .vegas-slot.is-locking::after,
body.mode-v12 .vegas-slot.is-landed::before,
body.mode-v12 .vegas-slot.is-landed::after {
  width: 20px;
  box-shadow: 0 0 10px rgba(234, 101, 40, 0.55);
}

body.mode-v12 .vegas-slot.is-landed::before,
body.mode-v12 .vegas-slot.is-landed::after {
  animation: v9NeedleBloom 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* V9's digits: the arm's cut, not the slot machine's. */
body.mode-v12 .vegas-slot-item {
  color: #ea6528;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-shadow: 0 0 12px rgba(234, 101, 40, 0.22);
}

/* Landing: the chosen value blooms once and the rest sink out of the way. */
body.mode-v12 .vegas-slot.is-locking .vegas-slot-item:not(.reel-selected),
body.mode-v12 .vegas-slot.is-landed .vegas-slot-item:not(.reel-selected) {
  opacity: 0.1 !important;
}

body.mode-v12 .vegas-slot.is-landed .vegas-slot-frame {
  border: 0;
  background: none;
  box-shadow: none;
}

body.mode-v12 .vegas-slot.is-landed .vegas-slot-item.reel-selected {
  animation: v9DialValueBloom 0.5s ease-out both;
}

body.mode-v12 .vegas-slot.transferring .vegas-slot-item.reel-selected {
  opacity: 0 !important;
  transition: none !important;
}

/* The value leaves for the top; the marks that aimed it let go. */
body.mode-v12 .vegas-slot.transferring::before,
body.mode-v12 .vegas-slot.transferring::after,
body.mode-v12 .vegas-slot.transferring .vegas-slot-frame::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.mode-v12 .vegas-slot.is-landed::before,
  body.mode-v12 .vegas-slot.is-landed::after,
  body.mode-v12 .vegas-slot.is-landed .vegas-slot-frame::after,
  body.mode-v12 .vegas-slot.is-landed .vegas-slot-item.reel-selected {
    animation: none;
  }
}

/* ── V9: the reel as a tuner dial ──
   The bracket halves and the washed band are gone. The values ride open sky
   over a fixed hairline rail, each carrying its own index tick like a
   frequency scale, and a needle pair points at the winning column. The wheel
   falloff (in the painter) sinks the neighbours, so the centre value carries
   the row. Guarded to pure V9 - V10 and its children keep their box. */
body.mode-v9:not(.mode-v10) .countdown-arm,
body.mode-v13 .countdown-arm,
body.mode-v14 .countdown-arm {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The needle: a tick above and below the winning column, nothing touching
   the digits. Locking stretches them toward the value; landing blooms them. */
body.mode-v9:not(.mode-v10) .countdown-arm::before,
body.mode-v13 .countdown-arm::before,
body.mode-v14 .countdown-arm::before,
body.mode-v9:not(.mode-v10) .countdown-arm::after,
body.mode-v13 .countdown-arm::after,
body.mode-v14 .countdown-arm::after {
  /* V10 blanks the arm's ::after for its box; the dial re-arms both needles. */
  content: "";
  left: 50%;
  width: 2px;
  height: 14px;
  border: 0;
  border-radius: 1px;
  background: rgba(234, 101, 40, 0.92);
  box-shadow: 0 0 6px rgba(234, 101, 40, 0.35);
  transform: translateX(-50%);
  transition: height 0.2s ease, box-shadow 0.2s ease;
}

body.mode-v9:not(.mode-v10) .countdown-arm::before,
body.mode-v13 .countdown-arm::before,
body.mode-v14 .countdown-arm::before {
  top: 6px;
  bottom: auto;
}

body.mode-v9:not(.mode-v10) .countdown-arm::after,
body.mode-v13 .countdown-arm::after,
body.mode-v14 .countdown-arm::after {
  top: auto;
  bottom: 6px;
}

body.mode-v9:not(.mode-v10) .countdown-arm.locking::before,
body.mode-v13 .countdown-arm.locking::before,
body.mode-v14 .countdown-arm.locking::before,
body.mode-v9:not(.mode-v10) .countdown-arm.locking::after,
body.mode-v13 .countdown-arm.locking::after,
body.mode-v14 .countdown-arm.locking::after,
body.mode-v9:not(.mode-v10) .countdown-arm.landed::before,
body.mode-v13 .countdown-arm.landed::before,
body.mode-v14 .countdown-arm.landed::before,
body.mode-v9:not(.mode-v10) .countdown-arm.landed::after,
body.mode-v13 .countdown-arm.landed::after,
body.mode-v14 .countdown-arm.landed::after {
  height: 20px;
  box-shadow: 0 0 10px rgba(234, 101, 40, 0.55);
}

body.mode-v9:not(.mode-v10) .countdown-arm.landed::before,
body.mode-v13 .countdown-arm.landed::before,
body.mode-v14 .countdown-arm.landed::before,
body.mode-v9:not(.mode-v10) .countdown-arm.landed::after,
body.mode-v13 .countdown-arm.landed::after,
body.mode-v14 .countdown-arm.landed::after {
  animation: v9NeedleBloom 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes v9NeedleBloom {
  0% {
    box-shadow: 0 0 16px rgba(234, 101, 40, 0.9);
  }

  100% {
    box-shadow: 0 0 10px rgba(234, 101, 40, 0.55);
  }
}

/* The rail: one hairline under the row, clipped by the window's own edge
   fade so it dissolves with the outermost values. */
body.mode-v9:not(.mode-v10) .countdown-arm-window::after,
body.mode-v13 .countdown-arm-window::after,
body.mode-v14 .countdown-arm-window::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 1px;
  background: rgba(234, 101, 40, 0.4);
  pointer-events: none;
}

/* Every value carries its own index tick down toward the rail, and the tick
   recedes with its value - the row reads as one measured scale in motion. */
body.mode-v9:not(.mode-v10) .countdown-arm-item,
body.mode-v13 .countdown-arm-item,
body.mode-v14 .countdown-arm-item {
  position: relative;
}

body.mode-v9:not(.mode-v10) .countdown-arm-item::after,
body.mode-v13 .countdown-arm-item::after,
body.mode-v14 .countdown-arm-item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background: rgba(234, 101, 40, 0.5);
  transform: translateX(-50%);
}

/* Depth: whatever is not in focus sits a touch out of it. */
body.mode-v9:not(.mode-v10) .countdown-arm-item,
body.mode-v13 .countdown-arm-item,
body.mode-v14 .countdown-arm-item {
  filter: blur(0.5px);
  transition: filter 0.16s ease;
}

body.mode-v9:not(.mode-v10) .countdown-arm-item.reel-focus,
body.mode-v13 .countdown-arm-item.reel-focus,
body.mode-v14 .countdown-arm-item.reel-focus {
  filter: blur(0);
}

/* Landing: the chosen value blooms once and the rest sink out of the way. */
body.mode-v9:not(.mode-v10) .countdown-arm.locking .countdown-arm-item:not(.reel-selected),
body.mode-v13 .countdown-arm.locking .countdown-arm-item:not(.reel-selected),
body.mode-v14 .countdown-arm.locking .countdown-arm-item:not(.reel-selected),
body.mode-v9:not(.mode-v10) .countdown-arm.landed .countdown-arm-item:not(.reel-selected),
body.mode-v13 .countdown-arm.landed .countdown-arm-item:not(.reel-selected),
body.mode-v14 .countdown-arm.landed .countdown-arm-item:not(.reel-selected) {
  opacity: 0.1 !important;
}

body.mode-v9:not(.mode-v10) .countdown-arm.landed .countdown-arm-item.reel-selected,
body.mode-v13 .countdown-arm.landed .countdown-arm-item.reel-selected,
body.mode-v14 .countdown-arm.landed .countdown-arm-item.reel-selected {
  animation: v9DialValueBloom 0.5s ease-out both;
}

@keyframes v9DialValueBloom {
  0% {
    text-shadow: 0 0 26px rgba(234, 101, 40, 0.85), 0 1px 2px rgba(8, 18, 28, 0.2);
  }

  100% {
    text-shadow: 0 0 0 rgba(234, 101, 40, 0), 0 1px 2px rgba(8, 18, 28, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-v9:not(.mode-v10) .countdown-arm.landed::before,
body.mode-v13 .countdown-arm.landed::before,
body.mode-v14 .countdown-arm.landed::before,
  body.mode-v9:not(.mode-v10) .countdown-arm.landed::after,
body.mode-v13 .countdown-arm.landed::after,
body.mode-v14 .countdown-arm.landed::after,
  body.mode-v9:not(.mode-v10) .countdown-arm.landed .countdown-arm-item.reel-selected,
body.mode-v13 .countdown-arm.landed .countdown-arm-item.reel-selected,
body.mode-v14 .countdown-arm.landed .countdown-arm-item.reel-selected {
    animation: none;
  }
}


/* ── V13: V12's game with V9's dial back on the stage ──
   The reel is V9's tuner dial verbatim (twinned onto the selectors above); the
   rest is V12 - white multiplier, crash turn, stake-only stage figures. What
   differs is quieter wins and louder marks. */

/* The dial's chrome lets go with the hand-off, like V12's marks do. */
body.mode-v13 .countdown-arm.transferring::before,
body.mode-v14 .countdown-arm.transferring::before,
body.mode-v13 .countdown-arm.transferring::after,
body.mode-v14 .countdown-arm.transferring::after {
  opacity: 0;
  transition: opacity 0.16s ease;
}

/* The flyer carries no chrome: V10's pane and outline belong to its box. */
body.mode-v13 .v7-bonus-transfer,
body.mode-v14 .v7-bonus-transfer {
  background: none;
  box-shadow: none;
  outline: none;
}

/* The footage marks step forward: a size up, and a real plate under each so
   they hold on any sky. */
body.mode-v13 .v4-footage-overlay,
body.mode-v14 .v4-footage-overlay {
  /* Fixed, not fluid: the instrument labels hold their size on any screen. */
  font-size: 11px;
  /* The plate carries the mark now, so the letterforms can relax off 700, and
     the tracking opens up to read as instrument labelling. */
  font-weight: 500;
  letter-spacing: 0.08em;
}

body.mode-v13 .v4-footage-overlay .v4-footage-mark,
body.mode-v14 .v4-footage-overlay .v4-footage-mark {
  /* A flex row, so a badge taller than the type sits on the text's centre line
     and the plate keeps even padding on both sides instead of being pushed out
     of shape by an inline child. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  /* Dark glass, but half the weight of the first cut - enough plate to seat
     white text, not enough to punch holes in the sky. */
  border: 1px solid rgba(226, 233, 225, 0.38);
  border-radius: 0;
  background: rgba(22, 32, 38, 0.38);
  backdrop-filter: blur(4px) saturate(108%);
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  opacity: 1;
  color: #ffffff;
  text-shadow: 0 0 3px rgba(28, 35, 38, 0.4);
}

/* The bonus readout stays in the reel's orange - the value never recolours on
   its way up - and sits in a white bloom rather than a warm one. Orange glowing
   orange only muddied the edge against blue; white separates the glyphs from
   any sky and reads as backlight, tight at the edge and wide beyond it. */
body.mode-v13 .hypersonic-boost-mult,
body.mode-v14 .hypersonic-boost-mult {
  color: #ea6528;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(255, 255, 255, 0.8),
    0 0 38px rgba(255, 255, 255, 0.55),
    0 0 72px rgba(255, 246, 240, 0.35);
}

/* The corner brackets draw with currentColor, so the dark ink above would
   darken them too. They keep the overlay's original light tone. */
/* The centred last-win tag belongs to V9; V10 up retire it. This rule restates
   that, because giving the marks a display above ties with V10's `display: none`
   on specificity and would otherwise win on source order. */
body.mode-v13 .v4-footage-overlay .v4-footage-mark.mark-bottom-center,
body.mode-v14 .v4-footage-overlay .v4-footage-mark.mark-bottom-center {
  display: none;
}

body.mode-v13 .v4-footage-overlay .v4-footage-mark::before,
body.mode-v14 .v4-footage-overlay .v4-footage-mark::before {
  color: #e2e9e1;
}

/* No coin rain: the figure itself is the event. It arrives bigger, with a
   harder pop, and keeps the green glow. */
body.mode-v13 .win-celebration-coins,
body.mode-v14 .win-celebration-coins {
  display: none;
}

body.mode-v13 .win-celebration-value,
body.mode-v14 .win-celebration-value {
  font-size: clamp(58px, 11vw, 84px);
}

body.mode-v13 .win-celebration.show .win-celebration-value,
body.mode-v14 .win-celebration.show .win-celebration-value {
  animation: v13WinValuePop 0.6s cubic-bezier(0.22, 1.36, 0.36, 1) both,
    winValueGlow 1.7s ease-in-out 0.6s infinite;
}

@keyframes v13WinValuePop {
  0% {
    transform: scale(0.44);
    opacity: 0;
  }

  62% {
    transform: scale(1.09);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-v13 .win-celebration.show .win-celebration-value,
body.mode-v14 .win-celebration.show .win-celebration-value {
    animation: none;
  }
}

/* The bonus mark: the same glyph names a bonus round on the stage tag and
   beside a player's name in the live list, in the bonus orange either way. */
.bonus-mark {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.12em;
  color: #ea6528;
}

/* The B is a hole in the disc, so on the stage tag it would show the dark plate
   through it. A white disc behind the badge fills the letter instead - inset a
   hair so no white rim escapes past the orange edge. */
.v4-footage-mark .bonus-mark {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle closest-side, #ffffff 96%, transparent 97%);
}

/* The mark leads the multiplier cell, ahead of the value and of the dash a
   still-riding bet shows. */
.player-row .multi .bonus-mark {
  margin-right: 6px;
  width: 14px;
  height: 14px;
}

.player-row .user,
.player-row .user-main {
  display: inline-flex;
  align-items: center;
}

/* A row carrying a timestamp stacks it under the name - the plain .user rule
   above is more specific than .user-meta, so it needs saying here. */
.player-row .user.user-meta {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.player-row .multi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ── V15: the Spine-rigged B2 ──
   The rig draws into a canvas riding the same plane window as the sprite
   atlases, so it inherits the window's transforms, clipping and film grade.
   While it flies, the atlas image stands aside. */
.b2-spine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Invisible, not display:none: the canvas keeps its compositor layer and
   its size, so the rig can pre-render underneath V19's roll-in and the
   reveal is a free flip rather than a relayer hitch. */
.b2-spine-canvas.hidden {
  visibility: hidden;
}

.b2-sequence-atlas.spine-hidden {
  visibility: hidden;
}

/* ── Free bets ────────────────────────────────────────────────────────────
   A grant of free bets sits above the bet panel while it lasts: how many are
   left, until when, and the switch that spends them instead of the balance. */
.free-bet-strip {
  box-sizing: border-box;
  width: min(500px, 100%);
  max-width: 500px;
  margin: 0 auto 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #242424;
  border: 1px solid #424242;
  border-radius: var(--radius);
}

.free-bet-strip.hidden {
  display: none;
}

.free-bet-strip-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.free-bet-strip-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.free-bet-strip-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.free-bet-strip-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f3f3f3;
  line-height: 1;
}

.free-bet-strip-subtitle {
  font-size: 12px;
  color: #a0a0a0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.free-bet-use {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bonus-accent, #ea6528); /* the accent is scoped to the bet panel; the strip sits above it */
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.free-bet-use:not(:disabled):hover,
.free-bet-use:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--bonus-accent, #ea6528) 85%, #ffffff);
}

.free-bet-use.in-use {
  background: #353535;
  border-color: #5a5a5a;
  color: #f3f3f3;
}

.free-bet-use.in-use:not(:disabled):hover,
.free-bet-use.in-use:not(:disabled):focus-visible {
  background: #404040;
  border-color: #7a7a7a;
}

.free-bet-use:disabled {
  cursor: default;
  opacity: 0.55;
}

/* While free bets are on, the stake is fixed: the amount box reads as locked. */
body.free-bet-on .control-panel .amount-box {
  color: #a0a0a0;
  cursor: default;
}

/* The popup: the grant, announced once the game is in. Sized like the other
   modals: one rhythm from the title down to the button. */
.modal.modal-free-bet {
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
}

.free-bet-head {
  position: relative;
  justify-content: center;
  padding: 14px 48px;
}

.free-bet-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.free-bet-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* one gap between every line, nothing else */
  text-align: center;
  padding: 28px 24px 28px;
}

.free-bet-body p {
  margin: 0;
}

/* The free-bet star, celebrating: it pops in, two rings and a ring of
   confetti burst off it once, then it floats while three sparkles twinkle.
   Everything is keyed on the popup being open, so it replays each time. */
.free-bet-celebration {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}

.free-bet-star-float,
.free-bet-star {
  display: inline-flex;
}

.free-bet-star {
  width: 56px;
  height: 56px;
  transform: scale(0);
}

.free-bet-star svg {
  display: block;
  width: 100%;
  height: 100%;
}

.free-bet-ring {
  position: absolute;
  inset: 8px;
  border: 2px solid #ffc400; /* the bet button's yellow */
  border-radius: 50%;
  opacity: 0;
}

.free-bet-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.free-bet-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
}

.free-bet-burst i.bar {
  left: -2px;
  top: -5px;
  width: 4px;
  height: 10px;
  border-radius: 2px;
}

.free-bet-twinkle {
  position: absolute;
  left: calc(50% + var(--x) - var(--s) / 2);
  top: calc(50% + var(--y) - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  background: #ffc400;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
}

.modal-backdrop.is-open .free-bet-star {
  animation: free-bet-pop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}

.modal-backdrop.is-open .free-bet-star-float {
  animation: free-bet-float 3s ease-in-out 0.9s infinite;
}

.modal-backdrop.is-open .free-bet-ring {
  animation: free-bet-ring 0.9s ease-out 0.34s both;
}

.modal-backdrop.is-open .free-bet-ring-late {
  animation-delay: 0.52s;
}

.modal-backdrop.is-open .free-bet-burst i {
  animation: free-bet-burst 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(0.34s + var(--t)) both;
}

.modal-backdrop.is-open .free-bet-twinkle {
  animation: free-bet-twinkle 2.1s ease-in-out calc(1.1s + var(--t)) infinite;
}

@keyframes free-bet-pop {
  from { transform: scale(0) rotate(-40deg); }
  to { transform: scale(1) rotate(0deg); }
}

@keyframes free-bet-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes free-bet-ring {
  0% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes free-bet-burst {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-16px) scale(0.3); }
  12%, 60% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); }
}

@keyframes free-bet-twinkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(-20deg); }
  50% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.is-open .free-bet-star,
  .modal-backdrop.is-open .free-bet-star-float,
  .modal-backdrop.is-open .free-bet-ring,
  .modal-backdrop.is-open .free-bet-burst i,
  .modal-backdrop.is-open .free-bet-twinkle {
    animation: none;
  }

  .free-bet-star {
    transform: none;
  }
}

.free-bet-amount {
  font-size: 28px;
  font-weight: 700;
  color: #f3f3f3;
  line-height: 1.2;
}

.free-bet-note,
.free-bet-valid {
  font-size: 14px;
  font-weight: 500;
  color: #bdbdbd;
  line-height: 1.3;
}

.free-bet-valid {
  color: #a0a0a0;
}

.free-bet-cta {
  margin-top: 8px; /* the button sits a touch further from the text */
}

.free-bet-cta {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #f3f3f3;
  padding: 12px 24px;
  border: 1px solid #5a5a5a;
  border-radius: 10px;
  background: #2b2b2b;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.free-bet-cta:hover,
.free-bet-cta:focus-visible {
  background: #333333;
  border-color: #7a7a7a;
}

@media (max-width: 560px) {
  .free-bet-body {
    padding: 22px 16px 24px;
  }

  .free-bet-amount {
    font-size: 24px;
  }
}