/* ==========================================================================
   Hand and Foot practice board. Loaded after the shared stylesheet (brand.css) and scoped to
   #hand-and-foot-trainer, so it changes nothing on any other page. It uses the shared color
   variables, so the light and dark themes both work.

   The board has to fit one laptop screen (1366x768) with the status line, the table, the
   whole hand and the buttons: the other player is one row (a name and a fan of cards), the
   groups on the table are small tiles, the discard pile shows its top seven cards overlapped,
   and the hand is one column per rank with the cards overlapped.
   ========================================================================== */

#hand-and-foot-trainer .pr-status { margin-bottom: 10px; padding: 8px 12px; font-size: 15px; line-height: 1.4; }
#hand-and-foot-trainer .g-stats { padding-bottom: 6px; margin-bottom: 8px; gap: 2px 16px; }
#hand-and-foot-trainer .g-stat { font-size: 13px; }
#hand-and-foot-trainer .g-stat b { font-size: 16px; margin-left: 4px; }

/* the table: both players' groups on the left, the two piles on the right */
#hand-and-foot-trainer .hf-table { display: grid; grid-template-columns: minmax(0, 1fr) 204px; gap: 10px; align-items: start; margin: 0 0 8px; }
#hand-and-foot-trainer .hf-sides { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#hand-and-foot-trainer .hf-side { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px 6px; }
#hand-and-foot-trainer .hf-sidehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#hand-and-foot-trainer .hf-sidelbl { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#hand-and-foot-trainer .hf-sidelbl span { white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; font-size: 12px; }
#hand-and-foot-trainer .hf-groups { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 26px; }
#hand-and-foot-trainer .hf-none { font-size: 13px; }

/* North's hand: a fan of face-down cards (face up once the deal is over) */
#hand-and-foot-trainer .hf-fan { display: flex; justify-content: flex-end; align-items: center; min-height: 37px; margin-top: -2px; flex: 0 1 auto; max-width: 55%; }
#hand-and-foot-trainer .hf-fan .gcard { width: 22px; height: 31px; border-radius: 4px; border-width: 1.2px; flex: 0 0 auto; }
#hand-and-foot-trainer .hf-fan .gcard + .gcard { margin-left: -13px; box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
#hand-and-foot-trainer .hf-fan .gcard .gr { font-size: 9px; }
#hand-and-foot-trainer .hf-fan .gcard .gs { font-size: 8px; }
#hand-and-foot-trainer .hf-fan .gcard:not(.gcard--back) { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 2px 2px 0; }
#hand-and-foot-trainer .hf-fan .gcard--red { color: #C0272D; }

/* one group on the table: its rank, how many cards it has, how many are wild, and whether it is a finished book */
#hand-and-foot-trainer .hf-chip {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; margin: 0;
  border: 1.5px solid var(--line-firm); border-radius: 7px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.2; cursor: default;
}
#hand-and-foot-trainer button.hf-chip { cursor: pointer; }
#hand-and-foot-trainer button.hf-chip:hover { border-color: var(--text); }
#hand-and-foot-trainer button.hf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#hand-and-foot-trainer .hf-chip-rank { font-size: 15px; font-weight: 700; }
#hand-and-foot-trainer .hf-chip-n { font-weight: 700; }
#hand-and-foot-trainer .hf-chip-w { font-size: 12px; color: var(--brass); letter-spacing: -.05em; }
#hand-and-foot-trainer .hf-chip-c { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); }
#hand-and-foot-trainer .hf-chip--book { border-width: 2.5px; border-color: var(--brass); }
#hand-and-foot-trainer .hf-chip--dirty { border-style: dashed; }

/* the discard pile (its top seven cards, overlapped) and the draw pile */
#hand-and-foot-trainer .hf-piles { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
#hand-and-foot-trainer .hf-pilebox { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
#hand-and-foot-trainer .hf-pilebox .g-lbl { margin: 0; font-size: 10.5px; letter-spacing: .08em; }
#hand-and-foot-trainer .hf-pile, #hand-and-foot-trainer .hf-stockpile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#hand-and-foot-trainer .hf-pilefan { display: flex; align-items: center; }
#hand-and-foot-trainer .hf-pilefan .gcard { width: 34px; height: 48px; flex: 0 0 auto; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 2px 3px 0; }
#hand-and-foot-trainer .hf-pilefan .gcard + .gcard { margin-left: -14px; box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
#hand-and-foot-trainer .hf-pilefan .gcard .gr { font-size: 12px; line-height: 1.1; }
#hand-and-foot-trainer .hf-pilefan .gcard .gs { font-size: 11px; line-height: 1.1; }
#hand-and-foot-trainer .hf-pilecap { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; }
#hand-and-foot-trainer .hf-stockpile .gcard { width: 34px; height: 48px; }

