/* ===== european-blackjack (ebj) ===== */
/* BLACKJACK READABLE — the blackjack family's readability layer (Phase B,
   decisions A1, A2, A14; Ronan 2026-10-07). The poker treatment
   (casino-readable.css), for the blackjacks, loaded after each game's own
   sheet. Copied byte-identical into each blackjack by kit/casino/build.js.
     - nothing under 12px; the essentials (balance, instruction, result, bets,
       the action buttons) at least 13px; card corners follow the card-size
       rule instead (P2-2);
     - under 16px: 7:1 against what is drawn behind, and semi-bold (600)
       (no pale type, Ronan 2026-10-04);
     - the header buttons solid gold with dark labels, 44px targets;
     - small print on a dark plate; the felt keeps its colour (A14).
   Selectors name each blackjack's own classes; a blackjack joining the kit
   adds its names beside European Blackjack's.
   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 #ebjGame .ebj-seat-label, html body #ebjGame .spot-label, html body #ebjGame .rack-label,
html body #ebjGame .felt-stat label, html body #ebjGame #ebjBalance label, html body #ebjGame .ebj-limits label,
html body #ebjGame #deckCountLabel, html body #ebjGame #deckCountUnit,
html body #ebjGame .ebj-hand-name, html body #ebjGame .ebj-hand-status,
html body #ebjGame .ebj-tip, html body #ebjGame .ebj-notice, html body #ebjGame .ebj-hint, html body #ebjGame .ebj-hint-line, html body #ebjGame .ebj-count,
html body #ebjGame .decision-btn .db-sub,
html body #ebjGame footer, html body #ebjGame footer span,
html body #ebjGame .pt-row, html body #ebjGame .pt-row *, html body #ebjGame .pt-title, html body #ebjGame .pt-foot,
html body #ebjGame .ebj-inline-rules li, html body #ebjGame #rulesInlineTitle,
html body #ebjGame .st-label, html body #ebjGame .sr-label, html body #ebjGame .sr-rate, html body #ebjGame .sr-result, html body #ebjGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #ebjGame .ebj-seat-label, html body #ebjGame .spot-label, html body #ebjGame .rack-label,
html body #ebjGame .felt-stat label, html body #ebjGame #ebjBalance label, html body #ebjGame .ebj-limits label,
html body #ebjGame #deckCountUnit, html body #ebjGame .ebj-hand-name,
html body #ebjGame .ebj-tip, html body #ebjGame .ebj-count, html body #ebjGame footer, html body #ebjGame footer span,
html body #ebjGame .pt-row, html body #ebjGame .pt-row span:not(.mono), html body #ebjGame .pt-foot, html body #ebjGame .ebj-inline-rules li,
html body #ebjGame .st-label, html body #ebjGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #ebjGame #deckCountLabel, html body #ebjGame .pt-row .mono, html body #ebjGame .pt-title, html body #ebjGame #rulesInlineTitle,
html body #ebjGame .ebj-hint, html body #ebjGame .ebj-hint-line, html body #ebjGame .ebj-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #ebjGame .pt-title, html body #ebjGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #ebjGame .pt-row .mono{ font-weight:700 !important; }
html body #ebjGame .ebj-tip{ font-style:normal !important; }
html body #ebjGame .felt-stat label, html body #ebjGame #ebjBalance label, html body #ebjGame .ebj-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #ebjGame #ebjInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #ebjGame .felt-stat .val, html body #ebjGame #lastWinVal, html body #ebjGame #lastBetVal,
html body #ebjGame .ebj-limits .mono, html body #ebjGame #minBetVal, html body #ebjGame #maxBetVal,
html body #ebjGame .ebj-hand-wager, html body #ebjGame .ebj-hand-total, html body #ebjGame #ebjDealerTotal,
html body #ebjGame .sr-stake, html body #ebjGame .sr-returned, html body #ebjGame .sr-delta, html body #ebjGame .st-val, html body #ebjGame #settleDealer,
html body #ebjGame .decision-btn .db-label, html body #ebjGame 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 #ebjGame #ebjInstruction,
  html body #ebjGame .felt-stat .val, html body #ebjGame #lastWinVal, html body #ebjGame #lastBetVal,
  html body #ebjGame .ebj-limits .mono, html body #ebjGame #minBetVal, html body #ebjGame #maxBetVal,
  html body #ebjGame .ebj-hand-wager, html body #ebjGame .ebj-hand-total, html body #ebjGame #ebjDealerTotal,
  html body #ebjGame .sr-stake, html body #ebjGame .sr-returned, html body #ebjGame .sr-delta, html body #ebjGame .st-val, html body #ebjGame #settleDealer,
  html body #ebjGame .decision-btn .db-label, html body #ebjGame button.action{ font-size:13px !important; }
}
html body #ebjGame .felt-stat .val, html body #ebjGame #lastWinVal, html body #ebjGame #lastBetVal,
html body #ebjGame .ebj-limits .mono, html body #ebjGame .ebj-hand-wager, html body #ebjGame .sr-stake, html body #ebjGame .sr-returned,
html body #ebjGame .sr-delta, html body #ebjGame .st-val{ font-size:13px !important; }
html body #ebjGame .ebj-hand-wager, html body #ebjGame .ebj-hand-total, html body #ebjGame #ebjDealerTotal, html body #ebjGame #settleDealer,
html body #ebjGame .felt-stat .val, html body #ebjGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #ebjGame .sr-stake, html body #ebjGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #ebjGame #lastWinVal.pos, html body #ebjGame .sr-delta.win, html body #ebjGame .st-val.win, html body #ebjGame .sr-result.win, html body #ebjGame .ebj-hand-status.win{ color:var(--bjr-win) !important; }
html body #ebjGame #lastWinVal.neg, html body #ebjGame .sr-delta.loss, html body #ebjGame .st-val.loss, html body #ebjGame .sr-result.loss, html body #ebjGame .ebj-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #ebjGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #ebjGame .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 #ebjGame .chip .chip-face{ font-size:13px !important; }
html body #ebjGame .chip.c100 .chip-face, html body #ebjGame .chip.c500 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #ebjGame .ebj-paytables{ opacity:1 !important; }
html body #ebjGame .ebj-inline-rules, html body #ebjGame #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"]) #ebjGame .ebj-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 #ebjGame #ebjShoe, html body #ebjGame #ebjShoe *, html body #ebjGame .ebj-player-hand,
html body #ebjGame .ebj-player-hand.pending, html body #ebjGame .ebj-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 #ebjGame .btn-deal, html body #ebjGame .btn-hit, html body #ebjGame #btnInsureYes, html body #ebjGame #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 #ebjGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #ebjGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #ebjGame .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 #ebjGame .ebj-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

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

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #ebjGame .ebj-hand-wager, html body #ebjGame .ebj-hand-status, html body #ebjGame .ebj-hand-name, html body #ebjGame .ebj-hand-total{ line-height:17px !important; }
html body #ebjGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #ebjGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #ebjGame .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 #ebjHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #ebjSecondaryControls{ gap:4px !important; }
  html body #ebjGame .gold-icon-btn{ padding:0 3px !important; }
  html body #ebjHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #ebjGame .ebj-rail{ gap:8px !important; }
  html body #ebjGame .ebj-rail label, html body #ebjGame #ebjBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #ebjGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #ebjGame .settlement-total-row{ justify-content:space-between !important; }
}

/* ---- phones: decisions B1, B2, B4 (Ronan 2026-10-07) ------------------------------------ */
html body #ebjGame #ebjShoeCount, html body #ebjGame .ebj-result-reason{ display:none; }
@media (max-width:679px), (max-height:480px){
  /* B4: the count on the deck line, with Coach on */
  html body #ebjGame #ebjShoeCount{ display:inline; }
  /* B1: Hit and Stand without their explanation lines; Double and Split keep their amounts */
  html body #ebjGame #btnHit .db-sub, html body #ebjGame #btnStand .db-sub{ display:none !important; }
  /* B2: the result rows carry the hand, the stake, WIN/LOSS and the net... */
  html body #ebjGame .sr-rate, html body #ebjGame .sr-returned{ display:none !important; }
  html body #ebjGame .settlement-row{ grid-template-columns:64px auto auto minmax(0,1fr) !important; grid-template-areas:none !important; column-gap:8px !important; }
  html body #ebjGame .settlement-row > *{ grid-area:auto !important; }
  html body #ebjGame .sr-delta{ justify-self:end; }
  /* ...and the reason goes under the buttons (a Coach tip that explains the result takes that line) */
  html body #ebjGame .ebj-result-reason{ display:block; font-size:12px; font-weight:600; line-height:15px; color:var(--bjr-ink); text-align:center; }
  html body #ebjGame .ebj-result-reason:empty,
  html body #ebjGame .ebj-tip:not(:empty) ~ .ebj-result-reason,
  html body #ebjGame .ebj-notice.on ~ .ebj-result-reason{ display:none !important; }
}
html body #ebjGame #ebjShoeCount{ font-size:12px; font-weight:600; color:var(--bjr-gold); }
/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --ebj-vgap:2px; }
  html body #ebjTable .felt-surface{ padding-bottom:4px !important; }
  html body #ebjGame .ebj-rail{ gap:6px !important; }
  html body #ebjGame .ebj-rail label, html body #ebjGame #ebjBalance label{ letter-spacing:0 !important; }
  html body #ebjGame .ebj-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #ebjGame footer{ padding:0 8px 1px !important; }
  html body #ebjGame .ebj-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #ebjGame .settlement-rows{ gap:0 !important; }
  html body #ebjGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #ebjGame .settlement-head, html body #ebjGame .settlement-totals, html body #ebjGame .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 #ebjGame .ebj-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #ebjGame .ebj-shoe * { line-height:13px !important; }
  html body #ebjGame .ebj-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 #ebjGame .gold-icon-btn{ padding:0 5px !important; }
  html body #ebjGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #ebjGame .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 #ebjHeader{ 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 #ebjGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #ebjGame .settlement-head{ line-height:16px !important; }
  html body #ebjGame .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 #ebjHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* A8 (2026-10-07): the centre suit at 32% of the card width, so the corner indices
   clear it by 2px+ at every size (battery §10). Moved here from European's sheet
   so every blackjack has it. */
