:root{
  --lamp:#FFD9A0; --gold:#E4C079; --gold-hi:#F6E2AC; --cream:#F2EAD9;
  --red:#B4172B; --win:#63D28C; --lose:#E4564E;
  --card-ink:#211d15; --card-red:#A41226; --card-stock:#F7F2E3;
  --f-u:"Archivo",Helvetica Neue,Arial,sans-serif;
  --f-d:"Archivo",Helvetica Neue,Arial,sans-serif;
  --f-m:ui-monospace,SFMono-Regular,Menlo,monospace;
}
::selection{background:rgba(228,192,121,.85);color:#141310;}
.sheetIn{scrollbar-width:thin;scrollbar-color:rgba(228,192,121,.4) transparent;}
.sheetIn::-webkit-scrollbar{width:10px;}
.sheetIn::-webkit-scrollbar-track{background:transparent;}
.sheetIn::-webkit-scrollbar-thumb{background:rgba(228,192,121,.28);border-radius:5px;border:2px solid #0B0D11;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:#07070A;color:var(--cream);font-family:var(--f-u);
  height:100svh;overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ══════ TABLE ══════ */
.world{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:#07070A url("assets/table-loop-poster.jpg") center center / cover no-repeat;
  /* the table does not exist until the intro hands off: body.ready is added
     the moment the intro finishes (or is skipped), fading the room in */
  opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s;}
body.ready .world{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s;}
/* ══════ VIDEO ══════
   Footage sits under everything and fades in when ready.
   A missing file just fires an error we ignore → the CSS table shows. */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.4s ease;filter:brightness(.82) saturate(1.05);}
.bg.on{opacity:1;}
/* ══════ MOUSE PARALLAX ══════
   JS writes --pgx/--pgy on .world (smoothed, rAF). The footage overscans
   slightly so its edges never show; the table rig counter-drifts less,
   which sells the depth between lens and felt. */
.bg,.bgcv{will-change:transform;transform:translate3d(var(--pgx,0px),var(--pgy,0px),0) scale(1.07);}
/* living canvas backdrop: same fade, sits under the video layers */
.bgcv{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease;}
.bgcv.on{opacity:1;}
/* fx overlay is screen-blended: shoot it on black and only the light shows */
.bg.fx{mix-blend-mode:screen;transition:opacity .25s linear;filter:brightness(1.1);}
/* the painted table steps aside once real footage is live */
body.has-video .rail,body.has-video .cloth,body.has-video .felt-glow{display:none;}
.felt-glow{transition:filter .35s ease;}
body.pulse .felt-glow{filter:brightness(1.7);}
.table .cloth{transition:filter .3s ease;}
.table.pulse .cloth{filter:brightness(1.3);}
.felt-glow{position:absolute;left:50%;top:44%;width:min(1100px,96vw);height:min(560px,60vh);
  transform:translate(-50%,-50%) translate3d(calc(var(--pgx,0px)*-.35),calc(var(--pgy,0px)*-.35),0);
  background:radial-gradient(50% 50% at 50% 50%,rgba(28,110,67,.30),rgba(28,110,67,0) 70%);}
.table{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) translate3d(calc(var(--pgx,0px)*-.35),calc(var(--pgy,0px)*-.35),0);
  width:min(1020px,94vw);height:min(500px,52vh);min-height:340px;will-change:transform;}
