@import './tokens.css';

* {
  box-sizing: border-box;
}

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

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

/* Form controls don't inherit the page font by default */
button,
input,
select,
textarea {
  font-family: inherit;
}

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

/* apex's loader, with slopes' mark. No card box, no bar, no percent — the
   wordmark itself is the progress readout. */
.boot-loader-card {
  width: min(300px, calc(100vw - 64px));
}

/* The whole wordmark is the progress bar: a dim copy underneath and a bright
   copy above it, revealed left to right by width. Both layers are the same
   SVG. apex forces its mark white here; SKIWIN's carries its own blue, so no
   filter — the dim underlay comes from opacity alone. */
.boot-brand {
  position: relative;
  width: 100%;
  aspect-ratio: 122 / 19;
}

.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 {
  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 {
  position: relative;
  display: grid;
  grid-template-columns: 461px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.brand {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  color: #ffffff;
}

.brand-logo {
  display: block;
  /* Sized against the sibling games rather than to the old mark's box. This
     wordmark is 6.42:1 where the previous one was 4.88:1, so at a matched
     height it runs a third wider and carries noticeably more ink across the
     header. 18px puts it at ~116px wide — just inside train's 120px and
     below apex's 132px floor, both of which size their mark by width. */
  height: 18px;
  width: auto;
  color: inherit;
}

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

.utility-strip {
  justify-content: flex-end;
}

.history-strip {
  justify-self: 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;
}

/* apex and train share one .balance rule to the property; this matches it.
   The figure sits in the grey pair — #a0a0a0 for the label tone, #d0d0d0 for
   the amount — rather than full white, and the box is 27px like the chips
   beside it, which is what sets the header's height. */
.utility-balance {
  min-width: 0;
  height: 27px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a0a0a0;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  /* Kept over the siblings: the balance changes mid-round, and tabular
     figures stop the digits shuffling as it counts. */
  font-variant-numeric: tabular-nums;
}

.utility-balance strong {
  color: #d0d0d0;
}

.scene-theme-toggle {
  width: 58px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  place-items: stretch;
}

.scene-theme-icon {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 6px;
  color: #9da9bb;
  opacity: 0.62;
}

.scene-theme-icon svg {
  width: 15px;
  height: 15px;
}

body[data-ski-v2-scene="night"] .scene-theme-icon-moon,
body[data-ski-v2-scene="day"] .scene-theme-icon-sun {
  color: #f6f9ff;
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body[data-ski-v2-scene="day"] .scene-theme-icon-sun {
  color: #ffd26a;
  background: rgba(255, 194, 82, 0.18);
}

body[data-ski-mode="v1"] .scene-theme-toggle {
  display: none;
}

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

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

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

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

.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: 12px;
  color: #a0a0a0;
  line-height: 1;
}

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

.user {
  /* Same tone as the multiplier beside it — the row reads as one line rather
     than a bright handle with its figures trailing off. */
  color: var(--muted);
  text-transform: none;
}

.multi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  color: var(--muted);
}

/* Always present, always the same width, so the multipliers keep one line
   down the column whether or not a row carries the badge. */
.bonus-rider-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  width: 14px;
}

.multi-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.multi-addon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  opacity: 0.95;
}

.multi-addon-icon img {
  width: 11px;
  height: 11px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(56%) sepia(87%) saturate(2348%) hue-rotate(353deg) brightness(95%) contrast(94%);
}

.multi-addon-icon.pod-icon {
  margin-left: 3px;
}

.multi-addon-icon.pod-icon img {
  width: 16px;
  height: 16px;
}

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

/* apex keeps every handle neutral — the tone classes survive as markup
   hooks only, so no one name pulls focus from the messages. */
.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;
}

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

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

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

/* The figure is centred on the stage at every length: each character sits in
   its own fixed-width cell so the digits cannot jitter as they change, and
   the row of cells is centred as a whole rather than pinned by its left
   edge. Train centres its multiplier the same way. */
.multiplier {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  font-size: clamp(132px, 12vw, 182px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -2px;
  color: #272727;
  text-shadow: var(--mult-shadow-soft);
  animation: breathe 1.5s ease-in-out infinite;
}

body[data-ski-mode="v1"] .multiplier {
  bottom: auto;
  top: 8%;
  line-height: 1;
}

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

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .stage-banner {
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(96, 138, 170, 0.28);
  color: #244765;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .stage-banner.phase-ended {
  color: #b86b16;
  border-color: rgba(205, 134, 42, 0.36);
}

.insurance-win-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  min-height: 34px;
  padding: 7px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(0, 164, 91, 0.96), rgba(0, 216, 125, 0.98), rgba(0, 164, 91, 0.96));
  color: #ffffff;
  font-family: "Nunito", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: 0 -4px 18px rgba(0, 242, 126, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(118%) scaleY(0.92);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.insurance-win-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 42%, transparent 70%);
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
}

.insurance-win-banner.is-visible {
  animation: insuranceBannerMoveIn 0.58s cubic-bezier(0.18, 1.34, 0.32, 1) both;
}

.insurance-win-banner.is-visible::after {
  animation: insuranceBannerShine 1.35s ease-out 0.18s;
}

.insurance-win-banner.is-leaving {
  animation: insuranceBannerMoveOut 0.62s cubic-bezier(0.58, -0.04, 0.74, 0.42) both;
}

body[data-ski-v2-scene="day"] .insurance-win-banner {
  background:
    linear-gradient(90deg, rgba(0, 151, 86, 0.96), rgba(0, 202, 116, 0.98), rgba(0, 151, 86, 0.96));
  box-shadow: 0 -4px 18px rgba(0, 162, 93, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

@keyframes insuranceBannerMoveIn {
  0% {
    opacity: 0;
    transform: translateY(118%) scaleY(0.9);
  }
  58% {
    opacity: 1;
    transform: translateY(-11%) scaleY(1.05);
  }
  78% {
    opacity: 1;
    transform: translateY(4%) scaleY(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes insuranceBannerMoveOut {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  22% {
    opacity: 1;
    transform: translateY(-7%) scaleY(1.04);
  }
  100% {
    opacity: 0;
    transform: translateY(120%) scaleY(0.92);
  }
}

@keyframes insuranceBannerShine {
  0% { opacity: 0; transform: translateX(-110%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}
.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.align-top {
  justify-content: center;
  padding-top: 0;
}

.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(22px, 4vw, 28px);
  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: 38px;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.5s ease;
}

body[data-ski-mode="v1"] .countdown-overlay,
body[data-ski-mode="v1"] .countdown-overlay.align-top {
  justify-content: center;
  padding: 0;
}

body[data-ski-mode="v1"] .countdown-header,
body[data-ski-mode="v1"] .countdown-overlay.align-top .countdown-header {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

body[data-ski-mode="v1"] .countdown-title {
  display: none;
}

body[data-ski-mode="v1"] .countdown-ring,
body[data-ski-mode="v1"] .countdown-overlay.align-top .countdown-ring {
  width: auto;
  height: auto;
}

body[data-ski-mode="v1"] .countdown-ring svg,
body[data-ski-mode="v1"] .countdown-overlay.align-top .countdown-ring svg,
body[data-ski-mode="v1"] .vegas-slot {
  display: none;
}

body[data-ski-mode="v1"] #countdownNumber,
body[data-ski-mode="v1"] .countdown-overlay.align-top #countdownNumber {
  position: static;
  display: inline-block;
  font-size: clamp(64px, 11vw, 126px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 5px 22px rgba(28, 50, 78, 0.38);
}

.vegas-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.vegas-slot-frame {
  position: relative;
  width: 200px;
  height: 80px;
  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);
}

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

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

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

.vegas-slot-item {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -0.02em;
  color: #ffcc00;
  text-shadow: 0 0 16px rgba(255, 204, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hypersonic-mult {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.hypersonic-game-mult {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  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 {
  margin-top: -8px;
  font-size: clamp(90px, 14vw, 140px);
  font-weight: 800;
  letter-spacing: -0.03em;
  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(48px, 9vw, 100px);
  opacity: 0.9;
  color: #ffffff;
}

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

.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(48px, 10vw, 100px);
  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(24px, 5vw, 48px);
  font-weight: 700;
  text-shadow: var(--mult-shadow-soft);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .flew-away-title {
  color: #284b68;
  text-shadow: 0 3px 16px rgba(255, 255, 255, 0.52), 0 2px 5px rgba(64, 105, 138, 0.22);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .flew-away-mult {
  color: rgba(42, 76, 105, 0.76);
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.42);
}

.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(24px * var(--jet-scale));
  z-index: 15;
}

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

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

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

@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 {
  position: relative;
  width: min(500px, 100%);
  max-width: 500px;
  height: auto;
  max-height: 240px;
  margin: 0 auto;
  background: #232323;
  border: 1px solid #444444;
  padding: 12px 14px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "total total total"
    "profiles profiles profiles"
    "tools divider action";
  column-gap: 12px;
  align-items: stretch;
  overflow: hidden;
}

.control-panel::before {
  content: "";
  grid-area: divider;
  width: 2px;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  justify-self: center;
  background: #3b3b3b;
  border-radius: 999px;
}

.total-win {
  grid-area: total;
  min-width: 0;
  color: #d9d9d9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 8px;
}

.panel-balance {
  min-width: 0;
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
  margin-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.panel-balance strong {
  color: inherit;
  font-weight: 700;
}

/* The header instance of the balance, on apex and train's numbers. The class
   is shared with the pop animation the panel figure uses, so its white-and-700
   base is overridden here rather than changed at the root. */
.utility-strip .panel-balance {
  min-width: 0;
  height: 27px;
  padding: 0 2px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #a0a0a0;
  font-weight: 400;
}

.utility-strip .panel-balance strong {
  display: block;
  line-height: 1;
  color: #d0d0d0;
  font-weight: 700;
  transform: none;
}

.panel-balance.balance-pop {
  animation: panelBalancePop 0.42s cubic-bezier(0.2, 1.18, 0.32, 1) both;
}

.total-win.total-win-final {
  width: fit-content;
  max-width: 100%;
  animation: totalWinFinalReveal 0.74s cubic-bezier(0.2, 1.22, 0.32, 1) both;
  text-shadow: none;
}

.total-win.total-win-final.total-win-final-cashout {
  text-shadow: none;
}

.total-win-insurance {
  color: #53a1fc;
  font-size: calc(1em + 4px);
}

.total-win-amount {
  color: #ffbd30;
  font-size: calc(1em + 4px);
}

@keyframes totalWinFinalReveal {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
    filter: brightness(1.35);
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.07);
    filter: brightness(1.15);
  }

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

@keyframes panelBalancePop {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.96);
    filter: brightness(1.2);
  }

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

.stake-split-chip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  min-width: 34px;
  padding: 4px 8px 5px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(246, 246, 246, 0.98), rgba(204, 204, 204, 0.96));
  color: #202020;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 0 14px rgba(238, 238, 238, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  animation: stakeSplitFly 0.78s cubic-bezier(0.2, 0.86, 0.22, 1) var(--stake-delay, 0ms) both;
  will-change: transform, opacity;
}

@keyframes stakeSplitFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.72) rotate(-5deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(0, -8px, 0) scale(1) rotate(0deg);
  }
  72% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate3d(var(--stake-mid-dx), var(--stake-mid-dy), 0)
      scale(0.92)
      rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--stake-dx), var(--stake-dy), 0) scale(0.58) rotate(0deg);
  }
}

.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: absolute;
  user-select: none;
  -webkit-user-select: none;
  top: 0;
  width: calc(50% - 4px);
  background: #383838;
  border: 1px solid #4a4a4a;
  border-radius: 12px;
  height: 83px;
  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;
}