html body #ebjGame .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px) !important; line-height:1; }

/* ---- phone fixes, Ronan 2026-10-07 11:19 ("go ahead with fixes") ---------------------------- */
@media (max-width:679px), (max-height:480px){
  /* fix 2: the reason line keeps to two lines, inside the note line (13px leading) */
  html body #ebjGame .ebj-result-reason{ line-height:13px !important; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* fix 3: the result's label column as wide as its longest label (INSURANCE) */
  html body #ebjGame .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) !important; }
}
/* the hide rules above win over the two-line box */
@media (max-width:679px), (max-height:480px){
  html body #ebjGame .ebj-result-reason:empty,
  html body #ebjGame .ebj-tip:not(:empty) ~ .ebj-result-reason,
  html body #ebjGame .ebj-notice.on ~ .ebj-result-reason{ display:none !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 #ebjGame .ebj-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #ebjGame .ebj-bank label{ line-height:14px !important; }
  html body #ebjGame .ebj-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 #ebjGame .ebj-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #ebjGame .ebj-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 #ebjGame .ebj-hands[data-count="3"] .ebj-hand-head, html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-foot,
  html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-head, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-head *, html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-foot *,
  html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-head *, html body #ebjGame .ebj-hands[data-count="4"] .ebj-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 #ebjGame .ebj-hands[data-count="3"] .ebj-player-hand, html body #ebjGame .ebj-hands[data-count="4"] .ebj-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-player-hand, html body #ebjGame .ebj-hands[data-count="4"] .ebj-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 #ebjGame .ebj-hands[data-count="3"] .ebj-player-hand, html body #ebjGame .ebj-hands[data-count="4"] .ebj-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-head, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-head,
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-foot, html body #ebjGame .ebj-hands[data-count="4"] .ebj-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{ --ebj-band-h:120px; --ebj-vgap:1px; }
  html body #ebjGame .ebj-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #ebjDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #ebjGame .ebj-hand-head, html body #ebjGame .ebj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #ebjGame .ebj-hand-head *, html body #ebjGame .ebj-hand-foot *{ line-height:14px !important; }
  html body #ebjHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #ebjGame .ebj-hand-wager{ font-size:12px !important; }
  html body #ebjGame .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 #ebjGame #ebjHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #ebjGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #ebjTable .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 #ebjGame #ebjLastHand.ebj-rail{ gap:4px !important; }
  html body #ebjGame #ebjLastHand.ebj-rail .felt-stat{ gap:3px !important; }

  html body #ebjGame .ebj-seat-label{ position:relative; top:2px; }
}
/* 3-4 hands at 330: the 15px label rows win over the 14px rows above */
@media (max-width:359px) and (min-height:481px){
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-head, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-head,
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-foot, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-foot,
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-head *, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-head *,
  html body #ebjGame .ebj-hands[data-count="3"] .ebj-hand-foot *, html body #ebjGame .ebj-hands[data-count="4"] .ebj-hand-foot *{ height:15px; line-height:15px !important; }
}
/* ---- C3 (Atlantic City, Ronan 2026-10-07 12:53): a fifth button, Surrender. On phones the five stay on one row,
   each as wide as its word (at least 44px); Surrender's "Half back" line is not shown (as Hit and Stand's, B1).
   Tables without a Surrender button are not touched (:has). Spanish 21's is #btnSurrender (D3, 14:29). ---- */
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="player"] #ebjGame #ebjDecision:has(#ebjSurrender, #btnSurrender){ display:grid !important; grid-template-columns:repeat(5, auto) !important; justify-content:stretch !important; column-gap:4px !important; }
  html body #ebjGame #ebjDecision:has(#ebjSurrender, #btnSurrender) .decision-btn{ min-width:44px !important; padding-left:2px !important; padding-right:2px !important; }
  html body #ebjGame #ebjSurrender .db-sub, html body #ebjGame #btnSurrender .db-sub{ display:none !important; }
}
/* ---- 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 #ebjGame .ebj-note-line .ebj-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 #ebjGame .settlement-head{ gap:4px !important; }
  html body #ebjGame .settlement-dealer{ gap:4px !important; }
  html body #ebjGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===== single-card-blackjack (sdb) ===== */
