/* ===== baccarat-banque (bq) ===== */
/* BACCARAT READABLE — the baccarat family's readability layer (decisions: Baccarat Banque Q2/Q1-Q8,
   Chemin de Fer Q2, Ronan 2026-10-07). Written in Baccarat Banque's names (bq); kit/casino/build.js
   expands it once per baccarat (bq, cdf) and every game gets the same file (byte-identical).
   No pale type: under 16px 7:1 and semi-bold; nothing under 12px; essentials at least 13px.
   A game's own elements are added in its section below, in its own names.
   Measured by harness/casino-readability.js. */

:root{
  --bjr-ink:#F6F2E8;      /* ivory: 7:1+ on the felt and on the plates */
  --bjr-gold:#FCE9BC;     /* bright gold */
  --bjr-win:#9BEAA6;
  --bjr-loss:#FFC2C9;
  --bjr-plate:rgba(4,14,18,.66);
  --bjr-plate-line:rgba(224,185,94,.28);
  /* the game's own palette tokens are NOT redefined: the brief (§5) fixes them
     value for value. Text that needs a brighter ink names --bjr-* instead. */
}

/* ---- semi-bold everywhere under 16px -------------------------------------- */
html body .game-frame, html body .panel{ font-weight:600; }

/* ---- the header buttons: solid gold, dark labels ---------------------------- */
html body .gold-icon-btn{
  min-height:44px;
  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 .ico{ color:#20160a !important; filter:grayscale(1) brightness(.25); }
html body .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;
  color:#20160a !important; font-weight:700 !important; opacity:1 !important;
}
html body .gold-icon-btn.coach-btn .btn-val{ color:#20160a !important; font-size:12px !important; }
@media (min-width:680px){
  html body .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.coach-btn .btn-val{ font-size:13px !important; }
}

/* ---- small print: 12px, semi-bold, bright, never faded -------------------------- */
html body #bqGame .bq-seat-label, html body #bqGame .spot-label, html body #bqGame .rack-label,
html body #bqGame .felt-stat label, html body #bqGame #bqBalance label, html body #bqGame .bq-limits label,
html body #bqGame #deckCountLabel, html body #bqGame #deckCountUnit,
html body #bqGame .bq-hand-name, html body #bqGame .bq-hand-status,
html body #bqGame .bq-tip, html body #bqGame .bq-notice, html body #bqGame .bq-hint, html body #bqGame .bq-hint-line, html body #bqGame .bq-count,
html body #bqGame .decision-btn .db-sub,
html body #bqGame footer, html body #bqGame footer span,
html body #bqGame .pt-row, html body #bqGame .pt-row *, html body #bqGame .pt-title, html body #bqGame .pt-foot,
html body #bqGame .bq-inline-rules li, html body #bqGame #rulesInlineTitle,
html body #bqGame .st-label, html body #bqGame .sr-label, html body #bqGame .sr-rate, html body #bqGame .sr-result, html body #bqGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #bqGame .bq-seat-label, html body #bqGame .spot-label, html body #bqGame .rack-label,
html body #bqGame .felt-stat label, html body #bqGame #bqBalance label, html body #bqGame .bq-limits label,
html body #bqGame #deckCountUnit, html body #bqGame .bq-hand-name,
html body #bqGame .bq-tip, html body #bqGame .bq-count, html body #bqGame footer, html body #bqGame footer span,
html body #bqGame .pt-row, html body #bqGame .pt-row span:not(.mono), html body #bqGame .pt-foot, html body #bqGame .bq-inline-rules li,
html body #bqGame .st-label, html body #bqGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #bqGame #deckCountLabel, html body #bqGame .pt-row .mono, html body #bqGame .pt-title, html body #bqGame #rulesInlineTitle,
html body #bqGame .bq-hint, html body #bqGame .bq-hint-line, html body #bqGame .bq-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #bqGame .pt-title, html body #bqGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #bqGame .pt-row .mono{ font-weight:700 !important; }
html body #bqGame .bq-tip{ font-style:normal !important; }
html body #bqGame .felt-stat label, html body #bqGame #bqBalance label, html body #bqGame .bq-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #bqGame #bqInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #bqGame .felt-stat .val, html body #bqGame #lastWinVal, html body #bqGame #lastBetVal,
html body #bqGame .bq-limits .mono, html body #bqGame #minBetVal, html body #bqGame #maxBetVal,
html body #bqGame .bq-hand-wager, html body #bqGame .bq-hand-total, html body #bqGame #bqDealerTotal,
html body #bqGame .sr-stake, html body #bqGame .sr-returned, html body #bqGame .sr-delta, html body #bqGame .st-val, html body #bqGame #settleDealer,
html body #bqGame .decision-btn .db-label, html body #bqGame button.action{ opacity:1 !important; }
/* the floor where these come out smaller: every window but the roomy desktop */
@media (max-width:1199px), (max-height:699px){
  html body #bqGame #bqInstruction,
  html body #bqGame .felt-stat .val, html body #bqGame #lastWinVal, html body #bqGame #lastBetVal,
  html body #bqGame .bq-limits .mono, html body #bqGame #minBetVal, html body #bqGame #maxBetVal,
  html body #bqGame .bq-hand-wager, html body #bqGame .bq-hand-total, html body #bqGame #bqDealerTotal,
  html body #bqGame .sr-stake, html body #bqGame .sr-returned, html body #bqGame .sr-delta, html body #bqGame .st-val, html body #bqGame #settleDealer,
  html body #bqGame .decision-btn .db-label, html body #bqGame button.action{ font-size:13px !important; }
}
html body #bqGame .felt-stat .val, html body #bqGame #lastWinVal, html body #bqGame #lastBetVal,
html body #bqGame .bq-limits .mono, html body #bqGame .bq-hand-wager, html body #bqGame .sr-stake, html body #bqGame .sr-returned,
html body #bqGame .sr-delta, html body #bqGame .st-val{ font-size:13px !important; }
html body #bqGame .bq-hand-wager, html body #bqGame .bq-hand-total, html body #bqGame #bqDealerTotal, html body #bqGame #settleDealer,
html body #bqGame .felt-stat .val, html body #bqGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #bqGame .sr-stake, html body #bqGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #bqGame #lastWinVal.pos, html body #bqGame .sr-delta.win, html body #bqGame .st-val.win, html body #bqGame .sr-result.win, html body #bqGame .bq-hand-status.win{ color:var(--bjr-win) !important; }
html body #bqGame #lastWinVal.neg, html body #bqGame .sr-delta.loss, html body #bqGame .st-val.loss, html body #bqGame .sr-result.loss, html body #bqGame .bq-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #bqGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #bqGame .current-bet-val{ font-size:14px !important; color:var(--bjr-gold) !important; }

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

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #bqGame .bq-paytables{ opacity:1 !important; }
html body #bqGame .bq-inline-rules, html body #bqGame #feltPaytables .pt{
  background:var(--bjr-plate); border:1px solid var(--bjr-plate-line); border-radius:10px; padding:7px 10px; box-sizing:border-box;
}
html body:not([data-ui-phase="betting"]) #bqGame .bq-paytables{ opacity:1 !important; }

/* ---- contrast fixes, measured (draft 2) ------------------------------------------- */
/* nothing on the table is faded: the shoe line, and a hand waiting its turn (its
   dashed frame says it is waiting) */
html body #bqGame #bqShoe, html body #bqGame #bqShoe *, html body #bqGame .bq-player-hand,
html body #bqGame .bq-player-hand.pending, html body #bqGame .bq-player-hand.complete{ opacity:1 !important; }
/* the gold buttons: the brief's own two golds (§5), light end to dark end, so
   dark labels reach 7:1 without leaving the palette */
html body #bqGame .btn-deal, html body #bqGame .btn-hit, html body #bqGame #btnInsureYes, html body #bqGame #btnNextRound{
  background:linear-gradient(180deg, #e6cc8e 0%, #c9a75e 100%) !important; color:#150f05 !important;
}
/* the teal buttons: a shade deeper, so ivory reaches 7:1 */
html body #bqGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #bqGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #bqGame .chip.c500 .chip-face{ color:#4a3410 !important; }
/* the dealer's total on a small dark plate (it can sit over the felt's light) */
html body #bqGame .bq-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

/* ---- the essentials' floor inside buttons and the result ----------------------------- */
html body #bqGame .decision-btn .db-sub,
html body #bqGame .st-label, html body #bqGame .sr-label, html body #bqGame .sr-rate, html body #bqGame .sr-result,
html body #bqGame #settlementNote, html body #bqGame #settleDealer, html body #bqGame #insAmt{ font-size:13px !important; }
/* hand labels: rows tall enough for 12-13px type */
html body #bqGame .bq-hand-head, html body #bqGame .bq-hand-foot{ height:17px !important; line-height:17px; overflow:visible; }

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #bqGame .bq-hand-wager, html body #bqGame .bq-hand-status, html body #bqGame .bq-hand-name, html body #bqGame .bq-hand-total{ line-height:17px !important; }
html body #bqGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #bqGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #bqGame .gold-icon-btn{ padding:0 10px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* the header: five 44px buttons and the title on one row */
  html body #bqHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #bqSecondaryControls{ gap:4px !important; }
  html body #bqGame .gold-icon-btn{ padding:0 3px !important; }
  html body #bqHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #bqGame .bq-rail{ gap:8px !important; }
  html body #bqGame .bq-rail label, html body #bqGame #bqBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #bqGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #bqGame .settlement-total-row{ justify-content:space-between !important; }
}