.power-card-wide {
  left: 0;
  right: 0;
  width: 100%;
}

#olympianCard.active-addon {
  background: linear-gradient(135deg, #3a2e10, #2a2210);
  border-color: rgba(255, 200, 70, 0.85);
  color: #ffd76a;
}

#olympianCard.active-addon .label,
#olympianCard.active-addon .buy {
  color: #ffd76a;
}

.olympian-medal {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: filter 0.18s ease, opacity 0.18s ease;
}

.power-card.disabled .olympian-medal {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.6;
}

/* apex's V9 CASH OUT ALL card: neutral panel, green label, white figure. */
.cash-out-all-btn {
  width: 100%;
  height: 36px;
  border: 1px solid #4b4b4b;
  border-radius: 12px;
  background: #2f2f2f;
  color: #ffffff;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cash-out-all-btn:not(:disabled):hover,
.cash-out-all-btn:not(:disabled):focus-visible {
  background: #3a3a3a;
  outline: none;
}

.cash-out-all-btn:not(:disabled):active {
  background: #454545;
}

.cash-out-all-btn .cash-out-all-label {
  color: #00f66f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
}

#podCard {
  left: 0;
}

#hypersonicCard {
  right: 0;
}

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

.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 {
  color: #6a6a6a; /* Neutral 400 */
}

#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: 95px;
  width: 156px;
  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;
}

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

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

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

.action-stack {
  grid-area: action;
  position: relative;
  display: grid;
  gap: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
}

.action-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 80px;
  gap: 12px;
  align-items: stretch;
  align-content: end;
  min-height: 100%;
}

.action-stack.insurance-only .action-main-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 80px 80px;
}

.action-stack.insurance-only #betBtn {
  grid-column: 1;
  grid-row: 2;
}

.action-stack.insurance-only .action-side-slot {
  grid-column: 1;
  grid-row: 1;
}

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

.action-side-slot {
  position: relative;
  min-width: 0;
  height: 80px;
}

.action-side-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed #565656;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.006);
  pointer-events: none;
}

.action-side-slot:has(> :not(.hidden))::before {
  display: none;
}

.finisher-card {
  position: relative;
  min-width: 0;
  height: 70px;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 8px 10px;
  background: transparent;
  color: #dbdbdb;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.finisher-card.active-addon {
  background: #313f4d;
  border-color: #4a4a4a;
  color: #ffffff;
  cursor: default;
  opacity: 1;
}

#olympianCard.finisher-card.active-addon {
  background: #191919;
  border-color: #525252;
  color: #ffffff;
}

.finisher-card.disabled {
  cursor: default;
  opacity: 0.58;
}

.finisher-card.cancel-addon {
  background: #383838;
  border-color: #4a4a4a;
  color: #ff5c5c;
  opacity: 1;
}

.finisher-card:hover,
.finisher-card:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  outline: none;
}

.finisher-card.disabled:hover,
.finisher-card.disabled:focus-visible,
.finisher-card.active-addon:hover,
.finisher-card.active-addon:focus-visible {
  background: transparent;
  border-color: transparent;
  transform: none;
}

#olympianCard.finisher-card.active-addon:hover,
#olympianCard.finisher-card.active-addon:focus-visible {
  background: #191919;
  border-color: #525252;
}

.finisher-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.finisher-label,
.finisher-buy {
  display: block;
  max-width: 100%;
  line-height: 1;
  white-space: nowrap;
}

.finisher-label {
  color: #53a1fc;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.finisher-buy {
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
}

.finisher-buy .btn-amount {
  font-size: inherit;
  font-weight: 700;
}

.finisher-card.cancel-addon .finisher-buy,
.finisher-buy:empty {
  display: none;
}

.finisher-card.cancel-addon .finisher-label {
  color: #ff5c5c;
}

.finisher-card.active-addon .finisher-buy {
  color: #dbdbdb;
}

.bonus-bet-switch-card.active-addon .finisher-buy {
  color: #ffffff;
}

.finisher-card.active-addon .finisher-label,
.finisher-card.active-addon .finisher-buy {
  animation: insuranceReadyTextCenter 0.42s cubic-bezier(0.2, 1.18, 0.32, 1) both;
}

.finisher-card.bonus-bet-switch-card.active-addon .finisher-label,
.finisher-card.bonus-bet-switch-card.active-addon .finisher-buy,
.finisher-card.bonus-bet-switch-card.state-swap-enter .finisher-label,
.finisher-card.bonus-bet-switch-card.state-swap-enter .finisher-buy {
  animation: none;
}

.finisher-switch-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.finisher-switch-input:disabled {
  cursor: default;
}

.finisher-switch-visual {
  --finisher-switch-travel: 22px;
  position: relative;
  z-index: 1;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  padding: 3px;
  background: #5d5d5d;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.finisher-switch-knob {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.finisher-switch-input:checked + .finisher-switch-visual,
.finisher-card.active-addon .finisher-switch-visual {
  background: #53a1fc;
  color: #ffffff;
}

.finisher-switch-input:checked + .finisher-switch-visual .finisher-switch-knob,
.finisher-card.active-addon .finisher-switch-knob {
  transform: translateX(var(--finisher-switch-travel));
}

.finisher-switch-input:focus-visible + .finisher-switch-visual {
  outline: 2px solid rgba(83, 161, 252, 0.72);
  outline-offset: 2px;
}

.finisher-switch-input,
.finisher-switch-visual {
  pointer-events: auto;
}

@keyframes insuranceReadyTextCenter {
  0% {
    opacity: 0.78;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes insuranceFlagTeleportOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.08) rotate(16deg);
  }
}

.action-side-slot .cash-out-all-btn {
  height: 80px;
  border-radius: 12px;
  padding: 8px 10px;
  flex-direction: column;
  gap: 4px;
  line-height: 1.15;
  text-align: center;
}

.action-side-slot .cash-out-all-btn .cash-out-all-amount {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.32px;
  pointer-events: none;
}

.bonus-live-amount-btn {
  width: 100%;
  height: 80px;
  border: 1px solid #4a4a4a;
  border-radius: 16px;
  padding: 8px 10px;
  background: #383838;
  color: #dbdbdb;
  font: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
  box-shadow: none;
  cursor: default;
}

.bonus-live-amount-btn .bonus-live-label {
  width: 100%;
  color: #dbdbdb;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.32px;
}

.bonus-live-amount-btn .bonus-live-amount {
  width: 100%;
  color: #53a1fc;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.32px;
}