/* BLACKJACK READABLE — the blackjack family's readability layer (Phase B,
   decisions A1, A2, A14; Ronan 2026-10-07). The poker treatment
   (casino-readable.css), for the blackjacks, loaded after each game's own
   sheet. Copied byte-identical into each blackjack by kit/casino/build.js.
     - nothing under 12px; the essentials (balance, instruction, result, bets,
       the action buttons) at least 13px; card corners follow the card-size
       rule instead (P2-2);
     - under 16px: 7:1 against what is drawn behind, and semi-bold (600)
       (no pale type, Ronan 2026-10-04);
     - the header buttons solid gold with dark labels, 44px targets;
     - small print on a dark plate; the felt keeps its colour (A14).
   Selectors name each blackjack's own classes; a blackjack joining the kit
   adds its names beside European Blackjack's.
   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 #sdbGame .sdb-seat-label, html body #sdbGame .spot-label, html body #sdbGame .rack-label,
html body #sdbGame .felt-stat label, html body #sdbGame #sdbBalance label, html body #sdbGame .sdb-limits label,
html body #sdbGame #deckCountLabel, html body #sdbGame #deckCountUnit,
html body #sdbGame .sdb-hand-name, html body #sdbGame .sdb-hand-status,
html body #sdbGame .sdb-tip, html body #sdbGame .sdb-notice, html body #sdbGame .sdb-hint, html body #sdbGame .sdb-hint-line, html body #sdbGame .sdb-count,
html body #sdbGame .decision-btn .db-sub,
html body #sdbGame footer, html body #sdbGame footer span,
html body #sdbGame .pt-row, html body #sdbGame .pt-row *, html body #sdbGame .pt-title, html body #sdbGame .pt-foot,
html body #sdbGame .sdb-inline-rules li, html body #sdbGame #rulesInlineTitle,
html body #sdbGame .st-label, html body #sdbGame .sr-label, html body #sdbGame .sr-rate, html body #sdbGame .sr-result, html body #sdbGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #sdbGame .sdb-seat-label, html body #sdbGame .spot-label, html body #sdbGame .rack-label,
html body #sdbGame .felt-stat label, html body #sdbGame #sdbBalance label, html body #sdbGame .sdb-limits label,
html body #sdbGame #deckCountUnit, html body #sdbGame .sdb-hand-name,
html body #sdbGame .sdb-tip, html body #sdbGame .sdb-count, html body #sdbGame footer, html body #sdbGame footer span,
html body #sdbGame .pt-row, html body #sdbGame .pt-row span:not(.mono), html body #sdbGame .pt-foot, html body #sdbGame .sdb-inline-rules li,
html body #sdbGame .st-label, html body #sdbGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #sdbGame #deckCountLabel, html body #sdbGame .pt-row .mono, html body #sdbGame .pt-title, html body #sdbGame #rulesInlineTitle,
html body #sdbGame .sdb-hint, html body #sdbGame .sdb-hint-line, html body #sdbGame .sdb-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #sdbGame .pt-title, html body #sdbGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #sdbGame .pt-row .mono{ font-weight:700 !important; }
html body #sdbGame .sdb-tip{ font-style:normal !important; }
html body #sdbGame .felt-stat label, html body #sdbGame #sdbBalance label, html body #sdbGame .sdb-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #sdbGame #sdbInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #sdbGame .felt-stat .val, html body #sdbGame #lastWinVal, html body #sdbGame #lastBetVal,
html body #sdbGame .sdb-limits .mono, html body #sdbGame #minBetVal, html body #sdbGame #maxBetVal,
html body #sdbGame .sdb-hand-wager, html body #sdbGame .sdb-hand-total, html body #sdbGame #sdbDealerTotal,
html body #sdbGame .sr-stake, html body #sdbGame .sr-returned, html body #sdbGame .sr-delta, html body #sdbGame .st-val, html body #sdbGame #settleDealer,
html body #sdbGame .decision-btn .db-label, html body #sdbGame 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 #sdbGame #sdbInstruction,
  html body #sdbGame .felt-stat .val, html body #sdbGame #lastWinVal, html body #sdbGame #lastBetVal,
  html body #sdbGame .sdb-limits .mono, html body #sdbGame #minBetVal, html body #sdbGame #maxBetVal,
  html body #sdbGame .sdb-hand-wager, html body #sdbGame .sdb-hand-total, html body #sdbGame #sdbDealerTotal,
  html body #sdbGame .sr-stake, html body #sdbGame .sr-returned, html body #sdbGame .sr-delta, html body #sdbGame .st-val, html body #sdbGame #settleDealer,
  html body #sdbGame .decision-btn .db-label, html body #sdbGame button.action{ font-size:13px !important; }
}
html body #sdbGame .felt-stat .val, html body #sdbGame #lastWinVal, html body #sdbGame #lastBetVal,
html body #sdbGame .sdb-limits .mono, html body #sdbGame .sdb-hand-wager, html body #sdbGame .sr-stake, html body #sdbGame .sr-returned,
html body #sdbGame .sr-delta, html body #sdbGame .st-val{ font-size:13px !important; }
html body #sdbGame .sdb-hand-wager, html body #sdbGame .sdb-hand-total, html body #sdbGame #sdbDealerTotal, html body #sdbGame #settleDealer,
html body #sdbGame .felt-stat .val, html body #sdbGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #sdbGame .sr-stake, html body #sdbGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #sdbGame #lastWinVal.pos, html body #sdbGame .sr-delta.win, html body #sdbGame .st-val.win, html body #sdbGame .sr-result.win, html body #sdbGame .sdb-hand-status.win{ color:var(--bjr-win) !important; }
html body #sdbGame #lastWinVal.neg, html body #sdbGame .sr-delta.loss, html body #sdbGame .st-val.loss, html body #sdbGame .sr-result.loss, html body #sdbGame .sdb-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #sdbGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #sdbGame .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 #sdbGame .chip .chip-face{ font-size:13px !important; }
html body #sdbGame .chip.c100 .chip-face, html body #sdbGame .chip.c500 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #sdbGame .sdb-paytables{ opacity:1 !important; }
html body #sdbGame .sdb-inline-rules, html body #sdbGame #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"]) #sdbGame .sdb-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 #sdbGame #sdbShoe, html body #sdbGame #sdbShoe *, html body #sdbGame .sdb-player-hand,
html body #sdbGame .sdb-player-hand.pending, html body #sdbGame .sdb-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 #sdbGame .btn-deal, html body #sdbGame .btn-hit, html body #sdbGame #btnInsureYes, html body #sdbGame #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 #sdbGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #sdbGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #sdbGame .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 #sdbGame .sdb-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

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

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #sdbGame .sdb-hand-wager, html body #sdbGame .sdb-hand-status, html body #sdbGame .sdb-hand-name, html body #sdbGame .sdb-hand-total{ line-height:17px !important; }
html body #sdbGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #sdbGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #sdbGame .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 #sdbHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #sdbSecondaryControls{ gap:4px !important; }
  html body #sdbGame .gold-icon-btn{ padding:0 3px !important; }
  html body #sdbHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #sdbGame .sdb-rail{ gap:8px !important; }
  html body #sdbGame .sdb-rail label, html body #sdbGame #sdbBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #sdbGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #sdbGame .settlement-total-row{ justify-content:space-between !important; }
}

/* ---- phones: decisions B1, B2, B4 (Ronan 2026-10-07) ------------------------------------ */
html body #sdbGame #sdbShoeCount, html body #sdbGame .sdb-result-reason{ display:none; }
@media (max-width:679px), (max-height:480px){
  /* B4: the count on the deck line, with Coach on */
  html body #sdbGame #sdbShoeCount{ display:inline; }
  /* B1: Hit and Stand without their explanation lines; Double and Split keep their amounts */
  html body #sdbGame #btnHit .db-sub, html body #sdbGame #btnStand .db-sub{ display:none !important; }
  /* B2: the result rows carry the hand, the stake, WIN/LOSS and the net... */
  html body #sdbGame .sr-rate, html body #sdbGame .sr-returned{ display:none !important; }
  html body #sdbGame .settlement-row{ grid-template-columns:64px auto auto minmax(0,1fr) !important; grid-template-areas:none !important; column-gap:8px !important; }
  html body #sdbGame .settlement-row > *{ grid-area:auto !important; }
  html body #sdbGame .sr-delta{ justify-self:end; }
  /* ...and the reason goes under the buttons (a Coach tip that explains the result takes that line) */
  html body #sdbGame .sdb-result-reason{ display:block; font-size:12px; font-weight:600; line-height:15px; color:var(--bjr-ink); text-align:center; }
  html body #sdbGame .sdb-result-reason:empty,
  html body #sdbGame .sdb-tip:not(:empty) ~ .sdb-result-reason,
  html body #sdbGame .sdb-notice.on ~ .sdb-result-reason{ display:none !important; }
}
html body #sdbGame #sdbShoeCount{ font-size:12px; font-weight:600; color:var(--bjr-gold); }
/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --sdb-vgap:2px; }
  html body #sdbTable .felt-surface{ padding-bottom:4px !important; }
  html body #sdbGame .sdb-rail{ gap:6px !important; }
  html body #sdbGame .sdb-rail label, html body #sdbGame #sdbBalance label{ letter-spacing:0 !important; }
  html body #sdbGame .sdb-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #sdbGame footer{ padding:0 8px 1px !important; }
  html body #sdbGame .sdb-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #sdbGame .settlement-rows{ gap:0 !important; }
  html body #sdbGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #sdbGame .settlement-head, html body #sdbGame .settlement-totals, html body #sdbGame .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 #sdbGame .sdb-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #sdbGame .sdb-shoe * { line-height:13px !important; }
  html body #sdbGame .sdb-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 #sdbGame .gold-icon-btn{ padding:0 5px !important; }
  html body #sdbGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #sdbGame .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 #sdbHeader{ 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 #sdbGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #sdbGame .settlement-head{ line-height:16px !important; }
  html body #sdbGame .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 #sdbHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* A8 (2026-10-07): the centre suit at 32% of the card width, so the corner indices
   clear it by 2px+ at every size (battery §10). Moved here from European's sheet
   so every blackjack has it. */
html body #sdbGame .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px) !important; line-height:1; }

/* ---- phone fixes, Ronan 2026-10-07 11:19 ("go ahead with fixes") ---------------------------- */
@media (max-width:679px), (max-height:480px){
  /* fix 2: the reason line keeps to two lines, inside the note line (13px leading) */
  html body #sdbGame .sdb-result-reason{ line-height:13px !important; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* fix 3: the result's label column as wide as its longest label (INSURANCE) */
  html body #sdbGame .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) !important; }
}
/* the hide rules above win over the two-line box */
@media (max-width:679px), (max-height:480px){
  html body #sdbGame .sdb-result-reason:empty,
  html body #sdbGame .sdb-tip:not(:empty) ~ .sdb-result-reason,
  html body #sdbGame .sdb-notice.on ~ .sdb-result-reason{ display:none !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 #sdbGame .sdb-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #sdbGame .sdb-bank label{ line-height:14px !important; }
  html body #sdbGame .sdb-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 #sdbGame .sdb-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #sdbGame .sdb-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 #sdbGame .sdb-hands[data-count="3"] .sdb-hand-head, html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-foot,
  html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-head, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-head *, html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-foot *,
  html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-head *, html body #sdbGame .sdb-hands[data-count="4"] .sdb-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 #sdbGame .sdb-hands[data-count="3"] .sdb-player-hand, html body #sdbGame .sdb-hands[data-count="4"] .sdb-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-player-hand, html body #sdbGame .sdb-hands[data-count="4"] .sdb-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 #sdbGame .sdb-hands[data-count="3"] .sdb-player-hand, html body #sdbGame .sdb-hands[data-count="4"] .sdb-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-head, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-head,
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-foot, html body #sdbGame .sdb-hands[data-count="4"] .sdb-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{ --sdb-band-h:120px; --sdb-vgap:1px; }
  html body #sdbGame .sdb-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #sdbDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #sdbGame .sdb-hand-head, html body #sdbGame .sdb-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #sdbGame .sdb-hand-head *, html body #sdbGame .sdb-hand-foot *{ line-height:14px !important; }
  html body #sdbHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #sdbGame .sdb-hand-wager{ font-size:12px !important; }
  html body #sdbGame .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 #sdbGame #sdbHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #sdbGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #sdbTable .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 #sdbGame #sdbLastHand.sdb-rail{ gap:4px !important; }
  html body #sdbGame #sdbLastHand.sdb-rail .felt-stat{ gap:3px !important; }

  html body #sdbGame .sdb-seat-label{ position:relative; top:2px; }
}
/* 3-4 hands at 330: the 15px label rows win over the 14px rows above */
@media (max-width:359px) and (min-height:481px){
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-head, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-head,
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-foot, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-foot,
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-head *, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-head *,
  html body #sdbGame .sdb-hands[data-count="3"] .sdb-hand-foot *, html body #sdbGame .sdb-hands[data-count="4"] .sdb-hand-foot *{ height:15px; line-height:15px !important; }
}
/* ---- C3 (Atlantic City, Ronan 2026-10-07 12:53): a fifth button, Surrender. On phones the five stay on one row,
   each as wide as its word (at least 44px); Surrender's "Half back" line is not shown (as Hit and Stand's, B1).
   Tables without a Surrender button are not touched (:has). Spanish 21's is #btnSurrender (D3, 14:29). ---- */
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="player"] #sdbGame #sdbDecision:has(#sdbSurrender, #btnSurrender){ display:grid !important; grid-template-columns:repeat(5, auto) !important; justify-content:stretch !important; column-gap:4px !important; }
  html body #sdbGame #sdbDecision:has(#sdbSurrender, #btnSurrender) .decision-btn{ min-width:44px !important; padding-left:2px !important; padding-right:2px !important; }
  html body #sdbGame #sdbSurrender .db-sub, html body #sdbGame #btnSurrender .db-sub{ display:none !important; }
}
/* ---- 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 #sdbGame .sdb-note-line .sdb-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 #sdbGame .settlement-head{ gap:4px !important; }
  html body #sdbGame .settlement-dealer{ gap:4px !important; }
  html body #sdbGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===== atlantic-city-blackjack (acbj) ===== */
