/* ==========================================================================
   Practice Bridge (Minibridge) - the parts of the board that no other practice game has.

   The shared stylesheet already draws the board (.gin-board), the status line, the card faces and the four-seat
   table (.h-table). This file adds only what Bridge needs: dummy's hand in a row above the table, the picker
   for the contract, and a hand and a dummy row that fit one laptop screen with the table, the status line and the
   buttons (1366 x 768, measured). Colors come from the shared CSS variables, so the dark and light themes follow.
   ========================================================================== */

/* The whole board has to fit one laptop screen (1366 x 768, under the sticky header): a slimmer status line and
   stats row than the other practice games, which have less on the board. */
.br-board { padding: 14px 18px; }
.br-board .pr-status { font-size: 15px; line-height: 1.45; margin: 0 0 8px; padding: 7px 12px; }
.br-board .h-stats { padding-bottom: 6px; margin-bottom: 8px; }

/* the stats row: four short facts, so it stays on one or two lines */
.br-stats .g-stat { white-space: nowrap; }
.br-stats .nw { white-space: nowrap; }

/* dummy's hand, face up, above the table: one row of small cards, a gap between the suits */
.br-dummy { margin: 0 0 8px; padding: 6px 8px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.br-dummylbl { text-align: left; margin: 0 0 4px; }
.br-cards { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-height: 50px; }
.br-suit { display: inline-flex; flex-wrap: nowrap; gap: 3px; }
.br-dummy .gcard { width: 36px; height: 50px; }

/* the reader's own hand: a single row at laptop width */
.br-hand { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.br-hand .br-suit { gap: 4px; }
.br-hand .gcard { width: 42px; height: 60px; }
.br-hand .gcard .gr { font-size: 15px; }

/* the table: the shared .h-table does the layout; this keeps its height down */
.br-table { margin: 0 0 8px; padding: 6px 10px; }
.br-table .gcard, .br-table .gcard--empty { width: 32px; height: 45px; }
.br-table .gcard .gr { font-size: 14px; }
.br-table .gcard .gs { font-size: 13px; }
.br-table .h-center { max-width: 190px; }

/* the contract picker: row one is the strongest suit, row two the goal (which depends on the suit) */
.br-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; margin: 0 0 8px; padding: 8px 10px;
           background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.br-pick[hidden] { display: none; }
.br-pick-lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.br-pick-suits, .br-pick-levels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; }
.br-pick-wait { font-size: 13.5px; color: var(--muted); margin: 0; }
.br-pick .btn { font-size: 14px; padding: 7px 12px; }
.br-pick .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.br-pick .btn[aria-pressed="true"] .red { color: inherit; }

/* the buttons under the cards, and the choice of role */
.br-controls { align-items: center; }
.br-roleform { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); }
.br-role { font: inherit; font-size: 13.5px; padding: 6px 8px; color: var(--text); background: var(--surface-2);
           border: 1.5px solid var(--line-firm); border-radius: 8px; }
