/* CASINO READABLE — the poker family's readability layer (Phase 2).
   Decisions: briefs/poker-family-decisions.md — Design 1–4 (Ronan 2026-10-03
   15:36) and P2-1..P2-4 (2026-10-03 evening). Poker only (P2-4): the shared
   game.css stays byte-identical across the 15 casino games, so everything
   here is loaded after each poker game's own sheets.
     - felt: B2 #3A497B, deep #232C47, highlight #4B5F9F;
     - header: labels 12px, faces lifted, 48px targets (44px on phones);
     - text: nothing under 12px, essentials 13px (card corners excepted, P2-2);
     - contrast: 4.5:1 against what is drawn behind (3:1 large);
     - the "Last 20 hands" strip beside the table from 1200px wide only;
       narrower, it lives in the Stats panel (P2-3).
   Measured by harness/casino-readability.js. */

/* ---- felt (Design 1) ---------------------------------------------------- */
:root{
  /* Ronan 2026-10-04: the deeper blue, so every word reaches 7:1 (no pale
     type); still well above the old #1B2F5E. Was B2 #3A497B / #4B5F9F. */
  --table-bg:#2C3B6B;
  --table-deep:#1E2744;
  --table-highlight:#31427A;
  --felt-2:#26335C;
  /* inks that hold 4.5:1 on the brightest part of the B2 felt (#4B5F9F) */
  --rd-ink:#F6F2E8;
  --rd-muted:#EFE8D8;
  --rd-gold:#FCE9BC;
  /* every gold, win and loss ink at 7:1 on the felt (no pale type) */
  --lose:#FFC2C9; --ts-loss:#FFC2C9; --fcp-loss:#FFC2C9; --csp-loss:#FFC2C9; --uth-loss:#FFC2C9; --fcd-loss:#FFC2C9;
  --win:#9BEAA6; --ts-win:#9BEAA6; --fcp-win:#9BEAA6; --csp-win:#9BEAA6; --uth-win:#9BEAA6; --fcd-win:#9BEAA6;
  --gold-bright:#FCE9BC; --fcp-gold-bright:#FCE9BC; --csp-gold-bright:#FCE9BC; --uth-gold-bright:#FCE9BC; --fcd-gold-bright:#FCE9BC; --ts-gold-bright:#FCE9BC;
}