/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --bq-vgap:2px; }
  html body #bqTable .felt-surface{ padding-bottom:4px !important; }
  html body #bqGame .bq-rail{ gap:6px !important; }
  html body #bqGame .bq-rail label, html body #bqGame #bqBalance label{ letter-spacing:0 !important; }
  html body #bqGame .bq-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #bqGame footer{ padding:0 8px 1px !important; }
  html body #bqGame .bq-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #bqGame .settlement-rows{ gap:0 !important; }
  html body #bqGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #bqGame .settlement-head, html body #bqGame .settlement-totals, html body #bqGame .settlement-total-row{ line-height:15px !important; }
}
/* sideways: the deck line starts after Last Win / Last Bet at their new size */
@media (max-height:480px) and (min-height:371px){
  html body #bqGame .bq-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #bqGame .bq-shoe * { line-height:13px !important; }
  html body #bqGame .bq-shoe{ height:13px !important; padding:0 !important; display:block !important; }
}
/* sideways: the header buttons at the phone size, clear of the balance beside them */
@media (max-height:480px){
  html body #bqGame .gold-icon-btn{ padding:0 5px !important; }
  html body #bqGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #bqGame .gold-icon-btn.coach-btn .btn-val{ font-size:12px !important; }
}
@media (max-height:480px){
  /* the 44px buttons need a 46px header (it was built for 40px buttons) */
  html body #bqHeader{ min-height:46px; padding-top:1px !important; padding-bottom:1px !important; align-items:center; }
}
/* desktop: the result at 13px — the label column holds INSURANCE, the head line is 16px */
@media (min-width:680px) and (min-height:481px){
  html body #bqGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #bqGame .settlement-head{ line-height:16px !important; }
  html body #bqGame .settlement-note{ line-height:16px !important; padding-top:0 !important; padding-bottom:0 !important; }
}
/* under 360 wide (may ship with known issues): the title a size smaller beside five buttons */
@media (max-width:359px) and (min-height:481px){
  html body #bqHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* fix 4: phones — the BALANCE label above its value, so the top line holds four-digit balances */
@media (max-width:679px) and (min-height:481px){
  html body #bqGame .bq-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #bqGame .bq-bank label{ line-height:14px !important; }
  html body #bqGame .bq-bank-val{ line-height:18px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* the Last Win / Last Bet line is 16px tall, so it clears the deck line under it */
  html body #bqGame .bq-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #bqGame .bq-rail .felt-stat *{ line-height:16px !important; }
}
/* fix 1 (Ronan, 2026-10-07 "14px rows"): with 3-4 split hands on a phone, the hand's label
   rows are 14px (12px type) and the stake 12px, so the cards never sit on the labels */
@media (max-width:679px) and (min-height:481px){
  html body #bqGame .bq-hands[data-count="3"] .bq-hand-head, html body #bqGame .bq-hands[data-count="3"] .bq-hand-foot,
  html body #bqGame .bq-hands[data-count="4"] .bq-hand-head, html body #bqGame .bq-hands[data-count="4"] .bq-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #bqGame .bq-hands[data-count="3"] .bq-hand-head *, html body #bqGame .bq-hands[data-count="3"] .bq-hand-foot *,
  html body #bqGame .bq-hands[data-count="4"] .bq-hand-head *, html body #bqGame .bq-hands[data-count="4"] .bq-hand-foot *{ line-height:14px !important; font-size:12px !important; }
}
/* fix 1, step 2 (Ronan, 2026-10-07 11:37): with 3-4 split hands on a phone the hands' cards
   are 40px wide (the one exception to the 44px minimum), so two rows of hands fit their space */
@media (max-width:679px) and (min-height:481px){
  /* on each hand's frame, not the hands area (whose height is worked out from the card size) */
  html body #bqGame .bq-hands[data-count="3"] .bq-player-hand, html body #bqGame .bq-hands[data-count="4"] .bq-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #bqGame .bq-hands[data-count="3"] .bq-player-hand, html body #bqGame .bq-hands[data-count="4"] .bq-player-hand{ gap:0 !important; padding-top:1px !important; padding-bottom:1px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* 3–4 hands: a 12px label's text box is 15px tall, so its row is 15px, and the frame's padding gives the room */
  html body #bqGame .bq-hands[data-count="3"] .bq-player-hand, html body #bqGame .bq-hands[data-count="4"] .bq-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #bqGame .bq-hands[data-count="3"] .bq-hand-head, html body #bqGame .bq-hands[data-count="4"] .bq-hand-head,
  html body #bqGame .bq-hands[data-count="3"] .bq-hand-foot, html body #bqGame .bq-hands[data-count="4"] .bq-hand-foot{ height:15px !important; min-height:15px !important; line-height:15px !important; }
}
/* ---- 330-wide phones (Android 360 in the site frame, 330x589). Ronan 2026-10-07: must be perfect;
   draft measured and shown 11:55, "thats ok" 11:58. Everything fits with no scroll, buttons stay 44px. ---- */
@media (max-width:359px) and (min-height:481px){
  :root{ --bq-band-h:120px; --bq-vgap:1px; }
  html body #bqGame .bq-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #bqDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #bqGame .bq-hand-head, html body #bqGame .bq-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #bqGame .bq-hand-head > :not(.bq-owner), html body #bqGame .bq-hand-foot *{ line-height:14px !important; }
  html body #bqHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #bqGame .bq-hand-wager{ font-size:12px !important; }
  html body #bqGame .settlement-head{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; }
  /* the frame around the table gives the 10px the page needed */
  html body #bqGame #bqHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #bqGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #bqTable .felt-surface{ padding-top:2px !important; padding-bottom:2px !important; }
  /* the top line holds $2,000 / $2,000 beside a $9,950 balance */
  html body #bqGame #bqLastHand.bq-rail{ gap:4px !important; }
  html body #bqGame #bqLastHand.bq-rail .felt-stat{ gap:3px !important; }

  html body #bqGame .bq-seat-label{ position:relative; top:2px; }
}
/* ---- the tip under the buttons keeps to its two-line slot on phones (13px leading, as the reason line, fix 2).
   Found at Atlantic City (four hands, a tie: "Hand 1: A tie at 17 returns your $25 stake without profit."),
   2px into the result panel at 15px leading. Nothing is clipped: a longer tip would show, and PH2 would fail. ---- */
@media (max-width:679px), (max-height:480px){
  html body #bqGame .bq-note-line .bq-tip{ line-height:13px !important; }
}
/* ---- phones (2026-10-07, found by readability at Atlantic City's build): "Dealer wins | Dealer result Blackjack"
   needs 290px of the heading's 276px at 330 and reaches the panel's padding at 360-363; the badge's side padding
   and the two gaps halve on every phone. Every word stays, same sizes (battery PH5). ---- */
@media (max-width:679px) and (min-height:481px){
  html body #bqGame .settlement-head{ gap:4px !important; }
  html body #bqGame .settlement-dealer{ gap:4px !important; }
  html body #bqGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===================== Baccarat Banque's own elements ===================== */
/* the seats: label, owner tag (YOU / a computer player and their style), the bank, the stakes */
html body #bqGame .bq-seat-label{ font-size:12px !important; letter-spacing:1.4px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #bqGame .bq-hand-name{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #bqGame .bq-owner{ font-size:12px !important; line-height:15px !important; padding:0 6px !important; letter-spacing:.4px !important;
  opacity:1 !important; color:var(--bjr-ink) !important; background:var(--bjr-plate) !important; border-color:var(--bjr-plate-line) !important; }
html body #bqGame .bq-owner.you{ background:#f1d58e !important; color:#20160a !important; border-color:#f9e3a6 !important; }
html body #bqGame .bq-owner-style{ font-size:12px !important; opacity:1 !important; }
html body #bqGame #bqBankerStake, html body #bqGame .bq-hand-wager{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #bqGame #bqYouLine{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #bqGame #bqLimitNote{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }

/* the stats columns (desktop) and the Stats panel */
html body #bqGame .ts-felt{ font-size:12px !important; line-height:15px !important; color:var(--bjr-ink) !important; }
html body #bqGame .ts-title{ font-size:12px !important; line-height:15px !important; letter-spacing:1.2px !important; color:var(--bjr-gold) !important; opacity:1 !important; }
html body .ts-sub, html body .ts-empty, html body .ts-keys, html body .ts-row > span:first-child, html body .ts-style{ font-size:12px !important; line-height:15px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body .ts-felt .mono{ font-size:12px !important; color:var(--bjr-ink) !important; }
html body .ts-felt .ts-pos{ color:var(--bjr-win) !important; } html body .ts-felt .ts-neg{ color:var(--bjr-loss) !important; }
/* the history marks: white letters at 7:1 on darker colours, 12px */
html body .ts-p{ background:#1d4377 !important; } html body .ts-b{ background:#7d1a25 !important; } html body .ts-t{ background:#1b5a2b !important; }
html body .ts-mark{ font-size:12px !important; line-height:12px !important; min-width:15px !important; height:15px !important; color:#fff !important; }
html body .ts-cell{ height:30px !important; }
html body .ts-cell .ts-mark{ height:auto !important; min-width:0 !important; }

/* the result panel: a computer seat's row is marked "not yours", not faded */
html body #bqGame .settlement-row.ai{ opacity:1 !important; }
html body #bqGame .settlement-row.ai span{ color:var(--bjr-ink) !important; }
html body #bqGame .sr-rate{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }

/* the seat panel */
html body .role-option-desc, html body #seatExplain{ opacity:1 !important; color:var(--bjr-ink) !important; }
html body #btnStartGame{ color:#20160a !important; font-size:15px !important; }

/* the result panel: one row per side at every size (two side by side collided at 13px),
   the Banker line wraps rather than being cut */
html body #bqGame .settlement-rows{ grid-template-columns:minmax(0,1fr) !important; gap:2px !important; }
html body #bqGame .settlement-row{ height:auto !important; min-height:18px; }
html body #bqGame .sr-rate{ font-size:13px !important; }
html body #bqGame .settlement-dealer{ white-space:normal !important; flex-wrap:wrap; row-gap:0; min-width:0; }
html body #bqGame #settleDealer{ white-space:normal; }
@media (min-width:680px) and (min-height:481px){
  html body #bqGame .settlement-row{ grid-template-columns:120px 60px 64px minmax(0,1fr) 64px 88px !important; }
  html body #bqGame .sr-returned, html body #bqGame .sr-delta{ text-align:right; justify-self:end; }
}
/* phones: each row on two lines (side, stake, result / the comparison, returned, net) */
@media (max-width:679px) and (min-height:481px){
  html body #bqGame .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  html body #bqGame .settlement-totals{ flex-direction:column; gap:0; }
  html body #bqGame .settlement-total-row{ justify-content:space-between; }
  html body #bqGame .settlement-row{ grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"l s r" "rt ret d"; row-gap:0 !important; column-gap:8px !important; }
  html body #bqGame .sr-label{ grid-area:l; } html body #bqGame .sr-stake{ grid-area:s; } html body #bqGame .sr-result{ grid-area:r; justify-self:end; }
  html body #bqGame .sr-rate{ grid-area:rt; } html body #bqGame .sr-returned{ grid-area:ret; } html body #bqGame .sr-delta{ grid-area:d; justify-self:end; }
}
/* sideways phones: the result rows on two lines in the narrow right column, as on phones;
   "You: <seat>" beside the shoe count on the top strip instead of over it */
@media (max-height:480px){
  html body #bqGame .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  html body #bqGame .settlement-totals{ flex-direction:column; gap:0; }
  html body #bqGame .settlement-total-row{ justify-content:space-between; }
  html body #bqGame .settlement-row{ grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"l s r" "rt ret d"; row-gap:0 !important; column-gap:6px !important; }
  html body #bqGame .sr-label{ grid-area:l; } html body #bqGame .sr-stake{ grid-area:s; } html body #bqGame .sr-result{ grid-area:r; justify-self:end; }
  html body #bqGame .sr-rate{ grid-area:rt; } html body #bqGame .sr-returned{ grid-area:ret; } html body #bqGame .sr-delta{ grid-area:d; justify-self:end; }
  html body #bqGame .bq-layout{ padding-top:22px !important; }
  html body #bqGame .bq-seat-row{ width:76px !important; }
  html body #bqGame .bq-total-pill{ white-space:nowrap !important; }
  html body #bqGame .decision-btn{ padding:0 2px !important; }
  /* the narrow result column: side and result on the first line; stake, comparison, returned, net on the second */
  html body #bqGame .settlement-row{ grid-template-columns:auto minmax(0,1fr) auto auto !important; grid-template-areas:"l l l r" "s rt ret d" !important; column-gap:6px !important; }   /* "Your third card" at 12px needs 96px of a 102px button */
  html body #bqGame #bqYouLine{ position:absolute; top:6px; left:390px; line-height:15px; white-space:nowrap; z-index:2; }
}
/* phones and sideways: the label rows hold 12px type on a 14px line (owner tags, Natural 8, the seat label) */
@media (max-width:679px), (max-height:480px){
  html body #bqGame .bq-hand-head, html body #bqGame .bq-hand-foot{ height:14px !important; }
  html body #bqGame .bq-hand-head > :not(.bq-owner), html body #bqGame .bq-hand-foot *{ line-height:14px !important; }
  html body #bqGame .bq-hand-head, html body #bqGame .bq-hand-foot, html body #bqGame .bq-seat-row{ align-items:center !important; }
  html body #bqGame .bq-owner{ line-height:12px !important; }   /* + its 1px border = 14px */
  html body #bqGame .bq-seat-label{ top:0 !important; }         /* the blackjacks' 2px nudge does not fit this row */
  html body #bqGame .bq-seat-row{ height:auto !important; min-height:14px; }
  html body #bqGame .bq-seat-row > :not(.bq-owner), html body #bqGame .bq-total-pill{ line-height:14px !important; }
}

/* ===================== Chemin de Fer's own elements (cdf names) ===================== */
/* the seat tags: name, balance, stake, role or result — 12px (the stake 13px), semi-bold, bright */
html body #cdfGame .cdf-seat-name, html body #cdfGame .cdf-seat-stack, html body #cdfGame .cdf-seat-style, html body #cdfGame .cdf-seat-tag{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #cdfGame .cdf-seat-name{ font-weight:700 !important; letter-spacing:.3px !important; }
html body #cdfGame .cdf-seat-stake{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #cdfGame .cdf-seat-tag{ letter-spacing:.3px !important; background:var(--bjr-plate) !important; border-color:var(--bjr-plate-line) !important; line-height:13px !important; }
html body #cdfGame .cdf-seat-line{ height:16px !important; line-height:16px !important; }
html body #cdfGame .cdf-seat{ height:auto !important; }
html body #cdfGame .cdf-seat-line > span:not(.cdf-seat-tag){ line-height:inherit !important; }
/* the tag (BANKER / PLAYS HAND / YOU, then the seat's result) at 12px: "PLAYS HAND" fits a third of a phone */
html body #cdfGame .cdf-seat-tag{ padding:0 3px !important; letter-spacing:0 !important; overflow:visible !important; text-overflow:clip !important; }
html body #cdfGame .cdf-shoe, html body #cdfGame .cdf-shoe *{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; letter-spacing:.3px !important; }
html body #cdfGame .cdf-shoe .mono{ color:var(--bjr-gold) !important; }
/* Q7: phones show a 6-seat table as two rows of three, names only on the seat (each player's style is in the
   Stats panel's standings); desktop keeps the style on the seat */
@media (max-width:679px), (max-height:480px){
  html body #cdfGame .cdf-seat-map[data-seat-count="6"]{ --seats:3 !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  /* a 4-seat table: two rows of two (four in a row leave no room for "$1,000 · $25") */
  html body #cdfGame .cdf-seat-map[data-seat-count="4"]{ --seats:2 !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html body #cdfGame .cdf-seat-style{ display:none !important; }
  html body #cdfGame .cdf-hand-name{ letter-spacing:.3px !important; }
  html body #cdfGame .cdf-hand-head{ gap:4px !important; }
}
/* phones: the top block on three 16px lines at the left — Bank and Covered, then Uncovered, then the deck
   count — with the balance (label above value) at the right; the seat tags on three 15px lines */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .cdf-rail{ display:grid !important; grid-template-columns:auto auto; justify-content:start; column-gap:10px !important; row-gap:0 !important; top:12px !important; left:16px !important; }
  html body #cdfGame .cdf-rail .felt-stat{ height:16px; line-height:16px; gap:4px !important; }
  html body #cdfGame .cdf-rail label{ letter-spacing:.3px !important; }
  html body #cdfGame .cdf-shoe{ top:44px !important; left:16px !important; line-height:16px !important; }
  html body #cdfGame .cdf-bank{ top:12px !important; right:16px !important; }
  html body #cdfGame .cdf-layout{ padding-top:64px !important; }
  html body #cdfGame .cdf-seat{ height:auto !important; padding:2px 5px !important; gap:0 !important; }
  html body #cdfGame .cdf-seat-line{ height:14px !important; line-height:14px !important; }
  /* "You: Banker" shares the deck-count line, at the right (saves its own 16px line) */
  html body #cdfGame #cdfYouLine{ position:absolute !important; top:44px !important; right:16px !important; line-height:16px !important; margin:0 !important; }
  /* the hand's owner tag: 4px side padding */
  html body #cdfGame .cdf-hand-head .cdf-owner{ padding:0 4px !important; letter-spacing:0 !important; overflow:visible !important; text-overflow:clip !important; }
}
/* Q9 (Ronan 2026-10-07 20:15): on phones each hand's stake sits on the hand's bottom line between its total and its
   status (TIE / Stands / Natural / Wins), so the header keeps PLAYER or BANKER and the full name of who plays it.
   cdf-controller.js moves the one element into .cdf-hand-foot on phones and back on desktop (never a copy). */
@media (max-width:679px){
  html body #cdfGame .cdf-hand-foot{ display:flex !important; justify-content:space-between !important; gap:4px !important; white-space:nowrap; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-wager{ flex:none; line-height:14px !important; margin:0 !important; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-total{ min-width:0; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-status{ flex:none !important; overflow:visible !important; max-width:none !important; }
}
/* sideways: the deck count under Bank / Covered / Uncovered, not over them; the result's detail may wrap */
@media (max-height:480px){
  html body #cdfGame .cdf-shoe{ top:24px !important; left:12px !important; line-height:16px !important; }
  html body #cdfGame .cdf-rail .felt-stat{ height:16px; line-height:16px; }
  html body #cdfGame .cdf-layout{ padding-top:42px !important; }
  html body #cdfGame .cdf-seat{ height:auto !important; padding:1px 4px !important; gap:0 !important; }
  html body #cdfGame .cdf-seat-line{ height:14px !important; line-height:14px !important; }
  html body #cdfGame .sr-rate{ white-space:normal !important; overflow:visible !important; }
}
/* short desktops: the stats columns' lines at 14px (12px type), so the standings of six players fit the felt */
@media (min-width:680px) and (max-height:700px) and (min-height:481px){
  html body #cdfGame .ts-felt, html body #cdfGame .ts-felt *{ line-height:13px !important; }
  html body #cdfGame .ts-felt{ gap:5px !important; }
}
/* sideways: the seats in one row (six or four across the table's width), so the chips keep their room; your
   three betting buttons (Sit Out, Go Banco, Place Bet) on one row */
@media (max-height:480px){
  html body[data-cdf-phase="betting"][data-my-turn="1"]{ --cdf-r-act:44px !important; }
  html body[data-cdf-phase="betting"][data-my-turn="1"] #cdfGame #punterBetRow{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:3px !important; }
  html body #cdfGame #punterBetRow #btnConfirmPunterBet{ grid-column:auto !important; }
  html body #cdfGame #punterBetRow .action{ padding:0 2px !important; font-size:12px !important; letter-spacing:0 !important; }
  /* "Banker's third card" under DRAW wraps inside the button (13px leading) rather than spilling out of it */
  html body #cdfGame #cdfDecision .decision-btn .db-sub{ white-space:normal !important; line-height:12px !important; }
  html body #cdfGame #cdfDecision .decision-btn .db-label{ line-height:15px !important; }
  html body #cdfGame .cdf-seat-map[data-seat-count="6"]{ --seats:6 !important; grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
  html body #cdfGame .cdf-seat-map[data-seat-count="4"]{ --seats:4 !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
/* the seat panel's small print */
html body #setupPanel .sub, html body #setupPanel .setup-stakes-label, html body #setupPanel .setup-stakes-val{ opacity:1 !important; color:var(--bjr-ink) !important; font-weight:600 !important; }

/* ===== chemin-de-fer (cdf) ===== */
/* BACCARAT READABLE — the baccarat family's readability layer (decisions: Baccarat Banque Q2/Q1-Q8,
   Chemin de Fer Q2, Ronan 2026-10-07). Written in Baccarat Banque's names (cdf); kit/casino/build.js
   expands it once per baccarat (cdf, cdf) and every game gets the same file (byte-identical).
   No pale type: under 16px 7:1 and semi-bold; nothing under 12px; essentials at least 13px.
   A game's own elements are added in its section below, in its own names.
   Measured by harness/casino-readability.js. */

:root{
  --bjr-ink:#F6F2E8;      /* ivory: 7:1+ on the felt and on the plates */
  --bjr-gold:#FCE9BC;     /* bright gold */
  --bjr-win:#9BEAA6;
  --bjr-loss:#FFC2C9;
  --bjr-plate:rgba(4,14,18,.66);
  --bjr-plate-line:rgba(224,185,94,.28);
  /* the game's own palette tokens are NOT redefined: the brief (§5) fixes them
     value for value. Text that needs a brighter ink names --bjr-* instead. */
}

/* ---- semi-bold everywhere under 16px -------------------------------------- */
html body .game-frame, html body .panel{ font-weight:600; }

/* ---- the header buttons: solid gold, dark labels ---------------------------- */
html body .gold-icon-btn{
  min-height:44px;
  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 .ico{ color:#20160a !important; filter:grayscale(1) brightness(.25); }
html body .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;
  color:#20160a !important; font-weight:700 !important; opacity:1 !important;
}
html body .gold-icon-btn.coach-btn .btn-val{ color:#20160a !important; font-size:12px !important; }
@media (min-width:680px){
  html body .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.coach-btn .btn-val{ font-size:13px !important; }
}

/* ---- small print: 12px, semi-bold, bright, never faded -------------------------- */
html body #cdfGame .cdf-seat-label, html body #cdfGame .spot-label, html body #cdfGame .rack-label,
html body #cdfGame .felt-stat label, html body #cdfGame #cdfBalance label, html body #cdfGame .cdf-limits label,
html body #cdfGame #deckCountLabel, html body #cdfGame #deckCountUnit,
html body #cdfGame .cdf-hand-name, html body #cdfGame .cdf-hand-status,
html body #cdfGame .cdf-tip, html body #cdfGame .cdf-notice, html body #cdfGame .cdf-hint, html body #cdfGame .cdf-hint-line, html body #cdfGame .cdf-count,
html body #cdfGame .decision-btn .db-sub,
html body #cdfGame footer, html body #cdfGame footer span,
html body #cdfGame .pt-row, html body #cdfGame .pt-row *, html body #cdfGame .pt-title, html body #cdfGame .pt-foot,
html body #cdfGame .cdf-inline-rules li, html body #cdfGame #rulesInlineTitle,
html body #cdfGame .st-label, html body #cdfGame .sr-label, html body #cdfGame .sr-rate, html body #cdfGame .sr-result, html body #cdfGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #cdfGame .cdf-seat-label, html body #cdfGame .spot-label, html body #cdfGame .rack-label,
html body #cdfGame .felt-stat label, html body #cdfGame #cdfBalance label, html body #cdfGame .cdf-limits label,
html body #cdfGame #deckCountUnit, html body #cdfGame .cdf-hand-name,
html body #cdfGame .cdf-tip, html body #cdfGame .cdf-count, html body #cdfGame footer, html body #cdfGame footer span,
html body #cdfGame .pt-row, html body #cdfGame .pt-row span:not(.mono), html body #cdfGame .pt-foot, html body #cdfGame .cdf-inline-rules li,
html body #cdfGame .st-label, html body #cdfGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #cdfGame #deckCountLabel, html body #cdfGame .pt-row .mono, html body #cdfGame .pt-title, html body #cdfGame #rulesInlineTitle,
html body #cdfGame .cdf-hint, html body #cdfGame .cdf-hint-line, html body #cdfGame .cdf-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #cdfGame .pt-title, html body #cdfGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #cdfGame .pt-row .mono{ font-weight:700 !important; }
html body #cdfGame .cdf-tip{ font-style:normal !important; }
html body #cdfGame .felt-stat label, html body #cdfGame #cdfBalance label, html body #cdfGame .cdf-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #cdfGame #cdfInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #cdfGame .felt-stat .val, html body #cdfGame #lastWinVal, html body #cdfGame #lastBetVal,
html body #cdfGame .cdf-limits .mono, html body #cdfGame #minBetVal, html body #cdfGame #maxBetVal,
html body #cdfGame .cdf-hand-wager, html body #cdfGame .cdf-hand-total, html body #cdfGame #cdfDealerTotal,
html body #cdfGame .sr-stake, html body #cdfGame .sr-returned, html body #cdfGame .sr-delta, html body #cdfGame .st-val, html body #cdfGame #settleDealer,
html body #cdfGame .decision-btn .db-label, html body #cdfGame button.action{ opacity:1 !important; }
/* the floor where these come out smaller: every window but the roomy desktop */
@media (max-width:1199px), (max-height:699px){
  html body #cdfGame #cdfInstruction,
  html body #cdfGame .felt-stat .val, html body #cdfGame #lastWinVal, html body #cdfGame #lastBetVal,
  html body #cdfGame .cdf-limits .mono, html body #cdfGame #minBetVal, html body #cdfGame #maxBetVal,
  html body #cdfGame .cdf-hand-wager, html body #cdfGame .cdf-hand-total, html body #cdfGame #cdfDealerTotal,
  html body #cdfGame .sr-stake, html body #cdfGame .sr-returned, html body #cdfGame .sr-delta, html body #cdfGame .st-val, html body #cdfGame #settleDealer,
  html body #cdfGame .decision-btn .db-label, html body #cdfGame button.action{ font-size:13px !important; }
}
html body #cdfGame .felt-stat .val, html body #cdfGame #lastWinVal, html body #cdfGame #lastBetVal,
html body #cdfGame .cdf-limits .mono, html body #cdfGame .cdf-hand-wager, html body #cdfGame .sr-stake, html body #cdfGame .sr-returned,
html body #cdfGame .sr-delta, html body #cdfGame .st-val{ font-size:13px !important; }
html body #cdfGame .cdf-hand-wager, html body #cdfGame .cdf-hand-total, html body #cdfGame #cdfDealerTotal, html body #cdfGame #settleDealer,
html body #cdfGame .felt-stat .val, html body #cdfGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #cdfGame .sr-stake, html body #cdfGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #cdfGame #lastWinVal.pos, html body #cdfGame .sr-delta.win, html body #cdfGame .st-val.win, html body #cdfGame .sr-result.win, html body #cdfGame .cdf-hand-status.win{ color:var(--bjr-win) !important; }
html body #cdfGame #lastWinVal.neg, html body #cdfGame .sr-delta.loss, html body #cdfGame .st-val.loss, html body #cdfGame .sr-result.loss, html body #cdfGame .cdf-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #cdfGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #cdfGame .current-bet-val{ font-size:14px !important; color:var(--bjr-gold) !important; }

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

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #cdfGame .cdf-paytables{ opacity:1 !important; }
html body #cdfGame .cdf-inline-rules, html body #cdfGame #feltPaytables .pt{
  background:var(--bjr-plate); border:1px solid var(--bjr-plate-line); border-radius:10px; padding:7px 10px; box-sizing:border-box;
}
html body:not([data-ui-phase="betting"]) #cdfGame .cdf-paytables{ opacity:1 !important; }

/* ---- contrast fixes, measured (draft 2) ------------------------------------------- */
/* nothing on the table is faded: the shoe line, and a hand waiting its turn (its
   dashed frame says it is waiting) */
html body #cdfGame #cdfShoe, html body #cdfGame #cdfShoe *, html body #cdfGame .cdf-player-hand,
html body #cdfGame .cdf-player-hand.pending, html body #cdfGame .cdf-player-hand.complete{ opacity:1 !important; }
/* the gold buttons: the brief's own two golds (§5), light end to dark end, so
   dark labels reach 7:1 without leaving the palette */
html body #cdfGame .btn-deal, html body #cdfGame .btn-hit, html body #cdfGame #btnInsureYes, html body #cdfGame #btnNextRound{
  background:linear-gradient(180deg, #e6cc8e 0%, #c9a75e 100%) !important; color:#150f05 !important;
}
/* the teal buttons: a shade deeper, so ivory reaches 7:1 */
html body #cdfGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #cdfGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #cdfGame .chip.c500 .chip-face{ color:#4a3410 !important; }
/* the dealer's total on a small dark plate (it can sit over the felt's light) */
html body #cdfGame .cdf-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

/* ---- the essentials' floor inside buttons and the result ----------------------------- */
html body #cdfGame .decision-btn .db-sub,
html body #cdfGame .st-label, html body #cdfGame .sr-label, html body #cdfGame .sr-rate, html body #cdfGame .sr-result,
html body #cdfGame #settlementNote, html body #cdfGame #settleDealer, html body #cdfGame #insAmt{ font-size:13px !important; }
/* hand labels: rows tall enough for 12-13px type */
html body #cdfGame .cdf-hand-head, html body #cdfGame .cdf-hand-foot{ height:17px !important; line-height:17px; overflow:visible; }

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #cdfGame .cdf-hand-wager, html body #cdfGame .cdf-hand-status, html body #cdfGame .cdf-hand-name, html body #cdfGame .cdf-hand-total{ line-height:17px !important; }
html body #cdfGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #cdfGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #cdfGame .gold-icon-btn{ padding:0 10px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* the header: five 44px buttons and the title on one row */
  html body #cdfHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #cdfSecondaryControls{ gap:4px !important; }
  html body #cdfGame .gold-icon-btn{ padding:0 3px !important; }
  html body #cdfHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #cdfGame .cdf-rail{ gap:8px !important; }
  html body #cdfGame .cdf-rail label, html body #cdfGame #cdfBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #cdfGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #cdfGame .settlement-total-row{ justify-content:space-between !important; }
}

/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --cdf-vgap:2px; }
  html body #cdfTable .felt-surface{ padding-bottom:4px !important; }
  html body #cdfGame .cdf-rail{ gap:6px !important; }
  html body #cdfGame .cdf-rail label, html body #cdfGame #cdfBalance label{ letter-spacing:0 !important; }
  html body #cdfGame .cdf-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame footer{ padding:0 8px 1px !important; }
  html body #cdfGame .cdf-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #cdfGame .settlement-rows{ gap:0 !important; }
  html body #cdfGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #cdfGame .settlement-head, html body #cdfGame .settlement-totals, html body #cdfGame .settlement-total-row{ line-height:15px !important; }
}
/* sideways: the deck line starts after Last Win / Last Bet at their new size */
@media (max-height:480px) and (min-height:371px){
  html body #cdfGame .cdf-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #cdfGame .cdf-shoe * { line-height:13px !important; }
  html body #cdfGame .cdf-shoe{ height:13px !important; padding:0 !important; display:block !important; }
}
/* sideways: the header buttons at the phone size, clear of the balance beside them */
@media (max-height:480px){
  html body #cdfGame .gold-icon-btn{ padding:0 5px !important; }
  html body #cdfGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #cdfGame .gold-icon-btn.coach-btn .btn-val{ font-size:12px !important; }
}
@media (max-height:480px){
  /* the 44px buttons need a 46px header (it was built for 40px buttons) */
  html body #cdfHeader{ min-height:46px; padding-top:1px !important; padding-bottom:1px !important; align-items:center; }
}
/* desktop: the result at 13px — the label column holds INSURANCE, the head line is 16px */
@media (min-width:680px) and (min-height:481px){
  html body #cdfGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #cdfGame .settlement-head{ line-height:16px !important; }
  html body #cdfGame .settlement-note{ line-height:16px !important; padding-top:0 !important; padding-bottom:0 !important; }
}
/* under 360 wide (may ship with known issues): the title a size smaller beside five buttons */
@media (max-width:359px) and (min-height:481px){
  html body #cdfHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* fix 4: phones — the BALANCE label above its value, so the top line holds four-digit balances */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .cdf-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #cdfGame .cdf-bank label{ line-height:14px !important; }
  html body #cdfGame .cdf-bank-val{ line-height:18px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* the Last Win / Last Bet line is 16px tall, so it clears the deck line under it */
  html body #cdfGame .cdf-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #cdfGame .cdf-rail .felt-stat *{ line-height:16px !important; }
}
/* fix 1 (Ronan, 2026-10-07 "14px rows"): with 3-4 split hands on a phone, the hand's label
   rows are 14px (12px type) and the stake 12px, so the cards never sit on the labels */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-head, html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-foot,
  html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-head, html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-head *, html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-foot *,
  html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-head *, html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-foot *{ line-height:14px !important; font-size:12px !important; }
}
/* fix 1, step 2 (Ronan, 2026-10-07 11:37): with 3-4 split hands on a phone the hands' cards
   are 40px wide (the one exception to the 44px minimum), so two rows of hands fit their space */
@media (max-width:679px) and (min-height:481px){
  /* on each hand's frame, not the hands area (whose height is worked out from the card size) */
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-player-hand, html body #cdfGame .cdf-hands[data-count="4"] .cdf-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-player-hand, html body #cdfGame .cdf-hands[data-count="4"] .cdf-player-hand{ gap:0 !important; padding-top:1px !important; padding-bottom:1px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* 3–4 hands: a 12px label's text box is 15px tall, so its row is 15px, and the frame's padding gives the room */
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-player-hand, html body #cdfGame .cdf-hands[data-count="4"] .cdf-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-head, html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-head,
  html body #cdfGame .cdf-hands[data-count="3"] .cdf-hand-foot, html body #cdfGame .cdf-hands[data-count="4"] .cdf-hand-foot{ height:15px !important; min-height:15px !important; line-height:15px !important; }
}
/* ---- 330-wide phones (Android 360 in the site frame, 330x589). Ronan 2026-10-07: must be perfect;
   draft measured and shown 11:55, "thats ok" 11:58. Everything fits with no scroll, buttons stay 44px. ---- */
@media (max-width:359px) and (min-height:481px){
  :root{ --cdf-band-h:120px; --cdf-vgap:1px; }
  html body #cdfGame .cdf-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #cdfDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #cdfGame .cdf-hand-head, html body #cdfGame .cdf-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #cdfGame .cdf-hand-head > :not(.cdf-owner), html body #cdfGame .cdf-hand-foot *{ line-height:14px !important; }
  html body #cdfHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #cdfGame .cdf-hand-wager{ font-size:12px !important; }
  html body #cdfGame .settlement-head{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; }
  /* the frame around the table gives the 10px the page needed */
  html body #cdfGame #cdfHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #cdfGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #cdfTable .felt-surface{ padding-top:2px !important; padding-bottom:2px !important; }
  /* the top line holds $2,000 / $2,000 beside a $9,950 balance */
  html body #cdfGame #cdfLastHand.cdf-rail{ gap:4px !important; }
  html body #cdfGame #cdfLastHand.cdf-rail .felt-stat{ gap:3px !important; }

  html body #cdfGame .cdf-seat-label{ position:relative; top:2px; }
}
/* ---- the tip under the buttons keeps to its two-line slot on phones (13px leading, as the reason line, fix 2).
   Found at Atlantic City (four hands, a tie: "Hand 1: A tie at 17 returns your $25 stake without profit."),
   2px into the result panel at 15px leading. Nothing is clipped: a longer tip would show, and PH2 would fail. ---- */
@media (max-width:679px), (max-height:480px){
  html body #cdfGame .cdf-note-line .cdf-tip{ line-height:13px !important; }
}
/* ---- phones (2026-10-07, found by readability at Atlantic City's build): "Dealer wins | Dealer result Blackjack"
   needs 290px of the heading's 276px at 330 and reaches the panel's padding at 360-363; the badge's side padding
   and the two gaps halve on every phone. Every word stays, same sizes (battery PH5). ---- */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .settlement-head{ gap:4px !important; }
  html body #cdfGame .settlement-dealer{ gap:4px !important; }
  html body #cdfGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===================== Baccarat Banque's own elements ===================== */
/* the seats: label, owner tag (YOU / a computer player and their style), the bank, the stakes */
html body #cdfGame .cdf-seat-label{ font-size:12px !important; letter-spacing:1.4px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #cdfGame .cdf-hand-name{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #cdfGame .cdf-owner{ font-size:12px !important; line-height:15px !important; padding:0 6px !important; letter-spacing:.4px !important;
  opacity:1 !important; color:var(--bjr-ink) !important; background:var(--bjr-plate) !important; border-color:var(--bjr-plate-line) !important; }
