/* ===========================================================================
   PUNTO BANCO — the table. 2026-09-25, to the brief and Ronan's answers to
   the opening review (briefs/punto-banco-decisions.md): the casino family's
   components (Mini Baccarat's and No Commission Baccarat's rebuilds: header,
   felt frame, cards, chips, rack, action buttons, itemised result, panels)
   on this game's own oxblood felt, #5A0A0A (item 1), and a layout of its
   own: each Pair spot directly above its hand's main spot (item 10).

     RULES &      PLAYER [ ][ ][▭]      BANKER [ ][ ][▭]      BALANCE
     PAYOUTS      ───────── the build's gold arc ─────────     Last win / bet
     RESULTS                ONE INSTRUCTION                     Round
     LAST COUP    [PLAYER PAIR]                [BANKER PAIR]    8 decks
                  [  PLAYER  ] [   TIE   ] [   BANKER   ]      SESSION
                            DEAL  /  tip line
                   chip rack + Undo Clear Rebet  /  itemised result
   =========================================================================== */

:root{
  /* Timings (item 14); reduced motion shortens every one, removes none. */
  --pb-card-ms: 250ms;
  --pb-third-ms: 300ms;
  --pb-result-ms: 300ms;

  /* The felt: oxblood (item 1). game.css's category tokens, re-pointed. */
  --table-bg:#5A0A0A;
  --table-deep:#220303;
  --table-highlight:#741812;
  --felt-2:#400707;
  --pb-gold: #c9a75e;
  --pb-gold-bright: #e6cc8e;
  --pb-gold-line: rgba(201,167,94,.4);
  --pb-ivory: #f3ecdb;
  --pb-ink: #20180f;
  --pb-red: #a4283a;
  --pb-win: #6fd17f;
  --pb-loss: #ff9a9a;
  --pb-back: #2a0a0e;
  --pb-player: #2f67b1;       /* the scoreboard's conventional colours, never alone */
  --pb-banker: #b8323f;
  --pb-tie: #2f8a42;

  /* One card row. What is not a card is --pb-fixed. Each hand holds two
     cards and a sideways third. */
  --pb-fixed: 547px;
  --pb-left-w: 164px;
  --pb-right-w: 164px;
  --pb-sides: 468px;
  --card-h-v: calc(100vh - var(--pb-fixed));
  --card-h-v: calc(100dvh - var(--pb-fixed));
  --card-h-w: calc(((100vw - var(--pb-sides)) / 2 - 40px) / 3.4 / 0.712);
  --card-h: clamp(56px, min(var(--card-h-v), var(--card-h-w)), 132px);
  --card-w: calc(var(--card-h) * 0.712);
  --card-gap: clamp(5px, calc(var(--card-h) * 0.07), 9px);
  --pb-vgap: 6px;
  --pb-band-h: 104px;
  --main-h: 62px;
  --side-h: 42px;
  --pile-chip: 26px;
}
@media (prefers-reduced-motion: reduce){
  :root{ --pb-card-ms: 1ms; --pb-third-ms: 1ms; --pb-result-ms: 1ms; }
  #pbGame *, #pbGame *::before, #pbGame *::after{ transition-duration:1ms !important; animation-duration:1ms !important; }
}

/* ---- the frame -------------------------------------------------------------- */
html, body{ margin:0; height:100%; }
body{ background:#050403; overflow:hidden; padding:0; display:block; }
#pbGame{
  max-width:none; width:100%;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden; box-sizing:border-box;
  background: radial-gradient(at 50% 0%, #1c0a0c 0%, #050303 60%);
  color:var(--pb-ivory);
  font-family: Inter, system-ui, sans-serif;
}
#pbGame *, #pbGame *::before, #pbGame *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
.mono{ font-family:"IBM Plex Mono", monospace; }

#pbHeader{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:8px 14px 10px; width:100%; }
#pbHeader .wordmark{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#pbHeader .eyebrow{ font-family:Inter, system-ui, sans-serif; font-size:10px; line-height:11px; font-weight:600; letter-spacing:2.4px; text-transform:uppercase; color:var(--pb-gold); opacity:.8; white-space:nowrap; }
#pbHeader .title{ font-family:Cinzel, serif; font-size:20px; font-weight:700; letter-spacing:1.2px; color:var(--pb-gold-bright); text-shadow:0 1px 0 rgba(0,0,0,.4); }
#pbSecondaryControls{ display:flex; gap:8px; }
#pbGame .gold-icon-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:44px; width:min-content; height:44px; padding:0 8px;
  background:linear-gradient(155deg, #1a0d0f, #0a0506);
  border:1px solid var(--pb-gold-line); border-radius:12px;
  color:var(--pb-gold); font-size:17px; cursor:pointer;
}
#pbGame .gold-icon-btn .ico{ line-height:1; }
#pbGame .gold-icon-btn .btn-label{ font-family:Inter, system-ui, sans-serif; font-size:8.5px; font-weight:700; letter-spacing:.68px; text-transform:uppercase; color:var(--pb-gold); line-height:1; }
#pbGame .gold-icon-btn:hover{ border-color:var(--pb-gold); }

.table-wrap{ flex:1 1 auto; min-height:0; display:flex; padding:6px 12px 6px; max-width:none; width:100%; }
#pbTable{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; padding:2px 5px; }
/* The felt's inner gold line is 12px in (game.css); everything on the table
   keeps at least 6px clear of it (felt-line-sweep.js). */
#pbTable .felt-surface{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; padding:18px 18px 18px; }
#pbGame footer{ flex:none; padding:1px 16px 4px; text-align:center; font-size:9px; line-height:1.3; color:var(--pb-ivory); opacity:.5; }
#pbGame footer .footer-short{ display:none; }
.rules-rg{ font-size:11.5px; line-height:1.45; opacity:.75; margin:4px 0 0; }

/* ---- the columns -------------------------------------------------------------- */
.pb-layout{
  flex:1; min-height:0; position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--pb-left-w) minmax(0,1fr) var(--pb-right-w);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"left centre right" "left band right";
  column-gap:clamp(14px, 2vw, 28px); row-gap:var(--pb-vgap);
  padding:2px 0 0;
}
.pb-left{ grid-area:left; display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; }
.pb-right{ grid-area:right; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; min-width:0; }
.pb-centre{ grid-area:centre; display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-height:0; min-width:0; gap:var(--pb-vgap); }
.pb-centre > *{ flex:none; }
.pb-band{ grid-area:band; justify-self:center; }

/* ---- the rules and payouts, printed on the felt -------------------------------- */
.pb-paytables{ display:flex; flex-direction:column; gap:2px; opacity:.72; width:100%; }
.pb-inline-rules{ margin:0 0 6px; padding-left:13px; }
.pb-inline-rules li{ font-size:10px; line-height:13px; }
.pt-title{ font-family:Cinzel, serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--pb-gold); padding-bottom:2px; border-bottom:1px solid rgba(201,167,94,.22); margin-bottom:2px; white-space:nowrap; }
.pt-row{ display:flex; justify-content:space-between; gap:10px; font-size:10.5px; line-height:13.5px; }
.pt-row .mono{ color:var(--pb-gold-bright); }
body:not([data-ui-phase="betting"]) .pb-paytables{ opacity:.5; }