.rail{position:absolute;inset:0;border-radius:50%/50%;
  background:linear-gradient(165deg,#2b2118 0%,#171009 45%,#0d0906 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 2px 3px rgba(255,240,214,.14), inset 0 -6px 14px rgba(0,0,0,.7);}
.cloth{position:absolute;inset:clamp(14px,2.4vw,30px);border-radius:50%/50%;
  background:
    radial-gradient(58% 44% at 50% 30%,rgba(255,244,216,.11),rgba(0,0,0,0) 60%),
    radial-gradient(46% 36% at 50% 90%,rgba(0,0,0,.38),rgba(0,0,0,0) 66%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 2px,rgba(0,0,0,0) 2px 4px),
    linear-gradient(170deg,#176844 0%,#0e4a2e 55%,#093522 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55), inset 0 2px 8px rgba(0,0,0,.6);
  border:1px solid rgba(228,192,121,.22);}
.cloth::before{content:"";position:absolute;inset:9% 6%;border:1.5px solid rgba(228,192,121,.20);
  border-radius:50%;pointer-events:none;}
.cloth-print{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;
  opacity:.5;pointer-events:none;}
.cloth-print b{display:block;font-weight:800;font-stretch:88%;font-size:clamp(10px,1.6vw,17px);letter-spacing:.34em;color:rgba(246,233,196,.8);}
.cloth-print i{display:block;font-style:normal;font-weight:700;font-size:clamp(7px,1vw,10px);letter-spacing:.3em;margin-top:6px;color:rgba(246,233,196,.55);}
.board-wrap{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;z-index:4;}
.pot-tag{display:block;position:relative;--pd:56px;width:calc(var(--pd) * 3.8);height:calc(var(--pd) * 0.9 + 38px);margin:0 auto 6px;min-height:1em;}
.pot-tag:empty{display:none;width:0;height:0;min-height:0;}
.pot-tag .pileWrap{position:absolute;left:50%;top:calc(var(--pd) * 0.34);}
.board{--cw:58px;display:flex;gap:clamp(7px,1.1vw,11px);justify-content:center;align-items:center;}
.slot{width:var(--cw);height:calc(var(--cw)*1.4);display:grid;place-items:center;
  border-radius:calc(var(--cw)*.1);border:1.5px dashed rgba(240,230,200,.16);
  background:rgba(0,0,0,.14);box-shadow:inset 0 2px 8px rgba(0,0,0,.35);}
.slot.filled{border-color:transparent;background:none;box-shadow:none;}

/* ══════ CARDS ══════
   Flat poker stock: ivory faces, keylined, corner indices, true pip
   layouts, engraved courts, lattice backs. One soft shadow grounds each
   card on the felt — no bevels, no sheen. */
.card{position:relative;width:var(--cw,58px);height:calc(var(--cw,58px)*1.4);flex:none;
  border-radius:calc(var(--cw,58px)*.11);color:var(--card-ink);
  background:
    repeating-linear-gradient(0deg,rgba(120,100,70,.028) 0 1px,rgba(0,0,0,0) 1px 3px),
    var(--card-stock);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  overflow:hidden;
  animation:deal .38s cubic-bezier(.2,1.25,.4,1) backwards;}
/* paper keyline */
.card::before{content:"";position:absolute;inset:5%;border:1px solid rgba(74,62,40,.28);
  border-radius:calc(var(--cw,58px)*.06);pointer-events:none;}
@keyframes deal{
  0%{opacity:0;transform:translateY(-20px) rotate(-7deg) perspective(520px) rotateX(20deg);}
  55%{opacity:1;}
  100%{opacity:1;transform:none;}}
.card.red{color:var(--card-red);}
/* corner indices */
.corner{position:absolute;display:flex;flex-direction:column;align-items:center;
  line-height:1.04;z-index:2;}
.corner b{font-family:var(--f-u);font-weight:800;font-size:calc(var(--cw,58px)*.27);letter-spacing:-.02em;}
.corner i{font-style:normal;font-size:calc(var(--cw,58px)*.22);}
.corner.tl{top:5.5%;left:8.5%;}
.corner.br{bottom:5.5%;right:8.5%;transform:rotate(180deg);}
/* true pip layouts */
.pips{position:absolute;inset:0;}
.pips span{position:absolute;transform:translate(-50%,-50%);
  font-size:calc(var(--cw,58px)*.31);line-height:1;}
.pips span.flip{transform:translate(-50%,-50%) rotate(180deg);}
/* ace: one oversized pip */
.ace{position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--cw,58px)*.95);line-height:1;}
/* courts: flat panel, mirrored suit, engraved letter */
.court{position:absolute;inset:18% 20%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border-radius:2px;background:var(--card-stock);}
.card.red .court{border:1px solid rgba(164,18,38,.6);
  box-shadow:inset 0 0 0 2px var(--card-stock),inset 0 0 0 3px rgba(164,18,38,.6);}
.card:not(.red) .court{border:1px solid rgba(33,29,21,.62);
  box-shadow:inset 0 0 0 2px var(--card-stock),inset 0 0 0 3px rgba(33,29,21,.62);}
.court b{font-family:var(--f-d);font-weight:700;font-size:calc(var(--cw,58px)*.52);line-height:1.05;}
.court i{font-style:normal;font-size:calc(var(--cw,58px)*.24);line-height:1.2;}
.court i.f{transform:rotate(180deg);}
/* backs: flat house red, fine lattice, gold keyline, gilt medallion */
.card.down{background:
    repeating-linear-gradient(45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    repeating-linear-gradient(-45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    #7E1626;}
.card.down::before{inset:6.5%;border:1.5px solid rgba(240,214,170,.62);}
.card.down::after{content:"\2660";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(240,214,170,.8);font-size:calc(var(--cw,58px)*.42);background:none;}
.card.winner{animation:winnerPulse 1.1s ease-in-out 2;
  box-shadow:0 10px 28px rgba(0,0,0,.45),
    0 0 0 2px var(--gold-hi),0 0 26px rgba(228,192,121,.65);}
@keyframes winnerPulse{50%{box-shadow:0 10px 28px rgba(0,0,0,.45),
  0 0 0 2px var(--gold-hi),0 0 44px rgba(228,192,121,.9);}}
.card.ph{visibility:hidden;}

/* ══════ SHOE + FLYING PIECES ══════ */
.shoe{position:absolute;right:5.5%;top:11%;width:var(--shoe-w,46px);height:calc(var(--shoe-w,46px)*1.4);z-index:3;}
.shoe i{position:absolute;inset:0;border-radius:6px;
  background:
    repeating-linear-gradient(45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    repeating-linear-gradient(-45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    #7E1626;
  box-shadow:0 3px 8px rgba(0,0,0,.5);}
.shoe i:nth-child(2){transform:translate(2.5px,-2.5px);}
.shoe i:nth-child(3){transform:translate(5px,-5px);}
.muck{position:absolute;right:calc(5.5% + var(--shoe-w,46px) + 10px);top:12%;
  width:34px;height:48px;border-radius:5px;border:1.5px dashed rgba(240,230,200,.18);
  background:rgba(0,0,0,.14);z-index:3;}
.fly{position:fixed;left:0;top:0;z-index:70;pointer-events:none;transform:translate(-50%,-50%);}
.fly-card{width:46px;height:64px;border-radius:6px;
  background:
    repeating-linear-gradient(45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    repeating-linear-gradient(-45deg,rgba(255,225,200,.10) 0 1.5px,rgba(0,0,0,0) 1.5px 3.5px),
    #7E1626;
  box-shadow:0 12px 24px rgba(0,0,0,.55);}
.fly-chip{width:36px;height:36px;border-radius:50%;
  border:3px dashed rgba(255,248,232,.85);
  box-shadow:0 0 0 2px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.55);}

/* ══════ SEATS ══════ */
.seats{position:absolute;inset:0;z-index:5;pointer-events:none;}
.seat.hero{pointer-events:auto;}
.seat{position:absolute;left:var(--sx,50%);top:var(--sy,50%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;}
/* ══════ TABLE CALIBRATION ══════
    Base --sx/--sy/--board vars place seats on the PAINTED table.
    body.has-video overrides below re-seat them onto the FILMED felt.
    X/Y are % of the .table box (.seats covers it edge to edge). */
.seat{--sx:50%;--sy:50%;}
.board-wrap{left:var(--board-x,50%);top:var(--board-y,52%);}
.seat.s0{--sx:50%;--sy:6%;}
.seat.s1{--sx:13%;--sy:38%;}
.seat.s2{--sx:87%;--sy:38%;}
.seat.s3{--sx:29%;--sy:9%;}
.seat.s4{--sx:71%;--sy:9%;}
.seat.hero{--sx:50%;--sy:96%;}
/* Filmed-felt calibration: with table-loop.mp4 live the painted table is
   hidden, so the .table box becomes a positioning context over the VIDEO
   felt (far rail ~45% viewport, near rail ~90%). Seats/board/shoe land on
   cloth, clear of the pockets at the frame edges. */
/* Filmed-felt calibration: with table-loop.mp4 live the painted table is
   hidden, so the .table box becomes a positioning context over the VIDEO
   felt. Zones, top to bottom, never sharing pixels at 800px+ heights:
   toast < far seat < pot+board < side seats < hero < control deck. */
body.has-video .table{top:56%;height:64vh;width:min(1100px,94vw);}
body.has-video .board-wrap{--board-x:50%;--board-y:38%;}
body.has-video .board{--cw:52px;
  /* lie the flop back into the felt plane so it reads as dealt, not floating */
  transform:perspective(750px) rotateX(35deg);transform-origin:50% 100%;}
body.has-video .pot-tag{--pd:44px;}
body.has-video .bet{--pd:40px;}
body.has-video .seat.s1{--sx:15%;--sy:48%;scale:.88;}
body.has-video .seat.s2{--sx:85%;--sy:48%;scale:.88;}
body.has-video .seat.s3{--sx:22%;--sy:29%;scale:.8;}
body.has-video .seat.s4{--sx:78%;--sy:29%;scale:.8;}
/* hole cards hinge at their bottom edge into the felt: far seats lie
   flattest (grazing camera angle), hero stays readable in the foreground */
body.has-video .seat.s1 .hole,body.has-video .seat.s2 .hole{transform:perspective(700px) rotateX(28deg);transform-origin:50% 100%;}
body.has-video .seat.s3 .hole,body.has-video .seat.s4 .hole{transform:perspective(700px) rotateX(38deg);transform-origin:50% 100%;}
body.has-video .seat.hero .hole,body.has-video .hero .hole{transform:perspective(700px) rotateX(10deg);transform-origin:50% 100%;order:2;}
/* hero stack runs toward the board: chips pushed out on top, cards, pill,
   status tag last — so the bet never slides under the bottom control deck */
body.has-video .seat.hero .bet{order:1;--pd:36px;}
body.has-video .seat.hero .pill{order:3;}
body.has-video .seat.hero .seat-tag{order:4;}
/* tilted cards get a tight contact shadow — no float */
body.has-video .board .card,body.has-video .hole .card{box-shadow:0 4px 10px rgba(0,0,0,.6);}
body.has-video .seat.s3 .hole,body.has-video .seat.s4 .hole{--cw:32px;order:2;}
body.has-video .seat.s3 .pill,body.has-video .seat.s4 .pill{order:1;}
body.has-video .seat.s3 .bet,body.has-video .seat.s4 .bet{order:3;--pd:40px;}
body.has-video .seat.s3 .seat-tag,body.has-video .seat.s4 .seat-tag{order:4;}
body.has-video .seat.s3 .hand-name,body.has-video .seat.s4 .hand-name{order:5;}
body.has-video .seat.hero{--sx:50%;--sy:77%;gap:6px;}
body.has-video .hero .hole{--cw:44px;}
body.has-video .hero .hand-name{display:none;}
body.has-video .shoe{right:29%;top:26%;}
body.has-video .muck{right:calc(29% + var(--shoe-w,46px) + 10px);top:23%;}
/* game chrome leaves the felt: the message line moves to the empty hall
   up top, action buttons keep the bottom edge, hero seat gets its space */
body.has-video .msg{position:fixed;top:86px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:94vw;z-index:13;margin:0;}
body.has-video .hintline{position:fixed;top:124px;left:50%;transform:translateX(-50%);z-index:13;}
body.has-video .btoast{top:150px;}
.pill{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:2em;
  background:rgba(10,12,16,.92);
  border:1px solid rgba(228,192,121,.30);
  box-shadow:0 8px 20px rgba(0,0,0,.55);}
.avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;flex:none;
  font-family:var(--f-d);font-size:12px;font-weight:800;color:#241a06;
  background:var(--gold);
  box-shadow:0 0 0 1.5px rgba(228,192,121,.55),0 2px 6px rgba(0,0,0,.5);}
.seat.s0 .avatar{background:#C7CBD1;box-shadow:0 0 0 1.5px rgba(199,203,209,.5),0 2px 6px rgba(0,0,0,.5);color:#1c1e24;}
.seat.s1 .avatar{background:#C08B58;box-shadow:0 0 0 1.5px rgba(192,139,88,.5),0 2px 6px rgba(0,0,0,.5);color:#241a06;}
.seat.s2 .avatar{background:#8fb6d9;box-shadow:0 0 0 1.5px rgba(143,182,217,.5),0 2px 6px rgba(0,0,0,.5);color:#16202b;}
.pill .nm{font-size:10px;font-weight:800;letter-spacing:.18em;color:#CFC6B2;}
.pill .st2{font-size:12px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;}
/* voice: mic glyph in the pill (gold = live, red slashed = muted),
   seat glows while its player talks */
.pill .vmic{display:none;color:var(--win);flex:none;}
.pill .vmic.on{display:inline-flex;}
.pill .vmic.muted{color:var(--lose);}
.pill .vmic svg{width:11px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.pill .vmic rect{fill:currentColor;stroke:none;}
.pill .vmic .slash{display:none;}
.pill .vmic.muted .slash{display:block;}
.seat.speaking .vmic{filter:drop-shadow(0 0 5px rgba(99,210,140,.9));}
@media (prefers-reduced-motion:no-preference){
  .seat.speaking .vmic{animation:micpulse 1s ease-in-out infinite;}
  @keyframes micpulse{50%{transform:scale(1.3);}}
}
.seat.speaking .pill{border-color:rgba(99,210,140,.95);
  box-shadow:0 0 22px rgba(99,210,140,.55),0 0 46px rgba(99,210,140,.28),0 6px 18px rgba(0,0,0,.5);}
.seat.speaking .avatar{box-shadow:0 0 0 2px rgba(99,210,140,.9),0 0 16px rgba(99,210,140,.8);}
.seat.folded{opacity:.45;filter:saturate(.4);}
.seat.active .pill{border-color:rgba(255,217,160,.75);box-shadow:0 0 16px rgba(255,217,160,.3),0 6px 18px rgba(0,0,0,.5);}
.hole{--cw:46px;display:flex;align-items:flex-start;min-height:calc(var(--cw)*1.52);}
.hero .hole{--cw:66px;padding-bottom:6px;}
.seat.hero{gap:10px;}
.hole .card+.card{margin-left:calc(var(--cw)*-.16);}
.hole .card:first-child{transform:rotate(-5deg);}
.hole .card:last-child{transform:rotate(5deg) translateY(2px);}
.hero .hole .card{transition:transform .18s ease;}
.hero .hole .card:hover{transform:translateY(-9px) rotate(0deg);}
.seat-tag{font-size:8.5px;font-weight:800;letter-spacing:.2em;padding:4px 10px;border-radius:2em;
  background:rgba(6,9,8,.74);border:1px solid rgba(255,255,255,.14);color:#AEB6C2;min-height:1em;}
.seat-tag:empty{display:none;}
.seat-tag.good{color:var(--win);border-color:rgba(99,210,140,.6);}
.seat-tag.bad{color:var(--lose);border-color:rgba(228,86,78,.6);}
.seat-tag.gold{color:#FFD97A;border-color:rgba(255,214,122,.7);}
.bet{display:block;position:relative;--pd:52px;width:calc(var(--pd) * 3.6);height:calc(var(--pd) * 0.85 + 34px);min-height:1em;}
.bet:empty{display:none;width:0;height:0;min-height:0;}
.seat.hero .bet{--pd:58px;}
.bet .pileWrap{position:absolute;left:50%;top:calc(var(--pd) * 0.32);}
/* ══════ CHIPS — blackj.fun system ══════
   Round clickable chips for the rack, squashed .lay chips for piles
   on the felt. One column per denomination, thickness-stepped. */
.chip{position:relative;width:var(--d,56px);height:var(--d,56px);border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:radial-gradient(circle at 40% 26%,rgba(255,244,222,.42),rgba(255,244,222,0) 46%),var(--c1);
  box-shadow:inset 0 calc(var(--d,56px)*-.10) calc(var(--d,56px)*.14) rgba(0,0,0,.42),
    inset 0 calc(var(--d,56px)*.045) calc(var(--d,56px)*.06) rgba(255,240,215,.34),
    0 calc(var(--d,56px)*.05) calc(var(--d,56px)*.09) rgba(0,0,0,.55),
    0 calc(var(--d,56px)*.02) 0 rgba(0,0,0,.45);}
.chip::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 12deg,var(--c2) 0 11deg,rgba(0,0,0,0) 11deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);
  mask:radial-gradient(circle,transparent 61%,#000 62%);}
.chip::after{content:"";position:absolute;inset:19%;border-radius:50%;
  background:radial-gradient(circle at 42% 28%,rgba(255,248,230,.30),rgba(255,248,230,0) 54%),var(--c1);
  box-shadow:inset 0 0 0 calc(var(--d,56px)*.018) rgba(255,244,222,.32),
    inset 0 calc(var(--d,56px)*-.02) calc(var(--d,56px)*.04) rgba(0,0,0,.34);}
.chip b{position:relative;z-index:2;font-weight:900;font-stretch:84%;
  font-size:calc(var(--d,56px)*.255);color:#FFF6E6;letter-spacing:-.02em;
  text-shadow:0 calc(var(--d,56px)*.014) calc(var(--d,56px)*.02) rgba(0,0,0,.6);}
.c1{--c1:#D6D0C2;--c2:#2A2418;} .c1 b{color:#26200F;text-shadow:0 1px 0 rgba(255,255,255,.4);}
.c5{--c1:#A8302F;--c2:#F2E7D6;}
.c25{--c1:#1C6E43;--c2:#F2E7D6;}
.c100{--c1:#1A1C23;--c2:#D9B463;}
.c500{--c1:#5B2880;--c2:#F2E7D6;}
.c1K{--c1:#A6811C;--c2:#241D08;}
.c5K{--c1:#B4541E;--c2:#F2E7D6;}
/* chip lying on the felt: squashed ellipse + visible edge wall */
.chip.lay{--k:.375;--th:calc(var(--d) * .092);
  width:var(--d);height:calc(var(--d) * var(--k) + var(--th));
  background:none;box-shadow:none;border-radius:0;display:block;}
.chip.lay::before,.chip.lay::after{display:none;}
.chip.lay .ed{position:absolute;left:0;right:0;z-index:0;
  top:calc(var(--d) * var(--k) / 2);
  height:calc(var(--d) * var(--k) / 2 + var(--th));
  border-radius:0 0 50% 50% / 0 0 calc(var(--d) * var(--k) / 2) calc(var(--d) * var(--k) / 2);
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.10) 9%,rgba(0,0,0,0) 20%),
    linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 12%,rgba(255,246,224,.20) 34%,rgba(255,246,224,.05) 50%,rgba(0,0,0,.24) 82%,rgba(0,0,0,.66) 100%),
    linear-gradient(180deg,rgba(255,240,214,.34) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.52) 100%),
    repeating-linear-gradient(90deg,var(--c2) 0 5.4%,rgba(0,0,0,.22) 5.4% 6.1%,var(--c1) 6.1% 14.3%,rgba(0,0,0,.22) 14.3% 15%);}
.chip.lay .tp{position:absolute;left:0;right:0;top:0;z-index:1;
  height:calc(var(--d) * var(--k));border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 42% 24%,rgba(255,246,226,.40),rgba(255,246,226,0) 48%),var(--c1);
  box-shadow:inset 0 calc(var(--d) * -.035) calc(var(--d) * .05) rgba(0,0,0,.34),
    inset 0 calc(var(--d) * .018) calc(var(--d) * .03) rgba(255,240,215,.34),
    0 0 0 1px rgba(0,0,0,.52),0 1px 0 rgba(0,0,0,.45),0 calc(var(--d)*.022) calc(var(--d)*.03) rgba(0,0,0,.55);}
.chip.lay .tp::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 12deg,var(--c2) 0 11deg,rgba(0,0,0,0) 11deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 60%,#000 61%);
  mask:radial-gradient(closest-side,transparent 60%,#000 61%);}
.chip.lay .tp::after{content:"";position:absolute;inset:17%;border-radius:50%;
  background:radial-gradient(circle at 42% 26%,rgba(255,248,230,.30),rgba(255,248,230,0) 54%),var(--c1);
  box-shadow:inset 0 0 0 calc(var(--d) * .012) rgba(255,244,222,.42),
    0 0 0 calc(var(--d) * .008) rgba(0,0,0,.26);}
.chip.lay b{position:relative;z-index:2;font-weight:900;font-stretch:84%;
  font-size:calc(var(--d) * .30);color:#FFF6E6;line-height:1;transform:scaleY(.60);
  text-shadow:0 calc(var(--d) * .010) calc(var(--d) * .016) rgba(0,0,0,.68);}
.chip.lay.c1 b{color:#26200F;text-shadow:0 1px 0 rgba(255,255,255,.4);}
.pileWrap{position:relative;width:0;height:0;}
.pileWrap::before{content:"";position:absolute;left:50%;top:50%;
  width:calc(var(--pd,52px) * var(--sw,1));height:calc(var(--pd,52px) * .46);
  transform:translate(-50%,-16%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(1,16,10,.55),rgba(1,16,10,0) 72%);}
.pileWrap:empty::before{display:none;}
.pileWrap .cw{position:absolute;left:50%;top:50%;}
.pileWrap .chip{position:relative;--d:var(--pd,52px);}
.chip.drop{animation:chipdrop .40s cubic-bezier(.25,1.5,.45,1) both;}
@keyframes chipdrop{
  0%{opacity:0;transform:translateY(calc(var(--d) * -2.6)) rotate(-9deg) scale(1.06);}
  55%{opacity:1;}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1);}}
/* felt tags: BET under a bet pile, POT under the pot pile */
.tag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  display:flex;align-items:baseline;gap:.5em;z-index:6;
  padding:.34em .8em;border-radius:2em;font-size:11px;
  background:rgba(6,9,8,.9);
  border:1px solid rgba(228,192,121,.34);
  box-shadow:0 .3em .8em rgba(0,0,0,.55);}
.tag i{font-style:normal;font-size:.62em;letter-spacing:.22em;color:#93A08F;}
.tag b{font-weight:900;font-stretch:82%;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.01em;font-size:13px;}
.tag.below{top:calc(var(--pd,52px) * 0.30 + .55em);}
/* player chip rack (raise builder), same as blackj.fun.
   Full 7-denom lineup: sized to fit the deck in one row, no scroll. */
.rack{--rd:clamp(40px,5vw,56px);display:flex;gap:clamp(6px,1vw,12px);justify-content:center;align-items:center;min-height:1em;flex-wrap:nowrap;}
.rack:empty{display:none;}
button.chip{--d:var(--rd);}
button.chip:hover:not(:disabled){transform:translateY(-.18em) scale(1.04);filter:brightness(1.1);}
button.chip:active:not(:disabled){transform:translateY(-.04em) scale(.98);}
button.chip:disabled{opacity:.3;cursor:default;}
.dealer-btn{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-d);font-size:12px;font-weight:800;color:#2A1F08;
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(18,12,4,.9),0 0 0 3.5px rgba(228,192,121,.6),0 3px 10px rgba(0,0,0,.65);
  z-index:6;}
/* action tags read right under the pill: amounts never slide under chrome */
.seat.s1 .hole,.seat.s2 .hole,.seat.hero .hole{order:1;}
.seat.s1 .pill,.seat.s2 .pill,.seat.hero .pill{order:2;}
.seat.s1 .seat-tag,.seat.s2 .seat-tag,.seat.hero .seat-tag{order:3;}
.seat.s1 .bet,.seat.s2 .bet,.seat.hero .bet{order:4;}
.seat.s1 .hand-name,.seat.s2 .hand-name,.seat.hero .hand-name{order:5;}
.hand-name{font-family:var(--f-d);font-weight:700;font-size:12.5px;letter-spacing:.1em;
  color:var(--lamp);text-shadow:0 2px 10px rgba(0,0,0,.9);min-height:1.2em;}

.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");}
.vig{position:fixed;inset:0;z-index:9;pointer-events:none;
  background:radial-gradient(122% 100% at 50% 46%,rgba(0,0,0,0) 44%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.68) 100%);}

/* ══════ CHROME ══════ */
.top{position:fixed;z-index:12;inset:0 0 auto 0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;padding:clamp(12px,2vw,24px) clamp(14px,3vw,34px);
  background:transparent;border-bottom:0;transition:opacity .8s;}
.brand{display:flex;flex-direction:column;align-items:center;gap:7px;line-height:1;}
.wordmark{height:clamp(30px,4.4vw,42px);width:auto;display:block;}
.brand small{display:block;width:100%;text-align:center;font-family:var(--f-u);font-size:9px;font-weight:800;letter-spacing:.26em;color:#A99A78;margin-top:0;}
.tr{display:flex;align-items:flex-start;gap:10px;}
.bankcol{display:grid;justify-items:end;gap:7px;}
.bank{text-align:right;transition:filter .18s;}
.bank:hover{filter:brightness(1.22);}
.bank i{display:block;font-style:normal;font-size:9px;letter-spacing:.26em;color:#A99A78;}
.bank b{display:block;font-weight:900;font-stretch:80%;line-height:.92;font-size:clamp(22px,3vw,36px);
  font-variant-numeric:tabular-nums;color:var(--cream);}
.bank i:last-child{color:var(--gold);border-bottom:1px dotted rgba(228,192,121,.45);display:inline-block;padding-bottom:2px;margin-top:3px;}
.tierline{font-size:8.5px;font-weight:800;letter-spacing:.19em;color:var(--lamp);margin-top:6px;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.9);}
/* $POKER boost box */
.boost{margin-top:16px;padding:13px 14px;border-radius:5px;background:rgba(228,192,121,.06);border:1px solid rgba(228,192,121,.26);}
.boost b{display:block;margin-bottom:8px;color:var(--gold);font-size:10px;letter-spacing:.2em;font-weight:800;}
.boost .brow{display:flex;align-items:baseline;justify-content:space-between;padding:5px 0;border-top:1px solid rgba(255,255,255,.05);font-size:11px;}
.boost .brow span{letter-spacing:.18em;color:#8E8570;font-weight:700;font-size:9px;}
.boost .brow i{font-style:normal;font-weight:900;color:var(--cream);font-variant-numeric:tabular-nums;}
.boost .brow.total i{color:var(--gold);font-size:14px;}
.boost p{margin:8px 0 0;font-size:10.5px;line-height:1.6;color:#7E8794;}
.room{text-align:right;}
.room b{display:block;font-family:var(--f-d);font-size:12px;font-weight:800;font-stretch:106%;letter-spacing:.18em;color:var(--gold);}
.room.up b{animation:roomUp 1.5s ease-out;}
@keyframes roomUp{0%{color:#FFF6E6;text-shadow:0 0 18px rgba(255,246,230,.9);transform:scale(1.1);}100%{color:var(--gold);transform:scale(1);}}
.conn{margin-top:5px;font-size:9.5px;font-weight:900;letter-spacing:.2em;padding:9px 14px;border-radius:2px;color:#1E1608;
  background:var(--gold);border:1px solid var(--gold);}
.conn.soon{background:rgba(12,15,20,.6);color:#8E8570;border:1px solid rgba(228,192,121,.26);box-shadow:none;}
.conn:hover{background:var(--gold-hi);border-color:var(--gold-hi);}
.connWhy{font-size:8.5px;font-weight:800;letter-spacing:.19em;color:var(--lamp);margin-top:6px;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.9);}
.xbtn{margin-top:2px;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(228,192,121,.32);background:rgba(8,10,14,.78);transition:border-color .16s;}
.xbtn svg{width:13px;height:13px;fill:#C9C0AC;transition:fill .16s;}
.xbtn:hover{border-color:var(--gold);}
.xbtn:hover svg{fill:var(--lamp);}

.ui{position:fixed;z-index:12;inset:auto 0 0 0;display:grid;justify-items:center;
  gap:clamp(6px,1.1vh,11px);padding:clamp(10px,1.8vh,18px) clamp(12px,3vw,30px) clamp(11px,2.2vh,20px);
  background:rgba(5,6,9,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(228,192,121,.14);transition:opacity .8s;}
/* In-game text lines stay out of the frame: turn state lives in the
   seats, pills, tags, and buttons. JS no longer posts blinds/popups;
   CSS hides any leftovers plus the shuffle hash. */
.msg,.hintline,.fair{display:none !important;}
.acts{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.act{font-family:var(--f-d);font-weight:800;font-stretch:106%;font-size:12px;letter-spacing:.12em;
  padding:13px clamp(18px,2.4vw,28px);border-radius:2px;color:#EDE4CE;
  background:#151A21;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:border-color .16s,transform .1s,box-shadow .16s,background .16s;}
.act small{opacity:.55;letter-spacing:.1em;font-family:var(--f-u);font-size:.85em;}
.act:hover:not(:disabled){border-color:rgba(228,192,121,.55);}
.act:active:not(:disabled){transform:translateY(1px);box-shadow:0 3px 10px rgba(0,0,0,.5);}
.act.go{background:var(--gold);color:#221806;border-color:var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.45);}
.act.go:hover:not(:disabled){background:var(--gold-hi);border-color:var(--gold-hi);}
.act.danger{background:transparent;border-color:rgba(228,86,78,.55);color:#F0B9B4;}
.act.danger:hover:not(:disabled){border-color:var(--lose);}
.act:disabled{opacity:.32;cursor:default;}
.act.tip{border-color:rgba(255,217,160,.7);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(255,217,160,.22);}
.act.go.tip{box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 20px rgba(228,192,121,.35);}
.fair{padding:8px 12px;border-radius:2px;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;
  letter-spacing:.06em;color:#6E7683;word-break:break-all;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);max-width:min(640px,94vw);text-align:center;}
.fair:empty{display:none;}

.tools{position:fixed;z-index:12;right:clamp(14px,3vw,34px);bottom:clamp(11px,2.2vh,20px);
  display:grid;justify-items:end;gap:9px;transition:opacity .8s;}
.snd{font-size:9px;letter-spacing:.2em;color:#7C7566;}
.chartBtn{font-size:9px;letter-spacing:.2em;font-weight:700;color:#C9C0AC;padding:9px 14px;
  border:1px solid rgba(228,192,121,.32);border-radius:3px;background:rgba(8,10,14,.78);}
.chartBtn:hover{color:var(--lamp);border-color:var(--gold);}
.chartBtn.tk{color:#12100A;background:var(--gold);border-color:var(--gold);font-weight:900;}
/* connect wallet: yellow luxe button, heavy letters */
#walletBtn{color:#221806;font-weight:900;letter-spacing:.14em;padding:10px 18px;border-radius:3px;
  background:linear-gradient(180deg,#F9E7B8 0%,#E4C079 55%,#C99B4A 100%);
  border:1px solid #8A6A25;
  box-shadow:0 2px 12px rgba(228,192,121,.35),inset 0 1px 0 rgba(255,248,230,.75);}
#walletBtn:hover{color:#221806;border-color:#8A6A25;
  background:linear-gradient(180deg,#FFF4D2 0%,#F6E2AC 55%,#D9AE5C 100%);}
.chartBtn.tk:hover{color:#12100A;background:var(--gold-hi);border-color:var(--gold-hi);}
.chartBtn.on{color:var(--lamp);border-color:var(--gold);background:rgba(228,192,121,.13);}

/* ══════ SHEETS ══════ */
.sheet{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px;
  background:rgba(4,6,9,.82);backdrop-filter:blur(9px);}
.sheet.on{display:grid;}
.sheetIn{width:min(1080px,97vw);max-height:94svh;overflow:auto;padding:clamp(16px,2.4vw,26px);
  border-radius:6px;background:#0E1116;
  border:1px solid rgba(228,192,121,.24);box-shadow:0 30px 90px rgba(0,0,0,.85);}
.sheetHd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:clamp(12px,1.8vw,20px);}
.sheetHd h3{margin:0;font-family:var(--f-d);font-weight:800;font-stretch:106%;letter-spacing:.02em;font-size:clamp(19px,2.6vw,26px);color:var(--gold);}
.sheetHd p{margin:5px 0 0;font-size:11px;letter-spacing:.11em;color:#7F8794;}
.hdR{display:flex;align-items:center;gap:10px;}
.advice{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--lamp);padding:9px 14px;
  border:1px solid rgba(255,217,160,.34);border-radius:3px;background:rgba(255,217,160,.07);white-space:nowrap;}
.advice:empty{display:none;}
.grids{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.grids h4{margin:0 0 7px;font-size:9.5px;letter-spacing:.26em;color:#8E8570;font-weight:700;}
table.bs{border-collapse:separate;border-spacing:2px;width:100%;}
table.bs td,table.bs th{text-align:center;font-size:clamp(9px,1.05vw,11.5px);font-weight:800;padding:6px 4px;border-radius:2px;font-variant-numeric:tabular-nums;}
table.bs th{color:#79808C;font-weight:700;font-size:9px;letter-spacing:.06em;}
table.bs td.rw{color:#C7BFAE;background:rgba(255,255,255,.045);letter-spacing:.02em;}
table.rkT td:nth-child(3){font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.03em;}
.xH{background:#5C2027;color:#FFD9D4;}
.xS{background:#1D5637;color:#CFF3DD;}
.xD{background:#8A6714;color:#FFEFC4;}
.xP{background:#33306E;color:#DCD9FF;}
.tkFlow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 18px;}
.tkS{flex:1;text-align:center;padding:11px 6px;border-radius:5px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.tkS b{display:block;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#C7CEDA;}
.tkS i{display:block;font-style:normal;margin-top:5px;font-size:8px;letter-spacing:.2em;color:#79818E;font-weight:700;}
.tkS.on{background:rgba(228,192,121,.10);border-color:rgba(228,192,121,.34);}
.tkS.on b{color:var(--gold);}
.tkA{color:#5C6470;font-size:13px;flex:none;}
.tkSteps{margin:0;padding:0;list-style:none;counter-reset:tk;}
.tkSteps li{counter-increment:tk;position:relative;padding:11px 0 11px 40px;font-size:12.5px;line-height:1.62;color:#9AA3AF;border-top:1px solid rgba(255,255,255,.05);}
.tkSteps li:before{content:counter(tk);position:absolute;left:0;top:11px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--gold);
  background:rgba(228,192,121,.10);border:1px solid rgba(228,192,121,.28);}
.tkSteps li b{color:#E7DFCC;font-weight:800;}
.tkSteps li s{text-decoration:none;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;}
.tkWarn{margin-top:16px;padding:13px 14px;border-radius:5px;font-size:11.5px;line-height:1.62;color:#98A0AE;
  background:rgba(228,86,78,.055);border:1px solid rgba(228,86,78,.22);}
.tkWarn b{display:block;margin-bottom:4px;color:#E1A9A4;font-size:10px;letter-spacing:.2em;font-weight:800;}
.pod{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:6px 0 4px;}
.pc{flex:1;min-width:0;text-align:center;border-radius:6px;padding:16px 10px 14px;
  background:#11141A;
  border:1px solid rgba(255,255,255,.08);border-top:2px solid var(--mc,#888);
  box-shadow:0 10px 26px rgba(0,0,0,.42);}
.pc .mdl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:900;
  color:#12100A;margin:0 auto 11px;background:var(--mc);}
.pc .ad{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#B9C0CB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pc .cr{display:block;margin-top:10px;font-size:23px;font-weight:900;color:var(--mc);font-variant-numeric:tabular-nums;line-height:1;}
.pc .hd{display:block;margin-top:6px;font-size:8px;letter-spacing:.22em;color:#7A8290;font-weight:700;}
.pc.p1{--mc:#E4C079;padding-top:26px;padding-bottom:22px;}
.pc.p2{--mc:#C7CBD1;}.pc.p3{--mc:#C08B58;}
.pod.n3 .pc.p2{order:1;}.pod.n3 .pc.p1{order:2;}.pod.n3 .pc.p3{order:3;}
.pc.p1 .cr{font-size:30px;}
.pc.me{border-color:rgba(228,192,121,.55);background:rgba(228,192,121,.07);}
.rrow{display:flex;align-items:center;gap:12px;padding:9px 12px;margin-top:7px;border-radius:4px;
  background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.05);}
.rrow b{width:20px;font-size:11px;font-weight:800;color:#7A8290;}
.rrow span{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#A9B1BD;}
.rrow i{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;}
.rrow.me{background:rgba(228,192,121,.09);border-color:rgba(228,192,121,.34);}
.lbYou{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 13px;border-radius:5px;
  background:rgba(228,192,121,.07);border:1px solid rgba(228,192,121,.26);}
.lbYou .yl{font-size:8.5px;font-weight:800;letter-spacing:.24em;color:#0F0D07;background:var(--gold);padding:4px 8px;border-radius:3px;}
.lbYou b{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#E7DFCC;}
.lbYou i{font-style:normal;font-size:9px;letter-spacing:.2em;color:#8E8570;font-weight:700;}
.lbYou .yc{margin-left:auto;font-size:15px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;}
.lbYou .yc s{text-decoration:none;font-size:8.5px;letter-spacing:.2em;color:#8E8570;font-weight:700;margin-right:8px;}
.lbYou p{flex:1 1 100%;margin:2px 0 0;font-size:10.5px;line-height:1.5;color:#7E8794;}
.rules{margin-top:14px;padding-top:12px;border-top:1px solid rgba(228,192,121,.16);}
.rules ul{margin:0;padding:0;list-style:none;}
.rules li{position:relative;padding-left:14px;margin:0 0 7px;font-size:11.5px;line-height:1.62;color:#98A0AE;}
.rules li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:rgba(228,192,121,.5);}
.key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:10px;letter-spacing:.1em;color:#8A919C;align-items:center;}
.key i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:16px;border-radius:2px;font-weight:800;font-size:9.5px;margin-right:6px;}
.key span{display:flex;align-items:center;}
.sheetNote{margin:12px 0 0;font-size:10.5px;line-height:1.6;color:#6E7683;}

/* ══════ TOAST + GATE ══════ */
.btoast{position:fixed;z-index:30;left:50%;top:clamp(92px,14vh,150px);transform:translateX(-50%) translateY(-10px);
  width:max-content;max-width:min(430px,92vw);padding:11px 17px;border-radius:4px;
  font-size:11.5px;line-height:1.55;text-align:center;color:#C4CBD6;
  background:#10141A;
  border:1px solid rgba(228,192,121,.36);box-shadow:0 16px 44px rgba(0,0,0,.66);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;}
.btoast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.btoast b{display:block;margin-bottom:4px;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.2em;}
.gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;
  background:rgba(5,6,9,.9);backdrop-filter:blur(10px);transition:opacity .7s;}
.gate.out{opacity:0;pointer-events:none;}
.gate.off{display:none;}
.panel{width:min(420px,94vw);padding:clamp(22px,4vw,32px);display:grid;gap:14px;
  background:#0E1116;
  border:1px solid rgba(228,192,121,.24);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.85);}
.mark{display:grid;justify-items:center;gap:9px;
  padding-bottom:13px;border-bottom:1px solid rgba(228,192,121,.18);}
.wordmark.big{height:clamp(46px,7vw,64px);}
.mark span{display:block;font-family:var(--f-u);font-size:8.5px;font-weight:700;letter-spacing:.28em;color:#8E8570;margin-top:0;}
.panel h2{margin:0;font-family:var(--f-d);font-weight:800;font-stretch:106%;letter-spacing:.01em;font-size:clamp(23px,3.6vw,31px);color:var(--cream);}
.ladder{display:grid;gap:5px;}
.ladHd{font-size:9px;letter-spacing:.26em;color:#8E8570;font-weight:700;margin-bottom:2px;}
.lrow{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;padding:9px 11px;border-radius:2px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.022);}
.lrow b{font-size:10px;font-weight:800;letter-spacing:.2em;color:#9AA2AE;}
.lrow i{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:#6E7683;font-variant-numeric:tabular-nums;}
.lrow.on{border-color:rgba(228,192,121,.5);background:rgba(228,192,121,.09);}
.lrow.on b{color:var(--gold);}
.lrow.on i{color:#B6AE99;}
.panel .row{display:flex;gap:8px;}
.mini{font-size:11px;color:#6C7481;line-height:1.55;}
/* online lobby */
.nickHd{font-size:9px;letter-spacing:.26em;color:#8E8570;font-weight:700;margin-bottom:2px;}
.nick{width:100%;padding:13px 14px;border-radius:3px;font:inherit;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  background:rgba(255,255,255,.045);border:1px solid rgba(228,192,121,.32);}
.nick::placeholder{color:#5C6470;letter-spacing:.14em;}
.nick:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
/* lobby table browser */
.tlist{display:grid;gap:5px;max-height:30vh;overflow:auto;scrollbar-width:thin;}
.trow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:2px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.022);
  font-size:10px;font-weight:800;letter-spacing:.16em;color:#9AA2AE;width:100%;text-align:left;}
.trow b{color:var(--gold);}
.trow i{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.1em;color:#6E7683;}
.trow em{font-style:normal;font-size:8.5px;letter-spacing:.14em;padding:4px 9px;border-radius:2em;
  color:#221806;background:var(--gold);}
.tmic{display:inline-flex;flex:none;color:var(--win);vertical-align:-2px;}
.tmic svg{width:11px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.tmic rect{fill:currentColor;stroke:none;}
.trow .tmic{margin-left:8px;}
.ladHd .tmic{margin-left:6px;}
.trow.idle{justify-content:center;color:#6E7683;}
.trow.full{opacity:.45;}
.trow:not(.idle):not(.full):hover{border-color:rgba(228,192,121,.5);background:rgba(228,192,121,.09);}
.netbar{position:fixed;z-index:12;left:clamp(14px,3vw,34px);bottom:clamp(11px,2.2vh,20px);
  display:grid;grid-template-columns:1fr;gap:6px;padding:10px 12px;border-radius:1em;
  max-width:min(240px,44vw);
  background:rgba(8,10,14,.82);border:1px solid rgba(228,192,121,.32);
  box-shadow:0 8px 20px rgba(0,0,0,.55);transition:opacity .8s;}
.netbar b,.netbar i{text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.netbar button{width:100%;white-space:nowrap;}
.netbar b{font-family:var(--f-d);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gold);}
.netbar i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.14em;color:#8E8570;}
.netbar button{font-size:9px;font-weight:800;letter-spacing:.16em;color:#C9C0AC;
  padding:8px 13px;border:1px solid rgba(228,86,78,.5);border-radius:2em;}
.netbar button:hover{color:#FFD9D4;border-color:var(--lose);}
/* voice controls: big, color-coded, unmissable.
   gold pulsing = tap me · green glowing = live */
#voiceBtn{font-size:11px;padding:10px 16px;border-color:rgba(228,192,121,.4);}
#voiceBtn.on{color:var(--win);background:rgba(99,210,140,.08);border-color:var(--win);font-weight:900;
  box-shadow:0 0 16px rgba(99,210,140,.4),inset 0 0 10px rgba(99,210,140,.12);}
#voiceBtn.on:hover{color:var(--win);border-color:var(--win);}
#voiceBtn.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--win);margin-right:8px;}
#voiceBtn.cta{color:#221806;font-weight:900;border-color:#8A6A25;
  background:linear-gradient(180deg,#F9E7B8 0%,#E4C079 55%,#C99B4A 100%);
  animation:voicePulse 1.6s ease-in-out infinite;}
#voiceBtn.cta:hover{color:#221806;border-color:#8A6A25;}
#micBtn{font-size:12px;padding:10px 18px;}
#micBtn.cta{color:#221806;font-weight:900;border-color:#8A6A25;
  background:linear-gradient(180deg,#F9E7B8 0%,#E4C079 55%,#C99B4A 100%);
  animation:voicePulse 1.6s ease-in-out infinite;}
#micBtn.cta:hover{color:#221806;border-color:#8A6A25;}
#micBtn.live{color:var(--win);background:rgba(99,210,140,.08);border-color:var(--win);font-weight:900;
  box-shadow:0 0 16px rgba(99,210,140,.4),inset 0 0 10px rgba(99,210,140,.12);}
#micBtn.live:hover{color:var(--win);border-color:var(--win);}
#micBtn.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--win);margin-right:8px;animation:liveBlink 1.2s ease-in-out infinite;}
@keyframes voicePulse{50%{box-shadow:0 0 24px rgba(228,192,121,.85);}}
@keyframes liveBlink{50%{opacity:.35;}}
.hid{opacity:0 !important;pointer-events:none;}

/* ══════ ENTRY CLIP ══════
   Cinematic handoff: the intro fades in over its poster, plays, then
   crossfades with a gentle focus-pull (blur + push-in) while the live
   loop settles from a slight overshoot. No hard cuts anywhere. */
.intro{position:fixed;inset:0;z-index:25;width:100%;height:100%;object-fit:cover;
  background:#07070A;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s ease,visibility 0s linear .9s;}
.intro.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s;}
.intro.fade{opacity:0;visibility:hidden;transform:scale(1.05);
  filter:blur(8px) brightness(1.08);
  transition:opacity 1s ease-in-out,visibility 0s linear 1s,
    transform 1.2s ease-in-out,filter 1s ease-in-out;}
@keyframes settleZoom{from{transform:scale(1.06);}to{transform:scale(1);}}
/* settle runs on .world (not .bg) so it never fights the parallax transform,
   which lives on the children. Whole scene pushes in like a camera move. */
body.settle .world{animation:settleZoom 2.4s ease-out;transform-origin:50% 55%;}
.skip{position:fixed;z-index:26;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vh,28px);
  display:none;font-size:10px;letter-spacing:.26em;font-weight:700;color:#C9C0AC;
  padding:11px 18px;border:1px solid rgba(228,192,121,.35);background:rgba(6,7,10,.5);
  backdrop-filter:blur(6px);}
.skip.on{display:block;}
.skip:hover{color:#F2EAD9;border-color:var(--gold);}

/* ══════ SMALL SCREENS ══════ */
/* ══════ CHROME TIERS — narrow windows get a real layout, not collisions ══════
   Wide keeps corners + centered deck. Mid docks the status bar top-left.
   Small stacks everything: tools strip on top, deck in the middle,
   status strip pinned to the bottom edge. */
@media (max-width:1500px){
  .netbar i{display:none;}
  .netbar{gap:8px;padding:6px 6px 6px 12px;}
  .netbar button{padding:7px 11px;}
}
@media (max-width:1150px){
  .top{padding:12px 16px;}
  /* the bottom belongs to the control deck alone from here down */
  .netbar{left:14px;right:auto;top:92px;bottom:auto;}
}
@media (max-width:900px){
  .tools{left:0;right:0;bottom:auto;top:calc(92px + env(safe-area-inset-top,0px));display:flex;flex-wrap:nowrap;
    justify-content:flex-start;gap:6px;padding:6px 8px;overflow-x:auto;scrollbar-width:none;
    background:rgba(5,6,9,.72);border-bottom:1px solid rgba(228,192,121,.14);}
  .tools::-webkit-scrollbar{display:none;}
  .chartBtn,.snd{padding:8px;font-size:8.5px;letter-spacing:.08em;white-space:nowrap;}
  /* tall header clusters would run into the tools strip — trim them */
  #connBtn{display:none;}
  .connWhy{display:none;}
  /* control deck rides above a full-width status strip — but only when the
     strip is actually on screen (online). Offline it stays bottom-docked. */
  .ui{bottom:8px;}
  body:has(#netbar:not(.hid)) .ui{bottom:52px;}
  .netbar{left:0;right:0;top:auto;bottom:0;border-radius:0;max-width:none;
    border-left:0;border-right:0;border-bottom:0;
    grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px;}
  .netbar b{grid-column:1/-1;}
  #voiceBtn,#micBtn{font-size:9px;padding:9px 6px;}
  #netLeave{grid-column:1/-1;}
  /* control deck always clears the stacked strip, whatever the width */
  body:has(#netbar:not(.hid)) .ui{bottom:150px;}
}
/* Short screens (landscape phones, squat windows): slim the chrome and pull
   the felt layout up so seats never slide under the strips. */
@media (max-height:500px){
  .top{padding:8px 12px;}
  .wordmark{height:26px;}
  .bank b{font-size:20px;}
  body.has-video .table{top:46%;height:54vh;}
  body.has-video .board-wrap{--board-y:57%;}
  body.has-video .board{--cw:44px;}
  body.has-video .pot-tag{--pd:38px;}
  body.has-video .bet{--pd:36px;}
  body.has-video .seat.hero .bet{--pd:34px;}
  body.has-video .hero .hole{--cw:40px;}
  body.has-video .seat.s1{--sx:18%;--sy:68%;}
  body.has-video .seat.s2{--sx:82%;--sy:68%;}
  body.has-video .seat.s3{--sx:30%;--sy:47%;}
  body.has-video .seat.s4{--sx:70%;--sy:47%;}
  body.has-video .seat.hero{--sy:84%;}
  body.has-video .seat.s1 .hole,body.has-video .seat.s2 .hole{--cw:34px;}
  .ui{gap:5px;padding:6px 8px 8px;}
  .rack{--rd:30px;gap:5px;}
  .act{padding:9px 13px;font-size:11px;}
  .btoast{top:104px;}
}
@media (max-height:500px) and (max-width:900px){
  .tools{top:calc(100px + env(safe-area-inset-top,0px));}
}
@media (min-aspect-ratio:4/5){
body.has-video .fair{position:fixed;left:14px;bottom:12px;max-width:300px;
  font-size:8.5px;text-align:left;z-index:13;}
}
@media (max-height:800px){
  body.has-video .board{--cw:50px;}
  body.has-video .pot-tag{--pd:44px;}
  body.has-video .bet{--pd:42px;}
  body.has-video .seat.hero .bet{--pd:40px;}
  body.has-video .hero .hole{--cw:46px;}
  body.has-video .seat.hero{gap:4px;}
  body.has-video .seat.s3 .hole,body.has-video .seat.s4 .hole{--cw:32px;}
}
@media (max-height:700px){
  body.has-video .msg{top:64px;}
  body.has-video .hintline{display:none;}
  /* let the table box scale with the viewport so % seats stay on felt */
  .table{min-height:0;}
  /* tall teaser cluster would eat a quarter of a short screen */
  #connBtn{display:none;}
  .connWhy{display:none;}
  .wordmark{height:34px;}
}
@media (max-aspect-ratio:4/5){
  .table{top:36%;width:96vw;height:44vh;min-height:300px;}
  body.has-video .table{top:52%;height:56vh;}
  body.has-video .board-wrap{--board-y:60%;}
  body.has-video .seat.s1{--sx:12%;--sy:62%;scale:.8;}
  body.has-video .seat.s2{--sx:88%;--sy:62%;scale:.8;}
  body.has-video .seat.s3{--sx:22%;--sy:27%;scale:.78;}
  body.has-video .seat.s4{--sx:78%;--sy:27%;scale:.78;}
  body.has-video .seat.s3 .hole,body.has-video .seat.s3 .pill,body.has-video .seat.s3 .bet,
  body.has-video .seat.s3 .seat-tag,body.has-video .seat.s3 .hand-name,
  body.has-video .seat.s4 .hole,body.has-video .seat.s4 .pill,body.has-video .seat.s4 .bet,
  body.has-video .seat.s4 .seat-tag,body.has-video .seat.s4 .hand-name{order:initial;}
  body.has-video .seat.hero{--sy:84%;}
  body.has-video .hero .hole{--cw:44px;}
  body.has-video .shoe{right:1%;top:64%;}
  body.has-video .muck{opacity:0;right:calc(1% + 34px + 8px);top:65%;}
  body.has-video .msg{top:198px;}
  body.has-video .hintline{top:232px;}
  body.has-video .btoast{top:265px;}
  /* the $POKER teaser already lives in the tools row — hide its twin so the
     header stops colliding with the tools on narrow screens */
  #connBtn{display:none;}
  .tools::-webkit-scrollbar{display:none;}
  .seat.s1{--sx:8%;}.seat.s2{--sx:92%;}
  .seat.hero{--sy:84%;gap:4px;}
  .bet{--pd:40px;}
  .seat.hero .bet{--pd:48px;}
  .pot-tag{--pd:42px;}
  .rack{--rd:clamp(36px,10.5vw,48px);gap:6px;}
  .hero .hand-name{display:none;}
  .shoe{--shoe-w:34px;right:3%;top:6%;}
  .muck{right:calc(3% + 34px + 8px);top:7%;width:26px;height:37px;}
  .hero .hole{--cw:56px;}.hole{--cw:38px;}
  .board{--cw:46px;}
  body.has-video .board{--cw:34px;}
  body.has-video .shoe{opacity:0;}
  body.has-video .muck{opacity:0;}
  body.has-video .pot-tag{--pd:38px;}
  body.has-video .bet{--pd:38px;}
  body.has-video .seat.hero .bet{--pd:40px;}
  .hand-name{font-size:11px;}
  .top{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;}
  .brand{gap:5px;}
  .wordmark{height:30px;}
  .bank b{font-size:24px;}
  .room i{display:none;}
  .connWhy{display:none;}
  .btoast{top:calc(130px + env(safe-area-inset-top,0px));}
  .grids{grid-template-columns:1fr;}
  .pod{flex-direction:column;align-items:stretch;gap:8px;}
  .pc,.pc.p1{order:0;padding:12px;display:flex;align-items:center;gap:12px;text-align:left;}
  .pc .mdl{margin:0;flex:none;}
  .pc .ad{flex:1;}
  .pc .cr,.pc.p1 .cr{margin-top:0;font-size:18px;}
  .pc .hd{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .card{animation:none;}
  #voiceBtn.cta,#micBtn.cta,#micBtn.live::before{animation:none;}
  .btoast,.gate,.top,.ui,.tools{transition:none;}
}