/* vestra casino. the tokens below are vestra.ink's own (web/vestra-site/index.html,
   :root): same names, same values. do not invent a second palette here; if the
   landing page's tokens move, move these with them. */
:root{
  --void:#070709;
  --panel:#0D0D11;
  --line:#1C1C22;
  --line-lit:#2A2A33;
  --gold:#DE8834;
  --live:#3DFF7A;
  --dead:#FF5C5C;
  --text:#E4E4E8;
  --anno:#8E8E99;
  --dim:#6A6A76;
  --acq-amber:#FF9F1C;
  --acq-bone:#F2E9D8;
  --acq-coral:#FF6B5B;
  /* casino-only, derived from the above rather than new hues */
  --felt:#0A0A0E;
  --gold-soft:rgba(222,136,52,.35);
  --gold-faint:rgba(222,136,52,.12);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --card-w:clamp(54px,15vw,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--text);font-family:var(--sans);line-height:1.62;font-size:16.5px;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh;overflow-x:hidden}
.mono{font-family:var(--mono)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== nav: the landing page's bar, with the balance where its links sit ===== */
nav{border-bottom:1px solid var(--line);background:rgba(7,7,9,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
nav .wrap{display:flex;align-items:center;gap:18px;height:56px}
.mark{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none;color:var(--text);min-width:0}
.mark img{width:22px;height:22px;flex:none}
.mark span{font-weight:700;font-size:15px;letter-spacing:.06em}
.mark em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--gold);letter-spacing:.02em}
.purse{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);white-space:nowrap}
.purse dt{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.purse dd{font-size:17px;font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums;transition:color .25s}
.purse dd.up{color:var(--live)}
.purse dd.down{color:var(--dead)}
.who{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--anno)}
.who img{width:22px;height:22px;border:1px solid var(--line-lit)}
.who .name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.who .name,.who img{display:none}.purse dt{display:none}}

.act{font-family:var(--mono);font-size:12px;background:transparent;border:1px solid var(--line-lit);color:var(--anno);padding:8px 13px;cursor:pointer;transition:.15s;letter-spacing:.04em;text-decoration:none;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.act:hover,.act:focus-visible{border-color:var(--gold);color:var(--gold)}
.act:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);color:var(--dim)}
.act.go{border-color:var(--gold);color:var(--void);background:var(--gold);font-weight:500;padding:12px 22px;font-size:13px;min-height:46px}
.act.go:hover:not(:disabled),.act.go:focus-visible{background:var(--acq-amber);border-color:var(--acq-amber);color:var(--void)}
.act.go:disabled{background:transparent;color:var(--dim);border-color:var(--line)}
.act.warn:hover{border-color:var(--dead);color:var(--dead)}

/* ===== door: the signed-out page ===== */
/* it is html and css from the first paint: the link works before any script has
   run. hint.js only keeps it out of the way of someone already signed in. */
.in #door{display:none}
.door{min-height:calc(100svh - 57px);display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);align-items:center;gap:48px;padding:72px clamp(16px,4vw,48px)}
.door-copy{min-width:0}
.wordmark{font-size:clamp(52px,10vw,104px);font-weight:700;letter-spacing:-.045em;line-height:.92;margin-bottom:22px}
.pron{font-family:var(--mono);font-size:13px;color:var(--anno);margin-bottom:22px;letter-spacing:.01em}
.defs{list-style:none;max-width:60ch;color:var(--anno);margin-bottom:40px}
.defs li{margin-bottom:8px}
.defs .dn{font-family:var(--mono);color:var(--gold);font-size:13px;margin-right:8px}
.shell{position:relative;max-width:640px}
.shell .tag{position:absolute;top:-10px;left:16px;font-family:var(--mono);font-size:10px;color:var(--void);background:var(--gold);padding:2px 8px;letter-spacing:.04em;line-height:1.35;z-index:3}
.br{position:absolute;width:12px;height:12px;border:1px solid var(--gold);z-index:2;pointer-events:none;transition:border-color .45s ease}
.br.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.br.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.br.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.br.br2{bottom:-1px;right:-1px;border-left:0;border-top:0}
.detect{position:relative;overflow:hidden;border:1px solid var(--line-lit);background:var(--panel);padding:22px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.detect .val{font-family:var(--mono);font-size:clamp(17px,3.4vw,24px);font-weight:500;color:var(--gold);margin-right:auto;position:relative;z-index:2}
.detect .act{position:relative;z-index:2}
.note{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:16px;max-width:60ch}
.note.bad{color:var(--dead)}
/* the landing page's own motion: brackets snap in, one sweep crosses the card, then an idle sweep */
.scan{position:absolute;inset:0;pointer-events:none;z-index:1;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 33%,rgba(222,136,52,.12) 45%,rgba(222,136,52,.2) 50%,rgba(222,136,52,.12) 55%,transparent 67%)}
@keyframes bracketIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes idleSweep{0%{transform:translateX(-100%)}7%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,-2px)}50%{transform:translate(1px,-4px)}75%{transform:translate(2px,-1px)}}
.door .wordmark{animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) .05s backwards}
.door .pron,.door .defs{animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) .16s backwards}
.door .detect,.door .note{animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) .26s backwards}
.door .br{animation:bracketIn .28s cubic-bezier(.2,.9,.3,1.3) backwards}
.door .br.tl{animation-delay:.4s}.door .br.tr{animation-delay:.46s}.door .br.bl{animation-delay:.52s}.door .br.br2{animation-delay:.58s}
.door .scan{animation:idleSweep 12s linear .7s infinite}
/* the slow deal */
.deal{--card-w:clamp(72px,8.5vw,104px);position:relative;justify-self:center;width:calc(var(--card-w)*4.2);height:calc(var(--card-w)*2.1);animation:floatB 15s ease-in-out 2s infinite}
.deal .card{position:absolute;left:50%;bottom:0;margin:0;transform-origin:50% 300%;animation:dealIn .7s cubic-bezier(.2,.8,.3,1) backwards}
.deal .c1{transform:translateX(-50%) rotate(-21deg);animation-delay:.5s}
.deal .c2{transform:translateX(-50%) rotate(-10.5deg);animation-delay:.62s}
.deal .c3{transform:translateX(-50%) rotate(0deg);animation-delay:.74s}
.deal .c4{transform:translateX(-50%) rotate(10.5deg);animation-delay:.86s}
.deal .c5{transform:translateX(-50%) rotate(21deg);animation-delay:.98s}
@keyframes dealIn{from{opacity:0;transform:translateX(-50%) translateY(18%) rotate(0deg)}}
.deal .inner{transition:none;animation:peek 25s ease-in-out infinite}
.deal .c3 .inner{animation-delay:2.4s}.deal .c1 .inner{animation-delay:7.4s}.deal .c5 .inner{animation-delay:12.4s}
.deal .c2 .inner{animation-delay:17.4s}.deal .c4 .inner{animation-delay:22.4s}
@keyframes peek{0%{transform:rotateY(180deg)}3.4%{transform:rotateY(0)}14%{transform:rotateY(0)}17.4%{transform:rotateY(180deg)}100%{transform:rotateY(180deg)}}
@media(max-width:1000px){
  .door{grid-template-columns:minmax(0,1fr);gap:0;align-content:center}
  .deal{--card-w:64px;margin-top:44px;justify-self:start;margin-left:calc(var(--card-w)*.6)}
}
@media(prefers-reduced-motion:reduce){
  .door *,.deal,.deal .card,.deal .inner{animation:none!important}
  .deal .c3 .inner{transform:rotateY(0)}
}

/* ===== floor: the signed-in page ===== */
.floor{padding:28px 0 72px}
.tabs{display:flex;border:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;background:transparent;border:0;border-right:1px solid var(--line);padding:13px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);cursor:pointer;transition:color .15s,background .15s;min-height:46px;position:relative}
.tab:last-child{border-right:0}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--gold);background:var(--panel)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.tab .dot{display:inline-block;width:6px;height:6px;background:var(--live);margin-left:8px;vertical-align:middle;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:940px){.grid{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;border:1px solid var(--line-lit);background:var(--felt);min-height:340px;overflow:hidden}
.stage .tag{position:absolute;top:-1px;left:16px;font-family:var(--mono);font-size:10px;color:var(--void);background:var(--gold);padding:2px 8px;letter-spacing:.04em;line-height:1.35;z-index:6}
.stage-body{padding:34px clamp(12px,3vw,28px) 22px}
.verdict{min-height:58px;padding:12px clamp(12px,3vw,28px);border-top:1px solid var(--line);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.verdict .head{font-size:19px;font-weight:600;letter-spacing:-.01em}
.verdict .head.win{color:var(--live)}
.verdict .head.loss{color:var(--dead)}
.verdict .head.push{color:var(--gold)}
.verdict .why{font-family:var(--mono);font-size:12px;color:var(--anno)}
.controls{border:1px solid var(--line);border-top:0;background:var(--panel);padding:16px clamp(12px,3vw,20px);display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.stake{display:flex;border:1px solid var(--line-lit)}
.stake input{background:var(--void);border:0;color:var(--text);font-family:var(--mono);font-size:17px;padding:0 12px;width:9ch;min-width:0;height:46px;font-variant-numeric:tabular-nums}
.stake input:focus{outline:0;box-shadow:inset 0 -1px 0 var(--gold)}
.stake button{background:transparent;border:0;border-left:1px solid var(--line-lit);color:var(--anno);font-family:var(--mono);font-size:11px;padding:0 11px;cursor:pointer;min-width:42px;height:46px;letter-spacing:.04em}
.stake button:hover{color:var(--gold)}
.controls .spacer{margin-left:auto}
.seg{display:flex;border:1px solid var(--line-lit)}
.seg button{background:transparent;border:0;border-right:1px solid var(--line-lit);font-family:var(--mono);font-size:12px;color:var(--anno);padding:0 16px;height:46px;cursor:pointer;letter-spacing:.06em}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{color:var(--void);background:var(--gold)}

/* side rail */
.rail{display:flex;flex-direction:column;gap:18px}
.box{border:1px solid var(--line);background:var(--panel)}
.box h2{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);font-weight:400;padding:12px 16px;border-bottom:1px solid var(--line)}
.box .in{padding:14px 16px;font-size:14px;color:var(--anno)}
.box .in p+p{margin-top:8px}
.box .in b{color:var(--text);font-weight:600}
.pot{font-family:var(--mono);font-size:26px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.2}
.tape{list-style:none;font-family:var(--mono);font-size:12px}
.tape li{display:flex;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);color:var(--anno)}
.tape li:last-child{border-bottom:0}
.tape .g{color:var(--dim);width:9ch;flex:none}
.tape .d{margin-left:auto;font-variant-numeric:tabular-nums}
.tape .d.win{color:var(--live)}
.tape .d.loss{color:var(--dead)}
.tape .empty{color:var(--dim)}
.pays{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.pays td{padding:5px 0;border-bottom:1px solid var(--line);color:var(--anno)}
.pays tr:last-child td{border-bottom:0}
.pays td:last-child{text-align:right;color:var(--gold);white-space:nowrap;padding-left:10px}
.pays+p{margin-top:12px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--dead);color:var(--text);font-family:var(--mono);font-size:12px;padding:10px 16px;z-index:80;max-width:calc(100vw - 32px)}

/* ===== coin ===== */
.coin-stage{height:350px;display:flex;align-items:flex-end;justify-content:center;perspective:900px;position:relative}
.coin-shadow{position:absolute;bottom:26px;left:50%;width:120px;height:14px;margin-left:-60px;background:radial-gradient(closest-side,rgba(222,136,52,.28),transparent);transform-origin:center}
.coin{width:132px;height:132px;position:relative;transform-style:preserve-3d;margin-bottom:40px;will-change:transform}
/* NOT `.face`: that name belongs to the avatar chip (fx.js face(), floor pass), whose global
   rule sets width:20px;height:20px;overflow:hidden. these faces were sized by inset:0 and
   never declared a width, so when that rule arrived (17577b2) the coin's faces collapsed to
   a 20 px chip in its corner and the coin flipped BLANK. own name, and an explicit size. */
.coin .coin-face{width:100%;height:100%;position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold);background:radial-gradient(circle at 35% 30%,#1b1510,#0b0a0c 70%);box-shadow:inset 0 0 0 6px var(--void),inset 0 0 0 7px var(--gold-soft)}
.coin .coin-face.heads{transform:translateZ(4px)}
.coin .coin-face.tails{transform:rotateX(180deg) translateZ(4px)}
.coin .coin-face svg{width:62%;height:62%}
.coin .edge{position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);background:#15100b}
.coin .coin-face .lbl{position:absolute;bottom:17px;font-family:var(--mono);font-size:8px;letter-spacing:.3em;color:var(--gold)}

/* ===== roulette ===== */
.rl{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:22px;align-items:center}
@media(max-width:760px){.rl{grid-template-columns:minmax(0,1fr)}}
.wheel-box{position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1}
.wheel-box svg{width:100%;height:100%;display:block;overflow:visible}
.wheel-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;font-family:var(--mono)}
.wheel-readout .n{font-size:40px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.wheel-readout .c{font-size:10px;letter-spacing:.2em;color:var(--dim);margin-top:6px}
.wheel-readout.red .n{color:var(--acq-coral)}
.wheel-readout.black .n{color:var(--text)}
.wheel-readout.green .n{color:var(--live)}
.felt{display:grid;grid-template-columns:34px repeat(12,minmax(0,1fr)) 40px;grid-template-rows:repeat(3,42px) 38px 38px;gap:0;border:1px solid var(--line-lit);font-family:var(--mono);font-size:13px;user-select:none}
.felt button{background:transparent;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text);cursor:pointer;font:inherit;padding:0;position:relative;transition:background .12s,color .12s;min-width:0}
.felt button:hover{background:var(--gold-faint)}
.felt .red{color:var(--acq-coral)}
.felt .zero{color:var(--live);grid-row:1/4}
.felt .out{color:var(--anno);font-size:10.5px;letter-spacing:.08em}
.felt .cov{background:var(--gold-faint);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.felt .hit{background:var(--gold);color:var(--void)!important}
/* phones: roulette.js turns the table on its side (three across, twelve down) so every
   cell is a real tap target. cell placement is set from there, for both layouts. */
@media(max-width:760px){.felt .out{font-size:10px;letter-spacing:.02em}}
.slip{border:1px solid var(--line);margin-top:12px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--anno);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;min-height:42px}
.slip b{color:var(--gold);font-weight:500}
.picker{margin-top:10px;border:1px solid var(--line-lit);background:var(--panel)}
.picker h3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);font-weight:400;padding:9px 12px;border-bottom:1px solid var(--line);display:flex}
.picker h3 button{margin-left:auto;background:none;border:0;color:var(--anno);font-family:var(--mono);font-size:11px;cursor:pointer}
.picker ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.picker li button{width:100%;text-align:left;background:transparent;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--text);cursor:pointer;min-height:44px;display:flex;gap:8px}
.picker li button:hover,.picker li button[aria-pressed="true"]{background:var(--gold-faint);color:var(--gold)}
.picker li span{margin-left:auto;color:var(--dim)}

/* ===== slots ===== */
/* one panel or several. --sym is the height of one symbol and --lead is where the
   payline sits in the window; slots.js reads both back from the layout, so a size
   is set here and nowhere else. */
