@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 plaque is the progress bar: a dim copy underneath and the full
   colour copy above it, revealed left to right by width. Both layers are the
   same SVG the header wears. */
.boot-brand {
  position: relative;
  width: 100%;
  aspect-ratio: 470 / 160;
}

.boot-brand-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.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 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -2.5px;
  line-height: 1;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
  /* Height carries over from the plaque this replaces - the letters sit at much
     the same share of it, so holding the height holds the lettering and leaves
     the bar where it was tuned. The width follows the artwork at 2.94:1. */
  width: 101.61px;
  height: 34.59px;
}

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

.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-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-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

/* Live player count pinned to the top-left of the game stage. */
.ingame-players {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid #2a2f32;
  background: rgba(15, 17, 18, 0.55);
  border-radius: 10px;
  color: #f3f3f3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.ingame-players-icon {
  color: var(--muted);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.ingame-players-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

#livePlayerCount {
  min-width: 2ch;
}

/* Player count now lives in the game stage (.ingame-players); 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);
  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);
}

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

/* The old #7a2232 sat a shade off the rust the multiplier already wears, so a
   crash barely registered. This red is clearly its own colour, and the cream
   lift underneath keeps it legible against the pale sky. */
body.asset-pack-train .multiplier.crashed {
  color: #e02f24;
  text-shadow:
    0 3px 0 rgba(255, 240, 205, 0.7),
    0 10px 22px rgba(120, 26, 18, 0.28);
}

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

/* The x needs a cell as wide as its glyph. At 0.42em the ink overhung the cell
   and, being the last character, pushed the number's visual centre to the
   right of the box the flexbox had centred. A digit-width cell holds it. */
body.asset-pack-train .multiplier .multiplier-char-x,
body.asset-pack-train .hypersonic-game-mult .multiplier-char-x {
  width: 0.58em;
  text-align: center;
}


.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.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;
  font-size: var(--bonus-mult-game-font-size);
  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.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;
}

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

.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: #383838;
  color: #ff5c5c;
}

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

.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 #4b4b4b;
  border-radius: 12px;
  background: #383838;
  color: #ff5c5c;
  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: #ffb1b1;
  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);
}

.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 mark keeps its own 5.86:1 aspect; 18px tall sits inside the footer's
   27px line without growing it, and puts the wordmark's letters at about the
   10px of the text beside them. */
.credit img.credit-logo {
  width: auto;
  height: 18px;
}

.credit-link {
  display: inline-flex;
  align-items: center;
}

/* The lift the neighbouring provably-fair row gets on hover, in the only form
   a flat-filled image takes: #a4a4a4 brightened lands on its #d0d0d0. */
.credit-link:hover .credit-logo,
.credit-link:focus-visible .credit-logo {
  filter: brightness(1.27);
}

.credit-link:focus-visible {
  outline: none;
}

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

  .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 — "Crash Game: 812530" + copy + 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;
    font-size: 28px;
    letter-spacing: -2.52px;
  }

  .brand-logo {
    width: 84.16px;
    height: 28.65px;
  }

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

.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: #444444;
}

.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: #454545;
  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: url('./assets/clouds.png');
  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: url('./assets/clouds.png');
  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: url('./assets/clouds.png');
  background-size: 550px auto;
  background-position: 0 1.5%;
  opacity: 0.96;
}

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

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

.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-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(224px, calc(100% - 24px));
  padding: 8px 9px;
  border: 1px solid rgba(226, 233, 225, 0.34);
  background: rgba(20, 28, 30, 0.16);
  color: rgba(232, 240, 231, 0.74);
  font-family: "Nunito", system-ui, sans-serif;
  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-primary,
.round-cashout-hud.round-cashout-reveal .round-cashout-winners,
.round-cashout-hud.round-cashout-reveal .round-cashout-left {
  animation: round-cashout-line-reveal 0.34s steps(4, end) both;
}

.round-cashout-hud.round-cashout-reveal .round-cashout-primary {
  animation-delay: 0.17s;
}