html body #cdfGame .cdf-owner.you{ background:#f1d58e !important; color:#20160a !important; border-color:#f9e3a6 !important; }
html body #cdfGame .cdf-owner-style{ font-size:12px !important; opacity:1 !important; }
html body #cdfGame #cdfBankerStake, html body #cdfGame .cdf-hand-wager{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #cdfGame #cdfYouLine{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #cdfGame #cdfLimitNote{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }

/* the stats columns (desktop) and the Stats panel */
html body #cdfGame .ts-felt{ font-size:12px !important; line-height:15px !important; color:var(--bjr-ink) !important; }
html body #cdfGame .ts-title{ font-size:12px !important; line-height:15px !important; letter-spacing:1.2px !important; color:var(--bjr-gold) !important; opacity:1 !important; }
html body .ts-sub, html body .ts-empty, html body .ts-keys, html body .ts-row > span:first-child, html body .ts-style{ font-size:12px !important; line-height:15px !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body .ts-felt .mono{ font-size:12px !important; color:var(--bjr-ink) !important; }
html body .ts-felt .ts-pos{ color:var(--bjr-win) !important; } html body .ts-felt .ts-neg{ color:var(--bjr-loss) !important; }
/* the history marks: white letters at 7:1 on darker colours, 12px */
html body .ts-p{ background:#1d4377 !important; } html body .ts-b{ background:#7d1a25 !important; } html body .ts-t{ background:#1b5a2b !important; }
html body .ts-mark{ font-size:12px !important; line-height:12px !important; min-width:15px !important; height:15px !important; color:#fff !important; }
html body .ts-cell{ height:30px !important; }
html body .ts-cell .ts-mark{ height:auto !important; min-width:0 !important; }

/* the result panel: a computer seat's row is marked "not yours", not faded */
html body #cdfGame .settlement-row.ai{ opacity:1 !important; }
html body #cdfGame .settlement-row.ai span{ color:var(--bjr-ink) !important; }
html body #cdfGame .sr-rate{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; }

/* the seat panel */
html body .role-option-desc, html body #seatExplain{ opacity:1 !important; color:var(--bjr-ink) !important; }
html body #btnStartGame{ color:#20160a !important; font-size:15px !important; }

/* the result panel: one row per side at every size (two side by side collided at 13px),
   the Banker line wraps rather than being cut */
html body #cdfGame .settlement-rows{ grid-template-columns:minmax(0,1fr) !important; gap:2px !important; }
html body #cdfGame .settlement-row{ height:auto !important; min-height:18px; }
html body #cdfGame .sr-rate{ font-size:13px !important; }
html body #cdfGame .settlement-dealer{ white-space:normal !important; flex-wrap:wrap; row-gap:0; min-width:0; }
html body #cdfGame #settleDealer{ white-space:normal; }
@media (min-width:680px) and (min-height:481px){
  html body #cdfGame .settlement-row{ grid-template-columns:120px 60px 64px minmax(0,1fr) 64px 88px !important; }
  html body #cdfGame .sr-returned, html body #cdfGame .sr-delta{ text-align:right; justify-self:end; }
}
/* phones: each row on two lines (side, stake, result / the comparison, returned, net) */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  html body #cdfGame .settlement-totals{ flex-direction:column; gap:0; }
  html body #cdfGame .settlement-total-row{ justify-content:space-between; }
  html body #cdfGame .settlement-row{ grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"l s r" "rt ret d"; row-gap:0 !important; column-gap:8px !important; }
  html body #cdfGame .sr-label{ grid-area:l; } html body #cdfGame .sr-stake{ grid-area:s; } html body #cdfGame .sr-result{ grid-area:r; justify-self:end; }
  html body #cdfGame .sr-rate{ grid-area:rt; } html body #cdfGame .sr-returned{ grid-area:ret; } html body #cdfGame .sr-delta{ grid-area:d; justify-self:end; }
}
/* sideways phones: the result rows on two lines in the narrow right column, as on phones;
   "You: <seat>" beside the shoe count on the top strip instead of over it */
@media (max-height:480px){
  html body #cdfGame .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  html body #cdfGame .settlement-totals{ flex-direction:column; gap:0; }
  html body #cdfGame .settlement-total-row{ justify-content:space-between; }
  html body #cdfGame .settlement-row{ grid-template-columns:minmax(0,1fr) auto auto !important; grid-template-areas:"l s r" "rt ret d"; row-gap:0 !important; column-gap:6px !important; }
  html body #cdfGame .sr-label{ grid-area:l; } html body #cdfGame .sr-stake{ grid-area:s; } html body #cdfGame .sr-result{ grid-area:r; justify-self:end; }
  html body #cdfGame .sr-rate{ grid-area:rt; } html body #cdfGame .sr-returned{ grid-area:ret; } html body #cdfGame .sr-delta{ grid-area:d; justify-self:end; }
  html body #cdfGame .cdf-layout{ padding-top:22px !important; }
  html body #cdfGame .cdf-seat-row{ width:76px !important; }
  html body #cdfGame .cdf-total-pill{ white-space:nowrap !important; }
  html body #cdfGame .decision-btn{ padding:0 2px !important; }
  /* the narrow result column: side and result on the first line; stake, comparison, returned, net on the second */
  html body #cdfGame .settlement-row{ grid-template-columns:auto minmax(0,1fr) auto auto !important; grid-template-areas:"l l l r" "s rt ret d" !important; column-gap:6px !important; }   /* "Your third card" at 12px needs 96px of a 102px button */
  html body #cdfGame #cdfYouLine{ position:absolute; top:6px; left:390px; line-height:15px; white-space:nowrap; z-index:2; }
}
/* phones and sideways: the label rows hold 12px type on a 14px line (owner tags, Natural 8, the seat label) */
@media (max-width:679px), (max-height:480px){
  html body #cdfGame .cdf-hand-head, html body #cdfGame .cdf-hand-foot{ height:14px !important; }
  html body #cdfGame .cdf-hand-head > :not(.cdf-owner), html body #cdfGame .cdf-hand-foot *{ line-height:14px !important; }
  html body #cdfGame .cdf-hand-head, html body #cdfGame .cdf-hand-foot, html body #cdfGame .cdf-seat-row{ align-items:center !important; }
  html body #cdfGame .cdf-owner{ line-height:12px !important; }   /* + its 1px border = 14px */
  html body #cdfGame .cdf-seat-label{ top:0 !important; }         /* the blackjacks' 2px nudge does not fit this row */
  html body #cdfGame .cdf-seat-row{ height:auto !important; min-height:14px; }
  html body #cdfGame .cdf-seat-row > :not(.cdf-owner), html body #cdfGame .cdf-total-pill{ line-height:14px !important; }
}

/* ===================== Chemin de Fer's own elements (cdf names) ===================== */
/* the seat tags: name, balance, stake, role or result — 12px (the stake 13px), semi-bold, bright */
html body #cdfGame .cdf-seat-name, html body #cdfGame .cdf-seat-stack, html body #cdfGame .cdf-seat-style, html body #cdfGame .cdf-seat-tag{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important; color:var(--bjr-ink) !important; }
html body #cdfGame .cdf-seat-name{ font-weight:700 !important; letter-spacing:.3px !important; }
html body #cdfGame .cdf-seat-stake{ font-size:13px !important; opacity:1 !important; color:var(--bjr-gold) !important; }
html body #cdfGame .cdf-seat-tag{ letter-spacing:.3px !important; background:var(--bjr-plate) !important; border-color:var(--bjr-plate-line) !important; line-height:13px !important; }
html body #cdfGame .cdf-seat-line{ height:16px !important; line-height:16px !important; }
html body #cdfGame .cdf-seat{ height:auto !important; }
html body #cdfGame .cdf-seat-line > span:not(.cdf-seat-tag){ line-height:inherit !important; }
/* the tag (BANKER / PLAYS HAND / YOU, then the seat's result) at 12px: "PLAYS HAND" fits a third of a phone */
html body #cdfGame .cdf-seat-tag{ padding:0 3px !important; letter-spacing:0 !important; overflow:visible !important; text-overflow:clip !important; }
html body #cdfGame .cdf-shoe, html body #cdfGame .cdf-shoe *{ font-size:12px !important; opacity:1 !important; color:var(--bjr-ink) !important; letter-spacing:.3px !important; }
html body #cdfGame .cdf-shoe .mono{ color:var(--bjr-gold) !important; }
/* Q7: phones show a 6-seat table as two rows of three, names only on the seat (each player's style is in the
   Stats panel's standings); desktop keeps the style on the seat */
@media (max-width:679px), (max-height:480px){
  html body #cdfGame .cdf-seat-map[data-seat-count="6"]{ --seats:3 !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  /* a 4-seat table: two rows of two (four in a row leave no room for "$1,000 · $25") */
  html body #cdfGame .cdf-seat-map[data-seat-count="4"]{ --seats:2 !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html body #cdfGame .cdf-seat-style{ display:none !important; }
  html body #cdfGame .cdf-hand-name{ letter-spacing:.3px !important; }
  html body #cdfGame .cdf-hand-head{ gap:4px !important; }
}
/* phones: the top block on three 16px lines at the left — Bank and Covered, then Uncovered, then the deck
   count — with the balance (label above value) at the right; the seat tags on three 15px lines */
@media (max-width:679px) and (min-height:481px){
  html body #cdfGame .cdf-rail{ display:grid !important; grid-template-columns:auto auto; justify-content:start; column-gap:10px !important; row-gap:0 !important; top:12px !important; left:16px !important; }
  html body #cdfGame .cdf-rail .felt-stat{ height:16px; line-height:16px; gap:4px !important; }
  html body #cdfGame .cdf-rail label{ letter-spacing:.3px !important; }
  html body #cdfGame .cdf-shoe{ top:44px !important; left:16px !important; line-height:16px !important; }
  html body #cdfGame .cdf-bank{ top:12px !important; right:16px !important; }
  html body #cdfGame .cdf-layout{ padding-top:64px !important; }
  html body #cdfGame .cdf-seat{ height:auto !important; padding:2px 5px !important; gap:0 !important; }
  html body #cdfGame .cdf-seat-line{ height:14px !important; line-height:14px !important; }
  /* "You: Banker" shares the deck-count line, at the right (saves its own 16px line) */
  html body #cdfGame #cdfYouLine{ position:absolute !important; top:44px !important; right:16px !important; line-height:16px !important; margin:0 !important; }
  /* the hand's owner tag: 4px side padding */
  html body #cdfGame .cdf-hand-head .cdf-owner{ padding:0 4px !important; letter-spacing:0 !important; overflow:visible !important; text-overflow:clip !important; }
}
/* Q9 (Ronan 2026-10-07 20:15): on phones each hand's stake sits on the hand's bottom line between its total and its
   status (TIE / Stands / Natural / Wins), so the header keeps PLAYER or BANKER and the full name of who plays it.
   cdf-controller.js moves the one element into .cdf-hand-foot on phones and back on desktop (never a copy). */
@media (max-width:679px){
  html body #cdfGame .cdf-hand-foot{ display:flex !important; justify-content:space-between !important; gap:4px !important; white-space:nowrap; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-wager{ flex:none; line-height:14px !important; margin:0 !important; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-total{ min-width:0; }
  html body #cdfGame .cdf-hand-foot .cdf-hand-status{ flex:none !important; overflow:visible !important; max-width:none !important; }
}
/* sideways: the deck count under Bank / Covered / Uncovered, not over them; the result's detail may wrap */
@media (max-height:480px){
  html body #cdfGame .cdf-shoe{ top:24px !important; left:12px !important; line-height:16px !important; }
  html body #cdfGame .cdf-rail .felt-stat{ height:16px; line-height:16px; }
  html body #cdfGame .cdf-layout{ padding-top:42px !important; }
  html body #cdfGame .cdf-seat{ height:auto !important; padding:1px 4px !important; gap:0 !important; }
  html body #cdfGame .cdf-seat-line{ height:14px !important; line-height:14px !important; }
  html body #cdfGame .sr-rate{ white-space:normal !important; overflow:visible !important; }
}
/* short desktops: the stats columns' lines at 14px (12px type), so the standings of six players fit the felt */
@media (min-width:680px) and (max-height:700px) and (min-height:481px){
  html body #cdfGame .ts-felt, html body #cdfGame .ts-felt *{ line-height:13px !important; }
  html body #cdfGame .ts-felt{ gap:5px !important; }
}
/* sideways: the seats in one row (six or four across the table's width), so the chips keep their room; your
   three betting buttons (Sit Out, Go Banco, Place Bet) on one row */
@media (max-height:480px){
  html body[data-cdf-phase="betting"][data-my-turn="1"]{ --cdf-r-act:44px !important; }
  html body[data-cdf-phase="betting"][data-my-turn="1"] #cdfGame #punterBetRow{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:3px !important; }
  html body #cdfGame #punterBetRow #btnConfirmPunterBet{ grid-column:auto !important; }
  html body #cdfGame #punterBetRow .action{ padding:0 2px !important; font-size:12px !important; letter-spacing:0 !important; }
  /* "Banker's third card" under DRAW wraps inside the button (13px leading) rather than spilling out of it */
  html body #cdfGame #cdfDecision .decision-btn .db-sub{ white-space:normal !important; line-height:12px !important; }
  html body #cdfGame #cdfDecision .decision-btn .db-label{ line-height:15px !important; }
  html body #cdfGame .cdf-seat-map[data-seat-count="6"]{ --seats:6 !important; grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
  html body #cdfGame .cdf-seat-map[data-seat-count="4"]{ --seats:4 !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
/* the seat panel's small print */
html body #setupPanel .sub, html body #setupPanel .setup-stakes-label, html body #setupPanel .setup-stakes-val{ opacity:1 !important; color:var(--bjr-ink) !important; font-weight:600 !important; }