.machines{display:grid;gap:14px;justify-content:center;--sym:88px;--lead:var(--sym);--rows:3}
.machines.n1{grid-template-columns:minmax(0,460px)}
.machines.n2{grid-template-columns:repeat(2,minmax(0,330px));--sym:72px}
.machines.n3{grid-template-columns:repeat(3,minmax(0,250px));--sym:58px}
.machines.n5,.machines.n10{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;--sym:44px}
@media(max-width:760px){
  .machines.n2{--sym:56px;gap:10px}
  .machines.n3{--sym:40px;gap:8px}
  .machines.n5{grid-template-columns:repeat(3,minmax(0,1fr));--sym:36px;gap:8px}
  /* ten on a phone: two across, and the window closes down to the line and a
     sliver either side, so all ten and the button fit on one screen */
  .machines.n10{grid-template-columns:repeat(2,minmax(0,1fr));--sym:40px;--rows:1.7;--lead:calc(var(--sym)*.35);gap:6px 8px}
}
.machine{position:relative;min-width:0}
.reels{display:grid;grid-template-columns:repeat(var(--reels,3),1fr);border:1px solid var(--line-lit);background:var(--void);height:calc(var(--sym)*var(--rows));position:relative;overflow:hidden;transition:opacity .4s ease,border-color .4s ease}
.reel{border-right:1px solid var(--line);position:relative;overflow:hidden}
.reel:last-child{border-right:0}
.strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.sym{height:var(--sym);display:flex;align-items:center;justify-content:center}
.sym svg{width:calc(var(--sym)*.62);height:calc(var(--sym)*.62);transition:filter .2s}
.reel.blur .sym svg{filter:blur(1.4px)}
.machines.many .reel.blur .sym svg{filter:none;opacity:.6}
.payline{position:absolute;left:0;right:0;top:var(--lead);height:var(--sym);border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);pointer-events:none;z-index:3;transition:background .4s ease,border-color .4s ease}
/* a line that paid glows once and settles. it used to blink four times. */
.payline.win{background:var(--gold-faint);border-color:var(--gold);animation:lineglow 1.2s ease-out 1}
@keyframes lineglow{from{background:rgba(222,136,52,.36)}to{background:var(--gold-faint)}}
.reels::before,.reels::after{content:"";position:absolute;left:0;right:0;height:calc(var(--lead)*.8);z-index:2;pointer-events:none}
.reels::before{top:0;background:linear-gradient(var(--void),transparent)}
.reels::after{bottom:0;background:linear-gradient(transparent,var(--void))}
.sym.lit svg{filter:drop-shadow(0 0 10px var(--gold))}
.machines.many .sym.lit svg{filter:drop-shadow(0 0 5px var(--gold));opacity:1}
.machines:not(.n1) .machine.miss .reels{opacity:.45}
.machines:not(.n1) .machine.hit .reels{border-color:var(--gold)}
.paid{font-family:var(--mono);font-size:11px;text-align:center;min-height:18px;padding-top:3px;color:var(--dim);font-variant-numeric:tabular-nums}
.machines.n1 .paid{display:none}
.paid.win{color:var(--live)}
.slots-go{min-width:9ch;font-variant-numeric:tabular-nums}
@media(max-width:620px){.slots-go{width:100%;margin-left:0}.controls.slim{gap:8px;padding-top:10px}.controls.slim .field>span{display:none}}

/* ===== cards (blackjack + duel) ===== */
.table{min-height:330px;display:flex;flex-direction:column;gap:20px;position:relative}
.seat{display:flex;flex-direction:column;gap:8px}
.seat .who-line{display:flex;gap:12px;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);min-height:20px;flex-wrap:wrap}
.seat .who-line .total{color:var(--text);font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.seat .who-line .tagline{color:var(--gold)}
.seat.active .who-line .k2{color:var(--gold)}
.hand{display:flex;min-height:calc(var(--card-w)*1.4);align-items:center}
.hands{display:flex;gap:26px;flex-wrap:wrap}
.hands .seat{flex:1 1 200px}
.hands .seat.dim{opacity:.45}
.card{width:var(--card-w);height:calc(var(--card-w)*1.4);position:relative;perspective:700px;flex:none;margin-right:calc(var(--card-w)*-.3)}
.card:last-child{margin-right:0}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.8,.3,1);transform:rotateY(180deg)}
.card.up .inner{transform:rotateY(0)}
.card .f,.card .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.card .f{background:var(--acq-bone);color:#15151a;border:1px solid #cdbfa6;font-family:var(--mono);font-weight:500;line-height:1;overflow:hidden}
.card .f.redsuit{color:#C43A2B}
.card .f .corner{position:absolute;top:5px;left:6px;text-align:center}
.card .f .r{font-size:calc(var(--card-w)*.25)}
.card .f .s{font-size:calc(var(--card-w)*.2);margin-top:1px}
.card .f .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--card-w)*.5);font-family:var(--sans);padding-top:8%}
.card .f .corner.low{top:auto;left:auto;bottom:5px;right:6px;transform:rotate(180deg)}
.card .b{transform:rotateY(180deg);background:var(--panel);border:1px solid var(--gold-soft);background-image:repeating-linear-gradient(45deg,transparent 0 6px,var(--gold-faint) 6px 7px),repeating-linear-gradient(-45deg,transparent 0 6px,var(--gold-faint) 6px 7px);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:700;letter-spacing:.06em;font-size:calc(var(--card-w)*.2)}
.card.side{transform:rotate(90deg);margin-left:calc(var(--card-w)*.2)}
.card.glow .f{box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(222,136,52,.5)}
.shoe{position:absolute;top:0;right:0;width:var(--card-w);height:calc(var(--card-w)*1.4);pointer-events:none;opacity:0}
.clock{height:2px;background:var(--line);position:relative;overflow:hidden}
.clock i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:100%;transform-origin:left}
.clock.low i{background:var(--dead)}
.moves{display:flex;gap:8px;flex-wrap:wrap}
.moves .act{min-height:46px;padding:0 18px;font-size:13px}
.moves .act.primary{border-color:var(--gold);color:var(--gold)}

/* ===== duel ===== */
.lobby{list-style:none;border:1px solid var(--line)}
.lobby li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px}
.lobby li:last-child{border-bottom:0}
.lobby .amt{color:var(--gold);margin-left:auto;font-variant-numeric:tabular-nums}
.lobby .empty{color:var(--dim)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;min-height:250px}
.duel .side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.duel .side .nm{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--anno);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel .side.turn .nm{color:var(--gold)}
.duel .side.turn .nm::before{content:"▸ "}
.duel .side .in{font-family:var(--mono);font-size:11px;color:var(--dim)}
.duel .side .card{margin:0;cursor:default}
.duel .side.me .card{cursor:pointer}
.duel .mid{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono)}
.duel .mid .potv{font-size:clamp(22px,5vw,34px);color:var(--gold);font-variant-numeric:tabular-nums}
.duel .mid .k{font-size:10px}
.chips{display:flex;gap:3px;height:14px;align-items:flex-end}
.chips i{width:14px;height:4px;background:var(--gold);display:block}
.hint{font-family:var(--mono);font-size:12px;color:var(--anno);margin-top:14px;min-height:20px}
.share{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:12px;word-break:break-all}
.share code{color:var(--gold)}

/* ===== crash ===== */
.crash{display:flex;flex-direction:column;gap:14px}
.crash-views{align-self:flex-start}
.crash-views button{height:34px;font-size:11px}
.crash-view{display:flex;flex-direction:column;gap:14px;min-width:0}
.crash-recent{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.crash-recent::-webkit-scrollbar{display:none}
.crash-recent .k{flex:none;margin-right:4px}
.chip{flex:none;font-family:var(--mono);font-size:11px;padding:3px 7px;border:1px solid var(--line-lit);color:var(--anno);font-variant-numeric:tabular-nums}
.chip.bust{color:var(--dead);border-color:var(--dead)}
.chip.mid{color:var(--gold);border-color:var(--gold-soft)}
.chip.high{color:var(--live);border-color:var(--live)}
.chip.void{color:var(--dim);border-style:dashed}
.chip.empty{border-style:dashed;color:var(--dim)}
.crash-board{position:relative;border:1px solid var(--line);background:var(--void);height:clamp(230px,44vw,340px)}
.crash-graph{position:absolute;inset:0;width:100%;height:100%;display:block}
.crash-readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 16px;pointer-events:none}
.crash-big{font-family:var(--mono);font-weight:500;font-size:clamp(34px,10vw,76px);line-height:1;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.crash-big.run{color:var(--gold)}
.crash-big.count{color:var(--text)}
.crash-big.dead{color:var(--dead);font-size:clamp(24px,7vw,52px)}
.crash-big.max{color:var(--live)}
.crash-big.void,.crash-big.off{color:var(--anno);font-size:clamp(22px,6vw,40px)}
.crash-sub{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--anno);margin-top:10px}
.crash-why{font-size:13px;line-height:1.5;color:var(--text);max-width:52ch;margin-top:12px;background:rgba(7,7,9,.88);border:1px solid var(--line-lit);padding:10px 12px;text-align:left}
.crash-fair{display:flex;flex-direction:column;gap:10px;min-width:0}
.fair-row .k{font-size:9.5px;letter-spacing:.1em;line-height:1.5}
.fair-more{align-self:flex-start;background:none;border:0;border-bottom:1px solid var(--line-lit);padding:0 0 2px;font-family:var(--mono);font-size:11px;color:var(--anno);cursor:pointer;text-align:left}
.fair-more:hover,.fair-more:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.fair-more::after{content:" \2192"}
.fair-row{display:flex;flex-direction:column;gap:3px;min-width:0}
.fair-row code,.hist-detail code{font-family:var(--mono);font-size:11px;color:var(--gold);word-break:break-all;user-select:all;line-height:1.45}
.fair-mark{font-family:var(--mono);font-size:11px;color:var(--dim)}
.fair-mark.ok{color:var(--live)}
.fair-mark.ok::before{content:"✓  "}
.fair-mark.bad{color:var(--dead);font-weight:500}
.crash-players{border:1px solid var(--line);font-family:var(--mono);font-size:12px}
.crash-prow{display:grid;grid-template-columns:minmax(0,1fr) 7ch 8ch 9ch;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--anno);font-variant-numeric:tabular-nums}
.crash-prow:last-child{border-bottom:0}
.crash-prow span:not(:first-child){text-align:right}
.crash-prow.head{font-size:10px;letter-spacing:.12em;color:var(--dim)}
.crash-prow .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.crash-prow.me{background:var(--gold-faint)}
.crash-prow.out span:nth-child(n+3){color:var(--live)}
.crash-prow.lost span:nth-child(n+3){color:var(--dead)}
.crash-prow.riding span:nth-child(3){color:var(--gold)}
.crash-empty{padding:12px;color:var(--dim);font-family:var(--mono);font-size:12px}
.crash-go{min-width:15ch;font-variant-numeric:tabular-nums}
.act.go.crash-go.cash:not(:disabled){background:var(--live);border-color:var(--live);color:var(--void)}
/* the fields used to be display:none'd while a cashout was on offer, which moved the
   button 168 px on a phone at the exact moment it mattered. they are disabled instead. */
