/* ==========================================================================
   Pinochle practice page: what the shared stylesheet does not cover.

   Loaded after /assets/brand.css. It only adds classes that start with pn-, and it
   uses the same color variables as the rest of the site, so the dark and light
   themes both work. The whole board (status line, table, hand, buttons) has to
   fit one laptop screen, 1366 x 768, so everything here is kept short.
   ========================================================================== */

/* ---------- the table: auction chips, played cards, and the middle ---------- */
.pn-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto) minmax(0, 1fr);
  grid-template-areas: "n n n" "w c e" "s s s";
  gap: 4px 10px; align-items: center; justify-items: center;
  margin: 4px 0 10px; padding: 8px 10px; min-height: 196px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
}
.pn-seat { display: flex; align-items: center; gap: 3px 10px; min-width: 0; }
.pn-seat--n, .pn-seat--s { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.pn-seat--w, .pn-seat--e { flex-direction: column; }
.pn-seat--n { grid-area: n; } .pn-seat--w { grid-area: w; }
.pn-seat--e { grid-area: e; } .pn-seat--s { grid-area: s; }
.pn-table .h-center { grid-area: c; }
.pn-table .gcard, .pn-table .gcard--empty { width: 36px; height: 50px; }
.pn-table .gcard--empty { background: transparent !important; opacity: 1; border-color: var(--line-firm); }
.pn-seat--active .h-seatlbl { color: var(--accent); font-weight: 700; }
.pn-chip {
  display: inline-block; min-width: 4.4em; text-align: center; font-size: 12.5px; font-weight: 700;
  padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line-firm); background: var(--surface); color: var(--text);
}
.pn-chip--out { color: var(--muted); font-weight: 500; border-style: dashed; }