/* BLACKJACK READABLE — the blackjack family's readability layer (Phase B,
   decisions A1, A2, A14; Ronan 2026-10-07). The poker treatment
   (casino-readable.css), for the blackjacks, loaded after each game's own
   sheet. Copied byte-identical into each blackjack by kit/casino/build.js.
     - nothing under 12px; the essentials (balance, instruction, result, bets,
       the action buttons) at least 13px; card corners follow the card-size
       rule instead (P2-2);
     - under 16px: 7:1 against what is drawn behind, and semi-bold (600)
       (no pale type, Ronan 2026-10-04);
     - the header buttons solid gold with dark labels, 44px targets;
     - small print on a dark plate; the felt keeps its colour (A14).
   Selectors name each blackjack's own classes; a blackjack joining the kit
   adds its names beside European Blackjack's.
   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 #acbjGame .acbj-seat-label, html body #acbjGame .spot-label, html body #acbjGame .rack-label,
html body #acbjGame .felt-stat label, html body #acbjGame #acbjBalance label, html body #acbjGame .acbj-limits label,
html body #acbjGame #deckCountLabel, html body #acbjGame #deckCountUnit,
html body #acbjGame .acbj-hand-name, html body #acbjGame .acbj-hand-status,
html body #acbjGame .acbj-tip, html body #acbjGame .acbj-notice, html body #acbjGame .acbj-hint, html body #acbjGame .acbj-hint-line, html body #acbjGame .acbj-count,
html body #acbjGame .decision-btn .db-sub,
html body #acbjGame footer, html body #acbjGame footer span,
html body #acbjGame .pt-row, html body #acbjGame .pt-row *, html body #acbjGame .pt-title, html body #acbjGame .pt-foot,
html body #acbjGame .acbj-inline-rules li, html body #acbjGame #rulesInlineTitle,
html body #acbjGame .st-label, html body #acbjGame .sr-label, html body #acbjGame .sr-rate, html body #acbjGame .sr-result, html body #acbjGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #acbjGame .acbj-seat-label, html body #acbjGame .spot-label, html body #acbjGame .rack-label,
html body #acbjGame .felt-stat label, html body #acbjGame #acbjBalance label, html body #acbjGame .acbj-limits label,
html body #acbjGame #deckCountUnit, html body #acbjGame .acbj-hand-name,
html body #acbjGame .acbj-tip, html body #acbjGame .acbj-count, html body #acbjGame footer, html body #acbjGame footer span,
html body #acbjGame .pt-row, html body #acbjGame .pt-row span:not(.mono), html body #acbjGame .pt-foot, html body #acbjGame .acbj-inline-rules li,
html body #acbjGame .st-label, html body #acbjGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #acbjGame #deckCountLabel, html body #acbjGame .pt-row .mono, html body #acbjGame .pt-title, html body #acbjGame #rulesInlineTitle,
html body #acbjGame .acbj-hint, html body #acbjGame .acbj-hint-line, html body #acbjGame .acbj-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #acbjGame .pt-title, html body #acbjGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #acbjGame .pt-row .mono{ font-weight:700 !important; }
html body #acbjGame .acbj-tip{ font-style:normal !important; }
html body #acbjGame .felt-stat label, html body #acbjGame #acbjBalance label, html body #acbjGame .acbj-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #acbjGame #acbjInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #acbjGame .felt-stat .val, html body #acbjGame #lastWinVal, html body #acbjGame #lastBetVal,
html body #acbjGame .acbj-limits .mono, html body #acbjGame #minBetVal, html body #acbjGame #maxBetVal,
html body #acbjGame .acbj-hand-wager, html body #acbjGame .acbj-hand-total, html body #acbjGame #acbjDealerTotal,
html body #acbjGame .sr-stake, html body #acbjGame .sr-returned, html body #acbjGame .sr-delta, html body #acbjGame .st-val, html body #acbjGame #settleDealer,
html body #acbjGame .decision-btn .db-label, html body #acbjGame 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 #acbjGame #acbjInstruction,
  html body #acbjGame .felt-stat .val, html body #acbjGame #lastWinVal, html body #acbjGame #lastBetVal,
  html body #acbjGame .acbj-limits .mono, html body #acbjGame #minBetVal, html body #acbjGame #maxBetVal,
  html body #acbjGame .acbj-hand-wager, html body #acbjGame .acbj-hand-total, html body #acbjGame #acbjDealerTotal,
  html body #acbjGame .sr-stake, html body #acbjGame .sr-returned, html body #acbjGame .sr-delta, html body #acbjGame .st-val, html body #acbjGame #settleDealer,
  html body #acbjGame .decision-btn .db-label, html body #acbjGame button.action{ font-size:13px !important; }
}
html body #acbjGame .felt-stat .val, html body #acbjGame #lastWinVal, html body #acbjGame #lastBetVal,
html body #acbjGame .acbj-limits .mono, html body #acbjGame .acbj-hand-wager, html body #acbjGame .sr-stake, html body #acbjGame .sr-returned,
html body #acbjGame .sr-delta, html body #acbjGame .st-val{ font-size:13px !important; }
html body #acbjGame .acbj-hand-wager, html body #acbjGame .acbj-hand-total, html body #acbjGame #acbjDealerTotal, html body #acbjGame #settleDealer,
html body #acbjGame .felt-stat .val, html body #acbjGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #acbjGame .sr-stake, html body #acbjGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #acbjGame #lastWinVal.pos, html body #acbjGame .sr-delta.win, html body #acbjGame .st-val.win, html body #acbjGame .sr-result.win, html body #acbjGame .acbj-hand-status.win{ color:var(--bjr-win) !important; }
html body #acbjGame #lastWinVal.neg, html body #acbjGame .sr-delta.loss, html body #acbjGame .st-val.loss, html body #acbjGame .sr-result.loss, html body #acbjGame .acbj-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #acbjGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #acbjGame .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 #acbjGame .chip .chip-face{ font-size:13px !important; }
html body #acbjGame .chip.c100 .chip-face, html body #acbjGame .chip.c500 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #acbjGame .acbj-paytables{ opacity:1 !important; }
html body #acbjGame .acbj-inline-rules, html body #acbjGame #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"]) #acbjGame .acbj-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 #acbjGame #acbjShoe, html body #acbjGame #acbjShoe *, html body #acbjGame .acbj-player-hand,
html body #acbjGame .acbj-player-hand.pending, html body #acbjGame .acbj-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 #acbjGame .btn-deal, html body #acbjGame .btn-hit, html body #acbjGame #btnInsureYes, html body #acbjGame #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 #acbjGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #acbjGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #acbjGame .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 #acbjGame .acbj-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

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

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #acbjGame .acbj-hand-wager, html body #acbjGame .acbj-hand-status, html body #acbjGame .acbj-hand-name, html body #acbjGame .acbj-hand-total{ line-height:17px !important; }
html body #acbjGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #acbjGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #acbjGame .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 #acbjHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #acbjSecondaryControls{ gap:4px !important; }
  html body #acbjGame .gold-icon-btn{ padding:0 3px !important; }
  html body #acbjHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #acbjGame .acbj-rail{ gap:8px !important; }
  html body #acbjGame .acbj-rail label, html body #acbjGame #acbjBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #acbjGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #acbjGame .settlement-total-row{ justify-content:space-between !important; }
}

/* ---- phones: decisions B1, B2, B4 (Ronan 2026-10-07) ------------------------------------ */
html body #acbjGame #acbjShoeCount, html body #acbjGame .acbj-result-reason{ display:none; }
@media (max-width:679px), (max-height:480px){
  /* B4: the count on the deck line, with Coach on */
  html body #acbjGame #acbjShoeCount{ display:inline; }
  /* B1: Hit and Stand without their explanation lines; Double and Split keep their amounts */
  html body #acbjGame #btnHit .db-sub, html body #acbjGame #btnStand .db-sub{ display:none !important; }
  /* B2: the result rows carry the hand, the stake, WIN/LOSS and the net... */
  html body #acbjGame .sr-rate, html body #acbjGame .sr-returned{ display:none !important; }
  html body #acbjGame .settlement-row{ grid-template-columns:64px auto auto minmax(0,1fr) !important; grid-template-areas:none !important; column-gap:8px !important; }
  html body #acbjGame .settlement-row > *{ grid-area:auto !important; }
  html body #acbjGame .sr-delta{ justify-self:end; }
  /* ...and the reason goes under the buttons (a Coach tip that explains the result takes that line) */
  html body #acbjGame .acbj-result-reason{ display:block; font-size:12px; font-weight:600; line-height:15px; color:var(--bjr-ink); text-align:center; }
  html body #acbjGame .acbj-result-reason:empty,
  html body #acbjGame .acbj-tip:not(:empty) ~ .acbj-result-reason,
  html body #acbjGame .acbj-notice.on ~ .acbj-result-reason{ display:none !important; }
}
html body #acbjGame #acbjShoeCount{ font-size:12px; font-weight:600; color:var(--bjr-gold); }
/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --acbj-vgap:2px; }
  html body #acbjTable .felt-surface{ padding-bottom:4px !important; }
  html body #acbjGame .acbj-rail{ gap:6px !important; }
  html body #acbjGame .acbj-rail label, html body #acbjGame #acbjBalance label{ letter-spacing:0 !important; }
  html body #acbjGame .acbj-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #acbjGame footer{ padding:0 8px 1px !important; }
  html body #acbjGame .acbj-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #acbjGame .settlement-rows{ gap:0 !important; }
  html body #acbjGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #acbjGame .settlement-head, html body #acbjGame .settlement-totals, html body #acbjGame .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 #acbjGame .acbj-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #acbjGame .acbj-shoe * { line-height:13px !important; }
  html body #acbjGame .acbj-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 #acbjGame .gold-icon-btn{ padding:0 5px !important; }
  html body #acbjGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #acbjGame .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 #acbjHeader{ 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 #acbjGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #acbjGame .settlement-head{ line-height:16px !important; }
  html body #acbjGame .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 #acbjHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* A8 (2026-10-07): the centre suit at 32% of the card width, so the corner indices
   clear it by 2px+ at every size (battery §10). Moved here from European's sheet
   so every blackjack has it. */
