.bj-stage{container-type:inline-size}.bj-stage>img{width:100%;height:auto;display:block}.bj-stage .stage-caption{color:#e0dbc9;text-shadow:0 1px 4px #000}.bj-stage .stage-caption span{color:#a8ac9a}#felt-cards{position:absolute;inset:0;pointer-events:none}.bj-status{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:60px;border-bottom:1px solid var(--line)}.bj-status #status{position:static;font:16px Georgia,serif;text-align:left;color:#e5d7b9;margin:0}.bj-status>span{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.hands{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px 0;border-bottom:1px solid var(--line);min-height:135px}.hand{display:flex;align-items:center;gap:20px;min-width:0}.hand-label{width:90px;flex-shrink:0}.hand-label h2{font:9px Arial,sans-serif;letter-spacing:1.4px;margin:0 0 10px;color:var(--muted)}.hand-label output{font:28px Georgia,serif}.hand-label>span{display:block;font-size:10px;color:var(--muted);margin-top:3px;min-height:11px}.hand-cards{display:flex;flex-wrap:wrap;gap:8px;min-height:74px;align-items:center;min-width:0}.hand-cards:empty:after{content:"Waiting for cards";font-size:11px;color:#718375}.hand-cards .card{position:relative;width:52px;height:73px;flex-shrink:0;transform:none;filter:none;box-shadow:1px 2px 3px #0007;border-radius:3px}.card.back{background:repeating-linear-gradient(42deg,#853b31 0,#853b31 2px,#984b3c 2px,#984b3c 3px);border:4px solid #d7c8aa;box-shadow:inset 0 0 0 1px #bc9977,1px 2px 4px #0008}.card.back:after{content:"";position:absolute;inset:30% 25%;border:1px solid #c5a783;transform:rotate(45deg);border-radius:2px}.on-felt.card{width:3.8%;height:9.4%;transform:perspective(15cqw) rotateX(42deg);animation:card-appear 180ms ease-out both}.on-felt.card.player{width:4.4%;height:10.9%;transform:perspective(17cqw) rotateX(42deg)}.hand-cards .card{animation:card-appear 180ms ease-out both}@keyframes card-appear{from{opacity:0}to{opacity:1}}.bj-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}.study{display:flex;align-items:flex-end;gap:12px}.study select{min-width:175px;height:40px}.decisions{display:flex;gap:10px}.decisions[hidden]{display:none}.decisions button{background:#203d2e;border-color:#526c51;color:#e6dec9;min-width:80px}.decisions button:disabled{background:#1b2820;opacity:.4}.settlement{display:flex;justify-content:space-between;gap:24px;padding:20px 24px;background:#18271e;border-top:1px solid #405642;border-bottom:1px solid #405642}.settlement>div{display:flex;flex-direction:column;gap:9px}.settlement span{font-size:8px;color:#a1ae9c;letter-spacing:1px}.settlement strong{font:20px Georgia,serif;color:#e6d3ac}.settlement>div:last-child{text-align:right}.rules{font-size:11px;color:#a4afa0;line-height:1.8;border-bottom:1px solid var(--line);padding:16px 0}.rules summary{cursor:pointer;color:#c6cbb9;min-height:26px}.rules p{max-width:850px;margin:10px 0}.bj-controls button{min-height:40px;padding:12px 20px}.bj-status.error #status{color:#eeb6a2}
@media(prefers-reduced-motion:reduce){.on-felt.card,.hand-cards .card{animation:none}}
/* A split moves one card of the pair to its own hand, and hands re-space as they grow: slide, don't jump. */
.on-felt.card{transition:left .32s ease-out,top .32s ease-out}
@media(prefers-reduced-motion:reduce){.on-felt.card{transition:none}}
@media(max-width:900px){.hands{gap:16px}.hand{gap:12px}.hand-label{width:78px}.hand-cards{gap:6px}.hand-cards .card{width:40px;height:57px}.bj-controls{gap:16px}.bj-controls button{padding:12px 15px}.decisions button{min-width:64px}.study select{min-width:150px}}
@media(max-width:700px){.bj-status{min-height:57px;align-items:flex-start;justify-content:center;flex-direction:column;gap:6px;padding:10px 0}.bj-status #status{font-size:13px}.bj-status>span{font-size:7px;letter-spacing:1px}.hands{grid-template-columns:1fr;padding:16px 0;gap:16px}.hand{gap:12px}.hand-label{width:82px}.hand-label h2{font-size:8px;margin-bottom:6px;letter-spacing:1px}.hand-label output{font-size:23px}.hand-cards{min-height:60px;gap:7px}.hand-cards .card{width:42px;height:59px}.bj-controls{flex-direction:column;align-items:stretch;gap:16px;padding:18px 0}.study{justify-content:space-between}.study select{min-width:184px}.decisions button{flex:1}.decisions{width:100%;gap:10px}.settlement{padding:17px 12px;gap:12px}.settlement span{font-size:7px;letter-spacing:.5px;max-width:102px;line-height:1.5;min-height:21px}.settlement strong{font-size:17px}.rules{font-size:10px}.bj-stage .stage-caption{font-size:6px;top:10px;left:10px}.bj-stage .stage-caption span{font-size:5px;letter-spacing:.5px}.on-felt.card.back{border-width:1px}}
@media(max-width:380px){.hand-label{width:71px}.hand-cards{gap:5px}.hand-cards .card{width:34px;height:48px}.study select{min-width:155px}.title>span{max-width:116px;display:block;line-height:1.5}}
/* The card itself is a size container only for its children. Its own filter must
   use the stage width, not cqh (which otherwise falls back to the viewport). */
.on-felt.card{width:3.4%;height:8.4%;transform:perspective(50cqw) rotateX(42deg);filter:saturate(.92) contrast(.96) blur(.025cqw);box-shadow:.1cqw .15cqw .3cqw #0007,inset 0 0 0 .04cqw #604f364d}
.on-felt.card.player{width:4.4%;height:10.9%;transform:perspective(50cqw) rotateX(42deg)}
.settlement>div{flex:1;min-width:0}.settlement>div:last-child{flex:1.45}
.camera-frame{position:relative;width:100%;transform-origin:0 0}.camera-frame>img{display:block;width:100%;height:auto}.camera-frame[data-shot=dealer]{transform:translate(-85.15%,-130.2%) scale(2.65)}.bj-stage{aspect-ratio:16/9}.bj-stage .views{z-index:2}.bj-stage .stage-caption{z-index:2}
@media(max-width:700px){.bj-stage .views{top:4px;right:5px;gap:2px}.bj-stage .views button{padding:6px;font-size:8px}.bj-stage .stage-caption{max-width:48%}}
@media(max-width:380px){.settlement strong{font-size:14px}.settlement{gap:10px}}
.camera-frame>video{display:block;width:100%;height:auto;aspect-ratio:16/9}.camera-frame>[hidden],#felt-cards[hidden]{display:none}.stage-caption b{font-weight:inherit}.motion-controls{display:flex;align-items:center;gap:14px;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0}.motion-controls strong{font:16px Georgia,serif;color:#e6d3ac}.motion-controls p,.motion-limits{font-size:10px;line-height:1.7;color:#a4afa0;margin:6px 0}.motion-controls button{min-height:42px;padding:10px 16px;flex-shrink:0}.motion-controls button[hidden]{display:none}.motion-limits{max-width:850px;margin-top:14px}
#dealer-idle{position:absolute;inset:0;pointer-events:none}.idle-control{display:flex;align-items:center;gap:14px;padding:12px 0;color:var(--muted);font-size:10px}.idle-control button{font-size:10px;padding:9px 13px}.idle-control button[aria-pressed=true]{border-color:#a59263;color:#e6d3ac}
@media(max-width:700px){.motion-controls{align-items:stretch;flex-direction:column;gap:8px}.motion-controls button{width:100%}}
/* Player hands: one strip normally; after a split, one labelled strip per hand, the active one marked. */
[data-dev][hidden],.decisions button[hidden]{display:none!important}
.player-hand-list{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:74px;justify-content:center}.player-hand-list:empty:after{content:"Waiting for cards";font-size:11px;color:#718375}
.seat-label{display:none;margin:0;font-size:9px;letter-spacing:1px;color:var(--muted);gap:8px;align-items:baseline}.seat-label output{font:15px Georgia,serif;color:#e6dec9}.seat-label span{color:#c8b88f}
.player-hand-list.split{flex-direction:row;flex-wrap:wrap;gap:10px 14px;justify-content:flex-start}.player-hand-list.split .seat-label{display:flex}
.player-hand-list.split .seat-hand{padding:6px 8px;border:1px solid transparent;border-radius:4px}.player-hand-list.split .seat-hand.active{border-color:#a59263;background:#1d3226}
.player-hand-list.split .hand-cards{min-height:55px;gap:4px}.player-hand-list.split .hand-cards .card{width:38px;height:53px}.player-hand-list.split .hand-cards:empty:after{content:""}
.on-felt.card.active-hand{box-shadow:0 0 0 .14cqw #e6c56f,.1cqw .15cqw .3cqw #0007}
@media(max-width:700px){.player-hand-list.split{gap:6px 8px}.player-hand-list.split .seat-hand{padding:4px 5px}.player-hand-list.split .hand-cards .card{width:30px;height:42px}.seat-label{font-size:8px}.seat-label output{font-size:13px}}

/* The live table carries no study controls: the caption, digital camera crops and idle toggle
   belong to the studio preview (reduced motion still pauses the idle). */
.bj-live .bj-stage .stage-caption,.bj-live .bj-stage .views,.bj-live .idle-control:has(#idle-motion){display:none}

/* --- live table, desktop: the table camera fills the window; the hand readouts, decisions and
   settlement float over it, as on a live broadcast table. Portrait and narrow screens keep the
   stacked layout above. */
@media (min-width:900px) and (min-aspect-ratio:4/3) and (min-height:560px){
  html:has(>body.bj-live),body.bj-live{height:100%;overflow:hidden;background:#000}
  .bj-live main{max-width:none;padding:0}
  .bj-live header{position:fixed;top:0;left:0;right:0;z-index:4;height:52px;padding:0 20px;gap:22px;border:0;background:linear-gradient(#000000b8,#0000)}
  .bj-live header .local{display:none}
  .bj-live .brand{font-size:20px}.bj-live .brand span{margin-top:5px}.bj-live h1{font-size:20px;margin-bottom:3px}.bj-live .title{padding-left:20px}
  /* Cover the window with the 16:9 camera: overflow is cropped, never letterboxed. */
  .bj-live .bj-stage{position:fixed;left:50%;top:50%;z-index:0;width:max(100vw,177.78vh);margin:0;border:0;transform:translate(-50%,-50%)}
  .bj-live .bj-status{position:fixed;z-index:3;top:62px;left:50%;transform:translateX(-50%);min-height:0;padding:9px 22px;border:1px solid #d1b37b88;border-radius:30px;background:#07100ccc;backdrop-filter:blur(6px)}
  .bj-live .bj-status #status{font:600 15px Georgia,serif;letter-spacing:.5px;white-space:nowrap}
  .bj-live .bj-status>span{display:none}
  .bj-live #session-info{position:fixed;z-index:4;top:0;right:150px;height:52px;display:flex;align-items:center;margin:0;font-size:10px;letter-spacing:.4px;color:#b9c0b3}
  .bj-live .idle-control:has(#table-sound){position:fixed;z-index:4;top:0;right:20px;height:52px;padding:0}
  .bj-live .idle-control:has(#table-sound) #sound-note{display:none}
  /* The readouts keep to the strip left of the felt: no card is dealt left of d1 (x 283 of the
     1024-wide take, 27.6% of the stage, which covers the window centred), so a readout never
     covers one however many cards it lists. Its cards wrap; a narrow strip puts the label above. */
  .bj-live .hands{position:fixed;z-index:3;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;padding:0;border:0;min-height:0;max-width:min(430px,34vw,calc(50vw - .2237*max(100vw,177.78vh) - 32px))}
  .bj-live .hand{flex-wrap:wrap;row-gap:8px;padding:10px 14px;border:1px solid #ffffff1c;border-radius:10px;background:#07120dd0;backdrop-filter:blur(6px)}
  .bj-live .hand>.hand-cards,.bj-live .player-hand-list{flex:1 1 92px}.bj-live .seat-hand{min-width:0;max-width:100%}
  .bj-live .hand:nth-child(2){order:-1}
  .bj-live .hand-cards,.bj-live .player-hand-list{min-height:60px}
  .bj-live .hand-cards .card{width:42px;height:59px}
  /* The table camera frames the player's cards along the bottom edge: decisions sit to the right. */
  .bj-live .bj-controls{position:fixed;z-index:3;right:24px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:stretch;padding:0;gap:12px}
  .bj-live .bj-controls .study,.bj-live .bj-controls .decisions{flex-direction:column;align-items:stretch;gap:10px}
  .bj-live .bj-controls button{border-radius:24px;min-width:128px;box-shadow:0 4px 16px #0009}
  /* Unavailable decisions dim in place: a button never moves under a pointer between decisions. */
  .bj-live .decisions button:disabled{opacity:.3}
  .bj-live .settlement{position:fixed;z-index:3;left:0;right:0;bottom:18px;padding:10px 24px 8px;border:0;background:linear-gradient(#0000,#000000c8 40%)}
  .bj-live details.rules:not([data-dev]){position:fixed;z-index:4;top:60px;left:20px;max-width:420px;max-height:60vh;overflow:auto;padding:6px 12px;border:1px solid #ffffff1c;border-radius:8px;background:#07120de6}
  .bj-live footer{position:fixed;z-index:4;left:0;right:0;bottom:0;padding:0 24px 4px;font-size:9px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000000c8;color:#8f9a90}
}

/* --- Live table controls (reference: chip rack, UNDO, REPEAT/2x, DEAL NOW; decision panel 2x + −). */
.bj-live .study:not([hidden]){display:flex}.bj-controls [hidden]{display:none!important}
.betting{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.chips{display:flex;gap:8px;justify-content:center}
.chips button{width:52px;height:52px;min-height:0;padding:0;border-radius:50%;font:600 13px Georgia,serif;color:#fff;
  border:3px dashed #ffffffb0;box-shadow:inset 0 0 0 3px #0003,0 3px 10px #0008;background:#8d2f2a}
.chips [data-chip="1"]{background:#6c7780}.chips [data-chip="5"]{background:#a83a2f}.chips [data-chip="10"]{background:#2c5d8f}.chips [data-chip="25"]{background:#2e7a4d}
.chips [data-chip="100"]{background:#262a31}.chips [data-chip="500"]{background:#6a3c8f}
.chips button:disabled{opacity:.3}
.bet-actions{display:flex;gap:8px}.bet-actions button{flex:1;min-width:0;border-radius:22px;background:#203d2e;border-color:#526c51;color:#e6dec9}
.bet-actions #deal-now{background:#d1b37b;border-color:#d1b37b;color:#152018}
.decisions button i{font-style:normal;font-weight:700;margin-right:6px;color:#e6c56f}
#paused button{background:#d1b37b;color:#152018;border-color:#d1b37b}
.bj-status #timer{font:700 18px Georgia,serif;color:#e6d3ac;min-width:26px;text-align:center}
.bj-status.closing #status,.bj-status.closing #timer{color:#f0c850}
#session-info:empty,#sound-note:empty{display:none}

/* --- Seat badges over the table (reference: total per hand, yellow while acting, result mark). */
.bj-stage .badges{position:absolute;inset:0;z-index:2;pointer-events:none}
.badge{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:2.9cqw;padding:.35cqw .55cqw;border-radius:1.4cqw;background:#101512e8;border:.14cqw solid #ffffff55;
  color:#f3ecdc;font:700 1.35cqw/1 Arial,sans-serif;text-align:center;box-shadow:0 .2cqw .6cqw #0009;animation:badge-in .18s ease-out both}
.badge small{font:700 .72cqw/1 Arial,sans-serif;letter-spacing:.05cqw}
.badge.active{background:#f0c850;color:#1c1a10;border-color:#fff3c4}
.badge.dealer.active{background:#c9b04a;color:#1c1a10}
.badge.won{border-color:#e6c56f}.badge.won small{color:#f0c850}
.badge.lost small{color:#ff8f7d}.badge.lost{border-color:#c75b4a}
.badge.push small{color:#b9d4ff}
@keyframes badge-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.badge{animation:none}}
@media(max-width:700px){.badge{font-size:2.9cqw;min-width:6cqw;padding:.7cqw 1.1cqw;border-radius:3cqw}.badge small{font-size:1.6cqw}}

/* --- Narrow screens (390px phone): stacked, chips in one row, decisions full width. */
@media(max-width:700px){
  .bj-live main{padding:0 16px}
  .bj-live header{height:64px}
  .bj-live .bj-status{flex-direction:row;align-items:center;justify-content:space-between;min-height:48px}
  .bj-live .bj-status>span{display:none}
  .bj-live .bj-status #status{font-size:15px;letter-spacing:.4px}
  .chips{justify-content:space-between;gap:4px}.chips button{width:50px;height:50px}
  .bj-live .bj-controls{padding:14px 0}
  .bj-live .decisions button{min-width:0;padding:12px 6px}
  .settlement>div:last-child{text-align:right}
  .bj-live .sound-control{padding:6px 0}
  .bj-live #session-info{font-size:11px;color:var(--muted);margin:8px 0 0;letter-spacing:.3px}
}

/* --- Desktop live table: decisions and chips float right of the camera. */
@media (min-width:900px) and (min-aspect-ratio:4/3) and (min-height:560px){
  .bj-live .bj-status{display:flex;gap:12px;align-items:center}
  .bj-live .bj-controls .betting{gap:12px}
  .bj-live .chips{flex-direction:column;align-items:center}
  .bj-live .bet-actions{flex-direction:column}
  .bj-live .bet-actions button{min-width:128px}
  .bj-live .decisions button i{display:inline-block;width:22px}
  .bj-live .settlement{justify-content:flex-start;gap:60px}.bj-live .settlement>div{flex:none}
}

/* ===== The shared three-seat table (body.bj-table, BLACKJACK_TABLE=shared) =====
   The video is the whole game screen, laid out as Evolution's live blackjack (docs/evolution-reference-
   sheet-20260929.md, frames of AZ2sb5B_JmA and KQHX1btV2Xs). Desktop: the 16:9 stage covers the window,
   cropped no further than the safe frame (x 16-84 %, y 2-98 %: the dealer, every card slot and seat), so
   an ultrawide window letterboxes instead. The table name sits small at top left and the icons at top
   right; the round's controls float centre-frame in front of the dealer (PLACE YOUR BETS over an arc of
   chips, Undo and Repeat beside it, the clock and its bar under it, Deal now under that; the decision
   tiles over his chest; the results there too); chips, names and totals sit on the felt at the stage's
   own slot geometry (web/bj3-stage.mjs slotQuad); a thin strip along the bottom edge carries the credits
   and the rules and lobby links. Portrait phones (Evolution mobile): the video on top running into the
   felt below, the seats and your cards under it, and the controls in the lower part for the thumb.
   Landscape phones: the desktop layout at touch sizes. */
@font-face{font-family:'Libertine';src:url('fonts/libertine-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Libertine';src:url('fonts/libertine-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/plex-mono-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
body:not(.bj-table) .shared-only{display:none!important}
.bj-table .single-only{display:none!important}
body:not(.footage) .footage-only{display:none!important}
.bj-table{
  --serif:'Libertine','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cream:#f2ead9;--cream-2:#d9d1bd;--cream-3:#a29a86;--red:#b3352b;--red-hi:#e0533f;--felt:#1f4a39;--felt-hi:#2f7a4f;--ink:#121513;
  --glass:rgba(8,10,9,.5);--glass-2:rgba(8,10,9,.72);--edge:rgba(242,234,217,.18);--active:#f3d36b;--go:#4fbf6f;
  --shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.65);
  --vtop:env(safe-area-inset-top,0px);
  /* the stage (16:9) and the part of it on screen, the game surface */
  --sw:min(max(100vw,100vh*16/9),100vw/.68,100vh*1.85);
  --sw:min(max(100vw,100dvh*16/9),100vw/.68,100dvh*1.85);
  --sh:calc(var(--sw)*9/16);
  --gw:min(100vw,var(--sw));--gh:min(100vh,var(--sh));--gh:min(100dvh,var(--sh));
  --chip:clamp(38px,calc(var(--gw)*.031),56px);
  background:#050706;font-family:var(--sans);
}
html:has(>body.bj-table),body.bj-table{height:100%;overflow:hidden;overscroll-behavior:none}
.bj-table main{max-width:none;margin:0;padding:0}
.bj-table header,.bj-table .bj-status,.bj-table #session-info,.bj-table .sound-control,.bj-table .settlement,
.bj-table details.rules,.bj-table footer,.bj-table .idle-control{display:none!important}
.bj-table [hidden]{display:none!important}
.bj-table output{min-width:0}

/* --- the stage: the footage (or the digital layout) and everything pinned to the felt */
.bj-table .bj-stage{position:fixed;z-index:0;left:calc(50vw - var(--sw)/2);top:calc(50vh - var(--sh)/2);top:calc(50dvh - var(--sh)/2);
  width:var(--sw);height:var(--sh);margin:0;border:0;background:#0b0f0d;overflow:hidden}
body.footage .camera-frame{height:100%}
#bj3-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;background:#0b0f0d}
/* the close-up dealing camera (option B): over the wide, shown from the cut at BETS CLOSED to the result */
#bjc-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;background:#0b0f0d}
.table-label{position:absolute;z-index:3;top:9%;left:50%;transform:translateX(-50%);margin:0;padding:.4cqw .9cqw;border-radius:99px;
  background:var(--glass);color:var(--cream-2);font:400 max(10px,.9cqw)/1.3 var(--sans);white-space:nowrap}
.seat-spots{position:absolute;inset:0;z-index:2;pointer-events:none}
.seat-spots>*{position:absolute;pointer-events:auto}
/* the chips on a seat's bet circle */
.seat-bet{transform:translate(-50%,-50%);display:grid;place-items:center;width:max(26px,2.5cqw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--red) 0 54%,#f2ead9 55% 59%,var(--red) 60%);box-shadow:0 .12cqw .35cqw #000c,inset 0 0 0 1px #0004;
  color:#fff;font:500 max(9px,.78cqw)/1 var(--mono);text-shadow:0 1px 1px #0008;pointer-events:none!important}
.seat-bet::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -9deg,#f2ead9 0 18deg,transparent 18deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 0 72%,#000 73% 95%,transparent 96%);mask:radial-gradient(circle,transparent 0 72%,#000 73% 95%,transparent 96%)}
.seat-bet span{position:relative}
.seat-bet.mine{box-shadow:0 0 0 max(2px,.16cqw) var(--active),0 .12cqw .35cqw #000c}
/* the seat's name, small under its circle: yours in yellow; a seat that acts gets a yellow tag and its clock */
.seat-name{transform:translateX(-50%);display:flex;align-items:center;gap:.35cqw;padding:.12cqw .5cqw;border-radius:99px;white-space:nowrap;
  color:var(--cream-2);font:600 max(10px,.95cqw)/1.2 var(--serif);text-shadow:var(--shadow);background:none;border:0;min-height:0}
.seat-name b{font-weight:600;max-width:10cqw;overflow:hidden;text-overflow:ellipsis}
.seat-name.mine{color:var(--active)}
.seat-name.active{background:var(--active);color:var(--ink);text-shadow:none}
.seat-name.target{outline:max(2px,.14cqw) solid var(--cream);outline-offset:1px}
button.seat-name{cursor:pointer}
.seat-name .act{font:700 max(10px,.85cqw)/1 var(--mono);font-style:normal;padding:.1cqw .35cqw;border-radius:99px;background:var(--glass-2);text-shadow:none}
.seat-name .act.act-hit{color:#9fe0a8}.seat-name .act.act-stand{color:#ff9a88}.seat-name .act.act-double{color:#f6b45a}.seat-name .act.act-split{color:var(--cream)}
.seat-clock{position:relative;display:inline-grid;place-items:center;width:max(20px,1.8cqw);height:max(20px,1.8cqw);flex:none}
.seat-clock svg,.timer .dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.seat-clock output,.timer output{position:absolute;inset:0;display:grid;place-items:center;min-width:0}
.seat-clock output{font:500 max(9px,.75cqw)/1 var(--mono);color:inherit}
.seat-clock .track,.timer .track{fill:none;stroke:#f2ead92e;stroke-width:3.4}
.seat-clock .fill,.timer .fill{fill:none;stroke:var(--go);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.seat-name.active .seat-clock .track{stroke:#12151333}.seat-name.active .seat-clock .fill{stroke:var(--ink)}
.low .fill,.seat-clock.low .fill{stroke:var(--red-hi)!important}
/* Sit here: on the empty seat's own bet circle */
.seat-sit{transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:0;
  width:var(--d);height:calc(var(--d)*.64);min-width:44px;min-height:44px;padding:0;border-radius:50%;border:max(2px,.16cqw) dashed #f2ead9b3;
  background:radial-gradient(circle,#0b0f0d99,#0b0f0d55);color:var(--cream);font:600 max(10px,.82cqw)/1.05 var(--sans);cursor:pointer;
  transition:background .15s,border-color .15s}
.seat-sit:hover,.seat-sit:focus-visible{background:#1f4a39cc;border-style:solid;border-color:var(--cream)}
.seat-sit span{display:block;max-width:90%;text-align:center}.seat-sit em{font:400 max(14px,1.4cqw)/1 var(--sans);font-style:normal}
.bj-table .seat-spots :focus-visible,.bj-table .hud :focus-visible{outline:2px solid var(--cream);outline-offset:2px}

/* totals beside the cards (small and square, as Evolution's), the dealer's by his first card; yellow while that hand acts */
.bj-table .badges{position:absolute;inset:0;z-index:2;pointer-events:none}
.bj-table .badge{position:absolute;transform:translate(-100%,-50%);display:flex;flex-direction:column;align-items:center;gap:.1cqw;min-width:2.1cqw;
  padding:.22cqw .4cqw;border-radius:.35cqw;background:rgba(10,12,11,.82);border:1px solid #f2ead933;color:#fff;
  font:500 max(10px,1cqw)/1 var(--mono);text-align:center;box-shadow:0 .1cqw .4cqw #0009;animation:badge-in .18s ease-out both}
.bj-table .badge.right{transform:translate(0,-50%)}
/* the hand's cards as crisp digital mini-cards beside its total (Evolution), any screen size */
.bj-table .badge{flex-direction:row;gap:.35cqw}.bj-table .badge .score{display:flex;flex-direction:column;align-items:center;gap:.1cqw}
.bj-table .badge.right{flex-direction:row-reverse}
.bj-table .badge .mcs{display:flex}
.bj-table .mc{display:flex;flex-direction:column;align-items:center;justify-content:center;width:max(17px,1.45cqw);height:max(24px,2.05cqw);
  border-radius:max(2px,.18cqw);background:#fbf8f1;color:#151517;box-shadow:0 0 0 1px #0000002e,0 .05cqw .2cqw #0008;
  font:800 max(11px,.95cqw)/1 var(--sans);letter-spacing:-.04em}
.bj-table .mc+.mc{margin-left:max(-6px,-.4cqw)}
.bj-table .mc i{font:400 max(10px,.85cqw)/1 var(--sans);font-style:normal;margin-top:.04cqw}
.bj-table .mc.red{color:#c4122a}
.bj-table .mc.back{background:repeating-linear-gradient(45deg,#8a2f2a 0 2px,#a64239 2px 4px);box-shadow:inset 0 0 0 max(2px,.15cqw) #f3ece0,0 .05cqw .2cqw #0008}
@media(max-width:700px){.bj-table .mc{width:15px;height:21px;font-size:10px}.bj-table .mc i{font-size:9px}}
/* phone readouts: the same digital cards, larger (the video's cards are small there) */
.bj-table .mini-cards{display:flex;align-items:center}
.bj-table .mini-cards .mc{width:22px;height:31px;font-size:14px;border-radius:3px}.bj-table .mini-cards .mc i{font-size:12px}
.bj-table .mini-cards .mc+.mc{margin-left:-5px}
.bj-table .badge small{font:700 max(7px,.58cqw)/1 var(--sans);letter-spacing:.02em}
.bj-table .badge.active{background:var(--active);color:var(--ink);border-color:#fff3c4}
.bj-table .badge.dealer.active{background:#d9bf55;color:var(--ink)}
.bj-table .badge.won{background:var(--felt-hi);border-color:#bfe6c9}.bj-table .badge.won small{color:#eafff0}
.bj-table .badge.lost{background:#5a1d18;border-color:var(--red-hi)}.bj-table .badge.lost small{color:#ffc2b6}
.bj-table .badge.push{border-color:#c9d3d8}.bj-table .badge.push small{color:#dfe7ea}
.on-felt.card.incoming{opacity:.5;animation:incoming .6s ease-in-out infinite alternate}
@keyframes incoming{from{opacity:.25}to{opacity:.6}}
#felt-cards.collecting .on-felt.card{opacity:.15;transition:opacity 2.4s ease-in,left .32s,top .32s}

/* --- the game surface's overlays */
.bj-table .hud{position:fixed;z-index:3;left:calc(50vw - var(--gw)/2);top:calc(50vh - var(--gh)/2);top:calc(50dvh - var(--gh)/2);width:var(--gw);height:var(--gh);
  pointer-events:none;color:var(--cream);font-family:var(--sans);
  --y0:calc((var(--sh) - var(--gh))/2);
  --pl:max(14px,env(safe-area-inset-left));--pr:max(14px,env(safe-area-inset-right));--pb:max(6px,env(safe-area-inset-bottom));--pt:max(10px,env(safe-area-inset-top))}
.bj-table .hud button,.bj-table .hud a,.bj-table .hud-panel{pointer-events:auto}
.bj-table .hud button{font:600 13px/1.1 var(--sans);letter-spacing:0;color:var(--cream);background:var(--glass-2);border:1px solid #f2ead938;border-radius:99px;
  min-height:36px;padding:7px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .12s,border-color .12s,transform .08s}
.bj-table .hud button:hover:not(:disabled){border-color:#f2ead9a0;background:#1b231ee6}
.bj-table .hud button:active:not(:disabled){transform:scale(.96)}
.bj-table .hud button:disabled{opacity:.38;cursor:default}
.bj-table .hud button.primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.bj-table .hud button.primary:hover:not(:disabled){background:#fff8e8}
.hud .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hud .ico .fill{fill:currentColor;stroke:none}

/* top: the table name small at left, the icons small at right */
.hud-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:var(--pt) var(--pr) 0 var(--pl)}
.hud-table{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border-radius:99px;background:var(--glass);pointer-events:auto}
.hud-home{display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.hud-home .mark{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px #0008)}
.hud-name{margin:0;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.hud-name b{font:600 15px/1 var(--serif);letter-spacing:.01em}.hud-name span{font:500 11px/1 var(--mono);color:var(--cream-2)}
.hud-icons{display:flex;gap:6px}
.bj-table .hud .icon{width:34px;height:34px;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--glass);border-color:#f2ead926}
.hud .icon .ico{width:18px;height:18px}
#h-sound .off{display:none}#h-sound[aria-pressed=false] .on{display:none}#h-sound[aria-pressed=false] .off{display:inline}
#h-sound[aria-pressed=false]{color:var(--cream-3)}
#table-brand[aria-pressed=true]{color:#e6c37a}
.bj-table .hud .icon[aria-expanded=true],.bj-table .hud .icon[aria-expanded=true]:hover{background:var(--cream);color:var(--ink)}

/* centre-frame, in front of the dealer: the round's message and controls (stage y 35 % down) */
.hud-center{position:absolute;left:0;right:0;top:calc(var(--sh)*.35 - var(--y0));display:grid;justify-content:center;justify-items:center;align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:14px;
  grid-template-areas:"status status status" "flash flash flash" "targets targets targets" "spots spots spots" "undo chips repeat" ". ring ." ". deal ." "follow follow follow" "dec dec dec" "acted acted acted" "ins ins ins" "wait wait wait" "paused paused paused"}
.hud-center>*{pointer-events:auto}
.hud-banner{grid-area:status;margin:0 0 10px;pointer-events:none!important;text-align:center}
#h-status{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;font:600 clamp(16px,calc(var(--gh)*.029),27px)/1.15 var(--serif);
  letter-spacing:.04em;color:#fff;text-shadow:var(--shadow);white-space:nowrap}
#h-status b{font:500 clamp(22px,calc(var(--gh)*.042),40px)/1.1 var(--mono);letter-spacing:0}
.hud-banner.win #h-status,.hud-banner.lose #h-status{padding:10px 30px;border-radius:6px;background:rgba(8,10,9,.74);text-shadow:none}
.hud-banner.win #h-status span{font-size:.75em;color:var(--cream-2)}
.hud-banner.closing #h-status{color:#ffd77a}
#h-status:empty{visibility:hidden;min-height:1.15em}
.hud-banner.quiet #h-status{font-size:clamp(13px,calc(var(--gh)*.021),19px);opacity:.9}
.hud-banner.error #h-status{padding:8px 20px;border-radius:6px;background:#3a120ed9;text-shadow:none}
.bj-table .t-targets{grid-area:targets;display:flex;gap:6px;margin:0 0 10px}
.bj-table .hud .t-targets button{min-height:30px;padding:5px 12px;font-size:12px}
.bj-table .hud .t-targets button[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
/* the chips: a shallow arc */
.bj-table .chips{grid-area:chips;display:flex;align-items:flex-start;gap:calc(var(--chip)*.16);margin:0}
.bj-table .hud .chip{--c:var(--red);position:relative;width:var(--chip);height:var(--chip);min-height:0;padding:0;border-radius:50%;
  border:0;background:radial-gradient(circle,var(--c) 0 55%,#f2ead9e6 56% 60%,var(--c) 61%);color:#fff;font:500 clamp(10px,calc(var(--chip)*.29),16px)/1 var(--mono);
  box-shadow:inset 0 0 0 2px #0003,0 3px 10px #000a}
.bj-table .hud .chip::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -9deg,#f2ead9 0 18deg,transparent 18deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 0 73%,#000 74% 95%,transparent 96%);mask:radial-gradient(circle,transparent 0 73%,#000 74% 95%,transparent 96%)}
.bj-table .hud .chip:nth-child(1),.bj-table .hud .chip:nth-child(6){transform:translateY(calc(var(--chip)*.3))}
.bj-table .hud .chip:nth-child(2),.bj-table .hud .chip:nth-child(5){transform:translateY(calc(var(--chip)*.1))}
.bj-table .hud .chip:hover:not(:disabled){background:radial-gradient(circle,var(--c) 0 55%,#fff 56% 60%,var(--c) 61%);box-shadow:0 0 0 2px var(--cream),0 3px 10px #000a}
.bj-table .hud .chip[data-table-chip="1"]{--c:#77796f}.bj-table .hud .chip[data-table-chip="5"]{--c:#b3352b}.bj-table .hud .chip[data-table-chip="10"]{--c:#2d6c86}
.bj-table .hud .chip[data-table-chip="25"]{--c:#2b6a4c}.bj-table .hud .chip[data-table-chip="100"]{--c:#26231f}.bj-table .hud .chip[data-table-chip="500"]{--c:#6d3a74}
/* Undo left of the chips, Repeat (2x once you have bet) right of them, Deal now under the clock */
.bj-table .bet-actions{display:contents}
#t-undo{grid-area:undo;flex-direction:row-reverse;justify-self:end}#t-repeat{grid-area:repeat;justify-self:start}#t-deal{grid-area:deal;margin-top:8px}
.bj-table .hud .side{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;min-height:44px;
  font:600 13px/1 var(--sans);color:#fff;text-shadow:var(--shadow)}
.bj-table .hud .side:hover:not(:disabled){background:none}
.bj-table .hud .side .ico{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--glass-2);border:1px solid #f2ead938;stroke-width:1.9}
.bj-table .hud #t-repeat.double .ico{display:none}
.bj-table .hud #t-repeat.double span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--red);font:600 13px/1 var(--mono);text-shadow:none}
.bj-table .hud #t-deal{min-height:34px;padding:7px 22px;background:var(--glass-2);color:#fff;border-color:#f2ead9a6;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bj-table .hud #t-deal:hover:not(:disabled){background:#1f4a39e6}
/* the clock: the seconds in a ring on a bar that drains to the middle */
.timer{grid-area:ring;position:relative;display:grid;place-items:center;width:clamp(150px,calc(var(--gw)*.14),240px);height:44px;margin-top:6px;pointer-events:none!important}
.timer .bar{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#f2ead924;display:flex;justify-content:center}
.timer .bar i{display:block;height:100%;width:100%;border-radius:2px;background:var(--go);transition:width .25s linear}
.timer.low .bar i{background:var(--red-hi)}
.timer .dial{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(8,10,9,.82)}
.timer output{font:500 15px/1 var(--mono);color:#fff}
.timer.small{width:160px;height:30px;margin-top:6px}.timer.small .dial{width:28px;height:28px}.timer.small output{font-size:12px}
/* the decision tiles over the dealer's chest, your turn only; the chosen one stays a moment */
.bj-table .t-decision{grid-area:dec;display:flex;flex-direction:column;align-items:center}
.t-turn{margin:0 0 6px;font:600 13px/1.2 var(--serif);color:#fff;text-shadow:var(--shadow)}.t-turn:empty{display:none}
.bj-table .decisions{display:flex;gap:4px;padding:5px;border-radius:8px;background:rgba(8,10,9,.55)}
.bj-table .t-acted{grid-area:acted}
.bj-table .hud .decisions button{display:flex;flex-direction:column;align-items:center;gap:4px;width:clamp(58px,calc(var(--gw)*.046),78px);min-height:0;padding:0 0 4px;
  border:0;border-radius:6px;background:none;font:700 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.bj-table .hud .decisions button:hover:not(:disabled){background:#ffffff14}
.bj-table .decisions button i{display:grid;place-items:center;width:100%;height:clamp(40px,calc(var(--gw)*.033),56px);border-radius:5px;margin:0;
  font:600 clamp(18px,calc(var(--gw)*.016),26px)/1 var(--mono);font-style:normal;text-transform:none;color:#fff;background:var(--tile);box-shadow:inset 0 -3px 0 #0003}
.bj-table [data-seat-action=double],.bj-table [data-chosen=double]{--tile:#c27c1e}.bj-table [data-seat-action=hit],.bj-table [data-chosen=hit]{--tile:#2e8b4a}
.bj-table [data-seat-action=stand],.bj-table [data-chosen=stand]{--tile:#b3352b}.bj-table [data-seat-action=split],.bj-table [data-chosen=split]{--tile:#3d6e8c}
.bj-table .hud .t-acted button:disabled{opacity:1}
.bj-table .hud .decisions button[data-off=true]{display:none}
.bj-table .t-insurance{grid-area:ins;display:flex;flex-direction:column;gap:6px}
.bj-table .t-offer{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 14px;border-radius:99px;background:rgba(8,10,9,.72)}
.bj-table .t-offer span{flex:1 1 auto;font:600 14px/1.2 var(--serif);white-space:nowrap}
.bj-table .hud .t-offer button{min-height:36px;min-width:80px}
.bj-table .t-wait{grid-area:wait;margin:4px 0 0;padding:6px 14px;border-radius:99px;background:var(--glass);font:400 13px/1.3 var(--sans);color:var(--cream-2)}
.bj-table .t-paused{grid-area:paused;margin-top:8px}

/* bottom: one thin, quiet strip; the credits at left, the rules and lobby at right */
.hud-bottom{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:14px var(--pr) var(--pb) var(--pl);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.42));pointer-events:none}
.hud-wallet{display:flex;gap:16px;margin:0}
.hud-wallet p{margin:0;display:flex;flex-direction:column;gap:1px}
.hud-wallet{gap:clamp(18px,2.4vw,32px)}
.hud-wallet p{gap:3px}
.hud-wallet span{font:500 clamp(11px,1vw,13px)/1.1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--cream-3)}
.hud-wallet strong{font:600 clamp(17px,1.7vw,24px)/1.1 var(--mono);color:var(--cream)}
.hud-wallet p:first-child strong{font-size:clamp(20px,2.1vw,30px)}
.hud-links{display:flex;gap:4px}
.bj-table .hud .link{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:4px 10px;border:0;border-radius:99px;background:none;
  font:500 12px/1 var(--sans);color:var(--cream-2);text-decoration:none}
.bj-table .hud .link:hover{background:var(--glass)}
.hud .link .ico{width:16px;height:16px}
.bj-table .hud .link[aria-expanded=true]{background:var(--cream);color:var(--ink)}

/* the menu (top right) and the rules (bottom right): small panels */
.hud-panel{position:absolute;right:var(--pr);top:calc(var(--pt) + 42px);z-index:5;width:min(360px,calc(100% - 28px));max-height:calc(100% - var(--pt) - 90px);overflow:auto;
  padding:16px 18px;border-radius:14px;background:rgba(12,16,14,.94);border:1px solid var(--edge);box-shadow:0 12px 40px #000a;
  font:400 13px/1.55 var(--sans);color:var(--cream-2)}
.hud-info{top:auto;bottom:calc(var(--pb) + 40px);max-height:calc(100% - var(--pt) - 110px)}
.hud-panel h2{margin:0 0 6px;font:600 22px/1.2 var(--serif);color:var(--cream)}
.hud-panel p{margin:0 0 10px}.hud-panel .summary{color:var(--cream)}
.hud-panel .disclaimer{margin-top:12px;padding-top:10px;border-top:1px solid var(--edge);font-size:12px;color:var(--cream-3)}
.hud-panel .wordmark{display:block;height:32px;width:auto;margin:0 0 10px;color:var(--cream)}
.hud-panel .wordmark .wm-letters{fill:currentColor}
.hud-menu .me strong{font:600 17px var(--serif);color:var(--cream)}
.hud-menu .round{font:500 12px/1.5 var(--mono);color:var(--cream-3)}
.hud-menu a{display:inline-block;margin-top:2px;color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.hud-menu .my-seats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.bj-table .hud-panel button{min-height:40px;margin:0 0 10px}

/* the seat strip: portrait phones only */
.hud-strip{display:none}

@media(prefers-reduced-motion:reduce){.on-felt.card.incoming{animation:none}.bj-table .badge{animation:none}.timer .fill,.seat-clock .fill,.timer .bar i{transition:none}}
@media (pointer:coarse){button.seat-name{min-height:44px;min-width:44px;justify-content:center}.hud-home{width:44px!important;height:44px!important;margin:-6px -6px -6px -5px}
  .bj-table .hud .icon,.bj-table .hud .link{min-width:44px;min-height:44px}.bj-table .hud #t-repeat.double span{width:44px;height:44px}.bj-table .hud .chip{min-width:44px;min-height:44px}.bj-table .hud .t-targets button{min-height:44px}}

/* --- phones and tablets in portrait (Evolution mobile): the video covers the whole screen, scaled to its
   height and cropped to the dealer (his face in the upper third, his cards and the near felt), and
   everything floats over it: the clock over the dealer, his cards top left, the seats' hands mid-screen
   (the side seats, outside the crop, at their own edge; yours larger), and at the bottom the message,
   the chips, Undo / Deal now / 2x or the decision tiles, and the credits strip; soft scrims only where
   text sits on the picture */
.hud-dealer{display:none}
@media (orientation:portrait){
  .bj-table{--sh:100vh;--sh:100dvh;--sw:calc(var(--sh)*16/9);--gw:100vw;--gh:var(--sh);--chip:clamp(44px,12.2vw,56px)}
  .bj-table .bj-stage{left:calc(50vw - var(--sw)/2);top:0;background:#0b0f0d}
  .bj-table .seat-spots,.bj-table .badges,.bj-table .table-label{display:none}
  .bj-table .hud{left:0;top:0;width:100vw;height:100vh;height:100dvh;--y0:0px;--pt:calc(var(--vtop) + 8px);--pl:max(10px,env(safe-area-inset-left));--pr:max(10px,env(safe-area-inset-right));--pb:max(8px,env(safe-area-inset-bottom))}
  .bj-table .hud::before,.bj-table .hud::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
  .bj-table .hud::before{top:0;height:calc(var(--vtop) + 110px);background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))}
  .bj-table .hud::after{bottom:0;height:42%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.38) 40%,rgba(0,0,0,.66))}
  .hud-top,.hud-center,.hud-bottom,.hud-strip,.hud-dealer{z-index:1}
  .hud-top{gap:8px}
  .hud-table{min-height:44px;padding:3px 11px 3px 3px;gap:6px}.hud-home .mark{width:26px;height:26px}
  .hud-name{flex-direction:column;align-items:flex-start;gap:2px}.hud-name b{font-size:15px}.hud-name span{font-size:10px}
  .hud-icons{gap:4px}.bj-table .hud .icon{width:44px;height:44px}.hud .icon .ico{width:20px;height:20px}
  /* the dealer's cards, top left under the table name */
  .hud-dealer{position:absolute;left:var(--pl);top:calc(var(--pt) + 54px);display:flex;align-items:center;gap:6px;padding:5px 8px 5px 10px;border-radius:10px;background:rgba(8,10,9,.5)}
  .hud-dealer:empty{display:none}
  .hud-dealer>span{font:600 12px/1 var(--serif);color:var(--cream-2);margin-right:2px}
  .hud-dealer .mini-cards .card{width:30px;height:42px}.hud-dealer .mini-cards .card+.card{margin-left:-11px}
  .hud-dealer output{font:500 15px/1 var(--mono);color:#fff;padding:4px 7px;border-radius:4px;background:rgba(10,12,11,.85);border:1px solid #f2ead933}
  .hud-dealer.active output{background:var(--active);color:var(--ink)}.hud-dealer.bust output{background:#5a1d18;border-color:var(--red-hi)}
  /* the seats' hands, floating mid-screen at their own side */
  .hud-strip{display:flex;position:absolute;left:var(--pl);right:var(--pr);top:48%;align-items:flex-start;justify-content:space-between;gap:4px;pointer-events:none}
  .hud-center{top:auto;bottom:calc(var(--pb) + 40px);column-gap:8px;padding:0 var(--pl);
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:"status status status" "flash flash flash" "targets targets targets" "spots spots spots" "chips chips chips" "undo deal repeat" "follow follow follow" "dec dec dec" "acted acted acted" "ins ins ins" "wait wait wait" "paused paused paused"}
  .hud-banner{margin-bottom:12px}
  #h-status{font-size:18px;white-space:normal;text-align:center}
  #h-status b{font-size:30px}
  .bj-table .chips{width:100%;justify-content:space-between;gap:0;margin-bottom:10px}
  .bj-table .hud .chip:nth-child(1),.bj-table .hud .chip:nth-child(6){transform:translateY(10px)}
  .bj-table .hud .chip:nth-child(2),.bj-table .hud .chip:nth-child(5){transform:translateY(3px)}
  #t-undo{justify-self:start}#t-repeat{justify-self:end}#t-deal{margin-top:0}
  .bj-table .hud #t-deal{min-height:44px;padding:8px 26px;font-size:13px}
  /* the clocks sit over the dealer's chest */
  .timer#h-ring,.timer.small{position:fixed;left:50%;top:38%;width:50px;height:50px;margin:0 0 0 -25px}
  .timer#h-ring .bar,.timer.small .bar{display:none}.timer#h-ring .dial,.timer.small .dial{width:50px;height:50px}.timer#h-ring output,.timer.small output{font-size:18px}
  .bj-table .decisions{width:100%;justify-content:center;background:none;padding:0}
  .bj-table .hud .decisions button{flex:1 1 0;width:auto;max-width:86px;font-size:11px;text-shadow:var(--shadow)}
  .bj-table .decisions button i{height:56px;font-size:24px;box-shadow:inset 0 -3px 0 #0003,0 3px 12px #0008}
  .bj-table .hud .decisions button[data-off=true]{display:flex;opacity:.3}
  .bj-table .t-offer{border-radius:16px}.bj-table .hud .t-offer button{min-height:44px}
  .hud-bottom{background:none}
  .hud-wallet span{color:var(--cream-2)}.hud-wallet strong{color:var(--cream)}
  .hud-wallet{gap:14px}.hud-wallet span{white-space:nowrap;font-size:10px}
  .hud-wallet strong{font-size:17px}.hud-wallet p:first-child strong{font-size:22px}
  /* narrow phones (360 wide: the Lobby link sat 7 px past the right edge): below 390 px the strip's gaps and figures
     scale down with the screen (at 390 and wider they are the sizes above); and at any width the links keep their
     place: figures too wide for the strip are cut at its edge, never pushing a link off the screen */
  .hud-bottom{gap:clamp(6px,3.08vw,12px)}
  .hud-wallet{gap:clamp(8px,3.59vw,14px);flex:0 1 auto;min-width:0;overflow-x:clip}.hud-wallet p{flex:none}
  .hud-wallet strong{font-size:clamp(14px,4.36vw,17px)}.hud-wallet p:first-child strong{font-size:clamp(18px,5.65vw,22px)}
  .hud-links{flex:none;gap:clamp(0px,calc((100vw - 360px)*.14),4px)}
  .hud-links .link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hud-panel{left:var(--pl);right:var(--pr);width:auto;top:calc(var(--pt) + 50px);max-height:calc(100dvh - var(--pt) - 70px)}
  .hud-info{top:auto;bottom:calc(var(--pb) + 48px);max-height:calc(100dvh - var(--pt) - 120px)}
}
/* a seat's floating hand (portrait): its name, its cards from the deck art and its totals; yours larger */
.seat-cell{position:relative;flex:0 1 auto;min-width:0;max-width:34%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px;text-align:center;pointer-events:auto}
.seat-cell:first-child{align-items:flex-start;text-align:left}.seat-cell:last-child{align-items:flex-end;text-align:right}
.seat-cell.mine{max-width:46%}
.cell-head{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:2px 8px;border-radius:99px;background:rgba(8,10,9,.55)}
.cell-head i{flex:none;font:500 10px/1 var(--mono);font-style:normal;color:var(--cream-3)}
.cell-head b{min-width:0;font:600 13px/1.2 var(--serif);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat-cell.mine .cell-head b{color:var(--active)}
.seat-cell.active .cell-head{background:var(--active)}.seat-cell.active .cell-head b,.seat-cell.active .cell-head i{color:var(--ink)}
.seat-cell.target .cell-head{box-shadow:0 0 0 2px var(--cream)}
.seat-cell.empty .cell-head b{color:var(--cream-2);font-weight:400}
.seat-cell .stack{display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 3px;border-radius:99px;background:rgba(8,10,9,.55);font:500 11px/1 var(--mono);color:var(--cream)}
.seat-cell .stack i{display:inline-block;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,var(--red) 0 40%,var(--cream) 41% 50%,var(--red) 51%)}
.seat-cell .stack.none{display:none}
.cell-hand{display:flex;flex-direction:column;align-items:inherit;gap:4px;min-width:0}
.cell-hand output{font:500 13px/1 var(--mono);color:#fff;padding:3px 6px;border-radius:4px;background:rgba(10,12,11,.85);border:1px solid #f2ead933}
.seat-cell.mine .cell-hand output{font-size:18px;padding:4px 9px}
.cell-hand.active output{background:var(--active);color:var(--ink);border-color:#fff3c4}
.cell-hand small{font:700 10px/1.1 var(--sans);color:#fff;text-shadow:var(--shadow)}
.cell-hand.won small{color:#a8f0b2}.cell-hand.lost small{color:#ffaa9a}.cell-hand.push small{color:#e6eef0}
.cell-hand.won output{background:var(--felt-hi)}.cell-hand.lost output{background:#5a1d18}
.mini-cards{display:flex;flex:none;filter:drop-shadow(0 3px 6px #000b)}
.mini-cards .card{position:relative;width:26px;height:37px;flex-shrink:0;transform:none;filter:none;border-radius:3px;box-shadow:0 0 0 1px #0003;animation:none}
.cell-hands{display:flex;align-items:flex-start;gap:6px}
.cell-hands:has(.cell-hand+.cell-hand) .mini-cards .card{width:22px;height:31px}.cell-hands:has(.cell-hand+.cell-hand) .mini-cards .card+.card{margin-left:-10px}
.seat-cell.mine .cell-hands:has(.cell-hand+.cell-hand) .mini-cards .card{width:36px;height:50px}.seat-cell.mine .cell-hands:has(.cell-hand+.cell-hand) .mini-cards .card+.card{margin-left:-16px}
.mini-cards .card+.card{margin-left:-11px}
.seat-cell.mine .mini-cards .card{width:48px;height:67px}.seat-cell.mine .mini-cards .card+.card{margin-left:-20px}
.mini-cards .card.back{border-width:2px}.mini-cards .card.back:after{display:none}
.seat-cell .act{font:700 12px/1 var(--mono);font-style:normal;padding:2px 6px;border-radius:99px;background:rgba(8,10,9,.6)}
.seat-cell .act.act-hit{color:#9fe0a8}.seat-cell .act.act-stand{color:#ff9a88}.seat-cell .act.act-double{color:#f6b45a}
.seat-cell .note{margin:0;padding:2px 6px;border-radius:6px;background:rgba(8,10,9,.5);font:400 11px/1.3 var(--sans);color:var(--cream-2)}
.bj-table .hud .seat-cell button{min-height:44px;padding:6px 12px;font-size:13px}
.bj-table .hud .seat-cell button.target-pick{background:transparent;border:0;padding:0;min-height:44px;display:flex;flex-direction:column;align-items:inherit;gap:4px}
.seat-cell .seat-clock{width:26px;height:26px;border-radius:50%;background:rgba(8,10,9,.7)}
.seat-cell.mine .seat-clock{display:none}   /* your own turn's clock is the big one over the dealer */

/* --- phones in landscape: the desktop layout at touch sizes */
@media (orientation:landscape) and (max-height:500px){
  .bj-table{--chip:44px}
  .hud-top{padding-left:max(var(--pl),calc((var(--gw) - 100%)/2 + 8px))}
  .hud-name b{font-size:14px}
  .bj-table .hud .icon{width:44px;height:44px}
  .hud-center{column-gap:6px}
  .hud-banner{margin-bottom:4px}
  #h-status{font-size:16px}#h-status b{font-size:24px}
  .bj-table .chips{gap:4px}
  .bj-table .hud .chip:nth-child(1),.bj-table .hud .chip:nth-child(6){transform:translateY(8px)}
  .bj-table .hud .chip:nth-child(2),.bj-table .hud .chip:nth-child(5){transform:translateY(3px)}
  .timer{height:34px;margin-top:4px}.timer .dial{width:32px;height:32px}.timer output{font-size:13px}
  #t-deal{margin-top:4px}.bj-table .hud #t-deal{min-height:44px}
  .bj-table .hud .decisions button{width:64px}.bj-table .decisions button i{height:44px}
  .bj-table .hud .t-offer button{min-height:44px}
  .hud-panel{top:calc(var(--pt) + 50px);max-height:calc(100dvh - var(--pt) - 60px)}
  .hud-info{top:auto;bottom:calc(var(--pb) + 48px);max-height:calc(100dvh - var(--pt) - 110px)}
}

/* viewport-fit=cover (for the shared table): the single-seat page keeps clear of the notch and home bar */
body.bj-live{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}

/* --- side bets and Bet Behind (web/blackjack-table.mjs; realism plan C3). On the felt, as Evolution draws them: a
   Perfect Pairs wedge on the seat's left and a 21+3 wedge on its right, hugging its bet circle and turned with the
   seat; yours filled and tappable while betting (pulsing once your main chip is down, as Evolution's do), other
   players' faint outlines. From the close the side chips sit beside the main chip; a winner becomes its payout under
   a short tag with the combination and its odds; a loser vanishes. */
.bj-table .seat-spots .side-spot{width:calc(var(--d)*1.84);height:calc(var(--d)*1.08);min-height:0;padding:0;margin:0;border:0;background:none;
  pointer-events:none!important;-webkit-tap-highlight-color:transparent}
.side-spot svg{display:block;width:100%;height:100%;overflow:visible}
.side-spot path{fill:none;stroke:#e6c37a59;stroke-width:1.3;vector-effect:non-scaling-stroke}
.side-spot text{fill:#f2ead94d;font:700 10.5px/1 var(--sans);letter-spacing:.04em;text-anchor:middle;pointer-events:none}
.side-spot text.big{font-size:17px;letter-spacing:0}
.side-spot.mine path{fill:#e6c37a33;stroke:#e6c37a;stroke-width:1.6;pointer-events:visiblePainted;cursor:pointer;transition:fill .15s}
.side-spot.mine text{fill:#f7f0e0;paint-order:stroke;stroke:#0006;stroke-width:2px}
button.side-spot:hover path,button.side-spot:focus-visible path{fill:#e6c37a66}
.bj-table .seat-spots button.side-spot:focus-visible{outline:none}
button.side-spot:focus-visible path{stroke:var(--cream);stroke-width:2.6}
.side-spot.target path{stroke:var(--active);stroke-width:2.6}
.side-spot.pulse path{animation:side-pulse 1.65s ease-in-out infinite}
@keyframes side-pulse{0%,100%{fill:#e6c37a26}50%{fill:#e6c37a73}}
/* your own circle is the main bet's spot: invisible until it is the active spot */
.bj-table .seat-spots .main-spot{width:var(--d);height:calc(var(--d)*.47);min-height:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.main-spot:hover{background:#f2ead914}
.main-spot.target{box-shadow:0 0 0 max(2px,.15cqw) var(--active)}
.bj-table .seat-spots .main-spot:focus-visible{outline:2px solid var(--cream);outline-offset:1px}
/* side chips: smaller than the main chip; blue for Perfect Pairs, violet for 21+3; gold once paid */
.side-chip{transform:translate(-50%,-50%);display:grid;place-items:center;width:max(20px,1.85cqw);aspect-ratio:1;border-radius:50%;
  --c:#2d6c86;background:radial-gradient(circle,var(--c) 0 54%,#f2ead9 55% 59%,var(--c) 60%);box-shadow:0 .1cqw .3cqw #000c,inset 0 0 0 1px #0004;
  color:#fff;font:500 max(8px,.66cqw)/1 var(--mono);text-shadow:0 1px 1px #0008;pointer-events:none!important}
.side-chip.t21{--c:#6d3a74}
.side-chip.mine{box-shadow:0 0 0 max(1.5px,.12cqw) var(--active),0 .1cqw .3cqw #000c}
.side-chip.paid{--c:#b8871f;width:max(24px,2.2cqw);color:#1a1408;text-shadow:none;font-weight:700;animation:paid-in .25s ease-out both}
@keyframes paid-in{from{transform:translate(-50%,-50%) scale(.7)}to{transform:translate(-50%,-50%) scale(1)}}
.side-tag{display:flex;flex-direction:column;align-items:center;gap:.1cqw;padding:.28cqw .5cqw;border-radius:.4cqw;
  background:rgba(14,16,15,.92);border:1px solid #e6c37a80;color:#f3d27e;white-space:nowrap;pointer-events:none!important;
  box-shadow:0 .2cqw .6cqw #000a;animation:tag-in .2s ease-out both}
.side-tag.left{transform:translate(-100%,-50%)}.side-tag.right{transform:translate(0,-50%)}
.side-tag::after{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid transparent}
.side-tag.left::after{right:-5px;border-right:0;border-left-color:rgba(14,16,15,.92)}
.side-tag.right::after{left:-5px;border-left:0;border-right-color:rgba(14,16,15,.92)}
.side-tag small{font:700 max(7px,.56cqw)/1 var(--sans);letter-spacing:.06em;color:#efe4c6}
.side-tag b{font:600 max(10px,.95cqw)/1 var(--mono)}
@keyframes tag-in{from{opacity:0}to{opacity:1}}
/* Bet Behind: a small tag under another player's name, with how many back him; yours shows your chip */
.bj-table .seat-spots .behind-spot{transform:translateX(-50%);display:inline-flex;align-items:center;gap:.35cqw;min-height:0;padding:.14cqw .55cqw .14cqw .3cqw;
  border-radius:99px;background:var(--glass);border:1px solid #f2ead933;color:var(--cream-2);font:600 max(9px,.72cqw)/1.2 var(--sans);white-space:nowrap}
.bj-table .seat-spots button.behind-spot{cursor:pointer}
.bj-table .seat-spots button.behind-spot:hover{background:#1b231ee6;border-color:#f2ead9a0}
.behind-spot.backed{border-color:#f2ead999;color:var(--cream)}
.behind-spot.target{box-shadow:0 0 0 max(2px,.14cqw) var(--active)}
.behind-count{display:inline-flex;align-items:center;gap:.15cqw;font:500 max(9px,.7cqw)/1 var(--mono)}
.behind-count .ico{width:max(13px,1.05cqw);height:max(13px,1.05cqw);stroke-width:1.8}
.behind-chip{display:grid;place-items:center;width:max(18px,1.5cqw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#26231f 0 54%,#f2ead9 55% 59%,#26231f 60%);font:500 max(7px,.58cqw)/1 var(--mono);color:#fff}
/* the chip arc: the selected chip has a gold ring (Evolution) */
.bj-table .hud .chip[aria-pressed=true]{box-shadow:0 0 0 2px #e6c37a,inset 0 0 0 2px #0003,0 3px 10px #000a}
/* the spot row: portrait phones only (the felt and its spots are cropped away there) */
.bj-table .t-spots{grid-area:spots;display:none;gap:6px;margin:0 0 10px}
.bj-table .hud .t-spots .spot{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;min-height:44px;padding:5px 10px;border-radius:12px;
  background:rgba(8,10,9,.62);border:1px solid #e6c37a80;font:700 11px/1 var(--sans);letter-spacing:.03em}
.bj-table .hud .t-spots .spot b{font:500 12px/1 var(--mono);color:var(--cream-2)}
.bj-table .hud .t-spots .spot.main{border-color:#f2ead966}
.bj-table .hud .t-spots .spot[aria-pressed=true]{border-color:var(--active);box-shadow:0 0 0 1px var(--active);color:var(--active)}
.bj-table .t-follow{grid-area:follow;display:inline-flex;flex-flow:row nowrap;align-items:center;gap:7px;width:max-content;margin:8px 0 0;padding:5px 12px 5px 9px;
  border-radius:99px;background:rgba(8,10,9,.74);border:1px solid #f2ead926;font:500 12px/1.2 var(--sans);color:var(--cream);white-space:nowrap;pointer-events:auto;cursor:pointer}
.bj-table .t-follow input{flex:none;display:inline-block;width:16px;height:16px;min-height:0;margin:0;padding:0;accent-color:#e6c37a}
/* your side-bet win, spoken (and on portrait phones shown) as the deal lands; the felt carries the tag on desktop */
.bj-table .t-sideflash{grid-area:flash;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;white-space:nowrap}
/* phone seat cells: side chips, results and bets behind */
.cell-sides,.cell-behind{display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:inherit}
.side-pill{padding:2px 6px;border-radius:99px;background:rgba(8,10,9,.62);border:1px solid #e6c37a66;font:600 10px/1.2 var(--mono);color:var(--cream);white-space:nowrap}
.side-pill.paid{background:#b8871f;border-color:#f3d27e;color:#1a1408}
.side-pill.behind{border-color:#f2ead966}
.cell-behind .behind-count{padding:2px 6px;border-radius:99px;background:rgba(8,10,9,.55);color:var(--cream-2);font-size:11px;gap:3px}
.cell-behind .behind-count .ico{width:14px;height:14px}
.bj-table .hud .seat-cell button.behind-btn{min-height:40px;padding:5px 11px;font-size:12px;background:rgba(8,10,9,.62)}
.bj-table .hud .seat-cell button.behind-btn.target{border-color:var(--active);color:var(--active)}
/* history: your last rounds, each bet on a line */
.hud-hist .hist-round{padding:8px 0;border-top:1px solid var(--edge)}
.hud-hist .hist-round:first-child{border-top:0}
.hud-hist .hist-head{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.hud-hist .hist-head b{font:600 14px/1.2 var(--serif);color:var(--cream)}
.hud-hist .hist-head span{flex:1;font-size:12px;color:var(--cream-3)}
.hud-hist .hist-head strong{font:500 13px/1 var(--mono)}
.hud-hist .won{color:#9fe0a8}.hud-hist .lost{color:#ff9a88}.hud-hist .even{color:var(--cream-2)}
.hud-hist .hist-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin:0;font-size:12px;line-height:1.5}
.hud-hist .hist-line em{font-style:normal;color:var(--cream-3);text-align:right}
.hud-hist .hist-line span:last-child{font-family:var(--mono);color:var(--cream)}
.hud-panel .note{color:var(--cream-3);font-size:12px}
/* the side bets' pay tables in the Rules panel */
.paytables{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:4px 0 10px}
.paytable{border-collapse:collapse;font-size:12px;width:100%}
.paytable caption{text-align:left;font:600 13px/1.4 var(--serif);color:var(--cream);padding-bottom:3px}
.paytable td{padding:2px 0;border-top:1px solid var(--edge)}
.paytable td:last-child{text-align:right;font-family:var(--mono);color:var(--cream)}
.paytables .note{grid-column:1/-1;margin:0}
@media(prefers-reduced-motion:reduce){.side-spot.pulse path,.side-chip.paid,.side-tag{animation:none}}
@media (orientation:portrait){
  .bj-table .t-spots{display:flex;justify-content:center}
  .bj-table .t-sideflash{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 0 8px;padding:6px 14px;border-radius:99px;
    background:rgba(14,16,15,.88);border:1px solid #e6c37a80;color:#f3d27e;font:600 13px/1.2 var(--mono);white-space:normal;text-align:center}
  .bj-table .t-sideflash:empty{display:none}
  .bj-table .t-follow{margin:6px 0 2px}
  .paytables{grid-template-columns:1fr}
}