/* ===== 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; }
}

/* ---- R3 (Ronan 2026-10-11, "recommendation"): the instruction line keeps 8px (desktop) / 6px (phones)
   from the dealer's cards above it, and the same from "Your hand" below.
   Desktop: margins — your hand moves down with the line and the centre column's spare height pays
   for it (7-8px at 1254 and 1366), so no card shrinks.
   Phones: the page has no spare height, but 45px sits free under the line, so the line is nudged
   down into it and nothing else moves. Sideways keeps its old place (2px, a listed known issue):
   nudged, the line covered the active hand. ---- */
html body #ebjGame #ebjInstruction{ margin-top:5px !important; margin-bottom:2px !important; }
@media (max-height:480px){
  html body #ebjGame #ebjInstruction{ margin-top:0 !important; margin-bottom:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #ebjGame #ebjInstruction{ margin-top:0 !important; margin-bottom:0 !important; position:relative; top:5px; }
}

/* DESKTOP RULES PANEL (Ronan 2026-10-27, "yes continue"): on desktop the Rules
   panel is wide, the rules run in two columns and Close stays pinned in view.
   Only in the shortest windows may the rules text still scroll; Close and the
   title never leave the screen. Phones (frame 899px or narrower) unchanged. */
@media (min-width:900px){
  html body .panel-overlay#rulesOverlay{ padding:12px; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; max-height:100%; padding:16px 24px 0; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .panel .sub{ margin-bottom:8px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay #rulesPaytables{ max-width:440px; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  html body #rulesOverlay .panel-close{ position:sticky; bottom:0; z-index:2; margin:8px -24px 0; width:calc(100% + 48px); border-radius:0 0 16px 16px; border-width:1px 0 0; padding:12px; background:#0a1517; box-shadow:0 -10px 14px rgba(5,8,9,.85); }
}
/* Laptop windows (box under 620px tall, at least 1000px wide): three columns and a
   wider panel, so the rules fit without scrolling at 1366x768 too. */
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel{ padding-top:12px; }
}

/* ===== 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; }
}

/* ---- R3 (Ronan 2026-10-11, "recommendation"): the instruction line keeps 8px (desktop) / 6px (phones)
   from the dealer's cards above it, and the same from "Your hand" below.
   Desktop: margins — your hand moves down with the line and the centre column's spare height pays
   for it (7-8px at 1254 and 1366), so no card shrinks.
   Phones: the page has no spare height, but 45px sits free under the line, so the line is nudged
   down into it and nothing else moves. Sideways keeps its old place (2px, a listed known issue):
   nudged, the line covered the active hand. ---- */
html body #sdbGame #sdbInstruction{ margin-top:5px !important; margin-bottom:2px !important; }
@media (max-height:480px){
  html body #sdbGame #sdbInstruction{ margin-top:0 !important; margin-bottom:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #sdbGame #sdbInstruction{ margin-top:0 !important; margin-bottom:0 !important; position:relative; top:5px; }
}

/* DESKTOP RULES PANEL (Ronan 2026-10-27, "yes continue"): on desktop the Rules
   panel is wide, the rules run in two columns and Close stays pinned in view.
   Only in the shortest windows may the rules text still scroll; Close and the
   title never leave the screen. Phones (frame 899px or narrower) unchanged. */
@media (min-width:900px){
  html body .panel-overlay#rulesOverlay{ padding:12px; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; max-height:100%; padding:16px 24px 0; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .panel .sub{ margin-bottom:8px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay #rulesPaytables{ max-width:440px; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  html body #rulesOverlay .panel-close{ position:sticky; bottom:0; z-index:2; margin:8px -24px 0; width:calc(100% + 48px); border-radius:0 0 16px 16px; border-width:1px 0 0; padding:12px; background:#0a1517; box-shadow:0 -10px 14px rgba(5,8,9,.85); }
}
/* Laptop windows (box under 620px tall, at least 1000px wide): three columns and a
   wider panel, so the rules fit without scrolling at 1366x768 too. */
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel{ padding-top:12px; }
}

/* ===== 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; }
}

/* ---- R3 (Ronan 2026-10-11, "recommendation"): the instruction line keeps 8px (desktop) / 6px (phones)
   from the dealer's cards above it, and the same from "Your hand" below.
   Desktop: margins — your hand moves down with the line and the centre column's spare height pays
   for it (7-8px at 1254 and 1366), so no card shrinks.
   Phones: the page has no spare height, but 45px sits free under the line, so the line is nudged
   down into it and nothing else moves. Sideways keeps its old place (2px, a listed known issue):
   nudged, the line covered the active hand. ---- */
html body #acbjGame #acbjInstruction{ margin-top:5px !important; margin-bottom:2px !important; }
@media (max-height:480px){
  html body #acbjGame #acbjInstruction{ margin-top:0 !important; margin-bottom:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #acbjGame #acbjInstruction{ margin-top:0 !important; margin-bottom:0 !important; position:relative; top:5px; }
}

/* DESKTOP RULES PANEL (Ronan 2026-10-27, "yes continue"): on desktop the Rules
   panel is wide, the rules run in two columns and Close stays pinned in view.
   Only in the shortest windows may the rules text still scroll; Close and the
   title never leave the screen. Phones (frame 899px or narrower) unchanged. */