html body #acbjGame .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px) !important; line-height:1; }

/* ---- phone fixes, Ronan 2026-10-07 11:19 ("go ahead with fixes") ---------------------------- */
@media (max-width:679px), (max-height:480px){
  /* fix 2: the reason line keeps to two lines, inside the note line (13px leading) */
  html body #acbjGame .acbj-result-reason{ line-height:13px !important; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* fix 3: the result's label column as wide as its longest label (INSURANCE) */
  html body #acbjGame .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) !important; }
}
/* the hide rules above win over the two-line box */
@media (max-width:679px), (max-height:480px){
  html body #acbjGame .acbj-result-reason:empty,
  html body #acbjGame .acbj-tip:not(:empty) ~ .acbj-result-reason,
  html body #acbjGame .acbj-notice.on ~ .acbj-result-reason{ display:none !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 #acbjGame .acbj-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #acbjGame .acbj-bank label{ line-height:14px !important; }
  html body #acbjGame .acbj-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 #acbjGame .acbj-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #acbjGame .acbj-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 #acbjGame .acbj-hands[data-count="3"] .acbj-hand-head, html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-foot,
  html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-head, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-head *, html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-foot *,
  html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-head *, html body #acbjGame .acbj-hands[data-count="4"] .acbj-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 #acbjGame .acbj-hands[data-count="3"] .acbj-player-hand, html body #acbjGame .acbj-hands[data-count="4"] .acbj-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-player-hand, html body #acbjGame .acbj-hands[data-count="4"] .acbj-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 #acbjGame .acbj-hands[data-count="3"] .acbj-player-hand, html body #acbjGame .acbj-hands[data-count="4"] .acbj-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-head, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-head,
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-foot, html body #acbjGame .acbj-hands[data-count="4"] .acbj-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{ --acbj-band-h:120px; --acbj-vgap:1px; }
  html body #acbjGame .acbj-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #acbjDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #acbjGame .acbj-hand-head, html body #acbjGame .acbj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #acbjGame .acbj-hand-head *, html body #acbjGame .acbj-hand-foot *{ line-height:14px !important; }
  html body #acbjHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #acbjGame .acbj-hand-wager{ font-size:12px !important; }
  html body #acbjGame .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 #acbjGame #acbjHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #acbjGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #acbjTable .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 #acbjGame #acbjLastHand.acbj-rail{ gap:4px !important; }
  html body #acbjGame #acbjLastHand.acbj-rail .felt-stat{ gap:3px !important; }

  html body #acbjGame .acbj-seat-label{ position:relative; top:2px; }
}
/* 3-4 hands at 330: the 15px label rows win over the 14px rows above */
@media (max-width:359px) and (min-height:481px){
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-head, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-head,
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-foot, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-foot,
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-head *, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-head *,
  html body #acbjGame .acbj-hands[data-count="3"] .acbj-hand-foot *, html body #acbjGame .acbj-hands[data-count="4"] .acbj-hand-foot *{ height:15px; line-height:15px !important; }
}
/* ---- C3 (Atlantic City, Ronan 2026-10-07 12:53): a fifth button, Surrender. On phones the five stay on one row,
   each as wide as its word (at least 44px); Surrender's "Half back" line is not shown (as Hit and Stand's, B1).
   Tables without a Surrender button are not touched (:has). Spanish 21's is #btnSurrender (D3, 14:29). ---- */
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="player"] #acbjGame #acbjDecision:has(#acbjSurrender, #btnSurrender){ display:grid !important; grid-template-columns:repeat(5, auto) !important; justify-content:stretch !important; column-gap:4px !important; }
  html body #acbjGame #acbjDecision:has(#acbjSurrender, #btnSurrender) .decision-btn{ min-width:44px !important; padding-left:2px !important; padding-right:2px !important; }
  html body #acbjGame #acbjSurrender .db-sub, html body #acbjGame #btnSurrender .db-sub{ display:none !important; }
}
/* ---- 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 #acbjGame .acbj-note-line .acbj-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 #acbjGame .settlement-head{ gap:4px !important; }
  html body #acbjGame .settlement-dealer{ gap:4px !important; }
  html body #acbjGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===== spanish-21- (s21) ===== */
