/* Spader: charcoal, brass and ivory. The table itself is a WebGL scene; this is the chrome around it. */
:root {
  --bg: #0c0c0d; --panel: #141416; --panel-2: #1b1b1e; --line: #2b2b2f; --line-2: #3a3a3f;
  --ivory: #ece4d2; --muted: #a39d91; --dim: #8a847a;   /* dim still reads 4.5:1 on the panels: small labels use it */
  --gold: #c9a45c; --gold-hi: #e2c483; --gold-lo: #8d7038;
  --win: #d8b86e; --loss: #b85a4f;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Springs, solved ahead of time by springline (MIT) and written as CSS linear() curves: real spring
     motion with no script running. press .3s, a hair of overshoot; pop .5s, a 5% bounce; sheet .5s, no
     bounce; settle .6s, slow and soft. Each is meant for the duration given. */
  --spring-press: linear(0, 0.0059 1%, 0.0254 2.3%, 0.0944 5%, 0.5246 16.3%, 0.6256 19.3%, 0.7129 22.3%, 0.7857 25.3%, 0.845 28.3%, 0.8918 31.3%, 0.9313 34.7%, 0.9599 38%, 0.983 42%, 0.9978 46.3%, 1.0059 51%, 1.0091 59.7%, 1);
  --spring-pop: linear(0, 0.0074 1%, 0.0307 2.2%, 0.1126 4.6%, 0.5961 14.2%, 0.7958 19%, 0.8719 21.4%, 0.9364 24%, 0.9839 26.6%, 1.0166 29.2%, 1.0334 31.2%, 1.0441 33.2%, 1.0503 35.4%, 1.052 37.8%, 1.0457 42.4%, 1.0121 55.8%, 1.0012 63.8%, 0.9973 74.2%, 1);
  --spring-sheet: linear(0, 0.0054 1.2%, 0.0219 2.6%, 0.0886 5.8%, 0.4747 18.6%, 0.5661 22%, 0.6463 25.4%, 0.715 28.8%, 0.7727 32.2%, 0.823 35.8%, 0.8635 39.4%, 0.9019 43.8%, 0.9338 48.8%, 0.9575 54.2%, 0.9747 60.2%, 0.9864 67%, 0.9939 75%, 1);
  --spring-settle: linear(0, 0.0056 1%, 0.0196 2%, 0.0803 4.5%, 0.4637 15.3%, 0.5619 18.5%, 0.6423 21.5%, 0.7139 24.7%, 0.7757 28%, 0.8277 31.5%, 0.8718 35.3%, 0.909 39.7%, 0.9383 44.5%, 0.9602 49.8%, 0.9765 56.2%, 0.987 63.2%, 0.9938 71.8%, 1);
  --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms; --ease-smooth-out: cubic-bezier(.22, 1, .36, 1); --blur-large: 8px;   /* transitions.dev's motion scale, for the UI's chrome */
}
@supports not (transition-timing-function: linear(0, 1)) {   /* older browsers: the nearest cubic curves */
  :root { --spring-press: cubic-bezier(.25, .9, .3, 1.02); --spring-pop: cubic-bezier(.2, .9, .25, 1.15); --spring-sheet: cubic-bezier(.2, .8, .2, 1); --spring-settle: cubic-bezier(.25, .8, .25, 1); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { color: var(--ivory); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 700 10px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 4px; }
@media (hover: none) { kbd { display: none; } }

/* The page never scrolls or resizes itself: the app is pinned to the viewport, and the dock keeps one
   height in every game state, so the table (and its camera) never zooms while you play. */
:root { --dock-h: 150px; }
/* One column that may shrink below its content (the bar's row of items must never widen the page). The notch and
   status-bar insets are kept here, once: the bar and the dock inside add only their own padding. */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr var(--dock-h); overflow: hidden; background: var(--bg); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
body:not(.ready) .app { visibility: hidden; }

/* ---- the splash: drawn by index.html before any script runs; it becomes a message if the salon can't open ---- */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: var(--bg); color: var(--ivory); text-align: center; font: 500 15px/1.45 Inter, system-ui, sans-serif; transition: opacity var(--duration-fast) var(--ease-smooth-out), visibility 0s var(--duration-fast); }
.splash svg { width: 54px; height: 54px; filter: drop-shadow(0 6px 18px rgba(201, 164, 92, .3)); }
body:not(.ready) .splash .keylight { animation: keylight 2.4s ease-in-out infinite; }   /* (only while it waits: a splash faded out keeps its animations running, so it is also removed: app.mjs) */
.splash p { margin: 0; max-width: 34em; color: #cfc8ba; }
.splash .splash-word { font: 500 26px/1 "Bodoni Moda", Georgia, serif; letter-spacing: .01em; }
.splash .splash-word i { font-style: italic; font-weight: 600; color: var(--gold-hi); }
.splash .splash-why { font-size: 13px; color: var(--muted); }
.splash .pill { margin-top: 4px; }
.splash:not(.failed) .splash-fail, .splash.failed .splash-wait { display: none; }
body.ready .splash:not(.failed) { opacity: 0; visibility: hidden; pointer-events: none; }
body.reduced .splash .keylight { animation: none; }

/* ---- top bar ---------------------------------------------------------------------------- */
.top { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 20px; padding: 10px 16px; position: relative; z-index: 3; min-width: 0; }
/* only the name gives way when the bar is short of room (phones drop it below, keeping the spade); the wallet,
   the shoe and the buttons keep their size, so the settings button can never be pushed off the screen */
.top > .wallet, .top > .shoe-meter, .top > .tools { flex: none; }
.top > .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Progressive blur: the table runs up under the bar and is blurred more the higher it goes, in three
   stacked backdrop-filter layers (2-16 px), each masked to its own band so the steps blend; a tint
   on top keeps the numbers readable. The effect reaches a little below the bar and fades out. (Each
   layer is recomposited whenever the table draws: three look as smooth as five did under the tint.) */
.top-blur { position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(10, 10, 11, .82), rgba(10, 10, 11, .55) 62%, rgba(10, 10, 11, 0)); }
.top-blur i { position: absolute; inset: 0; --m1: 0%; --m2: 20%; --m3: 40%; --m4: 60%;
  -webkit-mask-image: linear-gradient(to top, transparent var(--m1), #000 var(--m2), #000 var(--m3), transparent var(--m4)); mask-image: linear-gradient(to top, transparent var(--m1), #000 var(--m2), #000 var(--m3), transparent var(--m4)); }
.top-blur i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); --m1: 0%; --m2: 14%; --m3: 30%; --m4: 46%; }
.top-blur i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); --m1: 30%; --m2: 46%; --m3: 58%; --m4: 72%; }
.top-blur i:nth-child(3) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); --m1: 58%; --m2: 72%; --m3: 100%; --m4: 100%; }
/* Firefox (and Zen, built on it) has no blur here: its renderer gives each backdrop-filter large buffers of its own and
   stops reusing its cached tiles, so while the table moves under a blur (every frame of a spin or a strike) it redraws
   the whole window, where Chrome and Safari hand the canvas to macOS as a layer of its own: a MacBook Air ran hot in Zen
   and cool in Chrome on the same table. There the bands are tinted gradients alone, a little deeper so the controls
   keep their contrast; and the lobby's glass panes are a little more opaque (below). */
