/* BLACKJACK TABLE — shared kit file for the blackjacks (this copy: Single Deck, sdb prefix) (Ronan 2026-10-31
   19:30 "go with recc": one shared file; Vegas Strip first, Double Exposure and Free
   Bet may move onto it later, only if Ronan wants).
   Taken from Double Exposure's dxbj.css (2a3c70d), its own rules removed (Double/Split
   rule-off greying, the payouts felt print, layout option B). Contains:
     - the new table (decision B1): no game title; Coach, Rules, Sound, Settings,
       New Game on the felt top right (desktop), their own row on the felt (phones),
       a fixed band above the felt (sideways); the felt takes the freed height.
     - the Texas Hold'em look (B2): flat gold header buttons, gold tokens, Georgia
       titles, Inter body, Plex Mono figures.
     - Hold'em's panels and choice buttons (B3/B4).
   Hook: class "bjt" on #sdbGame and "bjt-page" on <body>. Loaded after the kit's
   readable layer, so it wins on equal specificity. game.css is not edited. */

/* ---- the header becomes part of the felt ---------------------------------- */
html body #sdbGame.bjt #sdbTable .felt-surface{ position:relative; }
html body #sdbGame.bjt #sdbHeader{
  position:absolute !important; top:var(--dx-btn-top, 20px); right:var(--dx-btn-right, 20px);
  width:auto !important; padding:0 !important; margin:0 !important; z-index:6;
  background:none !important; border:0 !important; box-shadow:none !important;
}
html body #sdbGame.bjt #sdbHeader .info-boxes{ margin:0 !important; }
html body #sdbGame.bjt #sdbSecondaryControls{ display:flex; gap:6px !important; }

/* ---- desktop: the freed height goes to the cards -------------------------- */
@media (min-width:680px) and (min-height:481px){
  html body #sdbGame.bjt{
    --dx-head: 60px;
    --dx-cap: 160px;
    /* two card rows share the height (dealer + your hands) */
    --dx-card-v: calc((100dvh - (var(--sdb-fixed) - var(--dx-head))) / 2);
    /* width for ONE or TWO hands of two cards */
    --dx-card-w2: calc(((100vw - var(--sdb-sides)) / 2 - 26px) / 2 / 0.712);
    --card-h: clamp(62px, min(var(--dx-card-v), var(--dx-card-w2)), var(--dx-cap)) !important;
    --card-w: calc(var(--card-h) * 0.712) !important;
  }
  /* three or four hands: the width bound as before (four hands of two side by side) */
  html body #sdbGame.bjt .sdb-hands[data-count="3"],
  html body #sdbGame.bjt .sdb-hands[data-count="4"]{
    --card-h: clamp(62px, min(var(--dx-card-v), var(--card-h-w)), var(--dx-cap)) !important;
    --card-w: calc(var(--card-h) * 0.712) !important;
  }
  /* the felt starts at the top of the frame */
  html body #sdbGame.bjt .table-wrap{ padding-top:6px !important; }
}

/* ---- phones: the buttons are their own row on the felt -------------------- */
@media (max-width:679px) and (min-height:481px){
  /* the row keeps 6px clear of the felt's inner gold line (12px in): 18px from the felt's edge */
  html body #sdbGame.bjt #sdbHeader{
    position:relative !important; top:auto; right:auto;
    display:flex !important; justify-content:center; padding:16px 4px 0 !important;
  }
  html body #sdbGame.bjt #sdbHeader .info-boxes{ width:100%; display:block; }
  html body #sdbGame.bjt #sdbSecondaryControls{ width:100%; display:flex !important; justify-content:space-between; gap:4px !important; }
  html body #sdbGame.bjt #sdbSecondaryControls .gold-icon-btn{ flex:1 1 0; min-width:0 !important; max-width:none !important; width:auto !important; padding:0 1px !important; }
  html body #sdbGame.bjt #sdbSecondaryControls .gold-icon-btn .btn-label{ letter-spacing:0 !important; }
  /* the height the row's clearance takes comes back from the stats gap and the band */
  html body #sdbGame.bjt .sdb-layout{ padding-top:46px !important; }
  html body #sdbGame.bjt{ --sdb-band-h: 108px; }
}
/* the shortest must-fit phone (360 x 640, 589px visible): 4px less above the stats line keeps the Undo row 6px off the gold line */
@media (max-width:679px) and (min-height:481px) and (max-height:600px){
  html body #sdbGame.bjt .sdb-layout{ padding-top:42px !important; }
  html body #sdbGame.bjt #sdbLastHand, html body #sdbGame.bjt .sdb-bank, html body #sdbGame.bjt #sdbShoe{ transform:translateY(-4px); }
}