.br-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the first-bid practice under the board: a hand, the eight opening choices, a Hint and Next hand */
.br-bid { margin-top: 16px; padding: 14px 18px; }
.br-bid-title { font-size: 20px; margin: 0 0 6px; }
.br-bid-intro { font-size: 15px; color: var(--muted); margin: 0 0 10px; }
.br-bid-status { font-size: 15px; font-weight: 600; margin: 0 0 10px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.br-bid-hand { margin: 0 0 10px; }
.br-bid-hand .br-suit { gap: 4px; }
.br-bid-hand .gcard { width: 42px; height: 60px; }
.br-bid-hand .gcard .gr { font-size: 15px; }
.br-bid-calls { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.br-callbtn { font-size: 15px; padding: 8px 14px; }
.br-callbtn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.br-callbtn[aria-pressed="true"] .red { color: inherit; }
.br-callbtn--right { outline: 3px solid var(--accent); outline-offset: 1px; }
.br-callbtn:disabled { opacity: 1; }

/* the legend under the cards */
.br-note { font-size: 13px; color: var(--muted); margin: 0; }

@media (max-width: 560px) {
  .br-dummy { padding: 6px 6px 8px; }
  .br-dummy .gcard { width: 30px; height: 44px; }
  .br-dummy .gcard .gr { font-size: 13px; }
  .br-dummy .gcard .gs { font-size: 12px; }
  .br-cards { gap: 4px 6px; }
  .br-suit { gap: 0; padding-left: 8px; }
  .br-suit .gcard { margin-left: -8px; box-shadow: -2px 0 3px rgba(18, 20, 26, .12); }
  .br-hand { gap: 4px 6px; padding-left: 0; }
  .br-hand .gcard { width: 36px; height: 52px; margin-left: 0; }
  .br-hand .br-suit .gcard { margin-left: -10px; }
  .br-hand .br-suit { padding-left: 10px; }
  .br-roleform { margin-left: 0; width: 100%; }
  .br-bid-hand .br-cards { gap: 4px 6px; }
  .br-bid-hand .gcard { width: 36px; height: 52px; margin-left: 0; }
  .br-bid-hand .br-suit { gap: 0; padding-left: 10px; }
  .br-bid-hand .br-suit .gcard { margin-left: -10px; box-shadow: -2px 0 3px rgba(18, 20, 26, .12); }
  .br-bid { padding: 12px; }
}

/* ---------- watch mode (docs/watch-mode.md) ----------------------------------------------------------
   The narrated deal uses the shared four-seat table (.wv-table4, .wv-whist, .wv-info) from the shared stylesheet. This file adds
   only what Bridge needs: the stage is a size container, so the table stacks on a narrow board, and the first-bid card under the
   board is hidden while watching, so the panel is the only thing on screen. ------------------------------------------------ */
#bridge-watch .wv-stage { container: wvstage / inline-size; }
.pr-watching #bridge-bid { display: none; }
/* A deal with 13 cards in every hand is the tallest of the narrated games, so the gaps are a little tighter than in the shared styles:
   the panel stays within one laptop screen (about 700 px at 1366 x 768) even with the list of choices open. */
#bridge-watch .wv-head { margin-bottom: 4px; }
#bridge-watch .wv-stage { margin-bottom: 6px; padding: 6px 8px 4px; }
#bridge-watch .wv-say { margin-bottom: 4px; padding: 6px 14px 7px; min-height: 0; }
#bridge-watch .wv-text { line-height: 1.42; }
#bridge-watch .wv-why { margin-bottom: 4px; }
#bridge-watch .wv-options { gap: 0; }
#bridge-watch .wv-opt { line-height: 1.25; }
#bridge-watch .wv-legend { margin-top: 3px; }

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   Your thirteen cards and dummy's, grouped by suit, are sized from the board's width (--bw, a hand card's width) and
   capped by its height; your hand sits on the bottom edge. The bidding practice is a third mode on this page
   ("Practice the first bid", see bidMode() in bridge-trainer.js): it takes the board's place, and the game's buttons in
   the Coach rail step aside while it shows. */
.pr-fixed #bridge-trainer > *, .pr-fixed #bridge-bid > * { --bw: min(calc((100cqw - 90px) / 13), 58px, 9cqh); }
.pr-fixed #bridge-trainer .br-hand, .pr-fixed #bridge-bid .br-bid-hand { flex-wrap: nowrap; gap: 4px clamp(4px, 1.6cqw, 10px); }
.pr-fixed #bridge-trainer .br-hand .br-suit, .pr-fixed #bridge-bid .br-bid-hand .br-suit { gap: max(2px, calc(var(--bw) * .07)); }
.pr-fixed #bridge-trainer .br-hand .gcard, .pr-fixed #bridge-bid .br-bid-hand .gcard { width: var(--bw); height: calc(var(--bw) * 1.4); }
.pr-fixed #bridge-trainer .br-hand .gcard .gr, .pr-fixed #bridge-bid .br-bid-hand .gcard .gr { font-size: max(12px, calc(var(--bw) * .33)); }
.pr-fixed #bridge-trainer .br-hand .gcard .gs, .pr-fixed #bridge-bid .br-bid-hand .gcard .gs { font-size: max(11px, calc(var(--bw) * .3)); }
.pr-fixed #bridge-trainer .br-hand { margin: auto 0 0; }
.pr-fixed #bridge-trainer .br-dummy .gcard { width: calc(var(--bw) * .82); height: calc(var(--bw) * 1.15); }
.pr-fixed #bridge-trainer .br-pick { margin-bottom: 6px; }
.pr-fixed #bridge-bid:not([hidden]) { margin: 0; padding: 12px 16px; }
/* the mode button already names it; the heading stays for screen readers */
.pr-fixed #bridge-bid .br-bid-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.pr-fixed #bridge-bid .br-bid-intro { font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
.pr-fixed #bridge-bid .br-bid-status { margin-bottom: 8px; }
.pr-fixed #bridge-bid .br-bid-hand { margin: auto 0 8px; }
@container board (max-height: 560px) {
  .pr-fixed #bridge-bid .br-bid-intro { font-size: 12.5px; line-height: 1.35; }
  .pr-fixed #bridge-bid .br-bid-status { font-size: 13.5px; padding: 5px 10px; }
  .pr-fixed #bridge-bid .br-callbtn { padding: 5px 10px; font-size: 13px; }
}
.pr-fixed.pr-bidding .pr-dock { display: none; }
@container board (max-width: 520px) {
  .pr-fixed #bridge-trainer .br-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .pr-fixed #bridge-trainer .br-stats .g-stat, .pr-fixed #bridge-trainer .br-stats .g-stat b { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .pr-fixed #bridge-trainer .br-stats .g-stat { font-size: 11px; line-height: 1.3; }
  .pr-fixed #bridge-trainer .br-stats .g-stat b { font-size: 14px; }
  .pr-fixed #bridge-trainer .br-stats .nw { white-space: normal; }
  .pr-fixed #bridge-bid .br-bid-intro { font-size: 13.5px; }
  /* thirteen cards in two rows, split between suits, so they stay big enough to read and tap */
  .pr-fixed #bridge-trainer > *, .pr-fixed #bridge-bid > * { --bw: min(calc((100cqw - 44px) / 7.6), 50px, 8cqh); }
  .pr-fixed #bridge-trainer .br-hand, .pr-fixed #bridge-bid .br-bid-hand { flex-wrap: wrap; row-gap: 6px; }
  .pr-fixed #bridge-trainer .br-dummy .gcard { width: calc(var(--bw) * .62); height: calc(var(--bw) * .87); }
  .pr-fixed #bridge-trainer .br-dummy .br-suits, .pr-fixed #bridge-trainer .br-dummy > div { flex-wrap: wrap; }
  .pr-fixed #bridge-trainer .br-pick { grid-template-columns: minmax(0, 1fr); }
  .pr-fixed #bridge-trainer .br-pick-lbl { font-size: 10px; }
  .pr-fixed #bridge-trainer .br-pick .btn { padding: 5px 9px; font-size: 13px; }
  .pr-fixed #bridge-trainer .br-pick-suits, .pr-fixed #bridge-trainer .br-pick-levels { min-height: 0; gap: 4px; }
}
@container board (max-height: 470px) {
  .pr-fixed #bridge-trainer .br-dummy { padding: 3px 6px 4px; margin-bottom: 4px; }
  .pr-fixed #bridge-trainer .br-pick { padding: 4px 8px; gap: 4px 8px; }
  .pr-fixed #bridge-trainer .br-pick .btn { padding: 5px 9px; font-size: 13px; }
}
/* while you choose the contract no card has been played: the empty table steps aside for the choice */
.pr-fixed #bridge-trainer:has(.br-pick:not([hidden])) .br-table { display: none; }
.pr-fixed #bridge-trainer:has(.br-pick:not([hidden])) .br-hand { margin-top: auto; margin-bottom: 6px; }
.pr-fixed #bridge-trainer .br-dummylbl { white-space: normal; overflow-wrap: anywhere; }
@container board (max-width: 520px) { .pr-fixed #bridge-trainer .br-dummylbl { font-size: 11px; line-height: 1.25; } }
@container board (max-height: 470px) {
  /* (kept for screen readers; the status line asks the question, and the Rules tab explains bidding) */
  .pr-fixed #bridge-bid .br-bid-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}
/* The one exception to "the board never scrolls": a phone cannot always show dummy's thirteen cards, yours and the
   contract choice together at a size you can read and tap, so while you choose the contract the Bridge board may
   scroll inside itself. During play it is fixed like every other board. */
@media (max-width: 899px) {
  .pr-fixed #bridge-trainer:not([hidden]):has(.br-pick:not([hidden])) { overflow-y: auto; }
}
/* the narrated deal on a short board: four thirteen-card hands, so the cards are smaller and the rows closer */
@container board (max-height: 560px) {
  #bridge-watch .wv-cards .gcard { width: 22px; height: 31px; }
  #bridge-watch .wv-cards .gcard .gr { font-size: 10px; }
  #bridge-watch .wv-cards .gcard .gs { font-size: 9px; }
  #bridge-watch .wv-cards .gcard + .gcard { margin-left: -9px; }
  #bridge-watch .wv-cards { min-height: 0; }
  #bridge-watch .wv-table4 { row-gap: 0; }
  #bridge-watch .wv-name { font-size: 10.5px; line-height: 1.2; }
}
@container board (max-height: 430px) {
  #bridge-watch .wv-cards .gcard { width: 19px; height: 26px; }
  #bridge-watch .wv-cards .gcard + .gcard { margin-left: -8px; }
  /* (the narration in the rail says the same as these small captions) */
  #bridge-watch .wv-caption { display: none; }
  #bridge-watch .wv-played { min-height: 0; }
}