@supports (-moz-appearance: none) { .top-blur i { display: none; } .top-blur { background: linear-gradient(rgba(10, 10, 11, .9), rgba(10, 10, 11, .68) 62%, rgba(10, 10, 11, 0)); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top-blur { background: linear-gradient(#111113, rgba(12, 12, 13, .9) 70%, rgba(12, 12, 13, 0)); } }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.brand .mark { display: block; width: 32px; height: 32px; flex: none; }
.brand .mark svg { width: 100%; height: 100%; display: block; }
.brand .word { display: grid; line-height: 1; }
.wordmark { font: 500 21px/1 "Bodoni Moda", Georgia, serif; letter-spacing: .01em; color: var(--ivory); white-space: nowrap; }
.wordmark i { font-style: italic; font-weight: 600; color: var(--gold-hi); }
.brand .wordmark { font-size: 21px; }
.brand small { font: 700 9px/1.4 Inter, system-ui, sans-serif; letter-spacing: .42em; color: var(--gold); }
.bank { display: flex; gap: 22px; margin-left: auto; }
.bank > div { display: grid; line-height: 1.05; }
.bank .k { white-space: nowrap; font: 700 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.bank output { font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
#balance { color: var(--gold-hi); }
.shoe-meter { display: flex; align-items: center; gap: 9px; font: 600 12px/1.2 Inter, system-ui, sans-serif; color: var(--muted); }
.shoe-words { display: grid; } .shoe-words b { font: 700 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
/* Magic UI circular progress: filled arc, track arc, 5% gaps, both ease on change */
.gauge { width: 34px; height: 34px; flex: none; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge circle.g1, .gauge circle.g2 { transform-box: view-box; transform-origin: 50px 50px; stroke-dashoffset: 0; transition: stroke-dasharray 1s ease, transform 1s ease; }
.gauge circle.gm { fill: #f2c417; stroke: #0c0c0d; stroke-width: 2; }
.tools { display: flex; gap: 6px; }
.icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); border: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-smooth-out), background var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out); }
/* small round buttons keep their look but take a 44px finger (an invisible apron round them) */
.icon::after, .tray-toggle::after, .rt-nb .pill::after { content: ''; position: absolute; inset: min(0px, (100% - 44px) / 2); }
.tray-toggle::after { inset: -7px -2px; }
@media (hover: hover) { .icon:hover { color: var(--ivory); background: var(--panel-2); border-color: var(--line); } }
.icon svg { width: 21px; height: 21px; }
#sound .slash { display: none; }
#sound.off .slash { display: block; } #sound.off .waves { display: none; }

/* ---- the stage ------------------------------------------------------------------------------ */
.stage { grid-row: 1 / 3; grid-column: 1; position: relative; min-height: 0; overflow: hidden; }
#table { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--under, 0px)); display: block; }   /* (--under: the dock it runs on beneath) */
.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay > * { position: absolute; left: 0; top: 0; }
.spot { pointer-events: auto; border-radius: 50%; transition: box-shadow var(--duration-quick) var(--ease-smooth-out), background var(--duration-quick); }
.spot:disabled { pointer-events: none; }
@media (hover: hover) { body[data-mode="betting"] .spot:not(:disabled):hover { box-shadow: 0 0 0 2px rgba(226, 196, 131, .55), 0 0 26px rgba(226, 196, 131, .18); background: rgba(226, 196, 131, .05); } }
.spot:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold-hi); }
.spot.refused { animation: refuse .5s var(--ease); }
@keyframes refuse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(214, 92, 80, .8), 0 0 24px rgba(214, 92, 80, .35); } }
.spot .amount { position: absolute; left: 50%; bottom: 0; translate: -50% 55%; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; padding: 4px 8px 3px; border-radius: 99px; background: rgba(12, 12, 13, .86); border: 1px solid var(--gold-lo); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.spot.main .amount { font-size: 15px; }
.hand-total { translate: -50% -50%; min-width: 34px; text-align: center; font: 800 17px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; padding: 6px 9px 5px; border-radius: 99px; background: rgba(12, 12, 13, .88); border: 1px solid var(--line-2); color: var(--ivory); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: border-color var(--duration-quick), color var(--duration-quick); }
.hand-total.active { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(201, 164, 92, .18); }
.hand-total.bust { color: #e7a197; border-color: #6a3a34; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }

.banner { position: absolute; left: var(--rb-x, 50%); top: var(--rb-y, 60%); display: flex; align-items: baseline; gap: 8px; padding: 6px 13px 5px 12px; border-radius: 99px; white-space: nowrap; pointer-events: none;
  background: rgba(12, 12, 13, .9); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  translate: -50% -100%; transform: translateY(10px); opacity: 0; transition: transform var(--duration-very-slow) var(--spring-pop), opacity var(--duration-quick) ease-out; }
.banner.show { transform: none; opacity: 1; }
.banner.leave { transform: translateY(-10px); opacity: 0; transition: transform var(--duration-medium) ease-in, opacity var(--duration-medium) ease-in; }
.banner .rb-label { font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.banner em { font: 800 22px/1 "Barlow Condensed", sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ivory); }
.banner.up { border-color: rgba(201, 164, 92, .6); } .banner.up em { color: var(--gold-hi); } .banner.up .rb-label { color: var(--gold); }
.banner.down { border-color: rgba(122, 64, 58, .7); } .banner.down em { color: #e7a197; }
/* blackjack: one slow glint runs across the tag, nothing more */
.banner.bj { overflow: hidden; }
/* Gold foil for the big moments, after Colorion Text Effects #32 "Gold-Foil" (MIT): metallic letters
   with one specular sweep as the result lands, then still. */
.foil, .banner.gild .rb-label, .r-win.gild b { color: transparent; background: linear-gradient(108deg, #7a5a1e 0%, #e2c483 18%, #fff3c9 24%, #a77c32 36%, #f0d48c 51%, #8d6a2c 68%, #fff0bf 76%, #c9a45c 100%) 115% 0 / 230% 100%;
  -webkit-background-clip: text; background-clip: text; animation: foil 1.6s .25s ease-in-out both; }
@keyframes foil { 60% { background-position: -35% 0; filter: saturate(1.3) brightness(1.15); } 100% { background-position: -35% 0; } }
.banner.gild .rb-label { font: 800 13px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; }
.r-win.gild b { font-size: 19px; font-weight: 600; }
/* Lightning roulette: your struck number paying. The multiplier slams down figure by figure in Bodoni Moda Black, gold
   foil (the casino's Didone numerals, in the salon's own display face), the × last with a twist; a band of light runs
   across it as it settles; "Lightning strikes" rises in above it and the win counts up under it in Inter, quick at first
   and slowing onto its figure. (After transitions.dev's number pop-in and texts reveal, sharpened into a slam.) */
.r-slam { --n: 3; position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 4; text-align: center; }
.r-slam::before { content: ''; position: absolute; inset: -45% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 200, 110, .2), rgba(6, 6, 8, .8) 40%, rgba(6, 6, 8, .5) 70%, rgba(6, 6, 8, 0)); }
.r-slam.big::before { background: radial-gradient(closest-side, rgba(255, 190, 90, .3), rgba(8, 5, 4, .82) 42%, rgba(6, 6, 8, .5) 70%, rgba(6, 6, 8, 0)); }
.r-slam small { font: 700 clamp(13px, 1.3vw, 16px)/1 Cinzel, Georgia, serif; letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; color: #f6e2ae; text-shadow: 0 0 14px rgba(255, 205, 110, .55), 0 2px 10px rgba(0, 0, 0, .9); }
.r-slam b { display: inline-flex; align-items: baseline; font: 900 clamp(78px, 15vw, 170px)/.86 "Bodoni Moda", Georgia, serif; letter-spacing: -.012em;
  filter: drop-shadow(0 2px 0 rgba(84, 56, 18, .95)) drop-shadow(0 0 26px rgba(255, 205, 110, .45)) drop-shadow(0 14px 30px rgba(0, 0, 0, .75)); }
.r-slam b span { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%) 140% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #fff8e2 0%, #f3d792 36%, #c9a45c 60%, #f0d48c 78%, #8d6a2c 100%); -webkit-background-clip: text; background-clip: text; }
.r-slam.big b span { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 1) 50%, transparent 60%) 140% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #fff0c2 30%, #f0c46a 58%, #ffd98a 76%, #b8642c 100%); -webkit-background-clip: text; background-clip: text; }
.r-slam b .x { font-size: .62em; margin-left: .03em; }
.r-slam em { font: 800 clamp(28px, 3.6vw, 42px)/1 Inter, system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ivory); text-shadow: 0 0 18px rgba(226, 196, 131, .45), 0 4px 14px rgba(0, 0, 0, .8); min-height: 1em; }
.r-slam.go::before { animation: slam-glow .7s ease-out both; }
.r-slam.go b .d { animation: slam-digit .52s cubic-bezier(.34, 1.45, .64, 1) calc(var(--i) * 70ms) both, slam-shine .75s ease-in-out calc(var(--n) * 70ms + 420ms + var(--i) * 55ms) both; }
.r-slam.go b .x { animation: slam-x .5s cubic-bezier(.34, 1.6, .64, 1) calc(var(--i) * 70ms + 40ms) both, slam-shine .75s ease-in-out calc(var(--n) * 70ms + 420ms + var(--i) * 55ms) both; }
.r-slam.go small, .r-slam.go em { animation: slam-rise .5s ease calc(var(--n) * 70ms + 240ms) both; }
.r-slam.go em { animation-delay: calc(var(--n) * 70ms + 380ms); }
@keyframes slam-digit { 0% { opacity: 0; transform: translateY(-.3em) scale(1.6); filter: blur(10px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes slam-x { 0% { opacity: 0; transform: rotate(-35deg) scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes slam-shine { from { background-position: 140% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
@keyframes slam-rise { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes slam-glow { from { opacity: 0; scale: .6; } 40% { opacity: 1; } to { opacity: 1; scale: 1; } }
body.reduced .r-slam.go::before, body.reduced .r-slam.go b span, body.reduced .r-slam.go small, body.reduced .r-slam.go em { animation: none; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.banner.bj.show::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, .35) 50%, transparent 65%); transform: translateX(-100%); animation: glint 1.1s .35s ease-in-out forwards; }
@keyframes glint { to { transform: translateX(100%); } }
body[data-mode="result"] .feed:not(.stay) { opacity: 0; transition: opacity var(--duration-quick); }
/* hand totals become the outcome when the hand is settled */
.hand-total.win { background: linear-gradient(#e2c483, #b08a45); color: #17130b; border-color: #e2c483; }
.hand-total.push { background: #2a2a2f; color: var(--ivory); border-color: #55555c; }
.hand-total.loss { color: #e7a197; border-color: #6a3a34; }
/* Other players: a quiet name plate by each seat, their bankroll, and what they just did. */
.seat-tag { translate: -50% -50%; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(12, 12, 13, .72); border: 1px solid var(--line-2); color: var(--ivory); font: 600 11.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transition: opacity var(--duration-medium), border-color var(--duration-fast); }
.seat-tag .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2a2620; color: var(--gold-hi); font: 700 11px/1 Cinzel, Georgia, serif; border: 1px solid rgba(201, 164, 92, .45); }
.seat-tag .bank { color: var(--muted, #a8a39a); font-variant-numeric: tabular-nums; font-weight: 500; }
.seat-tag.turn { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .16); }
.seat-tag.away { opacity: 0; }
.seat-tag .say { position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 4px 8px 3px; border-radius: 6px; background: var(--ivory); color: #141416; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity var(--duration-quick), translate var(--duration-fast) cubic-bezier(.2, .9, .3, 1.3); }
.seat-tag .say.show { opacity: 1; translate: -50% 0; }
.hand-total.seat { font-size: 14px; padding: 4px 7px 3px; min-width: 28px; opacity: .92; }
.offscreen { visibility: hidden; }
.opt.sub > span { padding-left: 14px; color: var(--muted); font-size: .92em; }
.credits { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---- the dock ----------------------------------------------------------------------------------- */
.dock { position: relative; z-index: 3; display: grid; grid-template-areas: 'dock'; justify-items: center; align-items: center; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(#0f0f10, #0b0b0c); border-top: 1px solid #1d1d20; min-height: 0; }
/* A dock along the foot of the picture is a progressive blur, not a solid bar: the table goes on under the controls
   (each room frames its seat clear of it), softening by degrees toward the foot - each layer twice the blur of the one
   before, faded in a step further down - with a shade over it so the controls keep their contrast. Not in the side
   column of a phone on its side, nor on the battery saver, which keeps the plain bar. */
.dock-blur { display: none; }
@media not ((orientation: landscape) and (max-height: 520px)) {
  .stage { overflow: visible; }
  body:not([data-gfx="saver"]) .dock { background: none; border-top: 0; }
  body:not([data-gfx="saver"]) .dock-blur { display: block; position: absolute; left: 0; right: 0; top: -40px; bottom: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(11, 11, 12, 0), rgba(11, 11, 12, .4) 30%, rgba(11, 11, 12, .7) 62%, rgba(11, 11, 12, .86)); }
  .dock-blur i { position: absolute; inset: 0; --m: linear-gradient(transparent var(--a), #000 var(--c));
    -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask-image: var(--m); mask-image: var(--m); }
  .dock-blur i:nth-child(1) { --b: 1px; --a: 0%; --c: 16%; }
  .dock-blur i:nth-child(2) { --b: 2.5px; --a: 8%; --c: 28%; }
  .dock-blur i:nth-child(3) { --b: 5px; --a: 18%; --c: 42%; }
  .dock-blur i:nth-child(4) { --b: 10px; --a: 30%; --c: 58%; }
  .dock-blur i:nth-child(5) { --b: 18px; --a: 44%; --c: 76%; }
  /* (Firefox and Zen: the tint alone, see the top bar's band) */
  @supports (-moz-appearance: none) { body:not([data-gfx="saver"]) .dock-blur { background: linear-gradient(rgba(11, 11, 12, 0), rgba(11, 11, 12, .55) 30%, rgba(11, 11, 12, .82) 62%, rgba(11, 11, 12, .93)); } .dock-blur i { display: none; } }
  /* over the blur the controls are glass: a dark translucent fill and a fine light edge on top */
  .dock .pill:not(.gold), .dock .tray-toggle, .dock .tile { background: rgba(22, 22, 25, .62); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 14px rgba(0, 0, 0, .25); }
}
/* The hint's words morph in a span of their own (a morphing root is made inline and relative, which would pull the
   line out of place). It hangs just under the bar and above its blur, so it is always sharp. */
.hint { position: absolute; z-index: 4; left: 50%; top: calc(var(--top-h, 0px) + 8px); translate: -50% 0; margin: 0; width: max-content; max-width: calc(100% - 32px); padding: 6px 14px; border-radius: 99px; background: rgba(12, 12, 13, .72); font-size: 14px; color: #cfc8ba; text-align: center; pointer-events: none; transition: opacity var(--duration-quick); }
.hint:empty, .hint:has(> span:empty) { opacity: 0; }
.hint.off { opacity: 0; }
.feed { position: absolute; left: 14px; top: calc(50% + var(--top-h, 0px) / 2); translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; width: 210px; pointer-events: none; }
.feed li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 10px; padding: 7px 11px 6px; border-radius: 11px; background: rgba(12, 12, 13, .86); border: 1px solid var(--line-2);
  /* Kinetics: Toast Overshoot - slides past its resting place, then settles */
  transform: translateX(-115%) scale(.9); opacity: 0; transition: transform .55s cubic-bezier(0.18, 1.25, 0.4, 1), opacity .3s; }
.feed li.show { transform: none; opacity: 1; }
.feed li b { font: 700 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.feed li span { grid-column: 1; font-size: 13px; color: #cfc8ba; }
.feed li em { grid-column: 2; grid-row: 1 / 3; font: 800 18px/1 "Barlow Condensed", sans-serif; font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }
.feed li.win { border-color: rgba(201, 164, 92, .7); } .feed li.win em { color: var(--gold-hi); } .feed li.win b { color: var(--gold); }
.feed li.loss { opacity: .72; }
.spot .amount.won { background: linear-gradient(#d5b36d, #b08a45); color: #17130b; border-color: #e2c483; }
.betting, .decisions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.betting { row-gap: 8px; max-width: 1120px; }

/* side-bet tray: readable names and payouts; the felt circles stay small */
.tray { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.tray-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--panel); font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex: none; }
.tray-toggle .sum { color: var(--gold-hi); letter-spacing: .02em; font: 800 13px/1 "Barlow Condensed", sans-serif; }
.tray-toggle .sum:empty { display: none; }
.tray-toggle svg { width: 16px; height: 16px; transition: transform var(--duration-quick) var(--ease-smooth-out); transform: rotate(-90deg); }
.tray.open .tray-toggle svg { transform: none; }
/* (i): the side bets' paytables and what their words mean, in the settings (a tile's tooltip is no use to a finger) */
.tray-info { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted);
  transition: color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out); }
.tray-info svg { width: 17px; height: 17px; }
.tray-info::after { content: ''; position: absolute; inset: -7px; }
@media (hover: hover) { .tray-info:hover { color: var(--ivory); border-color: #55555c; } }
.tiles { display: none; gap: 6px; }
.tray.open .tiles { display: flex; }
.tile { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; justify-items: start; gap: 2px; min-width: 104px; padding: 5px 10px 5px 5px; border-radius: 11px; background: linear-gradient(#18181b, #121214); border: 1px solid var(--line-2); text-align: left; transition: border-color var(--duration-quick), background var(--duration-quick), opacity var(--duration-quick); }
.tile b { color: var(--ivory); }
.tile small { font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; color: var(--gold); text-transform: uppercase; }
.tile small i { font-style: normal; }
.tile img { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.tile b, .tile small { grid-column: 2; }
.tile .amt { position: absolute; top: -7px; right: -5px; min-width: 22px; padding: 3px 6px 2px; border-radius: 99px; background: linear-gradient(#d5b36d, #b08a45); color: #17130b; font: 800 12px/1 "Barlow Condensed", sans-serif; text-align: center; }
.tile .amt:empty { display: none; }
.tile.on { border-color: var(--gold-lo); background: linear-gradient(#1f1c16, #151411); }
@media (hover: hover) { .tile:hover:not(:disabled) { border-color: #55555c; } }
.tile:disabled { opacity: .4; }
.tile.refused { animation: refuse .5s var(--ease); }
/* betting tools and decisions share the dock and cross-fade, so nothing jumps */
.betting, .decisions { grid-area: dock; transition: opacity var(--duration-quick) var(--ease), transform var(--duration-medium) var(--spring-press), visibility 0s; }
body:not([data-mode="betting"]) .betting, body[data-mode="betting"] .decisions { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity var(--duration-quick), transform var(--duration-quick), visibility 0s var(--duration-quick); }

.chips { display: flex; gap: 6px; padding: 4px 2px; }
.chip { width: 54px; height: 54px; border-radius: 50%; position: relative; transition: filter var(--duration-quick), opacity var(--duration-quick); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
.chip img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.chip.selected::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold-hi); box-shadow: 0 0 16px rgba(226, 196, 131, .45); }
.chip:disabled { opacity: .3; filter: grayscale(.7); }

.bet-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 761px) and (min-height: 521px) { .bet-actions .pill:not(.deal) { min-width: 100px; justify-content: center; } }   /* Undo, Clear and Rebet (or ×2) one width, so the row doesn't shuffle as they change (a phone shows them as icons) */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); font: 700 14px/1 Inter, system-ui, sans-serif; letter-spacing: .03em; transition: background var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), color var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out); }
.pill svg { width: 17px; height: 17px; }
.pill .glyph { font: 800 16px/1 "Barlow Condensed", sans-serif; }
@media (hover: hover) { .pill:hover:not(:disabled) { background: #232327; border-color: #4a4a50; } }
.pill:disabled { opacity: 1; color: rgba(236, 228, 210, .32); border-color: rgba(255, 255, 255, .07) !important; background: rgba(18, 18, 20, .45) !important; box-shadow: none !important; cursor: default; }
.pill.gold:disabled { color: rgba(226, 196, 131, .62); border-color: rgba(201, 164, 92, .5) !important; background: rgba(40, 33, 19, .55) !important; }
.pill.gold { background: linear-gradient(#d5b36d, #b08a45); border-color: #e2c483; color: #17130b; }
@media (hover: hover) { .pill.gold:hover:not(:disabled) { background: linear-gradient(#e0c07c, #bb9550); border-color: #f0d69c; } }
.pill.gold kbd { color: #4a3b1b; border-color: rgba(23, 19, 11, .3); }
.pill.deal { height: 50px; padding: 0 30px; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }

.decisions { gap: 10px; align-items: flex-start; padding-bottom: 18px; }
/* Decision keys: filled cards, each colour-coded to its move, with a pressed-down depth edge. */
.act { --bg: linear-gradient(#24211b, #1a1814); --bd: var(--gold-lo); --fg: var(--gold-hi); --edge: #3a2d15;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 96px; height: 78px; border-radius: 16px; background: var(--bg); border: 1.5px solid var(--bd); color: var(--fg);
  box-shadow: 0 4px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform 60ms ease, box-shadow 60ms ease, background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), opacity var(--duration-quick), filter var(--duration-quick); }
.act.big { width: 120px; }
.act.hit { --bg: linear-gradient(#46683d, #2f4a29); --bd: #7fa973; --fg: #effbe8; --edge: #1b2b18; }
.act.stand { --bg: linear-gradient(#6e3d37, #4b2824); --bd: #b87a70; --fg: #fbe9e5; --edge: #2c1714; }
.act .disc { display: grid; place-items: center; width: auto; height: 26px; }
.act svg { width: 26px; height: 26px; stroke-width: 2.4; }
.act .glyph { font: 800 24px/1 "Barlow Condensed", sans-serif; }
.act .label { font: 800 14px/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.act.big .label { font-size: 16px; }
.act kbd { position: absolute; top: 6px; right: 7px; color: inherit; opacity: .55; border-color: currentColor; }
.act .why { position: absolute; top: calc(100% + 7px); left: 50%; translate: -50% 0; width: max-content; max-width: 130px; font: 600 11px/1.15 Inter, system-ui, sans-serif; color: var(--muted); text-align: center; pointer-events: none; }
@media (hover: hover) { .act:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 4px 0 var(--edge), 0 12px 24px rgba(0, 0, 0, .5), 0 0 0 3px rgba(226, 196, 131, .14); } }
.act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 4px 8px rgba(0, 0, 0, .35); }
.act:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.act:disabled { background: #141416; border: 1.5px dashed #34343a; color: #5d5953; box-shadow: none; }
.act:disabled kbd { opacity: .3; }
body:not([data-mode="player"]) .act .why { visibility: hidden; }
/* while cards move the buttons dim, but only after a moment, so quick hits do not flicker them */
body[data-mode="busy"] .decisions, body[data-mode="result"] .decisions, body[data-mode="insurance"] .decisions { opacity: .55; transition: opacity var(--duration-medium) var(--duration-medium); }

/* ---- settings sheet ------------------------------------------------------------------------------ */
.sheet { width: min(520px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border-radius: 20px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ivory); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); overflow: auto; }
.sheet::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-in .5s var(--spring-sheet); }
.sheet[open]::backdrop { animation: fade-in var(--duration-quick, 150ms) ease-out; }
.sheet.closing { animation: sheet-out var(--duration-medium) var(--ease-smooth-out) forwards; }   /* (app.mjs closes it when this ends) */
.sheet.closing::backdrop { animation: fade-out var(--duration-medium, 350ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* the side-bet tray slides back down as it closes */
.tray.open.closing .tiles { animation: tray-out var(--duration-quick) var(--ease-smooth-out) forwards; pointer-events: none; }
@keyframes tray-out { to { opacity: 0; transform: translateY(8px); } }
.sheet > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.sheet h2 { margin: 0; font: 700 20px/1 Cinzel, Georgia, serif; letter-spacing: .06em; }
.opts { display: grid; padding: 8px 20px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.opt input[type="checkbox"] { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: #2c2c31; position: relative; cursor: pointer; transition: background var(--duration-quick); margin: 0; }
.opt input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #cfc8ba; transition: transform var(--duration-very-slow) var(--spring-pop), background var(--duration-quick); }   /* Kinetics: Switch Spring */
.opt input[type="checkbox"]:checked { background: var(--gold-lo); }
.opt input[type="checkbox"]:checked::after { transform: translateX(18px); background: var(--gold-hi); }
.opt input[type="range"] { width: 160px; accent-color: var(--gold); }
.opt span small { display: block; font: 600 12px/1.3 Inter, system-ui, sans-serif; color: var(--dim); margin-top: 2px; }
.opt select { font: 600 14px Inter, system-ui, sans-serif; color: var(--ivory); background: #232327; border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 10px; }
.sheet details { padding: 0 20px; border-bottom: 1px solid var(--line); }
.sheet summary { display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 14px 0; cursor: pointer; font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sheet summary::-webkit-details-marker { display: none; }
/* Kinetics: Accordion Spring - long soft open, chevron overshoots as it turns */
.sheet summary .chev { width: 18px; height: 18px; transition: transform var(--duration-very-slow) var(--spring-pop); }
.sheet details.open summary .chev { transform: rotate(180deg); }
.acc-body { overflow: hidden; }
.rules { margin: 0 0 16px; padding-left: 18px; color: #cfc8ba; font-size: 14px; line-height: 1.5; }
.rules li + li { margin-top: 6px; }
.paytables { display: grid; gap: 14px; padding-bottom: 16px; }
.paytables h4 { margin: 0 0 2px; font: 700 16px/1.2 Cinzel, Georgia, serif; letter-spacing: .04em; }
.paytables p { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.paytables table { width: 100%; border-collapse: collapse; font-size: 14px; }
.paytables td { padding: 5px 0; border-top: 1px solid var(--line); }
.paytables td:last-child { text-align: right; font: 800 15px/1 "Barlow Condensed", sans-serif; color: var(--gold-hi); }
.paytables .terms { margin: 8px 0 0; padding-left: 16px; color: #cfc8ba; font-size: 12.5px; line-height: 1.45; }
.paytables .terms b { font-weight: 600; color: var(--ivory); }
/* Last hands: the book of rounds, newest first, each with its lines and its net; this visit's net in the heading */
.sheet summary .book-net { margin: 0 10px 0 auto; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.book-net b, .wallet .visit output { font-variant-numeric: tabular-nums; }
.book-net b { margin-left: 4px; font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; color: var(--ivory); }
.book-net b[data-tone="up"] { color: var(--gold-hi); } .book-net b[data-tone="down"] { color: #e7a197; }
.book { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.book .none { color: var(--muted); font-size: 13px; }
.bk { padding: 8px 11px 9px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.bk-head { display: flex; align-items: baseline; gap: 8px; }
.bk-head b { font: 700 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bk-head time { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.bk-head em { margin-left: auto; font: 800 19px/1 "Barlow Condensed", sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ivory); }
.bk.up .bk-head em { color: var(--gold-hi); } .bk.down .bk-head em { color: #e7a197; }
.bk ul { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; }
.bk li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.35; color: #cfc8ba; }
.bk li em { flex: none; font: 700 14.5px/1 "Barlow Condensed", sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); }
.bk li.side { font-size: 12.5px; color: var(--muted); } .bk li.bolt span { color: #b9c8ff; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.keys dt { font: 800 14px/1.3 "Barlow Condensed", sans-serif; color: var(--gold-hi); letter-spacing: .04em; }
.keys dd { margin: 0; color: #cfc8ba; }
.sheet > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; flex-wrap: wrap; }
.sheet > footer small { color: var(--dim); }

/* ---- small screens ---------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .top { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .brand small { display: none; } .brand .wordmark { font-size: 17px; } .brand .mark { width: 28px; height: 28px; }
  .bank { gap: 14px; } .bank output { font-size: 19px; }
  .shoe-words { display: none; } .gauge { width: 26px; height: 26px; }
  .top { gap: 10px; } .bank { gap: 12px; } .tools { gap: 2px; } .icon { width: 36px; height: 36px; }
  .dock { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .betting { gap: 10px; }
  .chips { gap: 3px; }
  .chip { width: 44px; height: 44px; }
  .pill { height: 42px; padding: 0 13px; }
  .pill .label { font-size: 13px; }
  #undo .label, #clear .label, #rebet .label, #x2 .label { display: none; }
  .pill.deal { height: 46px; padding: 0 24px; }
  .act { width: 70px; height: 66px; border-radius: 14px; gap: 5px; } .act.big { width: 86px; } .act .label { font-size: 12.5px; } .act.big .label { font-size: 14px; } .act svg { width: 22px; height: 22px; } .act .glyph { font-size: 21px; }
  .decisions { gap: 6px; }
  .hint { font-size: 12.5px; top: calc(var(--top-h, 0px) + 6px); padding: 5px 11px; }
  .feed { left: 8px; right: 8px; top: auto; bottom: 8px; translate: none; width: auto; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 4px; }
  .feed li.loss { display: none; } .feed.stay li.loss { display: grid; }   /* (the losses too, once the result waits for you) */
  .feed li { padding: 5px 8px 4px; } .feed li span { font-size: 11.5px; } .feed li em { font-size: 15px; }
  .banner em { font-size: 20px; } .banner .rb-label { font-size: 10px; }
  .hand-total { font-size: 15px; padding: 5px 7px 4px; min-width: 30px; }
  }
@media (max-width: 760px) {
  /* the tray, the chip row (with head room for the chip in hand) and the action row, over the home indicator */
  :root { --dock-h: calc(178px + max(0px, env(safe-area-inset-bottom) - 12px)); }
  .tray { min-height: 30px; }
  /* on a phone the tray opens as a sheet over the rail, so the dock keeps its height */
  .tray.open .tiles { display: grid; grid-template-columns: repeat(3, 1fr); position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); padding: 8px; border-radius: 16px; background: rgba(16, 16, 18, .96); border: 1px solid var(--line-2); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); animation: sheet .22s var(--ease); }
  @keyframes sheet { from { opacity: 0; transform: translateY(8px); } }
  .tile { min-width: 0; padding: 6px 8px 5px; }
  .tile b { font-size: 12px; white-space: normal; }
  .tile small { font-size: 11px; }
}
@media (max-width: 380px) { .chip { width: 40px; height: 40px; } }
/* an upright phone: the bar keeps the spade (it is the lobby button) and lets the name go; the narrowest also the shoe */
@media (max-width: 440px) { .brand .word { display: none; } .top { gap: 8px; padding-left: 12px; padding-right: 10px; } }
@media (max-width: 350px) { .shoe-meter { display: none; } .dock .betting { row-gap: 8px; } .dock .chips { padding-top: 10px; } }

/* ---- phones on their side: table left, controls in a column on the right ------------------------------ */
@media (orientation: landscape) and (max-height: 520px) {
  .app { grid-template-columns: minmax(0, 1fr) minmax(240px, 34vw); grid-template-rows: auto 1fr; }
  /* centred while it fits; taller than the column (the side bets open) it starts at the top and scrolls, so the
     tray's own toggle is never pushed up under the bar */
  .dock { display: flex; flex-direction: column; justify-content: safe center; }
  .dock > * { max-width: 100%; }   /* (centred items take their content's width: never more than the column's) */
  .betting, .decisions { transform: none !important; }
  body:not([data-mode="betting"]) .betting, body[data-mode="betting"] .decisions { display: none; }
  .tray.open .tiles { position: static; padding: 0; background: none; border: 0; box-shadow: none; animation: none; }
  .top { grid-column: 1 / -1; padding-top: 5px; padding-bottom: 5px; gap: 12px; }
  .brand small, .shoe-words { display: none; }
  .brand .wordmark { font-size: 16px; } .brand .mark { width: 24px; height: 24px; } .bank output { font-size: 17px; } .bank .k { font-size: 10px; letter-spacing: .1em; }
  .icon { width: 34px; height: 34px; }
  .gauge { width: 26px; height: 26px; }
  .stage { grid-column: 1; grid-row: 1 / 3; }
  .dock { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid #1d1d20; min-height: 0; overflow-y: auto; align-content: center; padding: 8px 10px max(8px, env(safe-area-inset-bottom)) 10px; }
  .betting { gap: 8px; }
  .tray { flex-wrap: wrap; gap: 6px; }   /* the toggle and (i) share a line, the tiles take the next ones */
  .tray.open .tiles { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; flex-basis: 100%; }
  .tile { min-width: 0; padding: 5px 7px 4px; } .tile b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tile small i { display: none; }
  .chips { flex-wrap: wrap; justify-content: center; max-width: 230px; }
  .chip { width: 42px; height: 42px; }
  .bet-actions { flex-wrap: wrap; justify-content: center; }
  #undo .label, #clear .label, #rebet .label, #x2 .label { display: none; }
  .pill { height: 38px; padding: 0 12px; } .pill.deal { height: 42px; padding: 0 22px; }
  .decisions { display: grid; grid-template-columns: repeat(2, auto); gap: 20px 8px; padding-bottom: 16px; }
  .act, .act.big { width: 100px; height: 58px; gap: 4px; } .act .label, .act.big .label { font-size: 13px; } .act svg { width: 20px; height: 20px; } .act .glyph { font-size: 19px; }
  .hint { font-size: 12px; top: calc(var(--top-h, 0px) + 6px); padding: 4px 10px; }
  .dock .feed { position: static; translate: none; width: 100%; display: grid; gap: 4px; margin-bottom: 8px; }
  body[data-mode="betting"] .dock .feed { display: none; }
  .feed li { padding: 5px 8px 4px; } .feed li span { font-size: 11.5px; } .feed li em { font-size: 15px; }
  .banner em { font-size: 19px; }
}
/* Reduce motion: every animation runs once, at once, to its end (an endless one cut to a hundredth of a millisecond
   would jump about every frame instead of standing still), and the Deal and Spin glint has nothing to show. */
body.reduced *, body.reduced *::before, body.reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.reduced .shimmer :is(.shimmer-spark-wrap, .shimmer-spark, .shimmer-cone) { animation: none !important; }
body.reduced .shimmer .shimmer-spark-wrap { display: none; }
body.reduced :is(.r-win, .r-win.show, .r-history, .rstage .r-history) { transition-delay: 0s !important; }

/* motion helpers: elements that springs scale need a box of their own */
.hand-total > span, .bank output, .spot .amount, .pill .label { display: inline-block; }
.chip { will-change: transform; }

/* ---- Kinetics: Push Button - a real bottom edge that the button presses down onto ---------------- */
.pill.deal { box-shadow: 0 5px 0 #6b5226, 0 10px 18px rgba(0, 0, 0, .35); transition: transform 60ms ease, box-shadow 60ms ease, color var(--duration-fast), opacity var(--duration-quick); }
.pill.deal:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #6b5226, 0 4px 8px rgba(0, 0, 0, .3); }
.pill.deal:disabled { box-shadow: 0 5px 0 #3b3222; }

/* ---- Magic UI: Shimmer Button (on Deal) ---------------------------------------------------------------- */
.shimmer { position: relative; z-index: 0; overflow: hidden; isolation: isolate; background: #7d6230 !important; --spread: 90deg; }
.shimmer .shimmer-spark-wrap { position: absolute; inset: 0; z-index: -30; filter: blur(2px); container-type: size; overflow: visible; }
.shimmer .shimmer-spark { position: absolute; inset: 0; height: 100cqh; aspect-ratio: 1; animation: shimmer-slide var(--speed) ease-in-out 4 alternate; }
.shimmer .shimmer-cone { position: absolute; inset: -100%; width: auto; rotate: 0deg; background: conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread)); animation: spin-around calc(var(--speed) * 2) 2 linear; }
/* The spark runs while the Deal button can be pressed, a few passes each time it becomes pressable (its wrap comes back
   from display: none, which starts the animations over) and then rests: a spark that never stopped redrew the page every
   frame for as long as you thought about your bet. */
body:not([data-mode="betting"]) .shimmer :is(.shimmer-spark, .shimmer-cone), body:is(.in-lobby, .flying) .shimmer :is(.shimmer-spark, .shimmer-cone), .shimmer:disabled :is(.shimmer-spark, .shimmer-cone) { animation-play-state: paused; }   /* (and in the lobby, where its dock is out of sight: Firefox drew it over the moving table all the same) */
.shimmer:disabled .shimmer-spark-wrap { opacity: 0; }
.shimmer .shimmer-backdrop { position: absolute; inset: var(--cut); z-index: -20; border-radius: inherit; background: linear-gradient(#d5b36d, #b08a45); }
.shimmer .shimmer-highlight { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 -8px 10px #ffffff1f; transition: box-shadow var(--duration-medium) ease-in-out; pointer-events: none; }
@media (hover: hover) { .shimmer:hover:not(:disabled) .shimmer-highlight { box-shadow: inset 0 -6px 10px #ffffff3f; } }
.shimmer:active:not(:disabled) .shimmer-highlight { box-shadow: inset 0 -10px 10px #ffffff3f; }
.shimmer:disabled .shimmer-spark-wrap { display: none; }
.shimmer:disabled .shimmer-backdrop { inset: 0; }
@keyframes shimmer-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@keyframes spin-around { 0% { transform: translateZ(0) rotate(0); } 15%, 35% { transform: translateZ(0) rotate(90deg); } 65%, 85% { transform: translateZ(0) rotate(270deg); } 100% { transform: translateZ(0) rotate(360deg); } }

/* ---- Kinetics: Hold to Confirm ----------------------------------------------------------------------------------- */
.hold-btn { position: relative; gap: 10px; padding-left: 10px; }
.hold-ring { width: 26px; height: 26px; transform: rotate(-90deg); flex: none; }
.hold-ring circle { fill: none; stroke-width: 5; }
.hold-ring .track { stroke: #333338; }
.hold-ring .prog { stroke: var(--gold-hi); stroke-dasharray: 207; stroke-dashoffset: 207; stroke-linecap: round; transition: stroke-dashoffset var(--duration-quick) ease-out; }
.hold-btn.holding .prog { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms linear; }
.hold-btn.done .prog { stroke-dashoffset: 0; stroke: #9fd18b; }

/* ---- Kinetics: Badge Counter ---------------------------------------------------------------------------------------- */
.tile .amt, .tray-toggle .sum { display: inline-block; transition: transform var(--duration-very-slow) var(--spring-pop); }
.tile .amt.pop, .tray-toggle .sum.pop { transform: scale(1.4); }

/* ---- steady betting row: nothing shifts when a chip goes down ------------------------------------------ */
/* Rebet and Double bets share one slot and cross-fade; Deal keeps one width whatever its label says. */
.bet-actions { display: grid; grid-template-areas: 'u c s d'; grid-template-columns: auto auto auto auto; align-items: center; gap: 8px; }
#undo { grid-area: u; } #clear { grid-area: c; } #rebet, #x2 { grid-area: s; justify-self: stretch; justify-content: center; } #deal { grid-area: d; }
.bet-actions .pill { transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), opacity var(--duration-quick) var(--ease-smooth-out), scale var(--duration-medium) var(--spring-press), visibility 0s; }
.bet-actions .pill.gone { opacity: 0; scale: .86; visibility: hidden; pointer-events: none; transition: opacity var(--duration-quick), scale var(--duration-quick), visibility 0s var(--duration-quick); }
.pill.deal { min-width: 188px; justify-content: center; transition: transform 60ms ease, box-shadow 60ms ease, color var(--duration-fast), opacity var(--duration-quick); }
.pill.deal .label { transition: opacity var(--duration-quick); }
/* a Deal button that is waiting for a bet reads as switched off, not as a muddy gold one */
/* not yet: still the gold button, dimmed to an outline, so you can see where the next move is */
.pill.deal:disabled { opacity: 1; color: rgba(226, 196, 131, .62); border-color: rgba(201, 164, 92, .5) !important; background: rgba(40, 33, 19, .55) !important; box-shadow: 0 5px 0 rgba(10, 9, 7, .7); }
.pill.deal:disabled .shimmer-backdrop { background: linear-gradient(rgba(46, 38, 22, .82), rgba(30, 25, 15, .82)); }
.pill.deal:disabled .shimmer-highlight { box-shadow: none; }
.shimmer .shimmer-backdrop { transition: background var(--duration-medium); }
/* the side-bet total is a badge on the toggle, like the ones on the tiles, so the row does not move */
.tray-toggle { position: relative; }
.tray-toggle .sum { position: absolute; top: -8px; right: -8px; min-width: 22px; padding: 3px 6px 2px; border-radius: 99px; background: linear-gradient(#d5b36d, #b08a45); color: #17130b; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: 0; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.tile .amt { box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
@media (max-width: 760px) { .pill.deal { min-width: 150px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .bet-actions { grid-template-areas: 'u c s' 'd d d'; grid-template-columns: auto auto auto; justify-content: center; }
  #deal { justify-self: center; min-width: 170px; }
}

/* ---- side-bet tray: equal cards with their own icons, one colour per bet ------------------------------- */
.tray.open .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tile { --c: var(--gold); grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; row-gap: 3px; min-width: 128px; padding: 6px 12px 6px 6px; border-radius: 12px; }
.tile .ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, #121214); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); transition: background var(--duration-quick), color var(--duration-quick), border-color var(--duration-quick); }
.tile .ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile b { font: 700 12.5px/1.1 Inter, system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile small { font: 800 12.5px/1 "Barlow Condensed", sans-serif; color: var(--c); letter-spacing: .04em; }
.tile small i { color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.tile.on { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: linear-gradient(color-mix(in srgb, var(--c) 10%, #18181b), #131315); }
.tile.on .ico { background: var(--c); color: #141416; border-color: var(--c); }
@media (hover: hover) { .tile:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 45%, transparent); } }
@media (max-width: 760px) {
  .tray.open .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; }
  .tile { min-width: 0; padding: 7px 10px 7px 7px; }
  .tile b { font-size: 13px; white-space: nowrap; }
  .tile small { font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tray.open .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; padding: 4px 7px 4px 4px; }
  .tile .ico { width: 26px; height: 26px; border-radius: 7px; } .tile .ico svg { width: 16px; height: 16px; }
  /* the tray open: tiles go to one line and the chips to one row, so Deal stays in the column without a scroll */
  .tray.open .tile { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px 5px; } .tray.open .tile .ico { display: none; }
  .tray.open .tile b, .tray.open .tile small { grid-column: auto; grid-row: 1; }
  .tray.open ~ .chips { flex-wrap: nowrap; justify-content: center; gap: 3px; max-width: none; width: 100%; }
  .tray.open ~ .chips .chip { flex: 0 1 34px; min-width: 0; width: 34px; height: auto; aspect-ratio: 1; }
}

/* ---- insurance: asked in the dock, where the decisions live, so the table stays in full view ----------- */
.insure { grid-area: dock; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 4px 0; }
body[data-mode="insurance"] .decisions { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.ins-copy { display: flex; align-items: center; gap: 14px; text-align: left; max-width: 380px; }
.ins-ace { flex: none; position: relative; width: 40px; height: 56px; border-radius: 6px; background: linear-gradient(#fbf7ee, #e9e1cf); color: #1a1a1c; box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0, 0, 0, .5); display: grid; place-items: center; animation: ace-glow 1.8s ease-in-out infinite; }
.ins-ace b { font: 700 22px/1 Cinzel, Georgia, serif; margin-top: -8px; }
.ins-ace i { position: absolute; bottom: 6px; font: 400 16px/1 system-ui, sans-serif; font-style: normal; }
.ins-ace.red { color: #b3262e; }
@keyframes ace-glow { 50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(226, 196, 131, .45), 0 6px 16px rgba(0, 0, 0, .5); } }
.insure h2 { margin: 0 0 4px; font: 700 22px/1.1 Cinzel, Georgia, serif; letter-spacing: .04em; color: var(--gold-hi); }
.insure p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.insure .row { display: flex; gap: 10px; }
.ins-btn { height: 54px; padding: 0 22px; border-radius: 16px; font-size: 15px; gap: 10px; box-shadow: 0 4px 0 #0a0a0b, 0 10px 18px rgba(0, 0, 0, .35); transition: transform 60ms ease, box-shadow 60ms ease, background var(--duration-quick), border-color var(--duration-quick); }
.ins-btn.gold { box-shadow: 0 4px 0 #6b5226, 0 10px 18px rgba(0, 0, 0, .35); }
.ins-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #0a0a0b, 0 3px 6px rgba(0, 0, 0, .3); }
.ins-btn:disabled { opacity: .4; }
@media (max-width: 760px) {
  .insure { gap: 10px; flex-direction: column; }
  .ins-copy { gap: 12px; padding: 0 4px; } .ins-ace { width: 32px; height: 46px; } .ins-ace b { font-size: 18px; } .ins-ace i { font-size: 13px; bottom: 5px; }
  .insure h2 { font-size: 18px; } .insure p { font-size: 12.5px; }
  .insure .row { width: 100%; max-width: 360px; } .ins-btn { flex: 1; justify-content: center; height: 48px; padding: 0 12px; font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .insure { flex-direction: column; gap: 10px; } .insure .row { flex-direction: column; width: 100%; } .ins-btn { justify-content: center; height: 44px; }
  .ins-copy { gap: 10px; } .ins-ace { width: 30px; height: 42px; } .insure h2 { font-size: 17px; } .insure p { font-size: 12px; }
}
body.reduced .ins-ace { animation: none; }

/* ---- head room for the chip in hand: it lifts 7px and wears a 4px ring, so the row keeps clear space above */
.betting { row-gap: 12px; }
.chips { padding-top: 14px; padding-bottom: 4px; margin-top: -4px; }
@media (max-width: 760px) { .chips { padding-top: 13px; } .betting { row-gap: 10px; } }
@media (orientation: landscape) and (max-height: 520px) { .chips { padding-top: 12px; row-gap: 12px; } }


/* ---- the Salon Noir lobby ----------------------------------------------------------------------------
   The front room is the real table, live: the camera circles it under its pendant while the menu sits
   in the shadows around it - the title up top, a rail of tables along the foot. Picking a table
   re-dresses the felt behind; taking a seat flies the camera into your chair as the menu parts. */
.lobby { position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.lobby-shade { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 46%, transparent 38%, rgba(4, 4, 5, .5) 78%),
    linear-gradient(180deg, rgba(4, 4, 5, .88) 0%, rgba(4, 4, 5, .35) 24%, rgba(4, 4, 5, 0) 42%, rgba(4, 4, 5, .1) 55%, rgba(4, 4, 5, .8) 74%, rgba(4, 4, 5, .97) 100%);
  transition: opacity 700ms; }   /* (with the camera's flight into the seat) */
.lobby-inner { position: relative; min-height: 100%; width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
/* the menu parts as you take a seat, piece by piece, while the camera flies in: the title's pieces lift away one after
   another, the wordmark swelling a little as it goes out of focus; the rail's title, the switch and the cards (one after
   another) sink and blur away, the button you pressed last; the shade lifts off the table. Exits speed up as they go. */
.lobby.leaving { pointer-events: none; }
.lobby.leaving .lobby-shade { opacity: 0; }
.lobby-head > *, .rail > *, .tcards > .tcard { --out: 0ms; transition: opacity .42s var(--out) cubic-bezier(.55, 0, .8, .3), translate .5s var(--out) cubic-bezier(.55, 0, .8, .3), scale .5s var(--out) cubic-bezier(.55, 0, .8, .3), filter .5s var(--out) cubic-bezier(.55, 0, .8, .3); }
.lobby.leaving .lobby-head > * { opacity: 0; translate: 0 -18px; filter: blur(6px); }
.lobby.leaving .lobby-word { scale: 1.05; }
.lobby-head > .lobby-word { --out: 40ms; } .lobby-head > .lobby-tag { --out: 90ms; } .lobby-head > .lobby-balance { --out: 60ms; }
.lobby.leaving .rail > *, .lobby.leaving .tcards > .tcard { opacity: 0; translate: 0 26px; filter: blur(6px); }
.lobby.leaving .tcards { opacity: 1; translate: none; filter: none; }   /* (the row stays; its cards go one by one) */
.lobby.leaving .tcard.arrive { animation: none; }   /* (an arrival held at its end would take the exit's values without a tween) */
.lobby.leaving .lobby-mark { filter: drop-shadow(0 6px 16px rgba(201, 164, 92, .3)) blur(6px); }
.rail > .games { --out: 30ms; } .tcards > .tcard:nth-child(3n + 1) { --out: 70ms; } .tcards > .tcard:nth-child(3n + 2) { --out: 115ms; } .tcards > .tcard:nth-child(3n) { --out: 160ms; }
.rail > .lobby-note { --out: 120ms; } .rail > .seat { --out: 200ms; } .lobby.leaving .rail > .seat { scale: .96; }
.lobby:not(.leaving) .lobby-head { animation: head-in 1s cubic-bezier(.2, .9, .25, 1) both; }
.lobby:not(.leaving) .rail { animation: rail-in 1s .15s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes head-in { from { opacity: 0; transform: translateY(-24px); } }
@keyframes rail-in { from { opacity: 0; transform: translateY(40px); } }

.lobby-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.lobby-mark { grid-column: 1; justify-self: start; width: 46px; height: 46px; filter: drop-shadow(0 6px 16px rgba(201, 164, 92, .3)); }
.lobby-mark svg { width: 100%; height: 100%; overflow: visible; }
/* The lobby's own decoration plays as it opens and then rests: an animation that never ends has the page redrawn every
   frame for as long as it is open, and a laptop warms to it (Firefox repaints an SVG's animation on the main thread). */
.lobby-mark .keylight { animation: keylight 5s ease-in-out 2; }
@keyframes keylight { 0%, 100% { opacity: 1; } 42% { opacity: .75; } 47% { opacity: .95; } 70% { opacity: .85; } }
.lobby-word { grid-column: 2; margin: 0; display: grid; justify-items: center; line-height: 1; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lobby-word small { font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .8em; margin-right: -.8em; text-transform: uppercase; color: var(--gold); }
.lobby-word span { position: relative; font: italic 400 124px/.9 "Bodoni Moda", Georgia, serif; letter-spacing: -.015em; padding: 0 .08em;
  background: linear-gradient(100deg, #b8914b 0%, #f1dfae 30%, #fffaf0 42%, #e2c483 52%, #a67c38 80%, #e2c483 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gilt 7s ease-in-out 1; }
@keyframes gilt { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lobby-tag { grid-column: 2; margin: -6px 0 0; justify-self: center; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .34em; text-transform: uppercase; color: rgba(236, 228, 210, .66); }
.lobby-head .lobby-balance { grid-column: 3; grid-row: 1; justify-self: end; }

.rail { grid-row: 3; align-self: end; display: grid; gap: 14px; justify-items: center; }
.rail-title { margin: 0; display: flex; align-items: center; gap: 14px; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.rail-title::before, .rail-title::after { content: ''; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .8)); }
.rail-title::after { transform: scaleX(-1); }
@supports (-moz-appearance: none) { .games, .tcard { -webkit-backdrop-filter: none; backdrop-filter: none; } .games { background: rgba(12, 12, 13, .84); } .tcard:not([aria-checked="true"]) { background: linear-gradient(180deg, rgba(24, 22, 20, .9), rgba(10, 10, 11, .95)); } .sheet::backdrop { backdrop-filter: none; background: rgba(0, 0, 0, .68); } }   /* (Firefox: no blur, see the top bar's band) */
/* the Blackjack | Roulette switch over the rail: a dark glass bar, its gold pill sliding to the game shown */
.games { position: relative; display: inline-flex; gap: 3px; padding: 4px; border-radius: 99px; background: rgba(12, 12, 13, .62); border: 1px solid rgba(201, 164, 92, .26);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.game { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px; border: 0; border-radius: 99px; background: none; cursor: pointer;
  font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(236, 228, 210, .7); transition: color var(--duration-fast) var(--ease-smooth-out); }
.game small { min-width: 18px; padding: 3px 5px; border-radius: 99px; font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: 0; background: rgba(255, 255, 255, .08); color: inherit; transition: background var(--duration-fast) var(--ease-smooth-out); }
.game[aria-selected="true"] { color: #15120c; } .game[aria-selected="true"] small { background: rgba(21, 18, 12, .14); }
@media (hover: hover) { .game:not([aria-selected="true"]):hover { color: var(--ivory); } }
.game:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.games-pill { position: absolute; z-index: 0; top: 4px; left: 0; height: 38px; width: 0; border-radius: 99px; pointer-events: none;
  background: linear-gradient(180deg, #ecd197, #c9a45c); box-shadow: 0 4px 16px rgba(201, 164, 92, .35), inset 0 1px 0 rgba(255, 246, 220, .6);
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out); will-change: transform, width; }
.lobby[data-game="blackjack"] .tcard[data-game="roulette"], .lobby[data-game="roulette"] .tcard[data-game="blackjack"] { display: none; }
.tcard.arrive { animation: card-in .5s var(--ease-smooth-out) calc(var(--i) * 60ms) both; }
@keyframes card-in { from { opacity: 0; translate: 0 14px; filter: blur(3px); } }
body.reduced .tcard.arrive { animation: none; } body.reduced .games-pill { transition: none; }
.tcards { width: min(100%, 980px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 6px; }   /* one game's three tables (the switch above) */
.tcard { --acc: #c9a45c; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto;   /* icon and name; the line; the price at the foot, level across the row */
  gap: 4px 12px; align-items: start; text-align: left;
  min-height: 132px; padding: 16px 16px 14px; border-radius: 18px; color: var(--ivory);
  background: linear-gradient(180deg, rgba(24, 22, 20, .78), rgba(10, 10, 11, .86)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 164, 92, .22); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 200, .05);
  transition: transform .6s var(--spring-settle), border-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), background var(--duration-fast) var(--ease-smooth-out); cursor: pointer; overflow: hidden; }
@media (hover: hover) { .tcard:hover { transform: translateY(-3px); } }
.tcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .5; transition: opacity var(--duration-medium); }
.tcard[data-mode="freebet"] { --acc: #52c496; } .tcard[data-mode="lightning"], .tcard[data-mode="roulette-lightning"] { --acc: #8ea9ff; } .tcard[data-mode="roulette-mega"] { --acc: #ff7a4d; }
.tcard:hover { border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.tcard:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.tcard[aria-checked="true"] { transform: translateY(-10px); border-color: color-mix(in srgb, var(--acc) 75%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, rgba(24, 22, 20, .86)), rgba(10, 10, 11, .9));
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55), 0 0 40px color-mix(in srgb, var(--acc) 30%, transparent), inset 0 1px 0 rgba(255, 236, 200, .08); }
.tcard[aria-checked="true"]::before { opacity: 1; height: 3px; }
.t-ico { grid-row: 1; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--acc); transition: background var(--duration-medium), color var(--duration-medium), box-shadow var(--duration-medium); }
.t-ico svg { width: 22px; height: 22px; fill: currentColor; }
.t-ico svg .cut { fill: none; stroke: #121110; stroke-width: 1.6; } .t-ico svg .ring { fill: none; stroke: currentColor; stroke-width: 1.8; }
.tcard[aria-checked="true"] .t-ico { background: var(--acc); color: #121110; box-shadow: 0 0 22px color-mix(in srgb, var(--acc) 55%, transparent); }
.tcard[aria-checked="true"] .t-ico svg .cut { stroke: var(--acc); }
.t-kick { align-self: center; font: 700 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
/* a name is never clipped: it gives up size with the card's width (a narrow laptop, an iPad on its side) */
.tcard b { align-self: center; min-width: 0; font: 500 clamp(22px, 2.3vw, 30px)/1.02 "Bodoni Moda", Georgia, serif; }   /* (beside its icon: the switch above names the game) */
.t-line { grid-column: 1 / -1; margin-top: 8px; font: 500 13px/1.35 Inter, system-ui, sans-serif; color: rgba(236, 228, 210, .72); }
.t-stat { grid-column: 1 / -1; align-self: end; justify-self: start; margin-top: 10px; padding: 5px 9px; border-radius: 99px; font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.tcard.soon { cursor: default; opacity: .72; --acc: #7c756a; }
.tcard.soon b { font-size: clamp(15px, 1.6vw, 22px); color: var(--muted); }
.tcard.soon .rope { position: absolute; left: -10%; right: -10%; top: 58%; height: 3px; border-radius: 3px; rotate: -8deg; background: repeating-linear-gradient(90deg, #7d1f28 0 10px, #a8323d 10px 20px); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); opacity: .85; }
.rail .seat { height: 60px; min-width: min(420px, 100%); justify-content: center; gap: 12px; font-size: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 40px rgba(201, 164, 92, .25); }
.rail .seat .which { font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.rail .seat .which::before { content: '· '; }
.lobby-note { margin: 0; max-width: min(520px, calc(100vw - 32px)); padding: 7px 16px; border-radius: 18px; background: rgba(12, 12, 13, .72); border: 1px solid rgba(201, 164, 92, .28); font: 500 13.5px/1.35 Inter, system-ui, sans-serif; color: #e6dfd0; text-align: center; }
/* while the menu is up (and while the camera flies in) the table's own chrome stays out of the shot */
body.in-lobby .top, body.in-lobby .dock, body.in-lobby #overlay, body.in-lobby .hint, body.in-lobby .feed, body.in-lobby .banner, body.in-lobby .zap, body.in-lobby .lightning,
body.flying .top, body.flying .dock, body.flying #overlay, body.flying .hint, body.flying .feed, body.flying .lightning { opacity: 0; pointer-events: none; }
/* and back at the table once the camera has landed: the bar comes down into place and the dock up, and the frosted band
   under each grows in from its edge of the screen layer by layer, the strongest blur first */
.top, .dock, #overlay { transition: opacity .6s .1s, translate .8s .1s cubic-bezier(.2, .8, .25, 1); }
body:is(.in-lobby, .flying) .top { translate: 0 -14px; }
body:is(.in-lobby, .flying) .dock { translate: 0 18px; }
.top-blur i, .dock-blur i { transition: opacity .55s var(--in, 0ms) ease-out, translate .9s var(--in, 0ms) cubic-bezier(.2, .8, .25, 1); }
body:is(.in-lobby, .flying) .top-blur i { opacity: 0; translate: 0 -16px; }
body:is(.in-lobby, .flying) .dock-blur i { opacity: 0; translate: 0 26px; }
.top-blur i:nth-child(3) { --in: 120ms; } .top-blur i:nth-child(2) { --in: 220ms; } .top-blur i:nth-child(1) { --in: 320ms; }
.dock-blur i:nth-child(5) { --in: 120ms; } .dock-blur i:nth-child(4) { --in: 200ms; } .dock-blur i:nth-child(3) { --in: 280ms; } .dock-blur i:nth-child(2) { --in: 360ms; } .dock-blur i:nth-child(1) { --in: 440ms; }
body:is(.in-lobby, .flying) :is(.top-blur, .dock-blur) i { transition-duration: .3s; transition-delay: 0s; }   /* (going, all at once) */
/* a change of table in the lobby (swap in scene/stage.mjs): the last frame over the canvas, swept away by a band of light
   running across it; a Lightning table's band is electric (it flickers as it goes) */
.stage-swap, .stage-sweep { position: absolute; pointer-events: none; }
.stage-sweep { --p: -20%; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent calc(var(--p) - 10%), rgba(201, 164, 92, .16) calc(var(--p) - 3.5%), rgba(255, 240, 205, .95) var(--p), rgba(201, 164, 92, .16) calc(var(--p) + 3.5%), transparent calc(var(--p) + 10%)); }
.stage-sweep.lightning { background: linear-gradient(105deg, transparent calc(var(--p) - 9%), rgba(110, 132, 255, .24) calc(var(--p) - 2.5%), #eef3ff var(--p), rgba(110, 132, 255, .24) calc(var(--p) + 2.5%), transparent calc(var(--p) + 9%)); }

/* phones: the title tightens to the top, the tables become a swipeable rail, the seat button spans the foot */
@media (max-width: 760px) {
  .lobby-inner { gap: 10px; }
  .lobby-head { grid-template-columns: auto 1fr auto; align-items: center; }
  .lobby-mark { width: 34px; height: 34px; }
  .lobby-word { grid-column: 2; justify-items: start; }
  .lobby-word small { font-size: 9px; letter-spacing: .6em; margin: 0 0 2px; }
  .lobby-word span { font-size: 46px; padding: 0; }
  .lobby-tag { display: none; }
  .lobby-head .lobby-balance { grid-column: 3; height: 40px; padding: 4px 12px 4px 4px; gap: 8px; }
  .lobby-head .lobby-balance .coin { width: 30px; height: 30px; } .lobby-head .lobby-balance output { font-size: 19px; } .lobby-head .lobby-balance .k { font-size: 8px; }
  .rail-title { font-size: 10px; } .rail-title::before, .rail-title::after { width: 36px; }
  .tcards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 12px 16px 6px; margin: 0 -16px; width: calc(100% + 32px); scrollbar-width: none; }
  .tcards::-webkit-scrollbar { display: none; }
  .tcard { flex: 0 0 64%; scroll-snap-align: center; min-height: 0; padding: 13px 14px; }
  .t-line { font-size: 12.5px; margin-top: 4px; }
  .tcard b { font-size: clamp(20px, 6.8vw, 26px); }
  .rail .seat { width: 100%; height: 56px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .lobby-word span { font-size: 54px; } .lobby-tag { display: none; } .lobby-mark { width: 32px; height: 32px; }
  .tcard { min-height: 0; padding: 10px 12px; } .t-line { display: none; } .tcard b { font-size: 22px; }
  .t-ico { grid-row: 1; width: 30px; height: 30px; } .tcard.soon b { font-size: 17px; }
  .rail .seat { height: 46px; } .rail-title { display: none; }
}
body.reduced .lobby-head, body.reduced .rail, body.reduced .lobby-word span, body.reduced .keylight { animation: none !important; }

/* ---- the wallet: your chips, the same object in the lobby and at the table ------------------------------
   A dark glass capsule with a brass hairline, led by a small clay chip; the balance in gold, what is in
   play beside it after a hairline rule. Replaces the plain label-and-number boxes. */
.wallet { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 5px 16px 5px 6px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(38, 34, 28, .78), rgba(14, 13, 12, .78)); border: 1px solid rgba(201, 164, 92, .34);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .09), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
}
.bank.wallet { margin-left: auto; }
.wallet .coin { flex: none; width: 32px; height: 32px; border-radius: 50%; position: relative;
  background: radial-gradient(circle, #1a1611 0 47%, transparent 48%), repeating-conic-gradient(#dcb86c 0 11deg, #7d5f28 11deg 30deg);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 240, 210, .25), 0 2px 6px rgba(0, 0, 0, .45); }
.wallet .coin::after { content: ''; position: absolute; inset: 27%; border-radius: 50%; border: 1px solid rgba(220, 184, 108, .85); box-shadow: 0 0 0 2px rgba(26, 22, 17, .9); }
.wallet .w-seg { display: grid; gap: 2px; line-height: 1; }
.wallet .k { white-space: nowrap; font: 700 10px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #969083; }   /* 4.5:1 on the capsule's warmer glass */
.wallet output { font: 800 21px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ivory); }
.wallet .w-seg:first-of-type output { color: var(--gold-hi); }
.wallet .w-rule { width: 1px; align-self: stretch; margin: 5px 2px; background: linear-gradient(transparent, rgba(201, 164, 92, .4), transparent); }
.wallet .play output { color: var(--ivory); opacity: .92; }
/* this visit's net (the book in core/ledger.mjs): gold when up, rose when down; a phone has it under Last hands */
.wallet .visit output[data-tone="up"] { color: var(--gold-hi); } .wallet .visit output[data-tone="down"] { color: #e7a197; }
@media (max-width: 600px) { .wallet .visit { display: none; } }
.wallet.big { height: 56px; padding: 6px 24px 6px 8px; gap: 12px; }
.wallet.big .coin { width: 42px; height: 42px; }
.wallet.big output { font-size: 28px; }
.wallet.big .k { font-size: 10px; }
.lobby-balance.wallet { align-items: center; }
@media (max-width: 760px) {
  .wallet { height: 38px; gap: 8px; padding: 4px 12px 4px 4px; }
  .wallet .coin { width: 28px; height: 28px; }
  .wallet output { font-size: 18px; } .wallet .k { font-size: 10px; letter-spacing: .08em; }
  .wallet.big { height: 50px; } .wallet.big .coin { width: 38px; height: 38px; } .wallet.big output { font-size: 25px; }
}
@media (max-width: 400px) { .bank.wallet .coin { display: none; } .bank.wallet { padding-left: 12px; } }
@media (orientation: landscape) and (max-height: 520px) { .wallet { height: 34px; } .wallet .coin { width: 24px; height: 24px; } .wallet output { font-size: 16px; } }

.mode-rules-title { margin: 14px 0 6px; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
/* a double or split the house pays for carries a small FREE tag */
.act .free-tag { position: absolute; left: 8px; top: 7px; padding: 2px 6px 1px; border-radius: 99px; background: linear-gradient(#f3d57a, #c99a2e); color: #17130b; font: 800 10px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .1em; }
.act .free-tag[hidden] { display: none; }

/* ---- Lightning: the marquee, the strike and your multiplier ------------------------------------------------
   The board is an Art Deco marquee in black and brass over the dealer, as in the live show. On the deal
   the room dims (.zap .dim), bolts are drawn in the .zap layer, and a cold flash washes over the stage. */
.lightning { position: absolute; left: 50%; top: calc(var(--top-h, 0px) + 8px); translate: -50% 0; pointer-events: none; z-index: 3; transition: opacity .5s; }
.lightning[hidden] { display: none; }
.lb-row { position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 19, 14, .94), rgba(8, 8, 9, .94)); border: 1px solid rgba(201, 164, 92, .75);
  box-shadow: 0 0 0 3px rgba(8, 8, 9, .85), 0 0 0 4px rgba(201, 164, 92, .35), 0 10px 26px rgba(0, 0, 0, .5); }
.lb-row::before, .lb-row::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; translate: 0 -50%; rotate: 45deg; background: var(--gold); box-shadow: 0 0 0 2px #0b0b0c; }
.lb-row::before { left: -9px; } .lb-row::after { right: -9px; }
.lightning.charging .lb-row { animation: charge .12s steps(2) infinite; }
@keyframes charge { 50% { box-shadow: 0 0 0 3px rgba(8, 8, 9, .85), 0 0 0 4px rgba(170, 190, 255, .7), 0 0 26px rgba(140, 165, 255, .55); } }
.lb-cell { position: relative; display: grid; justify-items: center; min-width: 46px; padding: 4px 6px 4px; border-radius: 8px; transition: background var(--duration-medium), box-shadow var(--duration-medium); }
.lb-cell + .lb-cell::before { content: ''; position: absolute; left: -2px; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, rgba(201, 164, 92, .45), transparent); }
.lb-cell small { font: 700 9.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; color: var(--gold); }
.lb-cell b { font: 800 20px/1.05 "Barlow Condensed", sans-serif; color: #55524c; font-variant-numeric: tabular-nums; }
.lb-cell.struck b { color: #f2f5ff; text-shadow: 0 0 8px rgba(150, 175, 255, .9), 0 0 18px rgba(110, 140, 255, .6); }
.lb-cell.hot b { color: #fff4c8; text-shadow: 0 0 8px rgba(255, 220, 130, .95), 0 0 22px rgba(255, 190, 80, .7); }
.lb-cell.flash { animation: lb-flash .55s ease-out; }
@keyframes lb-flash { 0% { background: rgba(235, 240, 255, .95); box-shadow: 0 0 30px 6px rgba(170, 190, 255, .9); } 100% { background: transparent; box-shadow: none; } }
/* as the charge builds a cell crackles now and then; the last to be struck holds charged in the dark before it (steady at soft) */
.lb-cell.crackle b { animation: crackle var(--duration-quick) steps(1, end); }
@keyframes crackle { 0%, 45% { color: #dfe6ff; text-shadow: 0 0 6px rgba(150, 175, 255, .95), 0 0 14px rgba(110, 140, 255, .6); } 25%, 70%, 100% { color: #55524c; text-shadow: none; } }
.lb-cell.armed { box-shadow: inset 0 0 0 1px rgba(170, 190, 255, .7), 0 0 16px rgba(140, 165, 255, .45); }
.lb-cell.armed b { color: #c9d4ff; animation: crackle var(--duration-quick) steps(1, end) infinite; }
.lightning.soft .lb-cell.armed b { animation: none; }
.lb-cell.lit { background: linear-gradient(180deg, rgba(226, 196, 131, .35), rgba(201, 164, 92, .12)); box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 18px rgba(226, 196, 131, .45); }
.lb-cell.lit small { color: var(--gold-hi); }
/* the strike layer over the table */
.zap { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.zap[hidden] { display: none; }
.zap .dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 70% at 50% 20%, rgba(10, 14, 40, .25), rgba(2, 3, 10, .62)); }
.zap .flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(80% 60% at 50% 15%, rgba(235, 240, 255, .95), rgba(160, 180, 255, .5) 60%, rgba(120, 140, 255, .2)); mix-blend-mode: screen; }
.zap .bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zap .bolts path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zap .bolts .glow { stroke: #7f9bff; opacity: .55; filter: blur(3px); }
.zap .bolts .core { stroke: #f4f7ff; }
.zap .bolts .hot .glow { stroke: #ffd98a; opacity: .6; }
.zap .l-splash { position: absolute; left: 50%; top: 42%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; text-align: center; isolation: isolate; }
.zap .l-splash::before { content: ''; position: absolute; inset: -50px -110px; z-index: -1; background: radial-gradient(closest-side, rgba(4, 6, 18, .92), rgba(4, 6, 18, .6) 55%, transparent); }
.zap .l-splash small { font: 700 12px/1 Inter, system-ui, sans-serif; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: #cdd8ff; text-shadow: 0 0 10px rgba(120, 150, 255, .9); }
.zap .l-splash b .x { font-size: .62em; margin-left: .03em; }
.zap .l-splash b { font: 900 112px/.9 "Bodoni Moda", Georgia, serif; letter-spacing: -.01em; color: #fff6d6; text-shadow: 0 0 18px rgba(255, 210, 120, .95), 0 0 50px rgba(255, 170, 60, .7), 0 0 90px rgba(120, 150, 255, .6); }
.zap .l-splash em { font: 800 36px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--gold-hi); text-shadow: 0 0 14px rgba(0, 0, 0, .8); }
/* the payoff: the multiplier slams in and holds while the sum counts up under it, which pops as it lands; then it goes */
.zap .l-splash.go { animation: splash-in .55s cubic-bezier(.2, .9, .25, 1) both; }
.zap .l-splash.out { animation: splash-out var(--duration-medium) ease-in both; }
@keyframes splash-in { 0% { opacity: 0; scale: 2.2; filter: blur(8px); } 40% { opacity: 1; scale: .94; filter: none; } 70% { scale: 1.04; } 100% { opacity: 1; scale: 1; } }
@keyframes splash-out { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.08; } }
.zap .l-splash em { font-variant-numeric: tabular-nums; }
.zap .l-splash em.done { animation: tally var(--duration-quick) cubic-bezier(.2, .9, .25, 1); }
@keyframes tally { 0% { scale: 1.35; color: #fff; text-shadow: 0 0 18px rgba(255, 220, 140, .95), 0 0 40px rgba(255, 190, 90, .7); } 100% { scale: 1; } }
/* your multiplier, waiting beside your bet */
.l-badge { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; padding: 4px 9px 4px 6px; translate: -50% -50%; border-radius: 99px; pointer-events: auto;
  background: linear-gradient(180deg, #2b2416, #0d0c0a); border: 1px solid var(--gold-hi); color: var(--gold-hi);
  box-shadow: 0 0 0 2px rgba(8, 8, 9, .8), 0 0 18px rgba(255, 205, 110, .45), 0 6px 14px rgba(0, 0, 0, .5); white-space: nowrap; animation: badge-hum 2.4s ease-in-out 3; }   /* (a few hums as it arrives, then a steady glow: see the lobby's note on endless animations) */
.l-badge svg { width: 15px; height: 15px; fill: #ffe28f; filter: drop-shadow(0 0 4px rgba(255, 210, 110, .9)); }
.l-badge b { font: 800 19px/1 "Barlow Condensed", sans-serif; color: #fff2c4; }
.l-badge small { font: 700 11px/1 Inter, system-ui, sans-serif; color: var(--muted); }
@keyframes badge-hum { 50% { box-shadow: 0 0 0 2px rgba(8, 8, 9, .8), 0 0 28px rgba(255, 205, 110, .7), 0 6px 14px rgba(0, 0, 0, .5); } }
.l-badge.arrive { animation: badge-in .7s cubic-bezier(.2, 1.5, .4, 1), badge-hum 2.4s .7s ease-in-out 3; }
@keyframes badge-in { 0% { scale: 0; opacity: 0; } 50% { scale: 1.35; opacity: 1; } 100% { scale: 1; } }
/* the payoff gathering on it: the badge crackles, swelling, before the bolt drives in */
.l-badge.gather { animation: badge-gather .11s steps(2) infinite; scale: 1.18; transition: scale var(--duration-fast); }
@keyframes badge-gather { 50% { box-shadow: 0 0 0 2px rgba(8, 8, 9, .8), 0 0 34px rgba(255, 225, 150, .95), 0 0 12px rgba(170, 190, 255, .9); filter: brightness(1.5); } }
.l-badge.spent { animation: badge-spent .7s ease-out forwards; }
@keyframes badge-spent { 30% { scale: 1.5; filter: brightness(2); } 100% { scale: .2; opacity: 0; } }
.l-badge.lost { animation: badge-lost var(--duration-medium) ease-in forwards; }
@keyframes badge-lost { 30% { translate: 3px 0; filter: grayscale(1); } 60% { translate: -3px 0; } 100% { opacity: 0; scale: .7; filter: grayscale(1); } }
.feed li.bolt { border-color: rgba(170, 185, 255, .75); box-shadow: 0 0 18px rgba(150, 170, 255, .3); }
/* the board takes the head of the table, so the hint hangs just under it (the foot of the table is your badge's) */
body[data-table="lightning"] .hint { top: calc(var(--top-h, 0px) + var(--board-h, 0px) - 2px); }
@media (max-width: 420px) {
  .lb-cell { min-width: 41px; padding: 3px 4px; } .lb-cell b { font-size: 17px; } .lb-cell small { font-size: 8.5px; letter-spacing: .04em; }
  .zap .l-splash b { font-size: 92px; } .zap .l-splash em { font-size: 32px; }
}
@media (orientation: landscape) and (max-height: 520px) { .lb-cell { min-width: 36px; padding: 2px 4px; } .lb-cell b { font-size: 15px; } .lb-cell small { font-size: 8px; } .zap .l-splash b { font-size: 72px; } }
@media (prefers-reduced-motion: reduce) { .lb-cell.flash, .lb-cell.crackle b, .lb-cell.armed b, .zap .l-splash.out, .zap .l-splash em.done, .l-badge.gather, .l-badge, .zap .l-splash.go, .lightning.charging .lb-row { animation: none !important; } }
body.reduced .lb-cell.flash, body.reduced .lb-cell.crackle b, body.reduced .lb-cell.armed b, body.reduced .zap .l-splash.out, body.reduced .zap .l-splash em.done, body.reduced .l-badge.gather, body.reduced .l-badge, body.reduced .zap .l-splash.go, body.reduced .lightning.charging .lb-row { animation: none !important; }
/* Flashing effects (settings): soft turns the board's flicker into a slow swell; off keeps every light steady */
body[data-flash="soft"] .lightning.charging .lb-row { animation: charge .9s ease-in-out infinite; }
body[data-flash="off"] .lb-cell.flash, body[data-flash="off"] .lightning.charging .lb-row { animation: none !important; }


/* ==== roulette ======================================================================================== */
/* Two rooms share the top bar: the blackjack stage and dock, or the roulette ones. */
body[data-room="roulette"] #stage, body[data-room="roulette"] .dock:not(.rdock) { display: none !important; }
body:not([data-room="roulette"]) .rstage, body:not([data-room="roulette"]) .rdock { display: none !important; }
body[data-room="roulette"] .shoe-meter { display: none; }
body.in-lobby .rdock, body.in-lobby .r-overlay, body.in-lobby .r-hint, body.flying .rdock, body.flying .r-overlay, body.flying .r-hint { opacity: 0; pointer-events: none; }
.rdock, .r-overlay, .r-hint { transition: opacity .5s var(--ease); }
/* the portal between the rooms (scene/portal.mjs, crossRooms in app.mjs): the room coming in is laid out and drawn in the
   same place as the one going, out of sight, until the flash; the flash is the portal's light filling the picture as its
   ring snaps shut (under the lobby's menu, which stays as it was) */
body[data-coming="roulette"] .rstage, body[data-coming="blackjack"] #stage { display: block !important; visibility: hidden; }
.portal-flash { position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0; transition: opacity .55s cubic-bezier(.2, .7, .3, 1);
  background: radial-gradient(circle at 50% 55%, #fffaf0 0%, #ffe6ad 16%, #dcae5c 38%, #3a260c 74%, #0b0805 100%); }
.portal-flash.on { opacity: 1; transition: opacity .17s cubic-bezier(.5, 0, .9, .4); }
.rcanvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--under, 0px)); display: block; touch-action: none; }
.r-overlay { position: absolute; inset: 0; pointer-events: none; }
/* the room falls away into the dark round the table, as under its pendants */
.r-vignette { position: absolute; inset: 0 0 calc(-1 * var(--under, 0px)); pointer-events: none; background: radial-gradient(120% 95% at 50% 58%, transparent 52%, rgba(5, 4, 3, .38) 82%, rgba(5, 4, 3, .62) 100%); }
.r-fade { position: absolute; inset: 0; background: #050505; opacity: 0; pointer-events: none; transition: opacity var(--duration-quick) ease; z-index: 2; }
.r-fade.on { opacity: 1; }
/* the Lightning tables' strikes (rlightning.mjs): the studio darkening round the layout as the air charges (deeper for
   the double strike), and each return stroke's flash on the screen, centred where it grounds */
.r-dark { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 600ms ease;
  background: radial-gradient(ellipse 62% 52% at 58% 52%, rgba(2, 3, 8, .12) 20%, rgba(2, 3, 8, .66) 68%, rgba(2, 3, 8, .9)); }
.r-dark.on { opacity: 1; transition-duration: 450ms; }
.r-dark.deep { background: radial-gradient(ellipse 50% 42% at 58% 52%, rgba(1, 1, 4, .16) 15%, rgba(1, 1, 4, .78) 62%, rgba(1, 1, 4, .96)); }
.r-flash { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #f4f6ff, rgba(170, 186, 255, .55) 18%, rgba(110, 120, 220, .16) 45%, transparent 75%); }
.r-flash.hot { background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff6e8, rgba(255, 170, 100, .55) 18%, rgba(220, 90, 50, .16) 45%, transparent 75%); }
.r-hint, body[data-table] .r-hint { top: auto; bottom: 12px; }   /* beat the blackjack tables' hint placement, which may still be on the body */
/* An upright phone: the layout runs down to the foot of the picture (the column bets are its last row), so the line
   hangs over the wheel instead, under the recent numbers, and is hidden while a result is up (a result keeps its place
   until your next bet; a refusal clears it). While the ball runs the line goes to the foot. */
@media (max-width: 760px) and (orientation: portrait) {
  .r-hint, body[data-table] .r-hint { top: calc(var(--top-h, 0px) + 50px); bottom: auto; }
  body[data-rmode="spin"] .r-hint { top: auto; bottom: 12px; }
  .rstage:has(.r-win.show) .r-hint { opacity: 0; }
}

/* recent numbers: newest on the left, a bigger chip */
.r-history { position: absolute; left: 50%; top: calc(var(--top-h, 0px) + 8px); translate: -50% 0; display: flex; gap: 5px; margin: 0; padding: 5px 7px; list-style: none; border-radius: 12px; background: rgba(10, 10, 11, .58); border: 1px solid rgba(255, 255, 255, .06); }
.r-history:empty { display: none; }
.r-history li { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font: 800 15px/1 "Barlow Condensed", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.r-history li.red { background: #a3141f; } .r-history li.black { background: #19191c; box-shadow: inset 0 0 0 1px #34343a; } .r-history li.green { background: #0d7a45; }
.r-history li.latest { width: 34px; height: 34px; margin: -3px 2px -3px 0; font-size: 18px; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 14px rgba(226, 196, 131, .4); }
.r-history li:nth-child(n+2) { opacity: .88; } .r-history li:nth-child(n+8) { opacity: .6; }
/* While the ball runs the hint is a small pill at the foot. From the drop, and in the replay, the picture is the wheel's
   alone: the strip steps up out of it (it is back as the number is called, with the number) and the hint goes. */
body[data-rmode="spin"] .r-hint { top: auto; bottom: 6px; padding: 4px 11px; font-size: 12.5px; }
.r-history { z-index: 3; transition: opacity var(--duration-medium) var(--ease-smooth-out) .15s, translate var(--duration-slow) var(--ease-smooth-out) .15s; }   /* (over the top bar's blur, which runs on below the bar; back a beat after what took its place) */
.rstage.r-wheelonly .r-history { opacity: 0; translate: -50% -8px; }
.rstage.r-wheelonly .r-hint { opacity: 0; }

/* the bet under your finger or pointer */
.r-loupe { position: absolute; left: 0; top: 0; translate: -50% -100%; display: grid; justify-items: center; gap: 2px; padding: 6px 12px 6px; border-radius: 12px; background: rgba(14, 14, 15, .9); border: 1px solid rgba(226, 196, 131, .55); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); white-space: nowrap; z-index: 3; }
/* the loupe and the replay tag come in softly (gone at once, as a tooltip goes, when the pointer leaves) */
@starting-style { .r-loupe, .r-replay { opacity: 0; scale: .96; } }
.r-loupe, .r-replay { transition: opacity var(--duration-quick) ease-out, scale var(--duration-quick) ease-out; }
.r-loupe b { font: 700 13.5px/1.1 Inter, system-ui, sans-serif; color: var(--ivory); }
.r-loupe span { font: 600 11px/1 Inter, system-ui, sans-serif; color: var(--gold); letter-spacing: .04em; }

/* the number beside the ball */
.r-bubble { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 22px); display: grid; justify-items: center; gap: 5px; z-index: 3; }
.r-bubble b { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font: 700 30px/1 Cinzel, "Bodoni Moda", serif; color: #fff; border: 2px solid var(--gold-hi); box-shadow: 0 0 0 4px rgba(10, 10, 11, .55), 0 10px 30px rgba(0, 0, 0, .6), 0 0 34px rgba(226, 196, 131, .35); }
.r-bubble.red b { background: radial-gradient(circle at 35% 30%, #d0303c, #8e1019); } .r-bubble.black b { background: radial-gradient(circle at 35% 30%, #3a3a40, #0e0e10); } .r-bubble.green b { background: radial-gradient(circle at 35% 30%, #22a866, #0a5c33); }
.r-bubble small { padding: 3px 9px; border-radius: 99px; background: rgba(10, 10, 11, .8); font: 700 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory); white-space: nowrap; }
.r-bubble::after { content: ''; position: absolute; left: 50%; bottom: -18px; width: 1.5px; height: 16px; translate: -50% 0; background: linear-gradient(var(--gold-hi), transparent); }
/* under the ball where the bar or the recent numbers would cover it */
.r-bubble.below { translate: -50% 22px; }
.r-bubble.below::after { top: -18px; bottom: auto; background: linear-gradient(transparent, var(--gold-hi)); }
.r-replay { position: absolute; left: 50%; top: calc(var(--top-h, 0px) + 54px); translate: -50% 0; padding: 5px 12px 5px 22px; border-radius: 99px; background: rgba(10, 10, 11, .7); font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); }
.r-replay::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; translate: 0 -50%; border-radius: 50%; background: #e0493f; animation: rec 1s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }

/* the result */
.r-win { position: absolute; left: 50%; top: calc(var(--top-h, 0px) + 58px); translate: -50% 0; display: grid; justify-items: center; gap: 2px; padding: 10px 26px 11px; border-radius: 16px; background: linear-gradient(rgba(22, 20, 16, .94), rgba(12, 12, 13, .94)); border: 1px solid rgba(226, 196, 131, .35); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(10px) scale(.92); filter: blur(var(--blur-large)); transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out), filter var(--duration-quick) var(--ease-smooth-out); z-index: 3; }
/* in as the strip steps up out of its way: it rises, sharpens and settles with a little spring; out quicker */
.r-win.show { opacity: 1; transform: none; filter: none; transition: opacity var(--duration-slow) var(--ease) 0.12s, transform 700ms var(--spring-pop) 0.12s, filter var(--duration-slow) var(--ease) 0.12s; }
.r-win small { font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.r-win.red small { color: #ec8a8f; } .r-win.green small { color: #6fd39e; }
.r-win b { font: 500 15px/1.2 "Bodoni Moda", serif; font-style: italic; color: var(--ivory); }
.r-win em { font: 800 34px/1 "Barlow Condensed", sans-serif; font-style: normal; color: var(--ivory); font-variant-numeric: tabular-nums; }
.r-win.up { border-color: rgba(226, 196, 131, .75); } .r-win.up em { color: var(--gold-hi); text-shadow: 0 0 18px rgba(226, 196, 131, .45); }
.r-win.down em { color: #e7a197; font-size: 28px; }
.r-win .r-gross { font: 600 11.5px/1.2 Inter, system-ui, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-win .r-gross:empty { display: none; }
/* The result takes the recent numbers' place, the room kept for the strip above the picture: lower down it covered the
   racetrack printed on the cloth beside the layout, and the zero end of it on an upright phone. Beside the layout it is
   one line; on an upright phone the totals go under it. The strip is back with your next bet, the new number first. */
.rstage:has(.r-win.show) .r-history { opacity: 0; translate: -50% -10px; transition: opacity var(--duration-quick) var(--ease-smooth-out), translate var(--duration-medium) var(--ease-smooth-out); }
@media (max-width: 760px) and (orientation: portrait) {
  .r-win { top: calc(var(--top-h, 0px) + 6px); width: max-content; max-width: calc(100% - 24px); grid-template-columns: repeat(3, auto); grid-template-areas: 's b e' 'g g g'; align-items: center; column-gap: 12px; row-gap: 1px; padding: 5px 16px 6px; }
  .r-win small, .r-win b, .r-win em { white-space: nowrap; }
  .r-win small { grid-area: s; } .r-win b { grid-area: b; } .r-win em { grid-area: e; } .r-win .r-gross { grid-area: g; margin-top: 1px; text-align: center; }
}
@media (min-width: 761px), (orientation: landscape) {
  .r-win { top: calc(var(--top-h, 0px) + 6px); width: max-content; max-width: calc(100% - 24px); grid-template-columns: repeat(4, auto); grid-template-areas: 's b e g'; align-items: center; column-gap: 14px; padding: 3px 18px 4px; white-space: nowrap; }   /* (its own width: placed at left 50%, it would shrink to the half on its right) */
  .r-win small { grid-area: s; } .r-win b { grid-area: b; } .r-win em { grid-area: e; font-size: 30px; } .r-win.down em { font-size: 26px; }
  .r-win .r-gross { grid-area: g; max-width: 200px; white-space: normal; text-align: left; }
}
.r-tag { position: absolute; left: 0; top: 0; translate: -50% -100%; display: flex; gap: 5px; align-items: baseline; padding: 3px 8px; border-radius: 99px; background: rgba(12, 12, 13, .82); white-space: nowrap; animation: tag-up 2.6s var(--ease) forwards; }
.r-tag b { font: 700 11px/1 Inter, system-ui, sans-serif; color: var(--muted); } .r-tag span { font: 800 15px/1 "Barlow Condensed", sans-serif; color: var(--gold-hi); }
@keyframes tag-up { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

/* sheets: the racetrack and the statistics rise over the table */
.r-sheet { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 10px; width: min(760px, calc(100% - 20px)); max-height: calc(100% - var(--top-h, 0px) - 70px); overflow: auto; padding: 12px 14px 14px; border-radius: 18px; background: rgba(15, 15, 17, .96); border: 1px solid var(--line-2); box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); pointer-events: auto; z-index: 5; }
.r-sheet header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.r-sheet h3 { margin: 0; flex: 1; font: 500 19px/1.1 "Bodoni Moda", serif; font-style: italic; color: var(--ivory); }
.r-sheet h3 small { margin-left: 8px; font: 600 11px/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.r-close { flex: none; }
/* the track is drawn in screen pixels for its room (see trackShape in rgame.mjs): --fs and --zfs come with it */
.rt { width: 100%; height: auto; display: block; overflow: visible; }
.rt-band { fill: rgba(18, 58, 43, .9); stroke: rgba(201, 164, 92, .8); stroke-width: 1.5; }
.rt-inner { fill: rgba(10, 30, 22, .9); stroke: rgba(236, 228, 208, .5); stroke-width: 1.2; }
.rt-num { cursor: pointer; outline: none; }
.rt-num .hit { fill: transparent; stroke: none; }   /* the whole place between its neighbours takes the tap */
.rt-num .face { stroke: rgba(236, 228, 208, .55); stroke-width: 1.2; transition: stroke var(--duration-quick), filter var(--duration-quick); }
.rt-num.red .face { fill: #a3141f; } .rt-num.black .face { fill: #141416; } .rt-num.green .face { fill: #0d7a45; }
.rt-num text { font: 700 var(--fs, 14px)/1 Cinzel, serif; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rt-num.lit .face { stroke: var(--gold-hi); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(226, 196, 131, .8)); }
.rt-num:focus-visible .face { stroke: #fff; stroke-width: 3.4; }
.rt-zone { cursor: pointer; outline: none; } .rt-zone path { fill: rgba(236, 228, 208, .04); stroke: rgba(236, 228, 208, .35); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--duration-quick), stroke var(--duration-quick); }
.rt-zone text { font: italic 700 var(--zfs, 16px)/1 "Bodoni Moda", serif; fill: var(--ivory); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
@media (hover: hover) { .rt-zone:hover path { fill: rgba(226, 196, 131, .16); stroke: var(--gold-hi); } .rt-num:hover .face { stroke: var(--gold-hi); stroke-width: 2.6; } }
.rt-zone:active path { fill: rgba(226, 196, 131, .24); }
.rt-zone:focus-visible path { fill: rgba(226, 196, 131, .16); stroke: var(--gold-hi); stroke-width: 2.6; }
.rt-nb { display: flex; align-items: center; gap: 6px; font: 600 12px/1 Inter, system-ui, sans-serif; color: var(--muted); }
.rt-nb .pill { position: relative; height: 30px; width: 30px; padding: 0; justify-content: center; font-size: 17px; }
/* a refusal said in the sheet, over the top of the track for a moment */
.r-say { position: absolute; left: 50%; top: 54px; translate: -50% 0; z-index: 1; width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 6px 12px; border-radius: 12px; background: rgba(12, 12, 13, .95); border: 1px solid rgba(184, 90, 79, .65); font: 600 12.5px/1.3 Inter, system-ui, sans-serif; color: #f0c9c2; text-align: center; pointer-events: none; }
/* a phone: the sheets take the picture under the bar, so the track can give every number a finger's room */
@media (max-width: 760px) and (orientation: portrait), (orientation: landscape) and (max-height: 520px) {
  .r-sheet { width: calc(100% - 8px); bottom: 4px; max-height: calc(100% - var(--top-h, 0px) - 8px); padding: 8px 10px 10px; }
  .r-sheet header { margin-bottom: 4px; gap: 8px; } .r-sheet h3 { font-size: 17px; }
  #rRaceSheet { padding: 6px 4px; } #rRaceSheet header { margin-bottom: 2px; padding: 0 6px; }   /* the track takes all the width there is */
}
@media (orientation: landscape) and (max-height: 520px) { .rt-note { display: none; } }
.rt-nb output { min-width: 14px; text-align: center; font: 800 17px/1 "Barlow Condensed", sans-serif; color: var(--gold-hi); }
.rt-note, .st-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--dim); }
.st-hc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.st-hc h4 { margin: 0 0 6px; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-row { display: flex; gap: 6px; flex-wrap: wrap; }
.st-n { display: grid; justify-items: center; width: 44px; padding: 6px 0 4px; border-radius: 10px; font: 800 19px/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; color: #fff; pointer-events: auto; }   /* figures in Barlow, as on the cloth and the strip (Cinzel's 11 reads II) */
.st-n small { margin-top: 3px; font: 700 10px/1 Inter, system-ui, sans-serif; opacity: .75; }
.st-n.red { background: #a3141f; } .st-n.black { background: #19191c; box-shadow: inset 0 0 0 1px #34343a; } .st-n.green { background: #0d7a45; }
.st-bar { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; margin: 6px 0; font: 600 12px/1 Inter, system-ui, sans-serif; color: var(--muted); }
.st-bar > div { display: flex; height: 24px; border-radius: 8px; overflow: hidden; gap: 2px; }
.st-bar i { display: flex; align-items: center; justify-content: center; min-width: max-content; padding: 0 5px; overflow: hidden; }   /* a small share keeps its label whole: the bar is the figure's, the figure is printed */
.st-bar em { font: 700 11px/1 Inter, system-ui, sans-serif; font-style: normal; color: #fff; white-space: nowrap; }
.st-bar i.red { background: #a3141f; } .st-bar i.black { background: #232327; } .st-bar i.green { background: #0d7a45; flex-shrink: 0; }   /* the zero's share is small: its label is never cut */
.st-bar i.a { background: #3a3326; } .st-bar i.b { background: #5a4a2c; } .st-bar i.c { background: #7d6536; }

/* the dock */
.rdock { display: flex; align-items: center; justify-content: center; gap: 14px 18px; flex-wrap: wrap; }
.rdock .bet-actions { grid-template-areas: 'u c s d'; }
#rUndo { grid-area: u; } #rClear { grid-area: c; } #rRebet, #rX2 { grid-area: s; justify-self: stretch; justify-content: center; } #rSpin { grid-area: d; }
.r-tools { display: flex; gap: 8px; }
.r-tool[aria-expanded="true"] { border-color: var(--gold-hi); color: var(--gold-hi); background: #1f1c16; }
@media (max-width: 760px) {
  .rdock { gap: 8px; }
  .rdock .chips { order: -1; width: 100%; justify-content: center; }
  .r-tools .label, #rUndo .label, #rClear .label, #rRebet .label, #rX2 .label { display: none; }
  .r-tools { gap: 6px; }
  .rdock .bet-actions { gap: 6px; }
  .rdock .pill.deal { min-width: 132px; }
  .r-history li { width: 24px; height: 24px; font-size: 13.5px; border-radius: 7px; } .r-history li.latest { width: 30px; height: 30px; font-size: 16px; }
  .r-history { gap: 4px; padding: 4px 6px; }
  .r-win em { font-size: 28px; }
  .r-bubble b { width: 54px; height: 54px; font-size: 25px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .rdock { flex-direction: column; flex-wrap: nowrap; }
  .rdock .chips { flex-wrap: wrap; justify-content: center; }
  .rdock .bet-actions { grid-template-areas: 'u c s' 'd d d'; grid-template-columns: auto auto auto; }
  #rSpin { justify-self: center; min-width: 170px; }
  /* the column is narrow: Undo, Clear and Rebet go to their icons (they keep their names for screen readers) */
  #rUndo .label, #rClear .label, #rRebet .label, #rX2 .label { display: none; }
  #rUndo, #rClear, #rRebet, #rX2 { width: 44px; padding: 0; justify-content: center; }
}
body.reduced .r-replay::before { animation: none; }
body[data-room="roulette"] .bj-only { display: none !important; }
body:not([data-room="roulette"]) .rl-only { display: none !important; }
body:not([data-rtable="lightning"]):not([data-rtable="mega"]) .lit-only, body:not([data-rtable="lightning"]) .lt-only, body:not([data-rtable="mega"]) .mega-only { display: none !important; }
.tcard[data-mode="roulette"] { --acc: #d65a61; }
@media (max-width: 760px) {
  /* one row of tools and actions under the chips */
  .rdock { flex-wrap: wrap; column-gap: 6px; }
  .rdock .r-tools .pill, #rUndo, #rClear, #rRebet, #rX2 { width: 40px; padding: 0; justify-content: center; }
  .rdock .pill.deal { min-width: 118px; padding: 0 14px; letter-spacing: .05em; font-size: 14px; }
  .rdock .bet-actions, .rdock .r-tools { flex: none; }
}