.bet-btn {
  position: relative;
  width: 100%;
  min-height: 80px;
  height: 80px;
  border: 0;
  border-radius: 18px;
  background: var(--accent);
  color: #151515;
  font: inherit;
  margin-bottom: 0;
  padding: 14px 16px;
  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 {
  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;
  line-height: 1.1;
}

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

/* Train sizes the figure by the line it sits on rather than by a span
   inside it, so the amount follows its line's own type. */
.bet-btn .btn-amount {
  font-size: inherit;
  font-weight: inherit;
}

/* The three states that pair a caption with a figure share one scale:
   a small bold label over a 17px figure. */
.bet-btn.state-bet .btn-line-one,
.bet-btn.state-cashout .btn-line-one,
.bet-btn.state-placed .btn-line-one {
  font-size: 12px;
  font-weight: 700;
}

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

.bet-btn.state-win .btn-amount {
  font-size: inherit;
  font-weight: inherit;
}

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

.bonus-bet-switch-card.active-addon:not(.disabled) {
  cursor: pointer;
}

.bonus-bet-switch-card.active-addon.disabled {
  opacity: 1;
}

.bonus-bet-switch-card .finisher-switch-input,
.bonus-bet-switch-card .finisher-switch-visual {
  pointer-events: auto;
}

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

.bet-btn.state-bet.has-bonus-selected:not(:disabled) {
  background: #53a1fc;
  color: #151515;
}

.bet-btn.state-bet:disabled {
  background: #4b4b4b;
  color: #d1d1d1;
  -webkit-text-fill-color: #d1d1d1;
  box-shadow: none;
  cursor: default;
}

.bet-btn.state-bet:disabled .btn-line-one,
.bet-btn.state-bet:disabled .btn-line-two,
.bet-btn.state-bet:disabled .btn-amount {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

.bet-btn.state-bet .btn-line-two {
  opacity: 1;
}

.bet-btn.state-accepted {
  background: #c1c1c1;
  color: #151515;
  font-size: 15px;
  line-height: 1.14;
  align-items: flex-end;
  text-align: right;
  padding: 16px 22px;
}

.bet-btn.state-accepted.has-bonus-active {
  background: #383838;
  color: #dbdbdb;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px #4a4a4a;
}

.bet-btn.state-accepted.has-bonus-active .btn-line-two {
  color: #a8a8a8;
}

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

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

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

/* Countdown bets are locked in: the button reads as disabled, in the
   cash-out green, and states the charge it took (apex BET ACCEPTED). */
.bet-btn.state-placed,
.bet-btn.state-placed:disabled {
  border: 1px solid #4b4b4b;
  background: #292929;
  color: #00f66f;
  -webkit-text-fill-color: #00f66f;
  box-shadow: none;
  cursor: default;
}

.bet-btn.state-placed .btn-line-one,
.bet-btn.state-placed .btn-line-two,
.bet-btn.state-placed .btn-amount {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

/* The generic .bet-btn:hover paints the cash-out green over every state. */
.bet-btn.state-placed:hover,
.bet-btn.state-placed:focus-visible {
  background: #292929;
  transform: none;
}

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

.bet-btn.waiting-next-round .btn-line-two {
  font-size: 11px;
}

.bet-btn.state-accepted .btn-line-two,
.bet-btn.state-cashout .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: 48px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  opacity: 1;
}

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

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

.bet-btn.state-swap-enter,
.finisher-card.state-swap-enter {
  animation: buttonStateEnter 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.bet-btn.state-swap-enter .btn-line-one,
.bet-btn.state-swap-enter .btn-line-two,
.finisher-card.state-swap-enter .finisher-label,
.finisher-card.state-swap-enter .finisher-buy {
  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;
}

/* Quick non-blocking pulse for V2 cash-outs — confirms the tap landed
   without locking the button into a +amount win-flash state. */
.bet-btn.cashout-pulse {
  animation: v9CashoutPressPulse 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

/* apex's V9 press pulse: keyframes the greens too, so a tap never
   flashes the old amber family. */
@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);
  }
}

.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 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-tools-row {
  grid-area: tools;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 46px minmax(0, 1fr) 46px;
  grid-template-areas:
    "amount"
    "nominals"
    "autoplay";
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

.bet-tools-row.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.autoplay-open-btn {
  grid-area: autoplay;
  min-width: 0;
  height: 46px;
  border: 1px solid #525252;
  border-radius: 10px;
  background: var(--chip);
  color: #f3f3f3;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.autoplay-open-btn:hover,
.autoplay-open-btn:focus-visible {
  background: #272727;
  border-color: #6a6a6a;
  color: #ffffff;
  outline: none;
}

.autoplay-open-btn.active {
  border-color: rgba(0, 246, 111, 0.55);
  color: #00f66f;
}

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

.autoplay-open-btn:disabled:hover,
.autoplay-open-btn:disabled:focus-visible {
  background: var(--chip);
  border-color: #525252;
  color: #f3f3f3;
}

.bet-nominals {
  grid-area: nominals;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.bet-nominal-btn {
  min-width: 0;
  min-height: 0;
  border: 1px solid #525252;
  border-radius: 8px;
  background: var(--chip);
  color: #f3f3f3;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.bet-nominal-btn:not(:disabled):hover,
.bet-nominal-btn:not(:disabled):focus-visible {
  background: #272727;
  border-color: #6a6a6a;
  color: #ffffff;
  outline: none;
}

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

.bonus-bet-switch-card.finisher-card {
  width: 100%;
  height: 80px;
  min-height: 80px;
  padding: 8px 10px;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-content: center;
  border-radius: 16px;
  border: 1px solid #525252;
  background: var(--chip);
}

.bonus-bet-switch-card.finisher-card:not(.disabled):hover,
.bonus-bet-switch-card.finisher-card:not(.disabled):focus-visible {
  background: #272727;
  border-color: #6a6a6a;
  color: #ffffff;
  outline: none;
}

.bonus-bet-switch-card.finisher-card.disabled:hover,
.bonus-bet-switch-card.finisher-card.disabled:focus-visible {
  background: var(--chip);
  border-color: #525252;
  transform: none;
}

.bonus-bet-switch-card .finisher-copy {
  gap: 4px;
}

.bonus-bet-switch-card .finisher-label {
  color: #ffffff;
  font-size: 14px;
}

.bonus-bet-switch-card .finisher-buy,
.bonus-bet-switch-card.active-addon .finisher-buy {
  color: #53a1fc;
  font-size: 16px;
}

.bonus-bet-switch-card .finisher-switch-visual {
  --finisher-switch-travel: 14px;
  width: 38px;
  height: 24px;
  padding: 3px;
  border: 1px solid #747474;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.24);
  opacity: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  justify-self: end;
}

.bonus-bet-switch-card .finisher-switch-input:checked + .finisher-switch-visual,
.bonus-bet-switch-card.active-addon .finisher-switch-visual {
  border-color: #78b8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(83, 161, 252, 0.2);
}

.bonus-bet-switch-card .finisher-switch-knob {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.bonus-bet-switch-card.bet-locked .finisher-label,
.bonus-bet-switch-card.bet-locked .finisher-buy,
.bonus-bet-switch-card.bet-locked.active-addon .finisher-buy {
  color: #777777;
}

.bonus-bet-switch-card.bet-locked .finisher-switch-visual,
.bonus-bet-switch-card.bet-locked.active-addon .finisher-switch-visual {
  background: #444444;
  border-color: #525252;
  box-shadow: none;
}

.bonus-bet-switch-card.bet-locked .finisher-switch-knob,
.bonus-bet-switch-card.bet-locked.active-addon .finisher-switch-knob {
  background: #b8b8b8;
}

.bonus-bet-switch-card.bet-locked.active-addon .finisher-switch-visual {
  background: rgba(83, 161, 252, 0.62);
  border-color: rgba(120, 184, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0.48;
}

.bonus-bet-switch-card.bet-locked.active-addon .finisher-switch-knob {
  background: #f4f4f4;
}

.adjustment {
  grid-area: amount;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 6px;
  border: 1px solid #525252;
  border-radius: 10px;
  background: #191919;
}

.amount-box,
.adjust-btn {
  border: 1px solid #525252;
  background: var(--chip);
  color: #f3f3f3;
  font: inherit;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.amount-box {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.amount-input {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-radius: 0;
  outline: none;
  -moz-appearance: textfield;
}

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

.adjust-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #525252;
  border-radius: 8px;
  align-self: center;
  justify-self: center;
  background: var(--chip);
  color: #f3f3f3;
}

#decreaseBtn {
  grid-column: 1;
}

#increaseBtn {
  grid-column: 3;
}

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

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

.adjustment.locked {
  background: #191919;
  border-color: #525252;
  opacity: 0.45;
  cursor: default;
}

.adjustment.locked .amount-box,
.adjustment.locked .adjust-btn {
  opacity: 1;
  cursor: default;
}

.adjustment.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

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

.credit img.credit-logo {
  width: auto;
  /* The wordmark's letters fill a little over half its height, so 18px puts
     them at about the footer's own 10px type while the whole mark stays
     inside its 27px line. */
  height: 18px;
  display: block;
}

.credit-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

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

@media (max-height: 860px) {
  .scene {
    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(96px, 14vh, 150px);
    bottom: 32px;
  }

  body[data-ski-mode="v1"] .multiplier {
    bottom: auto;
    top: 7%;
  }

  .hypersonic-mult {
    bottom: 32px;
  }

  .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", 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: 15px;
  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: 14px;
  line-height: 1.2;
  flex: 0 0 auto;
}

.round-info-big-result {
  margin: 2px 0 6px;
  text-align: center;
  font-size: clamp(46px, 5.6vw, 64px);
  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: 15px;
  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: 15px;
  color: #c3c3c3;
  font-weight: 700;
}

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

.round-info-label {
  font-size: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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: 14px;
  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 {
    height: auto;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Sized by its rows, as apex and train's is. The 102px floor this carried
     was 24px more than the two rows need, and it showed as padding above and
     below the header on every phone. */
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand utility"
      "history history";
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
  }

  @media (max-width: 600px) {

  }

  .brand {
    grid-area: brand;
  }

  .brand-logo {
    height: 16px;
  }

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

  .history-strip {
    grid-area: history;
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
  }

  .mobile-history-right {
    min-width: 0;
    margin-left: 0;
    gap: 5px;
    justify-content: flex-start;
    overflow: hidden;
  }

  .mobile-history-right .history-chip {
    flex: 0 0 auto;
    padding-inline: 9px;
  }

  .mobile-history-right .history-chip.icon-chip {
    width: 29px;
    height: 27px;
    padding: 0;
  }

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

  .layout {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 12px 8px;
    overflow: visible;
  }

  .sidebar {
    order: 2;
    display: flex;
    width: 100%;
    min-height: calc(100dvh - 24px);
    margin: 10px 0 0;
    padding: 10px;
    gap: 10px;
    overflow: hidden;
  }

  .tabbar {
    display: grid;
  }

  .players {
    max-height: none;
  }

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

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

  .sidebar-footer {
    display: none;
  }

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

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

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

  .control-panel {
    width: min(500px, calc(100% - 4px));
    max-width: 500px;
    height: auto;
    max-height: 240px;
    margin: 0 auto;
    padding: 12px;
    column-gap: 12px;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  }

  .control-panel::before {
    width: 1px;
    min-height: 0;
    height: 100%;
  }

  .bet-tools-row,
  .action-stack {
    min-height: 0;
    height: 100%;
  }

  .bet-tools-row {
    gap: 10px;
  }

  .adjustment {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    height: 46px;
    padding: 6px;
    border-radius: 10px;
  }

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

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

  .amount-box,
  .amount-input {
    font-size: 20px;
  }

  .autoplay-open-btn {
    height: 46px;
    border-radius: 10px;
    font-size: 14px;
  }

  .action-main-row {
    gap: 12px;
  }

  .action-side-slot,
  .action-side-slot .cash-out-all-btn,
  .bonus-live-amount-btn {
    height: 80px;
  }

  .finisher-card {
    height: 70px;
  }

  .finisher-card {
    padding: 8px 10px;
  }

  .finisher-copy {
    gap: 7px;
  }

  .finisher-label {
    font-size: 16px;
  }

  .finisher-buy {
    font-size: 16px;
  }

  .bet-btn {
    min-height: 80px;
    height: 80px;
    border-radius: 18px;
    padding: 14px 16px;
  }

  .bet-btn .btn-line-one {
    font-size: 16px;
  }

  .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: 218px;
  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: 15px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

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

.menu-user {
  color: #d1d1d1;
  font-size: 16px;
  font-weight: 700;
  padding: 9px 10px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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: 15px;
  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,
.autoplay-open-btn,
.autoplay-step-btn,
.autoplay-round-btn,
.autoplay-bonus-card,
.autoplay-toggle,
.autoplay-toggle-knob,
.autoplay-start-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 {
  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,
.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);
  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.has-bonus-selected:not(:disabled):hover,
.bet-btn.state-bet.has-bonus-selected:not(:disabled):focus-visible {
  background: #67adff;
}

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

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

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

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

.finisher-card.cancel-addon:hover,
.finisher-card.cancel-addon:focus-visible {
  background: #444444;
  border-color: #4a4a4a;
}

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

.bet-btn.state-accepted.has-bonus-active:hover,
.bet-btn.state-accepted.has-bonus-active:focus-visible {
  background: #383838;
}

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

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

.adjust-btn:not(:disabled):hover,
.adjust-btn:not(:disabled):focus-visible {
  transform: translateY(-1px);
  background: #3a3a3a;
  border-color: #6a6a6a;
  color: #f3f3f3;
  outline: none;
}

.amount-box:hover,
.amount-box:focus-visible {
  background: transparent;
}

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

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

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

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

.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: 20px;
  font-weight: 400;
  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;
}

.modal.modal-autoplay {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  max-height: min(84vh, 900px);
  border-radius: 12px;
  background: #272727;
}

.autoplay-head {
  min-height: 0;
  padding: 14px 16px;
}

.autoplay-head h2 {
  font-size: 20px;
  letter-spacing: 0;
}

.autoplay-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.autoplay-close svg {
  width: 14px;
  height: 14px;
}

.autoplay-body {
  display: grid;
  gap: 10px;
  padding: 16px;
  overflow: auto;
}

.autoplay-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(142px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.autoplay-field,
.autoplay-section {
  display: grid;
  gap: 6px;
}

.autoplay-section-label {
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  text-align: center;
}

.autoplay-amount-control,
.autoplay-cashout-control {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 5px;
  min-height: 46px;
  padding: 4px;
  border: 1px solid #525252;
  border-radius: 10px;
  background: #191919;
}

.autoplay-step-btn {
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid #5a5a5a;
  border-radius: 7px;
  background: #383838;
  color: #f3f3f3;
  font: inherit;
  cursor: pointer;
}

.autoplay-step-btn:not(:disabled):hover,
.autoplay-step-btn:not(:disabled):focus-visible {
  background: #444444;
  border-color: #747474;
  outline: none;
}

.autoplay-step-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.autoplay-step-btn svg {
  width: 10px;
  height: 10px;
}

.autoplay-amount {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  outline: none;
}

.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card {
  align-self: end;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 5px 8px;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  border: 1px solid #525252;
  border-radius: 10px;
  background: var(--chip);
  color: #f3f3f3;
  opacity: 1;
  font: inherit;
}

.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card:not(:disabled):hover,
.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card:not(:disabled):focus-visible {
  background: #272727;
  border-color: #6a6a6a;
  color: #ffffff;
  outline: none;
}

.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card:disabled {
  opacity: 0.55;
  cursor: default;
}

.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card:disabled:hover,
.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card:disabled:focus-visible {
  background: var(--chip);
  border-color: #525252;
  transform: none;
}

.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.active-addon:not(:disabled) {
  cursor: pointer;
}

.modal-autoplay .autoplay-bonus-card .finisher-copy {
  gap: 4px;
}

.modal-autoplay .autoplay-bonus-card .finisher-label {
  color: #ffffff;
  font-size: 13px;
}

.modal-autoplay .autoplay-bonus-card .finisher-buy,
.modal-autoplay .autoplay-bonus-card.active-addon .finisher-buy {
  color: #53a1fc;
  font-size: 15px;
}

.modal-autoplay .autoplay-bonus-card .finisher-switch-visual {
  --finisher-switch-travel: 14px;
  width: 38px;
  height: 24px;
  padding: 3px;
  justify-self: end;
}

.modal-autoplay .autoplay-bonus-card .finisher-switch-knob {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.autoplay-round-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.autoplay-round-btn {
  min-height: 34px;
  border: 1px solid #525252;
  border-radius: 7px;
  background: #2f2f2f;
  color: #cfcfcf;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.autoplay-round-btn:not(:disabled):focus-visible {
  background: #383838;
  border-color: #747474;
  outline: none;
}

.autoplay-round-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.autoplay-round-btn.active {
  background: #00f66f;
  border-color: #00f66f;
  color: #151515;
}

.autoplay-cashout-list {
  display: grid;
  gap: 5px;
}

.autoplay-cashout-row {
  display: grid;
  grid-template-columns: 32px 72px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.autoplay-target-skier {
  display: block;
  width: 24px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  background-color: #bdbdbd;
  -webkit-mask: url("assets/icons/skier.svg") left center / contain no-repeat;
  mask: url("assets/icons/skier.svg") left center / contain no-repeat;
}

.autoplay-cashout-label {
  color: #c2c2c2;
  font-size: 11px;
  line-height: 1;
  text-align: right;
}

.autoplay-cashout-value {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffc400;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  outline: none;
}

.autoplay-cashout-value:disabled,
.autoplay-amount:disabled {
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.autoplay-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.autoplay-start-btn:not(:disabled):hover,
.autoplay-start-btn:not(:disabled):focus-visible {
  background: #2cff86;
  outline: none;
}

.autoplay-start-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.autoplay-start-btn.is-running {
  background: #ff5c5c;
  color: #ffffff;
}

.autoplay-round-summary {
  margin-top: -2px;
  color: #a7a7a7;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

@media (max-width: 720px) {
  .control-panel {
    padding: 14px;
    column-gap: 10px;
    border-radius: 18px;
  }

  .control-panel::before {
    min-height: 0;
    height: 100%;
  }

  .bet-tools-row,
  .action-stack {
    min-height: 0;
    height: 100%;
  }

  .bet-tools-row {
    grid-template-rows: 46px minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .bonus-bet-switch-card.finisher-card {
    height: 80px;
    min-height: 80px;
    padding: 8px 10px;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    align-content: center;
    border-radius: 16px;
  }

  .bonus-bet-switch-card .finisher-copy {
    gap: 5px;
    min-width: 0;
  }

  .bonus-bet-switch-card .finisher-label {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0;
  }

  .bonus-bet-switch-card .finisher-buy {
    color: #53a1fc;
    font-size: 16px;
    letter-spacing: 0;
  }

  .bonus-bet-switch-card .finisher-buy .btn-amount {
    font-size: inherit;
  }

  .bonus-bet-switch-card .finisher-switch-visual {
    --finisher-switch-travel: 14px;
    width: 38px;
    height: 24px;
    padding: 3px;
    justify-self: end;
  }

  .bonus-bet-switch-card .finisher-switch-knob {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

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

  .autoplay-open-btn {
    height: 46px;
    border-radius: 10px;
    font-size: 14px;
  }

  .adjustment {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 4px;
    height: 46px;
    padding: 6px;
    border-radius: 10px;
  }

  .adjust-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-self: center;
    justify-self: center;
  }

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

  .amount-box,
  .amount-input {
    font-size: 20px;
    min-width: 0;
  }

  .action-main-row {
    gap: 10px;
  }

  .action-side-slot,
  .action-side-slot .cash-out-all-btn,
  .bonus-live-amount-btn {
    height: 80px;
  }

  .bet-btn {
    min-height: 80px;
    height: 80px;
    border-radius: 18px;
    padding: 14px 10px;
  }

  .bet-btn .btn-line-one {
    font-size: 16px;
  }

  .modal.modal-autoplay {
    width: min(520px, calc(100vw - 20px));
    border-radius: 12px;
  }

  .autoplay-head {
    min-height: 0;
    padding: 14px 16px;
  }

  .autoplay-head h2 {
    font-size: 20px;
  }

  .autoplay-close {
    width: 28px;
    height: 28px;
  }

  .autoplay-body {
    gap: 10px;
    padding: 16px;
  }

  .autoplay-top-grid {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.64fr);
  }

  .autoplay-section-label {
    font-size: 13px;
  }

  .autoplay-round-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .autoplay-cashout-row {
    grid-template-columns: 28px 64px minmax(0, 1fr);
    gap: 6px;
  }

  .autoplay-target-skier {
    width: 22px;
    height: 15px;
  }

  .autoplay-cashout-label {
    font-size: 10px;
  }

  .autoplay-amount-control,
  .autoplay-cashout-control {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
    padding: 5px 7px;
  }

  .modal-autoplay .autoplay-bonus-card .finisher-label {
    font-size: 12px;
  }

  .modal-autoplay .autoplay-bonus-card .finisher-buy {
    font-size: 14px;
  }

  .modal-autoplay .autoplay-bonus-card .finisher-switch-visual {
    --finisher-switch-travel: 12px;
    width: 34px;
    height: 22px;
    padding: 3px;
  }

  .modal-autoplay .autoplay-bonus-card .finisher-switch-knob {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .autoplay-amount {
    font-size: 17px;
  }

  .autoplay-cashout-value {
    font-size: 16px;
  }

  .autoplay-start-btn {
    min-height: 40px;
    font-size: 16px;
  }
}

.info-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #c3c3c3;
  font-family: inherit;
  font-size: 15px;
  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: 15px;
  line-height: 1.35;
}

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

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

.provably-history-input {
  width: 100%;
  border: 1px solid var(--n-border);
  background: var(--n-surface);
  color: var(--n-text);
  font-family: inherit;
  font-size: 15px;
  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: 15px;
  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: 14px;
  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: 15px;
  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: 13px; }  /* seed */
.history-row > span:nth-child(4) { color: var(--n-icon); font-size: 13px; }  

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

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

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

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

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

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

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

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

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

}

@media (max-width: 379.98px) {
  .amount-box,
  .amount-input {
    font-size: 16px;
  }
}

@media (max-width: 340px) {
  .control-panel {
    padding: 10px;
    column-gap: 8px;
  }

  .control-panel::before {
    min-height: 0;
    height: 100%;
  }

  .bet-tools-row,
  .action-stack {
    min-height: 0;
    height: 100%;
  }

  .action-main-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .bet-tools-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46px minmax(0, 1fr) 46px;
    gap: 6px;
  }

  .autoplay-open-btn {
    height: 46px;
    border-radius: 10px;
    font-size: 14px;
  }

  .adjustment {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    height: 46px;
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
  }

  .adjust-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-self: center;
    justify-self: center;
  }

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

  .amount-box,
  .amount-input {
    font-size: 16px;
    min-width: 0;
  }

  .bonus-bet-switch-card.finisher-card {
    height: 80px;
    min-height: 80px;
    padding: 8px 8px;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
    border-radius: 16px;
  }

  .bonus-bet-switch-card .finisher-label {
    color: #ffffff;
    font-size: 14px;
  }

  .bonus-bet-switch-card .finisher-buy .btn-amount {
    font-size: inherit;
  }

  .bonus-bet-switch-card .finisher-buy {
    color: #53a1fc;
    font-size: 16px;
  }

  .bonus-bet-switch-card .finisher-switch-visual {
    --finisher-switch-travel: 12px;
    width: 34px;
    height: 22px;
    padding: 3px;
  }

  .bonus-bet-switch-card .finisher-switch-knob {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .action-side-slot,
  .action-side-slot .cash-out-all-btn,
  .bonus-live-amount-btn {
    height: 80px;
  }

  .bet-btn {
    min-height: 80px;
    height: 80px;
    border-radius: 18px;
  }

  .bet-btn .btn-line-one {
    font-size: 16px;
  }

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

  .bet-btn .btn-amount {
    font-size: 18px;
  }

  /* The oldest crash chip gives way on the narrowest phones. Selected as the
     last crash chip rather than by position, so it does not depend on where
     the history button sits in the row. */
  .mobile-history-right .history-chip[data-history-point]:last-child {
    display: none;
  }
}

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

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

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

.clouds-layer {
  z-index: 1;
  filter: blur(10px);
}

.stars-layer {
  z-index: 3;
  opacity: 0;
}

.trail-layer {
  z-index: 8;
  filter: blur(1.4px);
}

.runway-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 37%;
  z-index: 2;
  background: url('./assets/road.png') repeat-x center bottom / auto 100%;
  transform-origin: bottom center;
  transition: transform 0.22s ease;
}

.runway-layer::before {
  content: "";
  position: absolute;
  inset: 10% 5% 10%;
  border-radius: 8px;
  border: 1px solid rgba(167, 187, 205, 0.15);
}

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

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

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

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

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

.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 4-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: 13px;
  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: 15px;
  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: 15px;
  line-height: 1.35;
}

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

.provably-settings-section h3 {
  margin: 0;
  color: #d0d6d7;
  font-size: 15px;
  font-weight: 400;
}

.provably-settings-section p {
  margin: 0;
  color: #9ca5a6;
  font-size: 14px;
  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: 15px;
  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: 15px;
  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: 15px;
  line-height: 1.35;
}

.game-limit-card {
  border: 1px solid #4a4a4a;
  background: #4a4a4a;
  border-radius: 12px;
  padding: 14px 16px;
  color: #bcc4c5;
  font-size: 15px;
  line-height: 1.2;
}

.game-limit-card strong {
  color: #dfe5e6;
  font-weight: 400;
}

@media (max-width: 1024px) {
  .history-icon-row {
    grid-template-columns: 1fr auto;
  }

  .history-icon-round {
    display: none;
  }
}

#skyBg,
#cloudCanvas,
#starCanvas,
#contrailCanvas,
#runwayLayer,
#jetModel,
#podModel,
#parachuteModel {
  display: none !important;
}

#skyStage {
  background: transparent !important;
  border-color: transparent !important;
}

.ski-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}

.ski-sky-layer {
  display: none;
}

.ski-sun,
.ski-sun-core {
  display: none;
}

.ski-bg-image {
  position: absolute;
  /* Cover the full game rectangle with the panoramic backdrop, repeating
     horizontally for parallax. The image's own sky/peaks/forest replaces the
     old gradient sky layer, so we don't need a separate sky behind it. */
  inset: 0;
  background-image: url('assets/background.png');
  background-color: #b3d8ef;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 0;
  pointer-events: none;
}

.ski-slope-wrap {
  --slope-angle: 22deg;
  position: absolute;
  left: 50%;
  top: 54%;
  width: 260%;
  height: 260%;
  transform: translate(-50%, -50%) rotate(var(--slope-angle));
  transform-origin: center center;
  pointer-events: none;
}

.ski-slope-surface {
  position: absolute;
  left: 50%;
  top: calc(50% - 48px);
  width: 16000px;
  height: 4800px;
  margin-left: -8000px;
  overflow: visible;
}

.ski-slope-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 16000px;
  height: 4800px;
  will-change: transform;
  overflow: visible;
}

.ski-skiers {
  position: absolute;
  left: 50%;
  top: calc(50% - 48px);
  width: 16000px;
  height: 4800px;
  margin-left: -8000px;
  pointer-events: none;
}

.ski-skier {
  position: absolute;
  left: 0;
  top: 0;
  width: 59px;
  height: 59px;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 3px rgba(20, 40, 70, 0.4));
  transition: opacity 0.2s ease;
}

.ski-skier img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* The source PNGs are drawn with a built-in forward skiing lean. We
     undo most of it but leave a small forward bias so the figures look
     like they're carving rather than standing perfectly upright. The
     remaining tilt then comes from the slope-wrap rotation. Pivot near
     the ski contact point so the skis stay anchored on the snow. */
  transform: rotate(-28deg);
  transform-origin: 50% 92%;
}

.ski-trails {
  position: absolute;
  left: 50%;
  top: calc(50% - 48px);
  width: 16000px;
  height: 4800px;
  margin-left: -8000px;
  pointer-events: none;
}

.ski-trail-point {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  opacity: 0;
  will-change: transform, opacity;
}

.ski-particles {
  position: absolute;
  left: 50%;
  top: calc(50% - 48px);
  width: 16000px;
  height: 4800px;
  margin-left: -8000px;
  pointer-events: none;
}

.ski-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
  will-change: transform, opacity;
}

.ski-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(15, 22, 34, 0.78);
  border: 1px solid rgba(120, 160, 200, 0.35);
  border-radius: 10px;
  font-size: 12px;
  color: #e8eef5;
  min-width: 210px;
  font-family: 'Nunito', sans-serif;
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.ski-controls.collapsed {
  min-width: 0;
  padding: 2px;
  background: rgba(15, 22, 34, 0.6);
}

.ski-controls-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(120, 160, 200, 0.45);
  background: rgba(30, 42, 60, 0.85);
  color: #e8eef5;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
}