@media(max-width:940px){.controls.sticky{position:sticky;bottom:0;z-index:40;border-top:1px solid var(--line-lit);padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(max-width:620px){.crash-go{width:100%;margin-left:0;min-height:54px;font-size:15px}.crash-prow{grid-template-columns:minmax(0,1fr) 6ch 7ch 8ch;gap:6px;padding:8px}}
.hist-block{border:1px solid var(--line);background:var(--panel);padding:14px;min-width:0}
.hist-block h3{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);font-weight:400;margin-bottom:10px}
.hist-note{font-size:13px;color:var(--anno);line-height:1.55;margin-bottom:10px}
.hist-bars{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:11px}
.hist-bar{display:grid;grid-template-columns:15ch minmax(40px,1fr) 12ch 11ch;gap:10px;align-items:center;color:var(--anno);font-variant-numeric:tabular-nums}
.hist-bar .track{position:relative;height:10px;border:1px solid var(--line-lit);background:var(--void)}
.hist-bar .seen{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}
.hist-bar .seen.bust{background:var(--dead)}
.hist-bar .want{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text)}
.hist-bar .exp{color:var(--dim)}
@media(max-width:620px){.hist-bar{grid-template-columns:12ch minmax(30px,1fr) 10ch}.hist-bar .exp{display:none}}
.hist-code{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--text);background:var(--void);border:1px solid var(--line);padding:10px 12px;overflow-x:auto;margin-bottom:10px;white-space:pre}
.hist-rounds{display:flex;flex-direction:column}
.hist-round{border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px}
.hist-round:last-child{border-bottom:0}
.hist-round summary{display:grid;grid-template-columns:6ch minmax(9ch,14ch) minmax(0,1fr) auto;gap:10px;padding:8px 2px;cursor:pointer;color:var(--anno);list-style:none;align-items:baseline}
.hist-round summary::-webkit-details-marker{display:none}
.hist-round .rid{color:var(--dim)}
.hist-round .pt{color:var(--text);font-variant-numeric:tabular-nums}
.hist-round.bust .pt{color:var(--dead)}
.hist-round.mid .pt{color:var(--gold)}
.hist-round.high .pt{color:var(--live)}
.hist-round.void .pt{color:var(--dim)}
.hist-round .meta{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-round .vmark{color:var(--dim);white-space:nowrap}
.hist-round .vmark.ok{color:var(--live)}
.hist-round .vmark.bad{color:var(--dead);font-weight:500}
.hist-detail{display:flex;flex-direction:column;gap:4px;padding:4px 2px 12px}
@media(max-width:620px){.hist-round summary{grid-template-columns:5ch minmax(0,1fr) auto}.hist-round .meta{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===== life: the page answers, the room exists, nothing blinks =====
   every effect below is ONE eased transition or a one-shot animation. no loops on a
   result, no flashing, no sound. prefers-reduced-motion (end of file) flattens all of it. */

/* a quiet accent per table, from the landing page's own acquisition tokens. it touches the
   stage tag, the brackets and the tab underline. buttons, balance and wins stay as they were. */
.floor{--accent:var(--gold);animation:fadeUp .5s cubic-bezier(.2,.8,.3,1) backwards}
.floor[data-game="blackjack"],.floor[data-game="duel"]{--accent:var(--acq-bone)}
.floor[data-game="roulette"]{--accent:var(--acq-coral)}
.floor[data-game="mines"]{--accent:var(--live)}
/* ten tables, six hues: three are shared, and each pair is told apart by its second colour */
.floor[data-game="dice"]{--accent:var(--acq-amber)}
.floor[data-game="plinko"]{--accent:var(--acq-coral)}
.floor[data-game="hilo"]{--accent:var(--acq-bone)}
.floor[data-game="slots"]{--accent:var(--acq-amber)}
.stage .tag{background:var(--accent);transition:background .35s ease}
.stage .br{border-color:var(--accent)}
.tab[aria-selected="true"]{color:var(--accent)}
.tab[aria-selected="true"]::after{background:var(--accent)}
.tab .room{margin-left:8px;font-size:10px;letter-spacing:.04em;color:var(--anno);border:1px solid var(--line-lit);padding:1px 5px;vertical-align:middle}

/* the moment a result lands (casino.js verdict): brackets, one sweep, the amount counts up */
.stage{transition:border-color .45s ease}
.sweep{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 34%,rgba(61,255,122,.07) 42%,rgba(61,255,122,.15) 50%,rgba(61,255,122,.07) 58%,transparent 66%)}
@keyframes sweepOnce{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:1}}
.stage.fx-win .br{border-color:var(--live)}
.stage.fx-win .sweep{animation:sweepOnce .9s cubic-bezier(.4,0,.2,1) 1}
.stage.fx-big{border-color:var(--gold)}
.stage.fx-big .br{border-color:var(--gold);width:18px;height:18px;transition:border-color .45s ease,width .6s ease,height .6s ease}
.stage.fx-big .sweep{background:linear-gradient(90deg,transparent 30%,rgba(222,136,52,.10) 40%,rgba(222,136,52,.24) 50%,rgba(222,136,52,.10) 60%,transparent);animation:sweepOnce 1.8s cubic-bezier(.4,0,.2,1) 1}
.stage.fx-loss .br{border-color:var(--dead)}
.stage .br{transition:border-color .45s ease,width .6s ease,height .6s ease}
.verdict .head{display:inline-block;transform-origin:left center}
.verdict .head .n{font-variant-numeric:tabular-nums}
.verdict .head.big{animation:headBig 2.4s cubic-bezier(.3,.7,.3,1) 1}
@keyframes headBig{0%{transform:scale(1)}16%{transform:scale(1.3)}78%{transform:scale(1.3)}100%{transform:scale(1)}}

/* the floor */
.box h2 span{color:var(--anno);letter-spacing:.08em;margin-left:4px}
.feed{list-style:none;font-family:var(--mono);font-size:12px}
.feed li{display:flex;gap:10px;align-items:baseline;padding:8px 16px;border-bottom:1px solid var(--line);color:var(--anno)}
.feed li:last-child{border-bottom:0}
.feed .t{min-width:0;flex:1}
.feed b{color:var(--text);font-weight:500}
.feed .a{flex:none;color:var(--dim);font-size:10.5px}
.feed li.win .t,.feed li.big .t{color:var(--anno)}
.feed li.big b,.feed li.jackpot b{color:var(--gold)}
.feed li.jackpot .t{color:var(--gold)}
.feed li.loss .t{color:var(--dim)}
.feed li.you{background:var(--gold-faint)}
.feed li.empty{color:var(--dim)}
.feed li.new,.tape li{animation:fadeUp .4s cubic-bezier(.2,.8,.3,1) backwards}

/* this session */
.box h2 .net{float:right;letter-spacing:0;font-size:12px;font-variant-numeric:tabular-nums;color:var(--anno)}
.box h2 .net.win{color:var(--live)}
.box h2 .net.loss{color:var(--dead)}
.spark{display:block;width:100%;height:34px;padding:4px 16px 0;border-bottom:1px solid var(--line)}
.spark .zero{stroke:var(--line-lit);stroke-width:1;vector-effect:non-scaling-stroke}
.spark polyline{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark .up{stroke:var(--gold)}
.spark .down{stroke:var(--anno)}

/* rules: numbers first, prose behind one toggle */
.more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.more summary{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--anno);cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+ ";color:var(--gold)}
.more[open] summary::before{content:"- "}
.more summary:hover{color:var(--gold)}
.more p{margin-top:8px}

/* crash: a waiting table is not a headline */
.crash-big.wait{color:var(--anno);font-size:clamp(18px,4.6vw,30px);letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){
  .floor,.feed li.new,.tape li,.verdict .head.big,.stage .sweep{animation:none!important}
}

/* ===== sound: a real control, off until asked for ===== */
.snd{position:relative;display:flex}
.snd-btn{gap:7px;padding:8px 11px;min-height:36px}
.snd-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.snd .wave{display:none}
.snd.on .wave{display:inline}
.snd.on .mute{display:none}
.snd.on .snd-btn{color:var(--gold);border-color:var(--gold-soft)}
.snd-pop{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line-lit);padding:14px;display:flex;flex-direction:column;gap:12px;z-index:60}
.snd-pop .seg button{flex:1;height:38px}
.snd-pop .note{margin-top:0;font-size:11px;line-height:1.5}
/* two sections, one per bus. the rule between them is the whole point: these
   are two independent things, not one control with an extra knob. */
.snd-sec{display:flex;flex-direction:column;gap:9px}
.snd-sec + .snd-sec{border-top:1px solid var(--line);padding-top:13px}
.snd-sec h3{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--anno);font-weight:500}
.beds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-lit);border:1px solid var(--line-lit)}
.beds button{background:var(--panel);border:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--anno);height:32px;cursor:pointer}
.beds button[aria-pressed="true"]{color:var(--void);background:var(--gold)}
.beds button:disabled{opacity:.4;cursor:not-allowed}
.snd-pop input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.snd-pop input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.snd-pop input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line-lit)}
.snd-pop input[type=range]::-moz-range-track{height:1px;background:var(--line-lit)}
.snd-pop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;margin-top:-10px;background:var(--gold);border:0;border-radius:0}
.snd-pop input[type=range]::-moz-range-thumb{width:12px;height:20px;background:var(--gold);border:0;border-radius:0}
@media(max-width:620px){#snd-label{display:none}.snd-btn{padding:8px 9px}nav .wrap{gap:10px}.snd-pop{right:-60px}}

/* ===== game icons: wayfinding. one colour, the colour of the text beside them ===== */
.gi{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-3px}
.tab .gi{margin-right:8px;opacity:.75;transition:opacity .15s}
.tab:hover .gi,.tab[aria-selected="true"] .gi{opacity:1}
.stage .tag{display:inline-flex;align-items:center;gap:6px}
.stage .tag .gi{width:12px;height:12px;stroke-width:2;vertical-align:0}

/* ===== the room: a table should look like a table when nothing is happening =====
   still the site's language: hairlines on near-black, the table's accent, no wood and
   no green felt. furniture is drawn with borders and a little svg. rule for phones,
   from the brief: if something has to give, the furniture goes and the game stays. */

/* the felt: the surface is lit from above in the table's own accent, barely.
   PAINTED, not a css gradient: see wash.js for what the banding was and the rule. */
#room{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.felt-light{position:absolute;left:0;top:0;width:100%;height:580px;z-index:0;pointer-events:none}
.stage-body{position:relative}
.stage-body,.verdict{position:relative;z-index:2}

/* hierarchy: figures carry weight and an existing token. labels stay dim and small. */
.num{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.verdict .why .num{color:var(--text)}
.verdict .head{font-size:21px}
.feed .num{color:var(--text)}
.feed li.big .num,.feed li.jackpot .num{color:var(--gold)}
.feed li.loss .num{color:var(--anno)}
.hint .num,.slip .num,.crash-sub .num{color:var(--accent)}
#rules>p:first-child{color:var(--text)}
.pays td:first-child{color:var(--text)}

/* chips: flat bars in a stack, the figure under them */
.stack{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:34px}
.pile{display:flex;flex-direction:column-reverse;gap:2px;min-height:6px}
.pile i{display:block;width:26px;height:5px;background:var(--accent);box-shadow:inset 0 -1px 0 rgba(0,0,0,.45)}
.pile i:nth-child(even){background:color-mix(in srgb,var(--accent) 72%,var(--void))}
.stack .amt{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.stack .k{font-size:9px;letter-spacing:.12em}
@keyframes chipIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pile i{animation:chipIn .28s cubic-bezier(.2,.8,.3,1) backwards}
.pile i:nth-child(2){animation-delay:.03s}.pile i:nth-child(3){animation-delay:.06s}.pile i:nth-child(4){animation-delay:.09s}
.pile i:nth-child(n+5){animation-delay:.12s}

/* ── blackjack ── */
.table.bj{gap:6px;min-height:0}
.bj-dealer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:12px}
.bj-dealer .seat{align-items:center;grid-column:2}
.bj .hand{justify-content:center}
.bj-tray,.bj-shoe{width:calc(var(--card-w)*.8);height:calc(var(--card-w)*1.12);border:1px solid var(--line-lit);position:relative;margin-top:28px;display:flex;align-items:flex-end;justify-content:center}
.bj-tray{justify-self:start;border-style:dashed;border-color:var(--line)}
.bj-shoe{justify-self:end;grid-column:3;background:var(--panel);transform:skewY(-6deg)}
.bj-shoe i{position:absolute;left:6px;right:6px;height:1px;background:var(--gold-soft)}
.bj-shoe i:nth-child(1){top:22%}.bj-shoe i:nth-child(2){top:34%}.bj-shoe i:nth-child(3){top:46%}
.bj-tray .k,.bj-shoe .k{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.12em}
.bj-shoe .k{transform:skewY(6deg)}
.bj-edge{margin:2px 0 0}
.bj-edge .arc{display:block;width:100%;height:auto;overflow:visible}
.bj-edge .line{fill:none;stroke:var(--line-lit);stroke-width:1;vector-effect:non-scaling-stroke}
.bj-edge .line.faint{stroke:var(--line)}
.bj-edge .rule{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;fill:var(--accent);opacity:.7}
.bj-edge .flat{display:none}
.bj .clock{margin:0 auto;width:min(420px,100%)}
.bj .hands{justify-content:center;gap:18px;margin-top:4px}
.bj .hands .seat{flex:0 1 auto;align-items:center}
.bj .who-line{justify-content:center}
.bj .who-line .total{font-size:20px;font-weight:500;color:var(--text)}
.bj .who-line .total.bust{color:var(--dead)}
.bj .who-line .tagline{font-weight:500;letter-spacing:.14em}
.box-in{display:flex;align-items:flex-end;gap:16px;border:1px solid var(--line-lit);padding:14px 16px 12px;min-width:calc(var(--card-w)*2.6);justify-content:center;transition:border-color .3s ease}
.seat.active .box-in{border-color:var(--accent)}
.seat.vacant .box-in{border-style:dashed;border-color:var(--line-lit)}
/* empty card spots: css on an EMPTY hand, so nothing that counts cards ever sees them */
.bj .hand:empty::before,.bj .hand:empty::after{content:"";width:var(--card-w);height:calc(var(--card-w)*1.4);border:1px dashed var(--line-lit);border-radius:2px;flex:none}
.bj .hand:empty::after{margin-left:8px}
.bj .card.side{margin-right:calc(var(--card-w)*.22)}
.bet{display:flex;gap:10px;align-items:flex-end}
.bet:empty{display:none}
@media(max-width:760px){
  .bj-tray{display:none}
  .bj-dealer{grid-template-columns:minmax(0,1fr) auto}
  .bj-dealer .seat{grid-column:1;align-items:center}
  .bj-shoe{grid-column:2;width:calc(var(--card-w)*.6);height:calc(var(--card-w)*.84);margin-top:30px}
  .bj-edge .arc{display:none}
  .bj-edge .flat{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent);opacity:.7;text-align:center;border-top:1px solid var(--line-lit);border-bottom:1px solid var(--line);padding:6px 0;margin:8px 0 4px}
  .box-in{padding:10px 10px 8px;gap:10px;min-width:0}
  .pile i{width:20px;height:4px}
  .stack{min-width:26px}
}

/* ── duel: two seats across a line, the pot in a ring between them ── */
.duel{position:relative;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,3vw,28px);min-height:270px;padding:8px 0}
.duel::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--line-lit) 18%,var(--line-lit) 82%,transparent)}
.duel .spot{width:calc(var(--card-w) + 18px);height:calc(var(--card-w)*1.4 + 18px);border:1px solid var(--line-lit);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .3s ease}
.duel .side.turn .spot{border-color:var(--accent)}
.duel .side.empty .spot{border-style:dashed}
.duel .spot .wait{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.duel .spot .card:not([hidden])+.wait{display:none}
.duel .side .nm{font-size:13px;color:var(--text);border-top:1px solid var(--line-lit);padding-top:8px;min-width:calc(var(--card-w) + 18px)}
.duel .side.empty .nm{color:var(--dim)}
.duel .side.turn .nm{color:var(--accent)}
.duel .side .in .num{color:var(--text)}
.duel .mid{position:relative;z-index:1;gap:12px}
.duel .ring{width:clamp(104px,24vw,150px);aspect-ratio:1;border-radius:50%;border:1px solid var(--accent);background:var(--felt);box-shadow:0 0 0 6px var(--felt),0 0 0 7px var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.duel .ring .k{font-size:8.5px;letter-spacing:.12em}
.duel .mid .potv{font-weight:500;line-height:1}
.duel .chips{height:auto;gap:14px;align-items:flex-end;min-height:48px;background:var(--felt);padding:0 6px}
.duel .chips .stack .amt{font-size:11px;color:var(--anno)}
.lobby.seats{border:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lobby.seats li{flex-direction:column;align-items:center;gap:12px;border:1px solid var(--line-lit);padding:16px 12px;min-height:168px;justify-content:space-between;text-align:center}
.lobby.seats li:last-child{border-bottom:1px solid var(--line-lit)}
.lobby.seats .nm{color:var(--text);font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobby.seats li.open{border-style:dashed;justify-content:center}
.lobby.seats li.open .nm{color:var(--dim);letter-spacing:.14em;font-size:10px;text-transform:uppercase}
.lobby.seats .say{color:var(--dim);font-size:11.5px;line-height:1.5}
@media(max-width:620px){
  .duel{min-height:0}
  .duel .spot{width:calc(var(--card-w) + 10px);height:calc(var(--card-w)*1.4 + 10px)}
  .duel .side .nm{min-width:0;max-width:11ch}
  .duel .ring{box-shadow:0 0 0 4px var(--felt),0 0 0 5px var(--line)}
  .lobby.seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lobby.seats li{min-height:150px;padding:12px 8px}
}
.duel .chips:empty{visibility:hidden}

/* ── roulette: a printed layout, a chip on the bet, the board of what has landed ── */
.rl-wheel{display:flex;flex-direction:column;gap:14px;min-width:0}
.rl-board{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;min-height:26px;max-width:340px;margin:0 auto;width:100%;border-top:1px solid var(--line);padding-top:10px}
.rl-board .k{flex:0 0 100%;text-align:center;font-size:9px;margin-bottom:2px}
.rl-board .none{color:var(--dim)}
.rl-board .b{min-width:24px;text-align:center;padding:2px 3px;border:1px solid var(--line-lit);color:var(--text);font-variant-numeric:tabular-nums}
.rl-board .b.red{color:var(--acq-coral);border-color:rgba(255,107,91,.35)}
.rl-board .b.green{color:var(--live);border-color:rgba(61,255,122,.35)}
.rl-board .b.latest{font-weight:500;border-color:currentColor}
.rl-print{border:1px solid var(--line-lit);padding:5px;background:var(--felt)}
.rl-strip{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--accent);opacity:.75;padding:3px 3px 7px}
.rl-print .felt{border-color:var(--line-lit)}
.felt button{font-weight:500}
.felt .out{font-weight:400}
.chipmark{position:absolute;right:3px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px var(--void),0 0 0 2.5px var(--gold);pointer-events:none;animation:chipIn .25s cubic-bezier(.2,.8,.3,1) backwards}
.felt .hit .chipmark{background:var(--void);box-shadow:0 0 0 1.5px var(--gold),0 0 0 2.5px var(--void)}
.wheel-readout .n{font-size:44px}
.slip b{font-size:13px}
@media(max-width:760px){.rl-strip span:last-child{display:none}.rl-print{padding:4px}}

/* ── slots: a cabinet around the reels ── */
.cabinet{max-width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.cabinet .machines{width:100%}
.marquee,.credits{display:none}
.cabinet.single{max-width:520px;border:1px solid var(--line-lit);background:var(--felt);padding:14px 30px 16px;gap:14px;position:relative}
.cabinet.single::before,.cabinet.single::after{content:"";position:absolute;left:8px;right:8px;height:1px;background:var(--line)}
.cabinet.single::before{top:6px}.cabinet.single::after{bottom:6px}
.cabinet.single .marquee{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--anno);border-bottom:1px solid var(--line);padding-bottom:10px;width:100%;justify-content:center}
.marquee svg{width:18px;height:18px}
.marquee b{color:var(--accent);font-weight:500;font-size:15px;letter-spacing:.02em}
.cabinet.single .credits{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border:1px solid var(--line);font-family:var(--mono)}
.credits div{padding:7px 10px;border-right:1px solid var(--line);min-width:0}
.credits div:last-child{border-right:0}
.credits dt{font-size:9px;letter-spacing:.14em;color:var(--dim)}
.credits dd{font-size:16px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.credits dd.won{color:var(--live)}
/* payline markers: where the line is, on every size of panel */
.machine .mark{position:absolute;top:calc(var(--lead) + var(--sym)/2 - 5px);width:0;height:0;border:5px solid transparent;z-index:4;pointer-events:none}
.machine .mark.l{left:-9px;border-left-color:var(--accent);border-right-width:0}
.machine .mark.r{right:-9px;border-right-color:var(--accent);border-left-width:0}
.machines.many .mark{border-width:3px;top:calc(var(--lead) + var(--sym)/2 - 3px)}
.machines.many .mark.l{left:-5px}.machines.many .mark.r{right:-5px}
.paid{font-weight:500}
@media(max-width:620px){.cabinet.single{padding:12px 18px 14px}.credits dd{font-size:14px}}

/* ── coinflip: a mat to land on, a plate for each way it can fall ── */
.coin-stage{height:384px;padding-bottom:34px}
.coin-mat{position:absolute;left:50%;bottom:44px;width:min(250px,64%);height:46px;margin-left:calc(min(250px,64%)/-2);border:1px solid var(--line-lit);border-radius:50%;box-shadow:inset 0 0 0 7px var(--felt),inset 0 0 0 8px var(--line)}
.coin-shadow{bottom:62px}
.coin{margin-bottom:38px}
.plate{position:absolute;bottom:40px;width:clamp(72px,20%,112px);padding:10px 6px 8px;background:transparent;border:1px solid var(--line-lit);color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.16em;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:border-color .3s ease,color .3s ease,background .3s ease}
.plate.heads{left:clamp(0px,6%,60px)}
.plate.tails{right:clamp(0px,6%,60px)}
.plate svg{width:26px;height:26px;opacity:.45;transition:opacity .3s ease}
.plate .k{font-size:8.5px;min-height:11px;letter-spacing:.1em;color:var(--dim)}
.plate.called{border-color:var(--accent);color:var(--accent)}
.plate.called svg{opacity:1}
.plate.landed{background:var(--gold-faint);border-color:var(--gold);color:var(--text)}
.plate.landed svg{opacity:1}
.plate.landed .k{color:var(--gold)}
.coin-run{position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;flex-wrap:nowrap;overflow:hidden}
.coin-run .k{font-size:9px;margin-right:6px;flex:none}
.coin-run .none{color:var(--dim)}
.coin-run .f{width:18px;text-align:center;border:1px solid var(--line-lit);color:var(--anno);padding:1px 0;flex:none}
.coin-run .f.heads{color:var(--gold);border-color:var(--gold-soft)}
.coin-run .f.latest{font-weight:500;border-color:currentColor}
@media(max-width:620px){.coin{width:112px;height:112px}.plate{bottom:48px;width:74px;padding:8px 4px 6px}.plate svg{width:20px;height:20px}.coin-mat{width:150px;margin-left:-75px;height:34px}.coin-run .f:nth-child(n+13){display:none}}

/* ── crash: seats at the rail. chips in front of a rider, gone when they leave ── */
.crash-prow .n{display:flex;align-items:center;gap:9px}
.seatmark{flex:none;width:14px;height:9px;border-top:3px solid transparent;border-bottom:3px solid transparent;box-shadow:none;position:relative;transition:border-color .35s ease,opacity .35s ease}
.crash-prow.riding .seatmark{border-color:var(--gold)}
.crash-prow.out .seatmark{border:1px dashed var(--line-lit);height:9px}
.crash-prow.lost .seatmark{border-color:var(--dead);opacity:.45}
.crash-prow.refunded .seatmark{border-color:var(--anno);opacity:.5}
.crash-prow:not(.head) span:nth-child(2){color:var(--text);font-weight:500}
.crash-prow.out span:nth-child(n+3),.crash-prow.lost span:nth-child(4){font-weight:500}
.crash-big{font-weight:500}
.chip{font-weight:500}

/* ===== hierarchy: what a player's eye should land on =====
   weight, size and tokens that already exist (text, the table's accent, live, dead).
   labels stay small, dim and spaced; figures and outcomes carry the weight. nothing new
   is coloured that was not already a fact about money or an outcome. */
.purse dd{font-weight:500;font-size:18px}
.pot{font-weight:500}
.tape .d{font-weight:500}
.tape li span:nth-child(2){color:var(--text)}
.seat .who-line .total{font-weight:500}
.seat .who-line .tagline{color:var(--accent)}
.act.go{font-weight:500;letter-spacing:.06em}
.stake input{font-weight:500}
.crash-prow.me .n{font-weight:500}
.hist-round .pt{font-weight:500}
.pays td:last-child{font-weight:500;color:var(--accent)}
.lobby .amt{font-weight:500}
.verdict .why{font-size:12.5px}
.rl-board .b,.coin-run .f{font-weight:500}

/* ===== colour: a warmer, more varied room, from the tokens that already exist =====
   the palette was near-black, one orange, and accents used only on small marks. nothing
   here is a new hue: gold, amber, bone, coral, live and dead are the landing page's own.
   what changes is AREA: washes, tinted panels and rules instead of 6 px marks. still no
   flashing and nothing that moves to get attention: every tint is static or eases once. */

/* each table has a second colour beside its accent, used for the counter-wash and furniture */
.floor{--accent-2:var(--acq-coral)}
.floor[data-game="blackjack"]{--accent-2:var(--acq-coral)}
.floor[data-game="roulette"]{--accent-2:var(--live)}
.floor[data-game="slots"]{--accent-2:var(--live)}
.floor[data-game="coinflip"]{--accent-2:var(--acq-amber)}
.floor[data-game="duel"]{--accent-2:var(--gold)}
.floor[data-game="crash"]{--accent-2:var(--live)}
/* mines is the one table whose two colours ARE its rules: safe is live, a mine is dead.
   both are already the palette's won/lost pair, so nothing new is introduced. */
.floor[data-game="mines"]{--accent-2:var(--dead)}
.floor[data-game="dice"]{--accent-2:var(--acq-bone)}
.floor[data-game="plinko"]{--accent-2:var(--gold)}
.floor[data-game="hilo"]{--accent-2:var(--live)}

/* the room itself: two very large, very faint washes behind everything. fixed layer, no repaint on scroll */
nav{border-bottom-color:transparent;background-image:linear-gradient(90deg,var(--gold-soft),color-mix(in srgb,var(--acq-coral) 30%,transparent) 45%,var(--line) 80%);background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}

/* the felt: the accent lights the table from above, the second colour comes up from a corner */
.stage{border-color:color-mix(in srgb,var(--accent) 28%,var(--line-lit))}
.controls{border-color:color-mix(in srgb,var(--accent) 16%,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--panel))}

/* the tabs: every table wears its own colour all the time, not only when it is open */
.tab[data-id="blackjack"],.tab[data-id="duel"]{--tc:var(--acq-bone)}
.tab[data-id="roulette"]{--tc:var(--acq-coral)}
.tab[data-id="slots"]{--tc:var(--acq-amber)}
.tab[data-id="coinflip"],.tab[data-id="crash"]{--tc:var(--gold)}
.tab[data-id="mines"]{--tc:var(--live)}
.tab[data-id="dice"]{--tc:var(--acq-amber)}
.tab[data-id="plinko"]{--tc:var(--acq-coral)}
.tab[data-id="hilo"]{--tc:var(--acq-bone)}
.tab .gi{color:var(--tc);opacity:.7}
.tab:hover{background:color-mix(in srgb,var(--tc) 6%,transparent)}
.tab[aria-selected="true"]{background:linear-gradient(color-mix(in srgb,var(--tc) 4%,var(--panel)),color-mix(in srgb,var(--tc) 13%,var(--panel)))}

/* the rail: each panel has a colour of its own, as a top rule and a wash under its heading */
/* no long fades: a panel's colour is a flat band behind its heading and a solid rule above it */
.box{--bc:var(--line-lit);border-top:1px solid color-mix(in srgb,var(--bc) 55%,var(--line))}
.box h2{background:color-mix(in srgb,var(--bc) 6%,var(--panel))}
.box h2{color:color-mix(in srgb,var(--bc) 55%,var(--dim))}
#floor-box{--bc:var(--live)}
.box:has(#pot){--bc:var(--gold)}
.box:has(#rules){--bc:var(--accent)}
.box.side{--bc:var(--acq-bone)}
#tape-box{--bc:var(--acq-coral)}
#here{color:var(--live)}

/* money has a colour wherever it is a fact: won is live, lost is coral, big is gold */
.feed li.win .num{color:var(--live)}
.feed li.loss .num{color:var(--acq-coral)}
.feed li.you{background:color-mix(in srgb,var(--gold) 7%,transparent);box-shadow:inset 2px 0 0 var(--gold)}
.tape .g{color:color-mix(in srgb,var(--acq-bone) 55%,var(--dim))}
.pays td:last-child{color:var(--accent)}

/* the verdict strip keeps the result's colour, quietly, until the next bet (it eases in once) */
.verdict{transition:background .5s ease,box-shadow .5s ease}
.verdict:has(.head.win){background:color-mix(in srgb,var(--live) 4%,transparent);box-shadow:inset 3px 0 0 var(--live)}
.verdict:has(.head.loss){background:color-mix(in srgb,var(--dead) 4%,transparent);box-shadow:inset 3px 0 0 var(--dead)}
.verdict:has(.head.push){background:color-mix(in srgb,var(--gold) 4%,transparent);box-shadow:inset 3px 0 0 var(--gold)}

/* furniture picks the second colour up */
.bj-shoe i{background:color-mix(in srgb,var(--accent-2) 55%,transparent)}
.bj-edge .rule{fill:var(--accent);opacity:.85}
.bj-edge .line{stroke:color-mix(in srgb,var(--accent) 30%,var(--line-lit))}
.seat.active .box-in{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 4%,transparent)}
.duel .ring{background:color-mix(in srgb,var(--accent-2) 5%,var(--felt))}
.duel .side.me .spot{background:color-mix(in srgb,var(--accent-2) 5%,transparent)}
.rl-print{border-color:color-mix(in srgb,var(--accent) 35%,var(--line-lit));background:color-mix(in srgb,var(--accent) 4%,var(--felt))}
.felt .zero{background:color-mix(in srgb,var(--live) 7%,transparent)}
.felt .red:not(.out){background:color-mix(in srgb,var(--acq-coral) 6%,transparent)}
.cabinet.single{border-color:color-mix(in srgb,var(--accent) 35%,var(--line-lit));background:color-mix(in srgb,var(--accent) 4%,var(--felt))}
.credits dd{color:var(--acq-bone)}
.coin-mat{border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line-lit))}
.crash-board{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--accent) 2%,var(--void))}
.chip.low{color:var(--acq-bone);border-color:color-mix(in srgb,var(--acq-bone) 30%,var(--line-lit))}
.lobby.seats li.taken{border-color:color-mix(in srgb,var(--accent) 30%,var(--line-lit));background:color-mix(in srgb,var(--accent) 4%,transparent)}
.stake{border-color:color-mix(in srgb,var(--accent) 22%,var(--line-lit))}
.seg button[aria-pressed="true"]{background:var(--accent)}
.snd-pop .seg button[aria-pressed="true"]{background:var(--gold)}

