@import url('/brand.css');
@font-face{font-family:'Libertine';src:url('/assets/fonts/libertine-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/assets/fonts/plex-mono-medium.woff2') format('woff2');font-weight:500;font-display:swap}
:root{color-scheme:dark;--bg:#061412;--ink:#f4eedf;--muted:#a7beb4;--gold:#ddc18b;--gold2:#f3d99c;--line:#9bc4b524;--green:#94d3b1;--rose:#eab0a2;--felt:#0f2f29;--panel:#0e2622;
 --glass:#04100ed4;--serif:var(--bz-serif);--mono:var(--bz-mono);--sans:var(--bz-sans);--hud-h:52px;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;color:var(--ink);background:var(--bg);font:14px/1.4 var(--bz-sans);overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;border:1px solid var(--line);border-radius:10px;background:#173932;color:var(--ink)}button:disabled{cursor:default;opacity:.38}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}a{color:inherit}

/* The game window is the table scene itself, edge to edge in its viewport (an operator's iframe or
   the tab). Nothing sits around it and nothing scrolls: the HUD, the betting board, the story line
   and the control bar are drawn over the scene, as a live table draws its UI over the video. */
.table-shell{position:fixed;inset:0;overflow:hidden;background:#050d0b}
.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#050d0b}
/* One column held to the window: a long result history must never widen the HUD past the frame. */
.overlay{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;pointer-events:none}
.overlay>.hud,.overlay>.controls,.middle>*{pointer-events:auto}
.middle{position:relative;min-height:0;min-width:0;display:flex;pointer-events:none}

/* Top HUD */
.hud{position:relative;display:flex;align-items:center;gap:12px;height:var(--hud-h);padding:0 10px 0 6px;background:linear-gradient(#020706e6,#020706b0 58%,#02070640);text-shadow:0 1px 2px #000c}
.hud-home{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none}.hud-home img{width:34px;height:34px;display:block}.hud-home:hover{background:#ffffff10}.hud-home[hidden]{display:none}
.hud-title{flex:none;min-width:0;display:flex;flex-direction:column;justify-content:center}
.hud-title h1{margin:0;font:600 20px/1.05 var(--serif);letter-spacing:.2px;white-space:nowrap}
.round-meta{display:flex;gap:8px;margin-top:2px;color:var(--muted);font:500 11px/1.2 var(--mono);letter-spacing:.3px;white-space:nowrap}.round-meta span+span{padding-left:8px;border-left:1px solid var(--line)}
.round-status{flex:0 1 auto;width:auto;min-width:150px;max-width:220px;padding:4px 10px;border-radius:9px;background:#ffffff0a}
.phase{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;color:#d9e3dc;white-space:nowrap}.phase span{overflow:hidden;text-overflow:ellipsis}
.phase strong{font:500 18px/1 var(--mono);color:var(--gold);font-variant-numeric:tabular-nums}
.time-track{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background:#ffffff14}.time-track span{display:block;height:100%;background:var(--gold);transition:width .2s linear}
.time-track.running span{width:36%!important;transition:none;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:sweep 1.3s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
.urgent .phase strong{color:#f4a894}.urgent .time-track span{background:#e98e79}
.history{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden}
.history ol{list-style:none;display:flex;gap:4px;padding:3px;margin:0}.history li{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font:600 11px/1 var(--bz-sans);background:#284c44;border:1px solid #b7cbba44;color:#f5eedf;font-variant-numeric:tabular-nums}
.history li:first-child{box-shadow:0 0 0 2px #061412,0 0 0 3px var(--gold)}
.history li.red,.history li.banker{background:#8d3431}.history li.black{background:#141c1a}.history li.green,.history li.tie{background:#2d7d52}.history li.player{background:#2f5a82}.history li.bust{background:#5b2e2b}
.wallet{flex:none;margin-left:auto;text-align:right;line-height:1.1}.wallet small{display:block;font-size:11px;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}.wallet strong{font:500 18px/1.15 var(--mono);font-variant-numeric:tabular-nums}
.icon{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:#ffffff0a;border:1.5px solid #f2ead933;color:var(--ink)}.icon:hover{background:#ffffff16}
#sound .s-on,#sound[aria-pressed=true] .s-off{display:none}#sound[aria-pressed=true] .s-on{display:inline}#sound[aria-pressed=true]{border-color:var(--gold);color:var(--gold2)}

/* The scene fills the window; the page tells it which parts the overlays cover (setInsets). */
#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%}
.table-labels{position:absolute;inset:0;pointer-events:none}
#connection{position:absolute;z-index:7;left:50%;top:10px;translate:-50% 0;margin:0;padding:5px 12px;border-radius:14px;font-size:11px;white-space:nowrap;background:#2a1612e6;color:#f2c7ba;border:1px solid #e3b5a755;pointer-events:none}
body:not(.offline):not(.is-paused):not(.connecting) #connection{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.connecting #connection{background:#04100ee0;color:var(--muted);border-color:var(--line)}
#error{position:absolute;z-index:9;left:50%;top:10px;translate:-50% 0;width:max-content;max-width:min(560px,calc(100% - 24px));margin:0;padding:8px 14px;border-radius:12px;background:#2a1210f2;border:1px solid #f2b5a566;color:#f6c9bd;font-size:12px;text-align:center;box-shadow:0 10px 30px #000a;pointer-events:none}#error:empty{display:none}

.callout{position:absolute;inset:0;z-index:4;container-type:size;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding:12px}.callout.show{display:flex}
.c-flash{max-width:100%;white-space:nowrap;font:700 clamp(22px,6.2cqw,72px)/1.05 var(--bz-serif);letter-spacing:.05em;text-align:center;padding:.42em 1.6em;color:#f8e6b5;text-shadow:0 0 26px #f0c96a8c,0 3px 0 #000a;background:radial-gradient(closest-side,#04110ff2 0 74%,#04110fc4 88%,#04110f00);animation:flash 1.9s ease-out both}
.c-flash.loss{color:#f3b3a4;text-shadow:0 0 22px #e0705a70,0 3px 0 #000a}.c-flash.neutral{color:#f4eedf;text-shadow:0 0 18px #ffffff40,0 3px 0 #000a}
@keyframes flash{0%{opacity:0;transform:scale(.72)}12%{opacity:1;transform:scale(1.06)}20%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.02)}}
.c-number{position:relative;display:grid;place-items:center;width:clamp(76px,24cqh,136px);aspect-ratio:1;border-radius:50%;background:var(--pc);border:3px solid #ead096;box-shadow:0 0 0 6px #04110fa6,0 14px 40px #000b,0 0 46px var(--glow);animation:numberIn .55s cubic-bezier(.2,1.5,.4,1) both}
.c-number.red{--pc:radial-gradient(circle at 40% 30%,#d24d44,#8a2522 70%);--glow:#e0514866}.c-number.black{--pc:radial-gradient(circle at 40% 30%,#3a4744,#0b100f 70%);--glow:#f3d99c33}.c-number.green{--pc:radial-gradient(circle at 40% 30%,#36aa6c,#155c38 70%);--glow:#4fd08a66}
.c-number strong{font:700 clamp(34px,12cqh,70px)/1 var(--bz-serif);color:#fffaf0;text-shadow:0 2px 0 #0009;font-variant-numeric:tabular-nums}
.c-number span{position:absolute;top:calc(100% + 12px);white-space:nowrap;font:700 11px/1 var(--bz-sans);letter-spacing:1.6px;color:#f4eedf;background:#04110fd9;border:1px solid #ead09655;padding:6px 11px;border-radius:14px}
@keyframes numberIn{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.c-plate{display:grid;justify-items:center;gap:2px;min-width:220px;padding:14px 26px 16px;border-radius:16px;background:linear-gradient(#0a1d19f2,#06140ff2);border:1px solid #ead09666;box-shadow:0 18px 50px #000c,0 0 0 1px #0008;animation:plateIn 3.2s ease-out both}
.c-plate small{font:700 11px/1 var(--bz-sans);letter-spacing:2.2px;color:var(--gold)}.c-plate strong{font:700 clamp(30px,4.6vw,50px)/1.05 var(--bz-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.c-plate em{font:700 13px/1 var(--bz-sans);font-style:normal;letter-spacing:.6px;padding:5px 10px;border-radius:12px;background:#ffffff12;color:var(--muted);font-variant-numeric:tabular-nums}
.c-plate.gain{border-color:#9fe0b9aa;box-shadow:0 18px 50px #000c,0 0 44px #62c58f40}.c-plate.gain strong{color:#a6ecc2;text-shadow:0 0 24px #62c58f66}.c-plate.gain em{background:#94d3b12b;color:#c7f3d8}
.c-plate.push strong{color:#e3ebe4}.c-plate.loss{min-width:180px;padding:10px 20px 12px;border-color:#eab0a244}.c-plate.loss small{color:#d7b2a8}.c-plate.loss strong{font-size:clamp(24px,3vw,34px);color:#eab0a2}
.c-plate.neutral strong{font:600 clamp(20px,2.6vw,30px)/1.15 var(--bz-serif)}
/* Bigger returns get a bigger plate; from 4x a brief gold burst. Net gains only. */
.c-plate{position:relative;isolation:isolate}
.c-plate.tier1 strong{font-size:clamp(34px,5.4vw,58px)}
.c-plate.tier2,.c-plate.tier3{border-color:#f3d99cd0;box-shadow:0 18px 50px #000c,0 0 0 1px #0008,0 0 64px #f0c96a59}
.c-plate.tier2 small,.c-plate.tier3 small{color:#fbe7b0}.c-plate.tier2 strong,.c-plate.tier3 strong{color:#fbe7b0;text-shadow:0 0 30px #f0c96aa6,0 2px 0 #000a}.c-plate.tier2 em,.c-plate.tier3 em{background:#f3d99c33;color:#fff1c9}
.c-plate.tier2 strong{font-size:clamp(38px,6.4vw,68px)}.c-plate.tier3 strong{font-size:clamp(44px,7.6vw,84px)}.c-plate.tier3 em{font-size:16px;padding:6px 13px}
.c-plate.tier2::before,.c-plate.tier3::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:230%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#f6dc9c3a 0 5deg,#f6dc9c00 5deg 15deg);-webkit-mask:radial-gradient(closest-side,#000 22%,#0000);mask:radial-gradient(closest-side,#000 22%,#0000);animation:burst 2.8s ease-out both}
.c-plate.tier3::before{width:320%;background:repeating-conic-gradient(#f6dc9c52 0 4deg,#f6dc9c00 4deg 11deg)}
@keyframes burst{0%{opacity:0;transform:scale(.35) rotate(-24deg)}14%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:scale(1.08) rotate(22deg)}}
@keyframes plateIn{0%{opacity:0;transform:scale(.8)}8%{opacity:1;transform:scale(1.05)}13%{transform:scale(1)}82%{opacity:1}100%{opacity:0}}
/* Roulette keeps the number over the hub; the settlement sits under the wheel and stays. */
.callout.number .c-plate{position:absolute;bottom:14px;animation:plateStay .5s ease-out both;padding:9px 22px 11px}.callout.number .c-plate strong{font-size:clamp(24px,3.2vw,36px)}
@keyframes plateStay{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* On a narrow stage the settlement plate takes the space under the number, so its tags step aside. */
.c-number span{transition:opacity .3s}@container (max-width:719px){.callout.number:has(.c-plate) .c-number span{opacity:0}}
@container (min-width:720px){.callout.number .c-plate{bottom:auto;top:50%;right:4%;translate:0 -50%;min-width:220px;padding:14px 24px 16px}.callout.number .c-plate strong{font-size:40px}
 .callout.number .c-plate.tier1 strong{font-size:46px}.callout.number .c-plate.tier2 strong{font-size:52px}.callout.number .c-plate.tier3 strong{font-size:58px}}
@container (max-width:719px){.callout.number .c-plate.tier1 strong{font-size:clamp(28px,4vw,40px)}.callout.number .c-plate:is(.tier2,.tier3) strong{font-size:clamp(32px,4.8vw,46px)}}
/* A short stage (a landscape phone, a small window): the plate runs as one line under the
   number, which steps up so both stay whole. */
@container (max-width:719px) and (max-height:340px){
 .callout.number .c-plate{display:flex;align-items:center;gap:10px;min-width:0;bottom:8px;padding:6px 14px 7px;border-radius:13px}
 .callout.number .c-plate strong,.callout.number .c-plate.tier1 strong{font-size:25px}.callout.number .c-plate:is(.tier2,.tier3) strong{font-size:29px}
 .callout.number .c-plate small{font-size:11px;letter-spacing:1.4px}.callout.number .c-plate em{font-size:11px;padding:4px 8px}
 .callout.number:has(.c-plate) .c-number{translate:0 -24px;transition:translate .4s ease-out}
}
/* Beside a wheel that fills a phone's width, the plate runs as one line under the numerals. */
.callout.number .c-plate.compact{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 14px 7px;border-radius:13px}
.callout.number .c-plate.compact strong{font-size:25px}.callout.number .c-plate.compact:is(.tier2,.tier3) strong{font-size:29px}
.callout.number .c-plate.compact small{font-size:11px;letter-spacing:1.4px;white-space:nowrap}.callout.number .c-plate.compact em{font-size:11px;padding:4px 8px}
@container (max-width:420px){.c-plate{min-width:170px;padding:11px 18px 13px}.c-plate small{font-size:11px;letter-spacing:1.8px}.c-plate em{font-size:12px}.c-number span{font-size:11px;padding:5px 9px;letter-spacing:.8px}}
/* Roulette's moments sit over the wheel, inside what the overlays leave clear of it. */
body[data-game=roulette] .callout{inset:var(--ins-t,0px) var(--ins-r,0px) var(--ins-b,0px) var(--ins-l,0px)}
/* Card tables: moments sit on the felt band the stage keeps clear of cards. */
.callout.banded{display:block}.callout.banded:not(.show){display:none}.callout.banded>*{position:absolute;left:50%;top:50%;translate:-50% -50%}.callout.banded .c-flash{font-size:clamp(22px,5.2cqw,60px)}

/* Control bar: the story line, then stake or chips, the main action and the wager readout. */
.controls{position:relative;display:grid;gap:6px;padding:16px 12px calc(8px + var(--safe-b));background:linear-gradient(#02070600,#020706b8 20%,#020706ee 52%,#020706f7);text-shadow:0 1px 2px #000c}
.outcome{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:10px;height:42px;overflow:hidden;text-align:center;min-width:0}
.outcome>p:first-child{flex:none;max-width:45%;font:700 11px/1.3 var(--bz-sans);letter-spacing:1.6px;color:var(--gold);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.outcome h2{flex:0 1 auto;min-width:0;font:600 19px/1.15 var(--serif);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.outcome #detail{flex:1 0 100%;font-size:12px;line-height:1.3;color:var(--muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outcome #detail[hidden]{display:none}
.outcome.gain h2{color:var(--green)}.outcome.loss h2{color:var(--rose)}.outcome.settled h2{font-variant-numeric:tabular-nums}
.ledger{flex:1 0 100%;display:flex;justify-content:center;gap:0;margin:3px 0 0;padding:0}.ledger[hidden]{display:none}.ledger>div{display:flex;align-items:baseline;gap:5px;padding:0 12px;border-left:1px solid var(--line)}.ledger>div:first-child{border-left:0}
.ledger dt{font:700 11px/1 var(--bz-sans);letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}.ledger dd{margin:0;font:500 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.gain .ledger .net dd{color:var(--green)}.loss .ledger .net dd{color:var(--rose)}

.control-main{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(110px,190px);grid-template-areas:'tools act rec';align-items:center;gap:12px;width:100%;max-width:1180px;height:56px;margin:0 auto}
.bet-tools{grid-area:tools;display:flex;align-items:center;gap:10px;min-width:0}
.stake{display:flex;flex-direction:column;justify-content:center}
.stake>label{font:700 11px/1 var(--bz-sans);letter-spacing:1.2px;color:var(--muted);text-transform:uppercase;margin:0 0 3px 2px}
.stepper{display:flex;height:42px;background:#102a26;border:1px solid var(--line);border-radius:10px}.stepper button{border:0;background:none;width:40px;font-size:22px;line-height:1}
.stake input{appearance:textfield;-moz-appearance:textfield;width:52px;background:transparent;border:0;text-align:center;color:var(--ink);font:500 18px var(--mono);outline:none}.stake input::-webkit-inner-spin-button,.stake input::-webkit-outer-spin-button{appearance:none;margin:0}
.stake input[aria-invalid]{color:#f2b5a5}.stake-hint{position:absolute;bottom:calc(100% + 4px);left:12px;font-size:11px;color:#f2b5a5;background:#2a1210f2;padding:4px 8px;border-radius:8px}.stake-hint:empty{display:none}
.quick-stakes{display:flex;align-items:center;gap:6px}.quick-stakes:empty{display:none}
#play-actions{grid-area:act;display:flex;gap:8px;height:52px;min-width:0}#play-actions button{flex:1;min-width:0;padding:6px 12px;font-size:15px;font-weight:700;letter-spacing:.3px;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#play-actions .primary{background:linear-gradient(#ecd197,#d2b577);color:#132820;border-color:#ecd197;box-shadow:0 6px 18px #d2b57733}#play-actions .primary:disabled{box-shadow:none}#play-actions .secondary{background:#1c3d34}
#play-actions button small{display:block;font-size:11px;font-weight:400;opacity:.85;margin-top:1px}#play-actions.decision{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}#play-actions.decision button{padding:4px 6px}
.receipt{grid-area:rec;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 8px;min-width:0}.receipt small{font:700 11px/1.2 var(--bz-sans);letter-spacing:1px;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.receipt strong{font:500 18px/1.2 var(--mono);font-variant-numeric:tabular-nums}.receipt>span{grid-column:1/-1;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Outside betting the stake and chips stay in place (so the table never jumps) but rest. */
body:not([data-phase=betting]) .bet-tools,body.has-bet .bet-tools{opacity:.45}
body[data-game=roulette] .stake,body[data-game=roulette] .quick-stakes{display:none}

/* Chips: code-drawn casino chips with edge spots and an inlay ring. */
.chip,.rack-chip,.quick-chip{--c:#e8e1cf;--s:#b3a98f;--t:#1f2c28;display:grid;place-items:center;border-radius:50%;color:var(--t);font:700 11px/1 var(--bz-sans);font-variant-numeric:tabular-nums;
 background:radial-gradient(circle,var(--c) 0 47%,var(--s) 48% 52%,var(--c) 53% 63%,transparent 64%),repeating-conic-gradient(var(--c) 0 22.5deg,var(--s) 22.5deg 45deg);box-shadow:0 0 0 1px #0007,0 2px 4px #000a}
.v1{--rim:#f6f1e3}.v5{--c:#b83f38;--s:#f1e1cc;--t:#fff6ea;--rim:#ef7a6e}.v10{--c:#2b5e93;--s:#dbe8f4;--t:#fff;--rim:#79b2ef}.v25{--c:#2c7c53;--s:#e1f1e5;--t:#fff;--rim:#6fd39c}.v100{--c:#1d1c19;--s:#caa865;--t:#f1d69b;--rim:#e9c46a}
.chip-rack{display:flex;align-items:center;gap:6px;min-width:0}.chip-rack>span{display:none}
.rack-chip,.quick-chip{flex:none;width:44px;height:44px;padding:0;border:0;font-size:12px;transition:transform .12s}.rack-chip:disabled,.quick-chip:disabled{opacity:.45}
.rack-chip.selected,.quick-chip.selected{transform:translateY(-3px);box-shadow:0 0 0 2px #061412,0 0 0 4px var(--gold2),0 8px 14px #000a}
.rack-tools{display:flex;gap:6px;margin-left:4px}.rack-tool{min-height:44px;min-width:56px;padding:4px 10px;font-size:12px;font-weight:700;background:#132f2a;white-space:nowrap}.rack-tool[hidden]{display:none}
/* Rebet shows only on an empty slip, when Undo and Clear have nothing to do: it takes their place. */
.rack-tools:has(.rack-tool:last-child:not([hidden])) .rack-tool:not(:last-child){display:none}

/* Roulette betting board: 0, the 1-36 grid, columns, dozens and even-money boxes. The classic
   horizontal board sits under the wheel (portrait) or beside it (short landscape); a tall
   landscape window stands it upright beside the wheel, as at a real wheel. */
.wager-options{position:relative;min-width:0;min-height:0}.wager-options:empty{display:none}
.roulette-layout{position:relative;display:grid;grid-template-columns:30px repeat(12,minmax(0,1fr)) 30px;grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,.8fr) minmax(0,.85fr);gap:2px;height:100%;padding:4px;border-radius:12px;background:#08201bdb;box-shadow:inset 0 0 0 1px #d8c38a44,0 12px 34px #000a}
.spot{grid-column:var(--c);grid-row:var(--r);position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border-radius:4px;border:1px solid #e9dcb31f;background:#10362c;color:var(--ink);font:600 14px/1 var(--bz-serif);font-variant-numeric:tabular-nums;transition:filter .15s,box-shadow .15s}
.spot:disabled{opacity:1}.spot:not(:disabled):hover{filter:brightness(1.3)}.spot:not(:disabled):active{filter:brightness(1.5)}
.spot.red{background:#8f2f2b}.spot.black{background:#121a18}.spot.zero{background:#1d6c45;border-radius:18px 4px 4px 18px}
.spot.column,.spot.dozen,.spot.outside{font:700 11px/1 var(--bz-sans);letter-spacing:.3px;background:#0f3a2e}
.diamond{display:block;width:14px;height:14px;transform:rotate(45deg);border-radius:2px;background:#b83a35;box-shadow:0 0 0 1px #f0dcc0aa}.outside.black .diamond{background:#0c1110}
.wager-options.closed .spot:not(.hit){filter:saturate(.65) brightness(.7)}
.spot.hit{z-index:1;filter:none;box-shadow:inset 0 0 0 2px var(--gold2),0 0 14px #f3d99c55}
.spot.winner{z-index:2;box-shadow:inset 0 0 0 3px #fff4cc,0 0 24px #f3d99cbb;animation:winnerPulse 1.1s ease-in-out 3}
@keyframes winnerPulse{50%{box-shadow:inset 0 0 0 3px #fff4cc,0 0 38px #f3d99cff}}
.spot .chip{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;font-size:12px;pointer-events:none;animation:chipDrop .18s ease-out;box-shadow:0 0 0 2px var(--rim,#f4efe1),0 0 0 3px #0009,0 3px 6px #000c}
.spot.dozen .chip,.spot.outside .chip{left:auto;right:4px;margin-left:0}
.spot.outside .spot-label{transition:translate .15s}.spot.outside:has(.chip) .spot-label{translate:-11px 0}
/* On the horizontal board a chip on a number sits in its lower-right corner and the number
   steps to the upper-left, so the number you bet on stays readable. */
.roulette-layout:not(.upright) .spot.num:not(.zero) .chip{left:auto;top:auto;right:1px;bottom:1px;margin:0;width:24px;height:24px;font-size:11px;letter-spacing:-.5px}
.roulette-layout:not(.upright) .spot.num:not(.zero):has(.chip) .spot-label{position:absolute;left:3px;top:2px}
.chip:not(.confirmed){outline:1.5px dashed #f4eedfcc;outline-offset:2px}
.spot.lost .chip,.bac-spot.lost .chip{opacity:.4;filter:grayscale(.7)}
.spot.winning .chip,.bac-spot.hit .chip.confirmed{box-shadow:0 0 0 2px var(--gold2),0 0 16px #f3d99ccc;animation:chipWin .7s ease-out}
@keyframes chipDrop{from{transform:translateY(-8px) scale(1.2);opacity:0}}@keyframes chipWin{40%{transform:scale(1.25)}}
/* Upright board */
.roulette-layout.upright{grid-template-columns:28px 28px repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.2fr) repeat(12,minmax(0,1fr)) minmax(0,1fr)}
.roulette-layout.upright .spot{grid-column:var(--vc);grid-row:var(--vr)}.roulette-layout.upright .spot.zero{border-radius:18px 18px 4px 4px}
.roulette-layout.upright .spot.dozen .spot-label,.roulette-layout.upright .spot.outside .spot-label{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.roulette-layout.upright .spot.dozen .chip,.roulette-layout.upright .spot.outside .chip{left:50%;right:auto;top:auto;bottom:4px;margin:0 0 0 -14px;width:28px;height:28px;font-size:11px}
.roulette-layout.upright .spot.outside:has(.chip) .spot-label,.roulette-layout.upright .spot.dozen:has(.chip) .spot-label{translate:0 -16px}
.roulette-layout.upright .spot.num .chip{left:auto;right:7%;margin-left:0;top:50%;margin-top:-16px;width:32px;height:32px}
.roulette-layout.upright .spot.num:not(.zero):has(.chip) .spot-label{translate:-16px 0;transition:translate .15s}
/* The number lens: one dozen and the column bets at fingertip size, laid over a small board. */
.spot-lens{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 40px;grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;padding:4px;border-radius:inherit;background:#0a241ef7;box-shadow:inset 0 0 0 1.5px #f3d99c99,0 10px 30px #000a;animation:lensIn .14s ease-out}
.roulette-layout.upright .spot-lens{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr)) 40px}
.spot-lens[hidden]{display:none}
.spot-lens .spot{grid-column:var(--lc);grid-row:var(--lr);font-size:19px}.spot-lens .spot.column{font-size:12px}
.roulette-layout.upright .spot-lens .spot{grid-column:var(--lu);grid-row:var(--lc)}
.spot-lens .spot.num .chip,.spot-lens .spot.column .chip{left:auto;top:auto;right:4px;bottom:4px;margin:0;width:28px;height:28px;font-size:11px}
.spot-lens .spot:has(.chip) .spot-label{position:absolute;left:7px;top:6px}
.lens-close{grid-column:6;grid-row:1/4;padding:0;font-size:22px;border-radius:6px;background:#173932}.roulette-layout.upright .lens-close{grid-column:1/4;grid-row:6}
@keyframes lensIn{from{opacity:0;transform:scale(.96)}}

/* Roulette: the board lies on the felt under the wheel (portrait) or stands beside it (landscape),
   inside the window between the HUD and the control bar. The wheel is framed in the space left. */
body[data-game=roulette] .middle{flex-direction:column;justify-content:flex-end;padding:0 6px 2px}
body[data-game=roulette] .wager-options{flex:none;height:clamp(150px,24dvh,200px)}
@media (orientation:landscape){
 body[data-game=roulette] .middle{flex-direction:row;justify-content:flex-end;padding:6px 10px 4px}
 body[data-game=roulette] .wager-options{height:auto;width:min(560px,60vw)}
}
@media (orientation:landscape) and (min-height:560px){
 body[data-game=roulette] .middle{padding:10px 14px 6px}
 body[data-game=roulette] .wager-options{width:clamp(280px,27vw,400px)}
 .roulette-layout.upright .spot{font-size:13px}
}
@media (orientation:landscape) and (min-height:900px){.roulette-layout.upright{gap:3px;padding:6px}.roulette-layout.upright .spot{font-size:15px}.roulette-layout.upright .spot.column,.roulette-layout.upright .spot.dozen,.roulette-layout.upright .spot.outside{font-size:11px}}

/* Baccarat: the three betting areas of the table. On the card stage they are buttons laid
   over the PLAYER / TIE / BANKER spots it paints; without a stage, a row under the table. */
.spot-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.spot-layer:empty{display:none}
.bac-layout{display:grid;grid-template-columns:1fr .78fr 1fr;gap:10px;width:min(780px,100%);margin:6px auto}
.bac-layout.on-table{position:absolute;inset:0;display:block;width:auto;margin:0;visibility:hidden}.spot-layer.ready .bac-layout{visibility:visible}
.bac-spot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:14px;border:1.5px solid var(--edge);background:linear-gradient(#153a31,#0e2a24);transition:transform .12s,box-shadow .15s,background-color .15s}
.bac-spot:disabled{opacity:1}.bac-spot strong{font:600 19px/1 var(--bz-serif);letter-spacing:.8px;color:var(--tone)}.bac-spot small{font-size:11px;letter-spacing:.8px;color:var(--muted)}
.bac-spot.player{--edge:#6f9fd088;--tone:#d3e5f8}.bac-spot.banker{--edge:#d17d7188;--tone:#f6d5ce}.bac-spot.tie{--edge:#79c69c88;--tone:#d6f1e1}
.bac-spot .chip{position:absolute;right:12px;top:50%;width:30px;height:30px;margin-top:-15px;font-size:11px;pointer-events:none;animation:chipDrop .18s ease-out}
.on-table .bac-spot{position:absolute;display:block;min-height:0;padding:0;border:0;background:transparent;pointer-events:auto}
.on-table .bac-spot>strong,.on-table .bac-spot>small{display:none}
@media(hover:hover){.on-table .bac-spot:not(:disabled):not(.selected):hover{background-color:#fff4d612;box-shadow:inset 0 0 0 1.5px #f3d99c80}}
.on-table .bac-spot.selected{background-color:#f3d99c17;box-shadow:inset 0 0 0 2px #f3d99c,0 0 20px #f3d99c4d}
.on-table .bac-spot.placed{box-shadow:inset 0 0 0 2px #f3d99cb3}
.on-table .bac-spot.won{box-shadow:inset 0 0 0 2.5px var(--gold2),0 0 24px #f3d99c73}
.on-table .bac-spot.push{box-shadow:inset 0 0 0 1.5px #f4eedf73}
.on-table .bac-spot.lost{background-color:#030c0b59;box-shadow:inset 0 0 0 1.5px #a7beb438}
.on-table .bac-spot .chip{top:50%;right:14px;height:min(40px,74%);width:auto;aspect-ratio:1;margin:0;translate:0 -50%;font-size:12px}
@container (max-width:599px){.on-table .bac-spot .chip{right:7px;height:min(24px,72%);font-size:11px}}
.bac-layout:not(.on-table) .bac-spot:is(.selected,.placed,.won){background:linear-gradient(#1f4a3e,#15362e);box-shadow:0 0 0 2px var(--gold2),0 8px 20px #000a;transform:translateY(-2px)}
.bac-layout:not(.on-table) .bac-spot.hit{box-shadow:0 0 0 2px var(--gold2),0 0 28px #f3d99c66}
.bac-layout:not(.on-table) .bac-spot:is(.lost,.push){box-shadow:0 0 0 1.5px #a7beb455;transform:none}
.wager-options.closed .bac-spot:not(.hit):not(.placed):not(.push),.spot-layer.closed .bac-spot:not(.hit):not(.placed):not(.push){filter:brightness(.7) saturate(.7)}

/* Paused (idle, or by the operator): a card over the window */
.paused-screen{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:#030d0cd6;backdrop-filter:blur(6px)}.paused-screen[hidden]{display:none}
.paused-screen>div{max-width:360px;text-align:center;padding:26px 24px;border-radius:18px;background:#0f2622;border:1px solid #d8c38a44;box-shadow:0 30px 80px #000c}
.paused-screen h2{font:600 26px var(--serif);margin:10px 0 8px}.paused-screen p{color:#b9cbc2;font-size:13px;line-height:1.55;margin:0 0 18px}.paused-screen button[hidden]{display:none}
.resume{min-height:48px;padding:10px 26px;font-weight:700;background:linear-gradient(#ecd197,#d2b577);color:#132820;border-color:#ecd197}

/* Menu: an in-window sheet with rules, history and settings */
dialog.menu{color:var(--ink);background:#0f2622;border:1px solid #d8c38a44;width:min(640px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);border-radius:16px;padding:0;box-shadow:0 30px 80px #000c;overflow:hidden}
dialog.menu[open]{display:flex;flex-direction:column}dialog.menu::backdrop{background:#000a}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 6px 20px}.menu-head h2{margin:0;font:600 24px var(--serif)}
.close{flex:none;width:44px;height:44px;font-size:24px;border-radius:50%;padding:0}
.menu-tabs{display:flex;gap:6px;padding:4px 16px 10px;border-bottom:1px solid var(--line)}.menu-tabs button{min-height:40px;padding:6px 16px;border-radius:999px;background:transparent;color:var(--muted);font-weight:700;font-size:13px}.menu-tabs button[aria-selected=true]{background:#204238;color:var(--ink);border-color:#d8c38a55}
.menu-body{overflow:auto;overscroll-behavior:contain;padding:6px 20px 20px;min-height:0}
.menu-body h3{font:600 18px var(--serif);margin:18px 0 6px}.menu-body p{color:#b9cbc2;font-size:13px;line-height:1.6;margin:0 0 10px}.menu-body a{color:var(--gold)}
.menu-body table{border-collapse:collapse;font-size:12px;width:100%}.menu-body th,.menu-body td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.setting[hidden]{display:none}.setting strong{display:block;font-size:14px}.setting small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.toggle{flex:none;min-width:84px;min-height:44px;padding:6px 14px;font-weight:700;border-radius:999px}.toggle[aria-pressed=true]{background:#d2b577;color:#132820;border-color:#ecd197}
.table-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}.table-switch[hidden]{display:none}.table-switch p{flex-basis:100%;margin:0;font:700 11px var(--bz-sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.table-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:700}.table-switch a[aria-current]{background:#204238;border-color:#d8c38a55}
.demo-note{margin-top:14px!important;font-size:11px!important}
.history-list{list-style:none;margin:6px 0 0;padding:0}.history-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.history-list li>span:first-child{color:var(--muted);font:500 12px var(--mono);min-width:76px}.history-list .h-badge{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 10px var(--bz-sans);background:#284c44}
.history-list .red,.history-list .banker{background:#8d3431}.history-list .black{background:#141c1a}.history-list .green,.history-list .tie{background:#2d7d52}.history-list .player{background:#2f5a82}.history-list .bust{background:#5b2e2b}
.eyebrow{color:var(--gold)!important;font-size:11px!important;letter-spacing:2px}

.fallback-stage{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;background:#17433a}.fallback-stage>div{text-align:center}.fallback-stage p{font-size:11px}.fallback-stage h2{font:54px var(--bz-serif);margin:0}
.fallback-card{display:inline-grid;place-items:center;background:#faf5e9;color:#16352e;width:65px;height:90px;border-radius:7px;margin:0 3px;font:26px var(--bz-serif)}.fallback-card.red{color:#b74749}.fallback-card.back{background:#244c40;border:1px solid var(--gold);color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Window sizes ---- */
@media (max-width:1180px){.receipt>span{display:none}.receipt{grid-template-columns:1fr;gap:1px}}
@media (max-width:1000px){.history li:nth-child(n+9){display:none}}
@media (max-width:900px){
 .hud{gap:8px}.hud-title h1{font-size:18px}.round-meta #participants{display:none}.round-status{min-width:130px;padding:3px 8px}
 .control-main{grid-template-columns:auto minmax(170px,1fr) 92px;gap:10px}
 .rack-chip,.quick-chip{width:40px;height:40px;font-size:11px}.chip-rack,.quick-stakes{gap:5px}
 .rack-tool{min-width:52px;padding:4px 8px}
}
/* Phone, portrait: the HUD takes two thin rows, the bar two rows (bet tools over the action). */
@media (orientation:portrait) and (max-width:620px){
 :root{--hud-h:auto}
 .hud{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px 44px;grid-template-areas:'home title wallet sound menu' 'status status hist hist hist';column-gap:6px;row-gap:0;padding:2px 6px 4px}
 .hud-home{grid-area:home}.hud-title{grid-area:title}.wallet{grid-area:wallet;margin-left:0}#sound{grid-area:sound}#rules{grid-area:menu}
 .round-status{grid-area:status;min-width:0;max-width:200px;padding:2px 8px;background:none}.phase strong{font-size:16px}
 .history{grid-area:hist;justify-content:flex-end}.history li{width:22px;height:22px;font-size:11px}.history ol{gap:3px}.history li:nth-child(n+8){display:none}
 .hud-title h1{font-size:17px}.round-meta{font-size:11px}.wallet strong{font-size:16px}.wallet small{font-size:11px;letter-spacing:.6px}
 .controls{padding:12px 10px calc(8px + var(--safe-b));gap:4px}
 .outcome{height:50px}.outcome>p:first-child{font-size:11px;letter-spacing:.6px}.outcome h2{font-size:17px}.outcome #detail{font-size:11px}
 .ledger>div{flex-direction:column;align-items:center;padding:0 7px;gap:1px}.ledger dt{font-size:11px;letter-spacing:.4px}.ledger dd{font-size:12px}
 .receipt small{font-size:11px;letter-spacing:.4px;white-space:normal;line-height:1.1}
 .control-main{grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:44px 50px;grid-template-areas:'tools tools' 'act rec';height:auto;gap:6px 8px}
 .bet-tools{justify-content:space-between;gap:6px}.stake>label{display:none}.stepper{height:44px}.stepper button{width:42px}.stake input{width:40px;font-size:17px}
 #play-actions{height:50px}#play-actions button{font-size:14px;padding:4px 8px}
 /* Decisions take both rows of the bar as four big buttons. */
 #play-actions.decision{grid-row:1/3;grid-column:1/-1;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
 body:has(#play-actions.decision) .bet-tools,body:has(#play-actions.decision) .receipt{visibility:hidden}
 .receipt strong{font-size:16px}
 .rack-chip,.quick-chip{width:40px;height:40px}.rack-tools{margin-left:0;gap:4px}.rack-tool{min-width:54px;padding:3px 6px;font-size:12px}
 .chip-rack{width:100%;justify-content:space-between}
 dialog.menu{width:100%;max-height:88%;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0}
 /* Portrait phones: the board takes a little more height from the wheel so zero, the columns, the dozens and the
    outside bets are at least 36 px in both directions; a number cell opens the lens on the first tap. */
 .roulette-layout{grid-template-columns:36px repeat(12,minmax(0,1fr)) 36px;grid-template-rows:repeat(3,minmax(36px,1fr)) minmax(36px,.85fr) minmax(36px,.85fr);gap:1.5px;padding:3px;border-radius:9px}
 .spot{font-size:12px;border-radius:3px}.spot.zero{border-radius:12px 3px 3px 12px}.spot.column,.spot.dozen,.spot.outside{font-size:11px;letter-spacing:0}.diamond{width:11px;height:11px}
 .spot .chip{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px;letter-spacing:-.6px;box-shadow:0 0 0 1.5px var(--rim,#f4efe1),0 2px 4px #000c}.spot.dozen .chip,.spot.outside .chip{right:2px}.spot.outside:has(.chip) .spot-label{translate:-9px 0}
 .roulette-layout:not(.upright) .spot.num:not(.zero) .chip{width:21px;height:21px;font-size:11px;letter-spacing:-.7px;right:0;bottom:0}
 .roulette-layout:not(.upright) .spot.num:not(.zero):has(.chip) .spot-label{left:2px;top:1px}
}
@media (orientation:portrait) and (max-width:380px){
 .rack-chip,.quick-chip{width:36px;height:36px;font-size:11px}.stepper button{width:40px}.stake input{width:34px}.quick-stakes{gap:4px}
 .rack-tool{min-width:50px;font-size:11px}
}
@media (orientation:portrait) and (max-height:700px){
 .outcome{height:22px}.outcome #detail,.outcome .ledger{display:none}
 body[data-game=roulette] .wager-options{height:clamp(140px,26dvh,170px)}
}
/* Short landscape (a phone on its side, a small window): one thin HUD row, one bar row. */
@media (orientation:landscape) and (max-height:560px){
 :root{--hud-h:44px}
 .hud{gap:8px;padding:0 8px 0 2px}.hud-home{width:40px;height:40px}.hud-home img{width:30px;height:30px}.icon{width:40px;height:40px}
 .hud-title h1{font-size:16px}.round-meta{font-size:11px}.round-status{min-width:120px;padding:2px 8px}.phase{font-size:11px}.phase strong{font-size:15px}
 .history li{width:21px;height:21px;font-size:11px;letter-spacing:-.4px}.history li:nth-child(n+9){display:none}.wallet strong{font-size:15px}.wallet small{font-size:11px;letter-spacing:.4px}
 .controls{padding:10px 10px calc(5px + var(--safe-b));gap:3px}
 .outcome{height:20px}.outcome>p:first-child{font-size:11px}.outcome h2{font-size:15px}.outcome #detail,.outcome .ledger{display:none}
 .control-main{height:46px;gap:8px;grid-template-columns:auto minmax(150px,1fr) 86px}
 #play-actions{height:44px}#play-actions button{font-size:13px;padding:3px 8px}#play-actions button small{font-size:11px;margin-top:0}
 .stake>label{display:none}.stepper{height:44px}.stepper button{width:42px}.stake input{width:40px;font-size:16px}
 .rack-chip,.quick-chip{width:38px;height:38px;font-size:11px}.rack-tool{min-height:40px;min-width:50px}
 .receipt strong{font-size:15px}
 dialog.menu{max-height:calc(100% - 12px)}
 .spot{font-size:12px}.spot.column,.spot.dozen,.spot.outside{font-size:11px;letter-spacing:-.3px}
}
@media (max-width:360px){.round-meta #participants{display:none}}

/* ---- Polish wave 2: the shared kit (baize-ui, baize-celebrate), presence, stats, roads, the squeeze ---- */
:root{--bz-accent:#d2b577;--bz-accent-up:#ecd197;--bz-on-accent:#132820;--bz-glow:#ecd19766}
#play-actions .bz-btn{min-height:0;font:700 15px/1.1 var(--bz-sans)}
#play-actions .bz-btn.secondary{--bz-glow:#f2ead944}
/* Auto-rebet: the table's auto play, beside the main button */
#play-actions .auto-toggle{flex:0 0 64px;display:grid;place-content:center;gap:2px;padding:4px 6px;background:#132f2a;border:1px solid var(--line);color:#c9d8cf;font:600 13px/1 var(--bz-sans)}
#play-actions .auto-toggle small{margin:0;font:500 11px/1 var(--bz-sans);opacity:.8}
#play-actions .auto-toggle[aria-pressed=true]{background:#2c4527;color:var(--gold2);box-shadow:inset 0 0 0 1.5px var(--gold),0 0 14px #ecd19733}
/* Other players, lightly: seat, stake, where, and the result once settled */
.presence{position:absolute;left:8px;top:6px;z-index:3;display:flex;flex-wrap:wrap;gap:4px;max-width:min(560px,calc(100% - 16px));pointer-events:none}
.presence[hidden]{display:none}
.presence>span{font:500 11px/1 var(--bz-sans);padding:5px 9px;border-radius:999px;background:#04100ec7;border:1px solid #9bc4b52e;color:#c9d8cf;white-space:nowrap}
.presence .who{background:#04100e99;border-color:transparent;color:var(--muted)}
.presence .seat.won{color:#a6ecc2;border-color:#9fe0b966}.presence .seat.lost{opacity:.72}.presence .seat.push{color:#e3ebe4}
.presence .seat.player{box-shadow:inset 3px 0 0 #6fa8e6}.presence .seat.banker{box-shadow:inset 3px 0 0 #e2675d}.presence .seat.tie{box-shadow:inset 3px 0 0 #4fc88a}
body[data-game=roulette] .presence{top:4px}

/* Roulette: the stats strip and the total on the board */
body[data-game=roulette] .wager-options{display:flex;flex-direction:column;gap:4px}
.roulette-layout{flex:1;min-height:0;height:auto}
.roulette-stats{flex:none;display:flex;align-items:center;gap:8px;min-height:26px;padding:3px 6px 3px 8px;border-radius:9px;background:#04100ed9;box-shadow:inset 0 0 0 1px #d8c38a33;font:500 11px/1.2 var(--bz-sans);color:var(--muted);overflow:hidden}
.roulette-stats .stat-line{flex:1;min-width:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px}
.roulette-stats .pct,.roulette-stats .hc{display:flex;align-items:center;gap:6px;white-space:nowrap}
.roulette-stats i{font-style:normal;font-variant-numeric:tabular-nums}.roulette-stats i.red{color:#f2958b}.roulette-stats i.black{color:#e6ece8}.roulette-stats i.zero{color:#7fd6a5}
.roulette-stats em{font-style:normal;font-weight:600;color:var(--gold);letter-spacing:.5px;text-transform:uppercase}
.roulette-stats .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 3px;border-radius:50%;font:600 11px/1 var(--bz-mono);color:#fff;font-variant-numeric:tabular-nums}
.roulette-stats .n.red{background:#8f2f2b}.roulette-stats .n.black{background:#141c1a;box-shadow:inset 0 0 0 1px #ffffff30}.roulette-stats .n.green{background:#1d6c45}.roulette-stats .n.cold{opacity:.72}
.roulette-stats .of{color:#a7beb4b0}
.board-total{flex:none;font:600 11px/1 var(--bz-mono);padding:5px 9px;border-radius:999px;background:#f3d99c24;color:var(--gold2);white-space:nowrap}.board-total:empty{display:none}.board-total.placed{background:var(--gold);color:#132820}
/* Other players' chips on the layout: a faint count in the spot's corner */
.spot[data-others]::before{content:attr(data-others);position:absolute;right:2px;top:2px;z-index:1;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:#f4eedf2e;color:#f4eedfd0;font:600 11px/15px var(--bz-sans);text-align:center;pointer-events:none}
.roulette-layout:not(.upright) .spot[data-others]::before{top:1px;right:1px;min-width:14px;height:14px;line-height:14px;padding:0 2px}
/* Baccarat: other players on each side, and the roads */
.bac-spot .others{position:absolute;left:10px;top:-10px;z-index:1;font:500 11px/1 var(--bz-sans);padding:4px 8px;border-radius:999px;background:#04100ee8;border:1px solid #9bc4b533;color:#c9d8cf;pointer-events:none;white-space:nowrap}
.history.road ol{display:none}
.mini-road{display:flex;align-items:center;height:44px;padding:1px 4px;border-radius:7px;background:#04100e8c;overflow:hidden}
.mini-road svg{display:block;height:42px;width:auto;flex:none}
.road-empty{font:500 11px/1.2 var(--bz-sans);color:var(--muted);white-space:nowrap;padding:0 4px}
.roads h3{margin-top:14px!important}
.road-scroll{overflow-x:auto;padding:6px;border-radius:10px;background:#081b17;border:1px solid var(--line)}.road-scroll svg{display:block}
.road-key{margin-top:8px!important}.road-key span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px/1 var(--bz-sans);color:#fff;margin:0 3px 0 8px}.road-key span:first-child{margin-left:0}
.road-key .p{background:#2f5a82}.road-key .b{background:#8d3431}.road-key .t{background:#2d7d52}
.stats-full{color:#d9e3dc!important}
/* The squeeze: drags on the cards peel them, never scroll the page */
body[data-game=baccarat] #scene canvas{touch-action:none}
/* Roulette loads its 3D wheel behind a drawn poster */
#scene canvas.wheel-poster{position:absolute;inset:0;z-index:1;transition:opacity .35s ease-out}#scene canvas.wheel-poster.gone{opacity:0}
/* LAST BETS while the wheel spins up; NO MORE BETS is called near the top, over the ball's launch */
body.spin-up .round-status{box-shadow:inset 0 0 0 1.5px var(--gold);background:#f3d99c14}
body[data-game=roulette] .callout.flash{justify-content:flex-start;padding-top:6%}
/* Big wins take the whole window: the table dims behind the card and the coins */
#game-window.bz-takeover::after{content:'';position:absolute;inset:0;z-index:6;background:radial-gradient(ellipse at 50% 46%,#00000055 0,#000000c4 72%);animation:takeIn .35s ease-out both;pointer-events:auto}
@keyframes takeIn{from{opacity:0}}
.bz-cel-layer{z-index:7}
/* On a phone the smaller results take a smaller card, so it fits the felt between the hands */
@container (max-width:520px){.bz-cel-layer .bz-cel:is([data-tier=none],[data-tier=small],[data-tier=good]){--w:238px;--fig:38px;padding:10px 14px 12px}.bz-cel-layer .bz-cel:is([data-tier=none],[data-tier=small],[data-tier=good]) .bz-cel-kicker{font-size:15px}.bz-cel-layer .bz-cel:is([data-tier=none],[data-tier=small],[data-tier=good]) .bz-cel-net{font-size:17px}}
.hud .bz-sound-ask{font-size:15px}
@media (orientation:portrait) and (max-width:620px){
 /* A phone shows the summary only, under the dealer's edge and clear of the dealer's cards */
 .presence{flex-wrap:nowrap;overflow:hidden;max-width:34%}.presence .seat{display:none}.presence .who{background:#04100ec7;border-color:#9bc4b52e;color:#c9d8cf;white-space:normal;line-height:1.25}
 body:not([data-game=roulette]) .presence{top:34px}
 body[data-game=roulette] .wager-options{height:clamp(226px,28dvh,250px)}
 body[data-game=roulette] .history{justify-content:flex-start}body[data-game=roulette] .history li{width:21px;height:21px}body[data-game=roulette] .history li:nth-child(n+8){display:flex}
 .roulette-stats .of,.roulette-stats .pct i:nth-child(n+4){display:none}
 .mini-road{height:36px}.mini-road svg{height:34px}
 #play-actions .auto-toggle{flex-basis:56px}
 .bac-spot .others{top:-12px;left:6px}
}
@media (orientation:landscape) and (max-height:560px){
 .mini-road{height:34px}.mini-road svg{height:32px}
 .roulette-stats{min-height:22px}.roulette-stats .pct i:nth-child(n+4),.roulette-stats .of{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}
 #scene canvas.wheel-poster.gone{opacity:0}
 .c-plate{animation:none}.callout:not(.number) .c-plate{opacity:.97}.c-plate::before{display:none}.time-track.running span{transform:translateX(90%)}}