.round-cashout-hud.round-cashout-reveal .round-cashout-winners {
  animation-delay: 0.28s;
}

.round-cashout-hud.round-cashout-reveal .round-cashout-left {
  animation-delay: 0.39s;
}

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

.round-cashout-primary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.round-cashout-win {
  color: #00f27e;
  font-size: 8px;
  font-weight: 700;
}

.round-cashout-used {
  color: rgba(232, 240, 231, 0.72);
  font-size: 7px;
  font-weight: 600;
}

.round-cashout-winners {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(226, 233, 225, 0.18);
}

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

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

.round-cashout-winner strong {
  color: rgba(232, 240, 231, 0.74);
  font-size: 7px;
  font-weight: 600;
}

.round-cashout-empty,
.round-cashout-left {
  color: rgba(232, 240, 231, 0.64);
  font-size: 7px;
  font-weight: 600;
}

.round-cashout-left {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(226, 233, 225, 0.18);
}

@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-primary,
  .round-cashout-hud.round-cashout-reveal .round-cashout-winners,
  .round-cashout-hud.round-cashout-reveal .round-cashout-left {
    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/rails.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;
}

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

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: 6;
  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(219px * var(--jet-scale));
  z-index: 6;
  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(3066px * var(--jet-scale));
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.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: 16;
  pointer-events: none;
  mix-blend-mode: screen;
}

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

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-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);
  /* Apex's size for a coinless celebration: with the shower gone the figure
     carries the moment on its own, so it is set larger than the version that
     had coins around it. 84px at a desktop stage, 58px at the narrow end. */
  font-size: clamp(58px, 11vw, 84px);
  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 warm 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);
}

/* The take is stated, not celebrated: the coins are off, leaving the label and
   the figure on their own. Their markup and animations stay behind this, so
   bringing them back is a matter of dropping the display line. */
.win-celebration-coins {
  display: none;
  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: gravity arc (translate) + end-over-end tumble (rotate). */
.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.6s cubic-bezier(0.22, 1.36, 0.36, 1) both, winValueGlow 1.7s ease-in-out 0.6s 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; }

/* The extra coins past 18 exist only for the V9 rain - hidden everywhere else,
   where the burst throws a fixed 18 outward. */
.win-celebration-coins i:nth-child(n+19) {
  display: none;
}

@keyframes winValuePop {
  0% { transform: scale(0.44); opacity: 0; }
  62% { transform: scale(1.09); 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 {
  display: inline-flex;
  align-items: center;
  color: #c9c9c9;
  letter-spacing: 0.3px;
}

/* The railcar silhouette stands in for the car's name; it takes the row's
   state colour (neutral while rolling, green once that car has banked). */
.cashout-row-car .railcar-icon {
  flex: 0 0 auto;
  width: 22px;
  height: auto;
  fill: currentColor;
}

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

/* Armed, the card warms to the bonus accent: the ground picks up an ember tint,
   the border takes the accent directly, and a faint glow sits around it - so the
   bought bonus reads from the panel itself, not only from the switch. */
.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);
}

/* Travelling by transform rather than left keeps the slide animatable, and the
   overshoot in the curve gives it the small settle at the end. */
.bet-panel-right .bonus-switch-panel.active .bonus-switch-knob {
  left: 3px;
  transform: translateX(var(--bonus-knob-travel));
}

@media (prefers-reduced-motion: reduce) {
  .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;
  }
}

.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 {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
}

.auto-play-target-bomb .railcar-icon {
  flex: 0 0 auto;
  width: 20px;
  height: auto;
  fill: currentColor;
}

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

/* 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;
}

/* CONFIRM BET carries the round's total cost on the same second line */
.bet-panel-right .bet-btn.state-bet .btn-line-one {
  font-size: 12px;
  font-weight: 700;
}

.bet-panel-right .bet-btn.state-bet .btn-line-two {
  display: block;
  /* Full strength so the total reads as dark as the CONFIRM BET label above it. */
  opacity: 1;
  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;
}

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