/* BLACKJACK READABLE — the blackjack family's readability layer (Phase B,
   decisions A1, A2, A14; Ronan 2026-10-07). The poker treatment
   (casino-readable.css), for the blackjacks, loaded after each game's own
   sheet. Copied byte-identical into each blackjack by kit/casino/build.js.
     - nothing under 12px; the essentials (balance, instruction, result, bets,
       the action buttons) at least 13px; card corners follow the card-size
       rule instead (P2-2);
     - under 16px: 7:1 against what is drawn behind, and semi-bold (600)
       (no pale type, Ronan 2026-10-04);
     - the header buttons solid gold with dark labels, 44px targets;
     - small print on a dark plate; the felt keeps its colour (A14).
   Selectors name each blackjack's own classes; a blackjack joining the kit
   adds its names beside European Blackjack's.
   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 #s21Game .s21-seat-label, html body #s21Game .spot-label, html body #s21Game .rack-label,
html body #s21Game .felt-stat label, html body #s21Game #s21Balance label, html body #s21Game .s21-limits label,
html body #s21Game #deckCountLabel, html body #s21Game #deckCountUnit,
html body #s21Game .s21-hand-name, html body #s21Game .s21-hand-status,
html body #s21Game .s21-tip, html body #s21Game .s21-notice, html body #s21Game .s21-hint, html body #s21Game .s21-hint-line, html body #s21Game .s21-count,
html body #s21Game .decision-btn .db-sub,
html body #s21Game footer, html body #s21Game footer span,
html body #s21Game .pt-row, html body #s21Game .pt-row *, html body #s21Game .pt-title, html body #s21Game .pt-foot,
html body #s21Game .s21-inline-rules li, html body #s21Game #rulesInlineTitle,
html body #s21Game .st-label, html body #s21Game .sr-label, html body #s21Game .sr-rate, html body #s21Game .sr-result, html body #s21Game #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #s21Game .s21-seat-label, html body #s21Game .spot-label, html body #s21Game .rack-label,
html body #s21Game .felt-stat label, html body #s21Game #s21Balance label, html body #s21Game .s21-limits label,
html body #s21Game #deckCountUnit, html body #s21Game .s21-hand-name,
html body #s21Game .s21-tip, html body #s21Game .s21-count, html body #s21Game footer, html body #s21Game footer span,
html body #s21Game .pt-row, html body #s21Game .pt-row span:not(.mono), html body #s21Game .pt-foot, html body #s21Game .s21-inline-rules li,
html body #s21Game .st-label, html body #s21Game .sr-rate{ color:var(--bjr-ink) !important; }
html body #s21Game #deckCountLabel, html body #s21Game .pt-row .mono, html body #s21Game .pt-title, html body #s21Game #rulesInlineTitle,
html body #s21Game .s21-hint, html body #s21Game .s21-hint-line, html body #s21Game .s21-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #s21Game .pt-title, html body #s21Game #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #s21Game .pt-row .mono{ font-weight:700 !important; }
html body #s21Game .s21-tip{ font-style:normal !important; }
html body #s21Game .felt-stat label, html body #s21Game #s21Balance label, html body #s21Game .s21-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #s21Game #s21Instruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #s21Game .felt-stat .val, html body #s21Game #lastWinVal, html body #s21Game #lastBetVal,
html body #s21Game .s21-limits .mono, html body #s21Game #minBetVal, html body #s21Game #maxBetVal,
html body #s21Game .s21-hand-wager, html body #s21Game .s21-hand-total, html body #s21Game #s21DealerTotal,
html body #s21Game .sr-stake, html body #s21Game .sr-returned, html body #s21Game .sr-delta, html body #s21Game .st-val, html body #s21Game #settleDealer,
html body #s21Game .decision-btn .db-label, html body #s21Game 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 #s21Game #s21Instruction,
  html body #s21Game .felt-stat .val, html body #s21Game #lastWinVal, html body #s21Game #lastBetVal,
  html body #s21Game .s21-limits .mono, html body #s21Game #minBetVal, html body #s21Game #maxBetVal,
  html body #s21Game .s21-hand-wager, html body #s21Game .s21-hand-total, html body #s21Game #s21DealerTotal,
  html body #s21Game .sr-stake, html body #s21Game .sr-returned, html body #s21Game .sr-delta, html body #s21Game .st-val, html body #s21Game #settleDealer,
  html body #s21Game .decision-btn .db-label, html body #s21Game button.action{ font-size:13px !important; }
}
html body #s21Game .felt-stat .val, html body #s21Game #lastWinVal, html body #s21Game #lastBetVal,
html body #s21Game .s21-limits .mono, html body #s21Game .s21-hand-wager, html body #s21Game .sr-stake, html body #s21Game .sr-returned,
html body #s21Game .sr-delta, html body #s21Game .st-val{ font-size:13px !important; }
html body #s21Game .s21-hand-wager, html body #s21Game .s21-hand-total, html body #s21Game #s21DealerTotal, html body #s21Game #settleDealer,
html body #s21Game .felt-stat .val, html body #s21Game #lastBetVal{ color:var(--bjr-gold) !important; }
html body #s21Game .sr-stake, html body #s21Game .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #s21Game #lastWinVal.pos, html body #s21Game .sr-delta.win, html body #s21Game .st-val.win, html body #s21Game .sr-result.win, html body #s21Game .s21-hand-status.win{ color:var(--bjr-win) !important; }
html body #s21Game #lastWinVal.neg, html body #s21Game .sr-delta.loss, html body #s21Game .st-val.loss, html body #s21Game .sr-result.loss, html body #s21Game .s21-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #s21Game #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #s21Game .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 #s21Game .chip .chip-face{ font-size:13px !important; }
html body #s21Game .chip.c100 .chip-face, html body #s21Game .chip.c500 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #s21Game .s21-paytables{ opacity:1 !important; }
html body #s21Game .s21-inline-rules, html body #s21Game #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"]) #s21Game .s21-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 #s21Game #s21Shoe, html body #s21Game #s21Shoe *, html body #s21Game .s21-player-hand,
html body #s21Game .s21-player-hand.pending, html body #s21Game .s21-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 #s21Game .btn-deal, html body #s21Game .btn-hit, html body #s21Game #btnInsureYes, html body #s21Game #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 #s21Game .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #s21Game .chip.c5 .chip-face{ color:#123f1a !important; }
html body #s21Game .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 #s21Game .s21-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

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

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #s21Game .s21-hand-wager, html body #s21Game .s21-hand-status, html body #s21Game .s21-hand-name, html body #s21Game .s21-hand-total{ line-height:17px !important; }
html body #s21Game .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #s21Game .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #s21Game .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 #s21Header{ gap:4px !important; padding:4px 8px !important; }
  html body #s21SecondaryControls{ gap:4px !important; }
  html body #s21Game .gold-icon-btn{ padding:0 3px !important; }
  html body #s21Header .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #s21Game .s21-rail{ gap:8px !important; }
  html body #s21Game .s21-rail label, html body #s21Game #s21Balance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #s21Game .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #s21Game .settlement-total-row{ justify-content:space-between !important; }
}

/* ---- phones: decisions B1, B2, B4 (Ronan 2026-10-07) ------------------------------------ */
html body #s21Game #s21ShoeCount, html body #s21Game .s21-result-reason{ display:none; }
@media (max-width:679px), (max-height:480px){
  /* B4: the count on the deck line, with Coach on */
  html body #s21Game #s21ShoeCount{ display:inline; }
  /* B1: Hit and Stand without their explanation lines; Double and Split keep their amounts */
  html body #s21Game #btnHit .db-sub, html body #s21Game #btnStand .db-sub{ display:none !important; }
  /* B2: the result rows carry the hand, the stake, WIN/LOSS and the net... */
  html body #s21Game .sr-rate, html body #s21Game .sr-returned{ display:none !important; }
  html body #s21Game .settlement-row{ grid-template-columns:64px auto auto minmax(0,1fr) !important; grid-template-areas:none !important; column-gap:8px !important; }
  html body #s21Game .settlement-row > *{ grid-area:auto !important; }
  html body #s21Game .sr-delta{ justify-self:end; }
  /* ...and the reason goes under the buttons (a Coach tip that explains the result takes that line) */
  html body #s21Game .s21-result-reason{ display:block; font-size:12px; font-weight:600; line-height:15px; color:var(--bjr-ink); text-align:center; }
  html body #s21Game .s21-result-reason:empty,
  html body #s21Game .s21-tip:not(:empty) ~ .s21-result-reason,
  html body #s21Game .s21-notice.on ~ .s21-result-reason{ display:none !important; }
}
html body #s21Game #s21ShoeCount{ font-size:12px; font-weight:600; color:var(--bjr-gold); }
/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --s21-vgap:2px; }
  html body #s21Table .felt-surface{ padding-bottom:4px !important; }
  html body #s21Game .s21-rail{ gap:6px !important; }
  html body #s21Game .s21-rail label, html body #s21Game #s21Balance label{ letter-spacing:0 !important; }
  html body #s21Game .s21-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #s21Game footer{ padding:0 8px 1px !important; }
  html body #s21Game .s21-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #s21Game .settlement-rows{ gap:0 !important; }
  html body #s21Game .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #s21Game .settlement-head, html body #s21Game .settlement-totals, html body #s21Game .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 #s21Game .s21-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #s21Game .s21-shoe * { line-height:13px !important; }
  html body #s21Game .s21-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 #s21Game .gold-icon-btn{ padding:0 5px !important; }
  html body #s21Game .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #s21Game .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 #s21Header{ 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 #s21Game .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #s21Game .settlement-head{ line-height:16px !important; }
  html body #s21Game .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 #s21Header .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* A8 (2026-10-07): the centre suit at 32% of the card width, so the corner indices
   clear it by 2px+ at every size (battery §10). Moved here from European's sheet
   so every blackjack has it. */
html body #s21Game .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px) !important; line-height:1; }

