/* ── Strike Pump, on the DriveX kit ──
   Loaded after styles / trade / drivex. The shell (header band, sheets, keypad, popovers,
   sidebar, breakpoints) stays DriveX; here: the stage fills the screen, the pump panel,
   the lamps the game adds, and the artifact's stage messages. */

:root{ --sp-stage: #0B1430; }

/* ── Layout: the stage takes every pixel the panel leaves ── */
.tr-app.tr-app--crash{ justify-content: flex-start; }
.tr-app--crash .tr-body, .tr-app--crash .tr-left, .tr-app--crash .tr-stage{ flex: 1 1 auto; min-height: 0; }
.tr-app--crash .tr-chartrow, .tr-app--crash .tr-stage .tr-chartrow{ flex: 1 1 0; height: auto; aspect-ratio: auto; min-height: 150px; background: var(--sp-stage); }
.sp-scene{ position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--sp-stage); touch-action: none; }
.sp-scene canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 599px){ .tr-app--crash .tr-chartrow, .tr-app--crash .tr-stage .tr-chartrow{ aspect-ratio: auto; } }

/* ── Header: three icons (stats, my bets, menu) ── */
@media (max-width: 430px){
  .tr-app--crash .th{ gap: 5px; }
  .tr-app--crash .th-right{ gap: 5px; }
  .tr-app--crash .th-logo .dx-logo-img{ height: 19px; }
  .tr-app--crash .th-menu-btn{ width: 32px; }
  .tr-app--crash .th-balance{ min-width: 96px; justify-content: flex-end; }
}
@media (max-width: 372px){
  .tr-app--crash .th-logo .dx-logo-img{ height: 16px; }
  .tr-app--crash .th-menu-btn{ width: 30px; }
  .tr-app--crash .th-balance{ min-width: 0; padding: 0 7px; }
}