/* ---- the results history: the bead plate (item 9) ------------------------------ */
.pb-road{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.road-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 6px; font-family:Cinzel, serif; font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--pb-gold); padding-bottom:1px; border-bottom:1px solid rgba(201,167,94,.22); white-space:nowrap; }
.road-sub{ font-family:Inter, sans-serif; font-size:10px; letter-spacing:0; text-transform:none; opacity:.7; }
.road-tally{ font-family:"IBM Plex Mono", monospace; font-size:9px; letter-spacing:0; color:var(--pb-ivory); opacity:.8; }
/* Columns of six, filled top to bottom, as a real bead plate is. */
.bead-plate{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(6, 11px); grid-auto-columns:11px; gap:1px; min-height:71px; }
.bead-plate .road-empty{ grid-row:1 / -1; grid-column:1 / 13; align-self:center; font-size:9.5px; font-style:italic; opacity:.6; white-space:nowrap; }
.bead{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px; border-radius:50%;
  font-size:7px; line-height:1; font-weight:800; color:#fff; }
.bead.player{ background:var(--pb-player); } .bead.banker{ background:var(--pb-banker); } .bead.tie{ background:var(--pb-tie); }
.bead .pair-dot{ position:absolute; width:4px; height:4px; border-radius:50%; box-shadow:0 0 0 1px #fff; }
.bead .pair-dot.p{ top:-1px; left:-1px; background:var(--pb-player); }
.bead .pair-dot.b{ right:-1px; bottom:-1px; background:var(--pb-banker); }
.road-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 3px; font-size:9px; line-height:11px; opacity:.8; }
.road-legend .bead{ margin-left:3px; }
.road-legend .bead:first-child{ margin-left:0; }
.swatch{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:4px; }
.swatch.p{ background:var(--pb-player); } .swatch.b{ background:var(--pb-banker); margin-left:0; }
/* In the Stats panel: bigger beads. */
.pb-road-panel{ gap:6px; }
.pb-road-panel .road-head{ font-size:12px; }
.pb-road-panel .bead-plate{ grid-template-rows:repeat(6, 16px); grid-auto-columns:16px; gap:2px; min-height:106px; overflow-x:auto; }
.pb-road-panel .bead{ width:16px; height:16px; font-size:9px; }
.pb-road-panel .road-legend{ font-size:11px; line-height:16px; gap:2px 4px; }
.pb-road-panel .road-legend .bead{ width:14px; height:14px; font-size:8px; }
.pb-road-panel .swatch{ width:8px; height:8px; }

/* ---- the right column ------------------------------------------------------------ */
.pb-bank{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pb-bank label{ font-size:9.5px; letter-spacing:1.52px; text-transform:uppercase; opacity:.6; }
.pb-bank-val{ font-size:clamp(20px, 3vh, 28px); font-weight:800; color:var(--pb-gold-bright); white-space:nowrap; }
.pb-rail{ display:flex; flex-direction:column; gap:2px; }
.pb-rail .felt-stat{ display:flex; align-items:baseline; gap:8px; border:none; padding:0; }
.pb-rail label{ font-size:9.5px; letter-spacing:1.52px; text-transform:uppercase; opacity:.55; white-space:nowrap; }
.pb-rail .val{ font-size:14px; font-weight:600; opacity:.9; white-space:nowrap; }
.pb-rail .val.pos{ color:var(--pb-win); }
.pb-rail .val.neg{ color:var(--pb-loss); }
.pb-shoe{ font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; opacity:.75; white-space:nowrap; }
.pb-shoe .mono{ font-weight:800; color:var(--pb-gold-bright); }
.pb-shoe .mono.low{ color:#ff8f9c; }
.pb-shoe .mono.low::after{ content:" · low"; font-family:Inter, sans-serif; font-weight:700; }

/* ---- the two hands ------------------------------------------------------------------ */
.pb-hands{ display:flex; justify-content:center; gap:clamp(10px, 3vw, 40px); }
.pb-hand{ flex:0 1 max(calc(var(--card-w) * 2 + var(--card-h) + 3 * var(--card-gap) + 12px), 200px); min-width:0;
  display:flex; flex-direction:column; gap:3px; padding:3px 6px 6px; border-radius:12px;
  border:1px solid rgba(201,167,94,.16); background:rgba(0,0,0,.08); transition:border-color .2s, box-shadow .2s; }
.pb-hand.winner{ border-color:var(--pb-gold-bright); box-shadow:0 0 0 1px var(--pb-gold-bright), 0 0 18px rgba(230,204,142,.28); }
.pb-hand-head{ display:flex; align-items:center; gap:8px; height:16px; white-space:nowrap; overflow:hidden; }
.pb-hand-name{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; line-height:12px; }
#playerHand .pb-hand-name{ color:#a9c6f0; } #bankerHand .pb-hand-name{ color:#f0a9b1; }
.pb-total{ font-family:Fraunces, serif; font-size:14px; line-height:15px; font-weight:700; color:var(--pb-gold-bright); }
.pb-status{ margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; line-height:12px; opacity:.85; }
.pb-status.win{ color:var(--pb-win); opacity:1; }
.pb-cards{ position:relative; height:var(--card-h); width:100%; perspective:900px; }
#pbGame .pb-cards .card{ position:absolute; top:0; width:var(--card-w); height:var(--card-h); margin:0; animation:none; opacity:1; transform:none; transition:left .15s ease-out; }
/* The third card lies sideways (the build's, as on a real table). */
#pbGame .pb-cards .card.third{ transform:rotate(90deg); }

/* The card face (the family's). */
#pbGame .card{
  border-radius:9px; overflow:hidden;
  font-family:Inter, sans-serif; font-weight:800; color:var(--pb-ink);
  background:linear-gradient(155deg, #fffdf7, #f5efdf);
  box-shadow:0 5px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transform-origin:50% 50%; backface-visibility:hidden;
}
#pbGame .card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 58%); }
#pbGame .card.red{ color:var(--pb-red); }
#pbGame .card .card-corner{ position:absolute; display:block; text-align:center; font-size:clamp(9px, calc(var(--card-h) * 0.14), 18px); line-height:1;
  font-family:Inter, "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; font-variant-emoji:text; }
#pbGame .card .card-corner-top{ top:6%; left:7%; }
#pbGame .card .card-corner-bottom{ bottom:6%; right:7%; transform:rotate(180deg); }
#pbGame .card .card-centre-suit{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:clamp(12px, calc(var(--card-w) * 0.4), 42px); line-height:1; opacity:.92;
  font-family:Inter, "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; font-variant-emoji:text; }

/* ---- the one instruction ------------------------------------------------------------ */
.pb-call{ font-family:Fraunces, serif; font-size:15px; letter-spacing:.8px; color:var(--pb-ivory); height:20px; line-height:20px; text-align:center; white-space:nowrap; }

/* ---- the five spots (item 10) ------------------------------------------------------- */
.pb-spots{ display:flex; flex-direction:column; gap:5px; width:100%; max-width:720px; align-self:center; }
.pb-spot-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
#pbGame .bac-spot{
  position:relative; display:grid; min-width:0; margin:0; cursor:pointer; text-align:left;
  grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto auto; grid-template-areas:"pile name name" "pile pays stake" "pile note note";
  align-content:center; align-items:center; column-gap:8px; row-gap:1px;
  height:var(--main-h); padding:4px 10px; border-radius:14px;
  color:var(--pb-ivory); font:inherit;
  border:2px solid rgba(201,167,94,.5);
  background:radial-gradient(at 50% 30%, rgba(255,255,255,.05), rgba(0,0,0,.2));
  transition:border-color .15s, background .15s, box-shadow .15s;
}
#pbGame .bac-spot.side{ height:var(--side-h); border-width:1px; border-style:dashed; border-radius:11px; padding:3px 8px; grid-template-rows:auto auto; grid-template-areas:"pile name name" "pile pays stake"; }
#pbGame .bac-spot:hover:not(:disabled){ border-color:var(--pb-gold-bright); }
#pbGame .bac-spot:disabled{ cursor:default; }
#pbGame .bac-spot.active{ border-color:var(--pb-gold); background:radial-gradient(at 50% 30%, rgba(230,204,142,.14), rgba(0,0,0,.24)); }
#pbGame .bac-spot.won{ border-color:var(--pb-win); box-shadow:0 0 0 1px var(--pb-win), 0 0 14px rgba(111,209,127,.25); }
#pbGame .bac-spot.lost{ opacity:.72; }
.bac-spot[data-spot="player"] .spot-name{ color:#a9c6f0; }
.bac-spot[data-spot="banker"] .spot-name{ color:#f0a9b1; }
.bac-spot[data-spot="tie"] .spot-name{ color:#a9e0b3; }
.spot-name{ grid-area:name; font-family:Cinzel, serif; font-size:15px; line-height:17px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bac-spot.side .spot-name{ font-family:Inter, sans-serif; font-size:10.5px; line-height:13px; font-weight:800; letter-spacing:.8px; }
.spot-pays{ grid-area:pays; font-family:"IBM Plex Mono", monospace; font-size:10.5px; line-height:13px; color:var(--pb-gold-bright); opacity:.9; white-space:nowrap; }
.spot-note{ grid-area:note; font-size:9.5px; line-height:12px; font-weight:700; letter-spacing:.2px; color:var(--pb-gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spot-note.hit{ color:var(--pb-gold-bright); text-decoration:underline; text-underline-offset:2px; }
.spot-stake{ grid-area:stake; justify-self:end; font-size:12.5px; line-height:15px; font-weight:800; color:var(--pb-gold-bright); white-space:nowrap; }
.spot-stake.zero{ color:rgba(243,236,219,.4); }
.bac-spot.side .spot-stake{ font-size:11px; line-height:13px; }
/* Once settled, the outcome takes the payout's place on the spot (the
   payout is on the felt and in the Rules; the stake stays beside it). */
.spot-outcome{ grid-area:pays; justify-self:start; font-size:10.5px; line-height:13px; font-weight:800; letter-spacing:.3px; white-space:nowrap; }
.spot-outcome:empty{ display:none; }
.bac-spot.won .spot-pays, .bac-spot.lost .spot-pays, .bac-spot.pushed .spot-pays{ display:none; }
.spot-outcome.win{ color:var(--pb-win); } .spot-outcome.loss{ color:var(--pb-loss); } .spot-outcome.push{ color:#e6dfcc; }
/* The chips on a spot: the family's chips, overlapped by denomination. */
.spot-pile{ grid-area:pile; display:flex; align-items:flex-end; min-width:var(--pile-chip); height:calc(var(--pile-chip) + 6px); gap:0; }
.bac-spot.side .spot-pile{ --pile-chip:20px; }
.spot-pile .denom-stack{ position:relative; width:var(--pile-chip); height:calc(var(--pile-chip) + 6px); margin-left:calc(var(--pile-chip) * -0.55); flex:none; }
.spot-pile .denom-stack:first-child{ margin-left:0; }
.spot-pile .denom-stack:nth-child(n+4){ display:none; }
.spot-pile .pile-chip{ width:var(--pile-chip); height:var(--pile-chip); }
.spot-pile .pile-chip .chip-face{ font-size:calc(var(--pile-chip) * 0.3); font-family:"IBM Plex Mono", monospace; font-weight:800;
  background:radial-gradient(circle at 35% 28%, #fffdf6, #efe8d4 75%); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#333; }
.spot-pile .denom-count{ top:0; right:-6px; font-size:8px; min-width:15px; padding:1px 3px; }
.spot-pile:empty::before{ content:""; width:var(--pile-chip); height:var(--pile-chip); border-radius:50%; border:1px dashed rgba(201,167,94,.4); align-self:center; }

/* ---- the actions: one height across the coup -------------------------------------- */
.pb-actions{ display:flex; align-items:center; justify-content:center; height:48px; width:100%; }
.pb-actions .action-row{ display:none; gap:8px; align-items:center; justify-content:center; width:100%; }
body[data-ui-phase="betting"] #betActions, body[data-ui-phase="settled"] #settleActions{ display:flex; }
#pbGame .action{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:44px; padding:0 14px; min-width:0;
  font-family:Inter, sans-serif; font-size:14px; font-weight:800; letter-spacing:.45px; text-transform:uppercase;
  border-radius:14px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.25);
  transition:filter .15s, transform .15s;
}
#pbGame .action::before{ content:""; position:absolute; left:0; right:0; top:0; height:44%; background:linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none; }
#pbGame .action:hover:not(:disabled){ filter:brightness(1.08); }
#pbGame .action:active:not(:disabled){ transform:translateY(1px); }
#pbGame .action:disabled{ opacity:.4; cursor:default; }
#pbGame .btn-deal{ color:#150f05; background:linear-gradient(#e2c47c, #93763a); border:1px solid transparent; min-width:220px; }
#pbGame .btn-ghost{ color:var(--pb-ivory); background:rgba(0,0,0,.28); border:1px solid var(--pb-gold); }
#settleActions .action{ min-width:170px; }
#pbGame .action .db-label{ line-height:1.05; white-space:nowrap; }
#pbGame .action .db-sub{ font-size:10px; font-weight:600; letter-spacing:.2px; text-transform:none; opacity:.8; line-height:1.1; white-space:nowrap; }

/* ---- the note line: a notice, or the optional tip ---------------------------------- */
.pb-note-line{ position:relative; height:30px; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.pb-notice, .pb-tip{ font-size:11.5px; line-height:1.25; letter-spacing:.2px; max-width:760px; }
.pb-notice{ color:#ffd8a8; font-weight:700; }
.pb-notice:empty, .pb-tip:empty{ display:none; }
.pb-tip{ color:var(--pb-ivory); opacity:.85; font-style:italic; }
.pb-notice.on ~ .pb-tip:not([data-tip="I"]){ display:none; }

/* ---- the band: the chip rack while betting, the result after ---------------------- */
.pb-band{ position:relative; width:100%; max-width:760px; height:var(--pb-band-h); display:flex; align-items:stretch; justify-content:center; }
#pbWagerControls{ width:100%; display:none; align-items:center; justify-content:center; gap:12px; }
body[data-ui-phase="betting"] #pbWagerControls{ display:flex; }
.chip-row{ display:flex; gap:10px; align-items:center; max-width:none; flex-wrap:nowrap; }
#pbGame .chip{
  position:relative; width:48px; height:48px; min-height:48px; border-radius:50%; border:0; padding:0; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 10px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.1), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 5px rgba(0,0,0,.35);
}
#pbGame .chip .chip-face{
  width:60%; height:60%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono", monospace; font-size:13px; font-weight:800;
  background:radial-gradient(circle at 35% 28%, #fffdf6, #efe8d4 75%);
  box-shadow:0 0 0 5px var(--rim, #fff), 0 0 0 10px #fff, inset 0 1px 2px rgba(0,0,0,.2);
  color:var(--ink-c, #333);
}
#pbGame .chip.c5{ background:radial-gradient(circle at 35% 30%, #4caa5f, #1f6b2c); --rim:#4caa5f; --ink-c:#1f6b2c; }
#pbGame .chip.c10{ background:radial-gradient(circle at 35% 30%, #d1545f, #7a1c2a); --rim:#d1545f; --ink-c:#7a1c2a; }
#pbGame .chip.c25{ background:radial-gradient(circle at 35% 30%, #4a86d6, #1e3f74); --rim:#4a86d6; --ink-c:#1e3f74; }
#pbGame .chip.c50{ background:radial-gradient(circle at 35% 30%, #a267d1, #5a2f80); --rim:#a267d1; --ink-c:#5a2f80; }
#pbGame .chip.c100{ background:radial-gradient(circle at 35% 30%, #3a3a3a, #0d0d0d); --rim:#555; --ink-c:#111; }
#pbGame .chip.c500{ background:radial-gradient(circle at 35% 30%, #e6cc8e, #a8883f); --rim:#e6cc8e; --ink-c:#6d5420; }
#pbGame .chip.c100 .chip-face, #pbGame .chip.c500 .chip-face{ font-size:11px; }
#pbGame .chip:disabled{ opacity:.4; cursor:default; }
#pbGame .chip.selected{ box-shadow:0 5px 10px rgba(0,0,0,.5), inset 0 0 0 3px var(--pb-gold-bright), inset 0 0 8px rgba(230,204,142,.55), 0 0 0 3px var(--pb-gold-bright); }
#pbGame .chip.over{ opacity:.45; }
.rack-tools{ display:flex; gap:8px; align-items:center; }
#pbGame .rack-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  height:44px; min-width:48px; padding:0 8px;
  color:var(--pb-ivory); background:rgba(0,0,0,.26); border:1px solid rgba(230,204,142,.22); border-radius:9px; cursor:pointer;
}
#pbGame .rack-btn .ico{ font-size:13px; line-height:1; }
#pbGame .rack-btn .rack-label{ font-size:8.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
#pbGame .rack-btn:disabled{ opacity:.4; cursor:default; }
.pb-limits{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:0 2px; }
.pb-limits label{ font-size:9px; letter-spacing:1px; text-transform:uppercase; opacity:.8; white-space:nowrap; }
.pb-limits .mono{ font-size:12px; font-weight:700; color:var(--pb-gold-bright); white-space:nowrap; }
.pb-limit-note{ display:block; font-size:9.5px; opacity:.75; white-space:nowrap; }

/* The itemised result (item 5): the family's strip. */
.pb-settlement{
  display:none; flex-direction:column; justify-content:center; gap:3px; width:100%; height:100%; overflow:hidden;
  font-size:11.5px; color:var(--pb-ivory);
  background:rgba(0,0,0,.5); border:1px solid var(--pb-gold-line); border-radius:12px;
  padding:5px 10px 6px;
}
body[data-ui-phase="settled"] .pb-settlement{ display:flex; animation:pbIn var(--pb-result-ms) ease-out; }
@keyframes pbIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
body[data-ui-phase="dealing"] .pb-band{ visibility:hidden; }
.settlement-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.settlement-note{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--pb-gold-bright); background:rgba(0,0,0,.35); border-radius:6px; padding:0 8px; line-height:15px; white-space:nowrap; }
.settlement-note:empty{ display:none; }
.settlement-dealer{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; margin-left:auto; }
.st-hand{ font-family:Fraunces, serif; font-size:12px; font-weight:700; color:var(--pb-gold-bright); }
.settlement-rows{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 10px; }
.settlement-rows[data-count="1"]{ grid-template-columns:minmax(0,1fr); }
.settlement-row{
  display:grid; grid-template-columns:78px auto auto minmax(0,1fr) auto auto; align-items:center; gap:5px;
  background:rgba(255,255,255,.05); border-radius:7px; padding:0 6px; min-width:0; height:16px;
}
.sr-label{ font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; line-height:14px; }
.sr-stake, .sr-returned{ font-family:"IBM Plex Mono", monospace; opacity:.88; line-height:14px; white-space:nowrap; }
.sr-result{ font-size:10px; font-weight:800; letter-spacing:.6px; border-radius:6px; padding:0 6px; line-height:13px; background:rgba(0,0,0,.4); }
.sr-result.win{ color:var(--pb-win); } .sr-result.loss{ color:var(--pb-loss); } .sr-result.push{ color:#e6dfcc; }
.sr-rate{ font-size:10.5px; line-height:14px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-delta{ font-family:"IBM Plex Mono", monospace; font-weight:800; line-height:14px; white-space:nowrap; }
.sr-delta.win, .st-val.win{ color:var(--pb-win); }
.sr-delta.loss, .st-val.loss{ color:var(--pb-loss); }
.settlement-totals{ display:flex; justify-content:flex-end; gap:20px; }
.settlement-total-row{ display:flex; align-items:baseline; gap:10px; }
.st-label{ font-size:10.5px; letter-spacing:.63px; text-transform:uppercase; opacity:.85; white-space:nowrap; }
.st-val{ font-family:"IBM Plex Mono", monospace; font-size:13px; font-weight:800; white-space:nowrap; }

/* ---- panels ------------------------------------------------------------------------ */
.panel-overlay{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.6); }
.panel-overlay.open{ display:flex; }
.panel-overlay .panel{
  width:min(480px, 100%); max-height:100%; overflow:auto;
  background:linear-gradient(155deg, rgba(26,10,12,.97), rgba(8,4,5,.97));
  border:1px solid var(--pb-gold-line); border-radius:16px; padding:22px 24px;
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--pb-ivory); font-family:Inter, system-ui, sans-serif;
}
.panel h2{ font-family:Cinzel, serif; font-size:20px; font-weight:700; color:var(--pb-gold); margin:0 0 4px; }
.panel .sub{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:#b5aaa6; margin:0 0 10px; }
.rules-list{ margin:0 0 10px; padding-left:18px; }
.rules-list li{ font-size:13.5px; line-height:1.55; margin-bottom:4px; }
.pb-rules-tables{ margin:6px 0 12px; }
.rules-kbd{ font-size:12px; opacity:.8; }
.panel-close{ position:sticky; bottom:0; z-index:2; background:#140709; display:block; width:100%; margin-top:10px; padding:10px; min-height:44px; font-weight:700; color:var(--pb-ivory); background:none; border:1px solid var(--pb-gold-line); border-radius:999px; cursor:pointer; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:rgba(255,255,255,.15); border-radius:20px; cursor:pointer; transition:background .2s; }
.slider::before{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--pb-ink); transition:transform .2s; }
.switch input:checked + .slider{ background:var(--pb-gold); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
.switch input:focus-visible + .slider{ outline:2px solid var(--pb-gold-bright); outline-offset:2px; }
.sr-only{ position:fixed; top:0; left:0; width:1px; height:1px; padding:0; margin:0; overflow:visible; clip-path:inset(50%); white-space:nowrap; border:0; pointer-events:none; }

/* ---- the stats module's colours, and where it sits ---------------------------------- */
#pbGame, .panel-overlay{ --ts-gold: var(--pb-gold); --ts-gold-bright: var(--pb-gold-bright); --ts-ivory: var(--pb-ivory); --ts-win: var(--pb-win); --ts-loss: var(--pb-loss); }
.pb-right .ts-felt{ margin-top:4px; }
.pb-stats-panel{ width:min(640px, 100%) !important; }

/* ===========================================================================
   NARROWER DESKTOPS (900-1199 wide; 680-899 upright tablets are out of scope)
   =========================================================================== */
@media (min-width:680px) and (max-width:1199px){
  :root{ --pb-left-w: 146px; --pb-right-w: 140px; --pb-sides: 420px; --pb-band-h: 130px; --pb-fixed: 539px; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ height:14px; }
  .pb-settlement{ gap:2px; padding:2px 10px 3px; }
  .settlement-head, .settlement-totals{ line-height:14px; }
  .settlement-head{ flex-wrap:wrap; row-gap:1px; }
  #pbWagerControls{ gap:6px; }
  .chip-row{ gap:4px; }
  #pbGame .chip{ width:44px; height:44px; min-height:44px; }
  .rack-tools{ gap:4px; }
  #pbGame .rack-btn{ min-width:44px; padding:0 5px; }
  .spot-name{ font-size:12.5px; letter-spacing:.6px; }
  #pbGame .bac-spot{ column-gap:6px; padding:4px 8px; }
  .bead-plate{ grid-template-rows:repeat(6, 10px); grid-auto-columns:10px; min-height:65px; }
  .pb-left .bead{ width:10px; height:10px; font-size:6.5px; }
  .pb-bank-val{ font-size:20px; }
}
/* SHORT DESKTOP WINDOWS: the furniture gives before the cards. */
@media (min-width:680px) and (max-height:640px) and (min-height:481px){
  :root{ --pb-fixed: 504px; --pb-vgap: 3px; --main-h: 54px; --side-h: 38px; }
  #pbHeader{ padding:4px 14px 5px; }
  #pbGame .gold-icon-btn{ height:40px; }
  .pb-actions{ height:46px; }
  .pb-note-line{ height:28px; }
  .pb-settlement{ padding:3px 8px 4px; gap:2px; }
  #pbGame footer{ padding:0 16px 2px; font-size:8.5px; }
  .pb-left{ gap:8px; }
  .pb-inline-rules{ display:none; }
}
@media (min-width:680px) and (max-width:1199px) and (max-height:640px) and (min-height:481px){
  :root{ --pb-fixed: 506px; --pb-band-h: 130px; }
  /* The natural and pairs note gives way here (the cards and the rows show both). */
  #pbSettlement .settlement-note{ display:none; }
}
/* Desktops under 600px high: the last coup lives in the Stats panel. */
@media (min-width:680px) and (max-height:599px){
  .ts-felt .ts-recap{ display:none; }
}
@media (min-width:680px) and (max-height:600px) and (min-height:481px){
  :root{ --pb-vgap: 1px; --main-h: 46px; --side-h: 32px; --pb-fixed: 432px; }
  .pb-spots{ gap:3px; }
  #pbGame .bac-spot{ row-gap:0; padding-top:2px; padding-bottom:2px; }
  .spot-name{ font-size:13px; line-height:15px; }
  .spot-pays{ line-height:12px; } .spot-note{ line-height:11px; }
  .bac-spot.side .spot-name{ line-height:12px; }
  .pb-note-line{ height:20px !important; }
  #pbHeader{ padding:2px 14px 3px; }
  #pbGame .gold-icon-btn{ height:38px; }
  #pbTable .felt-surface{ padding-top:17px; padding-bottom:18px; }
  .pb-call{ height:18px; line-height:18px; font-size:14px; }
  .pb-hand-head{ height:12px; }
  .pb-hand{ padding:0 6px 2px; gap:1px; }
  .pb-hand-head > *{ line-height:12px; }
  .pb-total{ font-size:12.5px; }
  .pb-call{ height:16px; line-height:16px; }
  .pb-actions{ height:44px; }
  .pb-note-line{ height:26px; }
  .settlement-row{ height:14px; }
  .pb-paytables{ display:none; }
}

/* ===========================================================================
   PHONES HELD UPRIGHT (fits at 360x640 and larger with no scrolling; 320x568
   may scroll vertically — Ronan's standing answer). Top to bottom: the title
   and the four labelled buttons; Last Win / Last Bet, the shoe and the
   balance in the felt's top corners; the two hands; the instruction; the six
   spots; Deal; the tip; the chips or the result. The rules, the results
   history and the stats are in their panels.
   =========================================================================== */
@media (max-width:679px) and (min-height:481px){
  :root{
    --pb-fixed-p: 520px;
    --card-gap: 4px;
    /* The third card may overlap the second on a phone: cards sized for 2.8 across. */
    --card-w: clamp(38px, min(calc(((100vw - 56px) / 2 - 22px) / 2.8), calc((100dvh - var(--pb-fixed-p)) * 0.712)), 70px);
    --card-h: calc(var(--card-w) / 0.712);
    --pb-vgap: 4px;
    --pb-band-h: 132px;
    --main-h: 74px;
    --side-h: 56px;
    --pile-chip: 22px;
  }
  body{ overflow-x:hidden; overflow-y:auto; }
  #pbGame{ height:auto; min-height:100vh; min-height:100dvh; overflow:visible; }
  #pbHeader{ flex-wrap:nowrap; gap:8px; padding:4px 10px; }
  #pbHeader .wordmark{ flex:1 1 auto; min-width:0; }
  #pbHeader .title{ white-space:normal; font-size:15px; line-height:18px; }
  #pbSecondaryControls{ flex:none; gap:6px; }
  #pbGame .gold-icon-btn{ min-width:44px; height:44px; padding:0 4px; }
  #pbGame .gold-icon-btn .btn-label{ letter-spacing:.2px; }
  .table-wrap{ padding:2px; }
  #pbTable{ padding:2px 4px; }
  #pbTable .felt-surface{ padding:4px 18px 18px; }
  .table-wrap, #pbTable, #pbTable .felt-surface, .pb-layout{ min-height:auto; }
  .pb-layout{ flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:var(--pb-vgap); padding:50px 0 2px; }
  .pb-left, .pb-right, .pb-centre{ display:contents; }
  .pb-paytables, .pb-left .pb-road{ display:none; }
  .pb-hands{ order:1; } .pb-call{ order:2; } .pb-spots{ order:3; } .pb-actions{ order:4; } .pb-note-line{ order:5; } .pb-band{ order:6; }
  .pb-hands, .pb-call, .pb-spots, .pb-actions, .pb-note-line, .pb-band{ flex:none; }
  .pb-rail{ position:absolute; top:15px; left:6px; flex-direction:column; gap:1px; }
  .pb-rail .felt-stat{ gap:5px; line-height:14px; }
  .pb-rail label{ font-size:8.5px; letter-spacing:1px; min-width:52px; }
  .pb-rail .val{ font-size:12px; line-height:14px; }
  .pb-shoe{ position:absolute; top:34px; right:6px; font-size:9px; line-height:12px; }
  .pb-bank{ position:absolute; top:15px; right:6px; flex-direction:row; align-items:baseline; gap:6px; }
  .pb-bank-val{ font-size:16px; }
  .pb-hands{ gap:8px; }
  .pb-hand{ flex:1 1 0; padding:2px 5px 4px; gap:2px; }
  .pb-hand-head{ height:13px; gap:5px; }
  .pb-hand-name{ font-size:9.5px; letter-spacing:1.2px; line-height:10px; }
  .pb-total{ font-size:12px; line-height:13px; }
  .pb-status{ font-size:8.5px; letter-spacing:.3px; line-height:10px; }
  .pb-call{ font-size:13px; height:18px; line-height:18px; }
  .pb-spots{ gap:4px; }
  .pb-spot-row{ gap:4px; }
  /* A narrow spot: its name and payout on top, its chips and stake below. */
  #pbGame .bac-spot{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; grid-template-areas:"name name" "pays stake" "pile pile"; column-gap:4px; row-gap:1px; padding:3px 6px; border-radius:11px; align-content:start; }
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-rows:auto auto auto auto; grid-template-areas:"name name" "pays stake" "pile pile" "note note"; }
  #pbGame .bac-spot.side{ grid-template-rows:auto auto auto; grid-template-areas:"name name" "pays stake" "pile pile"; padding:2px 6px; }
  .spot-name{ font-size:12px; line-height:14px; letter-spacing:.6px; }
  .bac-spot.side .spot-name{ font-size:9.5px; line-height:12px; letter-spacing:.2px; }
  .spot-pays{ font-size:9.5px; line-height:11px; }
  .spot-note{ font-size:8px; line-height:10px; letter-spacing:0; overflow:visible; }
  .spot-stake{ font-size:11px; line-height:13px; }
  .spot-outcome{ font-size:9.5px; line-height:11px; }
  .bac-spot.side .spot-pile{ --pile-chip:18px; }
  .spot-pile{ height:calc(var(--pile-chip) + 4px); }
  .pb-actions{ height:44px; }
  #pbGame .btn-deal{ min-width:180px; }
  #settleActions .action{ min-width:0; flex:1 1 0; }
  #pbGame .action{ font-size:12px; padding:0 6px; }
  #pbGame .action .db-sub{ font-size:9px; }
  .pb-note-line{ height:28px; padding:0 4px; }
  .pb-notice, .pb-tip{ font-size:10.5px; line-height:13px; letter-spacing:0; }
  .pb-band{ max-width:100%; justify-content:center; }
  #pbWagerControls{ flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding-top:4px; }
  .chip-row{ gap:4px; }
  #pbGame .chip{ width:44px; height:44px; min-height:44px; }
  .rack-tools{ gap:6px; }
  .pb-settlement{ padding:2px 6px; gap:1px; font-size:10.5px; justify-content:flex-start; }
  .settlement-head{ flex-wrap:wrap; gap:0 8px; }
  .settlement-note{ font-size:9.5px; line-height:12px; padding:0 6px; }
  .settlement-dealer{ gap:6px; }
  .st-hand{ font-size:11px; line-height:13px; }
  .st-label{ font-size:9px; letter-spacing:.3px; line-height:13px; }
  .st-val{ font-size:11px; line-height:13px; }
  .settlement-totals{ justify-content:space-between; gap:8px; }
  #pbSettlement .settlement-note{ display:none; }
  .settlement-dealer{ margin-left:0; width:100%; justify-content:space-between; }
  .settlement-totals{ flex-wrap:wrap; row-gap:0; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ grid-template-columns:66px auto auto minmax(0,1fr) auto auto; gap:3px; padding:0 4px; height:13px; }
  .sr-label{ font-size:9px; letter-spacing:.2px; line-height:12px; }
  .sr-stake, .sr-returned, .sr-delta{ font-size:10px; line-height:12px; }
  .sr-result{ font-size:8.5px; padding:0 4px; line-height:11px; }
  .sr-rate{ font-size:9px; line-height:12px; }
  #pbGame footer{ padding:2px 8px 4px; font-size:10px; line-height:13px; }
  #pbGame footer .footer-full{ display:none; }
  #pbGame footer .footer-short{ display:inline; }
}
/* 320 wide (below the approved minimum; it may scroll vertically). */
@media (max-width:359px) and (min-height:481px){
  :root{ --pb-band-h: 212px; }
  .table-wrap{ padding:2px 0; }
  #pbTable{ padding:2px; }
  #pbHeader{ gap:4px; padding:4px 6px; }
  #pbSecondaryControls{ gap:3px; }
  #pbGame .gold-icon-btn{ padding:0 3px; }
  #pbGame .gold-icon-btn .btn-label{ letter-spacing:0; }
  .pb-layout{ justify-content:flex-start; }
  .chip-row{ gap:3px; }
  .pb-note-line{ height:40px; }
  .pb-bank label{ font-size:8px; letter-spacing:.8px; }
  :root{ --main-h: 84px; }
  .spot-note{ white-space:normal; line-height:9.5px; }
  .settlement-row{ grid-template-columns:62px minmax(0,1fr) auto auto; grid-template-areas:"l s r d" "rt rt ret ret"; height:auto; row-gap:0; }
  .sr-label{ grid-area:l; } .sr-stake{ grid-area:s; } .sr-result{ grid-area:r; justify-self:end; }
  .sr-delta{ grid-area:d; justify-self:end; } .sr-rate{ grid-area:rt; } .sr-returned{ grid-area:ret; justify-self:end; }
  .settlement-totals{ flex-direction:column; gap:0; }
  .settlement-total-row{ justify-content:space-between; }
  .settlement-dealer{ width:100%; justify-content:space-between; }
  .spot-name{ font-size:11px; letter-spacing:.3px; }
  .bac-spot.side .spot-name{ font-size:8.5px; letter-spacing:0; }
}

/* ===========================================================================
   PHONES HELD SIDEWAYS, and any window 480px high or less: the hands, the
   instruction and the six spots on the left; Deal, the tip and the chips or
   the result on the right.
   =========================================================================== */
@media (max-height:480px){
  :root{
    --pb-r-w: 222px;
    --pb-fixed-l: 266px;
    --card-gap: 4px;
    --card-w: clamp(34px, min(calc(((100vw - var(--pb-r-w) - 70px) / 2 - 20px) / 3.4), calc((100dvh - var(--pb-fixed-l)) * 0.712)), 64px);
    --card-h: calc(var(--card-w) / 0.712);
    --pb-vgap: 3px;
    --main-h: 44px;
    --side-h: 32px;
    --pile-chip: 20px;
  }
  body{ overflow:hidden; }
  #pbGame{ height:100vh; height:100dvh; overflow:hidden; }
  #pbHeader{ flex-wrap:nowrap; justify-content:flex-start; gap:12px; padding:2px 150px 2px 10px; height:40px; }
  #pbHeader .title{ font-size:14px; line-height:16px; white-space:normal; max-width:150px; }
  #pbSecondaryControls{ gap:4px; }
  #pbGame .gold-icon-btn{ min-width:44px; height:38px; padding:0 4px; }
  .pb-bank{ position:fixed; top:10px; right:14px; flex-direction:row; align-items:baseline; gap:6px; }
  .pb-bank-val{ font-size:17px; }
  .table-wrap{ padding:0 4px 2px; }
  #pbTable{ padding:2px 4px; }
  #pbTable .felt-surface{ padding:18px 18px 18px; }
  .pb-layout{ display:flex; flex-direction:column; justify-content:center; gap:var(--pb-vgap); padding:14px calc(var(--pb-r-w) + 8px) 0 0; }
  .pb-left, .pb-right, .pb-centre{ display:contents; }
  .pb-paytables, .pb-left .pb-road{ display:none; }
  .pb-hands{ order:1; } .pb-call{ order:2; } .pb-spots{ order:3; }
  .pb-hands, .pb-call, .pb-spots{ flex:none; }
  .pb-rail{ position:absolute; top:0; left:0; flex-direction:row; gap:10px; z-index:2; }
  .pb-rail .felt-stat{ gap:5px; }
  .pb-rail label{ font-size:8px; letter-spacing:.8px; }
  .pb-rail .val{ font-size:11px; }
  .pb-shoe{ position:absolute; top:1px; right:calc(var(--pb-r-w) + 10px); font-size:8.5px; }
  .pb-hands{ gap:8px; }
  .pb-hand{ flex:1 1 0; padding:1px 5px 3px; gap:1px; }
  .pb-hand-head{ height:12px; gap:5px; }
  .pb-hand-name{ font-size:9px; letter-spacing:1px; line-height:10px; }
  .pb-total{ font-size:11.5px; line-height:12px; }
  .pb-status{ font-size:8.5px; line-height:10px; }
  .pb-call{ font-size:13px; height:16px; line-height:16px; }
  .pb-spots{ gap:4px; }
  .pb-spot-row{ gap:4px; }
  #pbGame .bac-spot{ column-gap:5px; row-gap:0; padding:2px 6px; border-radius:10px; }
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-areas:"pile name name" "pile pays stake" "note note note"; }
  .spot-note{ font-size:8px; line-height:10px; letter-spacing:0; overflow:visible; }
  .spot-name{ font-size:11.5px; line-height:13px; letter-spacing:.5px; }
  .bac-spot.side .spot-name{ font-size:9px; line-height:11px; letter-spacing:.2px; }
  .spot-pays{ font-size:9px; line-height:11px; }
  .spot-stake{ font-size:10.5px; line-height:12px; }
  .spot-outcome{ font-size:9px; line-height:11px; }
  .bac-spot.side .spot-pile{ --pile-chip:16px; }
  .spot-pile{ height:calc(var(--pile-chip) + 4px); }

  .pb-actions, .pb-note-line, .pb-band{ position:absolute; right:0; width:calc(var(--pb-r-w) - 4px); max-width:none; padding:0; }
  .pb-actions{ top:0; height:44px; }
  .pb-actions .action-row{ gap:4px; }
  #pbGame .action{ min-width:0; min-height:44px; padding:0 6px; font-size:12.5px; }
  #pbGame .btn-deal{ min-width:0; flex:1 1 auto; }
  #settleActions .action{ min-width:0; flex:1 1 0; font-size:12px; }
  #pbGame .action .db-sub{ font-size:9px; }
  .pb-note-line{ top:48px; height:38px; align-items:flex-start; text-align:left; }
  .pb-notice, .pb-tip{ font-size:10.5px; line-height:13px; letter-spacing:0; }
  .pb-band{ top:88px; bottom:0; height:auto; }
  #pbWagerControls{ flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; }
  .chip-row{ gap:4px; flex-wrap:wrap; justify-content:center; max-width:150px; }
  #pbGame .chip{ width:44px; height:44px; min-height:44px; }
  .rack-tools{ gap:4px; flex-wrap:wrap; justify-content:center; }
  #pbGame .rack-btn{ min-width:44px; height:44px; padding:0 4px; }
  .pb-limits{ flex-direction:row; align-items:baseline; gap:5px; }
  .pb-limit-note{ display:none; }
  .pb-settlement{ padding:2px 6px; gap:0; font-size:10.5px; justify-content:flex-start; }
  .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  /* The natural and pairs note gives way (the cards and the rows show both). */
  .settlement-note{ display:none !important; }
  .settlement-dealer{ justify-content:space-between; margin-left:0; flex-wrap:wrap; row-gap:0; }
  #settleDealer{ white-space:normal; line-height:12px; font-size:10.5px; }
  .st-label{ font-size:9px; letter-spacing:.3px; line-height:12px; }
  .st-val{ font-size:11px; line-height:12px; }
  .settlement-totals{ flex-direction:column; gap:0; }
  .settlement-total-row{ justify-content:space-between; gap:6px; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ grid-template-columns:66px minmax(0,1fr) auto auto; grid-template-areas:"l s r d" "rt rt rt ret"; column-gap:5px; row-gap:0; height:auto; padding:0 5px; }
  .sr-label{ grid-area:l; font-size:8.5px; letter-spacing:0; line-height:10px; }
  .sr-stake{ grid-area:s; font-size:9.5px; line-height:10px; }
  .sr-result{ grid-area:r; justify-self:end; font-size:8.5px; padding:0 4px; line-height:10px; }
  .sr-delta{ grid-area:d; justify-self:end; font-size:9.5px; line-height:10px; }
  .sr-rate{ grid-area:rt; font-size:8.5px; line-height:9px; }
  .sr-returned{ grid-area:ret; justify-self:end; font-size:8.5px; line-height:9px; }
  #pbGame footer{ padding:0 8px 2px; font-size:10px; line-height:13px; }
  #pbGame footer .footer-full{ display:none; }
  #pbGame footer .footer-short{ display:inline; }
}

/* 900-1199 wide and 481-540 high: the result's rows are 13px, so the band
   gives the hands their room (the cards are at their floor here). */
@media (min-width:680px) and (max-width:1199px) and (max-height:600px) and (min-height:481px){
  :root{ --pb-band-h: 124px; --pb-fixed: 426px; }
  .pb-spots{ gap:2px; }
  .pb-call{ height:15px; line-height:15px; }
  .settlement-row{ height:13px; }
  .sr-label, .sr-stake, .sr-returned, .sr-rate, .sr-delta{ line-height:12px; font-size:10px; }
  .sr-result{ line-height:11px; font-size:9.5px; }
}


/* ===========================================================================
   PUNTO BANCO: THE FIVE SPOTS (item 10). Player, Tie and Banker across, the
   three large and solid-edged; each Pair a smaller dashed spot directly
   above its own hand's main spot (Player Pair over Player, Banker Pair over
   Banker), at every size. Inside a main spot: the name; the payout (the
   outcome once settled) and the stake; the chips, with the Banker's
   commission note beside them. A Pair spot on a desktop is one line: its
   chips, name, payout and stake.
   =========================================================================== */
:root{ --main-h: 70px; --side-h: 34px; --pile-chip: 24px; }
#pbGame .pb-spots{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto; gap:5px 8px; max-width:780px; }
#pbGame .bac-spot[data-spot="playerPair"]{ grid-column:1; grid-row:1; }
#pbGame .bac-spot[data-spot="bankerPair"]{ grid-column:3; grid-row:1; }
#pbGame .bac-spot[data-spot="player"]{ grid-column:1; grid-row:2; }
#pbGame .bac-spot[data-spot="tie"]{ grid-column:2; grid-row:2; }
#pbGame .bac-spot[data-spot="banker"]{ grid-column:3; grid-row:2; }
#pbGame .bac-spot{ height:var(--main-h); grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto auto;
  grid-template-areas:"name name name" "pays pays stake" "pile note note"; align-content:start; row-gap:1px; column-gap:6px; padding:4px 10px; }
#pbGame .bac-spot.side{ height:var(--side-h); grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-rows:auto;
  grid-template-areas:"pile name pays stake"; align-content:center; padding:1px 10px; --pile-chip:20px; }
#pbGame .bac-spot.side .spot-pile{ height:calc(var(--pile-chip) + 4px); }
#pbGame .bac-spot.side .spot-pays, #pbGame .bac-spot.side .spot-outcome{ justify-self:start; }
#pbGame .bac-spot .spot-pile{ justify-self:start; }
#pbGame .bac-spot .spot-note{ white-space:normal; overflow:visible; line-height:10px; font-size:8.5px; align-self:center; }
@media (min-width:680px) and (max-width:1199px){
  #pbGame .pb-spots{ gap:4px 6px; }
  #pbGame .bac-spot{ padding:3px 6px; column-gap:4px; }
  #pbGame .bac-spot.side{ padding:1px 6px; column-gap:5px; }
  .spot-name{ font-size:12.5px; letter-spacing:.4px; }
  .bac-spot.side .spot-name{ font-size:9.5px; letter-spacing:.2px; }
  .spot-pays{ font-size:9.5px; }
  .pays-word{ display:none; }
  #pbGame .bac-spot .spot-note{ font-size:8px; line-height:9px; letter-spacing:0; }
}
@media (min-width:680px) and (max-height:640px) and (min-height:481px){
  :root{ --main-h: 70px; --side-h: 30px; --pile-chip: 22px; }
  #pbGame .bac-spot.side{ --pile-chip:18px; }
}
@media (min-width:680px) and (max-height:600px) and (min-height:481px){
  /* Under 600px high the chips sit beside the words, so the spots are shorter. */
  :root{ --main-h: 48px; --side-h: 24px; --pile-chip: 18px; }
  #pbGame .pb-spots{ row-gap:3px; }
  #pbGame .bac-spot{ padding-top:1px; padding-bottom:1px; row-gap:0; align-content:center;
    grid-template-areas:"pile name name" "pile pays stake" "pile note note"; }
  #pbGame .bac-spot .spot-pile{ align-self:center; }
  #pbGame .bac-spot.side{ --pile-chip:14px; padding-top:0; padding-bottom:0; }
  #pbGame .bac-spot.side .spot-name{ line-height:12px; }
}
@media (max-width:679px), (max-height:480px){
  #pbGame .pb-spots{ gap:4px; }
  #pbGame .bac-spot{ padding:2px 5px; column-gap:4px; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto auto;
    grid-template-areas:"name name name" "pays pays stake" "pile note note"; }
  #pbGame .bac-spot.side{ height:var(--side-h); grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto;
    grid-template-areas:"name name name" "pile pays stake"; align-content:start; padding:2px 5px; --pile-chip:16px; }
  #pbGame .bac-spot.side .spot-pile{ height:calc(var(--pile-chip) + 3px); }
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-rows:auto auto auto; grid-template-areas:"name name name" "pays pays stake" "pile note note"; }
  .pays-word{ display:none; }
  #pbGame .bac-spot .spot-note{ font-size:8px; line-height:9px; letter-spacing:0; }
  /* A result row with a commission takes two lines, so the commission reads in full. */
  .settlement-row.comm{ grid-template-columns:66px minmax(0,1fr) auto auto; grid-template-areas:"l s r d" "rt rt rt ret"; height:auto; row-gap:0; }
  .settlement-row.comm .sr-label{ grid-area:l; } .settlement-row.comm .sr-stake{ grid-area:s; } .settlement-row.comm .sr-result{ grid-area:r; justify-self:end; }
  .settlement-row.comm .sr-delta{ grid-area:d; justify-self:end; } .settlement-row.comm .sr-rate{ grid-area:rt; } .settlement-row.comm .sr-returned{ grid-area:ret; justify-self:end; }
}
@media (max-width:679px) and (min-height:481px){
  :root{ --main-h: 70px; --side-h: 40px; --pile-chip: 22px; --pb-band-h: 144px; }
}
@media (max-width:359px) and (min-height:481px){
  :root{ --pb-band-h: 212px; --main-h: 80px; }
  /* 320 wide: the Banker's note takes a line of its own under the chips. */
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-rows:auto auto auto auto; grid-template-areas:"name name name" "pays pays stake" "pile pile pile" "note note note"; }
}
@media (max-height:480px){
  :root{ --main-h: 60px; --side-h: 32px; --pile-chip: 18px; }
  #pbGame .bac-spot{ row-gap:0; }
}

/* The $1 chip (the build's grey), in the rack and on a spot. */
#pbGame .chip.c1{ background:radial-gradient(circle at 35% 30%, #9a9a9a, #4e4e4e); --rim:#9a9a9a; --ink-c:#3d3d3d; }
.pile-chip.c1{ --chip-c1:#9a9a9a; --chip-c2:#4e4e4e; }

/* The build's gold arc: a hairline across the felt between the hands and the
   instruction (decorative). */
.gold-arc{ flex:none; align-self:center; width:80%; max-width:640px; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--pb-gold-line) 20%, var(--pb-gold-line) 80%, transparent); }
@media (max-width:679px) and (min-height:481px){ .gold-arc{ order:2; } .pb-call{ order:3; } .pb-spots{ order:4; } .pb-actions{ order:5; } .pb-note-line{ order:6; } .pb-band{ order:7; } }
@media (max-height:480px){ .gold-arc{ order:2; } .pb-call{ order:3; } .pb-spots{ order:4; } }

/* The Round counter (the build's), on the felt with Last Win and Last Bet:
   on a phone the three lines are 11px, clear of the hands. */
@media (max-width:679px) and (min-height:481px){
  .pb-rail{ gap:0; }
  .pb-rail .felt-stat{ height:11px; line-height:11px; align-items:center; }
  .pb-rail label{ font-size:8px; line-height:11px; }
  .pb-rail .val{ font-size:11px; line-height:11px; }
}

/* The seven chips (the build's $1-$500). On a phone held upright: the chips
   in two rows of four and three, with Undo, Clear, Rebet and the total beside
   them in a square; at 320 wide, the tools under the chips. Sideways: four
   chips a row. Every chip stays 44px. */
@media (max-width:679px) and (min-height:481px){
  #pbWagerControls{ flex-direction:row; align-items:center; justify-content:center; gap:8px; padding-top:4px; }
  #chipTray.chip-row{ display:grid; grid-template-columns:repeat(4, 44px); gap:3px; }
  .rack-tools{ display:grid; grid-template-columns:48px auto; gap:4px; align-items:center; }
  .pb-limits{ max-width:66px; text-align:center; }
  .pb-limit-note{ white-space:normal; line-height:11px; }
}
@media (max-width:359px) and (min-height:481px){
  .pb-layout{ padding-top:53px; }
  #pbWagerControls{ flex-direction:column; gap:6px; }
  .rack-tools{ display:flex; gap:4px; }
}
@media (max-height:480px){
  .chip-row{ max-width:188px; }
}
@media (max-height:480px){
  #pbHeader .wordmark{ gap:1px; }
  #pbHeader .eyebrow{ font-size:8px; line-height:9px; letter-spacing:1.6px; }
  #pbHeader .title{ white-space:nowrap; max-width:none; }
}
@media (max-width:679px) and (min-height:481px){
  #pbHeader .wordmark{ gap:1px; }
  #pbHeader .eyebrow{ font-size:8.5px; line-height:10px; letter-spacing:1.6px; }
}

/* 1200 wide and up: one result row per bet, so the commission reads in full. */
@media (min-width:1200px){
  :root{ --pb-band-h: 128px; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ height:15px; }
}

/* The build's shoe picture beside the deck count (Ronan, 2026-09-25 14:42:
   "yes"): on a desktop; on a phone, upright or sideways, the count alone
   (there is no room beside the cards). */
.pb-shoe{ display:flex; align-items:center; gap:6px; }
.pb-shoe .shoe-art{ flex:none; width:30px; height:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
@media (max-width:679px), (max-height:480px){ .pb-shoe .shoe-art{ display:none; } }

/* ===========================================================================
   THE SITE'S PHONE FRAME (2026-09-26). On the site a phone does not get the
   whole screen: custom.js caps the frame at 92% of the visible height (611px
   on an iPhone 12-14, 589px from a 360 x 640 Android) and the page's padding
   makes it about 30px narrower than the screen. The table now fills the
   frame it is given (the frame's height is measured, --frame-h, not 100dvh,
   which an iPhone may take from the whole screen inside a frame) and the
   furniture is tightened so the tallest state fits from 589px up. Nothing is
   hidden. The iPhone SE's 504px frame may scroll vertically (Ronan, "go").
   =========================================================================== */
@media (max-width:679px) and (min-height:481px){
  :root{
    --pb-fixed-p: 536px;
    --card-w: clamp(34px, min(calc(((100vw - 56px) / 2 - 22px) / 2.8), calc((var(--frame-h, 100dvh) - var(--pb-fixed-p)) * 0.712)), 70px);
    --main-h: 62px; --side-h: 36px; --pb-band-h: 130px;
  }
  #pbGame{ min-height:var(--frame-h, 100dvh); }
  #pbHeader{ padding:2px 10px; min-height:48px; }
  #pbHeader .title{ font-size:13px; line-height:15px; }
  #pbHeader .eyebrow{ font-size:8px; line-height:9px; }
  #pbGame footer{ padding:1px 8px 3px; font-size:9px; line-height:11px; }
  #pbGame .bac-spot.side{ padding:1px 5px; }
}
@media (max-width:359px) and (min-height:481px){
  :root{ --pb-fixed-p: 548px; --main-h: 62px; --pb-band-h: 142px; }
  .pb-layout{ padding-top:51px; }
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-rows:auto auto auto; grid-template-areas:"name name name" "pays pays stake" "pile note note"; }
  .pb-note-line{ height:28px; }
  /* 330 wide: the chips three a row beside Undo, Clear, Rebet and the total. */
  #pbWagerControls{ flex-direction:row; gap:8px; }
  #chipTray.chip-row{ grid-template-columns:repeat(3, 44px); }
  .rack-tools{ display:grid; grid-template-columns:48px auto; gap:4px; }
  /* One line a bet (the commission row two), in smaller type. */
  .settlement-row{ grid-template-columns:auto auto auto minmax(0,1fr) auto auto; grid-template-areas:none; height:13px; column-gap:3px; padding:0 3px; }
  .settlement-row > *{ grid-area:auto; }
  .sr-label{ font-size:8px; letter-spacing:0; }
  .sr-stake, .sr-returned, .sr-delta{ font-size:9px; }
  .sr-result{ font-size:7.5px; padding:0 3px; }
  .sr-rate{ font-size:8px; }
  .settlement-row.comm{ grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"l s r d" "rt rt rt ret"; height:auto; }
  .settlement-row.comm .sr-label{ grid-area:l; } .settlement-row.comm .sr-stake{ grid-area:s; } .settlement-row.comm .sr-result{ grid-area:r; }
  .settlement-row.comm .sr-delta{ grid-area:d; } .settlement-row.comm .sr-rate{ grid-area:rt; } .settlement-row.comm .sr-returned{ grid-area:ret; }
  .settlement-totals{ flex-direction:row; gap:6px; }
  .st-label{ font-size:8px; letter-spacing:0; }
  .st-val{ font-size:10px; }
}
/* 320 wide (below the approved minimum; it may scroll): the Banker's note on a
   line of its own under the chips, as before. */
@media (max-width:329px) and (min-height:481px){
  :root{ --main-h: 82px; }
  #pbGame .bac-spot[data-spot="banker"]{ grid-template-rows:auto auto auto auto; grid-template-areas:"name name name" "pays pays stake" "pile pile pile" "note note note"; }
}

/* 1200 wide and up, under 600px high: the one-column result a little tighter,
   so the hands keep clear of the felt's gold line. */
@media (min-width:1200px) and (max-height:600px) and (min-height:481px){
  :root{ --pb-band-h: 120px; }
  .settlement-row{ height:14px; }
  .pb-settlement{ gap:2px; padding-top:3px; padding-bottom:3px; }
}