/* PoolX on top of the kit (styles + trade + theme + pump): the DriveX look. Night blue, the red wordmark, a bet slot with lamp buttons. */

/* the screen: black header band, the blue night behind the table and the panel (no carnival here) */
html, body{ background: #050D33; }
.tr-app.tr-app--crash.px-app{ background: radial-gradient(120% 70% at 50% 35%, #0B1D5E 0%, #050D33 75%); }
.px-app .nb-top{ background: #000000; }
.px-app .ch-top{ background: rgba(0,0,0,.35); }
.tr-app--crash.px-app .tr-chartrow, .tr-app--crash.px-app .tr-stage .tr-chartrow, .sp-scene.px-scene{ background: transparent; }
.tr-app--crash.px-app .tr-right.tr-right--slots, .tr-app--crash.px-app .tr-right.tr-right--slots.tr-right--slot1{ background: transparent; }
.sp-scene.px-scene canvas{ touch-action: none; cursor: pointer; }
@keyframes dxl-fill{ to{ width: 100%; } }

/* the wordmark: Pool in red, X in white (the X family: DriveX) */
.ds-logo{ display: inline-block; font-family: "Russo One", "Arial Black", Impact, sans-serif; font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .02em; text-transform: none; white-space: nowrap; color: #FFFFFF; transform: skewX(-8deg); }
.ds-logo.px-logo b, .th-logo .ds-logo.px-logo b{ font-weight: 400; color: #FF2A2A; text-shadow: 0 0 .3em rgba(255,42,42,.75); }
@media (min-width: 960px){ .ds-logo{ font-size: 30px; } }
@media (max-width: 430px){ .tr-app--crash .th-logo .ds-logo{ font-size: 21px; } }
.fr-wordmark .ds-logo{ font-size: 38px; }
.loading-screen.px-loader{ background: radial-gradient(120% 70% at 50% 40%, #0B1D5E 0%, #050D33 75%); }
.loading-screen .sp-load-logo.ds-load-logo{ width: max-content; max-width: 96vw; top: max(7vh, 46px); filter: drop-shadow(0 6px 24px rgba(0,0,0,.7)); }
.ds-load-logo .ds-logo{ font-size: clamp(50px, 14vw, 96px); }
@media (min-aspect-ratio: 3/4){ .loading-screen .sp-load-logo.ds-load-logo{ top: max(5vh, 30px); } .ds-load-logo .ds-logo{ font-size: clamp(46px, 6vw, 84px); } }
@media (max-height: 540px){ .loading-screen .sp-load-logo.ds-load-logo{ top: 14px; } .ds-load-logo .ds-logo{ font-size: 38px; } }
.sp-load-stage{ position: absolute; inset: 0; } .sp-load-stage canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the results row: the ball's colour and what the shot paid */
.px-dot{ flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.tr-app--crash .ch-chip.px-chip{ display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 13px; border: 1px solid; font-size: 13px; font-weight: 800; background: none; font-variant-numeric: tabular-nums; }
.tr-app--crash .ch-chip.px-chip--win{ color: #7DFFB0; border-color: #1F8A4C; background: rgba(20,120,60,.25); }
.tr-app--crash .ch-chip.px-chip--miss{ color: #FF8A8A; border-color: #8A1F1F; background: rgba(120,20,20,.25); }
.px-hxb{ display: inline-flex; align-items: center; gap: 6px; }

/* the stage: the result in the middle of the table, New table in the corner */
.px-msg{ position: absolute; left: 0; right: 0; top: 42%; z-index: 2; text-align: center; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s; }
.px-msg.show{ opacity: 1; transform: scale(1); }
.px-msg .big{ font-family: "Russo One", "Arial Black", sans-serif; font-size: clamp(44px, 13vw, 72px); line-height: 1; transform: skewX(-8deg); }
.px-msg .sub{ font-size: 19px; font-weight: 800; margin-top: 6px; }
.px-msg.win .big{ color: #FFFFFF; text-shadow: 0 0 18px rgba(80,255,150,.9), 0 0 4px #000; } .px-msg.win .sub{ color: #7DFFB0; }
.px-msg.miss .big{ color: #FF2A2A; text-shadow: 0 0 18px rgba(255,42,42,.8), 0 0 4px #000; } .px-msg.miss .sub{ color: #FFD0D0; }
.px-msg.info .big{ color: #FFFFFF; font-size: clamp(26px, 7vw, 40px); text-shadow: 0 0 18px rgba(120,170,255,.9), 0 0 4px #000; } .px-msg.info .sub{ color: #CFE0FF; }
.px-app .ch-top{ display: flex; align-items: center; gap: 8px; }
.px-app .ch-top .ch-hist{ flex: 1 1 auto; min-width: 0; }
.px-rack{ flex: none; width: 38px; height: 28px; border-radius: 9px; border: 1px solid #263F95; background: #0D1B55; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.px-rack svg{ width: 16px; height: 16px; }
.px-rack:disabled{ opacity: .4; cursor: default; }
.px-rack.press:not(:disabled), .px-rack:hover:not(:disabled){ border-color: #5A8CF7; box-shadow: 0 0 12px rgba(47,107,255,.6); }

/* ── the bet slot (DriveX): the picked ball, the bet box and its quick keys, the lamp ── */
.sp-slot.px-slot{ display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 10px; border-radius: 16px; background: rgba(10,17,40,.55); border: 1.5px solid #18244A; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); }
.px-info{ display: flex; align-items: baseline; gap: 10px; min-height: 26px; padding: 0 4px; color: #8FA3D6; font-size: 14px; font-weight: 700; white-space: nowrap; }
.px-info-ball{ display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; } .px-info-ball b{ color: #FFFFFF; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.px-info-ch b{ color: #FFFFFF; font-variant-numeric: tabular-nums; }
.px-info-mx{ margin-left: auto; color: #FFB300; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.px-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.px-left{ display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 84px; }
.px-amt{ position: relative; flex: 1; display: flex; align-items: stretch; min-height: 0; border-radius: 12px; background: #050A1A; border: 1px solid #1A2650; }
.px-amt > button{ flex: none; width: 44px; border: 0; background: none; color: #FFFFFF; font-size: 22px; font-weight: 700; cursor: pointer; font-family: inherit; }
.px-amt > button:first-child{ border-right: 1px solid #1A2650; border-radius: 11px 0 0 11px; } .px-amt > button:last-of-type{ border-left: 1px solid #1A2650; border-radius: 0 11px 11px 0; }
.px-amt > .px-amt-v{ flex: 1; width: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; border: 0; border-radius: 0; line-height: 1; }
.px-amt-v small{ font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #8FA3D6; text-transform: uppercase; }
.px-amt button:disabled{ cursor: default; } .px-amt.lock > button{ opacity: .45; } .px-amt.lock > .px-amt-v{ opacity: .75; }
.px-amt--free{ padding: 0; } .px-amt--free .fr-bar{ width: 100%; height: 100%; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; display: flex; align-items: center; gap: 6px; font-size: 13px; } .px-amt--free .fr-bar-win{ margin-left: auto; } .px-amt--free .fr-bar-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-amt .bp{ left: 0; right: auto; bottom: calc(100% + 8px); width: 340px; max-width: calc(100vw - 32px); }
.px-qk{ flex: none; display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 5px; height: 28px; }
.px-qk button{ border-radius: 10px; border: 1px solid #1A2650; background: #050A1A; color: #C9D4F5; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; white-space: nowrap; }
.px-qk button:disabled{ opacity: .45; cursor: default; }
.px-qk .px-auto{ text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; border-color: #23346A; background: #101A3A; color: #DBE4FF; } .px-qk .px-auto svg{ width: 12px; height: 12px; flex: none; }
.px-qk .px-auto.on{ border-color: #2F6BFF; color: #FFFFFF; box-shadow: 0 0 10px rgba(47,107,255,.4); }
.px-qk button.press:not(:disabled), .px-amt > button.press:not(:disabled){ border-color: #2F6BFF; background: #18275A; color: #FFFFFF; }
.px-pl{ flex: none; height: 28px; display: grid; place-items: center; border-radius: 10px; border: 1px solid #1F8A4C; background: rgba(20,120,60,.2); color: #7DFFB0; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.px-pl.neg{ border-color: #8A1F1F; background: rgba(120,20,20,.2); color: #FF8A8A; }
/* the lamp: DriveX's traffic light, a radial glass face in a dark ring. Amber SHOOT, green Auto, red Stop. */
.tl{ position: relative; overflow: hidden; box-sizing: border-box; border-radius: 14px; border: 3px solid #0B0E14; height: 84px; min-height: 0; cursor: pointer; padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); text-transform: uppercase; color: #FFFFFF;
  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); text-shadow: 0 1px 2px rgba(0,0,0,.45); transition: filter .12s, box-shadow .12s; }
.tl b{ font-family: "Russo One", "Arial Black", sans-serif; font-weight: 400; font-size: 23px; letter-spacing: .06em; line-height: 1; transform: skewX(-8deg); white-space: nowrap; }
.tl span{ font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tl.gold{ --c: #C27A0C; --hi: #F4B43C; --lo: #5E2C03; --halo: rgba(255,165,40,.5); text-shadow: 0 1px 2px rgba(70,30,0,.65); }
.tl.green{ --c: #11916D; --hi: #3FD3A5; --lo: #06503C; --halo: rgba(30,230,175,.45); }
.tl.red{ --c: #B81E16; --hi: #EC5A46; --lo: #640B07; --halo: rgba(255,50,35,.5); }
.tl.press:not(:disabled):not(.wait){ filter: brightness(1.24) saturate(1.14); box-shadow: 0 0 0 1px #262B36, 0 0 34px var(--halo), inset 0 0 0 1px rgba(255,255,255,.32), inset 0 0 16px rgba(0,0,0,.15); }
.tl.wait, .tl:disabled{ filter: grayscale(.35) brightness(.6); box-shadow: 0 0 0 1px #262B36, inset 0 0 0 1px rgba(255,255,255,.1); cursor: default; }
.tl:focus-visible, .px-qk button:focus-visible, .px-amt button:focus-visible, .px-rack:focus-visible, .px-seg button:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
:lang(ka) .tl b{ font-family: var(--dx-ui, "Barlow Condensed", sans-serif); font-weight: 800; transform: none; letter-spacing: 0; font-size: 20px; }
:lang(ka) .px-qk .px-auto{ letter-spacing: 0; font-size: 12px; }

/* Auto Play's rule: which ball */
.px-seg{ flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 44px; min-height: 44px; border: 1px solid #1A2650; border-radius: 10px; overflow: hidden; }
.px-seg button{ border: 0; background: #050A1A; color: #8792B4; font-family: var(--dx-ui, "Barlow Condensed", sans-serif); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.px-seg button + button{ border-left: 1px solid #1A2650; }
.px-seg button.on{ background: #2F6BFF; color: #FFFFFF; }

/* phones: tighter */
@media (max-width: 430px){ .sp-slot.px-slot{ padding: 8px; } .px-left, .tl{ height: 78px; } .px-qk{ height: 26px; } .tl b{ font-size: 21px; } .px-info{ font-size: 13px; gap: 8px; } .px-info-mx{ font-size: 20px; } .px-amt > button{ width: 40px; } }
@media (max-width: 372px){ .px-info-ch{ display: none; } .px-amt > button{ width: 34px; } .px-amt > .px-amt-v{ font-size: 17px; } }
/* desktop: the slot is a console under the table */
@media (min-width: 960px){ .sp-slot.px-slot{ max-width: 620px; padding: 14px; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .px-left, .tl{ height: 92px; } .px-qk{ height: 32px; } .tl b{ font-size: 26px; } .px-rack{ width: 44px; height: 30px; } }
/* landscape phones: the panel sits on the right of the table */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){ .px-row{ grid-template-columns: minmax(0, 1fr); } .px-left, .tl{ height: 70px; } .px-info-ch{ display: none; } }
@media (prefers-reduced-motion: reduce){ .px-msg{ transition: opacity .2s; transform: none; } }