/* ---- desktop: one row across the top right; the dealer's row starts below it
        (Double Exposure's option A) */
@media (min-width:680px) and (min-height:481px){
  html body #sdbGame.bjt{ --dx-head: 20px; }
  html body #sdbGame.bjt .sdb-dealer{ margin-top:40px; }
}

/* =============================================================================
   LOOK STANDARD — Texas Hold'em's styling (briefs/poker-family-decisions.md,
   LOOK STANDARD; Ronan 2026-10-31 08:28, "incorporate this as part of this
   build"). Reference: games/texas-hold-em/assets/css/holdem.css.
   Changed here: header buttons, gold, fonts (panel headings included), the
   choice buttons and every panel (Hold'em's box — decisions B3/B4, Ronan
   2026-10-31 18:13-18:16 "change panels"). NOT changed: the felt. game.css is
   not edited.
   ============================================================================= */
html body #sdbGame.bjt, html body.bjt-page{
  --gold:#E9C46A; --gold-b:#F3D27A; --gold-d:#D9AE4E; --gold-t:#FCE7AA; --cream:#F6F0E1;
  --sdb-gold:#E9C46A; --sdb-gold-bright:#FCE7AA; --sdb-ivory:#F6F0E1;
}

/* ---- header buttons: flat gold, no border, no bevel, no shadow ------------- */
html body #sdbGame.bjt .gold-icon-btn,
html body #sdbGame.bjt .gold-icon-btn:hover{
  background:linear-gradient(#F3D27A, #D9AE4E) !important;
  border:0 !important; box-shadow:none !important; border-radius:9px !important;
  min-height:44px !important; color:#1B1406 !important;
}
html body #sdbGame.bjt .gold-icon-btn[aria-pressed="false"],
html body #sdbGame.bjt .gold-icon-btn[aria-pressed="false"]:hover{ background:linear-gradient(#E7DCC2, #C9B98F) !important; }
html body #sdbGame.bjt .gold-icon-btn .btn-label,
html body #sdbGame.bjt .gold-icon-btn.coach-btn .btn-val{ color:#1B1406 !important; font-weight:800 !important; font-family:Inter, "Helvetica Neue", Arial, sans-serif !important; }
html body #sdbGame.bjt .gold-icon-btn .ico{ color:#1B1406 !important; }

/* ---- fonts: Georgia 700 for titles and display lines; Inter body; Plex Mono figures */
html body #sdbGame.bjt .panel h2,
html body #sdbGame.bjt .pt-title,
html body #sdbGame.bjt .serif,
html body .coach-start-title{ font-family:Georgia, "Times New Roman", serif !important; font-weight:700 !important; }
html body #sdbGame.bjt .sdb-call,
html body #sdbGame.bjt .sdb-total-pill,
html body #sdbGame.bjt .sdb-hand-total,
html body #sdbGame.bjt .st-hand{ font-family:Georgia, "Times New Roman", serif !important; font-weight:700 !important; }
html body .panel-overlay .panel h2{ font-family:Georgia, "Times New Roman", serif !important; font-weight:700 !important; }

