/* MXC Casino - deep red, gold and black.
   Mobile portrait first; `min-aspect-ratio: 23/20` switches to the wide
   (landscape phone / desktop) layout. Only transform and opacity animate. */
:root{
  --bg:#080304; --bg2:#12060a; --red:#a3122a; --red2:#d21e3a; --deep:#4a0a17;
  --gold:#f4c95d; --gold2:#ffe7a6; --goldd:#b98a2e; --ink:#f7efe0; --mut:#b7a289;
  --line:rgba(244,201,93,.35); --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --serif:Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overscroll-behavior:none;touch-action:manipulation}
body{-webkit-user-select:none;user-select:none;font-synthesis:none}
input{-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-t);background:radial-gradient(120% 60% at 50% 0,#2a0710 0,var(--bg) 60%)}
#view{flex:1;min-height:0;position:relative;overflow:hidden}
#view.view-lobby{overflow-y:auto;-webkit-overflow-scrolling:touch}
.locked{pointer-events:none}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:56px;background:linear-gradient(#1c060b,#0d0406);border-bottom:1px solid var(--line);flex:0 0 auto}
.tb-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.tb-btn.round{width:40px;padding:0;justify-content:center;border-radius:50%}
.tb-btn.acct .uname{max-width:84px;overflow:hidden;text-overflow:ellipsis}
.tb-title{flex:1;min-width:0;text-align:center;font:800 15px var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title .suit{margin-right:6px;opacity:.8}
.bal-pill{position:relative;display:flex;align-items:baseline;gap:5px;min-height:40px;padding:0 14px;align-items:center;border-radius:20px;border:1px solid var(--gold);background:linear-gradient(#2a0c12,#12060a);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset;font-variant-numeric:tabular-nums}
.bal-pill .gem{color:var(--gold)}
.bal-pill b{font-size:18px;color:var(--gold2);min-width:2ch;text-align:right}
.bal-pill em{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--mut)}
.bal-pill.gain{border-color:#7dffb0;box-shadow:0 0 14px rgba(125,255,176,.35)}
.bal-pill.loss{border-color:#ff7a7a}
.bal-delta{position:absolute;right:10px;top:-6px;font:800 14px var(--sans);pointer-events:none;z-index:5;text-shadow:0 1px 3px #000}
.bal-delta.up{color:#7dffb0}.bal-delta.down{color:#ff8a8a}
@media (max-width:520px){.tb-title{display:none}.topbar{gap:6px}.tb-btn span:not(.uname){display:none}.tb-btn{padding:0 10px}.bal-pill{margin-left:auto}}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.04em;text-decoration:none;text-align:center;line-height:1.15}
.btn small{font-size:.74em;font-weight:700;opacity:.8}
.btn.sm{min-height:44px;font-size:14px;padding:0 10px}
.btn.big{min-height:60px;font-size:19px;letter-spacing:.1em}
.btn.primary{background:linear-gradient(#ffdf85,#d9a441);color:#2a1503;border-color:#ffe7a6;box-shadow:0 4px 0 #8a5a16,0 8px 18px rgba(0,0,0,.45)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #8a5a16}
.btn.gold{background:linear-gradient(#3a1017,#22090d);color:var(--gold2);border-color:var(--gold)}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn:disabled,.btn[disabled]{opacity:.38;pointer-events:none;box-shadow:none}
.stack{display:flex;flex-direction:column;gap:10px}
.stack .btn{flex-direction:column;gap:2px}
.stack .btn small{font-weight:600}

/* ---------- sheets / toast ---------- */
#sheetHost{position:fixed;inset:0;z-index:100;display:none}
#sheetHost.open{display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.sheet{position:relative;width:min(100%,470px);max-height:90vh;max-height:90dvh;overflow:auto;background:linear-gradient(#1d070c,#0e0406);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + var(--safe-b));box-shadow:0 -10px 40px rgba(0,0,0,.6)}
@media (min-width:700px){#sheetHost.open{align-items:center}.sheet{border-radius:22px;border-bottom:1px solid var(--line)}}
.sheet h2{margin:0 0 6px;font:800 24px var(--serif);color:var(--gold);letter-spacing:.04em}
.sheet h3{margin:14px 0 4px;color:var(--gold2);font:800 16px var(--serif)}
.sheet .sub{margin:0 0 14px;color:var(--mut);font-size:14px;line-height:1.45}
.sheet .err,.err{color:#ff9a9a;font-size:13px;margin:6px 0}
.sheet .hint{color:var(--mut);font-size:13px;text-align:center}
.sheet .fine,.fine{color:var(--mut);font-size:12px;line-height:1.4}
.help ul{margin:0 0 8px;padding-left:18px;color:var(--ink);font-size:14px;line-height:1.5}
.help b{color:var(--gold2)}
.field{width:100%;min-height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#0b0406;color:var(--ink);font-size:16px}
.room-code-field{text-align:center;letter-spacing:.4em;font-weight:800;text-transform:uppercase}
.room-code{font:900 40px var(--serif);letter-spacing:.3em;color:var(--gold2);text-align:center;margin:6px 0 4px;padding-left:.3em}
.searching{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(244,201,93,.25);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;top:calc(58px + var(--safe-t));left:50%;transform:translate(-50%,-10px);width:max-content;max-width:min(92vw,460px);padding:8px 14px;border-radius:14px;background:#1d070c;border:1px solid var(--gold);color:var(--gold2);font-size:14px;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:120}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- lobby ---------- */
.lobby{max-width:860px;margin:0 auto;padding:14px 16px calc(28px + var(--safe-b));display:flex;flex-direction:column;gap:16px}
.hero{text-align:center;padding:8px 0 0}
.hero-suits{display:flex;justify-content:center;gap:14px;font-size:20px;color:var(--gold);opacity:.85}
.hero-suits .r{color:var(--red2)}
.hero h1{margin:4px 0 6px;font:900 36px var(--serif);letter-spacing:.16em;background:linear-gradient(#fff2c4,#f4c95d 55%,#b98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 auto;max-width:34ch;color:var(--mut);font-size:14px;line-height:1.45}
.notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.4}
.notice.info{background:rgba(244,201,93,.08);border:1px solid var(--line)}
.notice.warn{background:rgba(210,30,58,.14);border:1px solid rgba(255,122,122,.5);color:#ffc9c9}
.notice .btn{flex:0 0 auto}
.game-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){.game-cards{grid-template-columns:1fr 1fr}}
.game-card{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;border-radius:22px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(#22090f,#12060a);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.game-card:active{transform:scale(.985)}
.gc-art{height:140px;display:grid;place-items:center;background:radial-gradient(90% 120% at 50% 100%,#7a0f24,#2a0710 70%);position:relative}
.gc-body{padding:14px 16px 62px}
.gc-body h2{margin:0 0 4px;font:800 24px var(--serif);color:var(--gold)}
.gc-body p{margin:0 0 10px;color:var(--mut);font-size:14px;line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{padding:3px 9px;border-radius:10px;border:1px solid var(--line);font-size:11px;color:var(--gold2);letter-spacing:.04em}
.gc-go{position:absolute;right:14px;bottom:14px;min-height:40px;padding:0 22px;display:flex;align-items:center;border-radius:12px;background:linear-gradient(#ffdf85,#d9a441);color:#2a1503;font-weight:900;letter-spacing:.12em;font-size:14px}
.fan{position:relative;width:130px;height:110px}
.mini-card{position:absolute;left:50%;top:6px;width:66px;height:92px;margin-left:-33px;border-radius:9px;background:#fbf6ea;color:#14101a;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.5);font-family:var(--serif)}
.mini-card i{font:800 26px/1 var(--serif);font-style:normal}.mini-card b{font-size:28px;line-height:1}
.mini-card.red{color:#c8102e}
.mini-card.a{transform:translateX(-24px) rotate(-11deg)}.mini-card.b{transform:translateX(24px) rotate(9deg)}
.mini-wheel{width:118px;height:118px;transform:perspective(480px) rotateX(38deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.mini-wheel svg{width:100%;height:100%;animation:spin 26s linear infinite}
.lobby-extras{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:520px){.lobby-extras{grid-template-columns:1fr 1fr}}
.lobby-extras .btn{min-height:48px}

/* ---------- shared game layout ---------- */
.game{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;isolation:isolate}
.dock{background:linear-gradient(#170609,#090304);border-top:1px solid var(--line);padding:10px 12px calc(10px + var(--safe-b));display:flex;flex-direction:column;gap:8px;min-height:190px;justify-content:flex-end}
.dock-msg{text-align:center;color:var(--gold2);font-size:14px;font-weight:600;min-height:20px;line-height:1.3}
.dock-msg.warn{color:#ff9a9a}
.dock-row{display:flex;gap:8px}.dock-row .btn{flex:1}
.dock-wait{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center;flex:1;text-align:center}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1s infinite ease-in-out both}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}

/* chips */
.chip{--sz:34px;--cb:#b3122b;--ct:#fff;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center;background:var(--cb);color:var(--ct);border:3px dashed rgba(255,255,255,.88);box-shadow:inset 0 0 0 2px var(--cb),inset 0 0 0 3px rgba(255,255,255,.55),0 2px 3px rgba(0,0,0,.55);font:800 calc(var(--sz)*.3)/1 var(--sans)}
.c0{--cb:#b3122b;--ct:#fff;--ce:#5e0714}.c1{--cb:#0f7a4a;--ct:#fff;--ce:#053a22}.c2{--cb:#1a1a22;--ct:#f4c95d;--ce:#000}.c3{--cb:#5b2a86;--ct:#fff;--ce:#2c1245}.c4{--cb:#d9a441;--ct:#1b1206;--ce:#7a5518}
.chip-rack{display:flex;justify-content:center;gap:8px}
.chip-btn{--sz:56px;padding:0;transition:transform .15s,opacity .15s;touch-action:manipulation}
.chip-btn:active{transform:scale(.92)}
.chip-btn.selected{transform:translateY(-6px) scale(1.1);box-shadow:inset 0 0 0 2px var(--cb),inset 0 0 0 3px rgba(255,255,255,.55),0 0 0 3px var(--gold),0 6px 12px rgba(0,0,0,.6)}
.chip-btn.disabled{opacity:.3}

/* ---------- blackjack ----------
   Depth without WebGL: a lit back wall and dealer (.room), a padded rail, and
   a felt plane tilted in CSS 3D (.felt3d) - all static, painted once. Cards,
   chips and badges sit flat on top so they stay crisp and readable.
   Sizes follow the table itself (container units), with a dvh fallback. */
.game.bj{--cw0:clamp(44px,min(16vw,10dvh),92px);--roomH:clamp(56px,13dvh,150px)}
@supports (width:1cqh){
  .table{container-type:size}
  .game.bj .table{--cw0:clamp(40px,min(20cqw,12.6cqh),110px);--roomH:clamp(52px,19cqh,190px)}
}
.table{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 8px 4px;overflow:hidden;
  background:#3e0814;box-shadow:inset 0 0 0 3px #12060a,inset 0 0 0 4px var(--goldd)}
.table>*{position:relative;z-index:3}
.table::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(55% 38% at 50% 42%,rgba(255,214,160,.14),transparent 72%),radial-gradient(130% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.6))}
.table>.room{position:absolute;z-index:2;left:0;right:0;top:0;height:var(--roomH);pointer-events:none;
  background:radial-gradient(46% 100% at 50% 100%,rgba(255,196,110,.34),transparent 75%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 5px,rgba(255,255,255,.04) 9px 13px,rgba(0,0,0,.28) 17px 22px),
    linear-gradient(#0c0203,#2e0510 58%,#5c0b1c)}
.beam{position:absolute;top:0;bottom:0;width:7%;overflow:hidden;background:linear-gradient(rgba(255,70,95,0),rgba(255,70,95,.5) 65%,rgba(255,150,130,.85));opacity:.8}
.beam.l{left:13%}.beam.r{right:13%}
.dealer-fig{position:absolute;left:50%;bottom:-9px;height:calc(100% + 4px);aspect-ratio:200/140;transform:translateX(-50%);filter:drop-shadow(0 0 12px rgba(255,190,110,.28))}
.table>.rail{position:absolute;z-index:1;left:-3%;right:-3%;top:calc(var(--roomH) - 2px);height:16px;pointer-events:none;
  background:linear-gradient(#43121b,#12040a 55%,#260a11);border-top:1px solid rgba(255,231,166,.4);border-bottom:2px solid var(--goldd);
  border-radius:0 0 50% 50%/0 0 70% 70%;box-shadow:0 10px 18px rgba(0,0,0,.55)}
.plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 7px var(--sans);font-style:normal;letter-spacing:.34em;color:var(--gold);padding:1px 6px 1px 8px;border:1px solid rgba(244,201,93,.5);border-radius:3px;background:#0b0305}
.table>.felt3d{position:absolute;z-index:0;left:-150%;right:-150%;top:var(--roomH);bottom:0;perspective:560px;perspective-origin:50% 0;overflow:hidden;pointer-events:none}
.felt-plane{position:absolute;left:0;right:0;bottom:0;height:320%;transform-origin:50% 100%;transform:rotateX(62deg);
  background:radial-gradient(circle,rgba(244,201,93,.16) 1.4px,transparent 2px) 0 0/28px 28px,
    radial-gradient(60% 40% at 50% 80%,#921632 0,#5e0c1f 55%,#300712 100%)}
.table>.shoe,.table>.discard{position:absolute;top:calc(var(--roomH) - var(--cw0)*.5);width:calc(var(--cw0)*.66);height:calc(var(--cw0)*.9);pointer-events:none}
.table>.shoe{right:5%;transform:rotate(-9deg)}
.table>.discard{left:5%;transform:rotate(7deg)}
.shoe i,.discard i{position:absolute;inset:0;border-radius:5px;background:repeating-linear-gradient(45deg,#8a1029 0 4px,#5c0716 4px 8px);border:2px solid #fbf6ea;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.shoe i:nth-child(1){transform:translate(4px,-4px)}.shoe i:nth-child(2){transform:translate(2px,-2px)}
.discard i:nth-child(1){transform:rotate(-6deg)}
.shoe::after,.discard::after{content:"";position:absolute;inset:-5px -6px -4px;border-radius:7px;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.12));box-shadow:0 6px 10px rgba(0,0,0,.45)}
.zone.dealer{margin-top:calc(var(--roomH) + 14px)}
.zone.dealer .cards{--hs:.84}
.felt-arc{width:min(96%,500px);height:auto;margin:-2px 0;flex:0 0 auto}
.zone{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.zone-head{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px}
.zone-name{padding:3px 11px;border-radius:12px;background:rgba(8,2,4,.62);border:1px solid rgba(244,201,93,.3);font:700 12px/16px var(--sans);letter-spacing:.03em;color:var(--ink)}
.badge{min-width:34px;padding:2px 10px;border-radius:12px;background:rgba(0,0,0,.6);border:1px solid rgba(244,201,93,.55);color:#fff;font:800 13px/18px var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.badge[hidden]{display:none}
.badge.bust{background:#8f0d20;border-color:#ff8a8a}
.badge.gold,.badge.win{background:#3a2a07;border-color:var(--gold);color:var(--gold2)}
.badge.bj{background:linear-gradient(#ffdf85,#d9a441);color:#2a1503;border-color:#fff2c4}
.badge.push{background:#2b2b34;border-color:#c9c9d6;color:#e8e8f2}
.cards{--cw:calc(var(--cw0)*var(--hs,1));position:relative;width:100%;height:calc(var(--cw)*1.42)}
.cards.mini{--hs:.55}
.card{position:absolute;left:50%;top:0;width:var(--cw);height:calc(var(--cw)*1.42);margin-left:calc(var(--cw)/-2);perspective:700px;transition:transform .34s cubic-bezier(.3,.8,.3,1);will-change:transform}
.cf{position:absolute;inset:0;transform-style:preserve-3d}
.card.down .cf{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:calc(var(--cw)*.1);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 3px 8px rgba(0,0,0,.55)}
.front{background:linear-gradient(#fffdf6,#f3ead4)}
.back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#8a1029 0 5px,#5c0716 5px 10px);border:calc(var(--cw)*.05) solid #fbf6ea}
.back::after{content:"\2726";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:calc(var(--cw)*.42);text-shadow:0 0 6px rgba(0,0,0,.6)}
.cr{position:absolute;inset:0;color:#14101a;font-family:var(--serif)}
.cr.red{color:#c8102e}
.cr i{font-style:normal;position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-weight:800}
.cr .tl{left:9%;top:5%;font-size:calc(var(--cw)*.27)}
.cr .br{right:9%;bottom:5%;font-size:calc(var(--cw)*.27);transform:rotate(180deg)}
.cr .tl b,.cr .br b{font-size:.78em;font-weight:700}
.cr .pip{left:0;right:0;top:50%;margin-top:calc(var(--cw)*-.25);align-items:center;font-size:calc(var(--cw)*.5)}
.table>.opp{position:absolute;left:8px;top:calc(var(--roomH) + 36%);width:32%;display:flex;flex-direction:column;align-items:center;gap:2px}.table>.opp[hidden]{display:none}
.hands{display:flex;justify-content:center;gap:6px;width:100%}
.hand{flex:1;min-width:0;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .25s}
.hand.idle{opacity:.5}
.hand.active .zone-name{color:#fff;border-color:var(--gold)}
.hand.active{filter:drop-shadow(0 0 10px rgba(244,201,93,.55))}
.hands[data-n="2"] .cards{--hs:.92}.hands[data-n="3"] .cards,.hands[data-n="4"] .cards{--hs:.74}
.bet-spot{position:relative;width:100%;height:70px}
.bet-spot .ring{position:absolute;left:50%;top:50%;width:96px;height:46px;margin:-23px 0 0 -48px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(244,201,93,.8);background:radial-gradient(closest-side,rgba(0,0,0,.32),rgba(0,0,0,.08));box-shadow:0 0 0 5px rgba(0,0,0,.22),inset 0 0 12px rgba(244,201,93,.2)}
.bet-spot .ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 18px 3px rgba(244,201,93,.5);opacity:0}
.bet-spot.empty .ring::after{animation:ringGlow 1.8s ease-in-out infinite alternate}
@keyframes ringGlow{to{opacity:1}}
.bet-spot .ring span{font:800 10px var(--sans);letter-spacing:.26em;padding-left:.26em;color:rgba(244,201,93,.85)}
.bet-spot:not(.empty) .ring span{opacity:0}
.chipstack{position:absolute;left:50%;top:calc(50% + 3px);width:0;height:0}
.chipstack .col{position:absolute;left:0;top:0;transform:translateX(calc(var(--x)*34px))}
.pc{position:absolute;left:-17px;top:calc(var(--i,0)*-4.5px - 17px);width:34px;height:34px}
.pc .chip{transform:scaleY(.62);box-shadow:inset 0 0 0 2px var(--cb),inset 0 0 0 3px rgba(255,255,255,.55),0 5px 0 var(--ce,#000),0 8px 6px rgba(0,0,0,.5)}
.chipstack.payout{left:calc(50% + 62px)}
.bet-spot.paid .chipstack:not(.payout){left:calc(50% - 36px)}
.bet-spot.paid .bet-amt{opacity:0}
.bet-amt{position:absolute;right:calc(50% + 56px);top:50%;margin-top:-9px;text-align:right;font:800 13px var(--sans);color:var(--gold2);text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.banner-wrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:30}
.banner{position:relative;min-width:200px;max-width:88%;padding:14px 26px;border-radius:18px;text-align:center;background:rgba(10,3,5,.94);border:2px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.7)}
.banner[hidden]{display:none}
.bn-title{font:900 30px var(--serif);letter-spacing:.06em;color:var(--gold2);line-height:1.1}
.bn-sub{margin-top:4px;font-size:14px;font-weight:700;color:var(--ink)}
.banner.blackjack{background:linear-gradient(#ffdf85,#d9a441);border-color:#fff2c4}
.banner.blackjack .bn-title,.banner.blackjack .bn-sub{color:#2a1503}
.banner.win{box-shadow:0 0 34px rgba(244,201,93,.5),0 10px 34px rgba(0,0,0,.7)}
.banner.push{border-color:#c9c9d6}.banner.push .bn-title{color:#e8e8f2}
.banner.lose{border-color:#8f2a35}.banner.lose .bn-title{color:#ff9a9a}
.spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);pointer-events:none}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{flex-direction:column;gap:1px;min-height:52px}
.act b{font-size:16px;letter-spacing:.1em}.act small{font-size:11px;opacity:.9;font-weight:600}
.act.hit,.act.stand{min-height:66px}
.act.hit{background:linear-gradient(#e8283f,#a30f24);border-color:#ff9aa8;color:#fff;box-shadow:0 4px 0 #5e0714}
.act.stand{background:linear-gradient(#ffdf85,#d9a441);color:#2a1503;border-color:#ffe7a6;box-shadow:0 4px 0 #8a5a16}
.act.alt{background:rgba(244,201,93,.08);border-color:var(--gold);color:var(--gold2)}
.act-grid.two .dbl{grid-column:1/-1}
.dock-row.three .btn{flex:1}
.tip-chip{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;border:1px solid rgba(244,201,93,.45);font-size:11px;font-weight:700;color:var(--gold);vertical-align:1px}
.act.suggest{outline:2px solid rgba(255,231,166,.9);outline-offset:2px}
.kbd-hint{display:none}
@media (hover:hover) and (pointer:fine){.kbd-hint{display:block;text-align:center;font-size:11px;color:var(--mut)}}

/* ---------- roulette ---------- */
.game.rl{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "board" "dock"}
.rl-top{grid-area:top;display:flex;gap:12px;align-items:center;padding:8px 12px;background:linear-gradient(#1a070c,#0d0406);border-bottom:1px solid var(--line);position:relative;z-index:6}
.wheel-stage{flex:0 0 auto}
.wheel-wrap{--ws:clamp(104px,30vw,140px);position:relative;width:var(--ws);height:var(--ws);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wheel-wrap{will-change:transform}
.wheel-wrap.zoomed{z-index:20}
.wheel-tilt{position:absolute;inset:0;transform:perspective(calc(var(--ws)*4)) rotateX(32deg)}
.bowl{position:absolute;inset:-5%;border-radius:50%;background:radial-gradient(circle,#1a0507 62%,#6a3514 67%,#b07a36 70%,#5a2c10 74%,#2a0d06 86%,#140405 100%);box-shadow:0 22px 26px rgba(0,0,0,.75)}
.wheel,.ball-wrap{position:absolute;inset:0;will-change:transform}
.wheel svg{display:block;width:100%;height:100%}
.ball-wrap{pointer-events:none}
.ball{position:absolute;left:50%;top:3.2%;width:6.2%;height:6.2%;margin-left:-3.1%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d6d6d6 55%,#8c8c8c);box-shadow:0 1px 3px rgba(0,0,0,.8);will-change:transform}
.wheel-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:34%;border-radius:50%;display:grid;place-items:center;font:900 calc(var(--ws)*.15) var(--serif);color:#fff;border:2px solid var(--gold);box-shadow:0 0 14px rgba(0,0,0,.7);z-index:3}
.wheel-result[hidden]{display:none}
.wheel-result.red,.rn.red{background:#b3122b}.wheel-result.black,.rn.black{background:#15121a}.wheel-result.green,.rn.green{background:#0f7a4a}
.rl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hist{display:flex;flex-wrap:wrap;gap:4px;min-height:22px;align-items:center}
.hn{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 10px var(--sans);color:#fff;border:1px solid rgba(244,201,93,.5)}
.hn.red{background:#b3122b}.hn.black{background:#15121a}.hn.green{background:#0f7a4a}
.hist .hint{font-size:12px;color:var(--mut)}
.tip{font-size:13px;font-weight:600;color:var(--gold2);line-height:1.3;min-height:34px}
.tip.warn{color:#ff9a9a}
.legend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:var(--mut)}
.legend b{color:var(--gold2)}
.tot{font-size:13px;color:var(--mut)}.tot b{color:var(--gold2)}
.board-area{grid-area:board;position:relative;padding:8px 10px;overflow:auto;min-height:0;transition:opacity .3s}
.board-area.spin .board{opacity:.28;pointer-events:none}
.board{display:grid;gap:3px;height:100%;min-height:440px;transition:opacity .3s;will-change:opacity;
  grid-template-columns:minmax(38px,.85fr) minmax(38px,.85fr) repeat(3,minmax(0,2fr));
  grid-template-rows:minmax(34px,1.1fr) repeat(12,minmax(30px,1fr)) minmax(34px,1fr)}
.cell{position:relative;grid-row:var(--r)/span var(--rs);grid-column:var(--c)/span var(--cs);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(244,201,93,.5);color:#fff;font:800 15px var(--sans);cursor:pointer;background:rgba(255,255,255,.04)}
.cell:active{filter:brightness(1.3)}
.cell.red{background:#b3122b}.cell.black{background:#17141a}.cell.zero{background:#0f7a4a}
.cell.out{font-size:12px;letter-spacing:.06em;color:var(--gold2)}
.cell.out small{font-size:10px;color:var(--mut);font-weight:700}
.cell.dz,.cell.em{flex-direction:row;gap:3px}
.cell.dz span,.cell.dz small,.cell.em span,.cell.em small{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.dia{display:inline-block;width:14px;height:14px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.7)}
.dia.red{background:#b3122b}.dia.black{background:#17141a}
.cell.cover{outline:2px solid var(--gold);outline-offset:-2px;background-image:linear-gradient(rgba(244,201,93,.28),rgba(244,201,93,.28))}
.cell.win::after{content:"";position:absolute;inset:-2px;border:3px solid var(--gold);border-radius:8px;pointer-events:none;animation:winPulse .9s ease-in-out infinite alternate;z-index:3}
@keyframes winPulse{from{opacity:.35}to{opacity:1}}
.hs{position:absolute;z-index:3;border-radius:4px}
.hs.a{right:-8px;top:16%;width:16px;height:68%}
.hs.b{left:16%;bottom:-6px;width:68%;height:12px}
.hs.z{left:16%;top:-6px;width:68%;height:12px}
.hs:hover,.hs:active{background:rgba(244,201,93,.45)}
.mk{--cb:#b3122b;--ct:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cb);color:var(--ct);border:2px dashed rgba(255,255,255,.88);box-shadow:0 2px 4px rgba(0,0,0,.65);font:800 10px/1 var(--sans);z-index:4;pointer-events:none}
.result-card{position:absolute;inset:8px 10px;z-index:10;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:#0c0407;border:2px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.7)}
.result-card[hidden]{display:none}
.rc-head{display:flex;align-items:center;gap:12px}
.rc-head b{display:block;font:800 20px var(--serif);color:var(--gold2)}.rc-head small{color:var(--mut);font-size:12px}
.rn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font:900 24px var(--serif);color:#fff;border:2px solid var(--gold)}
.rc-rows{display:flex;flex-direction:column;gap:4px;font-size:13px}
.rrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04)}
.rrow.win{background:rgba(125,255,176,.1)}.rrow.win b{color:#7dffb0}.rrow.lose b{color:#ff9a9a}
.rc-total{font-size:15px;text-align:center}.rc-total b{font-size:22px;font-family:var(--serif)}
.rc-total.up b{color:#7dffb0}.rc-total.down b{color:#ff9a9a}.rc-total small{display:block;margin-top:4px}
.dock-row.four .btn{flex:1;padding:0 4px}

/* ---------- wide layout: landscape phones and desktop ---------- */
@media (min-aspect-ratio:23/20){
  .game.bj{--cw0:clamp(40px,min(10vw,14dvh),104px);--roomH:clamp(48px,15dvh,170px);grid-template-columns:minmax(0,1fr) clamp(280px,30vw,380px);grid-template-rows:minmax(0,1fr)}
  .game .dock{border-top:0;border-left:1px solid var(--line);min-height:0;overflow:auto;justify-content:center;padding-bottom:calc(10px + var(--safe-b))}
  .chip-rack{flex-wrap:wrap}
  .chip-btn{--sz:48px}
  .btn.big{min-height:52px}
  .act.hit,.act.stand{min-height:58px}
  .bn-title{font-size:26px}
  .game.rl{grid-template-columns:minmax(260px,34%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top board" "dock board"}
  .rl-top{border-bottom:0;padding:8px 10px 4px}
  .wheel-wrap{--ws:clamp(96px,26dvh,150px)}
  .legend{display:none}
  .board-area{padding:8px}
  .board{min-height:0;grid-template-columns:minmax(26px,.8fr) repeat(12,minmax(0,1fr)) minmax(30px,.9fr);grid-template-rows:repeat(3,1.35fr) 1fr 1fr}
  .cell{grid-row:var(--lr)/span var(--lrs);grid-column:var(--lc)/span var(--lcs)}
  .cell.dz span,.cell.dz small,.cell.em span,.cell.em small{writing-mode:horizontal-tb;transform:none}
  .cell.out{flex-direction:row;gap:5px}
  .hs.a{right:auto;left:16%;top:-8px;width:68%;height:16px}
  .hs.b{left:auto;bottom:auto;right:-8px;top:16%;width:16px;height:68%}
  .hs.z{left:-8px;top:16%;width:16px;height:68%}
}
@supports (width:1cqh){@media (min-aspect-ratio:23/20){
  .game.bj .table{--cw0:clamp(36px,min(14cqw,12.5cqh),110px);--roomH:clamp(46px,17cqh,180px)}
  .felt-arc{position:absolute;top:calc(var(--roomH) + 10%);left:50%;width:min(84%,520px);margin:0 0 0 max(-42%,-260px);z-index:1}
}}
@media (min-aspect-ratio:23/20) and (min-height:521px){
  .game.rl .rl-top{flex-direction:column;align-items:stretch}
  .game.rl .wheel-stage{display:flex;justify-content:center}
  .wheel-wrap{--ws:clamp(140px,min(22vw,36dvh),280px)}
  .legend{display:flex}
  .chip-btn{--sz:54px}
}
@media (min-aspect-ratio:23/20) and (max-height:520px){
  .felt-arc{display:none}
  .zone-head{min-height:20px}
  .tip{min-height:0;font-size:12px}
  .rl-info{gap:4px}
  .game .dock{gap:6px;padding:8px}
  .chip-rack{flex-wrap:nowrap;gap:6px}.chip-btn{--sz:40px}
  .bet-spot{height:56px}.bet-spot .ring{width:80px;height:38px;margin:-19px 0 0 -40px}.bet-amt{font-size:12px;right:calc(50% + 48px)}.zone-name{font-size:11px;padding:2px 9px}
  .zone.dealer{margin-top:calc(var(--roomH) + 10px)}
  .btn{min-height:44px}.btn.big{min-height:48px;font-size:17px}
}
@media (max-height:700px) and (max-aspect-ratio:23/20){
  .game .dock{min-height:0}
  .bet-spot{height:62px}
  .chip-btn{--sz:50px}
  .btn.big{min-height:52px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .mini-wheel svg{animation:none!important}
}

/* ---------- v3.0: the 3D casino room ---------- */
#roomHost{position:relative;flex:1;min-height:0;overflow:hidden;background:#05020a}
#roomHost[hidden]{display:none}
#roomCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#rmTouch{position:absolute;inset:0;touch-action:none;-webkit-touch-callout:none}
.rm-ui{position:absolute;inset:0;pointer-events:none;z-index:3}
.rm-ui button,.rm-ui .rm-panel,.rm-ui .rm-invite{pointer-events:auto}
.rm-top{position:absolute;top:10px;left:10px;display:flex;gap:8px}
.rm-pill{min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--line);background:rgba(14,4,8,.78);color:var(--gold2);font:700 13px var(--sans);letter-spacing:.04em;backdrop-filter:blur(4px)}
.rm-pill:active{transform:scale(.96)}
.rm-prompt{position:absolute;left:50%;bottom:calc(26px + var(--safe-b));transform:translateX(-50%);min-height:56px;padding:8px 22px;border-radius:28px;border:2px solid var(--gold);background:linear-gradient(#3a1017,#1d070c);color:var(--gold2);font:800 16px var(--serif);text-align:center;box-shadow:0 0 22px rgba(244,201,93,.45),0 6px 18px #000;animation:rmPulse 1.6s ease-in-out infinite;max-width:92vw}
.rm-prompt[hidden]{display:none}
.rm-prompt small{display:block;font:600 12px var(--sans);color:var(--mut);margin-top:2px}
.rm-prompt.off{opacity:.7;animation:none;border-color:var(--line)}
@keyframes rmPulse{50%{box-shadow:0 0 34px rgba(244,201,93,.8),0 6px 18px #000}}
.rm-hint{position:absolute;left:0;right:0;bottom:calc(4px + var(--safe-b));text-align:center;font:600 11px var(--sans);color:rgba(255,231,166,.5);pointer-events:none}
@media (pointer:coarse){.rm-hint{display:none}}
.rm-ui.seated .rm-hint{display:none}
.rm-stick{position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid rgba(244,201,93,.55);background:rgba(244,201,93,.08);display:none;pointer-events:none}
.rm-stick.on{display:block}
.rm-stick i{position:absolute;left:34px;top:34px;width:44px;height:44px;border-radius:50%;background:rgba(244,201,93,.55);border:2px solid var(--gold)}
.rm-panel{position:absolute;top:56px;left:10px;width:min(300px,86vw);max-height:60%;overflow:auto;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(14,4,8,.94);color:var(--ink)}
.rm-ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:800 16px var(--serif);color:var(--gold)}
.rm-x{width:32px;height:32px;border-radius:16px;border:1px solid var(--line);background:none;color:var(--gold2);font-size:20px;line-height:1}
.rm-fr{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(244,201,93,.15);font-size:14px}
.rm-fr i{width:9px;height:9px;border-radius:50%;background:#555;flex:none}
.rm-fr i.on{background:#22e58a;box-shadow:0 0 8px #22e58a}
.rm-fr b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold2)}
.rm-fr span{font-size:11px;color:var(--mut)}
.rm-sec{margin:10px 0 2px;font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.rm-link{margin-top:10px;width:100%}
.rm-invite{position:absolute;top:56px;right:10px;width:min(280px,80vw);padding:12px 14px;border-radius:16px;border:2px solid var(--gold);background:rgba(14,4,8,.95);color:var(--ink);font-size:14px;box-shadow:0 0 22px rgba(244,201,93,.4)}
.rm-invite[hidden],.rm-panel[hidden]{display:none}
.rm-invite div{display:flex;gap:8px;margin-top:10px}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:12px}
.rm-f{display:flex;flex-direction:column;gap:4px;margin:10px 0;color:var(--mut);font-size:13px}
.rm-f input[type=text],.rm-f input:not([type]),.rm-f select{min-height:42px;border-radius:10px;border:1px solid var(--line);background:#12060a;color:var(--ink);padding:0 10px;font-size:15px;user-select:text}
.rm-f.row{flex-direction:row;align-items:center;gap:8px}

/* ---------- the multiplayer table panel ---------- */
.tb-ui{position:absolute;left:0;right:0;bottom:0;z-index:4;max-height:62%;display:flex;flex-direction:column;background:linear-gradient(rgba(14,4,8,.82),rgba(8,2,5,.97));border-top:2px solid var(--gold);box-shadow:0 -10px 30px rgba(0,0,0,.6);padding:8px 10px calc(10px + var(--safe-b))}
.tb-ui[hidden]{display:none}
.tb-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tb-head>div:first-child{flex:1;min-width:0}
.tb-head b{display:block;font:800 17px var(--serif);color:var(--gold)}
.tb-head span{font-size:12px;color:var(--mut)}
.tb-ph{font:700 12px var(--sans);color:var(--gold2);letter-spacing:.06em;white-space:nowrap}
.tb-felt{padding:4px 0;display:flex;flex-direction:column;gap:8px}
.tb-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.tb-dealer{display:flex;align-items:center;gap:10px;justify-content:center}
.tb-seats{display:flex;gap:4px;justify-content:center;min-width:max-content;margin:0 auto}
.tb-seat{width:76px;min-height:104px;padding:5px 4px;border-radius:12px;border:1px solid rgba(244,201,93,.22);background:rgba(10,60,30,.35);text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.tb-seat.empty{opacity:.4;justify-content:center;font-size:12px;color:var(--mut)}
.tb-seat.me{border-color:var(--gold);background:rgba(244,201,93,.1)}
.tb-seat.turn{box-shadow:0 0 14px var(--gold);border-color:var(--gold2)}
.tb-nm{font:700 11px var(--sans);color:var(--gold2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-cards{display:flex;justify-content:center;min-height:42px}
.tb-none{color:var(--mut);align-self:center}
.tcard{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:30px;height:42px;margin-left:-12px;border-radius:5px;background:#fbf7ee;color:#15110f;border:1px solid #cfc6b4;box-shadow:0 2px 4px rgba(0,0,0,.5);font:800 13px var(--sans);line-height:1;animation:pcIn .28s ease both;animation-delay:calc(var(--i) * 60ms)}
.tcard:first-child{margin-left:0}
.tcard.red{color:#c4202f}
.tcard i{font-style:normal;font-size:14px}
.tcard.back{background:repeating-linear-gradient(45deg,#7a1124 0 4px,#4a0a17 4px 8px);border-color:var(--gold)}
@keyframes pcIn{from{opacity:0}to{opacity:1}}
.tb-tot{font:800 14px var(--sans);color:var(--ink);min-height:18px}
.tb-tot em{font-style:normal;font-size:10px;padding:1px 5px;border-radius:7px;background:#444;color:#fff;margin-left:3px}
.tb-tot em.win,.tb-tot em.blackjack{background:#1f9d57}.tb-tot em.lose,.tb-tot em.bust{background:#b3202f}.tb-tot em.push{background:#777}
.tb-stk{display:flex;gap:4px;align-items:center;justify-content:center;min-height:20px;flex-wrap:wrap}
.tchip{display:inline-block;min-width:26px;padding:2px 7px;border-radius:12px;background:radial-gradient(#ffe7a6,#d9ab3f);color:#2a1604;font:800 11px var(--sans);border:2px dashed rgba(42,22,4,.5)}
.tchip.big{font-size:18px;padding:4px 14px;border-radius:18px}
.tpay{font:800 12px var(--sans)}.tpay.up{color:#4ade80}.tpay.dn{color:#ff7b7b}
.tb-ctl{padding-top:6px}
.tb-bet{display:flex;flex-direction:column;gap:8px;align-items:center}
.tb-want{display:flex;align-items:center;gap:10px;min-height:32px}
.tb-hint,.tb-note,.tb-msg{color:var(--mut);font-size:12.5px;text-align:center;margin:0}
.tb-placed{font-size:12px;color:var(--gold2)}
.tb-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tcbtn{width:52px;height:52px;border-radius:50%;border:3px dashed rgba(255,255,255,.55);background:radial-gradient(#c4202f,#7a1124);color:#fff;font:800 14px var(--sans);box-shadow:0 3px 8px #000}
.tcbtn:nth-child(2){background:radial-gradient(#1e88e5,#0d47a1)}.tcbtn:nth-child(3){background:radial-gradient(#444,#111)}.tcbtn:nth-child(4){background:radial-gradient(#43a047,#1b5e20)}.tcbtn:nth-child(5){background:radial-gradient(#f4c95d,#a8791a);color:#2a1604}
.tcbtn:active{transform:scale(.92)}
.tb-row,.tb-act{display:flex;gap:8px;justify-content:center;align-items:center}
.tb-act .btn{flex:1;max-width:130px}
.tb-result{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;border-radius:14px;border:1px solid var(--line)}
.tb-result b{font:800 22px var(--serif);color:var(--gold2)}
.tb-result.up b{color:#4ade80}.tb-result.dn b{color:#ff9b9b}
.tb-result span{font-size:14px}
@media (max-width:520px){.rm-top{top:8px}.tb-ui{max-height:66%}}
/* a wide, short screen: the table panel is a column on the right and the room shifts left */
@media (orientation:landscape) and (max-height:560px){
  .tb-ui{left:auto;top:0;right:0;bottom:0;width:min(440px,54vw);max-height:none;border-top:0;border-left:2px solid var(--gold);overflow:auto;padding-top:calc(8px + var(--safe-t))}
  .tb-seat{width:66px}.tcard{width:27px;height:38px}
  .rm-ui.seated .rm-top{left:10px}
}

/* ---------- side bets (21+3, Perfect Pairs) and the betting dock ---------- */
.sides{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:2px;contain:layout style}
.sides[hidden]{display:none}
.side-spot{position:relative;width:104px;height:50px;padding:0;border-radius:50%/50%;border:1.5px solid rgba(244,201,93,.55);background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,.1));color:var(--gold2);cursor:pointer;touch-action:manipulation;transition:border-color .15s,box-shadow .15s}
.side-spot .sp-name{position:absolute;left:0;right:0;top:50%;margin-top:-7px;text-align:center;font:800 10px var(--sans);letter-spacing:.2em;color:rgba(244,201,93,.85)}
.side-spot:not(.empty) .sp-name{top:2px;margin-top:0;font-size:8px;opacity:.8}
.side-spot.target{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(244,201,93,.35),0 0 14px rgba(244,201,93,.45)}
.bet-spot.target .ring{border-color:var(--gold2);box-shadow:0 0 0 5px rgba(244,201,93,.28),0 0 14px rgba(244,201,93,.45)}
.side-spot .chipstack{top:calc(50% + 8px);transform:scale(.62);transform-origin:0 0}
.side-spot .sp-amt{position:absolute;left:calc(100% - 6px);top:50%;margin-top:-8px;font:800 11px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}
.side-spot:nth-of-type(1) .sp-amt{left:auto;right:calc(100% - 6px)}
.side-spot .sp-res{position:absolute;left:50%;top:-16px;transform:translateX(-50%);white-space:nowrap;font:900 10px var(--sans);letter-spacing:.08em;padding:2px 8px;border-radius:9px;background:rgba(10,3,5,.92);border:1px solid var(--line);color:var(--mut);pointer-events:none}
.side-spot .sp-res:empty{display:none}
.side-spot.win{border-color:#7dffb0;box-shadow:0 0 16px rgba(125,255,176,.55)}
.side-spot.win .sp-res{color:#7dffb0;border-color:#7dffb0}
.side-spot.lose{opacity:.75}
.side-info{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.4);color:var(--gold2);font:800 13px var(--serif);font-style:italic;padding:0;touch-action:manipulation}
.pay-table{width:100%;border-collapse:collapse;font-size:14px;margin:2px 0 6px}
.pay-table td{padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.pay-table td:last-child{text-align:right;font-weight:800;color:var(--gold2)}
.sheet h3 small{display:block;font:600 11px var(--sans);color:var(--mut);margin-top:1px}
.dock-row.go .btn{flex:1;padding:0 6px;flex-direction:column;gap:1px}
.dock-row.go .btn.big{font-size:17px;letter-spacing:.06em}
.dock-row.go .btn.dd{font-size:14px;letter-spacing:.04em}
.dock-row.go #bjGo,.dock-row.go .btn.primary{flex:1.25}
.btn:disabled{opacity:.4}
@media (min-aspect-ratio:23/20) and (max-height:520px){
  .sides{gap:8px}.side-spot{width:84px;height:38px}.side-spot .sp-name{font-size:9px;margin-top:-6px}
  .side-spot .chipstack{transform:scale(.5)}
}
@media (max-height:700px) and (max-aspect-ratio:23/20){
  .side-spot{height:42px;width:96px}
}
.zone.player:has(.sides:not([hidden])) .bet-spot{height:58px}
.zone.player:has(.sides:not([hidden])) .bet-spot .ring{height:40px;margin-top:-20px}
.side-spot .sp-res{letter-spacing:.02em;font-size:9px;padding:2px 6px}
@media (max-height:760px) and (max-aspect-ratio:23/20){
  .zone.player:has(.sides:not([hidden])) .bet-spot{height:50px}
  .zone.player:has(.sides:not([hidden])) .bet-spot .ring{height:34px;margin-top:-17px}
  .side-spot{height:38px;width:90px}
}
@media (min-aspect-ratio:23/20){.dock-row.go .btn.dd{font-size:12px;letter-spacing:0}}
.dock,.hand{contain:layout style}

/* multiplayer table: side-bet spots */
.tb-spots{display:flex;gap:6px;justify-content:center;align-items:stretch;width:100%}
.tb-spot{flex:1;max-width:110px;min-height:46px;padding:4px 6px;border-radius:12px;border:1.5px solid rgba(244,201,93,.4);background:rgba(0,0,0,.35);color:var(--gold2);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;touch-action:manipulation}
.tb-spot small{font:800 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.tb-spot b{font:800 15px var(--sans);font-variant-numeric:tabular-nums}
.tb-spot.on{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(244,201,93,.3),0 0 12px rgba(244,201,93,.4);background:rgba(244,201,93,.12)}
.tb-spot.has b{color:#fff}
.tb-spot.info{flex:0 0 34px;min-height:0;font:italic 800 14px var(--serif);border-radius:50%;align-self:center;width:34px;height:34px;padding:0}
.tb-sides{display:flex;flex-direction:column;gap:2px;align-items:center;margin-top:2px}
.tb-sd{font:800 9px var(--sans);letter-spacing:.03em;padding:1px 6px;border-radius:8px;white-space:nowrap}
.tb-sd.win{color:#7dffb0;border:1px solid #7dffb0}
.tb-sd.no{color:var(--mut);border:1px solid rgba(255,255,255,.12)}
.tchip.side{font-size:9px;min-width:0;padding:1px 5px}
.tb-row .btn small{font-size:.8em;opacity:.85}

/* casino hamburger menu + settings */
.rm-burger{display:flex;align-items:center;gap:8px}
.rm-burger .bg{display:flex;flex-direction:column;gap:3px}
.rm-burger .bg i{display:block;width:16px;height:2px;border-radius:1px;background:var(--gold2)}
.mn-list{gap:8px}
.mn-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:50px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);text-align:left;touch-action:manipulation}
.mn-item b{font:800 15px var(--sans)}.mn-item small{font:600 12px var(--sans);color:var(--mut)}
.set-row{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.set-row label{font:800 14px var(--sans);color:var(--gold2)}.set-row label small{display:block;font:600 11px var(--sans);color:var(--mut);margin-top:2px}
.set-row input[type=range]{width:100%;accent-color:#f4c95d}
.seg{display:flex;gap:6px}.seg button{flex:1;min-height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font:700 13px var(--sans)}
.seg button.on{background:linear-gradient(#ffe08a,#e0a932);color:#2a1604;border-color:#ffe7a6}
.sheet>.btn{width:100%;display:flex;justify-content:center}