/* ===== faces: an initial at once, the picture over it if and when it arrives ===== */
.face{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border:1px solid var(--line-lit);background:var(--void);overflow:hidden;vertical-align:-5px;--fc:var(--gold)}
.face.t1{--fc:var(--acq-coral)}.face.t2{--fc:var(--acq-bone)}.face.t3{--fc:var(--acq-amber)}.face.t4{--fc:var(--live)}
.face{border-color:color-mix(in srgb,var(--fc) 45%,var(--line-lit));background:color-mix(in srgb,var(--fc) 12%,var(--void))}
.face .ini{font-family:var(--mono);font-size:10px;font-weight:500;line-height:1;color:var(--fc)}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.face.has img{opacity:1}
.face.instant img{transition:none}
.feed li{align-items:center}
.feed .face{margin-right:-2px}
.crash-prow .n .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.duel .side .nm{display:flex;align-items:center;justify-content:center;gap:8px}
.duel .side .nm .face{width:24px;height:24px;vertical-align:0}
.duel .side.turn .nm::before{content:""}
.duel .side.turn .nm .face{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lobby.seats .nm{display:flex;flex-direction:column;align-items:center;gap:8px;white-space:normal}
.lobby.seats .nm .face{width:34px;height:34px}
.lobby.seats .nm .face .ini{font-size:14px}

/* ===== the public history: a strip until someone opens it ===== */
.plays{margin-top:18px;border:1px solid var(--line);background:var(--panel);--bc:var(--acq-bone);border-top-color:color-mix(in srgb,var(--bc) 45%,var(--line))}
.plays-bar{width:100%;display:flex;align-items:baseline;gap:14px;background:transparent;border:0;padding:12px 16px;cursor:pointer;text-align:left;font-family:var(--mono);color:var(--anno)}
.plays-bar .k{color:color-mix(in srgb,var(--bc) 55%,var(--dim));letter-spacing:.16em}
.plays-bar .say{font-size:12px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.plays-bar .chev{font-size:11px;letter-spacing:.06em;color:var(--anno);border:1px solid var(--line-lit);padding:3px 9px}
.plays-bar:hover .chev,.plays-bar:focus-visible .chev{color:var(--gold);border-color:var(--gold)}
.plays-body{border-top:1px solid var(--line);transition:opacity .2s ease}
.plays-body.loading{opacity:.55}
.plays-row{display:grid;grid-template-columns:7ch minmax(0,1.2fr) minmax(0,1.3fr) 9ch minmax(0,1.6fr) 10ch;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--anno);font-variant-numeric:tabular-nums}
.plays-row.head{font-size:9.5px;letter-spacing:.14em;color:var(--dim)}
.plays-row .t{color:var(--dim)}
.plays-row .who,.plays-row .g{display:flex;align-items:center;gap:8px;min-width:0}
.plays-row .who span,.plays-row .g span,.plays-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plays-row .who span:last-child{color:var(--text)}
.plays-row .g .gi{opacity:.8;flex:none}
.plays-row .s{text-align:right}
.plays-row:not(.head) .s{color:var(--text);font-weight:500}
.plays-row .d{text-align:right;font-weight:500}
.plays-row.won .d{color:var(--live)}
.plays-row.lost .d{color:var(--acq-coral)}
.plays-row.push .d,.plays-row.refunded .d{color:var(--gold)}
.plays-row.you{background:color-mix(in srgb,var(--gold) 6%,transparent);box-shadow:inset 2px 0 0 var(--gold)}
.plays-empty{padding:16px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.plays-nav{display:flex;gap:10px;align-items:center;padding:12px 16px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.plays-nav #plays-refresh{margin-left:auto}
.plays .note{margin:0;padding:0 16px 14px}
@media(max-width:760px){
  .plays-bar .say{display:none}.plays-bar .chev{margin-left:auto}
  .plays-row{grid-template-columns:6ch minmax(0,1fr) 9ch;grid-template-areas:"t who d" "t g n";gap:2px 10px;padding:9px 12px}
  .plays-row .t{grid-area:t;align-self:start}.plays-row .who{grid-area:who}.plays-row .d{grid-area:d}
  .plays-row .g{grid-area:g;font-size:11px}.plays-row .n{grid-area:n;text-align:right;font-size:10.5px;color:var(--dim)}
  .plays-row .s,.plays-row.head{display:none}
}

/* ===== the game names glow the way the landing page's headings do =====
   this is web/vestra-site/index.html's own treatment (".in-focus .tag"), not a second
   one: the same two custom properties (--glow, --glowSoft), the same declaration
   (colour, then text-shadow 0 0 12px at 55%), the same .45s ease, and the icon takes
   the landing page's drop-shadow(0 0 6px). there a section's tag lights when the
   section is in focus; here a table's name lights when the table is open, in the
   table's own colour, and warms on hover. if the landing page's values move, move these.
   it does not band: 12 px of blur falls about 100 levels, well under 4 px a level
   (measured on the tab; see wash.js for the rule). */
.tab{--glow:var(--tc);--glowSoft:color-mix(in srgb,var(--tc) 55%,transparent)}
.tab .lbl{transition:color .45s ease,text-shadow .45s ease}
.tab .gi{transition:opacity .15s,filter .45s ease}
.tab[aria-selected="true"] .lbl{color:var(--glow,var(--gold));text-shadow:0 0 12px var(--glowSoft,rgba(222,136,52,.55))}
.tab[aria-selected="true"] .gi{filter:drop-shadow(0 0 6px var(--glowSoft,rgba(222,136,52,.55)))}
.tab:hover:not([aria-selected="true"]) .lbl,.tab:focus-visible:not([aria-selected="true"]) .lbl{color:var(--glow);text-shadow:0 0 12px color-mix(in srgb,var(--tc) 30%,transparent)}

/* ===== mines: a board that looks like a board before the first click =====
   the table is a printed edge, a tray, 25 face-down tiles and a rung strip. a tile
   that has not been turned over carries no state at all (no class, no data attribute),
   which is the same rule the blackjack hole card follows: nothing to read ahead.

   the banding rule (wash.js): every surface here is FLAT or a hard edge. the only
   gradient is the lid's, and it falls 6 levels over 12 px -- 2 px a level, inside the
   4 px-a-level limit -- because it is short and steep rather than long and faint. */
.table.mines{display:flex;flex-direction:column;gap:10px;align-items:center}

/* the tray: a hairline frame the grid sits in, so the board reads as an object */
.mn-tray{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  background:color-mix(in srgb,var(--accent) 3%,var(--felt));padding:10px;width:100%;max-width:440px}
.mn-grid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:8px}

.mn-tile{position:relative;aspect-ratio:1;min-height:44px;padding:0;border:1px solid var(--line-lit);
  background:var(--panel);color:var(--dim);cursor:default;display:grid;place-items:center;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.mn-grid.live .mn-tile:not([data-k]){cursor:pointer}
.mn-grid.live .mn-tile:not([data-k]):hover,.mn-tile:focus-visible{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.mn-tile:disabled{cursor:default}
/* the lid: the face-down top. short and steep, so it does not band on near-black */
.mn-tile .lid{position:absolute;inset:0;background:linear-gradient(var(--line),var(--panel) 12px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line))}
.mn-tile .mk{width:52%;height:52%}
.mn-tile .mk path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.mn-tile.safe{color:var(--live);border-color:color-mix(in srgb,var(--live) 45%,var(--line-lit));
  background:color-mix(in srgb,var(--live) 6%,var(--panel))}
.mn-tile.mine{color:var(--dead);border-color:var(--dead);background:color-mix(in srgb,var(--dead) 12%,var(--panel))}
/* the ones the seed says were mines, shown at the end but never stepped on */
.mn-tile.shown{color:color-mix(in srgb,var(--dead) 55%,var(--dim));border-color:var(--line-lit);background:var(--panel)}

/* the rung strip: where you are, what one more tile is worth, what is on the table */

.mn-seg button{min-width:38px}

/* the rail panel: the ladder for the board in play, and the proof */
.mn-ladder{list-style:none;margin:0;padding:0;max-height:210px;overflow:auto}
.mn-ladder li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;
  color:var(--anno);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.mn-ladder li .n{font-family:var(--mono);color:var(--dim)}
.mn-ladder li .x{color:var(--anno)}
.mn-ladder li.past{color:var(--dim);opacity:.6}
.mn-ladder li.at{color:var(--text);border-left:2px solid var(--gold);padding-left:6px;margin-left:-8px}
.mn-fair{margin-top:8px}
.mn-fair .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);margin-top:6px}
.mn-fair code{display:block;font-family:var(--mono);font-size:10px;color:var(--anno);word-break:break-all;line-height:1.5}

/* the rules panel's own small paytable, one row per mine count */
.mn-odds{display:grid;grid-template-columns:auto repeat(3,1fr);gap:2px 10px;margin:8px 0;font-size:12px}
.mn-odds .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim)}
.mn-odds b{font-weight:600;color:var(--text)}
.mn-odds .n{color:var(--anno);text-align:right}
.mn-odds > :nth-child(4n+2),.mn-odds > :nth-child(4n+3),.mn-odds > :nth-child(4n){text-align:right}