/* ---- the selected choice turns solid gold with dark text ------------------- */
html body .coach-choice.selected{
  background:linear-gradient(#F3D27A, #D9AE4E) !important; border-color:transparent !important; box-shadow:none !important;
}
html body .coach-choice.selected .coach-choice-title,
html body .coach-choice.selected .coach-choice-desc{ color:#1B1406 !important; }

/* ---- phones: the stats line sits on a dark plate so gold type keeps 7:1
        against the felt (decision 26) ---------------------------------------- */
@media (max-width:679px){
  html body #sdbGame.bjt #sdbLastHand.sdb-rail{ background:rgba(4,20,12,.82); border-radius:8px; padding:1px 6px !important; }
  html body #sdbGame.bjt #sdbShoe{ margin-top:2px; }
  /* games with a hole card: its "Shows 10" sits beside the shoe line; tighter letters keep them apart (from Free Bet) */
  html body #sdbGame.bjt #sdbShoe, html body #sdbGame.bjt #sdbShoe *{ letter-spacing:.3px !important; }
  /* the count sits on bare felt below the plate: a paler gold keeps it over 7:1 */
  html body #sdbGame.bjt #sdbShoeCount{ color:#FFF4DC !important; }
}
/* 330px wide: a $2,000 Last Bet beside a $9,950 balance needs the plate's side padding */
@media (max-width:340px){
  html body #sdbGame.bjt #sdbLastHand.sdb-rail{ padding:1px 2px !important; }
}
@media (max-width:679px) and (min-height:481px){
  /* "New Game" on two lines like the other labels' height, so it never runs to its button's edge */
  html body #sdbGame.bjt #btnNewGame .btn-label{ white-space:normal !important; max-width:44px; }
}

/* ---- sideways phones (a listed known-issue size): there is no height for a row on
        the felt (the cards ran into the stats), so the buttons keep Vegas Strip's top
        band above the felt, right-aligned, with the balance beside them; no title ---- */
@media (max-height:480px){
  html body #sdbGame.bjt{ padding-top:44px; }
  html body #sdbGame.bjt #sdbHeader{
    position:fixed !important; top:0 !important; right:150px !important; left:auto !important;
    display:flex !important; justify-content:flex-end; padding:0 !important; height:44px !important; z-index:20;
  }
  html body #sdbGame.bjt #sdbSecondaryControls{ gap:6px !important; }
  html body #sdbGame.bjt #sdbSecondaryControls .gold-icon-btn{ height:44px !important; min-height:44px !important; }
}

/* Phones: four hands and Insurance (five result rows) fit the result panel
   in the band the buttons' row left (108px band; stacked at 15px a row they
   needed 11px more): those rows and lines at 13px (from Free Bet). */
@media (max-width:679px) and (min-height:481px){
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-row,
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-row *,
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-head,
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-total-row{ line-height:13px !important; }
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-row,
  html body #sdbGame.bjt #sdbSettlement:has(.settlement-row:nth-child(5)) .settlement-head{ height:13px !important; }
}

/* =============================================================================
   PANELS AND CHOICE BUTTONS = Texas Hold'em's (decisions B3/B4/B5, Ronan
   2026-10-31 18:13-18:16 "change panels"; holdem.css .overlay/.panel/.choice).
   Start, Resume, Rules, Settings, New game confirm and out-of-chips: solid
   #141A2E, 2px solid gold, 16px corners, heading Georgia 700 20px #F3D27A,
   backdrop rgba(5,7,14,.78). Choices: #26345E, 1px #4A5A8C, 10px corners,
   label 800 13px; selected solid gold with #1B1406 text.
   ============================================================================= */
html body .panel-overlay{ background:rgba(5,7,14,.78) !important; }
html body .coach-start{ background:rgba(5,7,14,.78) !important; }
html body .panel-overlay .panel,
html body .coach-start .coach-start-card{
  background:#141A2E !important; background-image:none !important;
  border:2px solid #E9C46A !important; border-radius:16px !important; box-shadow:none !important;
}
html body .panel-overlay .panel h2,
html body .coach-start .coach-start-title{ font-family:Georgia, "Times New Roman", serif !important; font-weight:700 !important; font-size:20px !important; color:#F3D27A !important; }
html body .coach-start .coach-start-sub{ color:#D3DBF2 !important; font-size:13px !important; font-weight:600 !important; }
html body .coach-choice{
  background:#26345E !important; background-image:none !important; border:1px solid #4A5A8C !important;
  border-radius:10px !important; box-shadow:none !important;
}
html body .coach-choice .coach-choice-title{ font-family:Inter, "Helvetica Neue", Arial, sans-serif !important; font-size:13px !important; font-weight:800 !important; color:#F6F0E1 !important; }
html body .coach-choice .coach-choice-desc{ font-size:12px !important; font-weight:600 !important; color:#D3DBF2 !important; }
html body .coach-choice.selected{ background:linear-gradient(#F3D27A, #D9AE4E) !important; border-color:transparent !important; }
html body .coach-choice.selected .coach-choice-title{ color:#1B1406 !important; }
html body .coach-choice.selected .coach-choice-desc{ color:#3A2C0A !important; }