/* ── Strike Pump theme on the Limbo Strike kit: the fonts, the night-blue tokens, the logo, the loader, the results row and the full-bleed stage layout (carved out of DriveX's skin). ── */
@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: #1FE07A;
  --tr-green-rgb: 31, 224, 122;
  --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; }

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

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

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

.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; } }
.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; }
/* small phones: tighter results row (this block lost its @media when theme.css was carved out of drivex.css; the stray brace swallowed the landscape rules below) */
@media (max-width: 372px){
  .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; }
}
/* 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; }
}
/* 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; }
}
/* 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; }

/* the results row and the panel band on Limbo's kit (DriveX's base rules for these are not in it) */
.tr-app--crash .ch-top{ display: flex; align-items: center; gap: 8px; padding: 0 max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px)); }
.tr-app--crash .ch-hist{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.tr-app--crash .ch-hist::-webkit-scrollbar{ display: none; }
.tr-app--crash .ch-hist.ch-hist--drag{ cursor: grabbing; }
.tr-app--crash .tr-right.tr-right--slots, .tr-app--crash .tr-right.tr-right--slots.tr-right--slot1{ display: flex; flex-direction: column; grid-template-columns: none; align-items: stretch; width: auto; max-width: none; margin: 0; gap: 8px; padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); border: 0; border-radius: 0; background: var(--tr-panel); box-shadow: none; }
@media (min-width: 960px){ .tr-app--crash .tr-right.tr-right--slots{ padding-left: 24px; padding-right: 24px; } }
.sp-slot{ width: 100%; }