/* ── Pop history: plain numbers, no box. White under 2x, blue 2x to 10x, green 10x and up ── */
.tr-app--crash .ch-hist{ gap: 4px; }
.tr-app--crash .ch-chip, .tr-app--crash .ch-chip--mid, .tr-app--crash .ch-chip--hi{ flex: none; display: grid; place-items: center; height: 34px; padding: 0 7px; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-app--crash .ch-chip--mid{ color: #5A8CF7; }
.tr-app--crash .ch-chip--hi{ color: #33E07E; }
.ch-chip--new{ animation: sp-pop .5s; }
@keyframes sp-pop{ from{ transform: scale(.4); opacity: 0; } }
@media (max-width: 430px){ .tr-app--crash .ch-chip, .tr-app--crash .ch-chip--mid, .tr-app--crash .ch-chip--hi{ height: 30px; padding: 0 6px; font-size: 13px; } }

/* ── Stage messages ── */
.sp-toasts{ position: absolute; left: 0; right: 0; top: 58px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.sp-toast{ font-family: var(--dx-display); font-weight: 400; font-size: clamp(22px, 6vw, 32px); letter-spacing: .02em; line-height: 1.1; padding: 0 6px; color: #FF1A14; text-shadow: 0 0 10px rgba(255,26,20,.9); transform: skewX(-8deg); text-transform: uppercase; font-variant-numeric: tabular-nums; animation: sp-tin .25s ease-out; white-space: nowrap; }
.sp-toast--reach{ color: #FFB238; text-shadow: 0 0 10px rgba(255,165,55,.85); }
.sp-toast--win{ color: #33E07E; text-shadow: 0 0 10px rgba(51,224,126,.85); }
.sp-toast--soft{ color: #FFFFFF; text-shadow: 0 0 8px rgba(255,255,255,.35); font-size: clamp(17px, 2.4vw, 24px); }
.sp-toast--out{ opacity: 0; translate: 0 -6px; transition: .35s; }
@keyframes sp-tin{ from{ opacity: 0; translate: 0 8px; } }
.sp-chain{ position: absolute; left: 0; right: 0; top: 10px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sp-chain b{ font-family: var(--dx-display); font-weight: 400; font-size: clamp(18px, 2.2vw, 26px); color: #3FD3A5; transform: skewX(-8deg); text-shadow: 0 0 10px rgba(30,230,175,.6); letter-spacing: .03em; white-space: nowrap; }
.sp-chain b i{ font-style: normal; display: inline-block; text-align: left; font-variant-numeric: tabular-nums; }

/* ── The panel: quick targets over [amount / finish] and [lamp] ── */

  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); }

/* amount: [ − | $amount | + ] over [½] [2×] */

/* the lamps Strike Pump adds */
/* AUTO PUMP: a tap button, steadily lit amber so the switch from PUMP is obvious; red while it pumps */

/* PUMP: hold button. Amber at rest, warms to red as the power builds (gasPaint) */
@keyframes sp-chev{ 40%{ opacity: .85; } }

/* pressed controls light up (no size change), as in DriveX */

/* Phones (≤ 430 px) */
/* Short phones: the stage keeps its room, the panel tightens */
@media (max-width: 767px) and (max-height: 640px){
  .tr-app--crash .tr-right.tr-right--slots{ padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* Tablets and desktop: the band holds one wide card. Targets (two rows, all fourteen on show) | amount or Finish | the lamp. */
@media (min-width: 768px){
  .tr-app--crash .tr-right.tr-right--slots{ grid-template-columns: minmax(0, 1fr); }
}
/* Desktop: the amount popover sits right above the amount */
@media (min-width: 960px){
  /* the sidebar: statistics */
  .tr-app--crash .st-side{ display: flex; flex-direction: column; }
}
/* Landscape phones: stage left, panel right (the DriveX rule), the panel in its phone form */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .tr-app--crash .tr-right.tr-right--slots, .tr-app--crash .tr-right.tr-right--slots.tr-right--slot1{ display: flex; flex-direction: column; justify-content: center; width: min(360px, 46vw); padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) 8px; }
  .tr-app--crash .th{ padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .tr-app--crash .ch-top{ padding-bottom: 2px; }
  .tr-app--crash .ch-chip, .tr-app--crash .ch-chip--mid, .tr-app--crash .ch-chip--hi{ height: 24px; }
}

/* ── Loading: the poster, the logo in its sky, START PUMP ── */
.loading-screen.sp-loader{ background: #04071A; }
.loading-screen.sp-loader .dxl-poster.sp-poster{ left: 0; right: 0; width: auto; transform: none; background: url("art/poster.webp?v=1") center 38% / cover no-repeat; -webkit-mask-image: none; mask-image: none; box-shadow: none; }
.loading-screen.sp-loader .sp-poster::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,26,.55) 0%, rgba(4,7,26,0) 26%, rgba(4,7,26,0) 62%, rgba(4,7,26,.78) 100%); }
.loading-screen .sp-load-logo{ display: block; position: absolute; left: 50%; top: max(7vh, 40px); transform: translateX(-50%); width: min(74vw, 520px); height: auto; z-index: 1; filter: drop-shadow(0 6px 24px rgba(0,0,0,.7)); }
.loading-screen.sp-loader .loading-content.dxl-ui{ bottom: calc(max(3vh, 18px) + 88px); }
.loading-screen.sp-loader .dxl-bar i{ background: linear-gradient(90deg, #2F6BFF, #7FA6FF); box-shadow: 0 0 10px rgba(47,107,255,.7); }
.loading-screen.sp-loader .ld-ign{ border-color: #FF2D3D; background: rgba(8,6,12,.9); }
@media (min-aspect-ratio: 3/4){
  .loading-screen.sp-loader .dxl-poster.sp-poster{ background-image: url("art/poster-wide.webp?v=1"); background-position: center 78%; }
  .loading-screen .sp-load-logo{ top: 5vh; width: min(30vw, 420px); }
}
@media (max-height: 540px){
  .loading-screen .sp-load-logo{ top: 14px; width: min(30vw, 300px); }
  .loading-screen.sp-loader .loading-content.dxl-ui{ bottom: 10px; }
  .loading-screen.sp-loader .ld-actions{ gap: 8px; }
  .loading-screen.sp-loader .ld-ign{ height: 46px; font-size: 17px; }
  .loading-screen.sp-loader .loading-watermark{ left: auto; right: 16px; bottom: 12px; transform: none; }
  .loading-screen .loading-watermark img{ width: 72px; }
}

/* how to play art uses the kit's cards; a little more air for the balloon's label */
.htp-svg text{ font-family: var(--dx-ui); }
.ab-odds th, .ab-odds td{ font-variant-numeric: tabular-nums; }

/* ── Review fixes ── */
.sp-chain[hidden]{ display: none; }
/* the pump's small line fits the narrow lamps */
@media (max-width: 372px), (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .sp-toast{ font-size: 22px; }
}
/* desktop: there is room, the lamps' small lines read at a glance */

/* Georgian has no condensed face here: smaller type, no tracking, so the lamps' words fit */
@media (min-width: 960px){
}

/* How to play: the balloon grows while the finger holds Pump */
.sp-htp-grow{ transform-box: fill-box; transform-origin: 50% 100%; animation: sp-htp-grow 2.4s ease-in-out infinite; }
.sp-htp-ring{ transform-box: fill-box; transform-origin: 50% 50%; animation: sp-htp-ring 1.2s ease-out infinite; }
@keyframes sp-htp-grow{ 0%{ transform: scale(.72); } 80%, 100%{ transform: scale(1.08); } }
@keyframes sp-htp-ring{ from{ transform: scale(.6); opacity: .9; } to{ transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .sp-htp-grow, .sp-htp-ring{ animation: none; } }

/* Results row: the player's own balloons; each opens its round in History */
.tr-app--crash button.ch-chip{ cursor: pointer; }
.tr-app--crash .ch-hist.sp-nohist{ display: flex; align-items: center; height: 34px; padding: 0 2px; color: #5A6690; font-size: 13px; font-weight: 600; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 430px){ .tr-app--crash .ch-hist.sp-nohist{ height: 30px; font-size: 12px; } }
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){ .tr-app--crash .ch-hist.sp-nohist{ height: 24px; } }
.sp-steps{ margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.sp-repro{ color: #33E07E; }
.drawer--pf .drawer-tab--active{ color: #FFFFFF; }

/* Fast Play: the first control in the targets row, sticky while the row scrolls */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
}

/* How to play: the needle climbs and slams into the red */
.sp-htp-needle{ animation: sp-htp-needle 2.2s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes sp-htp-needle{ 0%{ transform: rotate(-135deg); } 45%, 70%{ transform: rotate(-30deg); } 100%{ transform: rotate(-135deg); } }
@media (prefers-reduced-motion: reduce){ .sp-htp-needle{ animation: none; transform: rotate(-30deg); } }

/* landscape phones: the amount keeps its digits in the narrow column */

/* Fast Play steps: FAST + Steps stay put while the targets scroll; with 2+ steps the plan itself fills the row */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
}
.as-step-dial{ min-width: 0; }
.drawer--steps .drawer-content{ overflow-y: auto; }
.drawer--steps .drawer-footer{ padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.drawer--steps .tq-btn:disabled{ opacity: .35; }

/* the sheet's scrollers take the row's whole width; the plan button shows it can be edited */
.drawer--steps .as-step{ grid-template-columns: 48px minmax(0, 1fr); }
.drawer--steps .as-dial{ width: 100%; }
/* Georgian in the narrowest places */
@media (min-width: 768px) and (max-width: 1199px){
}

/* the plan button in the narrowest rows: all the room for the targets */

/* the Auto Play lamp on desktop: a dark housing, white text */
/* the run: the P/L lamp lit in its colour, Stop in red */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
}
/* the sheet: an Auto Play section, two buttons in the footer */
.drawer--steps .drawer-footer .pf-btn{ width: 100%; margin: 0; }
.drawer--auto .drw-stat-value{ max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the run summary's hero */
.sp-auto-hero{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 14px; }
.sp-auto-hero span{ font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--content-tertiary); }
.sp-auto-hero b{ font-family: var(--dx-display); font-weight: 400; font-size: 34px; line-height: 1; color: #FFFFFF; transform: skewX(-8deg); }
.sp-auto-hero--win b{ color: #33E07E; text-shadow: 0 0 12px rgba(51,224,126,.6); }
.sp-auto-hero--loss b{ color: #FF6E80; }

/* tablets in portrait keep the phone layout (the wide bar starts at 960) */
/* a chain plan takes the whole row; the quick chips are for a single step */
/* the desktop Auto Play lamp's word fits its 42% */

/* the plan button is pinned, so the row must not snap a chip under it */

/* the sheets' chips (steps, rounds): the picked one is solid e-blue like the scroller's value pill,
   not the drawer's white outline; the rest quiet navy */
.drawer--steps .tq .tq-btn{ border: 1px solid #1A2650; background: #050A1A; color: #C9D4F5; box-shadow: none; font-weight: 700; transition: border-color .15s, background .15s, color .15s; }
.drawer--steps .tq .tq-btn.tq-btn--on{ border-color: #2F6BFF; background: #2F6BFF; color: #FFFFFF; font-weight: 800; box-shadow: 0 0 12px rgba(47,107,255,.45); }
@media (hover: hover){ .drawer--steps .tq .tq-btn:hover:not(:disabled):not(.tq-btn--on){ border-color: #2F6BFF; background: #0D1A44; color: #FFFFFF; } }
.drawer--steps .tq .tq-btn:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
.drawer--steps .tq .tq-btn:disabled{ opacity: .35; }

/* ── The one FAST button, first in the targets row: pinned while the chips scroll, lit when on ── */
@media (min-width: 960px){
}
/* the sheet: the master switch on top, the body dims while Fast Play is off */
.sp-master{ border-color: #3A4F8F; }
.sp-sheet-body{ display: flex; flex-direction: column; gap: 12px; transition: opacity .15s; }
.sp-sheet-body--off{ opacity: .45; }
.drawer--steps .as-row--turbo{ border-color: #1A2650; background: #050A1A; }
.drawer--steps .as-turbo-text b{ font-size: 14px; }
.drawer--steps .as-turbo-text .as-hint-inline{ font-size: 11.5px; }
.drawer--steps .as-switch input:checked + .as-switch-track{ background: #2F6BFF; }
.drawer--steps .as-hint{ margin: -6px 0 0; }

/* ── The target scroller under the quick chips (Limbo Strike's ruler, as in the artifact) ── */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
}

/* ══ The bet panel: Limbo Strike's, on the DriveX kit ══
   Phones: chips, the target scroller, [Auto Play][Bet], the bet stepper. Desktop: one bar,
   chips + scroller on top, the stepper and the two buttons below. */
.sp-slot{ display: flex; flex-direction: column; gap: 8px; min-width: 0; font-family: var(--font-primary); }
.sp-top, .sp-bottom{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sp-bottom{ flex-direction: column-reverse; } /* phones: the buttons above the stepper, as in Limbo */
/* the quick targets: FAST first, then the five */
.sp-tq{ display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-app .sp-tq .sp-fast{ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #DBE4FF; }
.sp-fast i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2A3A6A; }
.sp-fast small{ font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: #FFB238; color: #1E1404; letter-spacing: 0; }
.tr-app .sp-tq .sp-fast.on{ border-color: #FFB238; color: #FFFFFF; background: rgba(255,178,56,.1); box-shadow: 0 0 12px rgba(255,178,56,.25); }
.sp-fast.on i{ background: #FF2A1F; box-shadow: 0 0 8px #FF2A1F, 0 0 3px #FF2A1F; }
.tr-app .sp-tq .sp-fast:disabled{ opacity: .5; }
/* the scroller: Limbo's as-dial */
/* the two buttons: Limbo's .tb row */
.sp-tbrow{ display: flex; gap: 8px; }
.tr-app .sp-tbrow .tb .tb-sub{ font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.tr-app .sp-tbrow .tb svg{ width: 18px; height: 18px; flex: none; }
.tr-app .sp-tbrow .tb--bet-fast{ background: #FFB238; color: #1E1404; }
.tr-app .sp-tbrow .tb--gas{ background: #B81E16; color: #FFFFFF; padding-right: 26px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tr-app .sp-tbrow .tb--gas *{ pointer-events: none; }
.tr-app .sp-tbrow .tb--gas.held{ background: #E8202F; box-shadow: 0 0 22px rgba(255,45,61,.55); }
.tr-app .sp-tbrow .tb--gas .chev{ position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 2px; }
.tr-app .sp-tbrow .tb--gas .chev i{ width: 13px; height: 8px; opacity: .3; background: currentColor; clip-path: polygon(50% 0, 100% 70%, 82% 100%, 50% 45%, 18% 100%, 0 70%); animation: sp-chev 1.4s infinite; }
.tr-app .sp-tbrow .tb--gas .chev i.on{ opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.tr-app .sp-tbrow .tb--gas.held .chev i{ animation-duration: .7s; }
.tr-app .sp-tbrow .tb--apb{ background: #E08A0E; color: #1E1404; }
.tr-app .sp-tbrow .tb--apb .tb-label{ font-weight: 800; }
.tr-app .sp-tbrow .tb--strike{ background: #C27A0C; color: #FFFFFF; }
.tr-app .sp-tbrow .tb--strike .tb-label{ font-weight: 800; }
.tr-app .sp-tbrow .tb--busy{ background: #B81E16; color: #FFFFFF; }
.tr-app .sp-tbrow .tb--dim{ opacity: .7; cursor: default; }
/* the stepper: Limbo's bstep */
@media (max-width: 430px){
  .tr-app .sp-tq .sp-fast{ padding: 0 9px; font-size: 12px; }
}
@media (min-width: 960px){
  .sp-top{ flex-direction: row; align-items: stretch; }
  .sp-tq{ flex: 0 0 auto; grid-template-columns: auto repeat(5, 64px); }
  .sp-bottom{ flex-direction: row; }
  .sp-tbrow{ flex: 1 1 58%; }
}
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .sp-slot, .sp-top, .sp-bottom{ gap: 6px; }
  .tr-app .sp-tq .sp-fast{ padding: 0 8px; font-size: 12px; }
}
:lang(ka) .tr-app .sp-tq .sp-fast{ letter-spacing: 0; font-size: 12px; }
:lang(ka) .tr-app .sp-tbrow .tb .tb-sub{ letter-spacing: 0; font-size: 10px; }
/* the lamps still used in the sheets' save button */
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%), radial-gradient(110% 95% at 50% 58%, #3FD3A5 0%, #11916D 52%, #06503C 100%); box-shadow: 0 0 0 1px #262B36, 0 0 18px rgba(30,230,175,.45), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 16px rgba(0,0,0,.35); }

/* manual mode: Bet alone across the row; Fast: the settings button beside it; the sheet's six-wide rounds row */
.tr-app .sp-tbrow .tb--wide{ flex: 1 1 100%; width: 100%; }
.tr-app .sp-tbrow .tb--bet .tb-sub{ font-size: 10.5px; letter-spacing: .04em; text-transform: none; opacity: .75; }
.drawer--steps .tq.tq--6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-sheet-sec{ display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding-top: 12px; border-top: 1px solid #1A2650; }
.sp-sheet-sec b{ font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; }
.sp-sheet-sec span{ font-size: 12px; line-height: 1.45; color: var(--content-secondary); }

/* clear the Auto Pump target: the hand pump comes back */

/* ── Limbo's components on our panel: only what the kit does not have ── */
.sp-tbrow .tb{ flex: 1 1 50%; width: 50%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sp-tbrow .tb--auto, .sp-tbrow .tb--stop, .sp-tbrow .tb--pl{ flex-direction: row; gap: 8px; }
.tr-app .sp-tbrow .tb .tb-sub{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; line-height: 1; }
.tr-app .sp-tbrow .tb--bet-fast{ background: #FFB238; border-color: #FFB238; }
.tr-app .sp-tbrow .tb--bet-fast .tb-label{ color: #1E1404; }
.tr-app .sp-tbrow .tb--strike{ background: #C27A0C; border-color: #C27A0C; }
.tr-app .sp-tbrow .tb--strike .tb-label, .tr-app .sp-tbrow .tb--strike .tb-sub{ color: #FFFFFF; }
.tr-app .sp-tbrow .tb--gas{ background: #B81E16; border-color: #B81E16; padding-right: 26px; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: background .12s, box-shadow .12s; }
.tr-app .sp-tbrow .tb--gas .tb-label, .tr-app .sp-tbrow .tb--gas .tb-sub{ color: #FFFFFF; }
.tr-app .sp-tbrow .tb--gas *{ pointer-events: none; }
.tr-app .sp-tbrow .tb--gas.held{ background: #E8202F; box-shadow: 0 0 22px rgba(255,45,61,.55); }
.tr-app .sp-tbrow .tb--gas .chev{ position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 2px; }
.tr-app .sp-tbrow .tb--gas .chev i{ width: 13px; height: 8px; opacity: .3; background: currentColor; clip-path: polygon(50% 0, 100% 70%, 82% 100%, 50% 45%, 18% 100%, 0 70%); animation: sp-chev 1.4s infinite; }
.tr-app .sp-tbrow .tb--gas .chev i.on{ opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.tr-app .sp-tbrow .tb--gas.held .chev i{ animation-duration: .7s; }
.tr-app .sp-tbrow .tb--apb{ background: #E08A0E; border-color: #E08A0E; }
.tr-app .sp-tbrow .tb--apb .tb-label{ color: #1E1404; }
.tr-app .sp-tbrow .tb--auto-run{ background: #C4241A; border-color: #C4241A; padding-right: 10px; }
.tr-app .sp-tbrow .tb--auto-run .tb-label, .tr-app .sp-tbrow .tb--auto-run .tb-sub{ color: #FFFFFF; }
.tr-app .sp-tbrow .tb--busy{ background: #B81E16; border-color: #B81E16; }
.tr-app .sp-tbrow .tb--busy .tb-label{ color: #FFFFFF; }
.tr-app .sp-tbrow .tb--dim{ opacity: .7; cursor: default; }
.tr-app .sp-tbrow .tb--wide{ flex: 1 1 100%; width: 100%; }
/* the FAST chip in Limbo's chip row */
.sp-tq{ grid-template-columns: auto repeat(5, minmax(0, 1fr)); }
.tr-app .sp-tq .sp-fast{ display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; letter-spacing: .08em; text-transform: uppercase; }
.sp-fast i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2A3A6A; }
.sp-fast small{ font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: #FFB238; color: #1E1404; letter-spacing: 0; }
.tr-app .sp-tq .sp-fast.on{ border-color: #FFB238; color: #FFFFFF; background: rgba(255,178,56,.12); box-shadow: 0 0 12px rgba(255,178,56,.25); }
.sp-fast.on i{ background: #FF2A1F; box-shadow: 0 0 8px #FF2A1F, 0 0 3px #FF2A1F; }
.sp-bstep{ position: relative; }
.sp-bstep .bp{ left: 0; right: auto; bottom: calc(100% + 8px); width: 340px; max-width: calc(100vw - 32px); }
.sp-bs-act{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.sp-bs-act .pf-btn{ width: 100%; margin: 0; }
/* the header on the full-bleed stage */
.tr-app--crash .th{ padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
@media (min-width: 960px){ .tr-app--crash .th{ padding-left: 24px; padding-right: 24px; } .tr-app--crash .ch-top{ padding-left: 24px; padding-right: 24px; } }
/* desktop bar: the chips at Limbo's 66px, the stepper and the two buttons half and half */
@media (min-width: 960px){
  .sp-tq{ flex: 0 0 auto; grid-template-columns: auto repeat(5, 66px); }
  .sp-bstep{ flex: 1 1 50%; }
  .sp-tbrow{ flex: 1 1 50%; }
}

/* ---------- Carnival: one starry night behind the whole game. The stage paints its own sky (the machine art needs it),
   the header and the bet panel let the night through. ---------- */
.tr-app.tr-app--crash{ position: relative; isolation: isolate; background: linear-gradient(180deg, #000516 0%, #000516 12%, #000A1E 60%, #000A1E 100%); }
.sp-night{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.tr-app--crash .tr-right.tr-right--slots, .tr-app--crash .tr-right.tr-right--slots.tr-right--slot1{ background: transparent; }

/* ---------- Carnival loader: the stage itself (night, bunting, the drawn pump) instead of the poster. START pumps the first balloon up. ---------- */
.loading-screen.sp-loader{ background: linear-gradient(180deg, #000516 0%, #000A1E 100%); }
.sp-load-stage{ position: absolute; inset: 0; }
.sp-load-stage canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Desktop (user, 11 Nov): the panel is a console under the pump, not a bar across the whole window.
   Statistics runs the full height on the right; the panel is capped and centred on the stage's axis,
   the targets fill its top row, the stepper is as wide as an amount needs and the buttons take the rest. ---------- */
@media (min-width: 960px){
  .tr-app--crash .tr-body{ display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px); grid-template-rows: minmax(0, 1fr) auto; }
  .tr-app--crash .tr-left, .tr-app--crash .tr-stage{ display: contents; }
  .tr-app--crash .tr-stage .tr-chartrow{ grid-column: 1; grid-row: 1; width: auto; min-width: 0; min-height: 0; }
  .tr-app--crash .st-side{ grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .tr-app--crash .tr-right.tr-right--slots, .tr-app--crash .tr-right.tr-right--slots.tr-right--slot1{ grid-column: 1; grid-row: 2; align-items: center; padding-top: 10px; padding-bottom: 16px; }
  .sp-slot{ box-sizing: border-box; max-width: 792px; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(10,17,40,.72); border: 1.5px solid #18244A; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .sp-bottom:empty{ display: none; }
  .sp-top .sp-tq{ flex: 1 1 auto; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 8px; }
  .tr-app .sp-tq .tq-btn{ height: 40px; font-size: 15px; }
  .sp-bottom{ gap: 10px; }
  .sp-bstep{ flex: 0 0 310px; }
  .sp-tbrow{ flex: 1 1 auto; gap: 10px; }
}
/* the logo hangs clear of the bunting (user, 11 Nov) */
.loading-screen .sp-load-logo{ top: max(12vh, 84px); }
@media (min-aspect-ratio: 3/4){ .loading-screen .sp-load-logo{ top: max(9vh, 56px); } }
@media (max-height: 540px){ .loading-screen .sp-load-logo{ top: 34px; } }