@media (max-width:560px){
  /* 5 columns of 65 px after the 16 px gutters and four 8 px gaps: above the tap target */
  .mn-tray{padding:8px}
  .mn-grid{gap:6px}
  .mn-tile{min-height:46px}
        .mn-ladder{max-height:150px}
}

/* ===== one place for the primary action (CONTEXT 15) =====
   measured before this block existed: on EVERY table the primary action moved between
   states. mines swapped sides (place right, cash out left) and twitched 12 px around
   every reveal; blackjack's deal was right and its hit was left; and everywhere the
   stage changed height under the bar by 1 to 22 px (a verdict that was one line or
   two, a clock that was display:none or 2 px, a history strip that gained a row, a
   scrollbar that appeared and took 8 px of width with it).

   the rules, enforced here so a table gets them by using the shared parts:
     1. the primary action is ONE slot: the right end of the controls bar. a table
        whose action changes (place -> cash out, deal -> hit) changes the LABEL of
        what sits there, never where it sits.
     2. nothing in the bar is display:none'd mid-round. fields are disabled.
     3. the stage does not change height with state: the verdict is a fixed block,
        a stopped clock keeps its 2 px, strips that fill up reserve their rows.
     4. the page never gains or loses a scrollbar's width. */
html{scrollbar-gutter:stable}

.verdict{display:grid;grid-template-rows:28px 34px;align-content:start;gap:2px;height:88px;min-height:88px;overflow:hidden;flex-wrap:nowrap}
.verdict .head{line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.verdict .why{line-height:17px;height:34px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@media(max-width:620px){
  .verdict{grid-template-rows:26px 51px;height:103px;min-height:103px}
  .verdict .head{font-size:18px;line-height:26px}
  .verdict .why{height:51px;-webkit-line-clamp:3}
}

/* a stopped clock is invisible, not gone: it keeps its row */
.clock[hidden]{display:block!important;visibility:hidden}

/* the slot. every table's primary action carries data-primary and sits here */
/* every table's primary action already carries .act.go; a move that takes its place
   (blackjack's hit) carries data-primary */
.controls .act.go,.controls [data-primary]{margin-left:auto;min-width:132px;min-height:47px;text-align:center;justify-content:center}
.controls [data-primary].cash:not(:disabled){background:var(--live);border-color:var(--live);color:var(--void)}
.controls [data-primary].cash:not(:disabled):hover{background:color-mix(in srgb,var(--live) 85%,white);border-color:color-mix(in srgb,var(--live) 85%,white)}
@media(max-width:620px){
  /* on a phone the slot is a full-width row of its own at the BOTTOM of the bar, so it
     is under the thumb and nothing beside it can push it around */
  .controls .act.go,.controls [data-primary]{flex:1 0 100%;order:99;margin-left:0}
}

/* secondary moves (blackjack, duel) grow LEFTWARD from the slot: the primary move is
   first in the DOM and last on the row, so extras coming and going cannot shift it */
.controls .moves{margin-left:auto;flex-direction:row-reverse;flex-wrap:wrap-reverse;justify-content:flex-start}
.controls .moves .act{min-height:47px;min-width:72px}
.controls .moves .act[data-primary]{margin-left:0;min-width:96px}
@media(max-width:620px){.controls .moves{flex:1 0 100%;order:99}.controls .moves .act{flex:1 1 0}.controls .moves .act[data-primary]{flex:2 1 0}}

/* shared furniture: the printed rule across the top of a table, and the strip under it
   that says where a round stands. fixed boxes, so what they SAY can change freely */
.edge-rule{width:100%}
.edge-rule p{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--accent);opacity:.65;text-align:center;
  border-top:1px solid var(--line-lit);border-bottom:1px solid var(--line);padding:6px 0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rung-strip{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:28px;align-items:baseline;column-gap:12px;
  width:100%;max-width:440px;height:40px;border-top:1px solid var(--line);padding-top:8px;white-space:nowrap;overflow:hidden}
.rung-strip .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.rung-strip .rung{font-size:19px;font-weight:600;color:var(--text)}
.rung-strip .next{grid-column:3;font-size:12px;color:var(--anno);overflow:hidden;text-overflow:ellipsis}
.rung-strip .held{grid-column:1 / -1;grid-row:2;font-size:12px;color:var(--accent)}
.rung-strip{grid-template-rows:28px 18px;height:64px}
@media(max-width:620px){.rung-strip .rung{font-size:17px}}

/* the fairness panel (fair.js), one look on every provable table */
.fair .fair-how{margin-top:2px}
.fair .fair-how p{font-size:11.5px;color:var(--anno);margin:6px 0 2px}
.fair .fair-how code{display:block;font-family:var(--mono);font-size:10px;color:var(--gold);word-break:break-all;user-select:all;line-height:1.5;
  border-left:1px solid var(--line-lit);padding-left:8px}

.mines .clock,.hilo .clock{width:100%;max-width:440px}

/* per-table height leaks, each measured (pin.mjs): a line that is empty until something
   happens is shorter than the same line with a figure in it, so reserve the figure's box */
.bj .who-line{min-height:30px;flex-wrap:nowrap}
.bj .who-line{min-height:32px}
/* roulette's board of landed numbers: a label row and ONE row of chips, always. the
   oldest chip clips rather than wrapping to a second row and pushing the bar down */
.rl-board{height:58px;overflow:hidden;align-content:flex-start}
/* crash's rider list: "nobody yet" and one rider are the same height */
.crash-players{min-height:96px}
/* the duel's lobby and its table are two scenes on one stage: the stage keeps the taller
   one's height, so taking a seat does not drop the bar 170 px */
.floor[data-game="duel"] .stage-body{min-height:470px}
/* the bar is as tall as a labelled field even when a scene has only buttons in it
   (the duel's moves): buttons sit on its bottom edge, so the slot's y never changes */
@media(min-width:621px){.controls{min-height:103px}}
.controls .moves .act[data-primary]{order:0}
@media(max-width:620px){
  /* five blackjack moves in ONE row on a phone: a second row would push the first one
     (hit, stand) down by its height every time double and split came or went */
  .controls .moves{flex-wrap:nowrap;gap:4px}
  .controls .moves .act{min-width:0;padding:0 3px;font-size:11px;white-space:normal;line-height:1.15;letter-spacing:0}
}
.bj .hand:empty::before,.bj .hand:empty::after{box-sizing:border-box}
@media(max-width:620px){
  .crash-players{min-height:114px}            /* the empty note wraps to two lines here */
  .floor[data-game="duel"] .controls{min-height:164px;align-content:flex-end}
}

/* ===== dice: the track is the table =====
   every surface is flat. the lit zone is one flat tint with a hard edge at the line:
   a fade here would be exactly the long faint gradient that bands on near-black. */
.table.dice{display:flex;flex-direction:column;gap:12px;align-items:center}
.dc-read{display:flex;flex-direction:column;align-items:center;gap:2px;height:74px}
.dc-read .big{font-family:var(--mono);font-size:clamp(40px,9vw,56px);line-height:1;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;transition:color .25s ease}
.dc-read.won .big{color:var(--live)}
.dc-read.lost .big{color:var(--dead)}
.dc-track{position:relative;width:100%;max-width:560px;height:56px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-lit));background:var(--felt)}
.dc-zone{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--live) 13%,var(--felt));border-top:2px solid var(--live)}
.dc-line{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.dc-line-tag{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--void);background:var(--accent);padding:1px 5px;white-space:nowrap}
.dc-marker{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;transform:rotate(45deg);background:var(--text);border:2px solid var(--void);pointer-events:none;transition:background .25s ease}
.dc-marker.won{background:var(--live)}
.dc-marker.lost{background:var(--dead)}
.dc-slider{position:absolute;inset:-8px 0;width:100%;height:calc(100% + 16px);margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.dc-slider:disabled{cursor:default}
.dc-track:has(.dc-slider:focus-visible){outline:1px solid var(--accent);outline-offset:3px}
.dc-ticks{position:relative;width:100%;max-width:560px;height:16px;margin-top:-6px;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.dc-ticks span{position:absolute;transform:translateX(-50%)}
.dc-ticks span:first-child{transform:none}
.dc-ticks span:last-child{transform:translateX(-100%)}
.dc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:560px}
.dc-stat{border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 3%,var(--panel));padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.dc-stat .v{font-size:17px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-nudge{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:560px}
.dc-nudge .act{min-height:40px;padding:0 4px}
/* "this visit": the strip of what this page has seen land, memory only. roulette's board
   is the pattern (a label row and ONE row of chips, the oldest clipping), reused as is */
.rl-board.visit{max-width:560px}
.rl-board .b.won{color:var(--live);border-color:color-mix(in srgb,var(--live) 35%,var(--line-lit))}
.rl-board .b.lost{color:var(--anno)}
@media(max-width:620px){.dc-stat .v{font-size:14px}.dc-stat{padding:7px 7px}}

/* ===== higher or lower: the card, and a plate either side of it =====
   a fixed grid: the card's box and both plates keep their size whether they hold anything */
.table.hilo{display:flex;flex-direction:column;gap:10px;align-items:center}
.hl-felt{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;width:100%;max-width:620px}
.hl-mid{display:flex;align-items:center;gap:14px;justify-content:center;padding:6px 8px;border:1px dashed color-mix(in srgb,var(--accent) 22%,var(--line-lit))}
.hl-spot{position:relative;width:var(--card-w);height:calc(var(--card-w)*1.4);border:1px dashed var(--line-lit);border-radius:2px;flex:none}
.hl-spot .card{position:absolute;inset:0;margin:0}
.hl-spot .card.lost{outline:2px solid var(--dead);outline-offset:2px}
.hl-deck{position:relative;width:calc(var(--card-w)*.62);height:calc(var(--card-w)*.87);flex:none}
.hl-deck i{position:absolute;inset:0;border:1px solid var(--line-lit);background:var(--panel);border-radius:2px}
.hl-deck i:nth-child(2){transform:translate(2px,-2px)}
.hl-deck i:nth-child(3){transform:translate(4px,-4px)}
.hl-deck .k{position:absolute;top:100%;left:-60%;right:-60%;margin-top:6px;text-align:center;font-size:9px;white-space:nowrap}
.hl-guess{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:8px 6px;border:1px solid var(--line-lit);
  background:var(--panel);color:var(--anno);font-family:var(--mono);cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;min-width:0}
.hl-guess .hl-arrow{width:26px;height:26px}
.hl-guess .hl-arrow path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.hl-guess .l{font-size:13px;letter-spacing:.14em;color:var(--text)}
.hl-guess .c,.hl-guess .p{font-size:11px;height:15px;white-space:nowrap}
.hl-guess .p{color:var(--accent)}
.hl-guess.higher:not(:disabled):hover,.hl-guess.higher:not(:disabled):focus-visible{border-color:var(--live);color:var(--live);background:color-mix(in srgb,var(--live) 6%,var(--panel))}
.hl-guess.lower:not(:disabled):hover,.hl-guess.lower:not(:disabled):focus-visible{border-color:var(--acq-coral);color:var(--acq-coral);background:color-mix(in srgb,var(--acq-coral) 6%,var(--panel))}
.hl-guess:disabled{opacity:.4;cursor:default}
.hl-trail{max-width:620px}
@media(max-width:620px){
  /* the card on top, the two plates side by side under it: both still under a thumb */
  .hl-felt{grid-template-columns:1fr 1fr;gap:8px}
  .hl-mid{grid-column:1 / -1;order:-1}
  .hl-guess{min-height:96px}
}

/* ===== plinko: a canvas of pegs over a row of bins =====
   the bins are flat tints by what they pay. the canvas is one fixed aspect for every row
   count, so changing rows never moves the bar under it. */
.table.plinko{display:flex;flex-direction:column;gap:10px;align-items:center}
.pk-board{width:100%;max-width:580px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:var(--felt)}
.pk-canvas{display:block;width:100%;aspect-ratio:1 / .84}
.pk-bins{display:grid;gap:0;border-top:1px solid var(--line-lit)}
.pk-bin{font-family:var(--mono);font-size:clamp(7.5px,1.9vw,11px);text-align:center;padding:6px 0;color:var(--dim);border-left:1px solid var(--line);
  font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap;transition:background .5s ease,color .5s ease;letter-spacing:-.02em}
.pk-bin:first-child{border-left:0}
.pk-bin.mid{color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pk-bin.hi{color:var(--acq-amber);background:color-mix(in srgb,var(--acq-amber) 10%,transparent)}
.pk-bin.top{color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent);font-weight:500}
.pk-bin.hit{animation:pkHit .9s ease-out 1}
@keyframes pkHit{0%{background:var(--text);color:var(--void)}100%{}}
@media (prefers-reduced-motion: reduce){.pk-bin.hit{animation:none;outline:1px solid var(--text);outline-offset:-1px}}
.dc-track{margin-top:20px}   /* room for the line's own tag, which sits above the track and was landing on the readout */
@media(max-width:620px){.edge-rule p{white-space:normal;height:40px;line-height:14px;letter-spacing:.12em;display:flex;align-items:center;justify-content:center;font-size:9.5px}}

/* the two facts every rules panel opens with, the same way on all ten tables */
.rule-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--line);align-items:baseline}
.rule-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.rule-facts dd{margin:0;font-size:12px;color:var(--text);line-height:1.35}
.bj .who-line{height:34px;min-height:34px;overflow:visible}   /* a FIXED box: min-height let the total's 32.4 px line win by 0.4 */