/* ---- phone fixes, Ronan 2026-10-07 11:19 ("go ahead with fixes") ---------------------------- */
@media (max-width:679px), (max-height:480px){
  /* fix 2: the reason line keeps to two lines, inside the note line (13px leading) */
  html body #s21Game .s21-result-reason{ line-height:13px !important; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* fix 3: the result's label column as wide as its longest label (INSURANCE) */
  html body #s21Game .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) !important; }
}
/* the hide rules above win over the two-line box */
@media (max-width:679px), (max-height:480px){
  html body #s21Game .s21-result-reason:empty,
  html body #s21Game .s21-tip:not(:empty) ~ .s21-result-reason,
  html body #s21Game .s21-notice.on ~ .s21-result-reason{ display:none !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 #s21Game .s21-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #s21Game .s21-bank label{ line-height:14px !important; }
  html body #s21Game .s21-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 #s21Game .s21-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #s21Game .s21-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 #s21Game .s21-hands[data-count="3"] .s21-hand-head, html body #s21Game .s21-hands[data-count="3"] .s21-hand-foot,
  html body #s21Game .s21-hands[data-count="4"] .s21-hand-head, html body #s21Game .s21-hands[data-count="4"] .s21-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-head *, html body #s21Game .s21-hands[data-count="3"] .s21-hand-foot *,
  html body #s21Game .s21-hands[data-count="4"] .s21-hand-head *, html body #s21Game .s21-hands[data-count="4"] .s21-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 #s21Game .s21-hands[data-count="3"] .s21-player-hand, html body #s21Game .s21-hands[data-count="4"] .s21-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #s21Game .s21-hands[data-count="3"] .s21-player-hand, html body #s21Game .s21-hands[data-count="4"] .s21-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 #s21Game .s21-hands[data-count="3"] .s21-player-hand, html body #s21Game .s21-hands[data-count="4"] .s21-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-head, html body #s21Game .s21-hands[data-count="4"] .s21-hand-head,
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-foot, html body #s21Game .s21-hands[data-count="4"] .s21-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{ --s21-band-h:120px; --s21-vgap:1px; }
  html body #s21Game .s21-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #s21Decision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #s21Game .s21-hand-head, html body #s21Game .s21-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #s21Game .s21-hand-head *, html body #s21Game .s21-hand-foot *{ line-height:14px !important; }
  html body #s21Header .title{ font-size:12px !important; line-height:15px !important; }
  html body #s21Game .s21-hand-wager{ font-size:12px !important; }
  html body #s21Game .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 #s21Game #s21Header{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #s21Game .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #s21Table .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 #s21Game #s21LastHand.s21-rail{ gap:4px !important; }
  html body #s21Game #s21LastHand.s21-rail .felt-stat{ gap:3px !important; }

  html body #s21Game .s21-seat-label{ position:relative; top:2px; }
}
/* 3-4 hands at 330: the 15px label rows win over the 14px rows above */
@media (max-width:359px) and (min-height:481px){
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-head, html body #s21Game .s21-hands[data-count="4"] .s21-hand-head,
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-foot, html body #s21Game .s21-hands[data-count="4"] .s21-hand-foot,
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-head *, html body #s21Game .s21-hands[data-count="4"] .s21-hand-head *,
  html body #s21Game .s21-hands[data-count="3"] .s21-hand-foot *, html body #s21Game .s21-hands[data-count="4"] .s21-hand-foot *{ height:15px; line-height:15px !important; }
}
/* ---- C3 (Atlantic City, Ronan 2026-10-07 12:53): a fifth button, Surrender. On phones the five stay on one row,
   each as wide as its word (at least 44px); Surrender's "Half back" line is not shown (as Hit and Stand's, B1).
   Tables without a Surrender button are not touched (:has). Spanish 21's is #btnSurrender (D3, 14:29). ---- */
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="player"] #s21Game #s21Decision:has(#s21Surrender, #btnSurrender){ display:grid !important; grid-template-columns:repeat(5, auto) !important; justify-content:stretch !important; column-gap:4px !important; }
  html body #s21Game #s21Decision:has(#s21Surrender, #btnSurrender) .decision-btn{ min-width:44px !important; padding-left:2px !important; padding-right:2px !important; }
  html body #s21Game #s21Surrender .db-sub, html body #s21Game #btnSurrender .db-sub{ display:none !important; }
}
/* ---- 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 #s21Game .s21-note-line .s21-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 #s21Game .settlement-head{ gap:4px !important; }
  html body #s21Game .settlement-dealer{ gap:4px !important; }
  html body #s21Game .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}

/* ===== vegas-strip-black (vsbj) ===== */
/* BLACKJACK READABLE — the blackjack family's readability layer (Phase B,
   decisions A1, A2, A14; Ronan 2026-10-07). The poker treatment
   (casino-readable.css), for the blackjacks, loaded after each game's own
   sheet. Copied byte-identical into each blackjack by kit/casino/build.js.
     - nothing under 12px; the essentials (balance, instruction, result, bets,
       the action buttons) at least 13px; card corners follow the card-size
       rule instead (P2-2);
     - under 16px: 7:1 against what is drawn behind, and semi-bold (600)
       (no pale type, Ronan 2026-10-04);
     - the header buttons solid gold with dark labels, 44px targets;
     - small print on a dark plate; the felt keeps its colour (A14).
   Selectors name each blackjack's own classes; a blackjack joining the kit
   adds its names beside European Blackjack's.
   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 #vsbjGame .vsbj-seat-label, html body #vsbjGame .spot-label, html body #vsbjGame .rack-label,
html body #vsbjGame .felt-stat label, html body #vsbjGame #vsbjBalance label, html body #vsbjGame .vsbj-limits label,
html body #vsbjGame #deckCountLabel, html body #vsbjGame #deckCountUnit,
html body #vsbjGame .vsbj-hand-name, html body #vsbjGame .vsbj-hand-status,
html body #vsbjGame .vsbj-tip, html body #vsbjGame .vsbj-notice, html body #vsbjGame .vsbj-hint, html body #vsbjGame .vsbj-hint-line, html body #vsbjGame .vsbj-count,
html body #vsbjGame .decision-btn .db-sub,
html body #vsbjGame footer, html body #vsbjGame footer span,
html body #vsbjGame .pt-row, html body #vsbjGame .pt-row *, html body #vsbjGame .pt-title, html body #vsbjGame .pt-foot,
html body #vsbjGame .vsbj-inline-rules li, html body #vsbjGame #rulesInlineTitle,
html body #vsbjGame .st-label, html body #vsbjGame .sr-label, html body #vsbjGame .sr-rate, html body #vsbjGame .sr-result, html body #vsbjGame #settlementNote{
  font-size:12px !important; font-weight:600 !important; opacity:1 !important;
}
html body #vsbjGame .vsbj-seat-label, html body #vsbjGame .spot-label, html body #vsbjGame .rack-label,
html body #vsbjGame .felt-stat label, html body #vsbjGame #vsbjBalance label, html body #vsbjGame .vsbj-limits label,
html body #vsbjGame #deckCountUnit, html body #vsbjGame .vsbj-hand-name,
html body #vsbjGame .vsbj-tip, html body #vsbjGame .vsbj-count, html body #vsbjGame footer, html body #vsbjGame footer span,
html body #vsbjGame .pt-row, html body #vsbjGame .pt-row span:not(.mono), html body #vsbjGame .pt-foot, html body #vsbjGame .vsbj-inline-rules li,
html body #vsbjGame .st-label, html body #vsbjGame .sr-rate{ color:var(--bjr-ink) !important; }
html body #vsbjGame #deckCountLabel, html body #vsbjGame .pt-row .mono, html body #vsbjGame .pt-title, html body #vsbjGame #rulesInlineTitle,
html body #vsbjGame .vsbj-hint, html body #vsbjGame .vsbj-hint-line, html body #vsbjGame .vsbj-hand-status:not(.win):not(.loss){ color:var(--bjr-gold) !important; }
html body #vsbjGame .pt-title, html body #vsbjGame #rulesInlineTitle{ font-weight:700 !important; letter-spacing:.12em !important; }
html body #vsbjGame .pt-row .mono{ font-weight:700 !important; }
html body #vsbjGame .vsbj-tip{ font-style:normal !important; }
html body #vsbjGame .felt-stat label, html body #vsbjGame #vsbjBalance label, html body #vsbjGame .vsbj-seat-label{ letter-spacing:.08em !important; }

/* ---- essentials: 13px ------------------------------------------------------------ */
html body #vsbjGame #vsbjInstruction{ font-weight:700 !important; color:var(--bjr-ink) !important; }
html body #vsbjGame .felt-stat .val, html body #vsbjGame #lastWinVal, html body #vsbjGame #lastBetVal,
html body #vsbjGame .vsbj-limits .mono, html body #vsbjGame #minBetVal, html body #vsbjGame #maxBetVal,
html body #vsbjGame .vsbj-hand-wager, html body #vsbjGame .vsbj-hand-total, html body #vsbjGame #vsbjDealerTotal,
html body #vsbjGame .sr-stake, html body #vsbjGame .sr-returned, html body #vsbjGame .sr-delta, html body #vsbjGame .st-val, html body #vsbjGame #settleDealer,
html body #vsbjGame .decision-btn .db-label, html body #vsbjGame 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 #vsbjGame #vsbjInstruction,
  html body #vsbjGame .felt-stat .val, html body #vsbjGame #lastWinVal, html body #vsbjGame #lastBetVal,
  html body #vsbjGame .vsbj-limits .mono, html body #vsbjGame #minBetVal, html body #vsbjGame #maxBetVal,
  html body #vsbjGame .vsbj-hand-wager, html body #vsbjGame .vsbj-hand-total, html body #vsbjGame #vsbjDealerTotal,
  html body #vsbjGame .sr-stake, html body #vsbjGame .sr-returned, html body #vsbjGame .sr-delta, html body #vsbjGame .st-val, html body #vsbjGame #settleDealer,
  html body #vsbjGame .decision-btn .db-label, html body #vsbjGame button.action{ font-size:13px !important; }
}
html body #vsbjGame .felt-stat .val, html body #vsbjGame #lastWinVal, html body #vsbjGame #lastBetVal,
html body #vsbjGame .vsbj-limits .mono, html body #vsbjGame .vsbj-hand-wager, html body #vsbjGame .sr-stake, html body #vsbjGame .sr-returned,
html body #vsbjGame .sr-delta, html body #vsbjGame .st-val{ font-size:13px !important; }
html body #vsbjGame .vsbj-hand-wager, html body #vsbjGame .vsbj-hand-total, html body #vsbjGame #vsbjDealerTotal, html body #vsbjGame #settleDealer,
html body #vsbjGame .felt-stat .val, html body #vsbjGame #lastBetVal{ color:var(--bjr-gold) !important; }
html body #vsbjGame .sr-stake, html body #vsbjGame .sr-returned{ font-weight:600 !important; color:var(--bjr-ink) !important; opacity:1 !important; }
html body #vsbjGame #lastWinVal.pos, html body #vsbjGame .sr-delta.win, html body #vsbjGame .st-val.win, html body #vsbjGame .sr-result.win, html body #vsbjGame .vsbj-hand-status.win{ color:var(--bjr-win) !important; }
html body #vsbjGame #lastWinVal.neg, html body #vsbjGame .sr-delta.loss, html body #vsbjGame .st-val.loss, html body #vsbjGame .sr-result.loss, html body #vsbjGame .vsbj-hand-status.loss{ color:var(--bjr-loss) !important; }
html body #vsbjGame #lastWinVal:not(.pos):not(.neg){ color:var(--bjr-ink) !important; }
html body #vsbjGame .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 #vsbjGame .chip .chip-face{ font-size:13px !important; }
html body #vsbjGame .chip.c100 .chip-face, html body #vsbjGame .chip.c500 .chip-face{ font-size:12px !important; letter-spacing:-.04em; }

/* ---- small print on the felt sits on a dark plate ---------------------------------- */
html body #vsbjGame .vsbj-paytables{ opacity:1 !important; }
html body #vsbjGame .vsbj-inline-rules, html body #vsbjGame #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"]) #vsbjGame .vsbj-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 #vsbjGame #vsbjShoe, html body #vsbjGame #vsbjShoe *, html body #vsbjGame .vsbj-player-hand,
html body #vsbjGame .vsbj-player-hand.pending, html body #vsbjGame .vsbj-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 #vsbjGame .btn-deal, html body #vsbjGame .btn-hit, html body #vsbjGame #btnInsureYes, html body #vsbjGame #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 #vsbjGame .btn-stand{ background:linear-gradient(#174f56, #0b2f35) !important; }
/* chip values: darker inks on the cream centres */
html body #vsbjGame .chip.c5 .chip-face{ color:#123f1a !important; }
html body #vsbjGame .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 #vsbjGame .vsbj-total-pill:not(:empty){ background:var(--bjr-plate); border-radius:6px; padding:0 6px; }

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

