/* DriveX Hold: the solo slot on DriveX's kit (drivex.css is untouched).
   [amount | main lamp] / the five targets / [Auto cashout | Auto play]. */
.dxs.dxs--solo{ grid-template-rows: auto auto auto; row-gap: 10px; }
.dxs--solo > .tl.sl-l{ grid-column: 1; }
.dxs--solo > .dxh-tgts{ grid-column: 1 / -1; grid-row: 2; }
.tr-app .dxs--solo > .dxh-acb{ grid-column: 1; grid-row: 3; }
.tr-app .dxs--solo > .dxh-play{ grid-column: 2; grid-row: 3; }
.tr-app .dxs--solo > .dxs-pill{ white-space: nowrap; overflow: hidden; }
/* no press-shrink: button sizes never change while the pedal is held */
.dxs--solo .tl, .dxs--solo .tl:active:not(:disabled){ transform: none; }
@media (max-width: 430px){ .dxs.dxs--solo{ row-gap: 8px; } }
@media (max-height: 520px){ .dxs.dxs--solo{ row-gap: 6px; } }
@media (max-width: 380px){ .tr-app .dxs--solo > .dxs-pill{ letter-spacing: .03em; font-size: 11.5px; gap: 6px; } }

/* the gold lamp: Strike drive */
.tl--gold{ --c: rgb(200,116,10); --hi: rgb(242,172,58); --lo: rgb(112,52,4); --halo: rgba(255,160,50,.5); text-shadow: 0 1px 2px rgba(60,20,0,.55); }
.dxs--solo > .tl--gold b, .dxs--solo > .tl.fw b{ font-size: min(22px, calc((50vw - 44px) / 8.3)); letter-spacing: .03em; }
@media (min-width: 768px){ .dxs--solo > .tl--gold b, .dxs--solo > .tl.fw b{ font-size: 22px; letter-spacing: .08em; } }
/* Finished: the lamp stays lit (it is a result, not a locked control); Finish drive under 1.01x is unlit */
.tl.cashed:disabled, .tr-app .tl.cashed:disabled{ filter: none; }
.tl.cashed span{ font-size: 16px; }
.tl.wait{ filter: grayscale(.3) brightness(.62); box-shadow: 0 0 0 1px #262B36, inset 0 0 16px rgba(0,0,0,.45); pointer-events: none; }

/* POWER: the pedal. Amber at idle, red at full power (the colour comes from the engine, frame by frame). */
.tl.gas, .tl.gas *, .tr-app--flying .tc.dx, .tr-app--flying .tc.dx *{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tl.gas *{ pointer-events: none; }
.tl.gas, .tr-app .tl.gas{ --c: rgb(200,116,10); --hi: rgb(242,172,58); --lo: rgb(112,52,4); --halo: rgba(255,160,50,.5);
  touch-action: none; padding-left: 26px; padding-right: 26px; text-shadow: 0 1px 2px rgba(60,20,0,.55); transition: filter .12s, box-shadow .12s; }
.tr-app--flying .tc.dx{ touch-action: none; }
.tl.gas.held{ filter: brightness(1.12) saturate(1.1); box-shadow: 0 0 0 1px #262B36, 0 0 34px var(--halo), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 16px rgba(0,0,0,.2); }
.tl.gas .thr{ position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 0; opacity: 0; transition: opacity .25s;
  background: linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,.3)); box-shadow: 0 -2px 12px rgba(255,255,255,.55); }
.tl.gas .thr::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF; }
.tl.gas .chev{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 2px; z-index: 1; max-width: none; overflow: visible; }
.tl.gas .chev i{ width: 14px; height: 9px; opacity: .28; transition: opacity .1s, filter .1s; background: currentColor; clip-path: polygon(50% 0, 100% 70%, 82% 100%, 50% 45%, 18% 100%, 0 70%); }
.tl.gas .chev i.on{ opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
.tl.gas:not(.held) .chev i{ animation: dxh-chev 1.4s infinite; }
.tl.gas:not(.held) .chev i:nth-child(2){ animation-delay: .18s; }
.tl.gas:not(.held) .chev i:nth-child(3){ animation-delay: .36s; }
@keyframes dxh-chev{ 40%{ opacity: .85; } }
.tl.gas > b{ z-index: 1; }
.tl.gas > #dxh-lab{ z-index: 1; font-size: 12px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; min-height: 14px; }
.tl.gas.autodrv{ padding-left: 4px; padding-right: 4px; }
.tl.gas.autodrv .chev{ display: none; }
.tl.gas b.ap{ white-space: normal; overflow: visible; line-height: 1.05; letter-spacing: .08em; text-align: center; }
.tl.gas b.ap .nw{ white-space: nowrap; font: inherit; letter-spacing: inherit; text-transform: uppercase; }
.lx{ font-style: normal; text-transform: none; }
@media (max-width: 430px){
  .tl.gas > #dxh-lab{ letter-spacing: .06em; font-size: 11px; }
  .tl.gas b.ap{ font-size: min(19px, calc((50vw - 40px) / 8.4)); letter-spacing: .02em; }
}
@media (max-width: 340px){ .tl.gas, .tr-app .tl.gas{ padding-left: 6px; padding-right: 6px; } .tl.gas .chev{ display: none; } }

/* the five targets (the multipliers the gears shift at) */
.dxh-tgts{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dxh-tgts button{ height: 31px; min-width: 0; padding: 0; border-radius: 12px; border: 1px solid #23346A; background: #101A3A; color: #DBE4FF; font: 800 15px/1 var(--font-primary); letter-spacing: .04em; font-variant-numeric: tabular-nums; cursor: pointer; }
.dxh-tgts button.sel{ background: linear-gradient(180deg, rgb(242,172,58), rgb(200,116,10)); border-color: rgb(255,196,110); color: #FFFFFF; text-shadow: 0 1px 2px rgba(60,20,0,.55); box-shadow: 0 0 12px rgba(255,165,55,.55); }
.dxh-tgts button:disabled{ opacity: .35; cursor: default; }
.dxh-tgts button.past{ opacity: .3; pointer-events: none; }
.dxh-tgts button:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (hover: hover){ .dxh-tgts button:not(:disabled):not(.sel):hover{ border-color: var(--e-blue); } }
@media (max-width: 430px){ .dxh-tgts button{ height: 30px; font-size: 14px; } }
@media (max-height: 520px){ .dxh-tgts button{ height: 26px; } }

/* the scene's lines: STRIKE total / CASHED OUT over the number while it runs; the offer under the waiting line */
.dx .cc--flying .cc-kicker:not(:empty){ display: block; color: #FFFFFF; font-size: clamp(13px, 1.5vw, 18px); letter-spacing: .24em; }
.dx .cc--idle .cc-kicker{ top: 0; display: block; font-family: var(--dx-display, var(--font-primary)); font-size: clamp(20px, 3.4vw, 34px); letter-spacing: .08em; color: #FFFFFF; white-space: nowrap; }
.dx .cc--idle .cc-num:empty{ display: none; }
.dxh-note{ position: absolute; left: 0; top: clamp(22px, 2.6vw, 32px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; white-space: nowrap; text-align: center; }
.dxh-note b{ font: 800 clamp(15px, 1.8vw, 20px)/1 var(--font-primary); letter-spacing: .2em; text-transform: uppercase; color: rgb(242,172,58); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dxh-note span{ font: 700 clamp(11px, 1.1vw, 13px)/1 var(--font-primary); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tr-app .alert-toast.alert-toast--soft{ color: #FFFFFF; }

/* Auto play sheet */
.drawer.drawer--ap{ background: #0A1128; border-color: #1A2650; max-width: 560px; margin: 0 auto; }
.drawer--ap::before{ background: #23346A; }
.ap-body{ display: flex; flex-direction: column; gap: 12px; overflow: auto; -webkit-overflow-scrolling: touch; }
.ap-tabs{ flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #050A1A; border: 1px solid #1A2650; border-radius: 12px; padding: 4px; }
.ap-tabs button{ height: 40px; border: 0; border-radius: 9px; background: none; color: #8796C4; font: 800 16px/1 var(--font-primary); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ap-tabs button.on{ background: #101A3A; color: #FFFFFF; box-shadow: inset 0 0 0 1px #2F6BFF; }
.ap-desc{ margin: 0; color: #C9D4F5; font-size: 15px; line-height: 1.35; font-weight: 600; }
.ap-lab{ display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8796C4; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ap-lab b{ color: #FFFFFF; text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ap-chips{ flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ap-chips button{ height: 40px; min-width: 0; padding: 0; border-radius: 10px; border: 1px solid #1A2650; background: #050A1A; color: #DBE4FF; font: 800 16px/1 var(--font-primary); font-variant-numeric: tabular-nums; cursor: pointer; }
.ap-chips button.on{ border-color: #2F6BFF; background: #101A3A; color: #FFFFFF; box-shadow: 0 0 10px rgba(47,107,255,.45); }
.ap-hint{ margin: -4px 2px 0; color: #7F8BB0; font-size: 13px; font-weight: 600; }
.ap-sw{ flex: none; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #DBE4FF; font: 700 14px/1 var(--font-primary); letter-spacing: .04em; text-transform: none; cursor: pointer; }
.ap-sw i{ position: relative; width: 38px; height: 22px; border-radius: 11px; background: #1A2547; transition: background .2s; }
.ap-sw i::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8796C4; transition: left .2s, background .2s; }
.ap-sw.on i{ background: #2F6BFF; }
.ap-sw.on i::after{ left: 19px; background: #FFFFFF; }
.ap-body .ap-rl{ flex: none; }
.ap-step{ display: flex; align-items: center; gap: 10px; }
.ap-step > b{ flex: none; width: 64px; display: flex; flex-direction: column; gap: 3px; color: #8796C4; font-size: 14px; font-weight: 700; }
.ap-step > b em{ font-style: normal; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ap-step .ap-rl{ flex: 1; min-width: 0; }
.ap-stops{ flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-stops label{ display: flex; flex-direction: column; gap: 6px; color: #8796C4; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ap-stops input{ box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #1A2650; background: #050A1A; color: #FFFFFF; font: 800 17px/1 var(--font-primary); outline: none; }
.ap-stops input:focus{ border-color: #2F6BFF; }
.ap-sum{ flex: none; border: 1px solid #1A2650; border-radius: 12px; padding: 6px 14px; background: #050A1A; }
.ap-sum div{ display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; color: #C9D4F5; font-size: 15px; font-weight: 600; }
.ap-sum div b{ color: #FFFFFF; font-variant-numeric: tabular-nums; }
.tr-app .tl.ap-go, .tl.ap-go{ flex: none; min-height: 52px; height: 52px; font-size: 19px; font-weight: 800; letter-spacing: .08em; }

/* the Auto play sheet's Start button stays in view under the scrolling settings */
.drawer--ap{ display: flex; flex-direction: column; }
.drawer--ap .ap-body{ flex: 1 1 auto; min-height: 0; }
.ap-foot{ flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #1A2650; background: #0A1128; }
.ap-foot .tl.ap-go:disabled{ filter: grayscale(.8) brightness(.55); }

/* a finished drive: the car leaves with the win, the number stays the finish in green (red is a miss) */
.dx .cc--crashed.cc--won .cc-num{ color: #33E07E; text-shadow: 0 0 calc(var(--r) * .05) rgba(51,224,126,.75); animation: none; }

/* history: a chain's steps and the strike tag over the cashout */
.dxh-hx-x small{ display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; font-weight: 700; }
.dxh-steps{ margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.dxh-repro{ color: #33E07E; }

/* one slot, not two: on wide screens it keeps the width of a slot pair's half and a bit, centred */
@media (min-width: 768px){ .tr-app--solo .dxs.dxs--solo{ width: 100%; max-width: 720px; margin: 0 auto; } }

/* phones: the scene row follows the frame the scene picks for the screen (1.5 : 1, 1.35 : 1 on tall, 1.2 : 1 on very tall phones; bars are 16% each) */
@media (max-width: 599px) and (max-aspect-ratio: 100/160){ .tr-app--solo .tr-chartrow, .tr-app--solo .tr-stage .tr-chartrow{ aspect-ratio: 1.023; } }
@media (max-width: 599px) and (max-aspect-ratio: 100/190){ .tr-app--solo .tr-chartrow, .tr-app--solo .tr-stage .tr-chartrow{ aspect-ratio: 0.909; } }

/* one slot: always a single column (the kit's 768 px two-slot grid would park it in the left half) */
.tr-app--solo .tr-right.tr-right--slots{ display: flex; flex-direction: column; }
/* phones and tablets, portrait: the header stays on top and the slot at the bottom; whatever height is left
   goes around the scene as black, where it reads as part of the letterbox bars */
@media (max-width: 959px) and (orientation: portrait){
  .tr-app--solo.tr-app--crash{ justify-content: flex-start; }
  .tr-app--solo .tr-body{ flex: 1 1 auto; }
  .tr-app--solo .tr-left{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; background: #000; }
}

/* the picked target stays lit while Auto power runs to it (the row is locked meanwhile) */
.dxh-tgts button.sel:disabled{ opacity: 1; }

/* a short, wide screen (a phone on its side, the casino's short iframe): the one slot is three rows tall, so under
   the scene it would leave the road a strip. The scene takes the left, the slot the right, with any pointer. */
@media (min-width: 560px) and (orientation: landscape) and (max-height: 540px){
  .tr-app--solo.tr-app--crash{ max-width: none; justify-content: flex-start; }
  .tr-app--solo .tr-body{ flex-direction: row; flex: 1 1 auto; align-items: stretch; }
  .tr-app--solo .tr-left{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .tr-app--solo .tr-stage{ flex: 1 1 auto; }
  .tr-app--solo .tr-chartrow, .tr-app--solo .tr-stage .tr-chartrow{ aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .tr-app--solo .tr-right.tr-right--slots{ width: min(340px, 46vw); justify-content: center; overflow-y: auto; padding: 6px 8px; box-sizing: border-box; }
  .tr-app--solo .dxs.dxs--solo{ max-width: none; }
}

/* the free-round counter lines up with the one slot on wide screens */
@media (min-width: 768px){ .tr-app--solo .tr-right--slots .fr-bar{ width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; } }

/* the StrikeDrive wordmark is wider than the DriveX logo it replaces: a little lower, so it takes about the same room */
.tr-app--solo .th-logo .dx-logo-img{ height: 20px; }
@media (max-width: 430px){ .tr-app--solo .th-logo .dx-logo-img{ height: 14px; } }
@media (max-width: 350px){ .tr-app--solo .th-logo .dx-logo-img{ height: 12px; } }
.fr-wordmark .dx-logo-img{ height: auto; width: min(100%, 300px); }