/* ── 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; } }
/* the loading bar fills while the game opens (the keyframes were missing: the bar stayed empty) */
@keyframes dxl-fill{ to{ width: 100%; } }

/* Fast hidden (FAST_ENABLED = false): the target row is just its five buttons, evenly */
.tr-app .sp-tq.sp-tq--nofast{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ═══ Carnival kit: one panel for Strike Pump, Dart Strike, Axe Strike and Balloon Strike. This file is the same in
   all four repos: change it in one and copy it to the other three. ═══ */
/* Cashout / Finish: solid blue as soon as it can be taken */
.tr-app .sp-tbrow .tb--cash-on{ background: #1F4CC6; border-color: #3D7BFF; box-shadow: 0 0 18px rgba(55,115,255,.45); }
.tr-app .sp-tbrow .tb--cash-on .tb-label{ color: #FFFFFF; font-weight: 800; }
/* chips inside the panel (Pump's targets, like the HIT / PICK cells): a dark card with a blue-grey edge, the chosen one gold */
.tr-app .sp-tq .tq-btn{ height: 42px; border-radius: 10px; border: 1.5px solid #23346A; background: #101A3A; color: #FFFFFF; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); font-weight: 800; font-size: 17px; box-shadow: none; }
.tr-app .sp-tq .tq-btn.tq-btn--on{ background: radial-gradient(110% 95% at 50% 58%, #F4B43C 0%, #C27A0C 55%, #5E2C03 100%); border-color: #0B0E14; color: #FFFFFF; text-shadow: 0 1px 2px rgba(70,30,0,.65); box-shadow: inset 0 0 10px rgba(255,220,140,.35); }
.tr-app .sp-tq .tq-btn:disabled{ opacity: .45; }
@media (hover: hover){ .tr-app .sp-tq .tq-btn:hover:not(:disabled):not(.tq-btn--on){ border-color: #3D7BFF; background: #14224A; } }
@media (max-height: 640px) and (max-width: 767px){ .tr-app .sp-tq .tq-btn{ height: 38px; } }
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){ .tr-app .sp-tq .tq-btn{ height: 36px; font-size: 15px; } }

/* ═══ Carnival dress (12 Nov 2026): the panel, its buttons and every sheet and modal wear the booth's look from the
   stage: gold trim, a string of marquee bulbs, a red and cream awning stripe, arcade buttons. ═══ */
:root{ --cv-gold: #F4B43C; --cv-gold-d: #C27A0C; --cv-trim: #8A5A18; --cv-red: #D42330; --cv-cream: #FFE8C0;
  --cv-stripe: repeating-linear-gradient(90deg, var(--cv-red) 0 14px, var(--cv-cream) 14px 28px); }
@keyframes cv-chase{ to{ background-position-x: 24px; } }
/* the bulbs: every other one lit, swapping like a marquee */
.cv-bulbs, .sp-slot::before{
  background:
    radial-gradient(circle at 6px 6px, #FFFBEA 0 1.8px, #FFC84E 3px, rgba(255,176,46,.38) 4.4px, transparent 6px),
    radial-gradient(circle at 18px 6px, #8E6224 0 2px, #5A3C16 3px, transparent 3.6px);
  background-size: 24px 12px; background-repeat: repeat-x;
  animation: cv-chase 1.6s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce){ .cv-bulbs, .sp-slot::before{ animation: none; } }

/* the panel: phones get a gold wire with the bulbs on it across its top; from 960px it is a booth counter with a gold trim */
.sp-slot{ position: relative; }
.sp-slot::before{ content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 12px; pointer-events: none; z-index: 1; }
.sp-slot::after{ content: ""; position: absolute; left: 0; right: 0; top: 5.25px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--cv-trim) 6%, var(--cv-trim) 94%, transparent); pointer-events: none; }
@media (max-width: 959px){ .sp-slot{ padding-top: 16px; } }
@media (min-width: 960px){
  .sp-slot{ border: 2px solid #A8701E; background: rgba(10,17,40,.82); box-shadow: inset 0 0 0 1px rgba(255,196,80,.14), 0 0 26px rgba(255,170,40,.08), 0 10px 30px rgba(0,0,0,.4); padding-top: 18px; }
  .sp-slot::before{ left: 22px; right: 22px; top: -7px; }
  .sp-slot::after{ display: none; }
}

/* arcade buttons: a lit top edge and a pressed-in bottom on every coloured button of the panel and the sheets */
.sp-tbrow .tb, .fbw-btn, .fbs-btn, .htp-start, .drawer .tl--green, .drawer .ap-go{
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.26), 0 2px 0 rgba(0,0,0,.4);
}
.tr-app .sp-tbrow .tb-label{ text-shadow: 0 1px 0 rgba(0,0,0,.28); }
.tr-app .sp-tbrow .tb--bet .tb-label, .tr-app .sp-tbrow .tb--auto-go .tb-label{ text-shadow: 0 1px 0 rgba(255,255,255,.25); }
/* the dark buttons keep it flat, only the trim */
.tr-app .sp-tbrow .tb--cashout:not(.tb--cash-on), .tr-app .sp-tbrow .tb--auto, .tr-app .sp-tbrow .bs-hint{ box-shadow: none; }
.tr-app .sp-tbrow .tb--cash-on{ box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.26), 0 0 18px rgba(55,115,255,.45); }

/* sheets and modals: the awning stripe across the top, the title in the sign font, a gold hairline under the header */
.drawer{ background-image: var(--cv-stripe); background-size: 100% 5px; background-repeat: no-repeat; background-position: top; }
.drawer::before{ margin-top: 11px; }
.drawer-header{ border-bottom: 1px solid rgba(244,180,60,.22); }
.drawer-title{ font-family: "Russo One", "Arial Black", sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .02em; color: #FFFFFF; }
.modal{ border: 1.5px solid var(--cv-trim); background-image: var(--cv-stripe); background-size: 100% 6px; background-repeat: no-repeat; background-position: top; padding-top: 30px; }
.modal h2{ font-family: "Russo One", "Arial Black", sans-serif; font-weight: 400; letter-spacing: .01em; }
/* How to Play cards: a gold hairline frame, the step number gold */
.htp-card{ border-color: rgba(244,180,60,.3); }
.htp-n{ color: var(--cv-gold); }
.htp-dot--on{ background: var(--cv-gold) !important; }

/* ═══ Sheets below 960px (12 Nov 2026). The game switches to its phone layout under 960px, but the kit had three
   steps of its own: full width only up to 480px, a 480px strip from there to 680px, and a small centred card from
   681px (a phone on its side, a tablet, a 600-900px window) capped at 70% of the height. Now everything under 960px
   gets the same sheet: it slides up from the bottom across the full width. From 960px it is the desktop card. ═══ */
@media (max-width: 959px){
  .drawer-backdrop{ align-items: flex-end; }
  .drawer, .drawer--htp{ width: 100%; max-width: none; border-radius: 16px 16px 0 0; border-bottom: 0; transform: translateY(100%); opacity: 1; transition: transform .25s ease; }
  .drawer-backdrop.show .drawer{ transform: translateY(0); }
  .drawer-header{ border-radius: 16px 16px 0 0; }
  .drawer-content{ border-radius: 0; }
}
@media (min-width: 681px) and (max-width: 959px){ .drawer, .drawer--htp{ max-height: 85dvh; } .drawer::before{ display: block; } }
/* a short landscape phone: the sheet may take nearly all the height, and How to Play puts its picture beside the text */
@media (orientation: landscape) and (max-height: 540px){
  .drawer, .drawer--htp{ max-height: 94dvh; }
  .htp-card{ flex-direction: row; align-items: center; gap: 14px; }
  .htp-card .htp-art{ flex: 0 0 min(46%, 340px); }
  .htp-card .htp-text{ flex: 1 1 auto; min-width: 0; }
}

/* the HIT / PICK ladder scrolls sideways (wheel and drag with a mouse, a swipe on touch): it fades only on the side that
   has more cells, the cursor says it can be pulled, and a focused cell's ring sits inside it so the row does not cut it */
.sp-slot .ds-lad{ -webkit-mask-image: none; mask-image: none; }
.sp-slot .ds-lad.cv-r{ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%); }
.sp-slot .ds-lad.cv-l{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); }
.sp-slot .ds-lad.cv-l.cv-r{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
@media (hover: hover) and (pointer: fine){ .sp-slot .ds-lad.cv-l, .sp-slot .ds-lad.cv-r{ cursor: grab; } .sp-slot .ds-lad.cv-drag{ cursor: grabbing; } }
.sp-slot .ds-lad.cv-drag{ user-select: none; -webkit-user-select: none; }
.sp-slot .ds-lad .ds-st:focus-visible{ outline-offset: -3px; }

/* ═══ Win celebration (winfx.js): Big 10x, Mega 25x, Epic 100x, Max at the cap. It covers the stage only, so the panel
   stays usable; a tap or Space / Enter skips. A marquee sign with chasing bulbs, rays, confetti, fireworks, spotlights. ═══ */
.cw{ position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; opacity: 0; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.cw.cw--in{ opacity: 1; }
.cw.cw--out{ opacity: 0; transition-duration: .3s; pointer-events: none; }
.cw--auto{ pointer-events: none; }
.cw--big{ --cw-ray: rgba(255,200,80,.9); --cw-sign: radial-gradient(120% 140% at 50% 0%, #22306A 0%, #0B1230 72%); --cw-edge: #F4B43C; --cw-glow: rgba(255,190,60,.5); --cw-title: #FFD34A; --cw-ts: #6A3A06; }
.cw--mega{ --cw-ray: rgba(255,96,96,.9); --cw-sign: linear-gradient(rgba(56,6,12,.62), rgba(36,4,10,.8)), repeating-linear-gradient(90deg, #C81E2B 0 26px, #F3DDB4 26px 52px); --cw-edge: #FFD34A; --cw-glow: rgba(255,84,84,.55); --cw-title: #FFFFFF; --cw-ts: #8A0C16; }
.cw--epic{ --cw-ray: rgba(204,128,255,.9); --cw-sign: radial-gradient(120% 140% at 50% 0%, #4E1C80 0%, #1A0838 75%); --cw-edge: #FFD34A; --cw-glow: rgba(190,110,255,.6); --cw-title: #FFE36A; --cw-ts: #3A0A5E; }
.cw--max{ --cw-ray: rgba(255,222,120,.95); --cw-sign: radial-gradient(120% 140% at 50% 0%, #7A1414 0%, #2A0606 75%); --cw-edge: #FFE36A; --cw-glow: rgba(255,210,90,.65); --cw-title: #FFFFFF; --cw-ts: #A0700C; }
.cw-dim{ position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(6,10,28,.5), rgba(2,4,12,.9)); }
.cw-rays{ position: absolute; left: 50%; top: 45%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; opacity: .22; background: repeating-conic-gradient(from 0deg, var(--cw-ray) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 34%); mask-image: radial-gradient(circle, #000 0, transparent 34%); animation: cw-spin 22s linear infinite; transition: background .3s; }
.cw-beams{ position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.cw--epic .cw-beams, .cw--max .cw-beams{ opacity: 1; }
.cw-beams i{ position: absolute; bottom: -12%; width: 36%; height: 150%; background: linear-gradient(to top, rgba(255,240,205,.34), rgba(255,240,205,0) 82%); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); transform-origin: 50% 100%; }
.cw-beams i:first-child{ left: 4%; animation: cw-sweep 3.4s ease-in-out infinite alternate; }
.cw-beams i:last-child{ right: 4%; animation: cw-sweep 3.4s ease-in-out infinite alternate-reverse; }
.cw-fx{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.cw-sign{ position: relative; z-index: 2; box-sizing: border-box; min-width: min(80%, 460px); max-width: 92%; padding: 24px 30px 18px; border-radius: 22px; text-align: center; background: var(--cw-sign); border: 3px solid var(--cw-edge); box-shadow: 0 0 0 6px rgba(0,0,0,.5), 0 0 44px var(--cw-glow), inset 0 0 34px rgba(0,0,0,.5); opacity: 0; }
.cw--in .cw-sign{ animation: cw-pop .6s cubic-bezier(.2,1.45,.4,1) both; }
.cw--in .cw-sign.cw-pop{ animation: cw-bump .45s cubic-bezier(.2,1.6,.4,1) both; }
.cw-bulbs{ position: absolute; inset: -13px; border-radius: 28px; pointer-events: none;
  --cw-b: radial-gradient(circle, #FFF8DC 0 2.2px, #FFC84E 3.4px, rgba(255,180,50,.4) 5px, transparent 6.6px);
  background: var(--cw-b) 0 0 / 24px 14px repeat-x, var(--cw-b) 0 100% / 24px 14px repeat-x, var(--cw-b) 0 0 / 14px 24px repeat-y, var(--cw-b) 100% 0 / 14px 24px repeat-y;
  animation: cw-blink .5s steps(1) infinite; }
.cw-bulbs--b{ background-position: 12px 0, 12px 100%, 0 12px, 100% 12px; animation-delay: -.25s; }
.cw-title{ font-family: "Russo One", "Arial Black", sans-serif; font-size: clamp(30px, 8vw, 66px); line-height: 1.05; letter-spacing: .02em; color: var(--cw-title); white-space: nowrap; transform: skewX(-8deg);
  text-shadow: 0 4px 0 var(--cw-ts), -2px -2px 0 var(--cw-ts), 2px -2px 0 var(--cw-ts), -2px 2px 0 var(--cw-ts), 2px 2px 0 var(--cw-ts), 0 0 22px var(--cw-glow); }
:lang(ka) .cw-title{ font-size: clamp(24px, 6.4vw, 54px); }
.cw-amt{ margin-top: 10px; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); font-weight: 800; font-size: clamp(30px, 8.5vw, 58px); line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0,0,0,.55); }
.cw-x{ margin-top: 6px; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); font-weight: 800; font-size: clamp(15px, 3.6vw, 20px); letter-spacing: .06em; color: var(--cw-edge); opacity: .9; }
.cw--landed .cw-amt{ animation: cw-land .5s cubic-bezier(.2,1.6,.4,1); color: #FFE9A8; }
.cw-skip{ position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (max-width: 430px){ .cw-sign{ padding: 18px 18px 14px; min-width: 84%; } .cw-bulbs{ inset: -11px; } }
@media (orientation: landscape) and (max-height: 540px){ .cw-sign{ padding: 14px 22px 12px; } .cw-title{ font-size: clamp(26px, 6vh, 44px); } .cw-amt{ font-size: clamp(26px, 8vh, 42px); margin-top: 6px; } }
@keyframes cw-spin{ to{ transform: rotate(360deg); } }
@keyframes cw-sweep{ from{ transform: rotate(-24deg); } to{ transform: rotate(24deg); } }
@keyframes cw-blink{ 0%{ opacity: 1; } 50%{ opacity: .22; } }
@keyframes cw-pop{ 0%{ opacity: 0; transform: scale(.3); } 100%{ opacity: 1; transform: scale(1); } }
@keyframes cw-bump{ 0%{ opacity: 1; transform: scale(1.16); } 100%{ opacity: 1; transform: scale(1); } }
@keyframes cw-land{ 0%{ transform: scale(1.22); } 100%{ transform: scale(1); } }
.cw--still .cw-rays, .cw--still .cw-beams i, .cw--still .cw-bulbs{ animation: none; }
.cw--still.cw--in .cw-sign, .cw--still.cw--in .cw-sign.cw-pop{ animation: none; opacity: 1; }