/* ---- header (Design 2) -------------------------------------------------- */
html body .gold-icon-btn{
  min-height:48px;
  background:linear-gradient(160deg, #3a3326 0%, #2a241b 100%) !important;
  border-color:rgba(224,185,94,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.14), 0 1px 2px rgba(0,0,0,.5);
}
html body .gold-icon-btn:hover{ background:linear-gradient(160deg, #4a4130 0%, #342c20 100%) !important; border-color:var(--gold, #e0b95e) !important; }
html body .gold-icon-btn .btn-label,
html body .brand-cluster .gold-icon-btn .btn-label,
html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label{
  font-size:12px !important; letter-spacing:.02em !important; text-transform:none !important;
}

/* ---- text floors (Design 3) --------------------------------------------- */
/* labels and small print: 12px */
html body #fcpGameplayTip, html body #cspGameplayTip, html body #uthGameplayTip, html body .fcp-notice, html body .csp-notice, html body .uth-notice,
html body .settlement-note, html body #settlementNote, html body .play-cost-note, html body #playerBestCap, html body #dealerBestCap,
html body footer .footer-full, html body footer .footer-short{ font-size:12px !important; }
html body .felt-stat label, html body .stat-box label, html body .last-hand-box label,
html body .spot-label, html body .spot-sub, html body .spot-limits, html body .spot-limits *,
html body .rack-label, html body .db-sub, html body .st-label,
html body .sr-label, html body .sr-rate, html body .sr-result,
html body .pt-row, html body .pt-row *, html body .pt-title, html body .pt-note, html body .pt-foot,
html body .rules-inline li, html body #rulesInlineList li, html body #rulesInlineTitle,
html body footer, html body footer span,
html body .tcp-seat-label, html body .fcp-seat-label, html body .csp-seat-label, html body .uth-seat-label,
html body .ts-felt .ts-title, html body .ts-felt .ts-sub, html body .ts-felt .ts-row, html body .ts-felt .ts-row *,
html body .ts-felt .ts-keys, html body .ts-felt .ts-key, html body .ts-felt .ts-mark, html body .ts-felt .ts-empty,
html body .ts-felt .ts-name, html body .ts-felt .ts-style{
  font-size:12px !important;
}
html body .felt-stat label, html body .stat-box label, html body .last-hand-box label{ letter-spacing:.06em !important; }
html body .ts-felt .ts-mark{ min-width:16px; height:16px; line-height:16px !important; }
html body .ts-felt .ts-cell{ height:18px; }
html body .ts-felt .ts-sub, html body .ts-felt .ts-empty, html body .ts-felt .ts-keys, html body .ts-felt .ts-style{ opacity:1 !important; color:var(--rd-muted) !important; }

/* essentials: 13px — the balance, the instruction, the result, bets, the action buttons */
html body .felt-stat .val, html body .sr-stake, html body .sr-returned, html body .sr-delta,
html body #anteVal, html body #playVal, html body #raiseVal, html body #acesUpVal, html body #bonusVal,
html body #amountTrips, html body #amountAnte, html body #amountBlind, html body #amountPlay,
html body #lastBetVal, html body #lastWinVal, html body #settlePlayerHand, html body #settleDealerHand{
  font-size:13px !important;
}

/* chip values (P2-2): 12px, three-digit chips a little condensed to fit */
html body .chip.c500 .chip-face, html body .pile-chip.c500 .chip-face,
html body .chip.c100 .chip-face, html body .pile-chip.c100 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- contrast (Design 4) ------------------------------------------------ */
/* the muted greys and faded tables: quieter, never below 4.5:1 */
html body .felt-stat label, html body .stat-box label, html body .last-hand-box label,
html body .spot-sub, html body .spot-limits, html body .spot-limits *, html body .rack-label,
html body footer, html body footer span{ color:var(--rd-muted) !important; opacity:1 !important; }
html body .spot-label{ color:var(--rd-ink) !important; opacity:1 !important; }
html body .pt, html body .pt-row, html body .pt-note, html body .pt-foot, html body .pt-title{ opacity:1 !important; }
html body .pt-row, html body .pt-row span, html body .pt-note, html body .pt-foot{ color:var(--rd-muted) !important; }
html body .pt-row b, html body .pt-row .mono{ color:var(--rd-gold) !important; }
html body .pt-title{ color:var(--rd-gold) !important; }
html body .rules-inline li, html body #rulesInlineList li{ color:var(--rd-ink) !important; }
html body #rulesInlineTitle{ color:var(--rd-gold) !important; opacity:1 !important; }
html body .tcp-seat-label, html body .fcp-seat-label, html body .csp-seat-label, html body .uth-seat-label{ color:var(--rd-ink) !important; opacity:1 !important; }
html body #hintBar{ color:var(--rd-gold) !important; }

/* ---- the stats strip (P2-3): beside the table from 1200px wide only ----- */
@media (max-width:1199.98px){
  html body .game-frame .ts-felt:not(.ts-panel){ display:none !important; }
}

/* ---- fades that took text below 4.5:1 ----------------------------------- */
/* pay tables during a hand: quieter, still readable (Design 4) */
html body .tcp-paytables, html body .fcp-paytables, html body .csp-paytables, html body .uth-paytables,
html body .tcp-paytables *, html body .fcp-paytables *, html body .csp-paytables *, html body .uth-paytables *{ opacity:1 !important; }
/* (at .8 the tables fell below 4.5:1 on the lighter felt: they stay at full
   strength, and read as quieter by sitting in the muted ink, Design 4) */
/* labels faded with opacity: full opacity, a muted ink instead */
html body .tcp-rail-aside label, html body .fcp-rail label, html body .csp-rail label, html body .uth-rail label,
html body .fcp-bank label, html body .csp-bank label, html body .uth-bank label, html body .fcd-bank label, html body .fcd-blinds label,
html body .tcp-bank-inline label, html body .fcp-limits label, html body .csp-limits label,
html body .fcp-spot .spot-sub, html body .csp-spot .spot-sub, html body .uth-spot .spot-sub,
html body .fcp-best-cap, html body .csp-best-cap, html body .spot-limits, html body .sr-rate,
html body .hint-bar, html body .pot-label, html body .community-log{ opacity:1 !important; color:var(--rd-muted) !important; }
html body .hint-bar{ color:var(--rd-gold) !important; }
/* an empty spot not yet in play, and folded seats: dimmed, still readable */
html body[data-ui-phase="bet"] #playCircleWrap{ opacity:.8 !important; }
html body .seat[data-folded="true"] .seat-info{ opacity:.8 !important; }
html body .seat-status-badge[data-kind="folded"]{ opacity:1 !important; color:var(--rd-muted) !important; }
/* the light $5 chip takes dark ink */
html body .chip.c5 .chip-face, html body .pile-chip.c5 .chip-face{ color:#2a1d10 !important; text-shadow:none !important; }

/* ---- line heights: the old fixed heights were set for 8–10px text ------- */
html body .pt-row, html body .rules-inline li, html body #rulesInlineList li{ line-height:1.2 !important; }
html body .pt-title, html body .pt-note, html body .pt-foot,
html body .ts-felt .ts-title, html body .ts-felt .ts-sub, html body .ts-felt .ts-row, html body .ts-felt .ts-keys, html body .ts-felt .ts-key,
html body .ts-felt li, html body .ts-felt .ts-name, html body .ts-felt .ts-style,
html body .settlement-row, html body .settlement-row > *, html body .settlement-total-row, html body .settlement-total-row > *,
html body .settlement-hand, html body .settlement-hand > *, html body .settlement-head > *,
html body .felt-stat label, html body .felt-stat .val, html body .spot-label, html body .spot-sub, html body .db-sub{
  line-height:1.3 !important;
}
html body .ts-felt li{ align-items:baseline; }

/* the result panel is an essential: 13px throughout */
html body .settlement-row > *, html body .settlement-total-row > *, html body .settlement-hand > *, html body .settlement-head > *,
html body .settlement-note, html body #settlementNote, html body #settleQual, html body #uthRoundResult, html body #fcpRoundResult{
  font-size:13px !important;
}
html body .sr-rate{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

/* ---- Five Card Draw: the seats, the pot and the showdown ---------------- */
html body #fcdGame .seat-name, html body #fcdGame .seat-stack{ font-size:13px !important; line-height:1.25 !important; }
html body #fcdGame .seat-style, html body #fcdGame .seat-status-badge, html body #fcdGame .seat-hand-name,
html body #fcdGame .seat-blind-marker, html body #fcdGame #heroButtonMarker, html body #fcdGame .denom-count,
html body #fcdGame .pot-label, html body #fcdGame .community-log, html body #fcdGame .setup-stakes-label,
html body #fcdGame #difficultyLabel, html body #fcdGame .sd-card, html body #fcdGame .sd-name,
html body #fcdGame .sd-cat, html body #fcdGame .sd-detail, html body #fcdGame .sd-amt,
html body #fcdGame .fcd-bank label, html body #fcdGame .fcd-blinds label{
  font-size:12px !important; line-height:1.25 !important;
}
html body #fcdGame .seat-style{ color:#e8cf8f !important; opacity:1 !important; }
html body #fcdGame .seat-name{ color:#f5efdf !important; }
html body #fcdGame .seat-stack{ color:var(--fcd-gold-bright, #f3d488) !important; }
html body #fcdGame .community-log{ font-style:normal !important; }
/* "This table": windows under 700px tall have no room for each player's
   style under the name — one line a player (the style stays on the seat
   plate). PROPOSED, P2-5: awaiting Ronan. */
@media (min-width:681px) and (max-height:700px){
  html body #fcdGame .ts-standings .ts-style{ display:none !important; }
}

/* ---- labels and small print not reached above ----------------------------- */
html body #fcpBalance label, html body #cspBalance label, html body #uthBalance label, html body .tcp-bank-inline label,
html body #fcpLimits label, html body #cspLimits label, html body #fcpLimits .mono, html body #cspLimits .mono, html body #fcpLimits .mono *, html body #cspLimits .mono *,
html body #handNote, html body .fcp-best-cap, html body .csp-best-cap, html body #fcdShowdownLeft .ts-title,
html body .fcd-extra .ts-row, html body .fcd-extra .ts-row *{
  font-size:12px !important; line-height:1.3 !important; opacity:1 !important;
}
html body #fcpBalance label, html body #cspBalance label, html body #uthBalance label, html body .tcp-bank-inline label,
html body #fcpLimits label, html body #cspLimits label{ color:var(--rd-muted) !important; letter-spacing:.08em !important; }
/* the price under an action button is a bet: 13px */
html body .db-sub{ font-size:13px !important; opacity:1 !important; }
/* hand names and qualification badges: the brighter gold, on a darker plate */
html body .fcp-hand-rank, html body #fcpPlayerHandRank, html body #fcpDealerHandRank, html body #cspPlayerHandRank, html body #cspDealerHandRank, html body #uthPlayerHandRank, html body #uthDealerHandRank, html body .csp-hand-rank,
html body #dealerQualifyBadge, html body #cspDealerQualification, html body #uthDealerQualification, html body #resultBanner{ color:var(--rd-gold) !important; opacity:1 !important; }
html body #dealerQualifyBadge, html body #cspDealerQualification, html body #uthDealerQualification{ background:rgba(8,12,28,.62) !important; }
html body .fcp-best-cap, html body .csp-best-cap, html body #playerBestCap, html body #dealerBestCap{ color:var(--rd-muted) !important; }
/* the dealer / you rows: room for the 12px label beside the hand name */
html body .fcp-side, html body .csp-side, html body .uth-side{ height:auto !important; min-height:18px; flex-wrap:wrap; row-gap:0; column-gap:6px !important; }
html body .fcp-seat-label, html body .csp-seat-label, html body .uth-seat-label, html body .tcp-seat-label{ letter-spacing:.12em !important; }
/* the gold $500 chip: darker ink (the old brown read 4.1:1) */
html body .chip.c500 .chip-face, html body .pile-chip.c500 .chip-face{ color:#3f2b0c !important; }

/* ---- short desktop windows: the side columns close up a little ----------- */
@media (min-width:680px) and (max-height:680px){
  html body .csp-right, html body .fcp-right, html body .uth-right{ gap:9px !important; }
  html body .csp-paytables, html body .fcp-paytables, html body .uth-paytables{ gap:3px !important; }
}

/* ---- second pass (desktop measure) ---------------------------------------- */
html body #hintBar, html body .hint-bar{ font-size:12px !important; }
html body #dealerQualifyBadge, html body #cspDealerQualification, html body #uthDealerQualification{ font-size:12px !important; }
html body .play-cost-note, html body #playCost{ font-size:13px !important; }
/* a stake of $0 was a grey that read 2.8:1 */
html body .side-bet-spot .stake{ color:var(--rd-muted) !important; opacity:1 !important; }
html body[data-ui-phase="bet"] #playCircleWrap{ opacity:1 !important; }
/* losses: a lighter red that holds 4.5:1 on the felt and the dark panels */
html body .ts-neg, html body .sr-delta.neg, html body .neg, html body #settlementTotal.neg{ color:#FFA3AE !important; }
/* the win mark: a deeper green so its white letter holds 4.5:1 */
html body .ts-w, html body .ts-t{ background:#25733A !important; }
/* the result totals wrap rather than run out of their panel */
html body .settlement-totals{ flex-wrap:wrap; row-gap:2px; }
html body #tcpSettlement{ overflow:visible !important; }
/* Five Card Draw's showdown rows are the result: 13px */
html body #fcdGame .showdown-row, html body #fcdGame .showdown-row *{ font-size:13px !important; line-height:1.3 !important; }
html body #fcdGame .ts-recap li{ font-size:12px !important; line-height:1.3 !important; }
html body #fcdGame .seat-bet-pile .pile-chip .chip-face{ font-size:12px !important; letter-spacing:-.06em; }
/* Three Card's balance, stacked on large screens: the label clear of the figure */
html body .tcp-bank-inline{ row-gap:6px !important; }
html body .tcp-bank-inline .tcp-bank-val{ line-height:1.15 !important; }
@media (min-width:680px) and (max-height:680px){
  html body .uth-right{ gap:6px !important; }
}
html body .ts-standings .mono, html body .ts-standings li{ font-size:12px !important; line-height:1.3 !important; }

/* ---- phones and every size: the action buttons are essentials (13px) ---- */
html body button.action, html body .action, html body .db-label, html body #btnStartGame,
html body #btnNextRound, html body #btnNextRebet{ font-size:13px !important; }
html body #centerMessage, html body #handRankPill, html body .fcp-rank-pill{ font-size:12px !important; }
html body .pile-chip .chip-face{ font-size:12px !important; }
html body #fcdGame #blindsVal{ font-size:13px !important; }

/* ===========================================================================
   PHONES, upright (the site frame, 481px tall and up). The result at 13px
   needs a taller band; the cards give the room (never below 44px wide).
   --rd-p-extra is what each game adds to its own phone budget.
   =========================================================================== */
@media (max-width:679px) and (min-height:481px){
  html body .gold-icon-btn{ min-height:44px; }
  :root{
    --fcp-band-h: 146px;
    --csp-band-h: 178px;
    --uth-band-h: 128px;
    --fcp-card-v: calc((var(--frame-h, 100dvh) - var(--fcp-fixed-p, 500px) - 38px) / 2 * 0.712);
    --csp-card-v: calc((var(--frame-h, 100dvh) - var(--csp-fixed-p, 514px) - 31px) / 2 * 0.712);
    --uth-card-v: calc((var(--frame-h, 100dvh) - var(--uth-fixed-p, 444px) - 32px) / 3 * 0.712);
    --seat-plate-h: 66px;
  }
  html body #fcdGame .seat-info > *{ line-height:1.15 !important; }
}
@media (max-width:359px) and (min-height:481px){
  :root{ --fcp-band-h: 214px; --csp-band-h: 214px; --uth-band-h: 160px; }
}
@media (max-width:679px) and (min-height:481px){
  /* Last Win / Last Bet and the balance share the top line (P2-1) */
  html body .fcp-rail, html body .csp-rail{ gap:8px !important; left:16px !important; top:14px !important; }
  html body .fcp-bank, html body .csp-bank, html body .uth-bank{ right:16px !important; top:14px !important; gap:4px !important; }
  html body .fcp-rail label, html body .csp-rail label, html body .fcp-bank label, html body .csp-bank label, html body .uth-bank label{ letter-spacing:.02em !important; }
  html body .fcp-rail .felt-stat, html body .csp-rail .felt-stat{ gap:3px !important; }
}

/* ===========================================================================
   SECOND LOOK (Ronan, 2026-10-04 05:16): "difficulty of reading text on
   desktop ... the payout section and similar", and the header buttons.
   Bigger alone was not enough: the small print was thin, pale type straight
   on the felt. Now it sits on a dark plate, in a heavier weight, and the
   header buttons read as buttons.
   =========================================================================== */
/* the pay tables, the rules column and the stats strip: on a dark plate */
html body .tcp-paytables .pt, html body .fcp-paytables, html body .csp-paytables, html body .uth-paytables,
html body .game-frame .ts-felt:not(.ts-panel), html body .fcd-extra{
  background:rgba(8,12,30,.55) !important;
  border:1px solid rgba(224,185,94,.22);
  border-radius:10px;
  padding:8px 10px !important;
  box-sizing:border-box;
}
html body .fcp-paytables .pt, html body .csp-paytables .pt, html body .uth-paytables .pt{ background:none !important; border:0; padding:0 !important; }
/* heavier, brighter type for the small print */
html body .pt-row, html body .pt-row span, html body .pt-note, html body .pt-foot,
html body .rules-inline li, html body #rulesInlineList li,
html body .ts-felt .ts-row, html body .ts-felt .ts-row *, html body .ts-felt .ts-sub, html body .ts-felt .ts-key, html body .ts-felt .ts-empty,
html body .felt-stat label, html body .spot-label, html body .spot-sub{
  font-weight:600 !important; color:var(--rd-ink) !important;
}
html body .pt-row b, html body .pt-row .mono, html body .ts-felt .ts-row .mono{ font-weight:700 !important; color:var(--rd-gold) !important; }
html body .pt-title, html body .ts-felt .ts-title, html body #rulesInlineTitle{ font-weight:700 !important; color:var(--rd-gold) !important; letter-spacing:.12em !important; }
/* desktop with room (1200 wide, 680 tall and up): the small print at 13px */
@media (min-width:1200px) and (min-height:680px){
  html body .pt-row, html body .pt-row *, html body .pt-note, html body .pt-foot,
  html body .rules-inline li, html body #rulesInlineList li,
  html body .ts-felt .ts-row, html body .ts-felt .ts-row *, html body .ts-felt .ts-sub, html body .ts-felt .ts-key{ font-size:13px !important; }
}

/* the header buttons (Ronan 2026-10-04, "brighter still"): solid gold, dark
   labels, like the Play button */
html body .gold-icon-btn{
  background:linear-gradient(180deg, #f6d68a 0%, #e0b95e 55%, #c99b3e 100%) !important;
  border:1px solid #f9e3a6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.55) !important;
  color:#20160a !important;
}
html body .gold-icon-btn:hover{ background:linear-gradient(180deg, #fbe2a4 0%, #ebc56c 55%, #d4a849 100%) !important; }
html body .gold-icon-btn[aria-pressed="true"]{ background:linear-gradient(180deg, #c99b3e 0%, #e0b95e 100%) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,.35) !important; }
html body .gold-icon-btn .ico{ color:#20160a !important; filter:grayscale(1) brightness(.25); }
html body .gold-icon-btn .btn-label,
html body .brand-cluster .gold-icon-btn .btn-label,
html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label{ color:#20160a !important; font-weight:700 !important; }
@media (min-width:680px){
  html body .gold-icon-btn .btn-label,
  html body .brand-cluster .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label{ font-size:13px !important; }
  html body .gold-icon-btn .ico{ font-size:19px !important; }
  html body .gold-icon-btn{ padding:0 10px !important; }
}

/* ===========================================================================
   NO PALE TYPE (rule, Ronan 2026-10-04: claude/rule-no-pale-type.md).
   Under 16px: 7:1 against what is drawn behind it, and semi-bold (600).
   Small print on the felt sits on a dark plate.
   =========================================================================== */
html body .game-frame, html body .panel{ font-weight:600; }
/* the dark plates: pay tables, the rules column, the stats strips */
html body .tcp-paytables .pt, html body .fcp-paytables, html body .csp-paytables, html body .uth-paytables,
html body .game-frame .ts-felt:not(.ts-panel), html body .fcd-extra{
  background:rgba(6,9,24,.62) !important;
  border:1px solid rgba(224,185,94,.25);
  border-radius:10px;
  padding:8px 10px !important;
  box-sizing:border-box;
}
html body .fcp-paytables .pt, html body .csp-paytables .pt, html body .uth-paytables .pt{ background:none !important; border:0; padding:0 !important; }
html body .pt-row, html body .pt-row span, html body .pt-note, html body .pt-foot,
html body .rules-inline li, html body #rulesInlineList li,
html body .ts-felt .ts-row, html body .ts-felt .ts-row *, html body .ts-felt .ts-sub, html body .ts-felt .ts-key, html body .ts-felt .ts-empty,
html body .felt-stat label, html body .spot-label, html body .spot-sub{ font-weight:600 !important; color:var(--rd-ink) !important; }
html body .pt-row b, html body .pt-row .mono, html body .ts-felt .ts-row .mono{ font-weight:700 !important; color:var(--rd-gold) !important; }
html body .pt-title, html body .ts-felt .ts-title, html body #rulesInlineTitle{ font-weight:700 !important; color:var(--rd-gold) !important; }


/* ---- no pale type: the rest of the 7:1 pass ------------------------------- */
/* the game sheets set their golds and win/loss inks on their own frames too */
html body #fcpGame, html body #cspGame, html body #uthGame, html body #fcdGame, html body .panel-overlay{
  --fcp-gold-bright:#FCE9BC; --csp-gold-bright:#FCE9BC; --uth-gold-bright:#FCE9BC; --fcd-gold-bright:#FCE9BC; --ts-gold-bright:#FCE9BC;
  --fcp-win:#9BEAA6; --csp-win:#9BEAA6; --uth-win:#9BEAA6; --fcd-win:#9BEAA6; --ts-win:#9BEAA6;
  --fcp-loss:#FFC2C9; --csp-loss:#FFC2C9; --uth-loss:#FFC2C9; --fcd-loss:#FFC2C9; --ts-loss:#FFC2C9;
}
/* the history marks: deeper chips so the white letter holds 7:1 */
html body .ts-w, html body .ts-t{ background:#1B5A2B !important; }
html body .ts-l, html body .ts-b{ background:#8A1C2A !important; }
html body .ts-e, html body .ts-f{ background:#3E392F !important; }
html body .ts-p{ background:#1D4A86 !important; }
/* the gold action buttons: a lighter face under black ink */
html body #btnPlay, html body #btnNextRound, html body .decision-btn.btn-hit, html body #btnPlay4, html body #btnPlay3,
html body #fcdGame #btnBetRaise{ color:#000 !important; filter:brightness(1.16); }
html body #btnPlay:hover:not(:disabled), html body #btnNextRound:hover:not(:disabled), html body .decision-btn.btn-hit:hover:not(:disabled){ filter:brightness(1.26) !important; }
html body .decision-btn.btn-hit .db-sub, html body .decision-btn.btn-hit .db-label{ color:#000 !important; }
/* Five Card Draw: the difficulty chip in the gold header, the showdown cards */
html body #fcdGame #difficultyLabel{ color:#20160a !important; }
html body #fcdGame .sd-card{ font-weight:700 !important; }
html body #fcdGame .sd-card.red, html body #fcdGame .sd-card[data-red="true"]{ color:#8C1626 !important; }
html body #fcdGame .setup-option-desc{ font-weight:600 !important; opacity:1 !important; }
html body #pairPlusVal{ font-weight:600 !important; }
html body .val.neg, html body .mono.neg, html body .neg{ color:#FFC2C9 !important; }
html body .val.pos, html body .mono.pos, html body .pos{ color:#9BEAA6 !important; }
html body .ts-felt .ts-cell{ height:20px !important; }
/* Three Card's Pair Plus rack button: label and value on their own lines */
html body .rack-btn{ line-height:1.2 !important; row-gap:2px; }
html body #playCost, html body .play-cost-note{ color:var(--rd-gold) !important; }
html body #fcpGameplayTip, html body #cspGameplayTip, html body #uthGameplayTip, html body .fcp-tip, html body .csp-tip, html body .uth-tip{ color:var(--rd-ink) !important; opacity:1 !important; }
/* Five Card Draw: the showdown cards' red, the seat style, the blind marker */
html body #fcdGame .sd-card.suit-H, html body #fcdGame .sd-card.suit-D{ color:#7E1220 !important; }
body[data-four-colour="true"] #fcdGame .sd-card.suit-D{ color:#0E3F86 !important; }
html body #fcdGame .seat-style, html body #fcdGame .seat-blind-marker{ color:var(--rd-gold) !important; }
/* Ultimate's right column on short windows: tighter plates */
@media (min-width:680px) and (max-height:700px){
  html body .uth-paytables{ padding:5px 8px !important; }
  html body .uth-paytables .pt-row{ line-height:1.12 !important; }
  html body .uth-right .ts-felt{ padding:5px 8px !important; }
}

/* chip values: every chip has a cream centre; each value in a deeper shade
   of its chip's colour, at 7:1 (no pale type) */
html body .chip .chip-face, html body .pile-chip .chip-face{ text-shadow:none !important; }
html body .chip.c1 .chip-face, html body .pile-chip.c1 .chip-face{ color:#3a342a !important; }
html body .chip.c5 .chip-face, html body .pile-chip.c5 .chip-face{ color:#11421a !important; }
html body .chip.c10 .chip-face, html body .pile-chip.c10 .chip-face{ color:#58101d !important; }
html body .chip.c25 .chip-face, html body .pile-chip.c25 .chip-face{ color:#12284f !important; }
html body .chip.c50 .chip-face, html body .pile-chip.c50 .chip-face{ color:#3b1a59 !important; }
html body .chip.c100 .chip-face, html body .pile-chip.c100 .chip-face{ color:#000 !important; }
html body .chip.c500 .chip-face, html body .pile-chip.c500 .chip-face{ color:#3f2b0c !important; }
html body .ts-felt .ts-mark{ height:15px !important; line-height:15px !important; }
html body #fcdGame .seat-blind-marker{ background:rgba(8,10,20,.75) !important; }
@media (min-width:680px) and (max-height:700px){
  html body .uth-right{ gap:4px !important; justify-content:flex-start !important; padding-top:6px; }
}
html body .ts-felt .ts-cell{ overflow:visible !important; }
html body .chip.c5 .chip-face, html body .pile-chip.c5 .chip-face{ color:#0b3313 !important; }
/* Ultimate, short windows: the right column (balance, two pay tables, the
   session) must end above the result band */
@media (min-width:680px) and (max-height:700px){
  html body .uth-paytables .pt-row{ line-height:1.16 !important; }
  html body .uth-paytables .pt-title{ margin:0 !important; padding-bottom:1px !important; }
  html body .uth-paytables .pt-foot{ line-height:1.1 !important; margin-top:1px !important; }
  html body .uth-right .ts-felt .ts-row{ line-height:1.1 !important; }
  html body .uth-paytables, html body .uth-right .ts-felt{ padding:4px 8px !important; }
}
/* Ultimate: the session figures sit under the history on the left on short
   windows (the right column then holds the balance and the two pay tables,
   and ends above the result band); on taller ones they stay on the right.
   They are on screen at every size: moved, never hidden. */
html body #uthStatsLeft .ts-stats{ display:none; }
@media (min-width:680px) and (max-height:700px){
  html body #uthStatsRight{ display:none !important; }
  html body #uthStatsLeft .ts-stats{ display:block; margin-top:6px; }
}
@media (min-width:680px) and (max-height:700px){
  html body #uthStatsLeft{ padding:5px 8px !important; gap:4px !important; }
  html body #uthStatsLeft .ts-row{ line-height:1.15 !important; }
}
/* header buttons size to their label (Four Card's were a fixed width) */
@media (min-width:680px){
  html body .gold-icon-btn{ width:auto !important; min-width:52px !important; padding:0 10px !important; white-space:nowrap !important; }
  html body .gold-icon-btn .btn-label{ white-space:nowrap !important; }
}
html body .rack-btn{ height:auto !important; min-height:44px; padding-top:4px !important; padding-bottom:4px !important; }

/* ===========================================================================
   PHONES — P2-5: on narrow phones (frames up to 370px wide) the game's name
   takes a slim line of its own above the header buttons.
   =========================================================================== */
@media (max-width:370px) and (min-height:481px){
  html body .brand-cluster{ flex-wrap:wrap !important; row-gap:4px !important; justify-content:center !important; padding-top:4px !important; padding-bottom:4px !important; }
  html body .brand-cluster .wordmark{ flex:1 1 100% !important; width:100% !important; align-items:center !important; text-align:center; margin:0 !important; }
  html body .brand-cluster .wordmark .eyebrow{ display:none !important; }
  html body .brand-cluster .wordmark .title{ font-size:15px !important; line-height:18px !important; white-space:nowrap !important; }
  html body .brand-cluster .icon-actions, html body .brand-cluster [id$="SecondaryControls"]{ width:100%; justify-content:space-between !important; gap:4px !important; }
  html body .gold-icon-btn{ flex:1 1 0; min-width:0 !important; padding:0 2px !important; }
}
/* ===========================================================================
   PHONES — P2-1 / P2-6: the compact layout on frames under 640px tall.
   The tip line moves into the Hint (Phase 3 builds the Hint's text).
   =========================================================================== */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body .fcp-note-line, html body .csp-note-line, html body .uth-note-line{ display:none !important; }
  :root{
    --fcp-card-v: 0px; --csp-card-v: 0px; --uth-card-v: 0px;   /* the cards at their 44px minimum */
  }
}
/* ---- compact phones (under 640px tall), Ronan 2026-10-04: the result takes
   the circles' place at the end of a hand (every bet is listed in it), and
   the space below the bets holds one row ---------------------------------- */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  :root{ --card-w:44px; --card-h:calc(44px / 0.712); --fcp-band-h:56px; --csp-band-h:56px; --uth-band-h:56px; }
  /* betting: the chips and the rack tools share one row */
  html body #fcpWagerControls, html body #cspWagerControls, html body #uthWagerControls{ flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding-top:0 !important; }
  html body .chip-row{ gap:3px !important; }
  html body .rack-tools{ gap:4px !important; }
  /* the result: in the circles' place */
  html body[data-ui-phase="settled"] .fcp-spots, html body[data-ui-phase="settled"] .csp-spots, html body[data-ui-phase="settled"] .uth-spots{ display:none !important; }
  html body[data-ui-phase="settled"] .fcp-band, html body[data-ui-phase="settled"] .csp-band, html body[data-ui-phase="settled"] .uth-band{ height:auto !important; }
  html body[data-ui-phase="settled"] .fcp-settlement, html body[data-ui-phase="settled"] .csp-settlement, html body[data-ui-phase="settled"] .uth-settlement{ height:auto !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  /* the frame around the table gives back its air */
  html body .fcp-layout, html body .csp-layout{ padding:30px 0 0 !important; }
  html body .uth-layout{ padding:22px 0 0 !important; }
  html body .table-wrap{ padding:1px !important; }
  html body #fcpTable .felt-surface, html body #cspTable .felt-surface, html body #uthTable .felt-surface{ padding:2px 4px 4px !important; }
  html body .fcp-rail, html body .csp-rail, html body .fcp-bank, html body .csp-bank, html body .uth-bank{ top:10px !important; }
  :root{ --fcp-vgap:3px; --csp-vgap:3px; --uth-vgap:3px; }
  /* the header: the name's line and the buttons, closer */
  html body .brand-cluster{ padding-top:2px !important; padding-bottom:3px !important; row-gap:2px !important; }
  html body .brand-cluster .wordmark .title{ font-size:14px !important; line-height:16px !important; }
  /* Four Card's Fold: the widest of the four, so "Lose the Ante" keeps to two lines */
  html body #fcpDecision #btnFold{ flex:1.5 1 0 !important; }
  html body #fcpDecision .decision-btn .db-sub, html body #fcpDecision .decision-btn .db-label{ white-space:nowrap !important; }
  html body #fcpDecision .decision-btn{ padding:0 2px !important; }
}
/* Ronan 2026-10-04 06:20: "settings and new game text does not fit button"
   on phones. Header buttons size to their own label (Settings 59px,
   Difficulty 64px), and the row of buttons uses the header's full width. */
@media (max-width:679px){
  html body .brand-cluster .icon-actions, html body .brand-cluster [id$="SecondaryControls"]{ flex:1 1 auto !important; display:flex !important; justify-content:flex-end !important; gap:4px !important; min-width:0 !important; }
  html body .brand-cluster .gold-icon-btn, html body .brand-cluster .icon-actions button.gold-icon-btn, html body #fcpGame .gold-icon-btn, html body #cspGame .gold-icon-btn, html body #uthGame .gold-icon-btn, html body #fcdGame .gold-icon-btn{
    flex:0 0 auto !important; width:auto !important; min-width:44px !important; padding:0 3px !important;
  }
  html body .gold-icon-btn .btn-label{ white-space:nowrap !important; letter-spacing:0 !important; }
}
@media (max-width:370px) and (min-height:481px){
  html body .brand-cluster .icon-actions, html body .brand-cluster [id$="SecondaryControls"]{ width:100% !important; flex:1 1 100% !important; justify-content:space-between !important; }
}

/* ---- phones, pass 3 (measure) ---------------------------------------------- */
html body .chip .chip-face{ font-size:12px !important; }
html body .chip.c25 .chip-face, html body .pile-chip.c25 .chip-face{ color:#0a1a36 !important; }
html body .chip.c1 .chip-face, html body .pile-chip.c1 .chip-face{ color:#211c15 !important; }
html body .chip.c5 .chip-face, html body .pile-chip.c5 .chip-face{ color:#082a10 !important; }
html body #btnPlay, html body #btnNextRound, html body .decision-btn.btn-hit, html body #btnPlay4, html body #btnPlay3,
html body #fcdGame #btnBetRaise{ filter:brightness(1.26) !important; }
html body .val.pos, html body .mono.pos, html body .pos, html body #lastWinVal.pos{ color:#AEF2B7 !important; }
html body .val.neg, html body .mono.neg, html body .neg, html body #lastWinVal.neg{ color:#FFD0D6 !important; }
@media (max-width:679px){
  /* the top line: Last Win, Last Bet and the balance never touch */
  html body .fcp-rail, html body .csp-rail{ gap:6px !important; left:12px !important; }
  html body .fcp-bank, html body .csp-bank, html body .uth-bank{ right:12px !important; }
  html body .fcp-rail label, html body .csp-rail label, html body .fcp-bank label, html body .csp-bank label{ font-size:12px !important; letter-spacing:0 !important; }
  html body .fcp-rail .val, html body .csp-rail .val{ font-size:13px !important; }
}
@media (max-width:679px){
  html body .fcp-rail, html body .csp-rail{ width:auto !important; min-width:0 !important; padding:0 !important; border:0 !important; }
  html body .fcp-rail .felt-stat, html body .csp-rail .felt-stat{ padding:0 !important; border:0 !important; min-width:0 !important; }
  /* the result's rows: the bet's name in a column as wide as it needs */
  html body .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) auto auto !important; line-height:1.3 !important; }
  html body .settlement-hands{ flex-direction:column !important; align-items:stretch !important; gap:0 !important; }
  html body .settlement-hand{ justify-content:space-between !important; white-space:normal !important; }
}
@media (max-width:370px), (max-height:480px){
  html body .settlement-row{ grid-template-columns:max-content minmax(0,1fr) auto auto !important; grid-template-areas:"l s s r" "rt rt ret d" !important; row-gap:0 !important; }
  html body .settlement-row .sr-label{ grid-area:l; } html body .settlement-row .sr-stake{ grid-area:s; } html body .settlement-row .sr-result{ grid-area:r; justify-self:end; }
  html body .settlement-row .sr-rate{ grid-area:rt; } html body .settlement-row .sr-returned{ grid-area:ret; } html body .settlement-row .sr-delta{ grid-area:d; justify-self:end; }
}

/* ===========================================================================
   NARROW PHONES (up to 370px wide), Ronan 2026-10-04:
   - the balance sits at the right of the game's name line in the header;
   - while betting, Undo, Clear, Rebet and the limits sit in the Deal
     button's row (Deal stays the biggest button), the chips on their own.
   =========================================================================== */
@media (max-width:370px) and (min-height:481px){
  html body .brand-cluster .wordmark{ align-items:flex-start !important; text-align:left; padding-left:6px; }
  html body .fcp-bank, html body .csp-bank, html body .uth-bank, html body .fcd-bank{
    position:fixed !important; top:4px !important; right:10px !important; left:auto !important; bottom:auto !important;
    z-index:20 !important; flex-direction:row !important; align-items:baseline !important; gap:5px !important;
  }
  html body .fcp-bank label, html body .csp-bank label, html body .uth-bank label, html body .fcd-bank label{ font-size:12px !important; color:var(--rd-muted) !important; }
  html body .fcp-bank .fcp-bank-val, html body .csp-bank .csp-bank-val, html body .uth-bank .uth-bank-val, html body #bankrollVal{ font-size:15px !important; line-height:16px !important; }
}
/* compact phones, the end of a hand: the panel's own head says who won and the
   hand names sit by the cards, so the panel drops its two hand lines and the
   instruction line above it is not repeated (PROPOSED, for Ronan to confirm) */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body[data-ui-phase="settled"] #fcpInstruction, html body[data-ui-phase="settled"] #cspInstruction, html body[data-ui-phase="settled"] #uthInstruction{ display:none !important; }
  html body[data-ui-phase="settled"] .settlement-hands{ display:none !important; }
  html body .settlement-row, html body .settlement-row > *{ line-height:1.2 !important; }
  :root{ --fcp-vgap:2px; --csp-vgap:2px; --uth-vgap:2px; }
  html body #fcpDecision #btnFold .db-sub{ white-space:normal !important; line-height:1.1 !important; }
  html body #fcpDecision .decision-btn{ letter-spacing:0 !important; }
}

/* ===========================================================================
   PHONES HELD SIDEWAYS (480px tall and under): the compact rules apply (the
   tip into the Hint, the result without its repeats), and the right column
   widens to 256px for the 13px result; the cards give the width.
   =========================================================================== */
@media (max-height:480px){
  :root{ --fcp-r-w:256px; --csp-r-w:256px; --uth-r-w:256px; }
  html body .fcp-note-line, html body .csp-note-line, html body .uth-note-line{ display:none !important; }
  html body .fcp-band{ top:calc(var(--fcp-r-act, 44px) + 6px) !important; }
  html body .csp-band{ top:calc(var(--csp-r-act, 44px) + 6px) !important; }
  html body .uth-band{ top:calc(var(--uth-r-act, 44px) + 6px) !important; }
  html body[data-ui-phase] .fcp-band{ top:calc(var(--fcp-r-act, 44px) + 6px) !important; }
  html body[data-ui-phase] .csp-band{ top:calc(var(--csp-r-act, 44px) + 6px) !important; }
  html body[data-ui-phase] .uth-band{ top:calc(var(--uth-r-act, 44px) + 6px) !important; }
  html body[data-ui-phase="settled"] .settlement-hands{ display:none !important; }
  html body .fcp-settlement, html body .csp-settlement, html body .uth-settlement{ overflow:visible !important; }
  /* Four Card: Last Win / Last Bet on the felt, top left (they ran into New Game) */
  /* ...and Caribbean the same (P2-21, Ronan 2026-10-04: its Last Bet lay on the bonus circle's ring at 844x390) */
  html body .fcp-rail, html body .csp-rail{ position:fixed !important; top:30px !important; left:12px !important; right:auto !important; flex-direction:row !important; align-items:baseline !important; gap:8px !important; z-index:20; }
  html body .fcp-spot .spot-sub{ white-space:normal !important; text-align:center; }
}
/* Ultimate on narrow phones: the balance is in the header, so the round count
   alone holds the top line — it needs less room; Check's note on one line */
@media (max-width:370px) and (min-height:481px) and (max-height:699px){
  html body .uth-layout{ padding-top:12px !important; }
  html body .uth-rail{ top:4px !important; }
  html body #uthDecision .decision-btn .db-sub, html body #uthDecision .decision-btn .db-label{ white-space:nowrap !important; }
  html body #uthDecision .decision-btn{ padding:0 2px !important; }
}
@media (max-width:370px) and (min-height:481px) and (max-height:699px){
  html body .uth-layout{ padding-top:8px !important; }
  html body .uth-rail{ top:2px !important; }
  html body #uthDecision .decision-btn{ letter-spacing:0 !important; }
  html body #uthDecision #btnCheck{ flex:1.15 1 0 !important; }
}

/* ===========================================================================
   THREE CARD on compact phones (under 640px tall): the same approved rules —
   cards at their 44px minimum, the balance beside the name on narrow phones,
   the tip and the hand note into the Hint, the result in the circles' place.
   =========================================================================== */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  :root{ --tcp-card-h:calc(44px / 0.712); }
  html body .tcp-player .hand-note, html body .tcp-player .hint-bar, html body #handNote, html body #hintBar{ display:none !important; }
  html body[data-ui-phase="settle"] #tcpSpotsCol{ display:none !important; }
  html body[data-ui-phase="settle"] #centerMessage{ display:none !important; }
}
@media (max-width:370px) and (min-height:481px){
  html body .tcp-bank-inline{ position:fixed !important; top:4px !important; right:10px !important; left:auto !important; margin:0 !important; width:auto !important;
    flex-direction:row !important; align-items:baseline !important; gap:5px !important; z-index:20 !important; transform:none !important; }
  html body .tcp-bank-inline label{ font-size:12px !important; }
  html body .tcp-bank-inline .tcp-bank-val{ font-size:15px !important; line-height:16px !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body #dealerCards .card, html body #playerCards .card{ width:44px !important; height:62px !important; aspect-ratio:auto !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* Three Card's result grows to its content (it ran under Rebet / Next Round) */
  html body #tcpSettlement{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
  /* "Play costs $25" in the Fold / Play row, ahead of the buttons, not over the circles */
  html body[data-ui-phase="dealt"] #playActions{ flex-wrap:nowrap !important; align-items:center !important; gap:4px !important; }
  html body #playActions > .play-cost-note{ position:static !important; order:-1 !important; width:auto !important; flex:0 0 auto !important; margin:0 !important;
    display:flex !important; flex-direction:column !important; align-items:center !important; line-height:1.15 !important; transform:none !important; }
  html body #playActions > .action{ flex:1 1 0 !important; min-width:0 !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  /* the end of a hand: the result's own head says whether the dealer
     qualified, so the badge under the dealer's cards is not repeated */
  html body[data-ui-phase="settle"] #dealerQualifyBadge{ display:none !important; }
  html body #tcpSettlement{ padding:4px 8px !important; margin-top:2px !important; }
  html body #tcpSettlement .settlement-totals{ margin-top:2px !important; padding-top:2px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="dealt"] #playActions{ display:flex !important; grid-template-columns:none !important; }
  html body[data-ui-phase="dealt"] #playActions > .play-cost-note{ grid-area:auto !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  /* Three Card, compact: tighter circles, the dealer's label beside the cards */
  html body .tcp-spots .bet-circle, html body .tcp-spots .side-bet-spot{ width:46px !important; height:46px !important; }
  html body:not([data-ui-phase="bet"]) .tcp-dealer{ position:relative; }
  html body:not([data-ui-phase="bet"]) .tcp-dealer .tcp-seat-label{ position:absolute !important; left:12px; top:23px; margin:0 !important; }
  html body .tcp-rail{ padding-top:4px !important; padding-bottom:2px !important; margin-bottom:0 !important; }
  html body .tcp-table{ gap:3px !important; row-gap:3px !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  /* the end of a hand: Last Bet / Last Win repeat the result's stakes and
     total, so the line steps aside while the result is up (compact only) */
  html body[data-ui-phase="settle"] .tcp-rail{ visibility:hidden !important; height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; }
}
html body .val.neg, html body #lastWinVal.neg{ color:#FFDADF !important; }
@media (max-height:480px){
  /* sideways: the ante's figure sits below its chip pile, not under it */
  html body #anteCircleWrap .current-bet-val, html body #playCircleWrap .current-bet-val{ position:relative; z-index:3; }
}
html body .chip.c500 .chip-face, html body .pile-chip.c500 .chip-face{ color:#2a1c04 !important; }
@media (max-width:679px) and (min-height:700px){
  :root{ --fcp-band-h:170px; --csp-band-h:182px;
    --fcp-card-v: calc((var(--frame-h, 100dvh) - var(--fcp-fixed-p, 500px) - 64px) / 2 * 0.712);
    --csp-card-v: calc((var(--frame-h, 100dvh) - var(--csp-fixed-p, 514px) - 60px) / 2 * 0.712); }
}

/* ===========================================================================
   FIVE CARD DRAW on compact phones (under 640px tall), Ronan 2026-10-04:
   - only the action buttons sit below your cards; Raise opens the bet-size
     control over your cards (closes on Confirm or Cancel);
   - at the end of a hand the showdown list takes your cards' place (your
     hand is in it, with its cards).
   =========================================================================== */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  :root{ --fcd-band-h:52px; }
  html body #fcdGame .fcd-band{ height:auto !important; min-height:var(--fcd-band-h); }
  html body #fcdGame .bet-sizing-row{ top:auto !important; bottom:calc(100% + 4px) !important; left:0 !important; right:0 !important;
    background:#18213D !important; border:1px solid rgba(224,185,94,.55) !important; box-shadow:0 -6px 18px rgba(0,0,0,.55) !important; z-index:6 !important; }
  html body[data-fcd-phase="handOver"] #heroZone, html body[data-fcd-phase="showdown"] #heroZone{ display:none !important; }
  html body #fcdTable .felt-surface{ padding-top:28px !important; padding-bottom:8px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #fcdGame .seat-name{ font-size:12px !important; }
}
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  /* Five Card Draw: every seat's plate fills its column (the side seats'
     were held to 66px of a 97px column, cutting "SB Marlene") */
  /* the blind marker sits in the chips' column beside the plate, at its top,
     so the player's name has the plate's whole width */
  html body #fcdGame .seat-info{ position:relative; overflow:visible !important; }
  html body #fcdGame .seat-id-row .seat-blind-marker{ position:absolute !important; top:6px; z-index:2; min-width:22px; height:16px; line-height:16px !important; padding:0 2px !important; text-align:center; }
  html body #fcdGame .seat:not([style*="pile plate"]) .seat-id-row .seat-blind-marker{ right:-25px; }
  html body #fcdGame .seat[data-seat-index="4"] .seat-id-row .seat-blind-marker,
  html body #fcdGame .seat[data-seat-index="5"] .seat-id-row .seat-blind-marker{ right:auto; left:-25px; }
  html body #fcdGame .seat-id-row{ justify-content:center !important; }
  html body #fcdGame .seat-bet-pile{ align-self:end !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  :root{ --card-w:44px; --card-h:calc(44px / 0.712); }
  html body #fcdGame .sd-detail, html body #fcdGame .sd-cat{ color:var(--rd-gold) !important; }
}
html body #fcdGame .showdown-row .sd-detail, html body #fcdGame .showdown-row .sd-cat{ color:var(--rd-gold) !important; }
@media (max-width:359px) and (min-height:481px) and (max-height:699px){
  :root{ --arena-row3:40px; }
}
/* Five Card Draw sideways (480px tall and under): plates tall enough for
   their 12-13px lines, and the small print at the floors */
@media (max-height:480px){
  :root{ --seat-plate-h:62px; }
  html body #fcdGame .seat-info > *{ line-height:1.12 !important; }
  html body #fcdGame .hero-name, html body #fcdGame #heroStack{ font-size:13px !important; }
  html body #fcdGame .setup-option-desc{ font-size:12px !important; }
  html body #fcdGame #resultBanner, html body #fcdGame .result-banner{ font-size:13px !important; }
}
/* Five Card Draw's showdown list sits on a dark plate (no pale type) */
html body #fcdGame .showdown-summary:not(:empty){ background:rgba(6,9,24,.62) !important; border:1px solid rgba(224,185,94,.25); border-radius:10px; padding:4px 8px !important; }
@media (max-width:679px), (max-height:480px){
  html body #fcdGame .seat-bet-pile{ gap:5px !important; column-gap:5px !important; }
  html body #fcdGame .seat-info, html body .seats[data-seat-count] .seat[data-seat-index] .seat-info{ padding:2px 2px !important; }
  html body #fcdGame .seat-name{ letter-spacing:-.01em !important; }
}
@media (max-height:480px){
  html body #fcdGame .fcd-bank{ padding-top:2px !important; }
  html body #fcdGame .fcd-bank-val, html body #fcdGame #bankrollVal{ line-height:20px !important; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body #fcdGame .hero-id-row{ height:auto !important; min-height:22px !important; }
  html body #fcdGame .hero-hand{ padding-top:12px !important; height:calc(var(--card-h) + 12px) !important; /* room for the 12px discard lift (triage fix 6) */ }
  html body #fcdTable .felt-surface{ padding-top:26px !important; padding-bottom:6px !important; }
  :root{ --fcd-vgap:3px; --arena-gap:5px; }
}
@media (max-height:480px){
  /* sideways: chip stacks side by side never overlap their neighbour's count */
  html body #fcdGame .seat-bet-pile{ gap:9px !important; column-gap:9px !important; }
  html body #fcdGame .denom-stack .denom-count{ right:-6px !important; }
}
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  /* the chips sit 6px from the plate (was 8px; the brief's SEATS rule wants
     6px clear), so the plate holds "Raise $10K" (64px) at 12px */
  html body #fcdGame .seat, html body #fcdGame .seats[data-seat-count] .seat[data-seat-index]{ column-gap:6px !important; }   /* 6px: the SEATS rule (chips clear of plates) */
  html body #fcdGame .seat-id-row .seat-blind-marker{ top:6px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* a seat's action line on phones: semi-bold and a little tighter, so the
     shortest form ("Raise $10K") fits the side seats' plates whole */
  html body #fcdGame .seat-status-badge, html body #fcdGame .seat-hand-name, html body #fcdGame .seat-draw-badge{ font-weight:600 !important; letter-spacing:-.03em !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #fcdGame .seat-status-badge, html body #fcdGame .seat-draw-badge{ font-family:Inter, system-ui, sans-serif !important; letter-spacing:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #fcdGame .seats .seat .seat-info{ padding-left:0 !important; padding-right:0 !important; }
}
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  /* the chips' column is one chip wide whatever the stack shows (a "x2"
     count badge widened it and squeezed the plate) */
  html body #fcdGame .seat, html body #fcdGame .seats[data-seat-count] .seat[data-seat-index]{ grid-template-columns:minmax(0,1fr) var(--pile-chip, 24px) !important; }
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="4"],
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="5"],
  html body #fcdGame .seats[data-seat-count="4"] .seat[data-seat-index="3"]{ grid-template-columns:var(--pile-chip, 24px) minmax(0,1fr) !important; }
  html body #fcdGame .seat-bet-pile{ overflow:visible !important; min-width:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #fcdGame .seats .seat .seat-info{ width:100% !important; max-width:none !important; justify-self:stretch !important; box-sizing:border-box !important; }
}
/* Three Card's result grows to its content at every size (the 13px totals
   ran past a fixed height); it keeps its minimum height */
html body #tcpSettlement{ height:auto !important; max-height:none !important; }

@media (max-width:430px) and (min-height:481px) and (max-height:699px){
  /* betting: the band's chip row and the rack tools join the layout's own flow */
  html body[data-ui-phase="betting"] .fcp-layout, html body[data-ui-phase="betting"] .csp-layout, html body[data-ui-phase="betting"] .uth-layout{
    flex-direction:row !important; flex-wrap:wrap !important; align-content:center !important; justify-content:center !important; row-gap:var(--fcp-vgap, 3px) !important; column-gap:4px !important;
  }
  html body[data-ui-phase="betting"] .fcp-layout > *, html body[data-ui-phase="betting"] .csp-layout > *, html body[data-ui-phase="betting"] .uth-layout > *{ flex:0 0 100%; }
  html body[data-ui-phase="betting"] .fcp-band, html body[data-ui-phase="betting"] .csp-band, html body[data-ui-phase="betting"] .uth-band,
  html body[data-ui-phase="betting"] #fcpWagerControls, html body[data-ui-phase="betting"] #cspWagerControls, html body[data-ui-phase="betting"] #uthWagerControls{ display:contents !important; }
  html body[data-ui-phase="betting"] .chip-row{ order:7 !important; flex:0 0 100% !important; justify-content:center !important; }
  html body[data-ui-phase="betting"] .rack-tools{ order:5 !important; flex:0 0 auto !important; display:flex !important; gap:3px !important; align-items:center !important; }
  html body[data-ui-phase="betting"] .fcp-actions, html body[data-ui-phase="betting"] .csp-actions, html body[data-ui-phase="betting"] .uth-actions{ order:5 !important; flex:1 1 0 !important; min-width:88px; width:auto !important; padding:0 !important; }
  html body[data-ui-phase="betting"] .fcp-actions .btn-deal, html body[data-ui-phase="betting"] .csp-actions .btn-deal, html body[data-ui-phase="betting"] .uth-actions .btn-deal,
  html body[data-ui-phase="betting"] #fcpPrimaryAction, html body[data-ui-phase="betting"] #cspPrimaryAction, html body[data-ui-phase="betting"] #uthPrimaryAction{ min-width:0 !important; width:100% !important; }
  html body[data-ui-phase="betting"] .rack-btn{ min-width:44px !important; padding:2px 3px !important; }
  html body[data-ui-phase="betting"] .fcp-limits, html body[data-ui-phase="betting"] .csp-limits{ display:flex !important; flex-direction:column !important; align-items:center !important; line-height:1.15 !important; }
}
@media (max-width:679px) and (min-height:700px){
  :root{ --fcp-band-h:186px; --fcp-card-v: calc((var(--frame-h, 100dvh) - var(--fcp-fixed-p, 500px) - 80px) / 2 * 0.712); }
}
/* ===========================================================================
   SMALL SIDEWAYS PHONES (700px wide and under, 480px tall and under): the
   game's name wraps beside the buttons, and the last-hand figures stack in
   two short lines under it (they ran into the buttons and the circles).
   =========================================================================== */
@media (max-width:700px) and (max-height:480px){
  html body .brand-cluster .wordmark{ max-width:150px !important; min-width:0 !important; }
  html body .brand-cluster .wordmark .title{ white-space:normal !important; font-size:14px !important; line-height:16px !important; }
  html body .brand-cluster .wordmark .eyebrow{ display:none !important; }
  html body .fcp-rail, html body .csp-rail{ position:fixed !important; top:36px !important; left:10px !important; right:auto !important;
    flex-direction:column !important; align-items:flex-start !important; gap:0 !important; z-index:20; }
  html body #cspDealerQualification, html body #uthDealerQualification{ white-space:normal !important; max-width:120px; text-align:center; line-height:1.15 !important; }
}
/* Ultimate's long name: two lines, not three (it was cut at the top) */
@media (max-width:700px) and (max-height:480px){
  html body #uthHeader .wordmark{ flex:0 0 auto !important; width:122px !important; max-width:122px !important; }
  html body #uthHeader .wordmark .title{ font-size:14px !important; line-height:16px !important; }
}
/* Five Card Draw sideways: the showdown list in tighter lines (it ran 11px
   past its panel) and the side plates wide enough for a name beside its badge */
@media (max-height:480px){
  html body #fcdGame #showdownSummary .showdown-row, html body #fcdGame #showdownSummary .showdown-row *{ line-height:1.12 !important; }
  html body #fcdGame #showdownSummary .showdown-row{ row-gap:0 !important; }
  /* the centre column holds only the pot and the top seat since the notes
     moved to the right-hand column (2026-10-04), so the three columns are
     near equal: every plate fits its longest line */
  html body #fcdGame .fcd-arena{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) !important; }
}
/* Short desktops (481-540px tall): no footer (Ronan 2026-10-04, "remove the
   footer entirely"); the full text stays at every other size. */
@media (min-width:680px) and (min-height:481px) and (max-height:540px){
  html body #tcpGame footer, html body #fcpGame footer, html body #cspGame footer, html body #uthGame footer, html body #fcdGame footer, html body footer.site-footer{ display:none !important; }
}
/* Short desktops (481-540px tall), Ronan 2026-10-04: Caribbean's short rules
   list is in the Rules panel only (both pay tables stay on the felt in full);
   Ultimate's history and session are in the Stats panel only. */
@media (min-width:680px) and (min-height:481px) and (max-height:540px){
  html body #cspGame #rulesInline{ display:none !important; }
  html body #uthGame #uthStatsLeft{ display:none !important; }
}
/* Four Card and Caribbean, desktops 900-1199 wide and 481-540 tall (Ronan
   2026-10-04, "desktop layout, no pay tables"): the rules and pay tables are
   in the Rules panel at this size; their room goes to the cards and result. */
@media (min-width:680px) and (max-width:1199px) and (min-height:481px) and (max-height:540px){
  html body #fcpGame #fcpPaytables, html body #cspGame #cspPaytables{ display:none !important; }
  :root{ --fcp-sides:400px; --csp-sides:420px; --fcp-fixed:426px; --csp-fixed:412px; --fcp-band-h:127px; --fcp-vgap:2px; --csp-band-h:124px; }
  html body #cspGame .settlement-rows{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; column-gap:10px !important; }
  html body #cspGame .settlement-row{ grid-template-columns:62px minmax(0,1fr) auto auto !important; grid-template-areas:"l s s r" "rt rt ret d" !important; column-gap:6px !important; row-gap:0 !important; }
}
/* Three Card, desktop, once the cards are out: the betting column and the
   balance sit beside the pay tables, never on them (Ronan 2026-10-04, 900x481
   "rules chips overlay"). The 12px tables are wider than the 16% the column
   was placed at; the column now starts 14px past the table's edge. */
@media (min-width:900px){
  html body:not([data-ui-phase="bet"]) #tcpSpotsCol{ left:max(16%, calc(1.5% + max(150px, clamp(118px, 13vw, 170px)) + 14px)) !important; }
  html body:not([data-ui-phase="bet"]) .tcp-bank-inline{ right:max(16%, calc(1.5% + max(150px, clamp(118px, 13vw, 170px)) + 14px)) !important; }
}
@media (min-width:900px) and (max-height:540px){
  html body:not([data-ui-phase="bet"]) #tcpSpotsCol{ gap:4px !important; top:calc(50% - 22px) !important; }
  html body:not([data-ui-phase="bet"]) #tcpSpotsCol .bet-circle{ width:64px !important; height:64px !important; min-width:64px !important; }
  html body:not([data-ui-phase="bet"]) #tcpSpotsCol .side-bet-spot{ width:48px !important; height:48px !important; min-width:48px !important; }
}
/* Five Card Draw: the seat plate's lines fit the plate (2026-10-04, battery
   triage fix 1). The 13px name had a 16px line in a 15px row and pressed 1-2px
   into the style line at every size; and a plate's fourth line (status, hand
   name or draw count) overran desktop plates by 3-4px and was clipped. The
   name row now takes its name's height, and on desktop the lines are set to
   fit the plate's own height, so nothing on the table moves. */
html body #fcdGame .seat-id-row{ height:auto !important; min-height:0 !important; }
html body #fcdGame .seat-name{ line-height:1.1 !important; }
@media (min-width:680px) and (min-height:481px){
  html body #fcdGame .seat-info, html body .seats[data-seat-count] .seat[data-seat-index] .seat-info{ padding-top:1px !important; padding-bottom:1px !important; }
  html body #fcdGame .seat-stack{ line-height:15px !important; }
  html body #fcdGame .seat-style, html body #fcdGame .seat-status-badge, html body #fcdGame .seat-hand-name, html body #fcdGame .seat-draw-badge{ line-height:13px !important; }
}
/* Five Card Draw, upright phones 330px and wider: the SB/BB marker sits as a
   tab on its plate's top edge, inside the plate's width (battery triage fix 2,
   2026-10-04). Beside the plate it hung 24px past it, over that seat's chips.
   It ends 3px above the name and stays 6px+ clear of the gold line. */
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  html body #fcdGame .seat .seat-id-row .seat-blind-marker,
  html body #fcdGame .seat:not([style*="pile plate"]) .seat-id-row .seat-blind-marker{ top:-7px !important; right:4px !important; left:auto !important; height:16px; }
  html body #fcdGame .seat[data-seat-index="4"] .seat-id-row .seat-blind-marker,
  html body #fcdGame .seat[data-seat-index="5"] .seat-id-row .seat-blind-marker{ right:auto !important; left:4px !important; }
}
/* Five Card Draw sideways (480px tall and under): header buttons 44px (D11)
   in a 48px header. The layer's 48px minimum had pushed them 2px above the
   screen in the game's 44px header (battery triage fix 3, 2026-10-04). */
@media (max-height:480px){
  html body #fcdGame #fcdHeader{ height:48px !important; }
  html body #fcdGame .gold-icon-btn{ min-height:44px !important; height:44px !important; }
  :root{ --fcd-fixed-l: calc(48px + 14px + 4px + 44px + var(--arena-h, 0px) + 20px + 18px + 10px + 16px); }
}
/* Five Card Draw sideways: the notes row (action log, side pots) holds one
   line, so it is 16px, not 36px. The table area then ends just under the side
   seats and your cards clear the gold line at 640x360 (battery triage fix 4,
   2026-10-04; the 62px plates and 48px header had pushed them 7px past it). */
@media (max-height:480px){
  :root{ --arena-row3: 16px; }
}
/* Five Card Draw sideways: the action log and the side pots in the right-hand
   column, under the actions (Ronan 2026-10-04, "A"), 12px semi-bold on a dark
   plate, wrapping to two lines. */
@media (max-height:480px){
  html body #fcdGame .fcd-notes-band{ margin-top:auto; display:flex; flex-direction:column; gap:3px; width:100%; box-sizing:border-box;
    background:rgba(6,9,24,.62); border:1px solid rgba(224,185,94,.25); border-radius:8px; padding:4px 6px; }
  html body #fcdGame .fcd-notes-band:not(:has(> :not(:empty))){ display:none; }
  html body #fcdGame .fcd-notes-band .side-pots{ display:flex !important; align-items:stretch; max-width:none; }
  html body #fcdGame .fcd-notes-band .community-log{ display:block; max-width:none !important; white-space:normal !important; overflow:visible !important;
    font-size:12px !important; line-height:15px !important; font-weight:600 !important; font-style:normal !important; opacity:1 !important; color:#f5efdf !important; text-align:left; }
  html body #fcdGame .fcd-notes-band .side-pots:not(:empty) ~ .community-log{ display:none; }
  html body #fcdGame .fcd-notes-band .pot-row{ flex-wrap:wrap; column-gap:6px; white-space:normal; overflow:visible; font-size:12px !important; line-height:15px !important; font-weight:600; }
  html body #fcdGame .fcd-notes-band .pr-name{ opacity:1; color:#e8cf8f; }
  html body #fcdGame .fcd-notes-band .pr-for, html body #fcdGame .fcd-notes-band .pr-won{ flex-basis:100%; white-space:normal; overflow:visible; text-overflow:clip; opacity:1; }
  html body #fcdGame .fcd-notes-band .pr-for{ color:#f5efdf; }
  html body #fcdGame .postshow-row{ height:auto !important; flex:1 1 auto; min-height:0; }
  html body #fcdGame .fcd-notes-band{ order:3; }
}
/* Five Card Draw: chips and count badges 6px clear of every plate (battery
   triage fix 5). Sideways, a seat whose chips sit left of its plate has the
   badge on the stack's far side, not against its own plate; at 320 wide the
   bet sits mid-row, not on the next seat's plate. */
@media (max-height:480px){
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="4"] .seat-bet-pile .denom-count,
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="5"] .seat-bet-pile .denom-count,
  html body #fcdGame .seats[data-seat-count="4"] .seat[data-seat-index="3"] .seat-bet-pile .denom-count{ right:auto !important; left:-6px !important; }
}
@media (max-width:329px) and (min-height:481px){
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="2"] .seat-bet-pile,
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="3"] .seat-bet-pile,
  html body #fcdGame .seats[data-seat-count="6"] .seat[data-seat-index="4"] .seat-bet-pile{ box-sizing:border-box; padding-bottom:1px !important; }
  html body #fcdGame .seat-bet-pile .denom-count{ top:3px !important; }
  :root{ --seat-pile-h: 37px; }
}
@media (max-height:480px){
  /* a full sideways chip column (three denominations) is 56px, centred on
     its 62px plate, so it stays 6px clear of the side seat below (stacks 14px apart) */
  html body #fcdGame .seat-bet-pile{ gap:0 !important; justify-content:center !important; }
  html body #fcdGame .seat-bet-pile .denom-stack{ margin-top:-16px !important; }
  html body #fcdGame .seat-bet-pile .denom-stack:first-child{ margin-top:0 !important; }
}
/* Five Card Draw upright phones: the table area starts 8px higher so the
   SB/BB tab on a top-row plate is on the table; the felt's top padding gives
   the 8px back, so nothing else moves. */
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  html body #fcdGame #fcdArena{ padding-top:8px !important; height:calc(var(--arena-h, 0px) + 8px) !important; }
  html body #fcdGame #fcdArena::before{ top:calc(var(--seat-cards-h, 0px) + var(--seat-plate-h) / 2 + 8px) !important; }
  html body #fcdTable .felt-surface{ padding-top:20px !important; }
}
@media (min-width:330px) and (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body #fcdTable .felt-surface{ padding-top:18px !important; padding-bottom:8px !important; }
}
/* Five Card Draw, upright phones under 360 wide: the dealer button sits as a
   tab on its plate's top edge, like SB/BB, so the name has the plate's width
   ("Duchess" was 2px short at 330 wide). */
@media (min-width:330px) and (max-width:359px) and (min-height:481px){
  html body #fcdGame .seat .seat-id-row .seat-button-marker{ position:absolute !important; top:-7px !important; right:4px; left:auto; z-index:2; min-width:16px; height:16px; line-height:16px !important; padding:0 2px !important; }
  html body #fcdGame .seat[data-seat-index="4"] .seat-id-row .seat-button-marker,
  html body #fcdGame .seat[data-seat-index="5"] .seat-id-row .seat-button-marker{ right:auto; left:4px; }
}
/* Five Card Draw, tall upright phones (700px and up): the bet-size panel ends
   above the action buttons (it lay 6px over them); the band is 12px taller so
   the panel keeps its 90px (battery triage, 2026-10-04). */
@media (max-width:679px) and (min-height:700px){
  :root{ --fcd-band-h:146px; }
  html body #fcdGame .bet-sizing-row{ bottom:56px !important; }
}
/* Five Card Draw upright phones: the plate tabs (SB/BB, and D under 360 wide)
   are 14px and sit 8px up, and the plate's lines start 2px lower, so a tab
   never touches the name on a four-line plate (it lay 5px over it at the
   showdown on the side seats). */
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  html body #fcdGame .seat .seat-id-row .seat-blind-marker,
  html body #fcdGame .seat:not([style*="pile plate"]) .seat-id-row .seat-blind-marker,
  html body #fcdGame .seat .seat-id-row .seat-button-marker{ top:-8px !important; height:14px !important; line-height:14px !important; }
  html body #fcdGame .seat-info, html body .seats[data-seat-count] .seat[data-seat-index] .seat-info{ padding-top:4px !important; padding-bottom:0 !important; }
}
/* Five Card Draw, compact upright phones (Ronan 2026-10-04, A): the row above
   your cards is always two lines - You, button, stack and status, then your
   hand's name - so a long hand name never moves your cards. */
@media (max-width:679px) and (min-height:481px) and (max-height:699px){
  html body #fcdGame .hero-id-row{ flex-wrap:wrap !important; align-content:center !important; height:34px !important; min-height:34px !important; overflow:hidden; }
  html body #fcdGame .hero-id-row > *{ line-height:16px !important; }
  html body #fcdGame .hero-id-row .hero-hand-name{ flex:0 0 100% !important; text-align:center; margin:0 !important; white-space:nowrap; }
}
/* Five Card Draw sideways at 640x360, six-handed (Ronan 2026-10-04): while the
   bet-size panel is open the action-log line steps aside; it returns on
   Confirm or Cancel. Side pots stay. */
@media (max-height:370px){
  html body[data-sizing="true"]:has(.seats[data-seat-count="6"]) #fcdGame .fcd-notes-band .community-log{ display:none !important; }
}
/* Five Card Draw, frames under 360 wide (Ronan 2026-10-04): the opponents'
   style in normal case ("Cautious"), so it fits the plate at 12px. */
@media (min-width:330px) and (max-width:359px) and (min-height:481px){
  html body #fcdGame .seat-style{ text-transform:none !important; letter-spacing:0 !important; }
}
/* Five Card Draw at 320 wide: the notes row (one 15px log line) is 32px,
   so the buttons keep 6px inside the gold line now the row above the cards
   is two lines. */
@media (max-width:329px) and (min-height:481px) and (max-height:699px){
  :root{ --arena-row3:32px; }
}
/* Five Card Draw upright phones: the felt's sides are 18px, so a status line
   that fills a side plate ("Raises to $23") stays 6px inside the gold line. */
@media (min-width:330px) and (max-width:679px) and (min-height:481px){
  html body #fcdTable .felt-surface{ padding-left:18px !important; padding-right:18px !important; }
}
/* Five Card Draw, tall upright phones (700px and up), Ronan 2026-10-04: at the
   result the showdown list takes your cards' place, as on compact phones
   (P2-13); your cards return on Next Hand. */
@media (max-width:679px) and (min-height:700px){
  html body[data-fcd-phase="handOver"] #heroZone, html body[data-fcd-phase="showdown"] #heroZone{ display:none !important; }
  html body[data-fcd-phase="handOver"] #fcdGame .fcd-band, html body[data-fcd-phase="showdown"] #fcdGame .fcd-band{ height:auto !important; min-height:var(--fcd-band-h); }
}
@media (max-width:679px) and (min-height:700px){
  html body[data-fcd-phase="handOver"] #fcdGame .postshow-row, html body[data-fcd-phase="showdown"] #fcdGame .postshow-row{ height:auto !important; max-height:none !important; }
  html body[data-fcd-phase="handOver"] #fcdGame .showdown-summary, html body[data-fcd-phase="showdown"] #fcdGame .showdown-summary{ max-height:none !important; overflow:visible !important; }
}
/* Four Card Poker, short desktops 1200px wide and up (Ronan 2026-10-04): the
   short rules list is in the Rules panel only; both pay tables stay on the
   felt, as Caribbean (P2-15). Narrower short desktops follow P2-17. */
@media (min-width:1200px) and (min-height:481px) and (max-height:540px){
  html body #fcpGame #rulesInline{ display:none !important; }
}
/* Four Card Poker short desktops (481-540 tall): the right column's items 4px
   apart, so the hint line that appears at the decision fits the column (its
   centred contents rose 11px past the felt's edge at 1200x481). */
@media (min-width:680px) and (min-height:481px) and (max-height:540px){
  html body #fcpGame .fcp-right{ gap:4px !important; }
}
/* Four Card Poker: a card not in your best four is dimmed in its place. Its
   "animation:none" (fcp.css) froze it in the deal animation's starting pose,
   raised 16px and shrunk to 85%, which put it 1px under the "You" label on
   phones (found 2026-10-04). */
html body #fcpGame .card.not-best{ transform:none !important; }
/* Caribbean at 371-389 wide (Ronan 2026-10-04): P2-5 extended — the name on a
   slim line of its own above the header buttons ("Caribbean" ran onto Stats). */
@media (min-width:371px) and (max-width:389px) and (min-height:481px){
  html body #cspGame .brand-cluster{ flex-wrap:wrap !important; row-gap:4px !important; justify-content:center !important; padding-top:4px !important; padding-bottom:4px !important; }
  html body #cspGame .brand-cluster .wordmark{ flex:1 1 100% !important; width:100% !important; max-width:none !important; align-items:center !important; text-align:center; margin:0 !important; }
  html body #cspGame .brand-cluster .wordmark .eyebrow{ display:none !important; }
  html body #cspGame .brand-cluster .wordmark .title{ font-size:15px !important; line-height:18px !important; white-space:nowrap !important; }
  html body #cspGame .brand-cluster .icon-actions, html body #cspGame .brand-cluster [id$="SecondaryControls"]{ width:100% !important; flex:1 1 100% !important; justify-content:space-between !important; gap:4px !important; }
  html body #cspGame .gold-icon-btn{ flex:1 1 0; min-width:0 !important; padding:0 2px !important; }
}
/* Ultimate, sideways phones 700px wide and under (P2-19 / P2-20, approved
   Ronan 2026-10-04): the result column is 200px, so the community cards keep
   their size and clear the Blind circle; the round count stays in the header,
   between New Game and the balance, 6px clear of the balance (no room under
   the spots; Ronan chose the header). */
@media (max-width:700px) and (max-height:480px){
  :root{ --uth-r-w:200px; }
  html body #uthGame .uth-rail{ position:fixed !important; top:14px !important; bottom:auto !important; left:auto !important; right:130px !important; z-index:20; }
}
/* Phones, the four house poker games (Ronan 2026-10-04, "line 6px nearer
   edge"): the felt's decorative gold line is drawn 6px from the felt's edge,
   not 12px, so the corner figures and the bottom buttons are 6px+ inside it
   with nothing moved and no height lost. Five Card Draw is unchanged. */
@media (max-width:679px), (max-height:480px){
  html body #felt > .felt-surface::before, html body #fcpGame .felt-surface::before,
  html body #cspGame .felt-surface::before, html body #uthGame .felt-surface::before{ top:6px !important; right:6px !important; bottom:6px !important; left:6px !important; }
}
/* Caribbean on every desktop size (Ronan 2026-10-04, extends P2-15): the short
   rules list is in the Rules panel only; both pay tables stay on the felt. */
@media (min-width:680px) and (min-height:481px){
  html body #cspGame #rulesInline{ display:none !important; }
}
/* Phones, Four Card / Caribbean / Ultimate (Ronan 2026-10-04, the gold line at 6px): the felt is padded
   12px and the corner figures pinned 12px in, so everything sits 6px+ inside the line. */
@media (max-width:679px) and (min-height:481px){
  html body #fcpGame .felt-surface, html body #cspGame .felt-surface, html body #uthGame .felt-surface{ padding:12px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #fcpGame .fcp-rail, html body #cspGame .csp-rail{ top:12px !important; }
  html body #fcpGame .fcp-rail, html body #cspGame .csp-rail{ left:12px !important; }
}
/* ...the balance too, where it is on the felt (from 371 wide; narrower it is in the header, P2-9) */
@media (min-width:371px) and (max-width:679px) and (min-height:481px){
  html body #fcpGame .fcp-bank, html body #cspGame .csp-bank, html body #uthGame .uth-bank{ top:12px !important; right:12px !important; }
}
@media (max-width:370px) and (min-height:481px){
  html body #uthGame .uth-rail{ top:12px !important; }
}
/* Sideways phones (480px tall and under), Four Card / Caribbean / Ultimate:
   header buttons 44px (D11) so they fit the 44px header (the layer's 48px put
   them 2px above the screen). */
@media (max-height:480px){
  html body #fcpGame .gold-icon-btn, html body #cspGame .gold-icon-btn, html body #uthGame .gold-icon-btn{ min-height:44px !important; height:44px !important; }
}

/* Ultimate phones: anchor the layout to the top so the card rows hold still between phases (§34) */
@media (max-width:679px) and (min-height:481px){ html body #uthGame .uth-layout{ justify-content:flex-start !important; align-content:flex-start !important; } }
/* (c) Ultimate desktop: 18px of fixed room for the two-line tip and the result strip, taken from the cards (P2-25) */
@media (min-width:1000px) and (min-height:481px){
  html:root:has(#uthGame){ --card-h-v: calc((100vh - var(--uth-fixed, 362px) - 30px - 2 * var(--uth-r3, 0px)) / 3); --card-h-v: calc((100dvh - var(--uth-fixed, 362px) - 30px - 2 * var(--uth-r3, 0px)) / 3); }   /* R3 2026-10-11: less the line's spacing */
  html body #uthGame .uth-note-line{ height:44px; }
  html body #uthGame .uth-band{ height:calc(var(--uth-band-h) + 14px); }
}
/* (b)(d) Short desktops: wager circles about 10% smaller; Caribbean's cards get the room back (P2-24, P2-26) */
@media (min-width:1000px) and (min-height:481px) and (max-height:649px){
  html body #uthGame .uth-spot, html body #cspGame .csp-spot{ width:76px; }
  html body #uthGame .uth-spot .bet-circle, html body #cspGame .csp-spot .bet-circle{ width:61px; height:61px; }
  html body #uthGame .uth-spot .bet-circle.side, html body #cspGame .csp-spot .bet-circle.side{ width:47px; height:47px; }
  html:root:has(#cspGame){ --card-h-v: calc((100vh - var(--csp-fixed, 476px) + 12px) / 2); --card-h-v: calc((100dvh - var(--csp-fixed, 476px) + 12px) / 2); }   /* R3 2026-10-11: the column's spare height here pays for the line's spacing, so the cards keep their size (60px floor) */
}
/* Ultimate, sideways phones 700px wide and under: the round count stacked (label over number) so it fits between New Game and the balance (P2-19) */
@media (max-width:700px) and (max-height:480px){
  html body #uthGame .uth-rail{ top:4px !important; right:153px !important; }
  html body #uthGame .uth-rail .felt-stat{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:0 !important; line-height:1.15 !important; }
}
/* Ultimate, phones 370 wide and under (round count in the felt's top-left corner):
   the dealer row starts 6px lower, so "Dealer" clears the round count even when
   the hand name appears beneath it at the result */
@media (max-width:370px) and (min-height:481px){
  html body #uthGame .uth-dealer{ margin-top:6px !important; }
}

/* Desktops under 720 tall: Ultimate's wager rows closer together so the left column keeps 6px inside the gold line (P2-24) */
@media (min-width:1000px) and (min-height:481px) and (max-height:719px){
  html body #uthGame #uthWagerSpots{ gap:0 !important; }
  html body #uthGame .uth-spot{ gap:0 !important; }
  html body #uthGame .uth-spot .spot-label{ margin-top:0 !important; }
}
/* Caribbean desktop: the right column anchored to the top, so the hint bar appearing never pushes the balance over the line (and the balance holds still) */
@media (min-width:1000px) and (min-height:481px){
  html body #cspGame .csp-right{ justify-content:flex-start !important; }
}
@media (min-width:1000px) and (min-height:481px) and (max-height:649px){
  html body #cspGame .csp-right{ gap:6px !important; }
}
/* Four Card desktop: the tip line keeps one height whether or not it has text, so the cards never move (§11) */
@media (min-width:1000px) and (min-height:481px){
  html body #fcpGame .fcp-note-line{ min-height:18px; }
}
/* Ultimate, phones 340 wide and under: action buttons keep 2px+ around their words ("See the flop") */
@media (max-width:340px) and (min-height:481px){
  html body #uthGame #uthDecision{ column-gap:4px !important; }
  html body #uthGame #uthDecision #btnCheck{ flex-grow:1.3 !important; }
}
/* Ultimate, desktops under 650 tall: the layout starts 8px down so the top cards sit 6px inside the gold line */
@media (min-width:1000px) and (min-height:481px) and (max-height:649px){
  html body #uthGame .uth-layout{ padding-top:8px !important; }
}
/* Buttons never crowd the cards or wager labels above them (Ronan, 2026-10-04,
   on his phone: Rebet/Next Round 2px under the cards, Play/Check 4px under the
   wager labels). 12px minimum, growing with spare height on taller phones
   (card-spacing rule: spacing grows with the space available). Measured by
   casino-readability.js ("crowded buttons"). */
@media (min-height:481px){
  html body .tcp-actions, html body .fcp-actions, html body .csp-actions, html body .uth-actions{ margin-top:12px !important; }
}
@media (max-width:679px) and (min-height:541px){
  html body .tcp-actions, html body .fcp-actions, html body .csp-actions, html body .uth-actions{ margin-top:clamp(12px, calc((100dvh - 540px) / 5), 28px) !important; }
}
/* Ultimate desktop: the room above the buttons is paid for, not borrowed — 4px from the
   cards (taller desktops); under 650 tall the cards are at their floor, so the
   result strip's extra 14px pays for 8px there instead */
@media (min-width:1000px) and (min-height:481px){
  html body #uthGame .uth-actions{ margin-top:4px !important; }
}
@media (min-width:1000px) and (min-height:481px) and (max-height:649px){
  html:root:has(#uthGame){ --card-h-v: calc((100vh - var(--uth-fixed, 362px) - 26px - 2 * var(--uth-r3, 0px)) / 3); --card-h-v: calc((100dvh - var(--uth-fixed, 362px) - 26px - 2 * var(--uth-r3, 0px)) / 3); }   /* R3 2026-10-11: less the line's spacing */
  html body #uthGame .uth-band{ height:var(--uth-band-h) !important; }
  html body #uthGame .uth-actions{ margin-top:8px !important; }
}
/* Five Card Draw, Large cards (Ronan 2026-10-04, his phone: spades and clubs ran
   into the corners): the corners stay large; the centre suit stays at the normal
   size so a wide suit never reaches a corner (card-spacing rule: every corner
   stays readable). Measured by casino-readability.js in both card modes. */
html body[data-large-cards="true"] #fcdGame .hero-hand .card .card-centre-suit{ font-size:clamp(20px, calc(var(--card-h) * 0.30), 40px) !important; }
@media (max-width:679px){
  html body[data-large-cards="true"] #fcdGame .hero-hand .card .card-centre-suit{ font-size:clamp(14px, calc(var(--card-h) * 0.24), 40px) !important; }
}
/* All five poker games: the centre suit keeps clear of the corners on every card,
   whatever font a device draws the suit with (Ronan's iPhone drew spades and
   clubs wide enough to touch the corner at 44x62). About 29% of the card's height. */
html body .card:not(.back) .card-centre-suit{ font-size:clamp(14px, calc(var(--card-h, 62px) * 0.29), 38px) !important; }
@media (max-width:679px){
  html body[data-large-cards="true"] #fcdGame .hero-hand .card .card-corner{ font-size:13px !important; }
}
/* Chips never crowd the Deal button (Ronan, 2026-10-04: "chips too close to the
   buttons"): 12px between the Deal button and the chip tray below it. Measured by
   casino-readability.js ("crowded buttons" now counts chips above or below). */
html body .tcp-table #chipStrip{ margin-top:6px !important; }
@media (max-width:679px), (max-height:480px){
  html body #fcpGame #chipTray, html body #cspGame #chipTray, html body #uthGame #chipTray{ margin-top:10px !important; }
}
@media (max-width:679px){ html body .tcp-table #chipStrip{ margin-top:9px !important; } }
@media (max-width:340px) and (min-height:481px){
  html body #fcpGame .rack-tools, html body #cspGame .rack-tools{ margin-top:10px !important; }
}

/* ===================== COACH (poker Phase 3, Ronan 2026-10-04) =====================
   casino-coach.js: the header Coach button, the start screen, the HINT tag and its
   reason. No pale type: everything under 16px is 7:1+ and semi-bold. */
html body .coach-btn .btn-val{ font-family:Inter, system-ui, sans-serif; font-size:12.5px; font-weight:800; line-height:17px; white-space:nowrap; }
html body .coach-start{ z-index:200 !important; display:flex !important; align-items:center; justify-content:center; padding:16px; background:rgba(4,6,14,.78) !important; position:fixed; inset:0; }
html body .coach-start-card{
  width:min(440px, 100%); background:linear-gradient(155deg, #161b2e, #0b0e1a); border:1px solid #b8913f;
  border-radius:16px; padding:22px 20px; box-shadow:0 14px 40px rgba(0,0,0,.6); text-align:center; color:#f4ead2;
}
html body .coach-start-title{ font-family:Cinzel, serif; font-size:22px; font-weight:700; color:#f3d488; margin:0 0 6px; }
html body .coach-start-sub{ font-family:Inter, system-ui, sans-serif; font-size:14px; font-weight:600; color:#efe6cf; margin:0 0 16px; }
html body .coach-choices{ display:flex; gap:10px; }
html body .coach-choice{
  flex:1 1 0; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:12px 10px; border-radius:12px; cursor:pointer; text-align:center;
  background:#1c2338; border:2px solid #6d5a2c; color:#f4ead2; font-family:Inter, system-ui, sans-serif;
}
html body .coach-choice.selected{ border-color:#f3d488; background:#2b2a22; box-shadow:0 0 0 1px #f3d488 inset; }
html body .coach-choice:focus-visible{ outline:2px solid #f3d488; outline-offset:2px; }
html body .coach-choice-title{ font-family:Cinzel, serif; font-size:17px; font-weight:700; color:#f3d488; }
html body .coach-choice-desc{ font-size:13px; font-weight:600; color:#efe6cf; line-height:1.3; }
html body .coach-setup{ margin:14px 0 4px; text-align:left; }
html body .coach-setup-label{ font-family:"IBM Plex Mono", monospace; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#f3d488; margin-bottom:6px; }
html body .coach-setup .coach-choice{ min-height:64px; }
@media (max-width:400px){
  html body .coach-choices{ flex-direction:column; }
  html body .coach-choice{ min-height:64px; }
}
/* the HINT tag: its own element on the button's corner (tapping it never presses the button) */
html body .coach-hint-tag{
  position:absolute; z-index:300; padding:0 7px; height:17px; border-radius:999px; cursor:pointer;
  font-family:Inter, system-ui, sans-serif; font-size:12px; font-weight:800; letter-spacing:.06em; line-height:15px;
  background:#f3d488; color:#151007; border:1px solid #7a5d1d; box-shadow:0 2px 6px rgba(0,0,0,.45);
}
html body .coach-hint-tag:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
html body .coach-reason{
  position:fixed; z-index:210; max-width:min(320px, calc(100vw - 16px)); padding:10px 12px; border-radius:10px;
  background:#0d1120; color:#f7efda; border:1px solid #f3d488; box-shadow:0 8px 22px rgba(0,0,0,.6);
  font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:600; line-height:1.4;
}
/* the old HINT drawn inside the button is gone: the tag replaces it (it could not be tapped on its own) */
html body .hinted::after{ content:none !important; display:none !important; }
/* Coach off: no hint at all (P3-1) — the tag, the reason, and each game's hint line */
html body.coach-off .coach-hint-tag, html body.coach-off .coach-reason,
html body.coach-off #hintBar, html body.coach-off #cspHintLine, html body.coach-off .draw-hint{ display:none !important; }
/* Five Card Draw, phones (Ronan 2026-10-04, P3-5): Difficulty leaves the header so the
   six buttons fit one row at 44px / 12px; it is chosen on the opening screen (New Game)
   and in Settings. Desktop keeps all seven. */
@media (max-width:679px){
  html body #fcdGame #btnDifficulty{ display:none !important; }
}
/* the opening screen fits a phone, Sit Down on screen (table size, difficulty, Coach) */
@media (max-width:679px), (max-height:700px){
  html body #fcdGame .setup-card{ padding:12px 12px 10px !important; max-height:calc(100% - 8px); overflow:visible; }
  html body #fcdGame .setup-card h2{ font-size:18px !important; margin:0 0 2px !important; }
  html body #fcdGame .setup-sub{ margin:0 0 8px !important; font-size:12px !important; }
  html body #fcdGame .setup-options{ gap:6px !important; }
  html body #fcdGame .setup-option{ padding:6px 6px !important; min-height:44px; }
  html body #fcdGame .setup-option-desc{ font-size:12px !important; line-height:1.25 !important; }
  html body #fcdGame .setup-option-title{ font-size:15px !important; }
  html body #fcdGame .setup-difficulty, html body #fcdGame .coach-setup{ margin:8px 0 2px !important; }
  html body #fcdGame .coach-setup .coach-choices{ flex-direction:row !important; gap:6px !important; }
  html body #fcdGame .coach-setup .coach-choice{ min-height:44px !important; padding:6px !important; }
  html body #fcdGame .coach-setup .coach-choice-title{ font-size:14px !important; }
  html body #fcdGame .coach-setup .coach-choice-desc{ display:none !important; }
  html body #fcdGame .setup-stakes{ margin:8px 0 !important; }
  html body #fcdGame .setup-start{ min-height:44px !important; }
}
/* Five Card Draw, phones (Ronan 2026-10-04, P3-5, "what is good ux"): Difficulty leaves
   the header so six buttons fit one row at 44px / 12px. It is a set-once choice, made on
   the opening screen (New Game) and in Settings; Sound stays one tap away, as in the
   other four games. Desktop keeps all seven. */
@media (max-width:679px){
  html body #fcdGame #btnDifficulty{ display:none !important; }
}
/* the opening screen fits a phone, Sit Down on screen (table size, difficulty, Coach) */
@media (max-width:679px), (max-height:700px){
  html body #fcdGame .setup-card{ padding:12px 12px 10px !important; }
  html body #fcdGame .setup-card h2{ font-size:18px !important; margin:0 0 2px !important; }
  html body #fcdGame .setup-sub{ margin:0 0 8px !important; font-size:12px !important; }
  html body #fcdGame .setup-options{ gap:6px !important; }
  html body #fcdGame .setup-option{ padding:6px !important; min-height:44px; }
  html body #fcdGame .setup-option-desc{ font-size:12px !important; line-height:1.25 !important; }
  html body #fcdGame .setup-option-title{ font-size:15px !important; }
  html body #fcdGame .setup-difficulty, html body #fcdGame .coach-setup{ margin:8px 0 2px !important; }
  html body #fcdGame .coach-setup .coach-choices{ flex-direction:row !important; gap:6px !important; }
  html body #fcdGame .coach-setup .coach-choice{ min-height:44px !important; padding:6px !important; }
  html body #fcdGame .coach-setup .coach-choice-title{ font-size:14px !important; }
  html body #fcdGame .coach-setup .coach-choice-desc{ display:none !important; }
  html body #fcdGame .setup-stakes{ margin:8px 0 !important; }
  html body #fcdGame .setup-start{ min-height:44px !important; }
}
@media (max-width:679px), (max-height:700px){
  html body #fcdGame .setup-card{ max-width:calc(100vw - 24px) !important; box-sizing:border-box; }
}
@media (max-height:540px){
  html body #fcdGame .setup-diff .setup-option-desc{ display:none !important; }
  html body #fcdGame .setup-sub{ display:none !important; }
}
/* Five Card Draw, phones: the seats start below the Blinds line, so a seat's SB/BB tab
   never sits on it (screenshot catch 2026-10-04); the action band keeps 10px+ from your cards. */
@media (max-width:679px) and (min-height:481px){
  html body #fcdGame #fcdArena{ padding-top:26px !important; height:calc(var(--arena-h, 0px) + 26px) !important; }
  html body #fcdGame #fcdBand{ margin-top:10px !important; }
}
/* the Coach button's On/Off reads like the other header labels: dark on gold, 12px+ (13px on desktop) */
html body .gold-icon-btn.coach-btn .btn-val{ color:#20160a !important; font-size:12px !important; font-weight:800 !important; line-height:16px !important; }
@media (min-width:680px){ html body .gold-icon-btn.coach-btn .btn-val{ font-size:13px !important; } }
/* Five Card Draw sideways: the opening card clears the footer line */
@media (max-height:480px){
  html body #fcdGame #tableSizeOptions .setup-option-desc{ display:none !important; }
}
/* the badge is easy to tap: a 44px-wide hit area, extended sideways only (never onto other words) */
html body .coach-hint-tag::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:max(44px, 100%); transform:translateX(-50%); }
/* G-03 win/lose preview on the decision buttons: desktop only (P3-3) */
html body .db-preview{ display:none; }
@media (min-width:680px) and (min-height:481px){
  html body .db-preview{ display:block; font-family:Inter, system-ui, sans-serif; font-size:12px; font-weight:700; line-height:15px; margin-top:1px; }
}
/* P2-5 extended to 430px wide (Coach added a sixth header button, 2026-10-04): the
   game's name takes its own slim line above the buttons on every upright phone. */
@media (min-width:371px) and (max-width:430px) and (min-height:481px){
  html body .brand-cluster{ flex-wrap:wrap !important; row-gap:4px !important; justify-content:center !important; padding-top:4px !important; padding-bottom:4px !important; }
  html body .brand-cluster .wordmark{ flex:1 1 100% !important; width:100% !important; align-items:center !important; text-align:center; margin:0 !important; }
  html body .brand-cluster .wordmark .eyebrow{ display:none !important; }
  html body .brand-cluster .wordmark .title{ font-size:15px !important; line-height:18px !important; white-space:nowrap !important; }
  html body .brand-cluster .icon-actions, html body .brand-cluster [id$="SecondaryControls"]{ width:100%; justify-content:space-between !important; gap:4px !important; }
  html body .gold-icon-btn{ flex:1 1 0; min-width:0 !important; padding:0 2px !important; }
}
/* sideways phones: header buttons at phone size (12px labels, slim padding) so six fit beside the name */
@media (max-height:480px){
  html body .gold-icon-btn .btn-label, html body .brand-cluster .gold-icon-btn .btn-label, html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label{ font-size:12px !important; }
  html body .gold-icon-btn{ padding:0 6px !important; }
  html body .gold-icon-btn .ico{ font-size:16px !important; }
}
@media (min-width:680px) and (min-height:481px){ html body .action .db-preview, html body .decision-btn .db-preview{ font-size:13px !important; zoom:1 !important; transform:none !important; } }
/* Coach on: the button row keeps room above it for the HINT badge (17px; 12px gap + 5px).
   The same in every phase, so nothing moves during a hand. */
@media (min-height:481px){
  html body.coach-on .tcp-actions, html body.coach-on .fcp-actions, html body.coach-on .csp-actions, html body.coach-on .uth-actions{ margin-top:17px !important; }
}
@media (max-width:679px) and (min-height:541px){
  html body.coach-on .tcp-actions, html body.coach-on .fcp-actions, html body.coach-on .csp-actions, html body.coach-on .uth-actions{ margin-top:clamp(17px, calc((100dvh - 540px) / 5 + 5px), 33px) !important; }
}
/* G-07: each game's house edge in Rules (D9) */
html body .rules-edge{ font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:600; line-height:1.45; color:#f4ead2; margin:0 0 12px; padding:8px 10px; border:1px solid rgba(243,212,136,.45); border-radius:8px; background:rgba(0,0,0,.35); }
html body .rules-edge strong{ color:#f3d488; }
/* Three Card, the SE and desktops under 650 tall: the HINT badge's room comes from the
   table's own row gaps, not extra height (no scroll, 6px inside the line) */
@media (max-height:649px) and (min-height:481px){
  html body.coach-on .tcp-actions{ margin-top:12px !important; }
  html body.coach-on .tcp-table{ row-gap:0 !important; }
  html body.coach-on .tcp-table > *:has(+ .tcp-actions){ margin-bottom:5px; }
}
/* G-01: before the reveal, the dealer's qualification slot says what it needs (neutral, not a result) */
html body .dealer-qualify-badge.needs, html body #cspDealerQualification.needs, html body #uthDealerQualification.needs{ color:#f4ead2 !important; background:rgba(0,0,0,.45) !important; border-color:rgba(243,212,136,.45) !important; }
@media (max-height:480px){ html body .q-needed{ display:none; } }
/* narrow phones: 2px more under the name line, so the header balance (P2-9) clears the buttons */
@media (max-width:430px) and (min-height:481px){ html body .brand-cluster{ row-gap:6px !important; } }
/* narrow phones: 2px more under the name line, so the header balance (P2-9) clears the buttons */
@media (max-width:430px) and (min-height:481px){ html body .brand-cluster{ row-gap:6px !important; } }
/* 330-wide phones: six header buttons fit (2px gaps, slim padding; each stays 44px+) */
@media (max-width:340px) and (min-height:481px){
  html body .brand-cluster .icon-actions, html body .brand-cluster [id$="SecondaryControls"], html body #fcdSecondaryControls{ gap:2px !important; }
  html body .gold-icon-btn{ padding:0 1px !important; min-width:44px !important; }
}
/* Caribbean and Ultimate phones: the 'needed …' wording after the reveal is desktop only (it is already said before the reveal) */
@media (max-width:679px){ html body .q-needed{ display:none; } }
/* Ultimate, narrow phones: the header balance sits 2px higher, clear of the buttons */
@media (max-width:370px) and (min-height:481px){ html body #uthGame #uthBalance{ top:2px !important; } }
/* Five Card Draw, the SE (504 high): less seat headroom and no badge nudge, so the bottom row keeps 6px inside the gold line */
@media (max-width:679px) and (min-height:481px) and (max-height:540px){
  html body #fcdGame #fcdArena{ padding-top:22px !important; height:calc(var(--arena-h, 0px) + 22px) !important; }
  html body.coach-on #fcdGame #actionRow, html body.coach-on #fcdGame #drawRow{ transform:none !important; }
}
/* 330-wide phones: the page fits its 589px height (badge room 12px, header gap 4px) */
@media (max-width:340px) and (min-height:481px){
  html body .brand-cluster{ row-gap:4px !important; }
  /* the chips' own row sits 4px under Undo/Clear (not next to Deal), so the HINT badge keeps its full room */
  html body #fcpGame #chipTray, html body #cspGame #chipTray{ margin-top:4px !important; }
}
/* Five Card Draw, the SE: the action band 6px under the cards (still 10px+ clear of them there), so the bottom row keeps 6px inside the gold line */
@media (max-width:679px) and (min-height:481px) and (max-height:540px){ html body #fcdGame #fcdBand{ margin-top:12px !important; } }
/* Five Card Draw, 330-wide phones at the result (P2-18, "repeats step aside"): "Hand complete" steps
   aside while the result banner shows who won and why, so the why line fits with no scroll */
@media (max-width:340px) and (min-height:481px) and (max-height:699px){
  html body #fcdGame:has(.result-banner .rb-why:not(:empty)) #pokerInstruction{ display:none !important; }
}
/* Five Card Draw, the SE: the felt extends 4px lower (the SE may scroll, D10) so the buttons keep 6px inside the gold line */
@media (max-width:679px) and (min-height:481px) and (max-height:540px){ html body #fcdGame #fcdBand{ margin-bottom:4px !important; } }
/* Ultimate, the SE (allowed to scroll, D10): the header stays at the top with the balance, so a scroll never slides the buttons under it */
@media (max-width:370px) and (min-height:481px) and (max-height:540px){
  html body #uthGame .brand-cluster{ position:sticky !important; top:0; z-index:45; background:#0b0e1a; }
  html body #uthGame #uthBalance{ z-index:46 !important; }
}

/* DESKTOP PANELS (Ronan 2026-10-27, "yes continue", poker batch): on desktop the
   Rules panel is wide with the rules in columns and any pay tables beside them, and
   in every panel Close stays pinned in view. Stats and Five Card Draw's Settings
   go wide too. Only in the shortest windows may the Rules text still scroll; Close
   and the title never leave the screen. Phones (frame under 900px) unchanged. */
@media (min-width:900px){
  html body .panel-overlay{ padding:12px; }
  html body .panel-overlay .panel{ max-height:100%; }
  html body .panel-overlay .panel > .panel-close{ position:sticky; bottom:0; z-index:2; box-shadow:0 -10px 14px rgba(5,8,9,.85); background:#0b0f12; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; padding-top:16px; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  /* Five Card Draw's How to Play is prose in sections: the sections flow in columns
     inside .fcd-rules-body (the panel itself stays a normal block, so Close stays pinned) */
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body{ column-count:2; column-gap:32px; }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body > *{ break-inside:avoid; }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body > h3{ break-after:avoid; }
  html body #rulesOverlay .panel.fcd-rules-panel .rules-list{ column-count:1; }
  html body .panel-overlay .panel.fcd-settings-panel{ width:min(860px, 100%); max-width:none; }
  html body .panel-overlay .panel.fcd-settings-panel .fcd-settings-body{ column-count:2; column-gap:32px; }
  html body .panel-overlay .panel.fcd-settings-panel .fcd-settings-body > *{ break-inside:avoid; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-buttons{ display:flex; gap:12px; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-buttons > *{ flex:1 1 0; margin:0; }
  html body .panel-overlay .panel.ts-panel-card{ width:min(980px, 100%); max-width:none; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); column-gap:24px; align-items:start; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel > :first-child{ column-count:2; column-gap:24px; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel > :first-child > *{ break-inside:avoid; }
}
@media (min-width:1000px){
  /* pay tables (Caribbean Stud, Four Card, Three Card, UTH) beside the rules instead of under them */
  html body #rulesOverlay .panel:has(#rulesPaytables .pt){ width:min(1160px, 100%); display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); column-gap:28px; align-items:start; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) > *{ grid-column:1 / -1; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) > .rules-list{ grid-column:1; column-count:2; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) > #rulesPaytables{ grid-column:2; max-width:none; margin-top:0; }
  html body #rulesOverlay .panel.fcd-rules-panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body{ column-count:3; column-gap:28px; }
}
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); padding-top:12px; }
  html body #rulesOverlay .panel:not(:has(#rulesPaytables .pt)) .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body{ column-count:4; column-gap:24px; font-size:13px; line-height:1.4; }
  html body #rulesOverlay .panel.fcd-rules-panel .rules-list{ column-count:1; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) .rules-list li{ line-height:1.35; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) .rules-rg, html body #rulesOverlay .rules-edge{ font-size:11.5px; }
  html body .panel-overlay .panel.fcd-settings-panel .fcd-settings-body{ column-count:3; }
  html body .panel-overlay .panel.fcd-settings-panel{ width:min(1100px, 100%); }
}
@media (min-width:900px){
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body .rules-list{ column-count:1 !important; padding-left:16px; }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body p{ margin:0 0 6px; }
  html body #rulesOverlay .panel.fcd-rules-panel .fcd-rules-body h3{ margin:8px 0 3px; }
}
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel .sub{ margin-bottom:6px; }
  html body #rulesOverlay .rules-edge{ margin:0 0 8px; padding-top:6px; padding-bottom:6px; }
  html body #rulesOverlay .panel:has(#rulesPaytables .pt) .rules-list li{ margin-bottom:3px; }
}
/* the shortest desktop windows: tighter Settings and Stats (Five Card Draw has the most in them) */
@media (min-width:1000px) and (max-height:590px){
  html body .panel-overlay .panel.fcd-settings-panel{ padding-top:12px; }
  html body .panel-overlay .panel.fcd-settings-panel h2{ margin-bottom:2px; }
  html body .panel-overlay .panel.fcd-settings-panel .toggle-row{ padding:5px 0; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-hint{ font-size:11px; line-height:1.3; }
  html body .panel-overlay .panel.fcd-settings-panel .keyboard-list li{ margin:0 0 2px; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-sub{ margin:6px 0 4px; }
}
@media (min-width:1000px) and (max-height:440px){
  html body .panel-overlay .panel.ts-panel-card{ padding-top:10px; }
  html body .panel-overlay .panel.ts-panel-card h2{ margin-bottom:0; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel{ font-size:12px; line-height:15px; gap:8px; margin:2px 0; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel-actions{ margin-top:4px; }
  html body .panel-overlay .panel.fcd-settings-panel{ width:min(1200px, 100%); padding-top:8px; }
  html body .panel-overlay .panel.fcd-settings-panel .fcd-settings-body{ column-count:4; column-gap:22px; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-buttons .action{ padding-top:8px; padding-bottom:8px; }
  html body .panel-overlay .panel.fcd-settings-panel .toggle-row{ padding:3px 0; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-hint{ font-size:10.5px; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-sub{ margin:2px 0 2px; }
  html body .panel-overlay .panel.fcd-settings-panel .settings-buttons{ margin-top:4px; }
}
/* Five Card Draw's Stats (it has the most): three columns on desktop, session |
   this table and last hand | the last-20-hands log. Only the log may scroll, in
   its own column, once enough hands are played (Ronan 2026-10-27). */
@media (min-width:1000px){
  html body .panel-overlay .panel.fcd-stats-panel{ width:min(1160px, 100%); }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats{ grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto minmax(0,1fr); }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats > :first-child,
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats [data-ts="history,standings,recap"]{ display:contents; column-count:auto; }
  /* column 1: session, the extras, the last-20 strip; column 2: this table, last hand; column 3: the log */
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats [data-ts="stats"]{ grid-column:1; grid-row:1; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats .fcd-extra{ grid-column:1; grid-row:2; align-self:start; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats .ts-history{ grid-column:1; grid-row:3; align-self:start; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats .ts-standings{ grid-column:2; grid-row:1; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats .ts-recap{ grid-column:2; grid-row:2 / span 2; align-self:start; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats #historyList{ grid-column:3; grid-row:1 / span 3; min-height:0; max-height:100%; align-self:stretch; overflow-y:auto; }
}
@media (min-width:1000px) and (max-height:619px){
  html body .panel-overlay .panel.fcd-stats-panel{ padding-top:10px; }
  html body .panel-overlay .panel.fcd-stats-panel h2{ margin-bottom:0; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats{ font-size:12px; line-height:15px; row-gap:6px; margin:2px 0; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats [data-ts="history,standings,recap"] *{ line-height:15px !important; }
  html body .panel-overlay .panel.fcd-stats-panel #sessionStats [data-ts="history,standings,recap"] li{ margin:0 0 2px !important; padding-top:0 !important; padding-bottom:0 !important; }
  html body .panel-overlay .panel.fcd-stats-panel .ts-panel-actions{ margin-top:4px; }
}
/* the shortest windows: Reset stats moves up beside the Stats title, saving a row */
@media (min-width:1000px) and (max-height:440px){
  html body .panel-overlay .panel.ts-panel-card{ position:relative; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel-actions{ position:absolute; top:8px; right:22px; margin:0; }
  html body .panel-overlay .panel.ts-panel-card .ts-panel-actions .action{ padding:6px 14px; min-height:0; font-size:12px; }
  html body .panel-overlay .panel.ts-panel-card, html body .panel-overlay .panel.fcd-settings-panel{ padding-top:6px; }
  html body .panel-overlay .panel.ts-panel-card > h2, html body .panel-overlay .panel.fcd-settings-panel > h2{ font-size:17px; margin:0 0 2px; }
  html body .panel-overlay .panel.ts-panel-card > .panel-close, html body .panel-overlay .panel.fcd-settings-panel > .panel-close{ padding-top:7px; padding-bottom:7px; margin-top:6px; }
}

/* Suits draw as TEXT, never as iPhone colour emoji (Ronan 2026-11-01, Four Card and Let It
   Ride on his iPhone: clubs and spades drawn as emoji, bigger than the type and into the
   corners). The controllers add U+FE0E after every suit; this asks for a font that has the
   text glyphs. The centre suit is also held to a third of the card's width, as on the
   blackjacks (A8, 2026-10-07), so it keeps clear of the corners on a narrow phone card.
   Checked by casino-readability.js ("suit may draw as an iPhone emoji"). */
html body .card .card-corner, html body .card .card-centre-suit{ font-family:Inter, "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; font-variant-emoji:text; }
html body .card:not(.back) .card-centre-suit{ font-size:clamp(12px, min(calc(var(--card-h, 62px) * 0.29), calc(var(--card-w, 44px) * 0.32)), 38px) !important; }