@media (min-width:900px){
  html body .panel-overlay#rulesOverlay{ padding:12px; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; max-height:100%; padding:16px 24px 0; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .panel .sub{ margin-bottom:8px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay #rulesPaytables{ max-width:440px; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  html body #rulesOverlay .panel-close{ position:sticky; bottom:0; z-index:2; margin:8px -24px 0; width:calc(100% + 48px); border-radius:0 0 16px 16px; border-width:1px 0 0; padding:12px; background:#0a1517; box-shadow:0 -10px 14px rgba(5,8,9,.85); }
}
/* Laptop windows (box under 620px tall, at least 1000px wide): three columns and a
   wider panel, so the rules fit without scrolling at 1366x768 too. */
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel{ padding-top:12px; }
}

/* ===== 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; }
}

/* ---- R3 (Ronan 2026-10-11, "recommendation"): the instruction line keeps 8px (desktop) / 6px (phones)
   from the dealer's cards above it, and the same from "Your hand" below.
   Desktop: margins — your hand moves down with the line and the centre column's spare height pays
   for it (7-8px at 1254 and 1366), so no card shrinks.
   Phones: the page has no spare height, but 45px sits free under the line, so the line is nudged
   down into it and nothing else moves. Sideways keeps its old place (2px, a listed known issue):
   nudged, the line covered the active hand. ---- */
html body #s21Game #s21Instruction{ margin-top:5px !important; margin-bottom:2px !important; }
@media (max-height:480px){
  html body #s21Game #s21Instruction{ margin-top:0 !important; margin-bottom:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #s21Game #s21Instruction{ margin-top:0 !important; margin-bottom:0 !important; position:relative; top:5px; }
}

/* DESKTOP RULES PANEL (Ronan 2026-10-27, "yes continue"): on desktop the Rules
   panel is wide, the rules run in two columns and Close stays pinned in view.
   Only in the shortest windows may the rules text still scroll; Close and the
   title never leave the screen. Phones (frame 899px or narrower) unchanged. */
@media (min-width:900px){
  html body .panel-overlay#rulesOverlay{ padding:12px; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; max-height:100%; padding:16px 24px 0; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .panel .sub{ margin-bottom:8px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay #rulesPaytables{ max-width:440px; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  html body #rulesOverlay .panel-close{ position:sticky; bottom:0; z-index:2; margin:8px -24px 0; width:calc(100% + 48px); border-radius:0 0 16px 16px; border-width:1px 0 0; padding:12px; background:#0a1517; box-shadow:0 -10px 14px rgba(5,8,9,.85); }
}
/* Laptop windows (box under 620px tall, at least 1000px wide): three columns and a
   wider panel, so the rules fit without scrolling at 1366x768 too. */
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel{ padding-top:12px; }
}

/* ===== 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; }
}

/* ---- R3 (Ronan 2026-10-11, "recommendation"): the instruction line keeps 8px (desktop) / 6px (phones)
   from the dealer's cards above it, and the same from "Your hand" below.
   Desktop: margins — your hand moves down with the line and the centre column's spare height pays
   for it (7-8px at 1254 and 1366), so no card shrinks.
   Phones: the page has no spare height, but 45px sits free under the line, so the line is nudged
   down into it and nothing else moves. Sideways keeps its old place (2px, a listed known issue):
   nudged, the line covered the active hand. ---- */
html body #vsbjGame #vsbjInstruction{ margin-top:5px !important; margin-bottom:2px !important; }
@media (max-height:480px){
  html body #vsbjGame #vsbjInstruction{ margin-top:0 !important; margin-bottom:0 !important; }
}
@media (max-width:679px) and (min-height:481px){
  html body #vsbjGame #vsbjInstruction{ margin-top:0 !important; margin-bottom:0 !important; position:relative; top:5px; }
}

/* DESKTOP RULES PANEL (Ronan 2026-10-27, "yes continue"): on desktop the Rules
   panel is wide, the rules run in two columns and Close stays pinned in view.
   Only in the shortest windows may the rules text still scroll; Close and the
   title never leave the screen. Phones (frame 899px or narrower) unchanged. */
@media (min-width:900px){
  html body .panel-overlay#rulesOverlay{ padding:12px; }
  html body #rulesOverlay .panel{ width:min(900px, 100%); max-width:none; max-height:100%; padding:16px 24px 0; }
  html body #rulesOverlay .panel h2{ margin-bottom:2px; }
  html body #rulesOverlay .panel .sub{ margin-bottom:8px; }
  html body #rulesOverlay .rules-list{ column-count:2; column-gap:32px; margin-bottom:8px; }
  html body #rulesOverlay .rules-list li{ break-inside:avoid; margin-bottom:5px; line-height:1.45; }
  html body #rulesOverlay #rulesPaytables{ max-width:440px; }
  html body #rulesOverlay .rules-rg{ font-size:11.5px; line-height:1.4; margin:6px 0 0; }
  html body #rulesOverlay .panel-close{ position:sticky; bottom:0; z-index:2; margin:8px -24px 0; width:calc(100% + 48px); border-radius:0 0 16px 16px; border-width:1px 0 0; padding:12px; background:#0a1517; box-shadow:0 -10px 14px rgba(5,8,9,.85); }
}
/* Laptop windows (box under 620px tall, at least 1000px wide): three columns and a
   wider panel, so the rules fit without scrolling at 1366x768 too. */
@media (min-width:1000px) and (max-height:619px){
  html body #rulesOverlay .panel{ width:min(1160px, 100%); }
  html body #rulesOverlay .rules-list{ column-count:3; column-gap:28px; }
  html body #rulesOverlay .rules-list li{ font-size:13px; margin-bottom:4px; }
  html body #rulesOverlay .panel{ padding-top:12px; }
}