/* Strike Roulette on the DriveX kit (drivex.css / trade.css / styles.css are untouched).
   One screen: header, previous numbers, the wheel over the road's horizon, then the dock: tools, the table, the chips.
   Phones and tablets: one column. Wide or short-and-wide screens: the wheel on the left, the dock on the right. */
.sr-app{ --teal: #3FD3A5; --win: #33E07E; --blood: #FF1F2D; position: relative; padding: 0 !important; overflow: hidden; background: #030614 !important; justify-content: flex-start;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sr-road{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.sr-app .nb-top{ position: relative; z-index: 30; background: linear-gradient(#02040ACC, #02040A00); }
.sr-app.tr-app--crash .th-balance, .sr-app .th-icon-btn{ background-color: #0B1124D9; }

/* the wordmark (the artifact ships no logo art): white Strike, red Roulette, slanted like the DriveX logos */
.sr-logo{ font-family: var(--dx-display); font-weight: 400; font-size: 22px; line-height: 1; white-space: nowrap; transform: skewX(-8deg); color: #FFFFFF; letter-spacing: .01em; }
.sr-logo b{ font-weight: 400; color: var(--blood, #FF1F2D); text-shadow: 0 0 .3em rgba(255,26,20,.9); }
@media (max-width: 430px){ .sr-app .sr-logo{ font-size: 17px; } }
.sr-logo.fr-wordmark{ display: block; font-size: 30px; text-align: center; margin: 0 auto 6px; }
.sr-logo--big{ position: absolute; left: 50%; top: 20%; z-index: 1; transform: translateX(-50%) skewX(-8deg); font-size: clamp(34px, 9.5vw, 78px); text-shadow: 0 6px 24px rgba(0,0,0,.7); }
@media (min-width: 600px){ .sr-logo--big{ top: 11vh; } }

.sr-body{ position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.sr-stage{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* previous numbers: small coloured tiles, newest first. White dot: landed on a bonus number. Teal bar: a Strike spin */
.sr-hist{ flex: none; height: 32px; display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; padding: 0 24px 4px max(16px, env(safe-area-inset-left, 0px));
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.sr-hist::-webkit-scrollbar{ display: none; }
.sr-app .sr-hc{ flex: none; position: relative; min-width: 30px; height: 28px; margin-top: 2px; border: 0; border-radius: 7px; display: grid; place-items: center; padding: 0 6px; box-sizing: border-box;
  font-family: var(--dx-display); font-size: 14px; color: #FFFFFF; font-variant-numeric: tabular-nums; background: #0B0E16; box-shadow: inset 0 0 0 1px #2A3142; }
.sr-app .sr-hc.r{ background: #B8121D; box-shadow: none; }
.sr-app .sr-hc.g{ background: #0D7A3F; box-shadow: none; }
.sr-hc.bz::before{ content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px #FFFFFF; }
.sr-hc.s::after{ content: ""; position: absolute; left: 5px; right: 5px; bottom: -4px; height: 2px; border-radius: 1px; background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.sr-hc.new{ animation: sr-pop .5s; }
@keyframes sr-pop{ from{ transform: scale(.4); opacity: 0; } }

/* the wheel and its two round buttons */
.sr-wheelbox{ position: relative; flex: 1 1 auto; min-height: 150px; }
.sr-wheelbox canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sr-app .sr-rb{ position: absolute; left: var(--sbx, auto); bottom: var(--sbb, 3px); width: var(--sbw, 74px); height: var(--sbw, 74px); z-index: 3; border: 0; padding: 0; border-radius: 50%;
  background: url(art/sr/spin.webp?v=1) center / 100% 100% no-repeat; cursor: pointer; transition: transform .12s, filter .2s, opacity .2s; filter: drop-shadow(0 5px 10px rgba(0,0,0,.7)); }
.sr-app .sr-rb--cash{ left: var(--cbx, auto); background-image: url(art/sr/cash.webp?v=1); }
.sr-app .sr-rb--spin.stk{ background-image: url(art/sr/strike.webp?v=1); }
.sr-app .sr-rb:disabled{ filter: brightness(.5) saturate(.7) drop-shadow(0 5px 10px rgba(0,0,0,.7)); cursor: default; }
.sr-app .sr-rb--cash:disabled{ opacity: 0; pointer-events: none; }   /* Cash is there only when there is something to cash */
.sr-rb:not(:disabled):active{ transform: scale(.94); filter: brightness(1.3) drop-shadow(0 0 20px rgba(255,30,30,.8)); }
.sr-rb--cash:not(:disabled):active{ filter: brightness(1.3) drop-shadow(0 0 20px rgba(51,224,126,.8)); }
.sr-rb.go{ animation: sr-sbp 2.4s ease-in-out infinite; }
@keyframes sr-sbp{ 50%{ filter: brightness(1.2) drop-shadow(0 0 14px rgba(255,30,30,.65)) drop-shadow(0 5px 10px rgba(0,0,0,.7)); } }
.sr-rb.stk.go{ animation-name: sr-sbg; }
@keyframes sr-sbg{ 50%{ filter: brightness(1.2) drop-shadow(0 0 14px rgba(255,170,40,.7)) drop-shadow(0 5px 10px rgba(0,0,0,.7)); } }
@media (hover: hover){ .sr-rb:not(:disabled):hover{ filter: brightness(1.15) drop-shadow(0 0 12px rgba(255,255,255,.35)) drop-shadow(0 5px 10px rgba(0,0,0,.7)); animation: none; } }
.sr-app .sr-rb:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* the dock */
.sr-dock{ flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
.sr-dock .fr-bar{ margin: 0; }
.sr-above{ position: relative; display: flex; align-items: center; gap: 6px; height: 32px; }
.sr-app .sr-pill{ box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 10px; border: 1px solid #23346A; background: #101A3AE6; color: #DBE4FF; font: 700 13px/1 var(--font-primary); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.sr-app .sr-pill:disabled{ opacity: .35; cursor: default; }
.sr-pill svg{ width: 14px; height: 14px; flex: none; }
@media (hover: hover){ .sr-app .sr-pill:not(:disabled):hover{ border-color: #2F6BFF; color: #FFFFFF; } }
.sr-note{ margin-left: auto; font-weight: 700; font-size: 14px; color: #C9D4F5; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 3px #000; text-transform: uppercase; }
.sr-note b{ color: #FFFFFF; font-weight: 800; }
.sr-note.s b{ color: var(--teal); }
.sr-above.bb > :not(.sr-bonusbar){ visibility: hidden; }
.sr-bonusbar{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; background: rgba(8,11,18,.92); border: 1.5px solid #FFFFFF; box-shadow: 0 0 16px rgba(255,255,255,.45); animation: sr-tin .3s ease-out; }
.sr-bonusbar .h{ font-family: var(--dx-display); font-size: 14px; letter-spacing: .05em; color: #FFFFFF; text-shadow: 0 0 8px rgba(255,255,255,.8); transform: skewX(-8deg); margin-right: 4px; white-space: nowrap; text-transform: uppercase; }
.sr-bonusbar .lb{ display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px 0 2px; border-radius: 7px; background: #10141E; box-shadow: inset 0 0 0 1px #5B6273; }
.sr-bonusbar .lb.hit{ background: #FFFFFF; }
.sr-bonusbar .lb.hit b{ color: #0B0F18; }
.sr-bonusbar .n{ width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-family: var(--dx-display); font-size: 12px; color: #FFFFFF; }
.sr-bonusbar .n.r{ background: #C8141F; } .sr-bonusbar .n.b{ background: #0B0E16; box-shadow: inset 0 0 0 1px #3A4152; } .sr-bonusbar .n.g{ background: #0D7A3F; }
.sr-bonusbar .lb b{ font-family: var(--dx-display); font-weight: 400; font-size: 13px; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: uppercase; }
.sr-bonusbar .wide{ padding: 0 10px; }

/* the table is the artwork; transparent buttons sit exactly on its cells */
.sr-tbl{ position: relative; width: 100%; aspect-ratio: 1920 / 819; background: url(art/sr/table.webp?v=1) center / 100% 100% no-repeat; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.sr-app .sr-tc{ position: absolute; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 4px; transition: background .15s, box-shadow .15s; }
.sr-tc.z{ border-radius: 14% 0 0 14% / 8% 0 0 8%; }
.sr-tc.rb{ border-radius: 999px; }
@media (hover: hover){ .sr-tbl:not(.lock) .sr-tc:hover{ background: rgba(255,255,255,.1); } }
.sr-tbl:not(.lock) .sr-tc:active{ background: rgba(255,255,255,.2); }
.sr-app .sr-tc:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: -2px; }
.sr-tbl.lock .sr-tc{ cursor: default; }
.sr-tc.hit{ background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 3px #FFFFFF, 0 0 16px rgba(255,255,255,.75); z-index: 2; }
.sr-tc.bz{ box-shadow: inset 0 0 0 2.5px #FFFFFF; z-index: 2; }
.sr-tc .bt{ position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font: 800 11px/1.15 var(--font-primary); color: #0B0F18; background: #FFFFFF; border-radius: 6px; padding: 1px 5px; box-shadow: 0 0 8px rgba(255,255,255,.6); white-space: nowrap; pointer-events: none; }
.sr-tc.rb .bt{ bottom: auto; top: 50%; left: auto; right: 12%; transform: translateY(-50%); }
.sr-tc .sf{ position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font-family: var(--dx-display); font-size: clamp(11px, 3.4vw, 16px); color: #FFFFFF; letter-spacing: .12em; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.sr-tbl.goldspin{ filter: drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.sr-chips{ position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sr-bc{ position: absolute; transform: translate(-50%, -50%); width: var(--cs, 26px); height: var(--cs, 26px); border-radius: 50%; background-size: cover; box-shadow: 0 3px 6px rgba(0,0,0,.7); animation: sr-drop .18s ease-out; }
.sr-bc b, .sr-ch b{ position: absolute; inset: 22%; border-radius: 50%; display: grid; place-items: center; font: 800 calc(var(--cs, 26px) * .36)/1 var(--font-primary); color: #FFFFFF; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sr-bc.s{ box-shadow: 0 0 0 2px var(--teal), 0 0 10px rgba(30,230,175,.8), 0 3px 6px rgba(0,0,0,.7); }
.sr-bc.won{ box-shadow: 0 0 0 2px #FFFFFF, 0 0 14px 3px rgba(51,224,126,.9); }
.sr-bc.lost{ opacity: .35; }
@keyframes sr-drop{ from{ transform: translate(-50%, -80%) scale(1.25); opacity: 0; } }

/* under the table: the chips (the selected one bigger); on a chain the same row is the pot's status; messages over it */
.sr-ctl{ position: relative; height: 58px; }
.sr-chiprow{ height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 4.8% 0 5%; }
.sr-app .sr-ch{ position: relative; flex: none; width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; background: center / cover no-repeat; cursor: pointer; transition: width .18s, height .18s, filter .15s, box-shadow .15s; box-shadow: 0 3px 8px rgba(0,0,0,.7); --cs: 40px; }
.sr-app .sr-ch.sel{ width: 52px; height: 52px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 16px rgba(255,255,255,.6), 0 6px 10px rgba(0,0,0,.7); --cs: 52px; }
.sr-app .sr-ch:disabled{ filter: brightness(.45) saturate(.6); cursor: default; }
.sr-app .sr-ch:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
.sr-chiprow--free{ justify-content: flex-start; gap: 14px; }
.sr-freehint{ font: 700 14px/1.2 var(--font-primary); letter-spacing: .06em; text-transform: uppercase; color: #C9D4F5; text-shadow: 0 1px 3px #000; }
.sr-msg{ height: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid rgba(63,211,165,.6); background: rgba(4,16,26,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 10px; }
.sr-msg b{ font-family: var(--dx-display); font-weight: 400; font-size: 17px; line-height: 1; color: var(--teal); transform: skewX(-8deg); letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sr-msg span{ display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.1; font-weight: 700; letter-spacing: .08em; color: #8FA4D8; text-transform: uppercase; white-space: nowrap; max-width: 100%; }
.sr-steps{ display: flex; gap: 4px; }
.sr-steps i{ width: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); }
.sr-steps i.on{ background: #FFFFFF; box-shadow: 0 0 6px rgba(255,255,255,.9); }
.sr-toasts{ position: absolute; inset: 4px 0; display: grid; pointer-events: none; z-index: 5; }
.sr-toast{ grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font: 800 17px/1 var(--font-primary); letter-spacing: .05em; padding: 0 12px; background: var(--win); color: #04140A; animation: sr-tin .22s ease-out; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-toast.soft{ background: #101A3A; color: #FFFFFF; border: 1.5px solid #2C4079; }
.sr-toast.big{ background: #140409; border: 1.5px solid rgba(255,40,40,.75); font-family: var(--dx-display); font-weight: 400; font-size: 19px; letter-spacing: .03em; color: #FF2A24; text-transform: uppercase; }
.sr-toast.big.win{ background: #04160D; border-color: rgba(51,224,126,.8); color: var(--win); }
.sr-toast.big.strike{ background: #03161A; border-color: rgba(63,211,165,.85); color: var(--teal); }
.sr-toast.big.gold{ background: #0B0F18; border-color: rgba(255,255,255,.9); color: #FFFFFF; }
.sr-toast.big > i{ font-style: normal; display: inline-block; transform: skewX(-8deg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@keyframes sr-tin{ from{ opacity: 0; transform: scale(.96); } }

@media (max-width: 430px){ .sr-app .sr-pill{ height: 28px; padding: 0 9px; font-size: 12px; } .sr-note{ font-size: 13px; } .sr-ctl{ height: 52px; } .sr-app .sr-ch{ width: 36px; height: 36px; --cs: 36px; } .sr-app .sr-ch.sel{ width: 46px; height: 46px; --cs: 46px; } }
@media (max-width: 350px){ .sr-app .sr-pill{ padding: 0 7px; letter-spacing: .03em; gap: 4px; } .sr-note{ font-size: 12px; letter-spacing: 0; } .sr-msg b{ font-size: 15px; } }
@media (max-height: 700px){ .sr-ctl{ height: 46px; } .sr-app .sr-ch{ width: 32px; height: 32px; --cs: 32px; } .sr-app .sr-ch.sel{ width: 40px; height: 40px; --cs: 40px; } .sr-dock{ gap: 6px; } .sr-msg b{ font-size: 15px; } .sr-toast.big{ font-size: 16px; } }

/* tablets, portrait: the same column, a little wider */
@media (min-width: 700px) and (orientation: portrait){ .sr-body{ max-width: 640px; } }
/* wide, or short and wide (a phone on its side, the casino's short iframe): the wheel on the left, the dock on the right */
@media (min-width: 900px), (min-width: 560px) and (orientation: landscape) and (max-height: 560px){
  .sr-body{ max-width: none; flex-direction: row; align-items: stretch; gap: clamp(8px, 2vw, 32px); padding: 0 clamp(8px, 2.5vw, 40px); box-sizing: border-box; }
  .sr-stage{ flex: 1 1 0; min-width: 0; }
  .sr-hist{ padding-left: 0; }
  .sr-dock{ flex: 0 0 auto; width: clamp(300px, 44vw, 620px); justify-content: center; padding-left: 0; padding-right: 0; }
}
@media (min-width: 560px) and (orientation: landscape) and (max-height: 560px){
  .sr-dock{ width: clamp(280px, 46vw, 460px); gap: 5px; padding-bottom: 6px; }
  .sr-above{ height: 28px; } .sr-app .sr-pill{ height: 26px; padding: 0 8px; font-size: 11.5px; } .sr-note{ font-size: 12px; }
  .sr-ctl{ height: 42px; } .sr-app .sr-ch{ width: 30px; height: 30px; --cs: 30px; } .sr-app .sr-ch.sel{ width: 38px; height: 38px; --cs: 38px; }
  .sr-msg b{ font-size: 14px; } .sr-toast.big{ font-size: 15px; } .sr-toast{ font-size: 14px; }
}
@media (min-width: 1100px) and (min-height: 700px){
  .sr-ctl{ height: 70px; } .sr-app .sr-ch{ width: 48px; height: 48px; --cs: 48px; } .sr-app .sr-ch.sel{ width: 62px; height: 62px; --cs: 62px; }
  .sr-above{ height: 38px; } .sr-app .sr-pill{ height: 34px; font-size: 14px; } .sr-note{ font-size: 16px; } .sr-dock{ gap: 12px; }
  .sr-msg b{ font-size: 21px; } .sr-msg span{ font-size: 12.5px; } .sr-toast{ font-size: 20px; } .sr-toast.big{ font-size: 23px; }
}

/* history: the round's numbers as tiles; the tag over the return */
.sr-hx-n{ display: flex; gap: 3px; justify-content: flex-end; flex-wrap: wrap; }
.sr-hx-n i{ font-style: normal; min-width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; padding: 0 3px; box-sizing: border-box; font-family: var(--dx-display); font-size: 11px; color: #FFFFFF; background: #0B0E16; box-shadow: inset 0 0 0 1px #3A4152; }
.sr-hx-n i.r{ background: #C8141F; box-shadow: none; } .sr-hx-n i.g{ background: #0D7A3F; box-shadow: none; }
.sr-hx-tag{ 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); }

/* How to Play cards: the game's own art in the card frame */
.sr-art{ position: relative; width: 100%; aspect-ratio: 300 / 120; border-radius: 12px; background: linear-gradient(#02040B 0%, #0B2466 52%, #07133A 56%, #030719 100%); overflow: hidden; }
.sr-art-tbl{ position: absolute; left: 50%; top: 50%; height: 92%; transform: translate(-50%, -50%); }
.sr-art-chip{ position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.7); }
.sr-art-wheel{ position: absolute; left: 28%; top: 50%; height: 150%; transform: translate(-50%, -50%); animation: sr-turn 14s linear infinite; }
@keyframes sr-turn{ to{ transform: translate(-50%, -50%) rotate(360deg); } }
.sr-art-btn{ position: absolute; top: 50%; height: 62%; transform: translateY(-50%); filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.sr-art-btn.big{ height: 70%; }
.sr-art-pot{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(-8deg); font-family: var(--dx-display); font-weight: 400; font-size: clamp(14px, 4.4vw, 22px); color: var(--teal, #3FD3A5); }
.sr-art-zero{ position: absolute; left: 26%; top: 50%; transform: translate(-50%, -50%); width: 26%; height: 78%; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #0F6B36, #06401F); border: 2px solid #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 800 clamp(24px, 8vw, 40px)/1 Arial, sans-serif; color: #FFFFFF; }
.sr-art-zero small{ font-family: var(--dx-display); font-weight: 400; font-size: 11px; letter-spacing: .12em; margin-top: 4px; }
.sr-art-edge{ position: absolute; left: 66%; top: 50%; transform: translate(-50%, -50%) skewX(-8deg); font-family: var(--dx-display); font-weight: 400; font-size: clamp(15px, 4.6vw, 24px); color: var(--teal, #3FD3A5); white-space: nowrap; }
.sr-art-bb{ inset: auto 6% auto 6%; top: 50%; height: 36px; transform: translateY(-50%); animation: none; }
@media (prefers-reduced-motion: reduce){ .sr-toast, .sr-hc.new, .sr-bc, .sr-bonusbar, .sr-rb.go, .sr-art-wheel{ animation: none; } }

/* the header wordmark keeps its own case and slant on the kit's header */
.sr-app .th-logo{ text-transform: none; height: auto; }
.sr-app .th-logo .sr-logo{ font-size: 22px; }
@media (max-width: 430px){ .sr-app .th-logo .sr-logo{ font-size: 17px; } }
/* wide screens: the wheel keeps to the upper part of its side, so the horizon under it sits near 60% of the
   screen and the road, with its running dashes, fills the rest */
@media (min-width: 900px) and (min-height: 561px){
  .sr-stage{ justify-content: flex-start; }
  .sr-wheelbox{ flex: 0 1 72%; }
  .sr-dock{ padding-bottom: 0; }
}

.sr-logo.fr-wordmark{ text-transform: none; }

/* small fixes after the first pass on phones */
@media (max-width: 360px){ .sr-app .th-logo .sr-logo{ font-size: 15px; } }
.sr-art-btn.big{ height: 60%; }
.sr-art-pot{ font-size: clamp(12px, 3.6vw, 18px); }
.ab-odds td:last-child, .ab-odds th:last-child{ white-space: nowrap; }

/* ── second pass (user, 11 Nov) ── */
/* the status and the messages sit by the wheel, between the two round buttons; the chips are never covered */
.sr-flash{ position: absolute; z-index: 4; left: calc(var(--cbx, 0px) + var(--sbw, 74px) + 8px); right: calc(100% - var(--sbx, 100%) + 8px); bottom: calc(var(--sbb, 3px) + (var(--sbw, 74px) - 50px) / 2); height: 50px; display: grid; pointer-events: none; }
.sr-flash > *{ grid-area: 1 / 1; min-width: 0; }
.sr-flash .sr-msg{ height: 100%; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.sr-flash .sr-toast{ box-shadow: 0 6px 18px rgba(0,0,0,.6); }
@media (max-width: 430px){ .sr-flash{ height: 44px; bottom: calc(var(--sbb, 3px) + (var(--sbw, 74px) - 44px) / 2); } .sr-flash .sr-msg b{ font-size: 14px; } .sr-flash .sr-msg span{ font-size: 9.5px; gap: 5px; letter-spacing: .04em; } .sr-flash .sr-toast{ font-size: 14px; } .sr-flash .sr-toast.big{ font-size: 15px; } .sr-steps i{ width: 10px; } }
/* chips: seven values, each with its value written on the disc; only the chip just placed drops in */
.sr-bc{ animation: none; }
.sr-bc.drop{ animation: sr-drop .18s ease-out; }
.sr-chiprow{ padding: 0 2%; }
.sr-ch.c50, .sr-bc.c50{ filter: hue-rotate(50deg) saturate(1.1); }
.sr-app .sr-ch.c50:disabled{ filter: hue-rotate(50deg) brightness(.45) saturate(.6); }
.sr-app .sr-ch b{ font-size: calc(var(--cs, 40px) * .3); letter-spacing: -.03em; }
.sr-bc b{ font-size: calc(var(--cs, 26px) * .32); }
@media (max-width: 350px){ .sr-app .sr-ch{ width: 30px; height: 30px; --cs: 30px; } .sr-app .sr-ch.sel{ width: 40px; height: 40px; --cs: 40px; } }
/* the loader: the road, the wheel turning slowly over it, the wordmark above */
.sr-loading{ background: #02040B; }
.sr-loading .sr-road{ z-index: 0; }
.sr-ld-wheel{ position: absolute; left: 50%; top: 50%; z-index: 1; width: min(64vw, 46vh, 420px); aspect-ratio: 1; margin: calc(min(64vw, 46vh, 420px) / -2) 0 0 calc(min(64vw, 46vh, 420px) / -2); animation: sr-ld-turn 18s linear infinite; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
@keyframes sr-ld-turn{ to{ transform: rotate(360deg); } }
.sr-loading .sr-logo--big{ top: clamp(28px, 9vh, 90px); z-index: 2; font-size: clamp(30px, 9vw, 72px); }
.sr-loading .loading-content{ z-index: 2; }
@media (prefers-reduced-motion: reduce){ .sr-ld-wheel{ animation: none; } }

/* ── third pass (user, 11 Nov): a bet row instead of a chip tray; chips are drawn and coloured by their worth ── */
.sr-chip{ box-sizing: border-box; border-radius: 50%; border: 2.5px dashed rgba(255,255,255,.92); color: #FFFFFF; font: 800 11px/1 var(--font-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 1px rgba(0,0,0,.4); font-style: normal;
  display: inline-grid; place-items: center; padding: 0;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.3), rgba(255,255,255,0) 46%), var(--chip-c, #555);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.14), 0 2px 5px rgba(0,0,0,.5); }
.sr-chip--c10{ --chip-c: #64748B; } .sr-chip--c50{ --chip-c: #2563EB; } .sr-chip--c1{ --chip-c: #16A34A; } .sr-chip--c5{ --chip-c: #DC2626; }
.sr-chip--c25{ --chip-c: #7C3AED; } .sr-chip--c100{ --chip-c: #18181B; } .sr-chip--c500{ --chip-c: #B45309; }
/* on the table */
.sr-bc.sr-chip{ position: absolute; display: grid; width: var(--cs, 26px); height: var(--cs, 26px); font-size: calc(var(--cs, 26px) * .36); border-width: calc(var(--cs, 26px) * .085); }
.sr-bc.sr-chip.s{ box-shadow: 0 0 0 2px var(--teal), 0 0 10px rgba(30,230,175,.8), 0 3px 6px rgba(0,0,0,.7); }
.sr-bc.sr-chip.won{ box-shadow: 0 0 0 2px #FFFFFF, 0 0 14px 3px rgba(51,224,126,.9); }
/* the bet row: − amount + (the chip beside the amount shows its colour), then the quick amounts */
.sr-ctl{ height: auto; }
.sr-bet{ position: relative; display: flex; align-items: center; gap: 8px; transition: opacity .15s ease; }
.sr-bet.lock{ opacity: .45; }
.sr-bet .sr-bet-amt{ flex: 1 1 150px; min-width: 0; height: 46px; background: #050A1AE6; }
.sr-bet .dxs-amt-v{ display: flex; align-items: center; justify-content: center; gap: 8px; }
.sr-bet .dxs-amt-v .sr-chip{ flex: none; width: 22px; height: 22px; border-width: 2px; }
.sr-bet .dxs-amt > button:disabled{ opacity: .35; }
.sr-bet-qk{ flex: none; display: flex; align-items: center; gap: 6px; }
.sr-app .sr-bet-qk .sr-chip{ width: 40px; height: 40px; font-size: 13px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.sr-app .sr-bet-qk .sr-chip.sel{ transform: scale(1.1); box-shadow: 0 0 0 2px #FFFFFF, 0 0 14px rgba(255,255,255,.55), inset 0 0 0 3px rgba(0,0,0,.3); }
.sr-app .sr-bet-qk .sr-chip:disabled{ cursor: default; }
.sr-app .sr-bet-qk .sr-chip:active:not(:disabled){ transform: scale(.94); }
.sr-app .sr-bet-qk .sr-chip:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
.sr-bet .sr-freehint{ flex: 2 1 0; min-width: 0; font-size: 12px; }
@media (max-width: 430px){ .sr-bet{ gap: 6px; } .sr-bet .sr-bet-amt{ height: 42px; } .sr-app .sr-bet-qk{ gap: 4px; } .sr-app .sr-bet-qk .sr-chip{ width: 36px; height: 36px; font-size: 12px; } }
@media (max-width: 350px){ .sr-app .sr-bet-qk .sr-chip{ width: 30px; height: 30px; font-size: 10.5px; border-width: 2px; } .sr-bet .dxs-amt > button{ width: 32px; } .sr-bet .dxs-amt-v .sr-chip{ display: none; } }
@media (max-height: 700px){ .sr-bet .sr-bet-amt{ height: 38px; } .sr-app .sr-bet-qk .sr-chip{ width: 32px; height: 32px; font-size: 11px; } }
@media (min-width: 560px) and (orientation: landscape) and (max-height: 560px){ .sr-bet .sr-bet-amt{ height: 34px; } .sr-app .sr-bet-qk .sr-chip{ width: 30px; height: 30px; font-size: 10.5px; border-width: 2px; } }
@media (min-width: 1100px) and (min-height: 700px){ .sr-bet .sr-bet-amt{ height: 54px; } .sr-bet .dxs-amt-v{ font-size: 22px; } .sr-app .sr-bet-qk .sr-chip{ width: 48px; height: 48px; font-size: 15px; border-width: 3px; } .sr-bet{ gap: 12px; } .sr-app .sr-bet-qk{ gap: 8px; } }
/* typing the amount on desktop: the kit's popover, above the row */
.sr-bet .bp{ bottom: calc(100% + 8px); left: 0; right: auto; width: 340px; min-width: 0; max-width: 100%; z-index: 60; background: #0A1128; border-color: #1A2650; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.sr-bet .bp-field{ background: #050A1A; border-color: #23346A; }
.sr-bet .bp-chip{ background: #101A3A; border-color: #1A2650; color: #C9D4F5; }
.sr-bet .bp-ok{ background: #11916D; color: #FFFFFF; }
/* the How to Play card's chips */
.sr-art-chip.sr-chip{ position: absolute; display: grid; font-size: 10px; border-width: 2px; }

/* ── the lines and crossings: one chip on two or four numbers ── */
.sr-app .sr-tz{ position: absolute; z-index: 2; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 999px; cursor: pointer; transition: background .12s, box-shadow .12s; }
.sr-tbl.lock .sr-tz{ cursor: default; }
@media (hover: hover){ .sr-tbl:not(.lock) .sr-tz:hover{ background: rgba(255,255,255,.34); box-shadow: 0 0 10px rgba(255,255,255,.6); } }
.sr-tbl:not(.lock) .sr-tz:active{ background: rgba(255,255,255,.5); }
.sr-app .sr-tz:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 1px; }
.sr-chips{ z-index: 4; }

/* bonus tags on small tables: smaller, so the number under them stays readable */
@media (max-width: 430px){ .sr-tc .bt{ font-size: 8.5px; padding: 0 3px; bottom: 2%; } }

/* the free-round counter sits over the sky and the mesas: a solid plate, so it reads on any backdrop (user, 11 Nov) */
.sr-dock .fr-bar{ min-height: 40px; padding: 0 12px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; border-radius: 10px; background: #06231B; border: 1.5px solid #1FBF8F; box-shadow: 0 0 14px rgba(31,224,160,.28), 0 4px 12px rgba(0,0,0,.55); font-size: 14px; color: #FFFFFF; }
.sr-dock .fr-bar-ico{ color: #3FE0B0; }
.sr-dock .fr-bar-ico svg{ width: 18px; height: 18px; }
.sr-dock .fr-bar-text{ font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-dock .fr-bar-bet{ color: #A9E8D4; font-weight: 700; }
.sr-dock .fr-bar-win{ margin-left: auto; font-weight: 800; font-size: 15px; color: #33E07E; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 430px){ .sr-dock .fr-bar{ min-height: 36px; font-size: 13px; } .sr-dock .fr-bar-win{ font-size: 14px; } }
/* a locked bet row dims its controls, not the free-round hint beside them */
.sr-bet.lock{ opacity: 1; }
.sr-bet.lock .sr-bet-amt, .sr-bet.lock .sr-bet-qk{ opacity: .45; }
.sr-bet .sr-freehint{ color: #FFFFFF; font-weight: 800; font-size: 13px; line-height: 1.25; }

/* ── the two wallets: Balance | MYBC Coin, above the previous numbers (shown once the player has coins) ── */
.sr-wallets{ flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); }
.sr-app .sr-wal{ min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #23346A; background: #0B1124E6; color: #C9D4F5; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; cursor: pointer; transition: border-color .15s, background .15s; }
.sr-wal small{ font: 700 10px/1 var(--font-primary); letter-spacing: .12em; text-transform: uppercase; color: #8796C4; }
.sr-wal b{ font: 800 15px/1 var(--font-primary); font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sr-app .sr-wal.on{ border-color: #FFB02E; background: #1A1405; box-shadow: 0 0 12px rgba(255,176,46,.35); }
.sr-wal.on small{ color: #FFC766; }
.sr-app .sr-wal:disabled{ cursor: default; }
.sr-app .sr-wal:disabled:not(.on){ opacity: .45; }
.sr-app .sr-wal:focus-visible{ outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (min-width: 900px), (min-width: 560px) and (orientation: landscape) and (max-height: 560px){ .sr-wallets{ padding-left: 0; padding-right: 0; max-width: 360px; } }
@media (max-height: 620px){ .sr-app .sr-wal{ height: 32px; flex-direction: row; align-items: center; gap: 6px; } .sr-wal b{ font-size: 13px; } }
.sr-later{ display: block; margin: 10px auto 0; padding: 6px 12px; border: 0; background: none; color: #A9B6DC; font: 700 13px/1 var(--font-primary); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }

/* ── Auto play sheet: StrikeDrive's (hold.css) ── */
.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-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-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); }
.ap-chips button{ font-size: 14px; }
.ap-warn{ color: #FF8A8A; }
/* the Auto pill: a red LED + rounds left while it runs; Repeat stands out on an empty table */
.sr-app .sr-pill.sr-ap.on{ border-color: #FF2D3D; background: #2A0A10E6; color: #FFFFFF; }
.sr-ap b{ font-variant-numeric: tabular-nums; }
.sr-ap-led{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: #FF2D3D; box-shadow: 0 0 6px 1px rgba(255,45,61,.85); animation: ap-led 1s steps(1, end) infinite; }
/* Repeat lights up blue when there is something to repeat */
.sr-app .sr-pill.sr-rep:not(:disabled){ border-color: #2F6BFF; color: #FFFFFF; background: #12245AE6; }
/* phones: Undo, Repeat and Clear are icons only (the full name is in title / aria-label) */
@media (max-width: 430px){ .sr-app .sr-ico{ font-size: 0; gap: 0; padding: 0 8px; } .sr-app .sr-ico svg{ width: 15px; height: 15px; } }
/* the amount box: below 400px the amount itself needs the room, so its little chip goes (the quick chips still show the colour) */
@media (max-width: 400px){ .sr-bet .dxs-amt-v .sr-chip{ display: none; } }
/* the narrowest phones: Auto is its icon (or the LED + rounds left while it runs), its word goes */
@media (max-width: 345px){ .sr-ap-t{ display: none; } .sr-app .sr-pill.sr-ap{ padding: 0 8px; } }
/* landscape phones: the controls column is narrow, so the same compact pills as on a portrait phone */
@media (min-width: 560px) and (orientation: landscape) and (max-height: 560px){
  .sr-app .sr-ico{ font-size: 0; gap: 0; padding: 0 7px; } .sr-app .sr-ico svg{ width: 14px; height: 14px; }
}
/* the pills follow the controls column's own width, whatever the screen: icons when it is narrow */
.sr-dock{ container-type: inline-size; }
@container (max-width: 600px){
  .sr-app .sr-ico{ font-size: 0; gap: 0; padding: 0 8px; } .sr-app .sr-ico svg{ width: 15px; height: 15px; }
}
@container (max-width: 320px){ .sr-ap-t{ display: none; } .sr-app .sr-pill.sr-ap{ padding: 0 8px; } }