/* ---------- the combinations everyone showed, and the result of a deal ---------- */
.pn-table--meld { display: block; min-height: 0; padding: 8px 12px 10px; }
.pn-meld { font-size: 13.5px; }
.pn-meld-title { margin: 0 0 4px; font-weight: 700; font-size: 13.5px; }
.pn-team { margin: 0 0 4px; }
.pn-team-head { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 2px; font-size: 13.5px; font-weight: 700; }
.pn-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; gap: 2px 8px; align-items: start;
  padding: 3px 0; border-top: 1px solid var(--line);
}
.pn-who { font-weight: 600; font-size: 13px; padding-top: 2px; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 3px 5px; min-width: 0; }
.pn-piece {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 7px; font-size: 12.5px; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; white-space: nowrap;
}
.pn-pname { font-weight: 600; }
.pn-pcards { color: var(--muted); }
.pn-none { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.pn-sub { text-align: right; font-size: 14px; padding-top: 1px; }
.pn-meld-note { margin: 6px 0 0; font-size: 13px; }
.pn-muted { color: var(--muted); }
.pn-result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pn-result-table th, .pn-result-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pn-result-table thead th { font-size: 11px; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.pn-result-table tbody th { font-weight: 600; font-size: 13px; }

/* ---------- the controls: the bid box and the suit buttons ---------- */
.pn-controls { align-items: center; }
.pn-bidbox, .pn-suitbox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-bid-value { min-width: 3.1ch; text-align: center; font-size: 19px; font-weight: 700; }
.pn-controls .btn { font-size: 14px; padding: 8px 14px; }

/* ---------- a hand that holds 16 cards (the auction winner, after receiving four) ---------- */
@media (min-width: 561px) {
  .pn-hand.pn-hand--tight { gap: 3px; }
  .pn-hand.pn-hand--tight .gcard { width: 36px; }
}
.pn-hand { min-height: 62px; margin-bottom: 10px; }
.pn-stats { padding-bottom: 6px; margin-bottom: 8px; }
.pn-stats .g-stat { font-size: 13px; }
.pn-stats .g-stat b { font-size: 16px; margin-left: 4px; }

/* ---------- the combinations table in the Coach ---------- */
.pn-values { width: 100%; border-collapse: collapse; font-size: 13px; }
.pn-values th, .pn-values td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pn-values thead th { font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.pn-values td:last-child { white-space: normal; }

/* ---------- narrow screens ---------- */
@media (max-width: 560px) {
  .pn-table { grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(0, 1fr); padding: 8px 6px; min-height: 0; }
  .pn-row { grid-template-columns: 64px minmax(0, 1fr) 32px; }
  .pn-piece { white-space: normal; }
  .pn-chip { min-width: 0; padding: 3px 8px; }
}

/* ==========================================================================
   The narrated watch ("Watch a narrated deal", #pinochle-watch).
   The shared viewer and its table helpers are styled in brand.css (.wv-*); this block only adds what is Pinochle's.
   Everything is scoped to .wv-pinochle or #pinochle-watch, and uses the site's color variables.
   ========================================================================== */
/* The corners beside North and South would be empty, so they hold the bid and the strongest suit (left) and the
   points from scoring cards each team has won (right): nothing here makes the table taller. */
.wv-pinochle { grid-template-areas: "tl n tr" "w c e" ". s ."; }
.wv-info--bid { grid-area: tl; text-align: left; }
/* the side hands keep one height (two rows of cards), so the controls do not jump from step to step */
.wv-pinochle .wv-seat--w, .wv-pinochle .wv-seat--e { min-height: 99px; justify-content: flex-start; }
/* a gold edge marks the cards of a combination, or the strongest suit; the plain wv-cards border is too thin to see on a small card */
.wv-pinochle .gcard--meld { border-width: 2px; }
/* in the middle, the card that was just played has the accent outline, and the card that won the round the brass one */
.wv-pinochle .wv-play .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; }
.wv-pinochle .wv-play .gcard.wv-chosen { outline: 2px solid var(--brass); outline-offset: 1px; }
/* the panel (title, table, narration, list of choices, controls) stays about one laptop screen tall (700px at 1366 x 768),
   so the gaps between its parts are a little tighter than the shared ones */
#pinochle-watch .wv-head { margin-bottom: 4px; }
#pinochle-watch .wv-stage { margin-bottom: 8px; padding-top: 6px; }
#pinochle-watch .wv-say { margin-bottom: 4px; }
#pinochle-watch .wv-why { margin-bottom: 4px; }
/* "How the choice was made": a row can name many cards (every card that was not allowed), so the card column wraps instead of
   pushing the note into a narrow strip; that keeps an open list short */
#pinochle-watch .wv-opt-label { white-space: normal; }
@media (min-width: 561px) {
  #pinochle-watch .wv-opt { grid-template-columns: fit-content(200px) 74px 1fr; }
}
@media (max-width: 560px) {
  #pinochle-watch .wv-opt { grid-template-columns: minmax(30px, 40%) 1fr; }
}
/* after the last round (or a deal that was not played) there are no hands to show: the middle says how the deal ended */
.wv-pinochle--over .wv-center { min-width: 0; gap: 6px; }
/* The table needs about 575px. When the board is narrower (a phone, a small window, the Coach beside the board on a
   screen under about 1040px wide) North, the middle and South stack, and West and East sit side by side. The container
   query asks the question directly; the media queries say the same thing for browsers that do not have it. */
#pinochle-watch .wv-stage { container: wvstage / inline-size; }
@container wvstage (max-width: 580px) {
  .wv-pinochle { grid-template-columns: 1fr 1fr; grid-template-areas: "tl tr" "n n" "c c" "w e" "s s"; }
}
@media (max-width: 699px) {
  .wv-pinochle { grid-template-columns: 1fr 1fr; grid-template-areas: "tl tr" "n n" "c c" "w e" "s s"; }
  #pinochle-watch .wv-cards:not(.wv-cards--loose) .gcard + .gcard { margin-left: -14px; }
  #pinochle-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -7px; }
}
@media (min-width: 900px) and (max-width: 1039px) {
  .wv-pinochle { grid-template-columns: 1fr 1fr; grid-template-areas: "tl tr" "n n" "c c" "w e" "s s"; }
}

/* ==========================================================================
   The fixed-board layout (.pr-layout.pr-fixed, see docs/fixed-board-rollout.md). The board never scrolls: the table takes
   the height that is left, its cards are sized from it, and the hand (up to 16 cards) always fits on one row.
   ========================================================================== */
.pr-fixed .pn-stats { margin-bottom: 6px; padding-bottom: 4px; gap: 2px 18px; }
.pr-fixed .pn-board > .pn-table {
  container: table / size; flex: 1 1 0; min-height: 0; overflow: hidden; margin: 0 0 1.5cqh;
  padding: 1cqh 10px; align-content: space-evenly; row-gap: 0;
}
.pr-fixed .pn-handlbl { margin: 0 0 6px; }
/* the hand is on one row, overlapping by a quarter (sized for 12 cards, or 16 for the auction winner; see below) */
.pr-fixed .pn-hand { min-height: 0; margin: 0; }
.pr-fixed .pn-seat { --tc: clamp(22px, calc((100cqh - 84px) / 3), 76px); gap: 2px 8px; }
.pr-fixed .pn-table .gcard, .pr-fixed .pn-table .gcard--empty { height: var(--tc); width: calc(var(--tc) * .71); }
.pr-fixed .pn-table .gcard .gr { font-size: max(12px, calc(var(--tc) * .28)); }
.pr-fixed .pn-table .gcard .gs { font-size: max(11px, calc(var(--tc) * .26)); }
.pr-fixed .pn-seat { white-space: nowrap; }
.pr-fixed .pn-seat .h-seatlbl { white-space: normal; }
/* the dock holds the bid box and the suit buttons as well: each takes the full row */
.pr-dock .pn-bidbox, .pr-dock .pn-suitbox { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-dock .pn-bidbox[hidden], .pr-dock .pn-suitbox[hidden] { display: none; }
.pr-dock .pn-bidbox .btn, .pr-dock .pn-suitbox .btn { width: auto; flex: 1 1 auto; padding: 8px 10px; }
.pr-dock .pn-bidbox .pn-bid-go { flex: 2 1 auto; }
.pr-dock .pn-suitbox .btn { flex: 1 1 40%; }
.pr-dock .pn-bid-value { font-size: 18px; min-width: 3ch; }
/* the combinations and the result are text, so they take the table's room and scroll inside it if it is very short */
.pr-fixed .pn-board > .pn-table--meld { display: block; overflow: auto; padding: 8px 12px; }

@container board (max-height: 470px) {
  /* one row of four seats, as on the Hearts table */
  .pr-fixed .pn-board > .pn-table { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "w n e s"; align-content: center; column-gap: 4px; }
  .pr-fixed .pn-seat { --tc: clamp(22px, min(calc(100cqh - 48px), calc((25cqw - 10px) / .71)), 70px); flex-direction: column; flex-wrap: nowrap; }
  .pr-fixed .pn-table .h-center { display: none; }
  .pr-fixed .pn-table .h-seatlbl { font-size: 11.5px; line-height: 1.25; }
  .pr-fixed .pn-table .h-count { display: none; }
}
@container board (max-width: 520px) {
  .pr-fixed .pn-table .h-seatlbl { font-size: 11px; }
}
/* 12 cards in your hand (most of the deal) can be bigger than 16 (the auction winner, after receiving four) */
.pr-fixed .pn-hand { --hw: min(calc((100cqw - 30px) / 9.6), 62px, 11cqh); }
.pr-fixed .pn-hand:has(.gcard:nth-child(13)) { --hw: min(calc((100cqw - 30px) / 12.5), 62px, 11cqh); }
@container board (max-height: 470px) {
  .pr-fixed .pn-hand { --hw: min(calc((100cqw - 30px) / 9.6), 62px, 13cqh); }
  .pr-fixed .pn-hand:has(.gcard:nth-child(13)) { --hw: min(calc((100cqw - 30px) / 12.5), 62px, 13cqh); }
}
/* on a phone the bid box and the suit buttons share the dock's rows with Hint and New deal */
@media (max-width: 899px) {
  .pr-fixed .pr-dock .g-controls { display: flex; flex-wrap: wrap; gap: 6px; }
  .pr-fixed .pr-dock .g-controls .btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; }
  .pr-fixed .pr-dock .pn-bidbox:not([hidden]), .pr-fixed .pr-dock .pn-suitbox:not([hidden]) { display: contents; }
  .pr-fixed .pr-dock .pn-bidbox .pn-bid-value { flex: 0 0 auto; }
  .pr-fixed .pr-dock .pn-bidbox .pn-bid-go { flex: 2 1 0; }
  .pr-fixed .pr-dock .pn-suitbox .btn { flex: 1 1 40%; }
  .pr-fixed .pr-dock .pn-pass-go, .pr-fixed .pr-dock .pn-continue { flex: 1 1 100%; }
}
.pr-fixed .pn-hand.pn-hand--tight { gap: 0; }
.pr-fixed .pn-hand.pn-hand--tight .gcard { width: var(--hw); }
/* A board that is not tall: the combinations list gets tighter (its title repeats the strongest suit shown above it),
   and what still does not fit scrolls inside the table, never the board. */
@container board (max-height: 640px) {
  .pr-fixed .pn-board > .pn-table--meld { padding: 4px 10px; }
  .pr-fixed .pn-meld-title { display: none; }
  .pr-fixed .pn-team { margin: 0; }
  .pr-fixed .pn-team-head { margin: 2px 0 0; font-size: 12.5px; }
  .pr-fixed .pn-row { padding: 1px 0; gap: 0 8px; }
  .pr-fixed .pn-who { font-size: 12px; padding-top: 0; }
  .pr-fixed .pn-piece { font-size: 11.5px; line-height: 1.3; padding: 0 6px; }
  .pr-fixed .pn-chips { gap: 2px 4px; }
  .pr-fixed .pn-sub { font-size: 13px; padding-top: 0; }
  .pr-fixed .pn-meld-note { margin: 2px 0 0; font-size: 12px; }
  .pr-fixed .pn-result-table { font-size: 12px; }
  .pr-fixed .pn-result-table th, .pr-fixed .pn-result-table td { padding: 3px 5px; }
}
/* On a short board, while the combinations are on show, the stats line steps aside: the status line, the list and the
   Coach already say the bid and the strongest suit. */
@container board (max-height: 470px) {
  .pr-fixed .pn-board:has(.pn-table--meld) .pn-stats { display: none; }
  .pr-fixed .pn-board:has(.pn-table--meld) .pn-handlbl { display: none; }
}
@container board (max-width: 520px) {
  .pr-fixed .pn-piece { white-space: nowrap; }
  .pr-fixed .pn-row { grid-template-columns: 52px minmax(0, 1fr) 30px; }
}
/* A short board (a small phone): the status line, the stats and the hand's label use smaller print so the table keeps room. */
@container board (max-height: 470px) {
  .pr-fixed .pn-stats { gap: 0 10px; margin-bottom: 3px; padding-bottom: 3px; }
  .pr-fixed .pn-stats .g-stat { font-size: 11.5px; line-height: 1.25; }
  .pr-fixed .pn-stats .g-stat b { font-size: 13px; margin-left: 3px; }
  .pr-fixed .pn-handlbl { font-size: 10.5px; line-height: 1.2; margin-bottom: 3px; letter-spacing: .02em; }
  .pr-fixed .pr-status { font-size: 12.5px; line-height: 1.3; padding: 5px 8px; margin-bottom: 4px; }
}

/* The narrated table on a very short board (a small phone): smaller, more overlapped cards and tighter print. */
@container board (max-height: 400px) {
  #pinochle-watch .wv-table4 { row-gap: 0; }
  #pinochle-watch .wv-info { font-size: 11px; line-height: 1.2; }
  #pinochle-watch .wv-info-h { font-size: 9.5px; white-space: nowrap; }
  #pinochle-watch .wv-center { gap: 0 8px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  #pinochle-watch .wv-center .wv-caption { font-size: 11px; line-height: 1.2; }
  #pinochle-watch .wv-seat { gap: 0; }
  #pinochle-watch .wv-pinochle .wv-seat--w, #pinochle-watch .wv-pinochle .wv-seat--e { min-height: 0; }
  #pinochle-watch .wv-name { font-size: 10.5px; line-height: 1.15; }
  #pinochle-watch .wv-stage { padding-top: 0; padding-bottom: 0; }
  #pinochle-watch .wv-cards { min-height: 0; }
  #pinochle-watch .wv-cards .gcard { width: 20px; height: 27px; }
  #pinochle-watch .wv-cards .gcard .gr { font-size: 11px; }
  #pinochle-watch .wv-cards .gcard .gs { font-size: 10px; }
  #pinochle-watch .wv-cards:not(.wv-cards--loose) .gcard + .gcard { margin-left: -11px; }
  #pinochle-watch .wv-cards--loose .gcard + .gcard { margin-left: 3px; }
  #pinochle-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -11px; }
}