.bet-panel-right .bet-btn.state-cashout {
  background: #ffc400;
  color: #151515;
}

.bet-panel-right .bet-btn.state-cancel {
  background: #383838;
  color: #ff5c5c;
}

.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 {
  background: #873f1e;
  color: #ffd7c5;
}

/* An accepted bet sits disabled on the dimmed slab, but its text stays green so
   the player can see the stake went through. */
.bet-panel-right .bet-btn.state-accepted {
  background: #4b4b4b;
  color: var(--accent);
}

.bet-panel-right .bet-btn.state-accepted.hypersonic-mode {
  background: #873f1e;
  color: var(--accent);
}

.bet-panel-right .bet-btn.state-accepted .btn-line-one {
  font-size: 12px;
  font-weight: 700;
}

.bet-panel-right .bet-btn.state-accepted .btn-line-two {
  display: block;
  opacity: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  line-height: 1.15;
}

.bet-panel-right .bet-btn.state-cancel .btn-line-two {
  display: block;
  color: #ffb1b1;
  font-size: 9px;
  opacity: 0.9;
}

.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 {
    /* the narrower track shortens the knob's run to match */
    --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)));
  }
}


/* 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;
}

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

/* Placed by slot, not by the figure printed on the button - those change with
   the version and the columns must not. */
body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-nominal-slot="1"] {
  grid-column: 1;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-nominal-slot="2"] {
  grid-column: 2;
}