/* your foot (face down) and your hand: one column per rank, cards overlapped so the whole hand stays on one screen */
#hand-and-foot-trainer .hf-handhead { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 6px; }
#hand-and-foot-trainer .hf-handhead .g-lbl { margin: 0; }
#hand-and-foot-trainer .hf-foot { display: flex; align-items: center; gap: 8px; margin-right: auto; }
#hand-and-foot-trainer .hf-foot .gcard { width: 20px; height: 28px; border-radius: 4px; }
#hand-and-foot-trainer .hf-footcap { font-size: 12.5px; color: var(--muted); }
#hand-and-foot-trainer .hf-tools { display: flex; gap: 8px; }
#hand-and-foot-trainer .hf-tools .btn { font-size: 13px; padding: 4px 13px; }
#hand-and-foot-trainer .hf-tools .btn:disabled { opacity: .38; cursor: not-allowed; }
#hand-and-foot-trainer .hf-tools .btn:disabled:hover { background: transparent; color: var(--text); }
#hand-and-foot-trainer .hf-hand { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; min-height: 62px; margin: 0 0 8px; padding-top: 6px; }
#hand-and-foot-trainer .hf-col { display: flex; flex-direction: column; width: 44px; }
#hand-and-foot-trainer .hf-col .gcard {
  width: 44px; height: 62px; flex-direction: row; justify-content: flex-start; align-items: flex-start;
  gap: 1px; padding: 3px 4px 0; position: relative;
}
#hand-and-foot-trainer .hf-col .gcard + .gcard { margin-top: calc(var(--pitch, 20px) - 62px); }
#hand-and-foot-trainer .hf-col .gcard .gr { font-size: 14px; line-height: 1.1; }
#hand-and-foot-trainer .hf-col .gcard .gs { font-size: 13px; line-height: 1.1; }
#hand-and-foot-trainer .g-controls { margin-bottom: 0; gap: 7px; }
#hand-and-foot-trainer .g-controls .btn { padding: 7px 11px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 899px) {
  /* the Coach is below the board here, so the newest tip is shown under the buttons */
  #hand-and-foot-trainer { display: flex; flex-direction: column; }
  #hand-and-foot-trainer .pr-tip { order: 9; }
}
@media (max-width: 560px) {
  #hand-and-foot-trainer .hf-table { grid-template-columns: minmax(0, 1fr); }
  #hand-and-foot-trainer .hf-piles { justify-content: flex-start; gap: 22px; }
  #hand-and-foot-trainer .hf-fan { max-width: 45%; }
  #hand-and-foot-trainer .hf-fan .gcard { width: 18px; height: 26px; }
  #hand-and-foot-trainer .hf-fan .gcard + .gcard { margin-left: -11px; }
  #hand-and-foot-trainer .hf-col { width: 34px; }
  #hand-and-foot-trainer .hf-col .gcard { width: 34px; height: 50px; padding: 2px 3px 0; }
  #hand-and-foot-trainer .hf-col .gcard + .gcard { margin-top: calc(var(--pitch, 20px) - 50px); }
  #hand-and-foot-trainer .hf-col .gcard .gr { font-size: 12px; }
  #hand-and-foot-trainer .hf-col .gcard .gs { font-size: 11px; }
  #hand-and-foot-trainer .hf-hand { gap: 3px; min-height: 50px; }
}

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   As on the Canasta page: hand columns sized from the board (room for eleven ranks, a wrap for more), pinned to the
   bottom edge; the table (both sides' groups and the piles) takes the flexible middle and scrolls in its own box
   only when a long deal crowds it; on a phone the piles stay beside the groups. */
#hand-and-foot-trainer > * { --cw: min(calc((100cqw - 40px) / 11.2), 54px, 8cqh); }
#hand-and-foot-trainer .hf-table { flex: 1 1 0; min-height: 0; overflow-y: auto; grid-template-columns: minmax(0, 1fr) auto; }
#hand-and-foot-trainer .hf-handhead { margin: auto 0 4px; }
#hand-and-foot-trainer .hf-hand { flex-wrap: wrap; row-gap: 4px; min-height: 0; margin: 0; padding-top: 2px; gap: max(2px, calc(var(--cw) * .08)); }
#hand-and-foot-trainer .hf-col { width: var(--cw); }
#hand-and-foot-trainer .hf-col .gcard { width: var(--cw); height: calc(var(--cw) * 1.4); padding: 2px 3px 0; }
#hand-and-foot-trainer .hf-col .gcard + .gcard { margin-top: calc(var(--pitch, 20px) - var(--cw) * 1.4); }
#hand-and-foot-trainer .hf-col .gcard .gr { font-size: max(11px, calc(var(--cw) * .3)); }
#hand-and-foot-trainer .hf-col .gcard .gs { font-size: max(10px, calc(var(--cw) * .28)); }
@container board (max-width: 520px) {
  #hand-and-foot-trainer .g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  #hand-and-foot-trainer .g-stat { font-size: 11.5px; }
  #hand-and-foot-trainer .g-stat b { font-size: 15px; }
  #hand-and-foot-trainer .hf-table { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  #hand-and-foot-trainer .hf-piles { flex-direction: column; gap: 4px; }
  #hand-and-foot-trainer .hf-pilebox .g-lbl { font-size: 9.5px; }
  #hand-and-foot-trainer .hf-handhead .g-lbl { font-size: 10px; }
}
@container board (max-height: 470px) {
  #hand-and-foot-trainer .pr-status { font-size: 13.5px; padding: 6px 10px; margin-bottom: 6px; }
  #hand-and-foot-trainer .g-stats { margin-bottom: 4px; padding-bottom: 4px; }
  #hand-and-foot-trainer .hf-col .gcard + .gcard { margin-top: calc(min(var(--pitch, 20px), 11px) - var(--cw) * 1.4); }
}
@container board (max-height: 470px) and (max-width: 520px) {
  #hand-and-foot-trainer .hf-fan { display: none; }
  #hand-and-foot-trainer .g-stat { font-size: 10.5px; line-height: 1.25; }
  #hand-and-foot-trainer .g-stat b { font-size: 13px; }
  #hand-and-foot-trainer .pr-status { font-size: 12.5px; line-height: 1.35; }
}

/* ==========================================================================
   The narrated watch mode: the table of #handandfoot-watch (see hand-and-foot-watch.js).
   Scoped to its own panel; the shared viewer's .wv-* classes do the rest. Every card of both
   players is face up (the foots too), so the table is made of small, overlapped cards:
   each player has a row for the hand and one for the foot, and a row of the groups put down.
   The panel has to stay about one laptop screen tall (1366x768, under the sticky header).
   ========================================================================== */
#handandfoot-watch .wv-stage { padding: 4px 8px 3px; margin-bottom: 6px; min-height: 0; }
#handandfoot-watch .hf-w-board { align-items: stretch; gap: 2px; width: 100%; }
#handandfoot-watch .hf-w-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; }
#handandfoot-watch .hf-w-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0 14px; }
#handandfoot-watch .hf-w-top .wv-seat { align-items: flex-start; min-width: 0; gap: 1px; }
#handandfoot-watch .hf-w-top .wv-name { text-align: left; }
#handandfoot-watch .hf-w-hand { flex: 1 1 260px; }
#handandfoot-watch .hf-w-foot { flex: 0 0 auto; }
#handandfoot-watch .hf-w-foot .wv-none { display: block; min-height: 34px; line-height: 34px; }
#handandfoot-watch .hf-w-tbl { border-top: 1px dashed var(--line-firm); padding-top: 2px; }
#handandfoot-watch .hf-w-side--s .hf-w-tbl { border-top: 0; border-bottom: 1px dashed var(--line-firm); padding: 0 0 2px; }
#handandfoot-watch .hf-w-lbl { text-align: left; margin: 0 0 1px; }
#handandfoot-watch .hf-w-groups { display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: center; }
#handandfoot-watch .hf-w-group { display: block; }
#handandfoot-watch .hf-w-group--red { border-right: 1px solid var(--line-firm); padding-right: 7px; }
#handandfoot-watch .hf-w-mid { width: 100%; justify-content: flex-start; align-items: center; gap: 2px 22px; min-height: 0; padding: 1px 0; flex-wrap: wrap; }
#handandfoot-watch .hf-w-draw, #handandfoot-watch .hf-w-pile { display: flex; align-items: center; gap: 4px 7px; min-width: 0; }
#handandfoot-watch .hf-w-mid .hf-w-lbl { margin: 0; max-width: 125px; }
#handandfoot-watch .hf-w-legend { margin: 1px 0 0; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: left; }

/* card sizes: every card 24x34, overlapped so the left edge (rank and suit) shows */
#handandfoot-watch .wv-cards { justify-content: flex-start; min-height: 34px; }
#handandfoot-watch .wv-cards .gcard { width: 24px; height: 34px; border-radius: 4px; }
#handandfoot-watch .wv-cards .gcard:not(.gcard--back) { align-items: flex-start; justify-content: flex-start; padding: 2px 0 0 3px; }
#handandfoot-watch .wv-cards .gcard .gr { font-size: 11px; }
#handandfoot-watch .wv-cards .gcard .gs { font-size: 10px; }
#handandfoot-watch .wv-cards .gcard + .gcard { margin-left: -9px; }
#handandfoot-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -5px; }
/* a joker's rank is three letters wide, a 10 two digits: the card laid over them is moved over a little so they stay readable */
#handandfoot-watch .wv-cards .gcard.hf-w-after-joker { margin-left: -2px; }
#handandfoot-watch .hf-w-groups .wv-cards { min-height: 0; }
#handandfoot-watch .hf-w-groups .wv-cards .gcard + .gcard { margin-left: -11px; }
#handandfoot-watch .hf-w-groups .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -7px; }
#handandfoot-watch .hf-w-groups .wv-cards .gcard.hf-w-after-joker { margin-left: -2px; }
#handandfoot-watch .hf-w-groups .wv-cards .gcard.gcard--meld { border-width: 2px; }
#handandfoot-watch .hf-w-foot .wv-cards .gcard + .gcard { margin-left: -12px; }
#handandfoot-watch .hf-w-foot .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -8px; }
#handandfoot-watch .hf-w-foot .wv-cards .gcard.hf-w-after-joker { margin-left: -2px; }
@media (max-width: 560px) {
  #handandfoot-watch .wv-cards .gcard { width: 22px; height: 31px; }
  #handandfoot-watch .wv-cards .gcard + .gcard { margin-left: -10px; }
  #handandfoot-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -6px; }
  #handandfoot-watch .wv-cards .gcard.hf-w-after-joker { margin-left: -3px; }
  #handandfoot-watch .hf-w-foot .wv-cards .gcard + .gcard { margin-left: -13px; }
}
/* the fixed board on a short screen: the two piles share one line, their labels shorter in width */
@container board (max-height: 470px) {
  #handandfoot-watch .hf-w-mid { flex-wrap: nowrap; gap: 2px 10px; }
  #handandfoot-watch .hf-w-mid .hf-w-lbl { max-width: 84px; font-size: 10.5px; line-height: 1.2; }
  #handandfoot-watch .wv-name, #handandfoot-watch .hf-w-lbl { font-size: 10.5px; line-height: 1.25; }
}

/* the viewer's own parts, a little tighter so a step with its list of choices open still fits one laptop screen */
#handandfoot-watch.pr-board { padding-top: 12px; padding-bottom: 12px; }
#handandfoot-watch .wv-none:empty { display: none; }
#handandfoot-watch .hf-w-empty .wv-cards { min-height: 0; }
#handandfoot-watch .wv-head { margin-bottom: 4px; }
#handandfoot-watch .wv-progress { order: 2; flex: 1 1 auto; align-self: baseline; }
#handandfoot-watch .wv-head-links { margin-left: auto; }
#handandfoot-watch .wv-title { flex: 0 0 auto; }
#handandfoot-watch .wv-say { padding: 5px 14px 6px; margin-bottom: 4px; }
#handandfoot-watch .wv-text { font-size: 15px; line-height: 1.4; }
#handandfoot-watch .wv-why { margin-bottom: 4px; }
#handandfoot-watch .wv-opt { font-size: 13.5px; line-height: 1.28; }
#handandfoot-watch .wv-controls { padding-top: 6px; }