/* DOUBLE EXPOSURE BLACKJACK — the new table layout (Ronan 2026-10-31 07:41,
   standing for future games 07:47; decisions 17-19).
     - No game title: the header band is gone.
     - Coach, Rules, Sound, Settings, New Game sit ON the felt, top right
       (desktop), or as their own row along the felt's top edge (phones).
     - The felt takes the freed height; the cards grow into it. One or two
       hands use the full height; three or four hands keep the width-bound size
       so four hands of two still fit side by side.
   Loaded after the kit's readable layer, so it wins on equal specificity. */

/* ---- the header becomes part of the felt ---------------------------------- */
html body #vsbjGame.dxbj #vsbjTable .felt-surface{ position:relative; }
html body #vsbjGame.dxbj #vsbjHeader{
  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 #vsbjGame.dxbj #vsbjHeader .info-boxes{ margin:0 !important; }
html body #vsbjGame.dxbj #vsbjSecondaryControls{ display:flex; gap:6px !important; }

/* ---- desktop: the freed height goes to the cards -------------------------- */
@media (min-width:680px) and (min-height:481px){
  html body #vsbjGame.dxbj{
    --dx-head: 60px;
    --dx-cap: 160px;
    /* two card rows share the height (dealer + your hands) */
    --dx-card-v: calc((100dvh - (var(--vsbj-fixed) - var(--dx-head))) / 2);
    /* width for ONE or TWO hands of two cards */
    --dx-card-w2: calc(((100vw - var(--vsbj-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 #vsbjGame.dxbj .vsbj-hands[data-count="3"],
  html body #vsbjGame.dxbj .vsbj-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 #vsbjGame.dxbj .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 #vsbjGame.dxbj #vsbjHeader{
    position:relative !important; top:auto; right:auto;
    display:flex !important; justify-content:center; padding:16px 4px 0 !important;
  }
  html body #vsbjGame.dxbj #vsbjHeader .info-boxes{ width:100%; display:block; }
  html body #vsbjGame.dxbj #vsbjSecondaryControls{ width:100%; display:flex !important; justify-content:space-between; gap:4px !important; }
  html body #vsbjGame.dxbj #vsbjSecondaryControls .gold-icon-btn{ flex:1 1 0; min-width:0 !important; max-width:none !important; width:auto !important; padding:0 1px !important; }
  html body #vsbjGame.dxbj #vsbjSecondaryControls .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 #vsbjGame.dxbj .vsbj-layout{ padding-top:46px !important; }
  html body #vsbjGame.dxbj{ --vsbj-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 #vsbjGame.dxbj .vsbj-layout{ padding-top:42px !important; }
  html body #vsbjGame.dxbj #vsbjLastHand, html body #vsbjGame.dxbj .vsbj-bank, html body #vsbjGame.dxbj #vsbjShoe{ transform:translateY(-4px); }
}

/* ---- desktop option B: the five buttons as a 3 + 2 block in the top-right
        corner over the right column, so the dealer's row never meets them */
@media (min-width:680px) and (min-height:481px){
  html body #vsbjGame.dxbj.dx-b{ --dx-btn-w: 62px; }
  html body #vsbjGame.dxbj.dx-b #vsbjSecondaryControls{
    display:grid !important; grid-template-columns:repeat(3, var(--dx-btn-w)); gap:4px !important;
  }
  html body #vsbjGame.dxbj.dx-b #vsbjSecondaryControls > *{ width:var(--dx-btn-w) !important; min-width:0 !important; padding:0 2px !important; }
  html body #vsbjGame.dxbj.dx-b #vsbjSecondaryControls > :nth-child(4){ grid-column:2; }
  html body #vsbjGame.dxbj.dx-b #vsbjSecondaryControls > :nth-child(5){ grid-column:3; }
  html body #vsbjGame.dxbj.dx-b .vsbj-right{ padding-top:96px; justify-content:flex-start; }
}
/* ---- desktop option A: one row across the top right; the dealer's row
        starts below the row */
@media (min-width:680px) and (min-height:481px){
  html body #vsbjGame.dxbj.dx-a{ --dx-head: 20px; }
  html body #vsbjGame.dxbj.dx-a .vsbj-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 #vsbjGame.dxbj, html body.dxbj-page{
  --gold:#E9C46A; --gold-b:#F3D27A; --gold-d:#D9AE4E; --gold-t:#FCE7AA; --cream:#F6F0E1;
  --vsbj-gold:#E9C46A; --vsbj-gold-bright:#FCE7AA; --vsbj-ivory:#F6F0E1;
}

/* ---- header buttons: flat gold, no border, no bevel, no shadow ------------- */
html body #vsbjGame.dxbj .gold-icon-btn,
html body #vsbjGame.dxbj .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 #vsbjGame.dxbj .gold-icon-btn[aria-pressed="false"],
html body #vsbjGame.dxbj .gold-icon-btn[aria-pressed="false"]:hover{ background:linear-gradient(#E7DCC2, #C9B98F) !important; }
html body #vsbjGame.dxbj .gold-icon-btn .btn-label,
html body #vsbjGame.dxbj .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 #vsbjGame.dxbj .gold-icon-btn .ico{ color:#1B1406 !important; }

/* ---- fonts: Georgia 700 for titles and display lines; Inter body; Plex Mono figures */
html body #vsbjGame.dxbj .panel h2,
html body #vsbjGame.dxbj .pt-title,
html body #vsbjGame.dxbj .serif,
html body .coach-start-title{ font-family:Georgia, "Times New Roman", serif !important; font-weight:700 !important; }
html body #vsbjGame.dxbj .vsbj-call,
html body #vsbjGame.dxbj .vsbj-total-pill,
html body #vsbjGame.dxbj .vsbj-hand-total,
html body #vsbjGame.dxbj .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; }

/* ---- Double and Split outside the rules: greyed like a disabled button, but
        a tap still answers with the rule (decision 8, brief §18) ------------- */
html body #vsbjGame.dxbj .action.rule-off{ opacity:.4 !important; cursor:help; }
html body #vsbjGame.dxbj .action.rule-off:hover{ filter:none; }

/* ---- the felt print in the payouts panel (decision 9) ---------------------- */
html body #vsbjGame.dxbj .pt-print{
  font-family:Inter, "Helvetica Neue", Arial, sans-serif; font-size:12px; font-weight:700; line-height:1.3;
  color:var(--gold-t); margin:2px 0 6px;
}
html body .panel .pt-print{ font-family:Inter, "Helvetica Neue", Arial, sans-serif; font-size:13px; font-weight:700; color:#FCE7AA; margin:2px 0 6px; }

/* ---- 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 #vsbjGame.dxbj #vsbjLastHand.vsbj-rail{ background:rgba(4,20,12,.82); border-radius:8px; padding:1px 6px !important; }
  html body #vsbjGame.dxbj #vsbjShoe{ margin-top:2px; }
  /* the count sits on bare felt below the plate: a paler gold keeps it over 7:1 */
  html body #vsbjGame.dxbj #vsbjShoeCount{ 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 #vsbjGame.dxbj #vsbjLastHand.vsbj-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 #vsbjGame.dxbj #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 #vsbjGame.dxbj{ padding-top:44px; }
  html body #vsbjGame.dxbj #vsbjHeader{
    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 #vsbjGame.dxbj #vsbjSecondaryControls{ gap:6px !important; }
  html body #vsbjGame.dxbj #vsbjSecondaryControls .gold-icon-btn{ height:44px !important; min-height:44px !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; }