body.mode-v8.v8-amount-editing .control-panel .v8-amount-nominal[data-nominal-slot="3"] {
  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,
body.mode-v8 .cashout-list.show .cashout-row.is-pending .cashout-row-car {
  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,
body.mode-v8 .cashout-list.show .cashout-row.is-cashed .cashout-row-car {
  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-car,
  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 .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 sits a shade deeper than the cash-out button above it. */
body.mode-v9 .secondary-cashout-btn {
  border-color: transparent;
  background: #009f4d;
  color: #ffffff;
}

body.mode-v9 .secondary-cashout-btn .secondary-cashout-label,
body.mode-v9 .secondary-cashout-btn .secondary-cashout-value {
  color: #ffffff;
}

/* 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: #00b357;
}

body.mode-v9 .secondary-cashout-btn:not(:disabled):active {
  background: #00c763;
}

/* 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-car,
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,
body.mode-v9 .cashout-list.show .cashout-row.is-pending .cashout-row-car {
  color: #9c9c9c;
}

body.mode-v9 .cashout-list.show .cashout-row.is-cashed .cashout-row-bomb,
body.mode-v9 .cashout-list.show .cashout-row.is-cashed .cashout-row-car {
  color: #00f27e;
}

/* V9 pours the coins down the stage instead of bursting them outward: they enter
   above the panel and fall past it in two side lanes 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. */
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; }

/* 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;
}

/* ── Bet panel action column: 60 / 40 ──────────────────────────────────────
   The primary button (BET / CASH OUT) takes 60% of the column height; the slot
   above it (BUY BONUS, or CASH OUT ALL while a bet is live) takes the other 40%.
   Appended last so it also overrides the fixed 80px heights in the breakpoints. */
.bet-panel-right {
  --bet-action-gap: 6px;
  gap: var(--bet-action-gap);
}

.bet-panel-right .hypersonic-mode-panel {
  flex: 4 1 0;
  height: auto;
  min-height: 0;
}

.bet-panel-right .bet-action-group {
  flex: 6 1 0;
  min-height: 0;
}

.bet-panel-right .action-stack {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.bet-panel-right .bet-btn {
  height: 100%;
  min-height: 0;
}

/* CASH OUT ALL is absolutely positioned over the bonus slot, so it has to match
   that same 40% band rather than the old fixed height. */
.bet-panel-right .secondary-cashout-btn {
  height: calc((100% - var(--bet-action-gap)) * 0.4);
  min-height: 0;
}

/* CASH OUT ALL wears the BUY BONUS card's neutral shell; only its label is green. */
body.mode-v9 .bet-panel-right .secondary-cashout-btn {
  border: 1px solid #4b4b4b;
  background: #2f2f2f;
  color: #f6f6f6;
}

body.mode-v9 .bet-panel-right .secondary-cashout-label {
  color: #00f27e;
}

body.mode-v9 .bet-panel-right .secondary-cashout-value {
  color: #f6f6f6;
}

body.mode-v9 .bet-panel-right .secondary-cashout-btn:not(:disabled):hover,
body.mode-v9 .bet-panel-right .secondary-cashout-btn:not(:disabled):focus-visible {
  border-color: #6a6a6a;
  background: #383838;
}

body.mode-v9 .bet-panel-right .secondary-cashout-btn:not(:disabled):active {
  background: #414141;
}

/* "BET" caption sitting above the amount in the left-hand stepper block. */
.bet-panel-left .adjustment {
  position: relative;
}

.bet-amount-caption {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  text-align: center;
  color: #8a8a8a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  pointer-events: none;
}

/* ── V2: Apex-parity bet button states ─────────────────────────────────────
   The countdown-locked bet reads BET ACCEPTED and goes inert, its figures
   green so the accepted charge still stands out. Cancel goes solid red. */
body.mode-v2 .bet-panel-right .bet-btn.state-accepted,
body.mode-v2 .bet-panel-right .bet-btn.state-accepted.hypersonic-mode {
  border: 1px solid #4b4b4b;
  background: #292929;
  color: #00f27e;
}

body.mode-v2 .bet-panel-right .bet-btn.state-accepted .btn-line-one,
body.mode-v2 .bet-panel-right .bet-btn.state-accepted .btn-line-two {
  color: #00f27e;
}

body.mode-v2 .bet-btn.state-cancel,
body.mode-v2 .bet-panel-right .bet-btn.state-cancel {
  background: #e04343;
  color: #ffffff;
}

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

body.mode-v2 .bet-panel-right .bet-btn.state-cancel .btn-line-two {
  color: rgba(255, 255, 255, 0.88);
}

/* Queued bets spell out the wait under CANCEL. */
.bet-panel-right .bet-btn.waiting-next-round .btn-line-two {
  font-size: 11px;
}

/* ── V2: bonus reel rides the bottom of the stage and its landed value flies
   up into the multiplier's box (Apex bonus-transfer pattern). ─────────────── */
body.mode-v2:not(.mode-v3) .vegas-slot {
  top: auto;
  bottom: 52px;
  animation: v2SlotEnter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes v2SlotEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* The travelling value replaces the reel's landed copy mid-flight. */
body.mode-v2 .vegas-slot.transferring .vegas-slot-item.reel-selected {
  opacity: 0 !important;
  transition: none !important;
}

.v2-bonus-transfer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  white-space: nowrap;
  color: var(--train-wes-rust);
  text-align: center;
  text-shadow:
    0 3px 0 rgba(244, 217, 166, 0.78),
    0 10px 24px rgba(84, 53, 39, 0.22);
  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-v2 .sky-stage.v2-bonus-transferring .multiplier {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  animation: none !important;
  transition: opacity 0.26s ease 0.26s, transform 0.26s ease 0.26s;
}

body.mode-v2 .hypersonic-mult.bonus-transfer-receiving .hypersonic-boost-mult {
  opacity: 0;
}

body.mode-v2 .hypersonic-mult.bonus-transfer-arrived .hypersonic-boost-mult {
  opacity: 1;
  animation: none;
}

/* ── Only the combined product shows in flight: the "1.07 × 25" working line is
   dropped in both V2 and V3. V2 then moves the product up into the plain
   multiplier's box; V3 leaves it on its own line at its own size, so dropping
   the working line above it changes nothing else about where it sits. ────── */
body.mode-v2 .hypersonic-game-mult {
  display: none;
}

body.mode-v2:not(.mode-v3) .hypersonic-boost-mult {
  top: 42px;
  font-size: 102px;
}

@media (max-width: 1024px) {
  body.mode-v2:not(.mode-v3) .hypersonic-boost-mult {
    top: 38px;
    font-size: 84px;
  }

  body.mode-v2:not(.mode-v3) .vegas-slot {
    bottom: 46px;
  }
}

@media (max-width: 560px) {
  body.mode-v2:not(.mode-v3) .hypersonic-boost-mult {
    top: 30px;
    font-size: 62px;
  }

  body.mode-v2:not(.mode-v3) .vegas-slot {
    bottom: 40px;
  }
}

/* ── V2 stage marks ────────────────────────────────────────────────────────
   Players chip rides the top-left corner, smaller and borderless; the
   bottom-left states the stake while a bet is placed; the bottom-centre
   carries the running WIN during the drop, settling into LAST/AUTO WIN. */
body.mode-v2 .ingame-players {
  top: 12px;
  bottom: auto;
  border: 0;
  gap: 5px;
  padding: 4px 9px 4px 6px;
  font-size: 10px;
  border-radius: 8px;
}

body.mode-v2 .ingame-players-icon svg {
  width: 12px;
  height: 12px;
}

.stage-bet-mark {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  display: none;
  padding: 5px 9px;
  background: rgba(15, 17, 18, 0.55);
  border-radius: 8px;
  color: #f3f3f3;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

body.mode-v2 .stage-bet-mark.is-visible {
  display: block;
}

/* V2 stage chips wear the game's own palette: pine for the crowd, rust for
   the stake, with cream figures and a lighter crowd icon. */
body.mode-v2 .ingame-players {
  background: rgba(47, 102, 86, 0.78);
  color: #fdf4dc;
}

body.mode-v2 .ingame-players-icon {
  color: rgba(253, 244, 220, 0.85);
}

body.mode-v2 .stage-bet-mark {
  background: rgba(143, 61, 54, 0.78);
  color: #fdf4dc;
}

/* ── Old-west placards ─────────────────────────────────────────────────────
   The three corner chips were plain rounded rectangles and read as browser
   furniture dropped on top of the scene. They now take the shape of a depot
   tin sign: a rectangle with its corners cut off on the diagonal, a dark
   painted rim, and a cream hairline rule set inside it.

   Each layer is a filled polygon on its own box rather than a border, because
   clip-path cuts a border away at the diagonals and would leave the corners
   hanging open. Stacking is by paint order: a negative z-index puts both
   pseudos above the rim they sit on but below the label, and ::after paints
   over ::before, so rim -> rule -> plate reads outside in. */
body.mode-v2 .ingame-players,
body.mode-v2 .stage-bet-mark,
body.mode-v2 .stage-last-win-mark {
  --placard-cut: 6px;
  --placard-cut-rule: 5.4px;
  --placard-cut-plate: 4.8px;
  --placard-plate: 143, 61, 54;
  border: 0;
  border-radius: 0;
  background: rgba(43, 27, 21, 0.9);
  clip-path: polygon(
    var(--placard-cut) 0,
    calc(100% - var(--placard-cut)) 0,
    100% var(--placard-cut),
    100% calc(100% - var(--placard-cut)),
    calc(100% - var(--placard-cut)) 100%,
    var(--placard-cut) 100%,
    0 calc(100% - var(--placard-cut)),
    0 var(--placard-cut)
  );
}

body.mode-v2 .ingame-players::before,
body.mode-v2 .stage-bet-mark::before,
body.mode-v2 .stage-last-win-mark::before,
body.mode-v2 .ingame-players::after,
body.mode-v2 .stage-bet-mark::after,
body.mode-v2 .stage-last-win-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* The hairline rule: a cream shape one pixel in from the rim. */
body.mode-v2 .ingame-players::before,
body.mode-v2 .stage-bet-mark::before,
body.mode-v2 .stage-last-win-mark::before {
  inset: 1px;
  background: rgba(244, 217, 166, 0.58);
  clip-path: polygon(
    var(--placard-cut-rule) 0,
    calc(100% - var(--placard-cut-rule)) 0,
    100% var(--placard-cut-rule),
    100% calc(100% - var(--placard-cut-rule)),
    calc(100% - var(--placard-cut-rule)) 100%,
    var(--placard-cut-rule) 100%,
    0 calc(100% - var(--placard-cut-rule)),
    0 var(--placard-cut-rule)
  );
}

/* The painted plate the label sits on. */
body.mode-v2 .ingame-players::after,
body.mode-v2 .stage-bet-mark::after,
body.mode-v2 .stage-last-win-mark::after {
  inset: 2px;
  /* Lit from above like a board hung in the sun, so the plate reads as paint
     on a surface rather than a flat translucent fill. */
  background:
    linear-gradient(
      rgba(255, 236, 200, 0.16),
      rgba(255, 236, 200, 0) 46%,
      rgba(46, 24, 16, 0.2)
    ),
    rgba(var(--placard-plate), 0.94);
  clip-path: polygon(
    var(--placard-cut-plate) 0,
    calc(100% - var(--placard-cut-plate)) 0,
    100% var(--placard-cut-plate),
    100% calc(100% - var(--placard-cut-plate)),
    calc(100% - var(--placard-cut-plate)) 100%,
    var(--placard-cut-plate) 100%,
    0 calc(100% - var(--placard-cut-plate)),
    0 var(--placard-cut-plate)
  );
}

/* The crowd board is painted pine; the money boards keep the rust. */
body.mode-v2 .ingame-players {
  --placard-plate: 47, 102, 86;
  padding: 5px 11px 5px 7px;
}

body.mode-v2 .stage-bet-mark,
body.mode-v2 .stage-last-win-mark {
  padding: 6px 11px;
}

/* V2: the main multiplier wears the bonus readout's rust, so plain and bonus
   rounds share one voice. */
body.mode-v2 .multiplier {
  color: var(--train-wes-rust);
  text-shadow:
    0 3px 0 rgba(244, 217, 166, 0.78),
    0 10px 24px rgba(84, 53, 39, 0.22);
}

/* Bottom-right LAST WIN chip: the BET chip's design on the opposite corner. */
.stage-last-win-mark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: none;
  padding: 5px 9px;
  background: rgba(143, 61, 54, 0.78);
  border-radius: 8px;
  color: #fdf4dc;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

body.mode-v2 .stage-last-win-mark.is-visible {
  display: block;
}

/* ── V3 ────────────────────────────────────────────────────────────────────
   V3 is V2 wearing three earlier treatments again: the multiplier's original
   ink, the original crash red, and the bonus reel where it used to sit. The
   body carries mode-v2 alongside mode-v3, so everything else about V2 stands
   and only these rules put the old behaviour back. They qualify on both
   classes so they outrank the plain mode-v2 rules wherever those appear,
   media queries included. */
/* The reel and the working line above the product come back on their own: the
   V2 rules that moved them are written to skip mode-v3, so the cascade
   underneath produces the original geometry exactly rather than this file
   restating it and drifting a pixel or two.

   The two colours are stated. The multiplier's ink cannot use the same trick,
   because :not() would lift that rule to the crashed rule's weight and a V2
   crash would come out rust; and the newer crash red sits on the asset pack
   rather than on mode-v2, so it would reach V3 unless answered here. */
/* The plain multiplier shares the bonus product's line and size, so a bonus
   round does not jump when the overlay hands back at the crash - the figure
   stays exactly where it has been climbing. Both read off the same tokens, so
   every breakpoint stays in step, and qualifying on both classes outranks the
   asset pack's own responsive tops. */
body.mode-v2.mode-v3 .multiplier {
  color: #24153e;
  text-shadow: none;
  top: var(--bonus-mult-value-top);
  font-size: var(--bonus-mult-value-font-size);
}

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

/* ── The cash-out button is a coach over an amount ─────────────────────────
   The label used to count the cars off as "CASH OUT T1", "T2" and so on, which
   asked the player to translate a code. The words are gone: the coach takes the
   label line on its own, drawn large, with the payout beneath it - the same
   drawing the inventory rows carry, so the button and the list it empties read
   as one thing. The button keeps an aria-label, since the action no longer says
   itself in text.

   It is masked rather than drawn as a background image, so it takes the
   button's own text colour and keeps up with it across the button's states
   instead of pinning one hex into the URL. */
.bet-btn.railcar-cashout .btn-line-one {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet-btn.railcar-cashout .btn-line-one::after {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 36 256 184' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' d='M45.444,184.52c8.459,0,15.317,7.285,15.317,16.271S53.9,217.062,45.444,217.062s-15.317-7.285-15.317-16.271S36.984,184.52,45.444,184.52Z'/%3E %3Ccircle cx='44.922' cy='200.797' r='7.703'/%3E %3Cpath fill-rule='evenodd' d='M84.139,184.52c8.459,0,15.317,7.285,15.317,16.271S92.6,217.062,84.139,217.062s-15.317-7.285-15.317-16.271S75.68,184.52,84.139,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M25.289,190.515h78.2v16.271h-78.2V190.515Z'/%3E %3Cpath fill-rule='evenodd' d='M170.4,184.52c8.459,0,15.317,7.285,15.317,16.271s-6.858,16.271-15.317,16.271-15.317-7.285-15.317-16.271S161.94,184.52,170.4,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M209.1,184.52c8.459,0,15.317,7.285,15.317,16.271s-6.858,16.271-15.317,16.271-15.317-7.285-15.317-16.271S200.635,184.52,209.1,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M150.245,190.515h78.2v16.271h-78.2V190.515Z'/%3E %3Cpath fill-rule='evenodd' opacity='0.92' d='M4.683,78.331L5.54,66.342s0.888-4.285,4.282-5.995a17.025,17.025,0,0,1,6.851-1.713l221.8-.856a15.13,15.13,0,0,1,8.564,3.425c3.58,3.226,4.282,5.995,4.282,5.995V78.331H4.683Z'/%3E %3Cpath fill-rule='evenodd' d='M12.391,181.951H246.178V194.8H12.391V181.951Z'/%3E %3Cpath fill-rule='evenodd' d='M53.5,53.5H74.905V45.789s-3.371-6.851-10.276-6.851S53.5,44.933,53.5,44.933V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M117.724,53.5h21.409V45.789s-3.371-6.851-10.277-6.851-11.132,5.995-11.132,5.995V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M181.951,53.5H203.36V45.789s-3.371-6.851-10.276-6.851-11.133,5.995-11.133,5.995V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M8.109,86.839a9.971,9.971,0,0,1,6.85,4.805c0.153,0.283,0,80.887,0,80.887H242.727V91.644s0.506-4.748,5.994-4.805a4.21,4.21,0,0,0,0-.8H8.109v0.8ZM30.374,100.6H62.916v39.393H30.374V100.6Zm166.992,0h32.541v39.393H197.366V100.6Zm-41.962,0h32.542v39.393H155.4V100.6Zm-41.962,0h32.542v39.393H113.442V100.6Zm-41.962,0h32.542v39.393H71.48V100.6Z'/%3E %3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 36 256 184' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' d='M45.444,184.52c8.459,0,15.317,7.285,15.317,16.271S53.9,217.062,45.444,217.062s-15.317-7.285-15.317-16.271S36.984,184.52,45.444,184.52Z'/%3E %3Ccircle cx='44.922' cy='200.797' r='7.703'/%3E %3Cpath fill-rule='evenodd' d='M84.139,184.52c8.459,0,15.317,7.285,15.317,16.271S92.6,217.062,84.139,217.062s-15.317-7.285-15.317-16.271S75.68,184.52,84.139,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M25.289,190.515h78.2v16.271h-78.2V190.515Z'/%3E %3Cpath fill-rule='evenodd' d='M170.4,184.52c8.459,0,15.317,7.285,15.317,16.271s-6.858,16.271-15.317,16.271-15.317-7.285-15.317-16.271S161.94,184.52,170.4,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M209.1,184.52c8.459,0,15.317,7.285,15.317,16.271s-6.858,16.271-15.317,16.271-15.317-7.285-15.317-16.271S200.635,184.52,209.1,184.52Z'/%3E %3Cpath fill-rule='evenodd' d='M150.245,190.515h78.2v16.271h-78.2V190.515Z'/%3E %3Cpath fill-rule='evenodd' opacity='0.92' d='M4.683,78.331L5.54,66.342s0.888-4.285,4.282-5.995a17.025,17.025,0,0,1,6.851-1.713l221.8-.856a15.13,15.13,0,0,1,8.564,3.425c3.58,3.226,4.282,5.995,4.282,5.995V78.331H4.683Z'/%3E %3Cpath fill-rule='evenodd' d='M12.391,181.951H246.178V194.8H12.391V181.951Z'/%3E %3Cpath fill-rule='evenodd' d='M53.5,53.5H74.905V45.789s-3.371-6.851-10.276-6.851S53.5,44.933,53.5,44.933V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M117.724,53.5h21.409V45.789s-3.371-6.851-10.277-6.851-11.132,5.995-11.132,5.995V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M181.951,53.5H203.36V45.789s-3.371-6.851-10.276-6.851-11.133,5.995-11.133,5.995V53.5Z'/%3E %3Cpath fill-rule='evenodd' d='M8.109,86.839a9.971,9.971,0,0,1,6.85,4.805c0.153,0.283,0,80.887,0,80.887H242.727V91.644s0.506-4.748,5.994-4.805a4.21,4.21,0,0,0,0-.8H8.109v0.8ZM30.374,100.6H62.916v39.393H30.374V100.6Zm166.992,0h32.541v39.393H197.366V100.6Zm-41.962,0h32.542v39.393H155.4V100.6Zm-41.962,0h32.542v39.393H113.442V100.6Zm-41.962,0h32.542v39.393H71.48V100.6Z'/%3E %3C/svg%3E") center / contain no-repeat;
}

/* ── The bonus mark ────────────────────────────────────────────────────────
   Wherever a bonus is riding, it is named by the same arrow in the same
   orange: beside the stake on the stage, and beside the name of every player
   in the live list who bought one. The glyph inherits its colour, so the one
   accent declaration here covers both. */
.bonus-boost-icon {
  flex: 0 0 auto;
  /* One size wherever the mark appears - the letter is cut out of a solid disc,
     and its counters need the room to stay open. */
  width: 14px;
  height: 14px;
  /* --bonus-accent is declared on the bet panel's own cards, not at the root,
     so the literal has to back it up out here on the stage and in the list. */
  color: var(--bonus-accent, #ea6528);
  fill: currentColor;
}

/* The stake placard becomes a row so the mark can sit beside the figure. Its
   own pseudo-elements are the rim and plate, which is why the mark is a child
   and the text gets a wrapper of its own. */
body.mode-v2 .stage-bet-mark.is-visible {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* On the placard the mark sits on the rust plate, where the accent orange has
   too little to push against. It goes white there instead - the plate is doing
   the colouring, so the mark only has to be legible on it. In the live list it
   keeps the accent, which reads cleanly on the dark rows. */
body.mode-v2 .stage-bet-mark .bonus-boost-icon {
  color: #ffffff;
  /* The mark stands 14px against a 10px line, and left alone it drove the plate
     four pixels taller than the win plate opposite. The overhang is pulled back
     into the line so the mark keeps its size and both plates keep one height. */
  margin-block: -2px;
}

/* The middle column carries the mark ahead of its value, so it lays out as a
   row and stays centred whether or not a mark is there. */
.player-row .multi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}