/* ===== the two columns, and THIS SESSION under the table =====
   the rail used to hold the one panel that GROWS (the session list), so it ran a screen past
   the table with nothing beside it. the session lives under the table now, where that dead
   space was; it stretches to the rail's height when the rail is the taller column, and its
   list scrolls inside its own box, so neither column can outgrow the other by a panel. */
.grid{align-items:stretch}
.grid>.main{display:flex;flex-direction:column;min-width:0}
.session{margin-top:18px;flex:1;display:flex;flex-direction:column;min-height:0}
.sess-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 290px;min-height:236px}
.sess-main{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.sess-chart{flex:1;min-height:176px;position:relative;touch-action:pan-y;cursor:crosshair}
.sess-plot{position:absolute;inset:0}
.sess-svg{display:block}
.sess-svg .sess-gl{stroke:var(--line);stroke-width:1}
.sess-svg .sess-zero{stroke:var(--line-lit);stroke-width:1;stroke-dasharray:3 3}
.sess-svg .sess-tick{font-family:var(--mono);font-size:9.5px;fill:var(--dim)}
.sess-svg .sess-tick.z{fill:var(--anno)}
/* FLAT tints, no fade: a fill that faded to nothing over this height would band (wash.js) */
.sess-svg .sess-area.up{fill:color-mix(in srgb,var(--live) 13%,transparent)}
.sess-svg .sess-area.down{fill:color-mix(in srgb,var(--dead) 13%,transparent)}
.sess-svg .sess-line{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.sess-svg .sess-line.up{stroke:var(--live)}
.sess-svg .sess-line.down{stroke:var(--dead)}
.sess-svg .sess-cursor{stroke:var(--anno);stroke-width:1}
.sess-svg .sess-dot{fill:var(--text);stroke:var(--void);stroke-width:1.5}
.sess-svg .sess-dot.up{fill:var(--live)}
.sess-svg .sess-dot.down{fill:var(--dead)}
/* the readout is a fixed row under the chart, not a floating tooltip: nothing to fall off a
   phone's edge, and nothing that changes the box's height as it fills */
.sess-read{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;height:44px;overflow:hidden;padding:8px 16px;margin:0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--anno)}
.sess-read b{color:var(--text);font-weight:500}
.sess-read .k{font-size:9.5px;letter-spacing:.14em;color:var(--dim)}
.sess-read .dim{color:var(--dim)}
.sess-read .scale{margin-left:auto}
.sess-read .win,.sess-read .d.win{color:var(--live)}
.sess-read .loss,.sess-read .d.loss{color:var(--dead)}
.session .tape{max-height:236px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:940px){
  .sess-body{grid-template-columns:1fr;min-height:0}
  .sess-main{border-right:0;border-bottom:1px solid var(--line)}
  .sess-chart{min-height:160px;flex:none;height:160px}
  .sess-read{height:58px}
  .sess-read .scale{margin-left:0}
  .session .tape{max-height:222px}
}
/* and the other way round: where the table's column is the taller one (blackjack, coinflip,
   the duel), the rail follows the scroll instead of ending in a blank half-screen */
@media(min-width:941px){.rail{position:sticky;top:74px;align-self:start}}

/* the toast never takes a click, and on a phone it is not where the thumb is. it was
   fixed to the bottom of the screen at z-index 80, which on a phone is exactly where the
   primary action lives: for four seconds after ANY error the button under it could not be
   pressed. found by the fault harness (a hilo pot that could not be taken after a failed
   guess), the same family as the mines lockout: an error making the table worse. */
.toast{pointer-events:none}
@media(max-width:940px){.toast{top:70px;bottom:auto}}

/* the player's own avatar in the nav: the one <img> on the page that is not a .face chip,
   and the only one that had no fit rule at all, so anything not square was squashed */
.who img{object-fit:cover}

/* ===== figures that outgrew their boxes =====
   the layout was written when a balance was four digits, and a 13-character one walked
   out of every fixed slot it met. fx.js gives a big figure a compact form and keeps the
   exact one on the node; this is the other half: no figure may ever cross into its
   neighbour, whatever it says. the containment is not a formatting rule and does not
   depend on one, so a figure that escapes the helper still cannot break the page. */
.fig{cursor:zoom-in;text-decoration:underline dotted color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:2px}
.fig.fig-open{cursor:zoom-out;text-decoration:none}
/* every fixed-width figure cell: clipped and ellipsised rather than spilling sideways */
.crash-prow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crash-prow>span.n{display:flex}
.tape li{align-items:baseline}
.tape .d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;max-width:12ch}
.tape li span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed li .t{min-width:0;overflow-wrap:anywhere}
.feed li .t .num{white-space:nowrap}
.purse dd{max-width:12ch;overflow:hidden;text-overflow:ellipsis}
.purse dd.fig-open{max-width:none}
.rung-strip .rung,.rung-strip .next,.rung-strip .held{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dc-stat .v,.sess-read b,.sess-read .d{overflow-wrap:anywhere}
.plays-row>span{min-width:0}
.plays-row .d,.plays-row .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pot{overflow-wrap:anywhere}
/* the rider list's own column headings: at 390px the tracks are 6-8ch and the tracking
   pushed "LEFT AT" out of its own heading */
@media(max-width:620px){.crash-prow.head{letter-spacing:.02em}}

/* ===== spectating (CONTEXT §15 "Spectate") =====
   a rail panel of who is playing something worth watching, and read-only boards under
   the table. nothing here is interactive except choosing what to watch: a spectator
   cannot reach a bet, and the bot would not take one from this stream anyway. */
.watched{font-size:11px;padding:6px 10px;white-space:nowrap}
.watched.off{color:var(--dim);border-color:var(--line)}
.watch-list{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto;overscroll-behavior:contain}
.watch-list li{border-bottom:1px solid var(--line)}
.watch-list li:last-child{border-bottom:0}
.watch-pick{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:8px 14px;cursor:pointer;
  font-family:var(--mono);font-size:12px;color:var(--anno);text-align:left;min-width:0}
.watch-pick:hover,.watch-pick:focus-visible{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text)}
.watch-pick .gi{width:14px;height:14px;flex:none;color:var(--accent)}
.watch-pick .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.watch-pick .st{flex:none;color:var(--dim);font-variant-numeric:tabular-nums}
.watch-pick.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.watch-pick.on::after{content:"●";color:var(--live);font-size:9px;margin-left:2px}
.watch-note{padding:12px 14px;margin:0}
.watch-stage{margin-top:18px;border:1px solid var(--line);background:var(--panel)}
.watch-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.watch-bar .act{margin-left:auto;letter-spacing:.04em}
.watch-boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line)}
.watch-board{background:var(--panel);padding:12px 14px;min-width:0}
.watch-title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--text);margin-bottom:10px}
.watch-title .gi{width:15px;height:15px;color:var(--accent)}
.watch-body{min-height:76px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.watch-hand{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.watch-hand .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);flex:none;min-width:5ch}
.watch-hand .card{--card-w:34px;margin-right:calc(var(--card-w)*-.22)}
.watch-grid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:3px;max-width:150px}
.watch-tile{aspect-ratio:1;border:1px solid var(--line-lit);background:var(--void)}
.watch-tile.safe{border-color:color-mix(in srgb,var(--live) 45%,var(--line-lit));background:color-mix(in srgb,var(--live) 22%,var(--void))}
.watch-tile.mine,.watch-tile.mine_shown{border-color:var(--dead);background:color-mix(in srgb,var(--dead) 30%,var(--void))}
.watch-foot{margin:10px 0 0;font-family:var(--mono);font-size:11px;color:var(--anno);overflow-wrap:anywhere}
@media(max-width:620px){
  .watched{font-size:10px;padding:5px 7px}
  .watch-boards{grid-template-columns:1fr}
  .watch-list{max-height:170px}
}

/* =====================================================================================
   THE WIDTH PASS (CONTEXT §15 "The width pass"). five things, in the order they bite.
   ===================================================================================== */

/* ===== 1. the balance is NEVER abbreviated =====
   "2.9b" with 10 coins bet against it does not move, which undoes the debit-at-acceptance
   work for exactly the players with the most on the line. the header is the ONE figure on
   the page that is always exact (fx.js countTo, data-exact); everywhere else keeps the
   compact-with-exact-on-tap rule. it FITS by getting room and, past that, smaller type:
   --n is the figure's length in characters (set from script), and a mono character is
   .6 em wide, so the size that fits a width is width / (.6 n). never rounded, never cut. */
.purse dd{max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;
  font-size:min(17px,calc((100vw - 96px)/(var(--n,10)*.62)))}
@media(max-width:620px){
  /* a row of its own under the mark: the full width of a phone for one number */
  nav .wrap{height:auto;min-height:56px;flex-wrap:wrap;row-gap:0;padding-top:0}
  nav .wrap>*{margin-top:10px;margin-bottom:10px}
  /* the second row is the balance and, at its end, the way out: the first row could not
     hold sign-out as well, and a wrapped nav is a third row for one button */
  nav .wrap::after{content:"";order:19;flex:0 0 100%;height:0;border-top:1px solid var(--line)}
  .purse{order:20;flex:1 1 0;min-width:0;margin:0!important;padding:7px 0 9px;
    justify-content:space-between;align-items:baseline}
  .purse dt{display:block}
  .purse dd{font-size:min(19px,calc((100vw - 210px)/(var(--n,10)*.62)))}
  .who{order:21;margin:0 0 0 12px!important}
  .who .act{padding:5px 9px;min-height:30px;font-size:11px}
  .toast{top:112px}
}

/* ===== 2. the game names carry weight =====
   they are the names of the rooms. sans at weight, larger, and the landing page's HEADING
   glow: web/vestra-site/index.html's `shimmer` on `.wordmark .ch` -- a warm pass that
   travels through the word letter by letter (76% of a 5 s cycle: colour to --sweep,
   text-shadow 0 0 20px --sweepGlow, stepped .075 s a letter), idle most of the cycle so it
   reads as an occasional sweep and not a pulse. same keyframe shape, same numbers; only
   the resting state differs, because a selected tab rests LIT (the earlier pass's
   `.in-focus .tag` glow) where the landing page's headword rests plain. one tab sweeps at
   a time: the open one. 20 px of blur falls ~130 levels: far under 4 px a level. */
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
.tab{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.09em;padding:16px 8px;min-height:60px;
  border-bottom:1px solid var(--line)}
.tab:nth-child(5n){border-right:0}
.tab:nth-child(n+6){border-bottom:0}
.tab .gi{width:19px;height:19px;margin-right:0;stroke-width:1.5;vertical-align:0}
.tab .lbl{display:inline-flex;white-space:nowrap}
.tab .lbl .ch{display:inline-block}
.tab{--sweep:color-mix(in srgb,var(--tc) 45%,#fff);--sweepGlow:color-mix(in srgb,var(--tc) 50%,transparent)}
@keyframes tabShimmer{
  0%,64%,100%{color:var(--glow);text-shadow:0 0 12px var(--glowSoft)}
  76%{color:var(--sweep);text-shadow:0 0 20px var(--sweepGlow)}
  86%{color:var(--glow);text-shadow:0 0 12px var(--glowSoft)}
}
.tab[aria-selected="true"] .lbl .ch{animation:tabShimmer 5s ease-in-out infinite;animation-delay:calc(1.4s + var(--i)*.075s)}
@media(prefers-reduced-motion:reduce){.tab[aria-selected="true"] .lbl .ch{animation:none}}
.tab .dot{position:absolute;top:8px;right:8px;margin:0}
.tab .room{position:absolute;top:5px;right:6px;margin:0;font-family:var(--mono);font-weight:400;font-size:9.5px;background:var(--void)}
@media(min-width:1240px){
  .tabs{grid-template-columns:repeat(10,minmax(0,1fr))}
  .tab,.tab:nth-child(5n){border-right:1px solid var(--line)}
  .tab,.tab:nth-child(n+6){border-bottom:0}
  .tab:last-child{border-right:0}
}
@media(min-width:1500px){.tab{font-size:16.5px;min-height:66px;gap:11px}.tab .gi{width:21px;height:21px}}
@media(max-width:620px){
  /* ten names, two rows of five, all on screen: the icon above the name */
  .tab{flex-direction:column;gap:6px;padding:11px 1px 9px;min-height:62px;font-size:10px;letter-spacing:.03em}
  .tab .gi{width:20px;height:20px}
  .tab .dot{top:6px;right:6px}
  .tab .room{top:3px;right:3px;font-size:8.5px;padding:0 3px}
}

/* ===== 3. the casino uses the width it has =====
   it sat in the middle 1180 px of whatever it was given. the floor takes up to 1760 now
   and the grid becomes THREE columns once there is room: the room (who is here, who can be
   watched, what is coming back to you), the table, the rules. */
nav .wrap,.floor.wrap{max-width:1760px}
.grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main room" "main rail";grid-template-rows:auto 1fr;align-items:stretch}
.grid>.main{grid-area:main;display:flex;flex-direction:column;min-width:0}
.grid>.people{grid-area:room}
.grid>.rail:not(.people){grid-area:rail}
@media(min-width:941px){.rail.people{position:static}}
@media(min-width:1500px){
  .grid{grid-template-columns:300px minmax(0,1fr) 320px;grid-template-areas:"room main rail";grid-template-rows:auto}
  .rail.people{position:sticky;top:74px;align-self:start}
}
@media(max-width:940px){.grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "room" "rail";grid-template-rows:auto}}

/* ===== 4. the floor, alone =====
   with one player in the room the feed used to be eight rows of yourself. now it is what
   OTHER members did, or a plain statement that nobody else is in (casino.js drawFloor). */
#here.solo{color:var(--dim)}
#floor-box.alone{--bc:var(--line-lit)}
.feed li.empty{display:block;line-height:1.55;padding:12px 16px}
.feed li.lead{font-size:11px;padding:9px 16px;background:color-mix(in srgb,var(--line) 45%,transparent)}

/* ===== 5. rakeback: what is coming back to you =====
   flat surfaces and one hard-edged bar. nothing here fades, so nothing can band. */
.rake{--bc:var(--gold)}
.rake h2 .k2{color:var(--anno);letter-spacing:.06em}
.rake-row{display:flex;align-items:center;gap:12px}
.rake-due{flex:1;min-width:0;font-size:24px}
.rake-row .act{flex:none;border-color:var(--gold);color:var(--gold)}
.rake-row .act:disabled{border-color:var(--line);color:var(--dim)}
.rake-bar{height:3px;background:var(--line);margin:12px 0 10px;position:relative}
.rake-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.rake .in p{font-size:12.5px;line-height:1.5}
.rake-note{font-size:12px!important;color:var(--dim);border-top:1px solid var(--line);padding-top:10px;margin-top:10px!important}

/* ===== the table takes the room it has (casino.js fit) =====
   --z is set on the stage body when a table opens: the smaller of what the width and the
   height allow, 1 to 1.5, never changed by a round's state. a table spends it as zoom;
   plinko spends it as its board's width, so its canvas is REDRAWN bigger, not stretched. */
.floor[data-game="blackjack"] .stage-body,.floor[data-game="hilo"] .stage-body,.floor[data-game="slots"] .stage-body,
.floor[data-game="coinflip"] .stage-body,.floor[data-game="dice"] .stage-body,.floor[data-game="mines"] .stage-body,
.floor[data-game="duel"] .stage-body{zoom:var(--z,1)}
.pk-board{max-width:calc(580px*var(--z,1))}
.mn-ladder,.watch-list,.session .tape{scrollbar-width:thin;scrollbar-color:var(--line-lit) transparent}

/* ===== the felt's print: what belongs on the bare cloth =====
   a real table's felt is printed: the house's mark, the game's name. where a table leaves a
   flank (casino.js measures it; nothing is drawn under a table that spans its stage), the
   cloth carries that table's own mark, large, in hairline, in the table's colour. it is
   FLAT line at one opacity -- no fade, so nothing to band (wash.js) -- and its only life is
   a breath: 16 s, opacity .2 to .32, the two sides half a cycle apart. nothing moves,
   nothing flashes, and it sits under the table, never over it. */
.felt-print{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.stage-body,.verdict{position:relative;z-index:2}
.emblem{position:absolute;top:calc(50% - 44px);width:var(--size);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--accent);opacity:.2;animation:breathe 16s ease-in-out infinite}
.emblem.l{left:var(--at)}
.emblem.r{right:var(--at);animation-delay:-8s}
.emblem .gi{width:var(--size);height:var(--size);margin:0;stroke-width:1;opacity:1;filter:none}
.emblem .gi path{vector-effect:non-scaling-stroke}
.emblem .cap{font-family:var(--mono);font-size:10px;letter-spacing:.42em;padding-left:.42em;white-space:nowrap}
@keyframes breathe{50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.emblem{animation:none}}

/* ===== standings (standings.js): the board, in the room's column =====
   read from the ledger by the bot. flat rows and hard rules, no fades (the banding rule). */
.box.standings{--bc:var(--gold)}
.st-picks{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.seg.st-seg button{flex:1;height:30px;padding:0 6px;font-size:11px;letter-spacing:.04em}
.st-list{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px}
.st-row{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);color:var(--anno)}
.st-row:last-child{border-bottom:0}
.st-row.you{background:color-mix(in srgb,var(--gold) 7%,transparent);box-shadow:inset 2px 0 0 var(--gold)}
.st-r{flex:none;width:2ch;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}
.st-row:nth-child(1) .st-r{color:var(--gold)}
.st-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.st-v{flex:none;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
.st-v.win,.st-v.win .num{color:var(--live)}
.st-v.loss,.st-v.loss .num{color:var(--acq-coral)}
.st-gap{padding:0 12px;color:var(--dim);text-align:center;line-height:12px;border-bottom:1px solid var(--line)}
.st-empty{padding:12px;color:var(--dim);line-height:1.5}
.st-note{padding:10px 12px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5}

/* ===== your record (record.js): achievements, and the per-table figures =====
   the history's bar and body, reused. flat cells, hard rules. */
.toast.good{border-color:var(--gold);color:var(--gold)}
.plays.record{--bc:var(--gold)}
.rec-body{padding:0}
.rec-parts{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.rec-part{padding:14px 16px 16px;border-top:1px solid var(--line)}
.rec-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);font-weight:400;margin:0 0 10px}
.rec-h .k2{color:var(--anno);letter-spacing:.08em}
.ach-grid{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.ach{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);padding:9px 11px;min-width:0;color:var(--dim)}
.ach .ach-t{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--anno)}
.ach .ach-h{font-size:12.5px;line-height:1.4}
.ach .ach-d{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:auto;padding-top:4px}
.ach.got{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--gold) 5%,transparent);color:var(--anno)}
.ach.got .ach-t{color:var(--gold)}
.ach.got .ach-d{color:var(--anno)}
.ach-wait{grid-column:1/-1;color:var(--dim);font-family:var(--mono);font-size:12px;padding:6px 0}
@media(max-width:620px){.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ach{padding:8px 9px}}