.ski-controls-toggle:hover { background: rgba(50, 70, 100, 0.9); }

.ski-controls-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 24px;
}

.ski-controls.collapsed .ski-controls-body { display: none; }
.ski-controls.collapsed .ski-controls-toggle { position: static; }

.ski-control-row {
  display: grid;
  grid-template-columns: 40px 1fr 44px;
  align-items: center;
  gap: 8px;
}

.ski-control-row.ski-control-switch-row {
  grid-template-columns: minmax(112px, 1fr) auto 34px;
}

body:not([data-ski-mode="v2"]) .ski-v2-only-control {
  display: none;
}

.ski-control-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #cfe0f1;
}

.ski-control-switch-row .ski-control-label {
  line-height: 1.12;
}

.ski-control-value {
  text-align: right;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.ski-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(120, 160, 200, 0.35);
  border-radius: 2px;
  outline: none;
  margin: 0;
}

.ski-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #6bb9ff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ski-controls input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #6bb9ff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ffffff;
}

.ski-switch {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

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

.ski-switch-slider {
  position: relative;
  width: 34px;
  height: 20px;
  border: 1px solid rgba(120, 160, 200, 0.46);
  border-radius: 999px;
  background: rgba(27, 39, 58, 0.92);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ski-switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8aa6c6;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.ski-switch-input:checked + .ski-switch-slider {
  background: rgba(19, 73, 95, 0.98);
  border-color: rgba(82, 198, 255, 0.86);
}

.ski-switch-input:checked + .ski-switch-slider::after {
  transform: translateX(14px);
  background: #52c6ff;
}

.ski-switch-input:focus-visible + .ski-switch-slider {
  outline: 1px solid #8dcaff;
  outline-offset: 2px;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) #skiScene {
  display: none !important;
}

body[data-ski-mode="v1"] #skiSceneV2 {
  display: none !important;
}

