/* ── DriveX skin ──
   Loaded after trade.css. Re-points the trading-terminal tokens to the DriveX
   palette: black and charcoal surfaces, one blood red for the action and the
   crash, green for the win. Two faces: Russo One for the display (logo,
   multiplier), Barlow Condensed for everything else. Drawers, modals and
   toasts follow through the shared tokens. */
@font-face{ font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/RussoOne-400.woff2') format('woff2'); }
@font-face{ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face{ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face{ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face{ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/BarlowCondensed-800.woff2') format('woff2'); }

:root{
  --dx-display: 'Russo One', 'Arial Black', Impact, sans-serif;
  --dx-ui: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-primary: var(--dx-ui);
  --font-mono: var(--dx-ui);
  --tr-bg: #02040A;
  --tr-bg-2: #0A1128;
  --tr-panel: #070C1C;
  --tr-panel-2: #101A3A;
  --tr-field: #050A1A;
  --tr-border: #1C2A52;
  --tr-border-2: #23346A;
  --tr-text: #FFFFFF;
  --tr-muted: #8792B4;
  --tr-dim: #5A6690;
  --tr-green: #33E07E;
  --tr-green-rgb: 51, 224, 126;
  --tr-red: #FF1A14;
  --tr-red-rgb: 255, 26, 20;
  /* the accent (Bet, auto cashout, active controls): the electric blue of the night look; red = car, crash, logo */
  --tr-blue: #2F6BFF;
  --tr-blue-rgb: 47, 107, 255;
  --tr-radius: 8px;
  /* Night Blue tokens (design spec §2, 30 Oct) */
  --bg: #0A1128; --bg-secondary: #0A1128; --surface-default: #0B1124; --surface-overlay: #0A1128; --border-default: #1C2A52; --border-strong: #23346A;
  --content-secondary: #C9D4F5; --content-tertiary: #7F8BB0; --content-disabled: #46507A; --shadow-neutral: #02040A;
}
:root.brand-mybc{
  --surface-raised: #101A3A;
  --content-secondary: #C9D4F5;
  --brand-secondary: #FF4A45;
  --brand-highlight: #FF7A76;
  --brand-border: #B5120E;
  --action-primary: var(--tr-green);
  --action-secondary: #22B864;
  --status-success-strong: #22B864;
}
html, body, .tr-app, .tr-app button, .tr-app input, .drawer, .modal, .modal-overlay, .loading-screen, .se-overlay{ font-family: var(--dx-ui); }
.tr-app{ background: var(--tr-bg); }
.tr-app :focus-visible{ outline-color: #FFFFFF; }
/* blue tints in trade.css → white / soft red */
.ch-chip--mid{ color: #FFFFFF; background: rgba(255,255,255,.08); }
.ch-chip--hi{ color: #FFFFFF; background: var(--tr-blue); }
.ac--on .ac-label{ color: #9DB6FF; }
.tr-app .tb.tb--cancel .tb-label, .tr-app .tb.tb--cancel .tb-k{ color: #FF8A86; }
.th-balance--down{ color: #FF8A86; }
.st-bar i, .st-zone:first-child .st-bar i{ background: linear-gradient(90deg, #8A8A94, #E6E6EC); }
.pfx-res div:last-child b, .hx-win, .pl-r--won .pl-x{ color: var(--tr-green); }

/* ── Wordmark ── */
.dx-logo{
  display: inline-block; font-family: var(--dx-display); font-weight: 400; line-height: 1; letter-spacing: 0;
  color: #FFFFFF; transform: skewX(-8deg); text-shadow: 2px 2px 0 var(--tr-red); text-transform: uppercase; white-space: nowrap;
}
.dx-logo b{ font-weight: 400; color: var(--tr-red); text-shadow: 2px 2px 0 #FFFFFF; }
.th-logo .dx-logo{ font-size: 24px; }
.loading-wordmark .dx-logo{ font-size: clamp(60px, 20vw, 104px); line-height: .9; text-shadow: 5px 5px 0 var(--tr-red); }
.loading-wordmark .dx-logo b{ text-shadow: 5px 5px 0 #FFFFFF; }
.fr-wordmark .dx-logo, .se-logo--text .dx-logo{ font-size: 32px; }
@media (min-width: 960px){ .th-logo .dx-logo{ font-size: 26px; } }
.wm-badge{ animation: none; }

/* ── Scene ── */
.dx{ background: #000; border-radius: 0; overflow: hidden; }
.dx .tc-canvas{ touch-action: pan-y; }
.dx .cc-center{ top: 6%; transform: none; gap: 4px; }
.dx .cc-kicker{ font-size: 13px; font-weight: 800; letter-spacing: .26em; color: #FFFFFF; }
.dx .cc-num{
  font-family: var(--dx-display); font-weight: 400; letter-spacing: 0; line-height: 1;
  font-size: clamp(34px, 5.6vw, 48px); color: #FFFFFF; transform: skewX(-8deg);
  text-shadow: 3px 3px 0 var(--tr-blue);
}
@media (max-width: 599px){ .dx .cc-num{ font-size: clamp(30px, 9.6vw, 40px); } }
.dx .cc--betting .cc-num{ display: block; font-size: clamp(24px, 4vw, 34px); text-shadow: none; }
.dx .cc--betting.cc--last .cc-num{ color: var(--tr-red); }
.dx .cc-kicker{ font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.75); }
.dx .cc-bar{ display: none !important; }
.dx .cc--betting .cc-kicker{ color: #FFFFFF; }
.dx .cc-bar{ width: 170px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.dx .cc-bar i{ background: #FFFFFF; }
.dx .cc-bar--last i{ background: var(--tr-red); }
.dx .cc--crashed .cc-kicker{ color: var(--tr-red); }
.dx .cc--crashed .cc-num{ color: var(--tr-red); text-shadow: 4px 4px 0 #FFFFFF; animation: cc-crash .45s var(--tr-ease); }
@media (max-height: 620px){ .dx .cc-num{ font-size: clamp(40px, 12vh, 72px); } }
.dx .rt{ border-radius: 6px; top: calc(100% + 10px); bottom: auto; }
.dx-fps{ position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #FFFFFF; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.tr-chartrow{ border: 0; }
.ch-room{ pointer-events: auto; border: 0; font-family: inherit; cursor: pointer; }
.ch-room svg{ color: var(--tr-green); }
@media (hover: hover){ .ch-room:hover{ background: rgba(255,255,255,.1); } }

/* ── Controls: the bet panel is docked below the road, red top rule ── */
.tr-app .tb{ height: 56px; border-radius: 10px; background: var(--tr-blue); box-shadow: none; }
.tr-app .tb .tb-label, .tr-app .tb .tb-k, .tr-app .tb .tb-v{ color: #FFFFFF; }
.tr-app .tb-k{ letter-spacing: .14em; }
.tr-app .tb-v{ font-size: 21px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tr-app .tb.tb--ghost, .tr-app .tb.tb--cancel, .tr-app .tb.tb--done{ background: var(--tr-panel-2); border: 1px solid var(--tr-border); }
.tr-app .tb.tb--done{ background: #13261A; border-color: #13261A; }
.tr-app .tb.tb--done .tb-k, .tr-app .tb.tb--done .tb-v{ color: var(--tr-green); }
.tr-app .tb.tb--cancel .tb-v{ color: #FFFFFF; }
.tr-app .tb--go{ background: var(--tr-blue); }
.tr-app .tb--free{ background: var(--tr-green); }
.tr-app .tb--free .tb-k, .tr-app .tb--free .tb-v{ color: #04140A; }
/* flying: one green pill split in two (50% | Cashout), as in the other games; dark text */
.tbs{ height: 56px; border-radius: 10px; background: var(--tr-panel-2); }
.tbs-half{ background: var(--tr-green); box-shadow: none; }
.tr-app .tbs-half{ color: #04140A; }
.tbs-half:first-child{ background: #2BCB70; }
.tbs-half + .tbs-half{ box-shadow: -1px 0 0 rgba(4,20,10,.35); }
.tbs .tbs-half--done{ background: #13261A; color: var(--tr-green); opacity: 1; }
.tbs .tbs-half--off{ background: var(--tr-panel-2); color: var(--tr-dim); opacity: 1; }
/* the amounts on the split button read at a glance: black, bigger, the label above them */
.tr-app .tbs-k, .tr-app .tbs--mini .tbs-k, .tr-right .bslot .tbs-k{ font-size: 11px; letter-spacing: .12em; opacity: .8; color: #000; }
.tr-app .tbs-v, .tr-app .tbs--mini .tbs-v, .tr-right .bslot .tbs-v{ font-size: 18px; font-weight: 800; color: #000; }
.tr-right--two .tbs-v{ font-size: 16px; }
.tr-app .tbs-half:disabled{ opacity: .75; }
.tr-app .tb--cashout .tb-k, .tr-app .tb--cashout .tb-v, .tr-app .tb--free .tb-k, .tr-app .tb--free .tb-v{ color: #000; }
.tr-app .tb--cashout .tb-v{ font-size: 22px; }
.tr-app .tb--cashout{ background: var(--tr-green); }
.tr-app .tb--cashout .tb-k, .tr-app .tb--cashout .tb-v{ color: #04140A; }
.tr-app .tb--cashout:disabled{ filter: none; background: #13261A; }
.tr-app .tb--cashout:disabled .tb-k, .tr-app .tb--cashout:disabled .tb-v{ color: var(--tr-green); }
.bstep-field, .ac, .bstep-btn{ border-radius: 8px; border-color: var(--tr-border); background: transparent; }
.bstep-adj{ background: var(--tr-panel-2); font-size: 20px; font-weight: 700; }
.bstep-amount{ font-size: 19px; font-weight: 800; }
.bstep-btn{ font-weight: 700; }
.ac--on{ background: rgba(var(--tr-blue-rgb), .12); border-color: rgba(var(--tr-blue-rgb), .45); }
.as-switch-track{ background: #1A2547; }
.as-switch input:checked + .as-switch-track{ background: var(--tr-blue); }
.th-balance{ border-radius: 6px; font-size: 17px; font-weight: 700; }
.th-cur{ font-size: 12px; letter-spacing: .08em; }
.th-menu-btn{ border-radius: 6px; }
.fr-bar{ border-radius: 8px; }

/* ── Live bets (the room), desktop side panel + phone drawer ── */
.st-side-tabs{ display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.04); }
.st-side-tab{
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 7px;
  background: transparent; color: var(--tr-muted); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.st-side-tab svg{ width: 14px; height: 14px; }
.st-side-tab--on{ background: var(--tr-panel-2); color: var(--tr-text); }
.st-side-tab--on svg{ color: var(--tr-blue); }
.st-side{ display: flex; flex-direction: column; min-height: 0; }
.pl{ display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.pl-sum{ display: flex; justify-content: space-between; font-size: 12px; color: var(--tr-muted); font-weight: 600; }
.pl-sum-k{ display: inline-flex; align-items: center; gap: 5px; }
.pl-sum-k svg{ width: 13px; height: 13px; color: var(--tr-green); }
.pl-tot{ display: flex; flex-direction: column; gap: 4px; }
.pl-tot-r{
  display: grid; grid-template-columns: 44px 1fr 1fr; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px;
  background: rgba(255,255,255,.035); font-size: 11.5px; color: var(--tr-muted); font-variant-numeric: tabular-nums;
}
.pl-tot-r b{ color: var(--tr-text); font-weight: 700; }
.pl-tot-r b.pos{ color: var(--tr-green); }
.pl-cur{ font-weight: 800; color: var(--tr-text); letter-spacing: .04em; }
.pl-head, .pl-r{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.pl-head{ padding: 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tr-dim); }
.pl-head span:not(:first-child), .pl-r span:not(:first-child){ text-align: right; }
.pl-list{ display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; }
.pl-r{
  min-height: 30px; padding: 0 8px; border-radius: 7px; background: rgba(255,255,255,.025);
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tr-text); animation: tr-pop .25s var(--tr-ease);
}
.pl-r span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-name{ font-weight: 600; color: #CFCFD6; }
.pl-x, .pl-win{ color: var(--tr-muted); }
.pl-r--won{ background: rgba(var(--tr-green-rgb), .09); }
.pl-r--won .pl-x, .pl-r--won .pl-win{ color: var(--tr-green); font-weight: 700; }
.pl-r--lost{ opacity: .45; }
.pl-r--me{ box-shadow: inset 2px 0 0 var(--tr-blue); }
.pl-you{ display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--tr-blue); vertical-align: middle; }
.pl-r--me .pl-name{ color: #FFFFFF; font-weight: 700; }
.pl-empty{ margin: 12px 0; text-align: center; font-size: 12px; color: var(--tr-dim); }
.drawer--players .drawer-content{ display: flex; flex-direction: column; max-height: 70dvh; }
.drawer--players .pl-list{ max-height: 52dvh; }

/* ── Loading: black stage, the car, START ENGINE ── */
.loading-screen{ background: #000; }
.loading-screen::before, .loading-screen::after{ display: none; }
.loading-car{ display: block; width: min(88%, 520px); height: auto; margin: 18px auto 14px; filter: drop-shadow(0 10px 22px rgba(63,109,255,.35)); }
.loading-car--rumble{ animation: dx-rumble .09s infinite; }
@keyframes dx-rumble{ 50%{ transform: translate(.6px, -.8px); } }
.loading-bar{ background: var(--tr-blue); box-shadow: none; }
.loading-bar::after{ display: none; }
.loading-text{ color: var(--tr-muted); font-weight: 600; letter-spacing: .24em; font-size: 13px; text-transform: uppercase; }
.ld-actions{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.ld-ign{
  display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 34px; border-radius: 30px;
  border: 2px solid var(--tr-blue); background: rgba(63,109,255,.14); color: #FFFFFF; font-family: var(--dx-ui);
  font-weight: 800; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.ld-ign i{ width: 12px; height: 12px; border-radius: 50%; background: var(--tr-blue); box-shadow: 0 0 12px var(--tr-blue); animation: dx-blink 1.2s infinite; }
@keyframes dx-blink{ 50%{ opacity: .25; } }
.ld-ign:active{ transform: scale(.98); }
.ld-mute{ background: none; border: 0; color: var(--tr-muted); font-family: var(--dx-ui); font-size: 14px; letter-spacing: .1em; text-decoration: underline; cursor: pointer; }
.ld-bar{ width: 200px; height: 4px; margin: 10px auto 12px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.ld-bar i{ display: block; height: 100%; width: 0; background: var(--tr-blue); animation: dx-fill 2.6s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes dx-fill{ to{ width: 100%; } }
@media (prefers-reduced-motion: reduce){ .loading-car--rumble, .ld-ign i{ animation: none; } }

/* ── Modals and drawers: charcoal, no tint, and no red inside them ── */
.modal, .drawer, .th-menu, .bsheet, .nsheet{
  background: var(--tr-panel); border-color: var(--tr-border-2);
  --brand-rgb: 255, 255, 255; --brand-primary: #FFFFFF; --accent: #FFFFFF; --hairline: var(--tr-border-2);
  --tr-blue: #FFFFFF; --tr-blue-rgb: 255, 255, 255;
}
.modal{ box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.drawer{ box-shadow: 0 -18px 50px rgba(0,0,0,.55); }
.pfx-step > i, .htp-n, .cc-pop-fair, .pf-step-icon{ color: #FFFFFF; }
.pfx-step > i, .pf-step-icon{ background: rgba(255,255,255,.1); }
.modal--fr{ border: 1px solid var(--tr-border-2); }
.modal .st-tab--on, .drawer .st-tab--on{ border-color: var(--tr-border-2); }

/* ── Order bar: one clean row on desktop, tight rows on phones ── */
.tr-app .tb:disabled{ filter: none; opacity: .45; }
.tr-right{ gap: 8px; }
.tr-right .fr-bar{ margin: 0; min-height: 38px; padding: 0 12px; }
/* phones: add a second bet = a full-width row under the panel */
.bslot-addrow{
  grid-area: add; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border: 1px solid var(--tr-border); border-radius: 8px;
  background: transparent; color: var(--tr-muted); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bslot-addrow svg{ width: 16px; height: 16px; }
@media (min-width: 960px){ .bslot-addrow{ display: none; } }
@media (max-width: 959px){
  .tr-right--one .bslot{ grid-template-areas: "step act" "acx act" "add add"; }
  .tr-right--one .bslot .bstep{ grid-template-columns: minmax(0, 1fr); }
  .tr-right--one .cb-row{ align-self: stretch; }
  .tr-right--one .cb-row .tb{ height: 100%; min-height: 56px; }
}
@media (min-width: 960px){
  /* the order panel is a card like the sidebar: set apart from the road and the live bets (user, 28 Oct) */
  .tr-right{ padding: 12px; border: 1px solid var(--tr-border); border-radius: 12px; background: var(--tr-field); box-shadow: none; align-items: center; gap: 8px; }
  .tr-right .fr-bar{ grid-column: 1 / -1; }
  .tr-right .bstep, .tr-right .ac, .tr-right .ac-row, .tr-right .tb, .tr-right .tbs{ height: 56px; }
  .tr-right--one .bstep{ grid-template-columns: 1fr 46px 46px 46px; } /* amount, ½, 2×, add a second bet: as in the other games */
}
.fbs-btn, .fbw-btn{ background: var(--tr-green); box-shadow: none; }
.modal-overlay--fr{ background: rgba(0,0,0,.7); }

/* ── Action button text: readable everywhere (user, 28 Oct) ── */
/* phones: the label and the amount bigger, in both one- and two-bet modes */
@media (max-width: 959px){
  .tr-app .tr-right .bslot .tb--2l .tb-k, .tr-app .tr-right--two .tbs-k, .tr-app .tr-right--two .tb--2l .tb-k{ font-size: 11px; letter-spacing: .1em; opacity: .85; }
  .tr-app .tr-right .bslot .tb--2l .tb-v, .tr-app .tr-right--two .bslot .tb--2l .tb-v, .tr-app .tr-right--two .bslot .tb-label{ font-size: 19px; }
  .tr-app .tr-right--two .tbs-v{ font-size: 17px; }
}
/* desktop: there is room, so the label and the amount sit on one line: BET  $1.00 */
@media (min-width: 960px){
  .tr-app .tb.tb--2l{ flex-direction: row; align-items: center; gap: 10px; }
  .tr-app .tb--2l .tb-k, .tr-app .tr-right--two .tb--2l .tb-k{ font-size: 12px; letter-spacing: .14em; opacity: .85; }
  .tr-app .tb--2l .tb-v, .tr-app .tr-right--two .tb--2l .tb-v{ font-size: 20px; }
  .tr-app .tbs-k, .tr-app .tr-right--two .tbs-k{ font-size: 11px; }
  .tr-app .tbs-v, .tr-app .tr-right--two .tbs-v{ font-size: 18px; }
}


/* Phones: the auto cashout name sits over its value (full name, no cut) */
@media (max-width: 959px){
  .tr-right .bslot .ac-val{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .tr-right .bslot .ac-label{ font-size: 9px; }
  .tr-right .bslot .ac-val b{ font-size: 13px; }
}
/* Phones: every sheet is a full-width bottom sheet (the centred card is for desktop only) */
@media (max-width: 959px){
  .drawer-backdrop{ align-items: flex-end; }
  .drawer, .drawer--htp, .drawer--about, .drawer--bet{ width: 100%; max-width: none; max-height: 88vh; border-radius: 16px 16px 0 0; border-bottom: 0; opacity: 1; transform: translateY(100%); transition: transform .25s ease; }
  .drawer-backdrop.show .drawer{ transform: translateY(0); }
  .drawer::before{ display: block; }
  .drawer-header{ border-radius: 16px 16px 0 0; }
  .drawer-content{ border-radius: 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Autoplay, as in Limbo Strike / Dice: Auto Play beside Bet, Stop · 3/10 while it runs */
.cb-row--auto{ display: flex; gap: 8px; }
.cb-row--auto > .tb, .cb-row--auto > .tbs{ flex: 1 1 0; min-width: 0; }
.tr-app .tb.tb--auto{ flex: 0 0 auto; width: auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--tr-panel-2); border: 1px solid var(--tr-border-2); color: var(--tr-text, #fff); }
.tr-app .tb--auto .tb-label{ color: var(--tr-text, #fff); }
.tb--auto svg{ width: 18px; height: 18px; flex: none; }
.tr-app .tb.tb--autostop{ flex: 0 0 auto; width: auto; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #0A1026; border: 1.5px solid #3D6BFF; box-shadow: 0 0 12px rgba(61,107,255,.3); }
.tr-app .tb--autostop .tb-label{ color: #DCE6FF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-led{ width: 9px; height: 9px; border-radius: 50%; flex: none; background: #FF2D3D; box-shadow: 0 0 6px 1px rgba(255,45,61,.85), 0 0 14px rgba(255,45,61,.45); animation: ap-led 1s steps(1, end) infinite; }
@keyframes ap-led{ 50%{ background: #5A1018; box-shadow: none; } }
@media (prefers-reduced-motion: reduce){ .ap-led{ animation: none; } }
.aps{ display: flex; flex-direction: column; gap: 10px; }
.aps-sec{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted); }
.tq--ap{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tq--ap .tq-btn{ height: 44px; font-size: 15px; font-weight: 700; }
.drawer.drawer--ap{ --tr-blue: #3F6DFF; --tr-blue-rgb: 63, 109, 255; }
@media (min-width: 960px){ .drawer--ap{ max-width: 420px; } }
/* phones: the action column stacks Bet over a slim Auto Play */
@media (max-width: 959px){
  .tr-right .bslot .cb-row--auto{ flex-direction: column; gap: 5px; }
  .tr-right .bslot .cb-row--auto > .tb, .tr-right .bslot .cb-row--auto > .tbs{ flex: 1 1 auto; }
  .tr-app .tr-right .bslot .tb.tb--auto, .tr-app .tr-right .bslot .tb.tb--autostop{ flex: 0 0 30px; width: 100%; height: 30px; min-height: 0; gap: 6px; }
  .tr-right .bslot .tb--auto .tb-label, .tr-right .bslot .tb--autostop .tb-label{ font-size: 11px; }
  .tb--auto svg{ width: 14px; height: 14px; }
}
/* desktop: with Auto Play beside it, the action reads in two lines (state over amount) so nothing is cut */
@media (min-width: 960px){
  .tr-app .cb-row--auto > .tb.tb--2l{ flex-direction: column; justify-content: center; gap: 3px; }
  .tr-app .cb-row--auto > .tb.tb--2l .tb-k{ font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tr-app .cb-row--auto > .tb.tb--2l .tb-v{ font-size: 16px; }
}

/* Over the scene nothing sits in a box (Night Blue §9, team 29 Oct): the result
   words are the multiplier's type, slanted, with a glow. YOU WIN green, Missed red,
   a part cashout smaller and white; the alerts are red words the same way. */
.dx .rt, .dx .rt--cashout, .dx .rt--lost{ background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; gap: 10px; min-width: 0; }
.dx .rt-kicker, .dx .rt-amount{ display: inline-block; font-family: var(--dx-display); font-weight: 400; transform: skewX(-8deg); line-height: 1; }
.dx .rt-kicker{ font-size: 17px; letter-spacing: .06em; }
.dx .rt-amount{ font-size: 26px; letter-spacing: 0; }
.dx .rt--cashout .rt-kicker, .dx .rt--cashout .rt-amount{ color: #2BEA86; text-shadow: 0 0 12px rgba(43,234,134,.65), 0 0 28px rgba(43,234,134,.3); }
.dx .rt--cashed .rt-kicker, .dx .rt--cashed .rt-amount{ color: #FFFFFF; text-shadow: 0 0 10px rgba(255,255,255,.35); }
.dx .rt--cashed .rt-kicker{ font-size: 13px; opacity: .8; }
.dx .rt--cashed .rt-amount{ font-size: 20px; }
.dx .rt--lost .rt-amount, .dx .rt--word .rt-amount{ font-family: var(--dx-display); font-size: 24px; letter-spacing: .08em; color: #FF2D3D; text-shadow: 0 0 12px rgba(255,45,61,.7), 0 0 28px rgba(255,45,61,.3); }
@media (max-width: 599px){ .dx .rt-kicker{ font-size: 14px; } .dx .rt-amount{ font-size: 22px; } .dx .rt--cashed .rt-amount{ font-size: 17px; } }
.tr-app .insufficient-toast, .tr-app .alert-toast{ background: none; border: 0; box-shadow: none; padding: 0; gap: 8px; font-family: var(--dx-display); font-size: 16px; letter-spacing: .04em; color: #FF2D3D; text-shadow: 0 0 12px rgba(255,45,61,.7), 0 0 26px rgba(255,45,61,.3); }
.tr-app .insufficient-toast .m-bet-currency{ background: none; color: #FF2D3D; padding: 0; }
.tr-app .alert-toast .alert-icon{ color: #FF2D3D; }

/* Desktop, two bets: the two bet panels side by side (user, 29 Oct), each a card:
   amount over auto cashout on the left, the action (and Auto Play under it) on the right. */
@media (min-width: 960px){
  .tr-right.tr-right--two{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 12px; padding: 12px; }
  .tr-right--two .bslot, .tr-right--two .bslot + .bslot{
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "step act" "acx act";
    gap: 8px; align-items: stretch; padding: 10px; border: 1px solid var(--tr-border); border-radius: 10px; background: rgba(255,255,255,.015);
  }
  .tr-right--two .bslot .bstep{ grid-area: step; order: 0; height: 48px; grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .tr-right--two .bslot .bstep-field{ grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .tr-right--two .bslot .ac-row{ grid-area: acx; order: 0; height: 48px; }
  .tr-right--two .bslot .ac{ height: 48px; }
  .tr-right--two .bslot .cb-row{ grid-area: act; order: 0; display: flex; flex-direction: column; gap: 6px; }
  .tr-right--two .bslot .cb-row > .tb, .tr-right--two .bslot .cb-row > .tbs{ flex: 1 1 auto; height: auto; min-height: 0; }
  .tr-app .tr-right--two .bslot .cb-row > .tb.tb--auto, .tr-app .tr-right--two .bslot .cb-row > .tb.tb--autostop{ flex: 0 0 34px; width: 100%; height: 34px; }
  .tr-app .tr-right--two .bslot .cb-row--auto > .tb.tb--2l{ gap: 2px; }
  .tr-right--two .bslot .bslot-x{ position: absolute; top: -9px; right: -9px; z-index: 2; }
}

/* Desktop, one bet: the same card as with two bets, the same size, centred
   (user, 29 Oct); "add a second bet" stays in its amount row. */
@media (min-width: 960px){
  .tr-right.tr-right--one{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; gap: 12px; padding: 12px; }
  .tr-right--one .bslot{
    grid-column: 2; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "step act" "acx act";
    gap: 8px; align-items: stretch; padding: 10px; border: 1px solid var(--tr-border); border-radius: 10px; background: rgba(255,255,255,.015);
  }
  .tr-right--one .bslot .bstep{ grid-area: step; order: 0; height: 48px; grid-template-columns: minmax(0, 1fr) 40px 40px 40px; }
  .tr-right--one .bslot .bstep-field{ grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .tr-right--one .bslot .ac-row{ grid-area: acx; order: 0; height: 48px; }
  .tr-right--one .bslot .ac{ height: 48px; }
  .tr-right--one .bslot .cb-row{ grid-area: act; order: 0; display: flex; flex-direction: column; gap: 6px; }
  .tr-right--one .bslot .cb-row > .tb, .tr-right--one .bslot .cb-row > .tbs{ flex: 1 1 auto; height: auto; min-height: 0; }
  .tr-app .tr-right--one .bslot .cb-row > .tb.tb--auto, .tr-app .tr-right--one .bslot .cb-row > .tb.tb--autostop{ flex: 0 0 34px; width: 100%; height: 34px; }
  .tr-app .tr-right--one .bslot .cb-row--auto > .tb.tb--2l{ gap: 2px; }
  .tr-right--one .fr-bar{ grid-column: 1 / -1; }
}

/* Desktop, one bet: the card on the left, a big "add a second bet" in the second card's place */
@media (min-width: 960px){
  .tr-right.tr-right--one{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tr-right--one .bslot{ grid-column: 1; }
  .tr-right--one .bslot .bstep{ grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .bslot-addcard{
    grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0;
    border: 1.5px dashed var(--tr-border-2); border-radius: 10px; background: transparent; color: var(--tr-muted);
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .bslot-addcard svg{ width: 22px; height: 22px; }
  .bslot-addcard:hover{ border-color: #3D6BFF; color: #FFFFFF; background: rgba(61,107,255,.06); }
}
@media (max-width: 959px){ .bslot-addcard{ display: none; } }
/* Phones: one rhythm everywhere: 6px between the blocks inside a bet, 8px around
   them in a card, 8px between the two cards; both cards keep their full border. */
@media (max-width: 959px){
  .tr-right .bslot{ column-gap: 6px; row-gap: 6px; }
  .tr-right.tr-right--two{ gap: 8px; }
  .tr-right--two .bslot, .tr-right--two .bslot + .bslot{ padding: 8px; border: 1px solid var(--tr-border); border-radius: 12px; }
  .tr-right--two .bslot-x{ top: -8px; right: -8px; }
  .tr-right--one .bslot{ row-gap: 6px; }
}

/* The Auto Play selector: a small popover right above the button (desktop and phones) */
.cb-row{ position: relative; }
.bp.bp--ap{ left: auto; right: 0; bottom: calc(100% + 8px); width: 300px; max-width: calc(100vw - 28px); --tr-blue: #3F6DFF; --tr-blue-rgb: 63, 109, 255; }
.bp--ap .bp-hint{ font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bp--ap .bp-quick{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bp--ap .bp-chip{ height: 36px; font-size: 14px; font-weight: 700; }
.bp-chip--on{ border-color: #3D6BFF; background: rgba(61,107,255,.16); color: #FFFFFF; box-shadow: 0 0 10px rgba(61,107,255,.25); }
.bp-ap-start{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1.5px solid #3D6BFF; border-radius: 8px; background: #0A1026; color: #DCE6FF; font: 800 12.5px var(--font-primary); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 12px rgba(61,107,255,.3); }
.bp-ap-start svg{ width: 15px; height: 15px; }
.bp-ap-start:hover{ border-color: #6E8FFF; }
/* the Auto Play selector shows over the scene (phones clipped it) */
.tr-app .cb-row.cb-row--auto{ overflow: visible; }
.tr-right:has(.bp--ap){ z-index: 70; }

/* Phones: buttons at a normal size, in proportion (user, 29 Oct): amount 42, auto
   cashout 38; on the right the action fills the rest (~46) over a 34px Auto Play. */
@media (max-width: 959px){
  .tr-right .bslot .bstep{ height: 42px; }
  .tr-right .bslot .ac{ height: 38px; }
  .tr-right .bslot .bstep-amount{ font-size: 16px; }
  .tr-app .tr-right .bslot .tb.tb--auto, .tr-app .tr-right .bslot .tb.tb--autostop{ flex: 0 0 34px; height: 34px; gap: 7px; }
  .tr-right .bslot .tb--auto .tb-label, .tr-right .bslot .tb--autostop .tb-label{ font-size: 12px; }
  .tr-right .bslot .tb--auto svg{ width: 15px; height: 15px; }
  .tr-app .tr-right .bslot .tb--2l .tb-k, .tr-right .bslot .tbs-k{ font-size: 10px; }
  .tr-app .tr-right .bslot .tb--2l .tb-v, .tr-app .tr-right .bslot .tb-label{ font-size: 17px; }
  .tr-app .tr-right .bslot .tbs-v{ font-size: 15px; }
  .tr-right .bslot .ac-label{ font-size: 9.5px; }
  .tr-right .bslot .ac-val b{ font-size: 14px; }
}
@media (max-width: 959px){
  .tr-right .bslot{ flex-shrink: 0; } /* short phones: the scene gives the room, the bet cards keep their size */
  .tr-app .tr-right .bslot .tb--auto .tb-label, .tr-app .tr-right .bslot .tb--autostop .tb-label{ font-size: 12px; }
}
@media (max-width: 959px){ .tr-right .bslot{ grid-template-rows: 42px 38px; } .tr-right--one .bslot{ grid-template-rows: 42px 38px auto; } }
/* the selector opens right above this slot's Auto Play button (a dropdown going up), not above the whole action column */
.cb-row--auto .bp.bp--ap{ bottom: calc(34px + 6px); }

/* ── Logo: the DriveX artwork (header, free-round modals, expired prompt) ── */
.dx-logo-img{ display: block; height: 24px; width: auto; user-select: none; -webkit-user-drag: none; }
@media (min-width: 960px){ .dx-logo-img{ height: 30px; } }
.fr-wordmark .dx-logo-img, .se-logo--text .dx-logo-img{ height: 40px; margin: 0 auto; }

/* ── Loading: the Night Blue poster, a red bar and LOADING at the bottom ── */
.loading-screen{ background: #02040A; overflow: hidden; }
.dxl-bg, .dxl-poster{ position: absolute; inset: 0; background: url("art/poster.webp?v=4") center 40% / cover no-repeat; }
.dxl-bg{ display: none; }
@media (min-aspect-ratio: 3/4){
  .dxl-bg{ display: block; filter: blur(28px) brightness(.45) saturate(1.2); transform: scale(1.15); }
  .dxl-poster{ left: 50%; right: auto; width: calc(100vh * 940 / 1672); transform: translateX(-50%); background-size: contain; background-position: center; box-shadow: 0 0 80px rgba(0,0,0,.8); }
}
.loading-content.dxl-ui{ position: absolute; left: 0; right: 0; bottom: max(7vh, 40px); transform: none; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.dxl-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dxl-bar{ width: min(64vw, 340px); height: 8px; padding: 1px; border: 1px solid rgba(160,180,255,.35); border-radius: 6px; background: rgba(4,8,22,.7); box-sizing: border-box; }
.dxl-bar i{ display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #C8121E, #FF3644); box-shadow: 0 0 10px rgba(255,45,61,.7); }
.dxl-bar--wait{ animation: dxl-wait 2.4s cubic-bezier(.3, 0, .2, 1) forwards; }
.dxl-bar--go{ width: 45%; animation: dxl-go 2.6s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes dxl-wait{ to{ width: 45%; } }
@keyframes dxl-go{ from{ width: 45%; } to{ width: 100%; } }
.dxl-text{ margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: rgba(255,255,255,.85); }
/* START ENGINE: the poster's red (push-the-gas actions are red) */
.loading-screen .ld-ign{ border-color: #FF2D3D; background: rgba(255,45,61,.12); box-shadow: 0 0 22px rgba(255,45,61,.35), inset 0 0 14px rgba(255,45,61,.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.loading-screen .ld-ign i{ background: #FF2D3D; box-shadow: 0 0 12px #FF2D3D; }
.loading-screen .ld-mute{ color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce){ .dxl-bar i{ animation-duration: .01s; } }
/* the bar and START ENGINE sit above the operator mark at the bottom */
.loading-content.dxl-ui{ bottom: max(15vh, 104px); }
/* desktop: a deep night-blue stage instead of a blurred copy; the poster's sides fade into it */
@media (min-aspect-ratio: 3/4){
  .dxl-bg{ filter: none; transform: none; background: radial-gradient(ellipse 60% 70% at 50% 62%, rgba(36,70,210,.28), rgba(2,4,10,0) 70%), #02040A; }
  .dxl-poster{ box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
}
/* the operator mark at the very bottom, the bar / START ENGINE clear above it */
.loading-screen .loading-watermark{ bottom: max(3vh, 18px); z-index: 2; }
.loading-screen .loading-watermark img{ width: 128px; height: auto; opacity: .9; }
.loading-content.dxl-ui{ bottom: calc(max(3vh, 18px) + 96px); }
/* Desktop: the poster fills the whole screen (user, 29 Oct): cover, framed on the car,
   the road and the mesas; the logo (cut off by that frame) sits on top on its own. */
.dxl-logo{ display: none; }
@media (min-aspect-ratio: 3/4){
  .dxl-bg{ display: none; }
  .dxl-poster{ left: 0; right: 0; width: auto; transform: none; background-size: cover; background-position: 50% 76%; -webkit-mask-image: none; mask-image: none; }
  .dxl-poster::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,4,10,.55) 0%, rgba(2,4,10,0) 32%, rgba(2,4,10,0) 70%, rgba(2,4,10,.6) 100%); }
  .dxl-logo{ display: block; position: absolute; left: 50%; top: 11vh; transform: translateX(-50%); width: min(46vw, 620px); height: auto; z-index: 1; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
}
/* START ENGINE: a solid dark pill (the poster's red road no longer shows through), the red light glowing and pulsing */
.loading-screen .ld-ign{ background: rgba(8,6,12,.88); box-shadow: 0 0 18px rgba(255,45,61,.35), 0 8px 26px rgba(0,0,0,.55); }
.loading-screen .ld-ign i{ width: 11px; height: 11px; background: #FF3B4A; box-shadow: 0 0 6px 2px rgba(255,45,61,.95), 0 0 16px 4px rgba(255,45,61,.55); animation: dxl-led 1.1s ease-in-out infinite; }
@keyframes dxl-led{ 0%, 100%{ opacity: 1; box-shadow: 0 0 6px 2px rgba(255,45,61,.95), 0 0 16px 4px rgba(255,45,61,.55); } 50%{ opacity: .35; box-shadow: 0 0 2px rgba(255,45,61,.4); } }
@media (prefers-reduced-motion: reduce){ .loading-screen .ld-ign i{ animation: none; } }

/* ── One bet panel (Oto, 29 Oct): the amount on top, Auto Play | Auto cashout,
   the action at the bottom. In the flight the action is two buttons: Cashout 50%
   (blue) and Cashout 100% (green). ── */
.tr-right.tr-right--solo{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tr-right.tr-right--solo .bslot.pnl{ display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; width: 100%; }
.tr-right.tr-right--solo .pnl .bstep{ display: grid; height: 44px; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; }
.tr-right.tr-right--solo .pnl .bstep-field{ grid-template-columns: 44px minmax(0, 1fr) 44px; }
.tr-right.tr-right--solo .pnl .bstep-btn{ display: grid; place-items: center; }
.tr-right.tr-right--solo .pnl .bstep-amount{ font-size: 17px; }
.pnl-autos{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tr-app .pa-btn{
  height: 42px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--tr-border-2); border-radius: 8px; background: var(--tr-panel-2); color: var(--tr-text, #fff);
  font-family: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pa-btn svg{ width: 16px; height: 16px; flex: none; }
.pa-k{ min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-app .pa-btn--ac{ justify-content: space-between; }
.pa-v{ flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tr-dim); white-space: nowrap; }
.tr-app .pa-btn--on{ background: #0A1026; border: 1.5px solid #3D6BFF; box-shadow: 0 0 12px rgba(61,107,255,.3); }
.pa-btn--on .pa-k{ color: #DCE6FF; }
.pa-btn--on .pa-v{ color: #FFFFFF; }
.tr-app .pa-btn:disabled{ opacity: .5; cursor: default; }
@media (hover: hover){ .tr-app .pa-btn:hover:not(:disabled){ border-color: #3D6BFF; } }
.tr-right.tr-right--solo .pnl .cb-row{ display: flex; height: 56px; overflow: visible; }
.tr-right.tr-right--solo .pnl .cb-row > .tb, .tr-right.tr-right--solo .pnl .cb-row > .tbs{ flex: 1 1 auto; height: 100%; min-height: 0; width: 100%; }
.cb-pair{ flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; height: 100%; animation: tbs-in .2s var(--tr-ease) both; }
.tr-app .cb-pair > .tb{ height: 100%; width: 100%; min-width: 0; }
.tr-app .cb-pair > .tb.tb--2l{ flex-direction: column; justify-content: center; gap: 3px; }
.tr-app .tb.tb--half{ background: #3F6DFF; }
.tr-app .tb--half .tb-k, .tr-app .tb--half .tb-v{ color: #FFFFFF; }
.tr-app .tr-right--solo .tb--2l .tb-k{ font-size: 11px; letter-spacing: .1em; opacity: .85; }
.tr-app .tr-right--solo .tb--2l .tb-v{ font-size: 19px; }
@media (min-width: 960px){
  .tr-right.tr-right--solo{ align-items: center; }
  .tr-right.tr-right--solo .bslot.pnl{ max-width: 640px; }
  .tr-right.tr-right--solo .fr-bar{ width: 100%; max-width: 640px; }
  .tr-right.tr-right--solo .pnl .bstep{ height: 48px; grid-template-columns: minmax(0, 1fr) 48px 48px; }
  .tr-right.tr-right--solo .pnl .bstep-field{ grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .tr-app .tr-right--solo .pa-btn{ height: 44px; }
  .tr-right.tr-right--solo .pnl .cb-row{ height: 58px; }
}
@media (max-width: 959px){
  .tr-right.tr-right--solo .pnl{ gap: 6px; }
  .tr-right.tr-right--solo .pnl .bstep{ height: 42px; }
  .tr-right.tr-right--solo .pnl .bstep-field{ grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .tr-right.tr-right--solo .pnl .bstep{ grid-template-columns: minmax(0, 1fr) 42px 42px; }
  .tr-app .tr-right--solo .pa-btn{ height: 40px; padding: 0 10px; }
  .tr-right.tr-right--solo .pnl .cb-row{ height: 52px; }
  .tr-right.tr-right--solo .pnl-autos{ gap: 6px; }
  .tr-right.tr-right--solo .cb-pair{ gap: 6px; }
}

/* The auto cashout drawer: two rows, each with its switch; the keypad types into the row picked */
.drawer.drawer--acs{ --tr-blue: #3F6DFF; --tr-blue-rgb: 63, 109, 255; }
@media (min-width: 960px){ .drawer--acs{ max-width: 420px; } }
.acs{ display: flex; flex-direction: column; gap: 10px; }
.acs-row{ display: flex; align-items: center; gap: 10px; padding-right: 14px; border: 1px solid var(--tr-border); border-radius: 10px; background: var(--tr-field); transition: border-color .15s ease, box-shadow .15s ease; }
.acs-row--sel{ border-color: #3D6BFF; box-shadow: 0 0 12px rgba(61,107,255,.25); }
.acs-row--err{ border-color: rgba(255,45,61,.7); box-shadow: none; }
.acs-row--na{ opacity: .5; }
.acs-val{
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k x" "h x"; align-items: center; row-gap: 4px;
  padding: 10px 14px; border: 0; background: none; color: var(--tr-text, #fff); font-family: inherit; text-align: left; cursor: pointer;
}
.acs-k{ grid-area: k; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted); }
.acs-row--on .acs-k{ color: #DCE6FF; }
.acs-hint{ grid-area: h; min-height: 13px; font-size: 11px; color: var(--tr-dim); }
.acs-row--err .acs-hint{ color: #FF6E80; }
.acs-x{ grid-area: x; display: flex; align-items: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.acs-row:not(.acs-row--on) .acs-x{ color: var(--tr-dim); }
.acs-suf{ margin-left: 2px; font-size: 16px; color: var(--tr-muted); }
.acs .bs-caret{ height: 22px; margin-left: 2px; }
.acs .bs-key:disabled, .acs .tq-btn:disabled{ opacity: .35; }
/* 50% on the left, 100% on the right (an old rule put Cashout first) */
.cb-pair > .tb--half{ order: 0; }
.cb-pair > .tb--cashout{ order: 1; padding: 0 8px; }
/* phones: the auto cashout button reads in two lines, the label over the targets */
@media (max-width: 959px){
  .tr-app .tr-right--solo .pa-btn--ac{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .tr-right--solo .pa-btn--ac .pa-k{ font-size: 10px; max-width: 100%; color: var(--tr-muted); }
  .tr-right--solo .pa-btn--ac.pa-btn--on .pa-k{ color: #9DB6FF; }
  .tr-right--solo .pa-btn--ac .pa-v{ font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.acs-note{ margin: 0; font-size: 12px; line-height: 1.35; color: var(--tr-muted); }
/* Quick bet amounts ($1 $5 $10 $50): desktop in the amount row, phones on a row under it */
.bq{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.tr-app .bq-btn{ min-width: 0; height: 100%; padding: 0; border: 1px solid var(--tr-border); border-radius: 8px; background: transparent; color: var(--tr-text, #fff); font: 700 13px/1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.tr-app .bq-btn--on{ border-color: #3D6BFF; background: rgba(61,107,255,.14); }
.tr-app .bq-btn:disabled{ opacity: .45; cursor: default; }
@media (hover: hover){ .tr-app .bq-btn:hover:not(:disabled){ border-color: #3D6BFF; } }
@media (min-width: 960px){
  .tr-right.tr-right--solo .bslot.pnl{ max-width: 720px; }
  .tr-right.tr-right--solo .fr-bar{ max-width: 720px; }
  .tr-right.tr-right--solo .pnl .bstep{ grid-template-columns: minmax(0, 1fr) 216px 48px 48px; }
}
@media (max-width: 959px){
  .tr-right.tr-right--solo .pnl .bstep{ height: auto; grid-template-columns: minmax(0, 1fr) 42px 42px; grid-template-rows: 42px 32px; row-gap: 6px; }
  .tr-right.tr-right--solo .pnl .bstep-field{ grid-column: 1; grid-row: 1; }
  .tr-right.tr-right--solo .pnl .bq{ grid-column: 1 / -1; grid-row: 2; }
  .tr-right.tr-right--solo .pnl .bstep-btn{ grid-row: 1; }
}
/* Desktop (user, 29 Oct): one wide bar. Left: the amount row over Auto Play | Auto cashout;
   right: the action across both rows (Bet, or Cashout 50% | Cashout 100% in the flight). */
@media (min-width: 960px){
  .tr-right.tr-right--solo{ align-items: stretch; }
  .tr-right.tr-right--solo .bslot.pnl{
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "step act" "autos act"; gap: 8px 12px; align-items: stretch;
  }
  .tr-right.tr-right--solo .fr-bar{ max-width: none; }
  .tr-right.tr-right--solo .pnl .bstep{ grid-area: step; height: 48px; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.25fr) 48px 48px; }
  .tr-right.tr-right--solo .pnl .pnl-autos{ grid-area: autos; }
  .tr-app .tr-right--solo .pa-btn{ height: 48px; }
  .tr-right.tr-right--solo .pnl .cb-row{ grid-area: act; height: auto; min-height: 104px; }
  .tr-app .tr-right--solo .tb--2l .tb-v{ font-size: 22px; }
  .tr-app .tr-right--solo .cb-row > .tb.tb--2l{ flex-direction: column; justify-content: center; gap: 4px; }
}
/* Desktop auto cashout: a popover right above the Auto cashout button, typed with the keyboard */
.pnl-autos{ position: relative; }
.bp.bp--acs{ left: auto; right: 0; bottom: calc(100% + 8px); width: min(380px, 100%); min-width: 340px; gap: 10px; --tr-blue: #3F6DFF; --tr-blue-rgb: 63, 109, 255; }
.tr-right:has(.bp--acs){ z-index: 70; }
.acp-row{ display: flex; align-items: center; gap: 10px; }
.acp-row--na{ opacity: .5; }
.acp-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acp-txt .acs-k{ font-size: 11px; }
.acp-txt .acs-hint{ min-height: 12px; font-size: 10.5px; }
.acp-row--err .acs-hint{ color: #FF6E80; }
.acp-field{ flex: none; display: flex; align-items: center; width: 112px; height: 40px; padding: 0 10px; border: 1px solid var(--tr-border-2); border-radius: 9px; background: var(--tr-field); cursor: text; }
.acp-field--sel, .acp-field:focus-within{ border-color: #3D6BFF; box-shadow: 0 0 10px rgba(61,107,255,.25); }
.acp-row--err .acp-field{ border-color: rgba(255,45,61,.7); box-shadow: none; }
.acp-input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #FFFFFF; font: 800 18px var(--font-primary); font-variant-numeric: tabular-nums; text-align: right; }
.acp-row:not(.acp-row--on) .acp-input{ color: var(--tr-dim); }
.bp--acs .bp-quick{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bp--acs .bp-chip{ height: 32px; font-weight: 700; }
.acp-save{ height: 38px; border: 0; border-radius: 8px; background: var(--tr-green); color: #04110A; font: 800 13px var(--font-primary); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.acp-save:disabled{ opacity: .4; cursor: default; }
.acp-input:focus, .acp-input:focus-visible{ outline: 0 !important; box-shadow: none !important; }

/* The multiplier a notch bigger, just above the car (user, 29 Oct) */
.dx .cc-center{ top: auto; }
.dx .cc-num{ font-size: clamp(48px, 8vw, 72px); }
@media (max-width: 599px){ .dx .cc-num{ font-size: clamp(40px, 13vw, 56px); } }
@media (max-height: 620px){ .dx .cc-num{ font-size: clamp(48px, 14vh, 88px); } }
/* NEXT DRIVE IN + the seconds: bigger, it was hard to read (user, 29 Oct) */
.dx .cc--betting .cc-kicker{ font-size: clamp(15px, 1.7vw, 20px); letter-spacing: .24em; }
.dx .cc--betting .cc-num{ font-size: clamp(38px, 5.6vw, 58px); }
@media (max-width: 599px){ .dx .cc--betting .cc-kicker{ font-size: 15px; } .dx .cc--betting .cc-num{ font-size: clamp(36px, 11vw, 48px); } }
/* the multiplier's offset shadow in red, not blue (user, 29 Oct) */
.dx .cc--flying .cc-num{ text-shadow: 3px 3px 0 #FF2D3D; }
/* CRASHED over the number: bigger so it reads (user, 29 Oct) */
.dx .cc--crashed .cc-kicker{ font-size: clamp(16px, 1.9vw, 22px); letter-spacing: .24em; color: #FF2D3D; }
@media (max-width: 599px){ .dx .cc--crashed .cc-kicker{ font-size: 16px; } }
/* the desktop auto cashout popover in the modals' charcoal, not navy (user, 29 Oct) */
.bp.bp--acs{ background: var(--tr-panel); border-color: var(--tr-border-2); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.bp--acs .bp-chip{ background: var(--tr-panel-2); border-color: var(--tr-border); }
.bp--acs .bp-chip:hover{ border-color: #3D6BFF; background: rgba(61,107,255,.12); }
.tr-right--solo .pnl-autos{ position: relative; z-index: 8; }
/* Colours (user, 29 Oct): Bet red; Cashout 100% blue; Cashout 50% a blue outline over a 10% blue fill */
.tr-app .tb.tb--go:not(.tb--free){ background: #E8202F; }
.tr-app .tb.tb--go:not(.tb--free) .tb-k, .tr-app .tb.tb--go:not(.tb--free) .tb-v, .tr-app .tb.tb--go:not(.tb--free) .tb-label{ color: #FFFFFF; }
@media (hover: hover){ .tr-app .tb.tb--go:not(.tb--free):hover:not(:disabled){ background: #F23140; } }
.tr-app .tb.tb--cashout{ background: #3F6DFF; }
.tr-app .tb.tb--cashout .tb-k, .tr-app .tb.tb--cashout .tb-v{ color: #FFFFFF; }
.tr-app .tb.tb--cashout:disabled{ background: rgba(63,109,255,.18); }
.tr-app .tb.tb--cashout:disabled .tb-k, .tr-app .tb.tb--cashout:disabled .tb-v{ color: #9DB6FF; }
.tr-app .tb.tb--half{ background: rgba(63,109,255,.1); border: 1.5px solid #3F6DFF; box-shadow: none; }
.tr-app .tb--half .tb-k, .tr-app .tb--half .tb-v{ color: #FFFFFF; }
@media (hover: hover){ .tr-app .tb.tb--half:hover{ background: rgba(63,109,255,.18); } }
/* MISSED just under the multiplier, as in the prototype: the number's slanted type, red glow, no box */
.dx.cc .rt.rt--below{ top: calc(100% + 4px); bottom: auto; padding: 0; }
.dx .rt--below .rt-amount{ font-size: clamp(24px, 3vw, 32px); letter-spacing: .08em; }
.cc-center:has(.rt--below) .cc-kicker{ visibility: visible; }
/* The logo is the SVG everywhere (user, 29 Oct); the poster no longer has it painted in,
   so phones show it on top as well, where the painted one was. */
@media (max-aspect-ratio: 3/4){
  .dxl-logo{ display: block; position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(90vw, 540px); height: auto; z-index: 1; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
}

/* ══ Two bet slots (Night Blue design spec §7, 30 Oct) ══
   A card per bet: [amount + quick picks | traffic-light button] over [Autoplay | Auto cashout].
   Phones: stacked. Desktop: side by side in the order bar. */
.tr-right.tr-right--slots{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; --e-blue: #2F6BFF; }
.dxs{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 10px; min-width: 0;
  padding: 10px; border-radius: 16px; background: #0A1128; border: 1.5px solid #18244A; font-family: var(--font-primary); }
.dxs-left{ position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: opacity .15s ease; }
.dxs-left--lock{ opacity: .4; }
.dxs-left--lock .dxs-amt, .dxs-left--lock .dxs-qk{ pointer-events: none; }
.dxs-amt{ display: flex; align-items: center; height: 44px; border-radius: 12px; background: #050A1A; border: 1px solid #1A2650; transition: border-color .15s ease; }
.dxs-left--flash .dxs-amt{ border-color: #FF3A2A; }
.dxs-amt > button{ flex: none; width: 44px; height: 100%; border: 0; background: none; color: #FFFFFF; font: 700 22px/1 var(--font-primary); cursor: pointer; }
.dxs-amt > button:disabled{ cursor: default; }
.dxs-amt-v{ flex: 1; min-width: 0; text-align: center; color: #FFFFFF; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxs-qk{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.dxs-qk button{ min-width: 0; height: 26px; padding: 0; border-radius: 10px; border: 1px solid #1A2650; background: #050A1A; color: #C9D4F5; font: 700 14px/1 var(--font-primary); font-variant-numeric: tabular-nums; cursor: pointer; }
.dxs-qk button.sel{ border-color: var(--e-blue); color: #FFFFFF; }
.dxs-qk button:disabled{ cursor: default; }

/* Autoplay / Auto cashout pills */
.dxs-ap{ grid-column: 1; grid-row: 2; }
.dxs-acw{ position: relative; grid-column: 2; grid-row: 2; min-width: 0; display: flex; }
.dxs-acw > .dxs-pill{ flex: 1; }
.tr-app .dxs-pill{ box-sizing: border-box; height: 31px; min-width: 0; padding: 0 8px; border-radius: 12px; border: 1px solid #23346A; background: #101A3A; color: #DBE4FF;
  font: 700 14px/1 var(--font-primary); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.tr-app .dxs-pill:disabled, .dxs-pill--dis{ opacity: .5; cursor: default; }
.dxs-ap i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2A3A6A; }
.tr-app .dxs-pill--on{ border-color: var(--e-blue); color: #FFFFFF; }
.dxs-ap.dxs-pill--on i{ background: #FF2A1F; box-shadow: 0 0 8px #FF2A1F, 0 0 3px #FF2A1F; }
.tr-app .dxs-ac.dxs-pill--on{ position: relative; gap: 6px; padding: 0 28px; overflow: hidden; }
.dxs-ac-k{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dxs-ac em{ flex: none; font-style: normal; color: #7FA6FF; text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dxs-ac-x{ position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: #CFD9FF; font: 400 20px/1 var(--font-primary); cursor: pointer; }
@media (hover: hover){
  .tr-app .dxs-pill:not(:disabled):hover, .dxs-qk button:not(:disabled):hover{ border-color: var(--e-blue); }
  .dxs-ac-x:hover{ color: #FFFFFF; }
}

/* The traffic-light button: a dark signal housing, a backlit lens, a glass sheen on top */
.tl, .tr-app .tl{ position: relative; overflow: hidden; grid-column: 2; grid-row: 1; box-sizing: border-box; min-height: 80px; height: 100%; width: 100%; min-width: 0; padding: 0 6px;
  border-radius: 14px; border: 3px solid #0B0E14; cursor: pointer; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-primary); text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%), radial-gradient(110% 95% at 50% 58%, var(--hi) 0%, var(--c) 52%, var(--lo) 100%);
  box-shadow: 0 0 0 1px #262B36, 0 0 18px var(--halo), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 16px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .15s ease; }
.tl b, .tl span{ position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl b{ font-weight: 800; font-size: 22px; letter-spacing: .1em; line-height: 1; }
.tl span{ font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: none; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tl.tl--sub span{ text-transform: uppercase; font-size: 12px; letter-spacing: .1em; font-weight: 700; }
.tl--green{ --c: #11916D; --hi: #3FD3A5; --lo: #06503C; --halo: rgba(30,230,175,.45); }
.tl--blue{ --c: #1F4CC6; --hi: #5A8CF7; --lo: #0D2770; --halo: rgba(55,115,255,.5); }
.tl--red{ --c: #B81E16; --hi: #EC5A46; --lo: #640B07; --halo: rgba(255,50,35,.5); }
.tl:active:not(:disabled){ transform: scale(.985); }
.tl:disabled, .tr-app .tl:disabled{ cursor: default; opacity: 1; filter: grayscale(.8) brightness(.55); }
.tl:focus-visible, .dxs-pill:focus-visible, .dxs-amt button:focus-visible, .dxs-amt-v:focus-visible, .dxs-qk button:focus-visible, .dxs-ac-x:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Phones (spec: ≤ 430 px) */
@media (max-width: 430px){
  .tr-right.tr-right--slots{ gap: 8px; }
  .dxs{ padding: 8px; gap: 6px 8px; }
  .dxs-amt{ height: 40px; }
  .dxs-amt > button{ width: 38px; }
  .dxs-amt-v{ font-size: 17px; }
  .dxs-qk button{ height: 25px; font-size: 13px; }
  .tr-app .tl{ min-height: 74px; }
  .tl b{ font-size: 19px; }
  .tl span{ font-size: 17px; }
  .tr-app .dxs-pill{ height: 30px; font-size: 12px; letter-spacing: .05em; gap: 6px; }
  .tr-app .dxs-ac.dxs-pill--on{ padding: 0 26px 0 8px; gap: 4px; }
}
/* Short phones: both cards still fit with the scene */
@media (max-width: 959px) and (max-height: 700px){
  .dxs{ gap: 5px 8px; }
  .dxs-amt{ height: 36px; }
  .dxs-qk button{ height: 23px; }
  .tr-app .tl{ min-height: 64px; }
  .tr-app .dxs-pill{ height: 28px; }
}
/* Desktop: the two cards side by side in the order bar */
@media (min-width: 960px){
  .tr-right.tr-right--slots{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid #18244A; border-radius: 16px; background: #070C1C; }
  .tr-right--slots.tr-right--slot1{ grid-template-columns: minmax(0, 1fr); }
  .tr-right--slots .fr-bar{ grid-column: 1 / -1; }
  .tr-right--slots .bp{ z-index: 60; }
}
.tr-right:has(.dxs .bp){ z-index: 70; }

/* Desktop auto cashout popover (one target) */
.tr-app .tl.acp-save, .tl.acp-save{ min-height: 44px; height: 44px; font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tl.acp-save:disabled{ opacity: .45; cursor: default; }
.acp-head{ display: flex; align-items: baseline; gap: 10px; }
.acp-head b{ font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; }
.acp-head span{ font-size: 12.5px; font-weight: 600; color: var(--tr-muted); }
.bp--acs .bp-field{ padding: 0 12px; }
.bp--acs .bp-input{ font-size: 20px; font-weight: 800; }
.bp--acs .acs-note{ margin: 0; }

/* Keypad sheet (spec §8.1, phones) */
.drawer.drawer--ks{ background: #0A1128; border-color: #1A2650; max-width: 560px; margin: 0 auto; }
.drawer--ks::before{ background: #23346A; }
.drawer--ks .drawer-header{ height: auto; padding: 12px 16px 4px; border-bottom: 0; }
.drawer--ks .drawer-title{ display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; }
.ks-range{ font-size: 14px; font-weight: 600; letter-spacing: 0; color: #8796C4; }
.drawer--ks .drawer-close{ width: 38px; height: 38px; border-radius: 10px; border-color: #23346A; background: none; color: #FFFFFF; }
.drawer--ks .drawer-close svg{ width: 15px; height: 15px; }
.ks{ display: flex; flex-direction: column; gap: 10px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; font-family: var(--font-primary); }
.ks-val{ height: 52px; border-radius: 12px; background: #050A1A; border: 1px solid #23346A; display: grid; place-items: center; color: #FFFFFF; font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.ks-val--bad{ border-color: #FF3A2A; color: #FF8A7F; }
.ks-pre{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ks-keys{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ks-pre button, .ks-keys button, .ks-reset{ border-radius: 12px; border: 1px solid #1A2650; background: #101A3A; color: #FFFFFF; font-family: var(--font-primary); font-weight: 700; cursor: pointer; }
.ks-pre button{ height: 38px; font-size: 15px; color: #C9D4F5; }
.ks-keys button{ height: 52px; font-size: 24px; }
.ks-act{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.ks-reset{ height: 58px; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.tr-app .tl.ks-save, .tl.ks-save{ min-height: 58px; height: 58px; font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: none; }
.ks .acs-note{ margin: 0; }
@media (max-height: 700px){ .ks-keys button{ height: 44px; } .ks-val{ height: 46px; } .ks-reset, .tl.ks-save{ height: 50px; min-height: 50px; } }
/* Desktop popovers open above the whole slot card, not over its own Bet button */
@media (min-width: 960px){
  .dxs-left, .dxs-acw{ position: static; }
  .dxs .bp{ bottom: calc(100% + 8px); width: 340px; min-width: 0; max-width: calc(100% - 4px); }
  .dxs-left .bp{ left: 0; right: auto; }
  .dxs-acw .bp{ left: auto; right: 0; }
  .dxs .bp, .dxs .bp.bp--acs{ background: #0A1128; border-color: #1A2650; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
  .dxs .bp-field{ background: #050A1A; border-color: #23346A; }
  .dxs .bp-field:focus-within{ border-color: var(--e-blue); }
  .dxs .bp-chip, .dxs .bp--acs .bp-chip{ background: #101A3A; border-color: #1A2650; color: #C9D4F5; }
  .dxs .bp-chip:hover, .dxs .bp--acs .bp-chip:hover{ border-color: var(--e-blue); background: #101A3A; color: #FFFFFF; }
  .dxs .bp-ok{ background: #11916D; color: #FFFFFF; }
}

/* ══ Night Blue design spec, whole screen (30 Oct): navy band on top (header + results),
   the letterboxed scene, the slots in a navy band below; one 980 px column on desktop ══ */
html, body{ background: #02040A; }
.tr-app.tr-app--crash{ max-width: 980px; margin: 0 auto; padding: 0 !important; gap: 0; justify-content: center; background: #02040A; --gap: 0px; }
.tr-app--crash .tr-body, .tr-app--crash .tr-left{ flex: 0 1 auto; min-height: 0; gap: 0; }
.tr-app--crash .tr-body{ display: flex; flex-direction: column; }
.tr-app--crash .tr-stage{ display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; gap: 0; }
/* the scene: the frame at its aspect plus two 16% bars, shrinking when the screen is short */
.tr-app--crash .tr-chartrow, .tr-app--crash .tr-stage .tr-chartrow{ flex: 0 1 auto; width: 100%; height: auto; min-height: 150px; aspect-ratio: 1.81; border: 0; border-radius: 0; background: #000; }
@media (max-width: 599px){ .tr-app--crash .tr-chartrow, .tr-app--crash .tr-stage .tr-chartrow{ aspect-ratio: 1.136; } }

/* top band */
.nb-top{ flex: none; background: #070C1C; }
.tr-app--crash .th{ min-height: 0; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.tr-app--crash .th-logo{ height: 22px; }
.tr-app--crash .th-right{ gap: 10px; }
.tr-app--crash .th-balance{ box-sizing: border-box; height: 32px; padding: 0 14px; gap: 8px; border: 1px solid #1F2B52; border-radius: 10px; background: #0B1124; font-size: 19px; font-weight: 800; color: #FFFFFF; }
.tr-app--crash .th-cur{ color: #7F8BB0; font-size: 17px; font-weight: 600; }
.tr-app--crash .th-menu-btn{ box-sizing: border-box; width: 48px; height: 32px; border: 1px solid #1F2B52; border-radius: 9px; background: #0B1124; color: #E8EDFF; }
.tr-app--crash .th-menu-btn svg{ width: 17px; height: 17px; }
.tr-app--crash .ch-top{ position: static; display: flex; align-items: center; gap: 8px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); pointer-events: auto; }
.tr-app--crash .ch-hist{ gap: 6px; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.tr-app--crash .ch-chip{ height: 34px; padding: 0 11px; border-radius: 9px; background: #0B1124; color: #9AA6C8; font-size: 14px; font-weight: 800; }
.tr-app--crash .ch-chip--mid{ color: #FFFFFF; background: #0B1124; }
.tr-app--crash .ch-chip--hi{ color: #FFFFFF; background: #4F74FF; }
.tr-app--crash .ch-room{ height: 34px; gap: 7px; padding: 0 12px; border-radius: 9px; background: #0B1124; color: #FFFFFF; font-size: 14px; font-weight: 800; }
.tr-app--crash .ch-room svg{ width: 18px; height: 18px; color: #36D27A; }
.tr-app--crash .ch-room b{ font-weight: 800; }
.tr-app--crash .ch-room i{ width: 1px; height: 16px; background: #2A3660; }
.tr-app--crash .ch-room span{ font-weight: 700; }
@media (hover: hover){ .tr-app--crash .ch-room:hover{ background: #101A3A; } }

/* bottom band: the two slots, stacked (spec §7) */
.tr-app--crash .tr-right.tr-right--slots, .tr-app--crash .tr-right.tr-right--slots.tr-right--slot1{ flex: none; display: flex; flex-direction: column; gap: 10px; width: auto; margin: 0; overflow: visible;
  padding: 12px max(8px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 0; background: #070C1C; }

@media (max-width: 430px){
  .tr-app--crash .th{ gap: 6px; }
  .tr-app--crash .th-logo{ height: 16px; }
  .tr-app--crash .th-right{ gap: 6px; }
  .tr-app--crash .th-balance{ height: 28px; padding: 0 9px; gap: 5px; border-radius: 8px; font-size: 15px; }
  .tr-app--crash .th-cur{ font-size: 14px; }
  .tr-app--crash .th-menu-btn{ width: 38px; height: 28px; border-radius: 8px; }
  .tr-app--crash .th-menu-btn svg{ width: 15px; height: 15px; }
  .tr-app--crash .ch-chip{ height: 30px; padding: 0 9px; font-size: 13px; }
  .tr-app--crash .ch-room{ height: 30px; padding: 0 9px; gap: 5px; font-size: 13px; }
  .tr-app--crash .ch-room i, .tr-app--crash .ch-room span{ display: none; }
  .tr-app--crash .tr-right.tr-right--slots{ gap: 8px; }
}
/* landscape phones: no room for the letterbox stack, keep the game on one screen */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .tr-app.tr-app--crash{ max-width: none; }
  .tr-app--crash .tr-body{ flex-direction: row; flex: 1 1 auto; }
  .tr-app--crash .tr-left{ flex: 1 1 auto; }
  .tr-app--crash .tr-chartrow, .tr-app--crash .tr-stage .tr-chartrow{ aspect-ratio: auto; flex: 1 1 auto; }
  .tr-app--crash .tr-right.tr-right--slots{ width: min(340px, 46vw); overflow-y: auto; }
}

/* the multiplier (spec §3, §6): Russo One, sized from R, white with a red glow, slanted -8°,
   its centre on the big mesas; NEXT DRIVE IN over the countdown in the same place */
.dx .cc-center{ position: absolute; left: 50%; right: auto; width: 0; height: 0; display: block; transform: none; gap: 0; --r: var(--dx-r, 130px); }
.dx .cc-num, .dx .cc--flying .cc-num, .dx .cc--crashed .cc-num, .dx .cc--betting .cc-num{
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; line-height: 1;
  font-family: var(--dx-display); font-weight: 400; font-size: calc(var(--r) * .34); color: #FFFFFF; transform: skewX(-8deg);
  text-shadow: 0 0 calc(var(--r) * .05) rgba(255,26,20,.9), 0 0 calc(var(--r) * .05) rgba(255,26,20,.6); }
.dx .cc--crashed .cc-num{ color: #FF1A14; text-shadow: 0 0 calc(var(--r) * .05) rgba(255,26,20,.9); }
.dx .cc--betting .cc-num{ font-size: calc(var(--r) * .25); text-shadow: none; }
.dx .cc--betting.cc--last .cc-num{ color: #FF1A14; }
.dx .cc-kicker, .dx .cc--betting .cc-kicker, .dx .cc--crashed .cc-kicker{ position: absolute; left: 0; top: calc(var(--r) * -.27); translate: -50% -50%; min-height: 0; white-space: nowrap; line-height: 1;
  font-family: var(--font-primary); font-weight: 700; font-size: calc(var(--r) * .085); letter-spacing: .36em; padding-left: .36em; color: rgba(255,255,255,.75); }
.dx .cc--flying .cc-kicker, .dx .cc--crashed .cc-kicker:empty{ display: none; }
/* YOU WIN $X / MISSED (spec §3, §6): right under the multiplier, Russo One, no box */
.dx.cc .rt, .dx.cc .rt.rt--below{ position: absolute; left: 0; top: calc(var(--r) * .19 + 8px); bottom: auto; padding: 0; gap: .3em; }
.dx .rt-kicker, .dx .rt-amount, .dx .rt--below .rt-amount, .dx .rt--lost .rt-amount, .dx .rt--word .rt-amount{
  font-family: var(--dx-display); font-weight: 400; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .02em; text-transform: uppercase; transform: skewX(-8deg); line-height: 1; }
.dx .rt--cashout .rt-kicker, .dx .rt--cashout .rt-amount{ color: #33E07E; text-shadow: 0 0 10px rgba(51,224,126,.85); }
.dx .rt--lost .rt-amount, .dx .rt--word .rt-amount{ color: #FF1A14; text-shadow: 0 0 10px rgba(255,26,20,.9); }
.dx .rt--cashed .rt-kicker, .dx .rt--cashed .rt-amount{ color: #FFFFFF; text-shadow: 0 0 8px rgba(255,255,255,.35); font-size: clamp(17px, 2.4vw, 24px); }

/* Sheets (spec §8): surface, top radius 20, 38 px close; the menu rows */
.drawer{ background: #0A1128; border-color: #1A2650; border-radius: 20px 20px 0 0; }
.drawer::before{ background: #23346A; }
.drawer-header{ border-bottom-color: #1A2650; }
.drawer-title{ font-size: 20px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; }
.drawer-close{ width: 38px; height: 38px; border-radius: 10px; border: 1px solid #23346A; background: none; color: #FFFFFF; }
.drawer-close svg{ width: 15px; height: 15px; }
@media (min-width: 681px){ .drawer{ border-radius: 20px; border-bottom: 1px solid #1A2650; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .drawer-header{ border-radius: 20px 20px 0 0; } .drawer-content{ border-radius: 0 0 20px 20px; } }
.mnu{ display: flex; flex-direction: column; gap: 8px; }
.mrow{ display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid #1A2650; background: #101A3A; color: #FFFFFF;
  font: 700 16px/1 var(--font-primary); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mrow i{ font-style: normal; font-size: 22px; color: #8796C4; }
.mrow-sw{ position: relative; width: 38px; height: 22px; border-radius: 11px; background: #1A2547; transition: background .2s; }
.mrow-sw::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8792B4; transition: left .2s, background .2s; }
.mrow-sw--on{ background: #2F6BFF; }
.mrow-sw--on::after{ left: 19px; background: #FFFFFF; }
.mrow:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
.mnu-foot{ margin: 4px 2px 0; color: #7F8BB0; font-size: 14px; font-weight: 600; }
/* header logo at the spec height (22 px desktop, 16 px phones); it gives way before the buttons do */
.tr-app--crash .th-logo{ flex: 0 1 auto; min-width: 0; }
.tr-app--crash .th-logo .dx-logo-img{ height: 22px; max-width: 100%; object-fit: contain; object-position: left center; }
.tr-app--crash .th-right{ flex: none; }
@media (max-width: 430px){ .tr-app--crash .th-logo .dx-logo-img{ height: 16px; } }
/* statistics, history and the other sheets in the night-blue look: e-blue for what is on, no greys */
.st-bar{ background: #101A3A; }
.st-bar i, .st-zone:first-child .st-bar i{ background: linear-gradient(90deg, #2F6BFF, #7FA6FF); }
.st-tab--on, .modal .st-tab--on, .drawer .st-tab--on, .st-chip--on{ background: #101A3A; color: #FFFFFF; border-color: #2F6BFF; box-shadow: inset 0 0 0 1px #2F6BFF; }
.st-card{ background: #050A1A; border-color: #1A2650; }
/* the big CTAs in modals (Start playing, free-round buttons) as the green traffic-light lamp */
.fbs-btn, .fbw-btn, .htp-start{ border: 3px solid #0B0E14 !important; border-radius: 14px !important; color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  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%) !important;
  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) !important; }
.htp-card{ background: #0A1128; border-color: #1A2650; }
.dx.cc .rt, .dx.cc .rt.rt--below{ transform: none; translate: -50% 0; animation: nb-rt-in .25s ease-out both; white-space: nowrap; }
@keyframes nb-rt-in{ from{ opacity: 0; scale: .9; } }
.dx.cc .rt, .dx.cc .rt.rt--below{ width: max-content; max-width: none; min-width: 0; }
/* results row (Oto, 30 Oct): no filled box for the big ones, the number's colour tells it:
   white under 2x, green from 2x up */
.tr-app--crash .ch-chip, .tr-app--crash .ch-chip--mid, .tr-app--crash .ch-chip--hi{ background: #0B1124; color: #FFFFFF; }
.tr-app--crash .ch-chip--mid, .tr-app--crash .ch-chip--hi{ color: #33E07E; }
/* three colours (user, 30 Oct): white under 2x, green 2x to 9.99x, blue from 10x */
.tr-app--crash .ch-chip--hi{ color: #6E92FF; }
/* desktop fills the screen (user, 30 Oct): no 980 px column; from 768 px (tablets up) the two
   slots sit side by side so the scene keeps its height */
.tr-app.tr-app--crash{ max-width: none; }
@media (min-width: 768px){
  .tr-app--crash .tr-right.tr-right--slots{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding-left: 16px; padding-right: 16px; }
  .tr-app--crash .tr-right--slots .fr-bar{ grid-column: 1 / -1; }
}
/* the burger menu drops down under its button (user, 30 Oct) */
.tr-app--crash .th-menu-wrap{ position: relative; }
.mnu.mnu--drop{ position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 280px; max-width: calc(100vw - 24px); padding: 8px; gap: 6px;
  border: 1px solid #1A2650; border-radius: 14px; background: #0A1128; box-shadow: 0 18px 50px rgba(0,0,0,.6); animation: bp-in .16s ease both; }
.mnu--drop .mrow{ height: 46px; font-size: 15px; }
.mnu--drop .mnu-foot{ margin: 2px 6px 2px; font-size: 13px; }
.tr-app--crash .th-menu-btn--on{ border-color: #2F6BFF; }
.nb-top{ position: relative; z-index: 30; }
/* free rounds: the longer label fits the lamp (ka "უფასო რაუნდი") */
.tl.tl--free b{ font-size: 16px; letter-spacing: .04em; }
@media (max-width: 430px){ .tl.tl--free b{ font-size: 14px; letter-spacing: .02em; } }
/* desktop sidebar back (user, 30 Oct): Live bets / Statistics beside the scene, night-blue card */
@media (min-width: 960px){
  .tr-app--crash .tr-stage{ flex-direction: row; align-items: stretch; }
  .tr-app--crash .tr-stage .tr-chartrow{ flex: 1 1 auto; width: auto; min-width: 0; }
  .tr-app--crash .st-side{ flex: none; width: clamp(280px, 22vw, 360px); min-height: 0; overflow: hidden; padding: 12px; background: #070C1C; border-left: 1px solid #18244A; }
  .tr-app--crash .st-side-tabs{ background: #050A1A; border: 1px solid #1A2650; }
  .tr-app--crash .st-side-tab--on{ background: #101A3A; box-shadow: inset 0 0 0 1px #2F6BFF; }
}
/* free-round window, readable (user, 30 Oct): no fading pulse on the button, a deeper lamp,
   bigger and brighter text */
.modal--fr .fbw-btn, .modal--fr .fbs-btn{ animation: none !important; height: 54px; font-size: 18px; letter-spacing: .08em; filter: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 30%), radial-gradient(110% 95% at 50% 58%, #2CB88C 0%, #0E7F5F 55%, #054532 100%) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65) !important; }
.modal--fr{ background: #0A1128; border-color: #23346A; }
.modal--fr h2{ font-size: 24px; margin-bottom: 12px; }
.modal--fr .fbw-desc{ font-size: 17px; line-height: 1.5; color: #E4EAFF; }
.modal--fr .fbw-hl{ color: #33E07E; }
.modal--fr .fbw-sub, .modal--fr p{ font-size: 16px; color: #C9D4F5; }
/* crash multiplier slanted from the first frame (Oto, 30 Oct): the pop runs on scale, so the
   -8° skew (transform) is never replaced by the animation */
.dx .cc--crashed .cc-num{ animation: nb-crash .45s var(--tr-ease); }
.dx .cc--boom .cc-num{ animation: nb-boom .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nb-crash{ 0%{ scale: 1.18; } 40%{ scale: .96; } 100%{ scale: 1; } }
@keyframes nb-boom{ 0%{ scale: 1.35; filter: brightness(1.8); } 35%{ scale: .94; } 100%{ scale: 1; filter: none; } }
/* auto cashout on: the same red light as Autoplay (Oto, 30 Oct) */
.dxs-ac.dxs-pill--on i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF2A1F; box-shadow: 0 0 8px #FF2A1F, 0 0 3px #FF2A1F; }

/* ── Auto cashout scroller (Limbo Live's WheelRuler, horizontal) in the keypad sheet and the desktop popover (Oto, 30 Oct) ── */
.nb-dial{ flex: none; height: 64px; border: 1px solid #1A2650; border-radius: 12px; background: #050A1A; overflow: hidden; }
.nb-dial .wr{ height: 100%; }
.wr{ position: relative; flex: none; width: 56px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: grab; }
.wr:focus-visible{ box-shadow: inset 0 0 0 2px #2F6BFF; }
.wr:active{ cursor: grabbing; }
.wr-viewport{ position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.wr-strip{ position: absolute; left: 0; top: 0; bottom: 0; will-change: transform; }
.wr-tick{ position: absolute; background: rgba(255,255,255,.22); }
.wr-tick--mid{ background: rgba(255,255,255,.36); }
.wr-tick--major{ background: rgba(255,255,255,.6); }
.wr-tick--off, .wr-label--off{ opacity: .3; }
.wr-label{ --k: 0; position: absolute; font: 600 10.5px var(--font-primary); white-space: nowrap; color: color-mix(in srgb, #FFFFFF calc(var(--k) * 100%), #8792B4); }
.wr-marker{ position: absolute; pointer-events: none; }
.wr-value{ position: absolute; z-index: 1; height: 22px; padding: 0 6px; display: flex; align-items: center; border-radius: 6px; background: #2F6BFF; color: #FFFFFF;
  font: 800 12px var(--font-primary); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px rgba(47,107,255,.18), 0 0 16px rgba(47,107,255,.6); }
.wr-stem{ position: absolute; box-shadow: 0 0 12px rgba(47,107,255,.85); }
.wr--off{ opacity: .6; cursor: default; }
.wr.wr--h{ width: auto; height: 64px; }
.wr--h .wr-tick{ top: 32px; width: 1px; height: 7px; margin-left: -.5px; }
.wr--h .wr-tick--mid{ top: 30px; height: 11px; }
.wr--h .wr-tick--major{ top: 28px; width: 1.5px; height: 15px; margin-left: -.75px; }
.wr--h .wr-label{ top: 46px; transform: translateX(-50%) scale(calc(1 + .15 * var(--k))); transform-origin: 50% 0; }
.wr--h .wr-marker{ left: 50%; top: 0; bottom: 0; width: 0; }
.wr--h .wr-value{ left: 0; top: 4px; transform: translateX(-50%); }
.wr--h .wr-stem{ left: -1px; top: 26px; bottom: 20px; width: 2px; background: linear-gradient(180deg, #CFE7FF, #2F6BFF); }
.bp--acs .nb-dial{ margin-top: 2px; }
/* the loader's bar fills after START ENGINE is pressed (user, 30 Oct), not before */
.dxl-bar i.dxl-bar--fill{ width: 0; animation: dxl-fill 2.6s cubic-bezier(.5, 0, .2, 1) forwards; }
.dxl-bar i.dxl-bar--quick{ animation-duration: .65s; }
@keyframes dxl-fill{ from{ width: 0; } to{ width: 100%; } }
/* results row, swapped (Oto, 30 Oct): white under 2x, blue 2x to 9.99x, green from 10x */
.tr-app--crash .ch-chip--mid{ color: #6E92FF; }
.tr-app--crash .ch-chip--hi{ color: #33E07E; }
/* desktop sidebar: Live bets only (no statistics, user 30 Oct) */
.tr-app--crash .st-side-head{ display: flex; align-items: center; gap: 8px; margin: 2px 2px 12px; font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; }
.tr-app--crash .st-side-head svg{ width: 16px; height: 16px; color: #2F6BFF; }