/* ===== the daily (casino.js drawDaily): rakeback's box, for discord's /daily ===== */
.box.daily{--bc:var(--live)}
.daily-due{color:var(--anno)}
.box.daily.ready .daily-due{color:var(--live)}
.box.daily .in p{font-size:12.5px;line-height:1.5}

/* your record, by table: the history's grid, narrower. every figure cell clips (the containment rule) */
.rec-table{font-family:var(--mono);font-size:12px;margin-bottom:12px;border:1px solid var(--line)}
.rec-row{display:grid;grid-template-columns:minmax(0,1.5fr) 8ch 6ch 9ch minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--anno)}
.rec-row:last-child{border-bottom:0}
.rec-row.head{color:var(--dim);font-size:10px;letter-spacing:.12em}
.rec-row.sum{color:var(--text);background:color-mix(in srgb,var(--gold) 4%,transparent)}
.rec-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-row .g{display:flex;align-items:center;gap:8px;color:var(--text)}
.rec-row .g .gi{width:14px;height:14px;flex:none;color:var(--gold);margin:0}
.rec-row .n,.rec-row .d{text-align:right;font-variant-numeric:tabular-nums}
.rec-row .d.win,.rec-row .d.win .num{color:var(--live)}
.rec-row .d.loss,.rec-row .d.loss .num{color:var(--acq-coral)}
.rec-empty{padding:12px;color:var(--dim)}
@media(max-width:620px){
  .rec-row{grid-template-columns:minmax(0,1.3fr) 6ch 5ch minmax(0,1fr);gap:6px;padding:8px}
  .rec-row span:nth-child(4),.rec-row span:nth-child(5){display:none}
}

/* ===== tip (tip.js): give another member coins. two presses, always ===== */
.box.tip{--bc:var(--acq-bone)}
.box.tip .in p{font-size:12.5px;line-height:1.5}
.tip-note{color:var(--dim)}
.tip-to{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-width:0}
.tip-to b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tip-x{flex:none;font-size:10.5px;padding:4px 8px}
.tip-row{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.tip-row .act{flex:none;min-height:40px}
.tip-row .act.go{flex:1}
.tip-field{flex:1;min-width:0;margin:0}
.tip-field input{width:100%;height:40px;background:var(--void);border:1px solid var(--line-lit);color:var(--text);font-family:var(--mono);font-size:14px;padding:0 10px}
.tip-field input:focus{outline:none;border-color:var(--gold)}
.tip-ask{color:var(--text)!important;margin-bottom:10px}
.tippable{cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--anno) 60%,transparent);text-underline-offset:3px}
.tippable:hover,.tippable:focus-visible{color:var(--gold);outline:none}
.plays-row.tip .d{color:var(--anno)}

/* ===== the slot machines' picker (slots.js): four machines, one return ===== */
.seg.sl-pick{max-width:520px;margin:0 auto 12px;width:100%}
.seg.sl-pick button{flex:1;height:36px;padding:0 4px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
.pays.sl-compare th{text-align:left;font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--dim);padding-bottom:4px}
.pays.sl-compare th:not(:first-child),.pays.sl-compare td:not(:first-child){text-align:right}
.pays.sl-compare tr.on td{color:var(--accent)}
@media(max-width:620px){.seg.sl-pick button{font-size:10px;letter-spacing:0}}

/* ===== the tab row, regrouped (casino.js GROUPS) =====
   ten tables fitted a phone as two rows of five. eighteen would be four rows: a quarter of
   the screen gone before any table. so the row is TWO LEVELS on every screen: five groups,
   then the open group's tables, never more than five. two rows whatever the count, and the
   second row's cells are wide enough for a name at full size. every table's tab stays in the
   document (hidden when its group is shut), so its live dot and the room's count survive, and
   both are mirrored onto the group: nothing live is ever out of sight. */
.tabs{display:block;overflow:hidden}
.tab-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line)}
.grp{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:40px;padding:0 6px;
  background:transparent;border:0;border-right:1px solid var(--line);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);transition:color .15s,background .15s}
.grp:last-child{border-right:0}
.grp:hover,.grp:focus-visible{color:var(--text);outline:none}
.grp[aria-selected="true"]{color:var(--text);background:var(--panel);box-shadow:inset 0 -1px 0 var(--accent)}
.grp-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-n{flex:none;font-size:9.5px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);padding:0 4px}
.grp[aria-selected="true"] .grp-n{color:var(--anno);border-color:var(--line-lit)}
.grp .dot{position:absolute;top:6px;right:6px;margin:0;display:block;width:6px;height:6px;background:var(--live);animation:pulse 1.4s ease-in-out infinite}
/* the room's count is ABSOLUTE, like .tab .room, and for the same reason: in the flow it grew the
   group button, which grew the tab row, which pushed the stage down and made fit() choose a
   different zoom. found by the harness, which measured a table 6 px lower than it had been after
   a craps bet put "1 in" on the TABLES group. nothing above the stage may change height. */
.grp .room{position:absolute;top:4px;right:6px;flex:none;font-size:9px;letter-spacing:.02em;color:var(--anno);border:1px solid var(--line-lit);padding:0 3px;background:var(--void);line-height:13px}
.tab-row{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.tab-row .tab,.tab-row .tab:nth-child(5n),.tab-row .tab:nth-child(n+6){border-bottom:0;border-right:1px solid var(--line)}
.tab-row .tab:last-child{border-right:0}
@media(max-width:620px){
  .grp{min-height:38px;font-size:9.5px;letter-spacing:.06em;gap:4px;padding:0 2px}
  .grp-n{display:none}
  .grp .room{display:none}
}
.tab[data-id="keno"]{--tc:var(--live)}

/* ===== keno (keno.js): forty numbers, ten drawn ===== */
.floor[data-game="keno"] .stage-body{zoom:var(--z,1)}
.floor[data-game="keno"]{--accent:var(--live)}
.table.keno{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.kn-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.kn-tile{aspect-ratio:1/1;min-width:0;background:var(--void);border:1px solid var(--line-lit);color:var(--anno);font-family:var(--mono);font-size:15px;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s;padding:0}
.kn-tile:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.kn-tile:disabled{cursor:default}
.kn-tile.picked{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--void));box-shadow:inset 0 0 0 1px var(--accent)}
.kn-tile.drawn.miss{border-color:var(--acq-bone);color:var(--acq-bone);background:color-mix(in srgb,var(--acq-bone) 7%,var(--void))}
.kn-tile.drawn.hit{border-color:var(--gold);color:var(--void);background:var(--gold);box-shadow:none;transform:scale(1.04)}
/* the label on its own row, the prices sharing the full width under it: eleven prices beside a label
   left each one 39 px, and "880.37x" does not fit in 39 px. a fixed height, whatever is picked. */
.kn-pays{display:grid;grid-template-columns:repeat(var(--cells,11),minmax(0,1fr));grid-template-rows:16px 1fr;gap:4px;align-items:stretch;height:66px;font-family:var(--mono)}
.kn-pays .k{grid-column:1/-1;align-self:center;font-size:10px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.kn-pay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--line);min-width:0;padding:0 2px}
.kn-pay b{font-weight:400;font-size:10px;color:var(--dim)}
.kn-pay i{font-style:normal;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kn-pay.none i{color:var(--dim)}
.kn-pay.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.kn-pay.on b,.kn-pay.on i{color:var(--gold)}
.kn-tools{display:flex;gap:8px}
.kn-tools .act{height:46px;padding:0 14px}
@media(max-width:620px){
  .kn-board{gap:4px}
  .kn-tile{font-size:13px}
  .kn-pays{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:16px 1fr 1fr;height:112px}
  .kn-pays .k{font-size:9.5px}
  .kn-pay i{font-size:10px}
}

/* ===== war (war.js): one card each, and a tie to decide ===== */
.tab[data-id="war"]{--tc:var(--acq-coral)}
.floor[data-game="war"]{--accent:var(--acq-coral)}
.floor[data-game="war"] .stage-body{zoom:var(--z,1)}
.table.war{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px;--card-w:clamp(60px,15vw,88px)}
.wr-felt{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line-lit);
  background:color-mix(in srgb,var(--accent) 3%,var(--void));padding:18px 12px;transition:border-color .3s ease}
.wr-felt[data-outcome="won"]{border-color:var(--live)}
.wr-felt[data-outcome="lost"]{border-color:var(--dead)}
.wr-felt[data-outcome="tie"]{border-color:var(--gold)}
.wr-side{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.wr-side .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.wr-cards{display:flex;gap:8px;justify-content:center}
.wr-spot{width:var(--card-w);height:calc(var(--card-w)*1.4);border:1px dashed var(--line-lit);display:flex;align-items:center;justify-content:center;flex:none}
.wr-spot.war{border-color:var(--line)}
.wr-spot .card{margin-right:0}
.wr-mid{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em}
.wr-say{min-height:64px;height:64px;overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--anno);border:1px solid var(--line);padding:9px 12px}
.wr-say:empty{border-color:transparent}
.wr-say .num{color:var(--text)}
.wr-short{color:var(--acq-coral)}
.controls .field .act{height:46px;padding:0 16px}
@media(max-width:620px){
  .wr-felt{padding:12px 6px;gap:4px}
  .wr-cards{gap:4px}
  .table.war{--card-w:clamp(44px,17vw,70px)}
  .wr-say{height:88px;min-height:88px;font-size:12.5px}
}

/* ===== baccarat (baccarat.js): two hands, three bets, nothing to decide ===== */
.tab[data-id="baccarat"]{--tc:var(--gold)}
.floor[data-game="baccarat"]{--accent:var(--gold)}
.floor[data-game="baccarat"] .stage-body{zoom:var(--z,1)}
.table.bacc{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px;--card-w:clamp(46px,12vw,76px)}
.bc-felt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.bc-hand{border:1px solid var(--line-lit);background:color-mix(in srgb,var(--accent) 3%,var(--void));padding:12px 10px 14px;min-width:0;transition:border-color .3s ease,background .3s ease}
.bc-hand.won{border-color:var(--live);background:color-mix(in srgb,var(--live) 6%,var(--void))}
.bc-hand.lost{border-color:var(--line)}
.bc-hand.lost .bc-cards{opacity:.55}
.bc-hand.tied{border-color:var(--gold)}
.bc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.bc-head .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.bc-total{font-family:var(--mono);font-size:26px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;min-width:1ch;text-align:right}
.bc-hand.won .bc-total{color:var(--live)}
.bc-cards{display:flex;gap:6px;justify-content:center;transition:opacity .3s ease}
.bc-spot{width:var(--card-w);height:calc(var(--card-w)*1.4);border:1px dashed var(--line-lit);flex:none;display:flex;align-items:center;justify-content:center}
.bc-spot.third{border-color:var(--line)}
.bc-spot .card{margin-right:0}
.bc-bets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);gap:8px}
.bc-bet{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:11px 6px;background:var(--void);border:1px solid var(--line-lit);color:var(--anno);cursor:pointer;font-family:var(--mono);transition:border-color .15s,background .15s,color .15s}
.bc-bet .l{font-size:12px;letter-spacing:.12em;color:var(--text)}
.bc-bet .p{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.bc-bet .c{font-size:10.5px;color:var(--dim)}
.bc-bet:hover:not(:disabled){border-color:var(--accent)}
.bc-bet[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,var(--void));box-shadow:inset 0 0 0 1px var(--accent)}
.bc-bet:disabled{cursor:default}
.bc-bet:disabled:not([aria-pressed="true"]){opacity:.5}
.rl-board .b.bc-player{border-color:var(--acq-bone);color:var(--acq-bone)}
.rl-board .b.bc-banker{border-color:var(--acq-coral);color:var(--acq-coral)}
.rl-board .b.bc-tie{border-color:var(--live);color:var(--live)}
@media(max-width:620px){
  .bc-felt{gap:6px}.bc-hand{padding:9px 5px 10px}.bc-cards{gap:3px}
  .table.bacc{--card-w:clamp(38px,13.5vw,58px)}
  .bc-bet{padding:9px 2px}.bc-bet .l{font-size:10.5px;letter-spacing:.05em}.bc-bet .p{font-size:12px}.bc-bet .c{font-size:9.5px}
}