body[data-ski-mode="v3"] #skiSceneV2,
body:is([data-ski-mode="v1"], [data-ski-mode="v2"]) #skiSceneV3 {
  display: none !important;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .ski-v1-controls { display: none; }
body[data-ski-mode="v1"] .ski-v2-controls { display: none; }

.ski-controls-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(120, 160, 200, 0.18);
}

.ski-mode-row .ski-mode-toggle {
  display: inline-flex;
  background: rgba(40, 28, 22, 0.55);
  border: 1px solid rgba(180, 150, 120, 0.4);
  border-radius: 6px;
  overflow: hidden;
  padding: 1px;
  width: 100%;
}

.ski-mode-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: #cfe0f1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 5px;
  font-family: 'Nunito', sans-serif;
}

.ski-mode-btn.active {
  background: linear-gradient(180deg, #c98e57, #8a5a32);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.3);
}

/* When v2/v3 is active, repurpose the sky-stage backdrop and reposition the
   multiplier above the row stack. */
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .sky-stage {
  background: linear-gradient(180deg, #1a120c 0%, #2a1c12 60%, #1f1410 100%);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .sky-stage {
  background: linear-gradient(180deg, #79bcef 0%, #d8edf8 62%, #f2f8fc 100%);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .multiplier {
  bottom: auto;
  top: 16%;
  font-size: clamp(56px, 7vw, 108px);
  /* `!important` because script.js pins an inline color during flight
     phases that we want to override in the V2 colour scheme. */
  color: #fff8d6 !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 240, 170, 0.18);
  line-height: 1;
  animation: none;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .multiplier {
  color: #21445f !important;
  text-shadow: 0 3px 16px rgba(255, 255, 255, 0.45), 0 2px 5px rgba(64, 105, 138, 0.18);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .multiplier.crashed {
  color: #ff3f46 !important;
  text-shadow:
    0 4px 22px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(255, 58, 66, 0.34);
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .multiplier.crashed {
  color: #d82331 !important;
  text-shadow:
    0 3px 15px rgba(255, 255, 255, 0.50),
    0 0 18px rgba(216, 35, 49, 0.24);
}

@media (max-width: 980px) {
  body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .multiplier {
    top: 11%;
    font-size: clamp(48px, 9vh, 88px);
  }

}

body.animations-off .sky-stage,
body.animations-off:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .sky-stage,
body.animations-off:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .sky-stage {
  background: #151515;
  border-color: #343434;
}

body.animations-off .sky-stage *,
body.animations-off .sky-stage *::before,
body.animations-off .sky-stage *::after {
  animation: none !important;
  transition: none !important;
}

body.animations-off .sky-bg,
body.animations-off .sky-canvas,
body.animations-off .runway-layer,
body.animations-off .ski-scene,
body.animations-off .ski-scene-v2,
body.animations-off .ski-controls,
body.animations-off .countdown-overlay,
body.animations-off .aircraft-layer,
body.animations-off .stage-banner,
body.animations-off .insurance-win-banner,
body.animations-off .flew-away,
body.animations-off .hypersonic-mult {
  display: none !important;
}

body.animations-off .multiplier,
body.animations-off:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .multiplier {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 80 !important;
  color: #f1f1f1 !important;
  font-size: clamp(64px, 9vw, 124px);
  line-height: 1;
  text-shadow: none !important;
}

body.animations-off .multiplier.crashed,
body.animations-off:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .multiplier.crashed,
body.animations-off:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .multiplier.crashed {
  color: #ff3f46 !important;
}

/* V2/V3 uses the main multiplier as the crash state, so hide the aircraft
   wipe-out overlay in this mode. */
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .flew-away {
  display: none;
}

/* In V2 the rows occupy the lower half — push the countdown above them so it
   reads as the start gate the skiers are queuing under. */
/* V2 countdown — bare number only. The slope itself is the visual focus,
   so we hide the title and the ring and keep just the digit centered. */
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay.align-top {
  justify-content: flex-start;
  padding-top: 24px;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay.align-top .countdown-header,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-header {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-title {
  display: none;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-ring,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay.align-top .countdown-ring {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-ring svg,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay.align-top .countdown-ring svg {
  display: none;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) #countdownNumber,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"]) .countdown-overlay.align-top #countdownNumber {
  position: static;
  display: inline-block;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  color: #f6e6d3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 0;
}

body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] #countdownNumber,
body:is([data-ski-mode="v2"], [data-ski-mode="v3"])[data-ski-v2-scene="day"] .countdown-overlay.align-top #countdownNumber {
  color: #23435d;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.44);
}

/* ---- Scene container ---- */
.ski-scene-v2 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
  font-family: 'Nunito', sans-serif;
}

.ski-v2-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Midnight ski-resort sky: deep indigo gradient with a cool snow-glow at
     the bottom so the slope reads as a night run, not a brown canyon. */
  background:
    radial-gradient(120% 35% at 50% 102%, rgba(140, 165, 230, 0.12), transparent 60%),
    linear-gradient(180deg, #060a22 0%, #0e1340 38%, #1a2160 70%, #0a0d2c 100%);
}

body[data-ski-v2-scene="day"] .ski-v2-sky {
  background:
    radial-gradient(120% 42% at 50% 102%, rgba(238, 249, 255, 0.48), transparent 65%),
    linear-gradient(180deg, #71b6ef 0%, #a6d5f6 42%, #d8edf8 74%, #eff8ff 100%);
}

.ski-v2-mountains {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

#skiV2Mountains.mountains-hidden {
  visibility: hidden;
  opacity: 0 !important;
}

body[data-ski-v2-scene="day"] .ski-v2-mountains {
  opacity: 0.94;
}

.ski-scene-v3 .ski-v2-mountains,
body[data-ski-v2-scene="day"] .ski-scene-v3 .ski-v2-mountains {
  opacity: 1;
}

/* Snowy ground glow under the slope lines — a soft white wash that sits
   behind the dashed lanes, suggesting the snow surface they're carving on
   without overpowering the resort-sky aesthetic. */
.ski-v2-ground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 70% at 30% 35%, rgba(230, 240, 255, 0.18), transparent 70%),
    linear-gradient(180deg,
      rgba(220, 235, 255, 0.00) 0%,
      rgba(220, 235, 255, 0.06) 35%,
      rgba(225, 240, 255, 0.14) 70%,
      rgba(230, 245, 255, 0.20) 100%);
}

body[data-ski-v2-scene="day"] .ski-v2-ground {
  background:
    radial-gradient(115% 64% at 34% 28%, rgba(255, 255, 255, 0.44), transparent 68%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(236, 248, 255, 0.16) 36%,
      rgba(230, 245, 255, 0.28) 70%,
      rgba(218, 236, 252, 0.34) 100%);
}

/* Falling snow canvas — drawn behind the slope lines so flakes appear
   to drift through the snowy air around the carve. */
.ski-v2-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

body[data-ski-v2-scene="day"] .ski-v2-snow {
  opacity: 0.42;
}

/* ---- Track / lanes (no static row boxes) ---- */
.ski-v2-curves {
  position: absolute;
  left: 0;
  right: 0;
  /* Anchor the track band at top:24% — the plateau then sits well
     below the top of the scene so the START flag and the skier
     formation are clearly visible during countdown, with room above
     for the sky and mountain backdrop. */
  top: 24%;
  bottom: 0;
  width: 100%;
  height: 76%;
  pointer-events: none;
  z-index: 2;
  /* Trees plant on the slope's upper rim and extend UP, which on the
     left side of the run pushes their canopies above y=0 of the SVG.
     overflow:visible lets the foliage render into the sky/mountains
     area above the SVG instead of being clipped at the snow line. */
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
}

.ski-v2-curves path {
  fill: none;
  stroke: rgba(220, 235, 255, 0.85);
  stroke-width: 1.8;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 110 2;
  will-change: d, stroke-dashoffset;
}

/* Snow slope surface — the visible snowy ground the skiers ride on. The
   gradient gives night-run depth (bright top → cooler shadow toward the
   downhill edge). A barely-there stroke softens the upper rim against
   the sky so the polygon reads as a solid snow band. */
.ski-v2-curves .ski-v2-slope-fill {
  fill: url(#skiV2SnowGradient);
  stroke: rgba(180, 200, 230, 0.35);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-dasharray: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.ski-v2-curves .ski-v2-snow-stop-0 { stop-color: rgba(255, 255, 255, 1.00); }
.ski-v2-curves .ski-v2-snow-stop-1 { stop-color: rgba(234, 246, 255, 1.00); }
.ski-v2-curves .ski-v2-snow-stop-2 { stop-color: rgba(192, 214, 244, 0.99); }
.ski-v2-curves .ski-v2-snow-stop-3 { stop-color: rgba(120, 150, 200, 0.99); }
.ski-v2-curves .ski-v2-snow-stop-4 { stop-color: rgba(58, 80, 135, 0.99); }

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-snow-stop-0 { stop-color: rgba(255, 255, 255, 1.00); }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-snow-stop-1 { stop-color: rgba(248, 252, 255, 1.00); }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-snow-stop-2 { stop-color: rgba(225, 240, 252, 1.00); }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-snow-stop-3 { stop-color: rgba(187, 214, 239, 0.99); }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-snow-stop-4 { stop-color: rgba(141, 181, 219, 0.99); }

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-slope-fill {
  stroke: rgba(116, 159, 195, 0.36);
  filter: drop-shadow(0 4px 8px rgba(64, 104, 140, 0.24));
}

/* Per-lane carve marks — subtle ski tracks visible on the snow surface.
   Animating stroke-dashoffset on these gives a clear motion cue (snow
   flowing past anchored skiers) without re-introducing the harsh "lines
   instead of snow" look the slope used to have. */
.ski-v2-curves .ski-v2-carve {
  stroke: rgba(150, 175, 215, 0.55);
  stroke-width: 1.0;
  stroke-dasharray: 32 8;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-carve {
  stroke: rgba(84, 132, 178, 0.42);
}

.ski-v2-curves .ski-v2-carve.olympian {
  stroke: rgba(82, 198, 255, 0.58);
  stroke-width: 1.15;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-carve.olympian {
  stroke: rgba(65, 136, 205, 0.5);
}

/* Trees, bushes, and slope details scattered along the upper rim.
   Desaturated blue-lit silhouettes recede into the night resort
   atmosphere without adding snow caps or clip-art contrast. The selectors
   are scoped under `.ski-v2-curves` so they win over the universal
   `.ski-v2-curves path { fill: none; stroke-dasharray: 110 2; }` rule,
   which would otherwise hollow the scenery and dash its outlines. */
.ski-v2-tree {
  pointer-events: none;
}
.ski-v2-curves .ski-v2-tree-shadow {
  fill: rgba(12, 18, 38, 0.22);
  stroke: none;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-shadow {
  fill: rgba(77, 112, 134, 0.16);
}
.ski-v2-curves .ski-v2-tree-pine {
  fill: #213644;
  stroke: rgba(150, 178, 205, 0.18);
  stroke-width: 0.45;
  stroke-linejoin: round;
  stroke-dasharray: none;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine {
  stroke: rgba(58, 99, 101, 0.16);
}
.ski-v2-curves .ski-v2-tree-trunk {
  fill: #222936;
  stroke: none;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-trunk {
  fill: #52636e;
}
.ski-v2-curves .ski-v2-tree-bush {
  fill: #2a3e49;
  stroke: rgba(150, 178, 205, 0.14);
  stroke-width: 0.38;
  stroke-linejoin: round;
  stroke-dasharray: none;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-bush {
  stroke: rgba(68, 116, 104, 0.14);
}

/* Pine colour variants: muted blue-greens shifted toward slope lighting. */
.ski-v2-curves .ski-v2-tree-pine.pine-near { fill: #2a4350; }
.ski-v2-curves .ski-v2-tree-pine.pine-blue { fill: #273f58; }
.ski-v2-curves .ski-v2-tree-pine.pine-muted { fill: #314957; }
.ski-v2-curves .ski-v2-tree-pine.pine-deep { fill: #172a36; }
.ski-v2-curves .ski-v2-tree-pine.pine-column { fill: #20394d; }
.ski-v2-curves .ski-v2-tree-pine.pine-wide { fill: #38515c; }

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-near { fill: #5e8170; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-blue { fill: #52788a; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-muted { fill: #6f8d78; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-deep { fill: #3d665b; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-column { fill: #496f73; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-pine.pine-wide { fill: #79966f; }

/* Bush colour variants. */
.ski-v2-curves .ski-v2-tree-bush.bush-near { fill: #334b54; }
.ski-v2-curves .ski-v2-tree-bush.bush-blue { fill: #2b4359; }
.ski-v2-curves .ski-v2-tree-bush.bush-muted { fill: #3a515c; }
.ski-v2-curves .ski-v2-tree-bush.bush-deep { fill: #1b303c; }

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-bush.bush-near { fill: #6d9177; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-bush.bush-blue { fill: #5f8793; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-bush.bush-muted { fill: #829a76; }
body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-bush.bush-deep { fill: #54796a; }

.ski-v2-curves .ski-v2-tree-trunk.bush-stick {
  fill: #324150;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-tree-trunk.bush-stick {
  fill: #6a7468;
}

.ski-v2-curves .ski-v2-slope-light-pole {
  fill: #45596d;
  stroke: rgba(190, 214, 235, 0.22);
  stroke-width: 0.35;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-slope-light-pole {
  fill: #7990a2;
  stroke: rgba(80, 111, 130, 0.16);
}

.ski-v2-curves .ski-v2-slope-light-glow {
  fill: rgba(178, 216, 255, 0.18);
  stroke: none;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-slope-light-glow {
  fill: rgba(255, 247, 210, 0.05);
}

.ski-v2-curves .ski-v2-slope-light {
  fill: #c7e4ff;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.45;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-slope-light {
  fill: #edf5fa;
  stroke: rgba(84, 112, 132, 0.28);
}

.ski-v2-track {
  position: absolute;
  left: 0;
  right: 0;
  /* Aligned with .ski-v2-curves so skiers share the slope's origin. */
  top: 24%;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

.ski-v2-powder-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
  contain: layout paint;
}

.ski-v2-powder-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(0.28px);
  opacity: 0.98;
}

.ski-v2-cashout-trails {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ski-v2-cashout-trail {
  fill: none;
  stroke: rgba(82, 112, 162, 0.34);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ski-scene-v3 .ski-v2-cashout-trail {
  display: none;
}

.ski-v3-cashout-lane {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  opacity: 0;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity 0.18s ease;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.32)) drop-shadow(0 2px 4px rgba(45, 81, 120, 0.18));
  will-change: transform, opacity;
}

.ski-v3-cashout-lane.visible {
  opacity: 0.92;
}

body[data-ski-v2-scene="day"] .ski-v2-cashout-trail {
  stroke: rgba(83, 122, 166, 0.28);
}

.ski-v2-skier {
  position: absolute;
  top: 0;
  left: 0;
  /* Pixel-art sprite anchored at the bottom-center on the lane line.
     The transform target (skier base point) lands on the line; the
     image extends upward and slightly to either side from there.
     transform-origin pins rotation to the skis (bottom-center) so the
     body tilts cleanly with the slope without lifting off the line.
     Lane skiers no longer paint a background-image themselves — the
     stacked .ski-v2-frame-layer children carry every pose so frame
     swaps are pure opacity flips with no GPU re-fetch flicker. The
     decorative purple/extra skiers still set background-image inline
     (single-frame, no animation). */
  width: 43px;
  height: 43px;
  margin-top: -43px;
  margin-left: -21.5px;
  transform-origin: 50% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
  z-index: 4;
  transition: opacity 0.2s ease;
}

body[data-ski-v2-scene="day"] .ski-v2-skier {
  filter: drop-shadow(0 2px 3px rgba(57, 83, 110, 0.42));
}

/* One pre-painted layer per pose (6 standard frames + 6 super frames +
   turn + fallen). All start at opacity 0 except the active one — the
   browser keeps every bitmap ready on the compositor so flipping
   opacity is instant and never paints a blank gap mid-animation. */
.ski-v2-frame-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.ski-v2-skier.olympian {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.ski-v2-skier.insurance-scan::after {
  content: '';
  position: absolute;
  z-index: 7;
  left: -8px;
  right: -8px;
  top: -7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(82, 198, 255, 0.95), transparent);
  box-shadow: 0 0 14px rgba(82, 198, 255, 0.75);
  animation: insuranceSkierScan 0.72s ease-out forwards;
  pointer-events: none;
}

body[data-ski-v2-scene="day"] .ski-v2-skier.olympian {
  filter: drop-shadow(0 2px 3px rgba(57, 83, 110, 0.42));
}

.ski-v2-skier.crash-fallen {
  filter: drop-shadow(0 2px 3px rgba(50, 0, 0, 0.52));
}

.ski-v2-skier.crash-fallen .ski-v2-frame-layer {
  filter: sepia(1) saturate(4.2) hue-rotate(318deg) brightness(0.82) contrast(1.18);
}

body[data-ski-v2-scene="day"] .ski-v2-skier.crash-fallen {
  filter: drop-shadow(0 2px 3px rgba(106, 38, 42, 0.4));
}

@keyframes insuranceSkierScan {
  0% { opacity: 0; transform: translateY(-10px) scaleX(0.72); }
  16% { opacity: 1; transform: translateY(0) scaleX(1); }
  100% { opacity: 0; transform: translateY(48px) scaleX(0.86); }
}

.ski-v2-skier.gone {
  opacity: 0;
}

/* Decorative wait-screen flock — drawn 30% smaller than the racing
   skiers so the foreground lanes still read as the focal point. */
.ski-v2-skier.ski-v2-purple-skier {
  width: 30px;
  height: 30px;
  margin-top: -30px;
  margin-left: -15px;
}

.ski-v2-payout {
  position: absolute;
  display: none;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  z-index: 54;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  min-width: 96px;
  text-align: center;
  line-height: 1;
  will-change: left, top, transform;
}

.ski-v2-payout.insurance-payout.show,
.ski-v2-payout.cashout-live.show {
  display: flex;
}

.ski-v2-payout .ski-v2-payout-mult {
  display: none;
}

.ski-v2-payout .ski-v2-payout-amount {
  color: #00f27e;
  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 242, 126, 0.36);
}

body[data-ski-v2-scene="day"] .ski-v2-payout .ski-v2-payout-amount {
  color: #009d55;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(0, 157, 85, 0.18);
}

/* ---- Start flag (planted in the same SVG scenery layer as trees/lights) ---- */
.ski-v2-start-flag {
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 0 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: opacity 0.12s ease;
}

.ski-v2-start-flag.visible {
  opacity: 1;
}

.ski-v2-start-flag.visible.leaving {
  animation: ski-v2-start-flag-wave 1.05s ease-in-out infinite alternate;
}

@keyframes ski-v2-start-flag-wave {
  0%   { rotate: -1deg; }
  100% { rotate: 1deg; }
}

.ski-v2-curves .ski-v2-start-flag-shadow {
  fill: rgba(12, 18, 38, 0.24);
  stroke: none;
}

.ski-v2-curves .ski-v2-start-flag-pole {
  fill: #d7b06e;
  stroke: rgba(43, 31, 19, 0.42);
  stroke-width: 0.7;
  stroke-dasharray: none;
}

.ski-v2-curves .ski-v2-start-flag-cloth {
  fill: #c84733;
  stroke: rgba(255, 230, 196, 0.34);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-dasharray: none;
}

.ski-v2-curves .ski-v2-start-flag-label {
  fill: #fff3d8;
  stroke: rgba(70, 24, 19, 0.38);
  stroke-width: 0.35;
  stroke-dasharray: none;
  paint-order: stroke;
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  dominant-baseline: middle;
}

body[data-ski-v2-scene="day"] .ski-v2-start-flag {
  filter: drop-shadow(0 4px 7px rgba(69, 102, 128, 0.24));
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-start-flag-shadow {
  fill: rgba(77, 112, 134, 0.16);
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-start-flag-pole {
  fill: #c59a57;
  stroke: rgba(90, 92, 86, 0.24);
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-start-flag-cloth {
  fill: #d45238;
  stroke: rgba(255, 247, 226, 0.5);
}

/* Reference geometry, measured off SPIRIT at 1280w: 500x196 panel, 14px
   padding, a 9:11 column split with a 14px gutter and no rule between the
   columns, over a 166px control row. */
.control-panel.shell-panel {
  padding: 14px;
  border: 1px solid #424242;
  border-radius: 12px;
  background: #242424;
  max-height: none;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  grid-template-rows: auto auto 166px;
  grid-template-areas:
    "total total"
    "profiles profiles"
    "tools action";
  column-gap: 14px;
}

/* SPIRIT drops the column rule in this layout — the gutter carries it. */
.control-panel.shell-panel::before {
  display: none;
}

.bet-tools-row {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "amount";
  gap: 0;
}

.control-panel .adjustment {
  width: 100%;
  height: 100%;
  min-height: 166px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(64px, 1fr) 52px;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid #505050;
  border-radius: 8px;
  background: #191a1a;
  overflow: hidden;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.control-panel .adjustment:focus-within {
  border-color: #727272;
  background: #202020;
}

/* The amount the player edits is labelled, same as the button it feeds. */
.control-panel .adjustment {
  position: relative;
}

.control-panel .adjustment::before {
  content: "BET";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  color: #a7a7a7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  pointer-events: none;
}

.control-panel .amount-box,
.control-panel .amount-input {
  grid-row: 1;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f6f6f6;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  text-align: center;
  outline: none;
  transition: color 0.16s ease, filter 0.16s ease;
}

.control-panel .adjust-btn,
.control-panel .autoplay-open-btn,
.control-panel .bet-nominal-btn {
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #575757;
  border-radius: 6px;
  background: #303030;
  color: #d0d0d0;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  justify-self: stretch;
  align-self: stretch;
  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;
}

.control-panel .adjust-btn { font-size: 22px; }
.control-panel #decreaseBtn { grid-column: 1; }
.control-panel .autoplay-open-btn { grid-column: 2; white-space: nowrap; }

.control-panel .autoplay-open-btn:not(.active)::before {
  content: "AUTO";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

.control-panel .autoplay-open-btn .autoplay-rounds-left {
  display: none;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.control-panel .autoplay-open-btn.active .autoplay-rounds-left {
  display: block;
}

.control-panel .autoplay-open-btn.locked {
  opacity: 0.52;
}

.control-panel .autoplay-open-btn.active.locked {
  opacity: 1;
}
.control-panel #increaseBtn { grid-column: 3; }

.control-panel .adjust-btn svg {
  width: 14px;
  height: 14px;
}

.control-panel .adjust-btn:not(:disabled):hover,
.control-panel .adjust-btn:not(:disabled):focus-visible,
.control-panel .autoplay-open-btn:not(:disabled):hover,
.control-panel .autoplay-open-btn:not(:disabled):focus-visible,
.control-panel .bet-nominal-btn:not(:disabled):hover,
.control-panel .bet-nominal-btn:not(:disabled):focus-visible {
  border-color: #727272;
  background: #474747;
  color: #ffffff;
  outline: none;
}

.control-panel .adjust-btn:not(:disabled):active,
.control-panel .autoplay-open-btn:not(:disabled):active,
.control-panel .bet-nominal-btn:not(:disabled):active {
  transform: scale(0.96);
}

/* The nominals only exist while the amount is being edited; the rest of the
   time the bottom row is [−][AUTO][+]. */
.control-panel .bet-nominals {
  display: none;
  grid-row: 2;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 4px;
  height: 100%;
  min-height: 0;
}

.control-panel .adjustment:has(> .amount-input:not(.hidden)) .bet-nominals {
  display: grid;
}

.control-panel .adjustment:has(> .amount-input:not(.hidden)) .adjust-btn,
.control-panel .adjustment:has(> .amount-input:not(.hidden)) .autoplay-open-btn {
  visibility: hidden;
  pointer-events: none;
}

.control-panel .bet-nominal-btn {
  grid-row: 1;
  font-size: 16px;
}

/* 64px bonus slot + 6px + 96px button = the 166px control row. */
.action-main-row {
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 6px;
  align-content: stretch;
}

.action-stack.insurance-only .action-main-row {
  grid-template-rows: 64px minmax(0, 1fr);
}

.action-side-slot {
  height: 100%;
  min-height: 0;
}

.action-side-slot::before {
  border-radius: 12px;
}

.bonus-bet-switch-card.finisher-card,
.action-side-slot .cash-out-all-btn,
.action-side-slot .bonus-live-amount-btn {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid #4b4b4b;
  border-radius: 12px;
  background: #2f2f2f;
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) {
  padding: 0 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "amount switch";
  align-content: center;
  gap: 6px 12px;
}

/* Flipping the switch lifts the whole card, the way apex's does: the panel
   takes a tint of the accent, its border comes up to 58% of it, and a soft
   rim and glow settle in over apex's 0.34s ease. Same treatment, this
   build's blue in place of apex's orange. */
#olympianCard.bonus-bet-switch-card.finisher-card {
  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),
    color 0.24s ease,
    opacity 0.22s ease;
}

#olympianCard.bonus-bet-switch-card.active-addon,
#olympianCard.bonus-bet-switch-card.active-addon:hover,
#olympianCard.bonus-bet-switch-card.active-addon:focus-visible {
  background: #272d34;
  border-color: rgba(83, 161, 252, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(83, 161, 252, 0.08),
    0 0 18px rgba(83, 161, 252, 0.08);
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-copy {
  display: contents;
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-label {
  grid-area: title;
  color: #ffffff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-buy {
  grid-area: amount;
  margin-top: 0;
  color: #53a1fc;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/* Switch geometry and motion lifted from SPIRIT: a 56x24 track with an 18px
   knob inset 3px on every side, so its 32px travel lands it as far from the
   right edge as it starts from the left. Only the on colour differs. */
.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-switch-visual {
  --finisher-switch-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);
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-switch-knob {
  position: absolute;
  /* The track carries a 1px border and absolute insets resolve against its
     padding box, so 2px here reads as a true 3px gap on every side. */
  left: 2px;
  top: 2px;
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-switch-input:checked + .finisher-switch-visual,
.bonus-bet-switch-card.finisher-card.active-addon:not(.autoplay-bonus-card) .finisher-switch-visual {
  background: #53a1fc;
  box-shadow: 0 0 14px rgba(83, 161, 252, 0.22);
}

.bonus-bet-switch-card.finisher-card:not(.autoplay-bonus-card) .finisher-switch-input:disabled + .finisher-switch-visual {
  background: #4b4b4b;
}

.bet-action-group,
.action-stack .bet-btn {
  min-height: 0;
}

.action-stack .bet-btn {
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  margin-bottom: 0;
}

/* apex's V9 palette: amber stake button; the bonus variant is this build's
   blue where apex paints orange. */
.bet-btn.state-bet:not(:disabled) {
  background: #ffc400;
  color: #151515;
}

.bet-btn.state-bet:not(:disabled):hover,
.bet-btn.state-bet:not(:disabled):focus-visible {
  background: #ffc940;
}

.bet-btn.state-bet:not(:disabled):active {
  background: #ffe36a;
}

.bet-btn.state-bet.has-bonus-selected:not(:disabled) {
  background: #53a1fc;
  color: #151515;
}

.bet-btn.state-bet.has-bonus-selected:not(:disabled):hover,
.bet-btn.state-bet.has-bonus-selected:not(:disabled):focus-visible {
  background: #74b4fd;
}

.bet-btn.state-bet.has-bonus-selected:not(:disabled):active {
  background: #96c8fe;
}

/* The scoped rules above re-declare border/colour/cursor, so the active and
   disabled treatments need scoped copies to keep winning. */
.control-panel .autoplay-open-btn.active {
  border-color: rgba(0, 246, 111, 0.55);
  color: #00f66f;
}

.control-panel .adjust-btn:disabled,
.control-panel .autoplay-open-btn:disabled,
.control-panel .bet-nominal-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* apex V10 draws the live cash-out label as a glyph, not text — the skier
   stands in for apex's bomb. Standing alone over the payout it can carry
   more weight than apex's 20px, which shared its line with a caption. */
.bet-btn.skier-cashout .btn-line-one {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* The button carries its own racer — a different pose from the one the
   inventory rows use, and a taller one, so the box takes its aspect. */
.bet-btn.skier-cashout .btn-line-one::after {
  content: "";
  width: 44px;
  height: 36px;
  background-color: #151515;
  -webkit-mask: url("assets/icons/skier-cashout.svg") center / contain no-repeat;
  mask: url("assets/icons/skier-cashout.svg") center / contain no-repeat;
}

/* ── Cash-out inventory (apex's bomb list, skier edition) ─────────────────
   Overlays the whole left card while a bet rides: five rows, LOADED until
   each skier banks. Fold of apex's base + V8 card + V9 recolor rules. */
.cashout-list {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  padding: 4px;
  border: 1px solid #505050;
  border-radius: 8px;
  background: #191a1a;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.cashout-list.show {
  opacity: 1;
  visibility: visible;
}

.cashout-row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid #454545;
  border-radius: 6px;
  background: #303030;
}

.cashout-row-skier {
  display: inline-flex;
  align-items: center;
  color: #d0d0d0;
}

/* One masked asset serves every skier glyph, so each use just picks a size
   and a colour — the row states tint theirs through currentColor. */
.cashout-row-skier .skier-glyph-icon {
  display: block;
  width: 24px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("assets/icons/skier.svg") center / contain no-repeat;
  mask: url("assets/icons/skier.svg") center / contain no-repeat;
}

/* The glyph alone carries the row — apex hides the unit number too. */
.cashout-row-skier-number {
  display: none;
}

.cashout-row-amt {
  color: #00f27e;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cashout-row.is-pending {
  border-color: #3d3d3d;
  background: #252626;
}

.cashout-row.is-pending .cashout-row-skier {
  color: #9c9c9c;
  opacity: 0.82;
}

.cashout-row.is-pending .cashout-row-amt {
  color: #848484;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  opacity: 0.82;
}

.cashout-row.is-cashed .cashout-row-skier {
  color: #00f27e;
}

/* slopes-only: the insured skier rides to the crash in the bonus blue. */
.cashout-row.is-insured .cashout-row-skier {
  color: #53a1fc;
  opacity: 1;
}

.cashout-row.is-insured .cashout-row-amt {
  color: #53a1fc;
}

/* ── Win celebration (apex port) ──────────────────────────────────────────
   Full-panel TOTAL WIN cover: the figure over a soft burst, nothing else in
   the frame. The coin rain that came across with the port is gone — the
   round's take is the thing worth reading, and falling coins were competing
   with it. Shown ~2s after a final cash-out; the controls sit ready beneath. */
.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 current build sets the take a good deal larger than the V10 port
     slopes took it from — 58-84px against 46-60px. */
  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 reward burst behind the amount */
.win-celebration-burst {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 197, 64, 0.22) 0%, rgba(247, 197, 64, 0.11) 38%, rgba(247, 197, 64, 0) 72%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.2px);
}

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

/* apex's pop: it starts a little larger, overshoots less far and reaches the
   overshoot later, so at this size the figure settles rather than snapping. */
@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; }
}

@media (prefers-reduced-motion: reduce) {
  .win-celebration.show .win-celebration-label,
  .win-celebration.show .win-celebration-value,
  .win-celebration.show .win-celebration-burst {
    animation: none;
  }
}

/* apex V10 labels the modal columns above the controls, so the bonus card's
   inner label hides and its figure matches the bet value's size. */
.modal-autoplay .autoplay-bonus-card .finisher-label {
  display: none;
}

.modal-autoplay .autoplay-bonus-card .finisher-buy,
.modal-autoplay .autoplay-amount {
  font-size: 14px;
  font-weight: 700;
}

.autoplay-start-btn:not(:disabled):hover,
.autoplay-start-btn:not(:disabled):focus-visible {
  background: #15ff7d;
}

/* ── Sidebar parity (apex port): chat composer ────────────────────────── */
.chat-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Stage marks ──────────────────────────────────────────────────────────
   The corner readouts — riders, stake, win — at train's fixed 10px. Each
   game in the family dresses these in its own materials: train hangs tin
   depot placards, apex stamps surveillance tags. Here they are snow glass —
   frosted white plates with the slope's own slate ink, a crisp frost edge
   on top and a cool shadow underneath, as if pressed out of the piste.
   By night the same plates read as moonlit frost: a touch more sheer, on a
   deeper shadow. */
.stage-marks {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  font-family: "Nunito", system-ui, sans-serif;
}

.stage-mark {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: #1b3a52;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 10px rgba(33, 68, 95, 0.14);
  /* The plate is sheer, so the blur does the separating the fill no longer
     does — the slope reads through, the figures stay crisp on top. */
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}

.stage-mark.mark-top-left {
  top: 12px;
  left: 12px;
  padding: 4px 9px 4px 6px;
}

.stage-mark-icon {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: 0.75;
}

.stage-mark.mark-bottom-left {
  bottom: 12px;
  left: 12px;
}

.stage-mark.mark-bottom-right {
  right: 12px;
  bottom: 12px;
}

/* The bet and win plates are the live position's own readouts, so they arrive
   with the round and leave with it instead of holding settled figures through
   the wait. They fade rather than cutting, and keep their last text on the way
   out so the closing numbers are what the eye follows off screen. */
.stage-mark.mark-bottom-left,
.stage-mark.mark-bottom-right {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.stage-mark.is-idle {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* Moonlit frost: the night slope is dark, so the plates go a touch more
   sheer and sit on a deeper shadow instead of the daytime's cool one. */
body:not([data-ski-v2-scene="day"]) .stage-mark {
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(244, 248, 252, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 720px) {
  .stage-mark.mark-top-left { top: 9px; left: 9px; }
  .stage-mark.mark-bottom-left { bottom: 9px; left: 9px; }
  .stage-mark.mark-bottom-right { right: 9px; bottom: 9px; }
}

/* ── Autoplay dialog: apex's proportions ──────────────────────────────────
   The dialog had drifted taller and looser than apex's — 46px controls
   against its 36px, and the panel card's two-row layout leaking in and
   stacking the bonus toggle above its own figure. These pin every
   measurement back to apex, with the skier where its bomb sits. */
.autoplay-top-grid {
  grid-template-columns: minmax(0, 1fr) minmax(158px, 0.72fr);
  gap: 8px;
}

.autoplay-amount-control,
.autoplay-cashout-control {
  min-height: 0;
  height: 36px;
  gap: 0;
  border-color: #4b4b4b;
  background: #191a1a;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.autoplay-amount-control {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  padding: 4px;
  border-radius: 11px;
}

.autoplay-cashout-control {
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  padding: 3px;
  border-radius: 10px;
}

.autoplay-amount-control:focus-within,
.autoplay-cashout-control:focus-within {
  border-color: #727272;
  background: #202020;
}

.autoplay-step-btn {
  height: 100%;
  border-color: #575757;
  color: #ffffff;
  font-weight: 700;
}

.autoplay-amount-control .autoplay-step-btn {
  border-radius: 8px;
  font-size: 18px;
}

.autoplay-cashout-control .autoplay-step-btn {
  border-radius: 7px;
  font-size: 15px;
}

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

/* One row: the figure reads left, the switch sits right of it. */
.modal-autoplay .autoplay-bonus-card.bonus-bet-switch-card.finisher-card {
  height: 36px;
  min-height: 36px;
  padding: 4px 7px 4px 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  gap: 6px;
  border-color: #4b4b4b;
  background: #383838;
  border-radius: 10px;
}

.modal-autoplay .autoplay-bonus-card .finisher-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.modal-autoplay .autoplay-bonus-card .finisher-buy,
.modal-autoplay .autoplay-bonus-card.active-addon .finisher-buy {
  font-size: 11px;
  font-weight: 700;
}

.modal-autoplay .autoplay-bonus-card .finisher-switch-visual {
  --finisher-switch-travel: 26px;
  width: 46px;
  height: 20px;
  padding: 0 5px;
  justify-self: end;
}

.modal-autoplay .autoplay-bonus-card .finisher-switch-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  flex: none;
  width: 14px;
  height: 14px;
}

.autoplay-cashout-list {
  grid-auto-rows: minmax(38px, 1fr);
}

.autoplay-cashout-row {
  min-height: 38px;
  grid-template-columns: minmax(30px, 0.28fr) auto minmax(0, 1fr);
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.autoplay-cashout-label {
  color: #bdbdbd;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
}

.autoplay-target-skier {
  width: 22px;
  height: 15px;
}

@media (max-width: 720px) {
  .autoplay-amount-control {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  .autoplay-cashout-control {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .autoplay-target-skier {
    width: 20px;
    height: 14px;
  }
}

/* ── Multiplier character cells ───────────────────────────────────────────
   Digit cells are uniform so the figure never shifts as values change. The
   dot needs far less room than a digit; the x needs a full digit's width —
   at a narrower cell its ink overhangs, and being the last character that
   overhang falls outside the centred row and pulls the figure right. */
.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;
}

.multiplier-char-dot {
  width: 0.2em;
}

.multiplier-char-x {
  width: 0.58em;
  text-align: center;
}

/* ── Bonus rider marker ───────────────────────────────────────────────────
   The mark that says a bet was placed with the bonus. The artwork is a disc
   with the B cut out of it, so the badge is painted in two layers: a solid
   disc underneath supplies the letter's colour, and the masked artwork lays
   the blue over it. Painted in one layer the B would be a hole onto whatever
   happened to sit behind the badge — dark in the lists, snow on the plate. */
.bonus-rider-mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
}

/* Inset a hair so the disc's own edge stays the blue one and no pale fringe
   shows around it. */
.bonus-rider-mark::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: #ffffff;
}

.bonus-rider-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #53a1fc;
  -webkit-mask: url("assets/icons/bonus-badge.svg") center / contain no-repeat;
  mask: url("assets/icons/bonus-badge.svg") center / contain no-repeat;
}

.bonus-rider-mark.hidden {
  display: none;
}

/* In the lists the letter is cut straight through to the row behind it rather
   than painted, so it reads dark against the blue and tracks the row's own
   background — including the lighter hover fill, which a fixed colour here
   would sit wrong against. */
.player-row .bonus-rider-mark::before {
  background: transparent;
}

/* On the stake plate the disc goes a shade deeper — the lighter blue washes
   out against the snow behind the glass. */
.stage-mark .bonus-rider-mark::after {
  background: #1f6fd0;
}

/* The badge is 14px against a 10px line of text, so left alone it sets the
   plate's height and the bet plate stands 4px taller than the win plate
   opposite it. Pulling its block margins in by the difference hands the
   decision back to the text: the badge still draws at 14px, growing into the
   plate's 5px of padding rather than pushing the plate open. */
.stage-mark .bonus-rider-mark {
  margin-block: -2px;
}

body:not([data-ski-v2-scene="day"]) .stage-mark .bonus-rider-mark::after {
  background: #1a5fb8;
}

/* A locked-on bonus switch, apex's way. apex never fades the track or sends it
   neutral: .active:disabled swaps in a darker cut of the accent itself —
   #873f1e against its #ea6528 — and greys the knob, at full opacity. That
   keeps three states legible: off, on, and on-but-settled. A fade collapses
   the last two into "greyed out", which is what slopes was doing, and full
   brightness collapses it back into "still pressable".
   #3064bd and #4573bf are slopes' blue and its border run through apex's own
   accent-to-locked ratios, so the relationship carries over rather than being
   eyeballed. The 48% opacity bet-locked applied is dropped — that was what
   turned the track neutral to begin with. */
.bonus-bet-switch-card.finisher-card.active-addon:not(.autoplay-bonus-card) .finisher-switch-input:disabled + .finisher-switch-visual,
.bonus-bet-switch-card.finisher-card.active-addon.bet-locked:not(.autoplay-bonus-card) .finisher-switch-visual {
  background: #3064bd;
  border-color: #4573bf;
  opacity: 1;
  box-shadow: none;
}

/* apex greys the knob on any disabled switch, on or off. */
.bonus-bet-switch-card.finisher-card.active-addon.bet-locked:not(.autoplay-bonus-card) .finisher-switch-knob {
  background: #a9a9a9;
}

/* The other half of apex's lock, and the half slopes was missing: the panel
   itself dims. `.hypersonic-mode-panel.locked .bonus-switch-panel` takes the
   whole card to 0.52 — title, price and switch together — so the darker track
   is read through a dimmed card rather than being the only thing that moved.
   slopes had .finisher-card.disabled at 0.58 for this, but the card's own
   active-addon styling outranked it and the card stayed at full strength,
   leaving BUY BONUS and its figure as bright as they are when pressable. The
   ID here settles that for good. */
#olympianCard.bonus-bet-switch-card.bet-locked {
  opacity: 0.52;
  cursor: default;
}

/* ── V2 lanes ────────────────────────────────────────────────────────────
   Each lane is one solid line ahead of its skier and two ski tracks behind
   it. The dashes come off the lane itself; the tracks are the same lane run
   twice, either side, in the cash-out trail's weight and tone so a skier's
   tracks and its exit trail read as one pair of skis. */
body.lane-tracks .ski-v2-curves .ski-v2-carve {
  stroke-dasharray: none;
  /* A continuous line carries more ink than the same stroke dashed, so V2's
     lane runs at about half V1's strength to sit as lightly on the snow. */
  stroke: rgba(150, 175, 215, 0.3);
}

body.lane-tracks[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-carve {
  stroke: rgba(84, 132, 178, 0.22);
}

/* The insured lane keeps its tint, at the same reduced strength. */
body.lane-tracks .ski-v2-curves .ski-v2-carve.olympian {
  stroke: rgba(82, 198, 255, 0.32);
}

body.lane-tracks[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-carve.olympian {
  stroke: rgba(65, 136, 205, 0.28);
}

/* The tracks are meant to be barely there: thinner than the lane, and about
   half its strength again. They had been thicker than the lane itself. */
.ski-v2-curves .ski-v2-ski-track {
  fill: none;
  stroke: rgba(82, 112, 162, 0.17);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-ski-v2-scene="day"] .ski-v2-curves .ski-v2-ski-track {
  stroke: rgba(83, 122, 166, 0.14);
}