/* ---- fit (draft 3): the larger type in the same layout ------------------------------- */
html body #vsbjGame .vsbj-hand-wager, html body #vsbjGame .vsbj-hand-status, html body #vsbjGame .vsbj-hand-name, html body #vsbjGame .vsbj-hand-total{ line-height:17px !important; }
html body #vsbjGame .btn-stand{ background:linear-gradient(#123f45, #0a2a2f) !important; }
@media (min-width:680px){
  html body #vsbjGame .gold-icon-btn .btn-label{ white-space:nowrap; }
  html body #vsbjGame .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 #vsbjHeader{ gap:4px !important; padding:4px 8px !important; }
  html body #vsbjSecondaryControls{ gap:4px !important; }
  html body #vsbjGame .gold-icon-btn{ padding:0 3px !important; }
  html body #vsbjHeader .title{ font-size:14px !important; line-height:17px !important; }
  /* the rail: Last Win, Last Bet and the balance on one line */
  html body #vsbjGame .vsbj-rail{ gap:8px !important; }
  html body #vsbjGame .vsbj-rail label, html body #vsbjGame #vsbjBalance label{ letter-spacing:.02em !important; }
  /* the result's totals on two lines */
  html body #vsbjGame .settlement-totals{ flex-direction:column !important; gap:0 !important; }
  html body #vsbjGame .settlement-total-row{ justify-content:space-between !important; }
}

/* ---- phones: decisions B1, B2, B4 (Ronan 2026-10-07) ------------------------------------ */
html body #vsbjGame #vsbjShoeCount, html body #vsbjGame .vsbj-result-reason{ display:none; }
@media (max-width:679px), (max-height:480px){
  /* B4: the count on the deck line, with Coach on */
  html body #vsbjGame #vsbjShoeCount{ display:inline; }
  /* B1: Hit and Stand without their explanation lines; Double and Split keep their amounts */
  html body #vsbjGame #btnHit .db-sub, html body #vsbjGame #btnStand .db-sub{ display:none !important; }
  /* B2: the result rows carry the hand, the stake, WIN/LOSS and the net... */
  html body #vsbjGame .sr-rate, html body #vsbjGame .sr-returned{ display:none !important; }
  html body #vsbjGame .settlement-row{ grid-template-columns:64px auto auto minmax(0,1fr) !important; grid-template-areas:none !important; column-gap:8px !important; }
  html body #vsbjGame .settlement-row > *{ grid-area:auto !important; }
  html body #vsbjGame .sr-delta{ justify-self:end; }
  /* ...and the reason goes under the buttons (a Coach tip that explains the result takes that line) */
  html body #vsbjGame .vsbj-result-reason{ display:block; font-size:12px; font-weight:600; line-height:15px; color:var(--bjr-ink); text-align:center; }
  html body #vsbjGame .vsbj-result-reason:empty,
  html body #vsbjGame .vsbj-tip:not(:empty) ~ .vsbj-result-reason,
  html body #vsbjGame .vsbj-notice.on ~ .vsbj-result-reason{ display:none !important; }
}
html body #vsbjGame #vsbjShoeCount{ font-size:12px; font-weight:600; color:var(--bjr-gold); }
/* B3 (phones): the room for the larger type comes from spacing only */
@media (max-width:679px) and (min-height:481px){
  :root{ --vsbj-vgap:2px; }
  html body #vsbjTable .felt-surface{ padding-bottom:4px !important; }
  html body #vsbjGame .vsbj-rail{ gap:6px !important; }
  html body #vsbjGame .vsbj-rail label, html body #vsbjGame #vsbjBalance label{ letter-spacing:0 !important; }
  html body #vsbjGame .vsbj-rail .felt-stat{ gap:4px !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #vsbjGame footer{ padding:0 8px 1px !important; }
  html body #vsbjGame .vsbj-settlement{ padding:1px 6px !important; gap:0 !important; }
  html body #vsbjGame .settlement-rows{ gap:0 !important; }
  html body #vsbjGame .settlement-row{ height:15px !important; line-height:15px !important; }
  html body #vsbjGame .settlement-head, html body #vsbjGame .settlement-totals, html body #vsbjGame .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 #vsbjGame .vsbj-shoe{ left:240px !important; top:7px !important; line-height:13px !important; }
  html body #vsbjGame .vsbj-shoe * { line-height:13px !important; }
  html body #vsbjGame .vsbj-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 #vsbjGame .gold-icon-btn{ padding:0 5px !important; }
  html body #vsbjGame .gold-icon-btn .btn-label,
  html body .brand-cluster .icon-actions button.gold-icon-btn .btn-label,
  html body #vsbjGame .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 #vsbjHeader{ 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 #vsbjGame .settlement-row{ grid-template-columns:88px auto auto minmax(0,1fr) auto auto !important; }
  html body #vsbjGame .settlement-head{ line-height:16px !important; }
  html body #vsbjGame .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 #vsbjHeader .title{ font-size:13px !important; line-height:16px !important; letter-spacing:0 !important; }
}
/* A8 (2026-10-07): the centre suit at 32% of the card width, so the corner indices
   clear it by 2px+ at every size (battery §10). Moved here from European's sheet
   so every blackjack has it. */
html body #vsbjGame .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px) !important; line-height:1; }

/* ---- phone fixes, Ronan 2026-10-07 11:19 ("go ahead with fixes") ---------------------------- */
@media (max-width:679px), (max-height:480px){
  /* fix 2: the reason line keeps to two lines, inside the note line (13px leading) */
  html body #vsbjGame .vsbj-result-reason{ line-height:13px !important; max-height:26px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  /* fix 3: the result's label column as wide as its longest label (INSURANCE) */
  html body #vsbjGame .settlement-row{ grid-template-columns:max-content auto auto minmax(0,1fr) !important; }
}
/* the hide rules above win over the two-line box */
@media (max-width:679px), (max-height:480px){
  html body #vsbjGame .vsbj-result-reason:empty,
  html body #vsbjGame .vsbj-tip:not(:empty) ~ .vsbj-result-reason,
  html body #vsbjGame .vsbj-notice.on ~ .vsbj-result-reason{ display:none !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 #vsbjGame .vsbj-bank{ flex-direction:column !important; align-items:flex-end !important; gap:0 !important; }
  html body #vsbjGame .vsbj-bank label{ line-height:14px !important; }
  html body #vsbjGame .vsbj-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 #vsbjGame .vsbj-rail .felt-stat{ height:16px !important; line-height:16px !important; align-items:center !important; }
  html body #vsbjGame .vsbj-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 #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-head, html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-foot,
  html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-head, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-head *, html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-foot *,
  html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-head *, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-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 #vsbjGame .vsbj-hands[data-count="3"] .vsbj-player-hand, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-player-hand{ --card-w:40px; --card-h:calc(40px / 0.712); }
}
@media (max-width:679px) and (min-height:481px){
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-player-hand, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-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 #vsbjGame .vsbj-hands[data-count="3"] .vsbj-player-hand, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-player-hand{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-head, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-head,
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-foot, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-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{ --vsbj-band-h:120px; --vsbj-vgap:1px; }
  html body #vsbjGame .vsbj-actions{ height:44px !important; }
  html body[data-ui-phase="player"] #vsbjDecision{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body #vsbjGame .vsbj-hand-head, html body #vsbjGame .vsbj-hand-foot{ height:14px !important; line-height:14px !important; }
  html body #vsbjGame .vsbj-hand-head *, html body #vsbjGame .vsbj-hand-foot *{ line-height:14px !important; }
  html body #vsbjHeader .title{ font-size:12px !important; line-height:15px !important; }
  html body #vsbjGame .vsbj-hand-wager{ font-size:12px !important; }
  html body #vsbjGame .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 #vsbjGame #vsbjHeader{ padding-top:2px !important; padding-bottom:2px !important; }
  html body #vsbjGame .table-wrap{ padding-top:0 !important; padding-bottom:0 !important; }
  html body #vsbjTable .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 #vsbjGame #vsbjLastHand.vsbj-rail{ gap:4px !important; }
  html body #vsbjGame #vsbjLastHand.vsbj-rail .felt-stat{ gap:3px !important; }

  html body #vsbjGame .vsbj-seat-label{ position:relative; top:2px; }
}
/* 3-4 hands at 330: the 15px label rows win over the 14px rows above */
@media (max-width:359px) and (min-height:481px){
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-head, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-head,
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-foot, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-foot,
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-head *, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-head *,
  html body #vsbjGame .vsbj-hands[data-count="3"] .vsbj-hand-foot *, html body #vsbjGame .vsbj-hands[data-count="4"] .vsbj-hand-foot *{ height:15px; line-height:15px !important; }
}
/* ---- C3 (Atlantic City, Ronan 2026-10-07 12:53): a fifth button, Surrender. On phones the five stay on one row,
   each as wide as its word (at least 44px); Surrender's "Half back" line is not shown (as Hit and Stand's, B1).
   Tables without a Surrender button are not touched (:has). Spanish 21's is #btnSurrender (D3, 14:29). ---- */
@media (max-width:679px) and (min-height:481px){
  html body[data-ui-phase="player"] #vsbjGame #vsbjDecision:has(#vsbjSurrender, #btnSurrender){ display:grid !important; grid-template-columns:repeat(5, auto) !important; justify-content:stretch !important; column-gap:4px !important; }
  html body #vsbjGame #vsbjDecision:has(#vsbjSurrender, #btnSurrender) .decision-btn{ min-width:44px !important; padding-left:2px !important; padding-right:2px !important; }
  html body #vsbjGame #vsbjSurrender .db-sub, html body #vsbjGame #btnSurrender .db-sub{ display:none !important; }
}
/* ---- 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 #vsbjGame .vsbj-note-line .vsbj-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 #vsbjGame .settlement-head{ gap:4px !important; }
  html body #vsbjGame .settlement-dealer{ gap:4px !important; }
  html body #vsbjGame .settlement-note{ padding-left:4px !important; padding-right:4px !important; }
}