/* ===== sic bo (sicbo.js): three dice, fifty-two squares ===== */
.tab[data-id="sicbo"]{--tc:var(--acq-bone)}
.floor[data-game="sicbo"]{--accent:var(--acq-bone)}
.floor[data-game="sicbo"] .stage-body{zoom:var(--z,1)}
.table.sicbo{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sb-die{display:inline-grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:16px;height:16px;padding:2px;gap:1px;border:1px solid currentColor;box-sizing:border-box;flex:none}
.sb-die i{display:block;border-radius:50%}
.sb-die i.on{background:currentColor}
.sb-die.big{width:56px;height:56px;padding:8px;gap:4px;border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 6%,var(--void))}
.sb-tray{display:flex;align-items:center;justify-content:center;gap:12px;height:72px}
.sb-tray.rolling .sb-die.big{border-color:var(--gold)}
.sb-sum{display:flex;flex-direction:column;align-items:center;margin-left:10px;min-width:54px;font-family:var(--mono)}
.sb-sum .k{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.sb-sum b{font-size:30px;line-height:1.1;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.sb-board{display:flex;flex-direction:column;gap:8px}
.sb-sec .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);margin-bottom:4px}
.sb-grid{display:grid;gap:4px}
.sb-sec.even .sb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-sec.total .sb-grid{grid-template-columns:repeat(14,minmax(0,1fr))}
.sb-sec.single .sb-grid,.sb-sec.double .sb-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.sb-sec.triple .sb-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.sb-sec.pair .sb-grid{grid-template-columns:repeat(15,minmax(0,1fr))}
.sb-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:44px;padding:4px 1px;
  background:var(--void);border:1px solid var(--line-lit);color:var(--anno);font-family:var(--mono);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.sb-cell:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.sb-cell:disabled{cursor:default}
.sb-cell[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--void));box-shadow:inset 0 0 0 1px var(--gold)}
.sb-cell.won{border-color:var(--live);color:var(--live);background:color-mix(in srgb,var(--live) 9%,var(--void))}
.sb-cell.missed{border-color:var(--dead);color:var(--dead)}
.sb-face{display:flex;gap:2px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%}
.sb-word{font-size:12px;letter-spacing:.04em;white-space:nowrap}
.sb-cell .p{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-cell[aria-pressed="true"] .p,.sb-cell.won .p{color:inherit}
.sb-sec.pair .sb-face{flex-direction:column;gap:1px}
.sb-sec.pair .sb-cell .p,.sb-sec.total .sb-cell .p{font-size:9px}
.sb-say{height:60px;overflow:hidden;font-size:13px;line-height:1.5;color:var(--anno);border:1px solid var(--line);padding:8px 12px}
.sb-say b{color:var(--text);font-weight:600}
@media(max-width:620px){
  .sb-die.big{width:44px;height:44px;padding:6px;gap:3px}
  .sb-tray{height:58px;gap:8px}
  .sb-sec.total .sb-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .sb-sec.pair .sb-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .sb-sec.pair .sb-face{flex-direction:row}
  .sb-sec.triple .sb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sb-cell{min-height:40px}
  .sb-die{width:13px;height:13px;padding:1px}
  .sb-say{height:80px;font-size:12.5px}
}

/* ===== the wheel (wheel.js): fifty flat wedges. no gradients anywhere on it (the banding rule) ===== */
.tab[data-id="wheel"]{--tc:var(--acq-amber)}
.floor[data-game="wheel"]{--accent:var(--acq-amber)}
.floor[data-game="wheel"] .stage-body{zoom:var(--z,1)}
.table.wheel{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.wh-well{position:relative;width:min(100%,380px);aspect-ratio:1/1;margin:6px auto 0}
.wh-disc{width:100%;height:100%;display:block;overflow:visible}
.wh-rim{transform-origin:0 0;will-change:transform}
.wh-seg{stroke:var(--void);stroke-width:1.2;fill:color-mix(in srgb,var(--line) 70%,var(--void))}
.wh-seg.t1{fill:color-mix(in srgb,var(--accent) 22%,var(--void))}
.wh-seg.t2{fill:color-mix(in srgb,var(--accent) 40%,var(--void))}
.wh-seg.t3{fill:color-mix(in srgb,var(--accent) 62%,var(--void))}
.wh-seg.t4{fill:var(--accent)}
.wh-seg.on{fill:var(--live);stroke:var(--live)}
.wh-txt{font-family:var(--mono);font-size:9.5px;fill:var(--text);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.wh-txt.t3,.wh-txt.t4{fill:var(--void);font-weight:500}
.wh-pointer{position:absolute;left:50%;top:-4px;width:0;height:0;margin-left:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:18px solid var(--text);z-index:2}
.wh-hub{position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(-50%,-50%);border:1px solid var(--line-lit);border-radius:50%;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--mono)}
.wh-hub b{font-size:24px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.wh-hub span{font-size:9.5px;letter-spacing:.16em;color:var(--dim)}
.wh-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;height:62px;overflow:hidden;font-family:var(--mono)}
.wh-legend .k{flex:1 0 100%;text-align:center;font-size:10px;letter-spacing:.14em;color:var(--dim)}
/* five prices in ONE row under the label: they share the width rather than wrapping, because a wrapped
   chip fell outside the legend's fixed height and was cut in half (seen on the medium wheel) */
.wh-chip{display:flex;flex:1 1 0;min-width:0;justify-content:center;gap:6px;align-items:baseline;border:1px solid var(--line-lit);padding:4px 4px;font-size:11.5px;border-left-width:3px;white-space:nowrap;overflow:hidden}
.wh-chip b{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.wh-chip i{font-style:normal;color:var(--dim);font-size:10.5px}
.wh-chip.t0{border-left-color:var(--line-lit)}
.wh-chip.t1{border-left-color:color-mix(in srgb,var(--accent) 40%,var(--void))}
.wh-chip.t2{border-left-color:color-mix(in srgb,var(--accent) 60%,var(--void))}
.wh-chip.t3{border-left-color:color-mix(in srgb,var(--accent) 80%,var(--void))}
.wh-chip.t4{border-left-color:var(--accent)}
@media(max-width:620px){
  .wh-well{width:min(100%,312px)}
  .wh-legend{height:88px;gap:4px}
  .wh-chip{flex:1 1 30%;font-size:10.5px;padding:3px 4px}
  .wh-hub b{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.wh-rim{transition:none!important}}

/* ===== video poker (vpoker.js): five cards you press, and a paytable that lights ===== */
.tab[data-id="vpoker"]{--tc:var(--live)}
.floor[data-game="vpoker"]{--accent:var(--live)}
.floor[data-game="vpoker"] .stage-body{zoom:var(--z,1)}
.table.vpoker{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:12px;--card-w:clamp(52px,16vw,96px)}
.vp-hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;justify-items:center}
.vp-slot{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;padding:0;cursor:pointer;min-width:0}
.vp-slot:disabled{cursor:default}
.vp-spot{width:var(--card-w);height:calc(var(--card-w)*1.4);border:1px dashed var(--line-lit);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,border-color .15s ease}
.vp-spot .card{margin-right:0}
.vp-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--void);background:var(--accent);padding:1px 6px;visibility:hidden}
.vp-slot[aria-pressed="true"] .vp-spot{transform:translateY(-8px);border-color:var(--accent);border-style:solid}
.vp-slot[aria-pressed="true"] .vp-tag,.vp-slot.kept .vp-tag{visibility:visible}
.vp-slot.kept .vp-tag{background:transparent;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line-lit)}
.vp-slot:not(:disabled):hover .vp-spot{border-color:var(--accent)}
.vp-lies{height:44px;overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--anno);border:1px solid var(--line);padding:9px 12px}
.vp-lies b{color:var(--text);font-weight:600}
.vp-pays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-family:var(--mono);font-size:11.5px}
.vp-pay{display:flex;justify-content:space-between;gap:6px;border:1px solid var(--line);padding:5px 8px;color:var(--anno);min-width:0}
.vp-pay .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-pay .x{flex:none;color:var(--text);font-variant-numeric:tabular-nums}
.vp-pay.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--gold)}
.vp-pay.on .x{color:var(--gold)}
/* the plain-words line under each hand WRAPS. .pays cells do not by default, and a sentence in one
   stretched the rules table 400 px past the rail: a page-wide horizontal scrollbar on a wide screen */
.pays.vp-table{table-layout:fixed;width:100%}
.pays.vp-table td:last-child{width:9ch}
.pays.vp-table .vp-d td{font-size:12px;color:var(--dim);padding:0 0 7px;border:0;white-space:normal;text-align:left;width:auto}
@media(max-width:620px){
  .vp-hand{gap:4px}
  .vp-lies{height:64px;font-size:12.5px}
  .vp-pays{grid-template-columns:repeat(2,minmax(0,1fr));font-size:10.5px}
  .vp-pay{padding:4px 6px}
}

/* ===== scratch cards (scratch.js): nine panels under a coating you rub off ===== */
.tab[data-id="scratch"]{--tc:var(--acq-amber)}
.floor[data-game="scratch"]{--accent:var(--acq-amber)}
.floor[data-game="scratch"] .stage-body{zoom:var(--z,1)}
.table.scratch{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sc-card{position:relative;width:min(100%,340px);aspect-ratio:1/1;margin:0 auto;border:1px solid var(--line-lit);background:var(--void)}
.sc-card.live{border-color:var(--accent)}
.sc-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.sc-cell{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);min-width:0;min-height:0;transition:background .3s ease,border-color .3s ease}
.sc-cell svg{width:52%;height:52%}
.sc-cell.hit{background:color-mix(in srgb,var(--gold) 14%,var(--void));border-color:var(--gold)}
.sc-card:not(.live) .sc-cell.open:not(.hit) svg{opacity:.5}
.sc-coat{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .45s ease}
.sc-coat.gone{opacity:0;pointer-events:none}
.sc-card:not(.live) .sc-coat{cursor:default}
.sc-prizes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;font-family:var(--mono)}
.sc-prize{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);padding:5px 2px;min-width:0}
.sc-prize svg{width:22px;height:22px}
.sc-prize b{font-weight:500;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-prize i{font-style:normal;font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sc-prize.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.sc-prize.on b{color:var(--gold)}
@media(max-width:620px){
  .sc-card{width:min(100%,300px)}
  .sc-prizes{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== craps (craps.js): the second shared table. dice, a puck, a board, the people on it ===== */
.tab[data-id="craps"]{--tc:var(--live)}
.floor[data-game="craps"]{--accent:var(--live)}
.floor[data-game="craps"] .stage-body{zoom:var(--z,1)}
.table.craps{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.cr-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"puck tray" "pts tray";gap:8px 14px;align-items:center}
.cr-puck{grid-area:puck;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line-lit);padding:8px 12px;min-width:0;transition:border-color .3s ease,background .3s ease}
.cr-puck b{font-family:var(--mono);font-size:13px;letter-spacing:.12em;font-weight:500;color:var(--text)}
.cr-puck span{font-size:12px;color:var(--anno);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-puck.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.cr-puck.on b{color:var(--gold)}
.cr-points{grid-area:pts;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.cr-pt{text-align:center;font-family:var(--mono);font-size:12px;color:var(--dim);border:1px solid var(--line);padding:4px 0}
.cr-pt.on{color:var(--void);background:var(--gold);border-color:var(--gold)}
.cr-tray{grid-area:tray;display:flex;align-items:center;gap:8px}
.cr-die{display:inline-grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:54px;height:54px;padding:8px;gap:4px;box-sizing:border-box;flex:none;
  border:1px solid var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 6%,var(--void))}
.cr-die i{display:block;border-radius:50%}
.cr-die i.on{background:currentColor}
.cr-tray.rolling .cr-die{border-color:var(--gold)}
.cr-sum{font-family:var(--mono);font-size:30px;font-weight:500;min-width:2ch;text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.cr-status{height:34px;line-height:34px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--mono);font-size:12px;color:var(--anno);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cr-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.cr-bet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:62px;padding:6px 2px;background:var(--void);border:1px solid var(--line-lit);
  color:var(--anno);font-family:var(--mono);cursor:pointer;transition:border-color .15s,background .15s,opacity .15s}
.cr-bet.line{grid-column:span 3;min-height:70px}
.cr-bet .l{font-size:11px;letter-spacing:.08em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cr-bet.line .l{font-size:13px;letter-spacing:.14em}
.cr-bet .p{font-size:10.5px;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-bet .m{font-size:10px;color:var(--gold);height:12px;line-height:12px}
.cr-bet:hover{border-color:var(--accent)}
.cr-bet[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--void));box-shadow:inset 0 0 0 1px var(--accent)}
.cr-bet.mine{border-color:var(--gold)}
.cr-bet.shut{opacity:.45}
.cr-say{height:60px;overflow:hidden;font-size:13px;line-height:1.5;color:var(--anno);border:1px solid var(--line);padding:8px 12px}
.cr-say b{color:var(--text);font-weight:600}
.cr-seats{display:flex;flex-direction:column;height:132px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);font-family:var(--mono);font-size:12px;scrollbar-width:thin;scrollbar-color:var(--line-lit) transparent}
.cr-seats .k{font-size:10px;letter-spacing:.14em;color:var(--dim);padding:7px 12px;border-bottom:1px solid var(--line);flex:none}
.cr-none{padding:10px 12px;color:var(--dim)}
.cr-seat{display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr) 9ch;gap:10px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line);color:var(--anno);flex:none}
.cr-seat:last-child{border-bottom:0}
.cr-seat.you{background:color-mix(in srgb,var(--gold) 7%,transparent);box-shadow:inset 2px 0 0 var(--gold)}
.cr-seat .n{display:flex;align-items:center;gap:7px;min-width:0}
.cr-seat .n b{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-seat .b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-seat .r{text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-seat .r.win{color:var(--live)}.cr-seat .r.loss{color:var(--acq-coral)}
@media(max-width:620px){
  .cr-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"tray" "puck" "pts"}
  .cr-tray{justify-content:center}
  .cr-die{width:46px;height:46px;padding:6px;gap:3px}
  .cr-board{gap:4px}
  .cr-bet:not(.line){grid-column:span 2}
  .cr-bet.line{grid-column:span 3;min-height:58px}
  .cr-bet{min-height:54px}
  .cr-say{height:84px;font-size:12.5px}
  .cr-status{font-size:11px}
  .cr-seat{grid-template-columns:minmax(0,10ch) minmax(0,1fr) 7ch;gap:6px;padding:6px 8px}
}

/* ===== watching, found (watch.js) =====
   the panel sits under THE FLOOR and its rows are people: face, table, name, stake. */
.box.watch{--bc:var(--acq-bone)}
.watch-pick .at{flex:none;font-size:10px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);padding:0 4px}
.watch-pick.on .at{color:var(--anno);border-color:var(--line-lit)}
.watch-pick .nm{flex:1 1 auto}
.watch-note{padding:10px 14px;line-height:1.5}
.watch-title .at{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);padding:1px 5px;margin-left:2px}
.watch-x{margin-left:auto;background:none;border:1px solid var(--line-lit);color:var(--dim);font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;padding:2px 7px;cursor:pointer}
.watch-x:hover,.watch-x:focus-visible{color:var(--text);border-color:var(--accent);outline:none}
.watch-idle{color:var(--dim);font-size:12.5px;line-height:1.5;padding:10px 0}
/* a card the player kept through the draw, once the draw has happened */
.watch-hand .card.kept{box-shadow:0 0 0 1px var(--gold)}
/* the standings offer a watch beside a name that is mid-round */
.st-watch{display:flex;align-items:center;gap:4px;flex:none;background:none;border:1px solid var(--line-lit);color:var(--anno);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:1px 5px;cursor:pointer}
.st-watch .gi{width:11px;height:11px;margin:0;color:var(--live)}
.st-watch:hover,.st-watch:focus-visible{color:var(--text);border-color:var(--live);outline:none}
@media(max-width:620px){.st-watch span:not(.gi){display:none}.watch-pick .at{display:none}}