/* ==========================================================================
   Canasta practice board. Loaded after the shared stylesheet (brand.css) and scoped to
   #canasta-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 players are one row of fans, the groups on the
   table are small tiles, and the hand is one column per rank with the cards overlapped.
   ========================================================================== */

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

/* the three other players: a name and a fan of face-down cards (face up once the deal is over) */
#canasta-trainer .c-opprow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
#canasta-trainer .c-seat { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
#canasta-trainer .c-seatlbl { margin: 0; font-size: 12px; line-height: 1.25; color: var(--muted); text-align: center; }
#canasta-trainer .c-seat--active .c-seatlbl { color: var(--accent); font-weight: 700; }
#canasta-trainer .c-fan { display: flex; justify-content: center; align-items: center; min-height: 37px; max-width: 100%; }
#canasta-trainer .c-fan .gcard { width: 26px; height: 37px; border-radius: 5px; border-width: 1.2px; }
#canasta-trainer .c-fan .gcard + .gcard { margin-left: -15px; box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
#canasta-trainer .c-fan .gcard .gr { font-size: 10px; }
#canasta-trainer .c-fan .gcard .gs { font-size: 9px; }
#canasta-trainer .c-fan .gcard:not(.gcard--back) { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 0; padding: 2px 2px 0; }

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

/* one group on the table: its rank, how many cards it has, how many are wild, and whether it is a canasta */
#canasta-trainer .c-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;
}
#canasta-trainer button.c-chip { cursor: pointer; }
#canasta-trainer button.c-chip:hover { border-color: var(--text); }
#canasta-trainer button.c-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#canasta-trainer .c-chip-rank { font-size: 15px; font-weight: 700; }
#canasta-trainer .c-chip-n { font-weight: 700; }
#canasta-trainer .c-chip-w { font-size: 12px; color: var(--brass); letter-spacing: -.05em; }
#canasta-trainer .c-chip-c { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); }
#canasta-trainer .c-chip--canasta { border-width: 2.5px; border-color: var(--brass); }
#canasta-trainer .c-chip--mixed { border-style: dashed; }

/* the discard pile (its top card) and the draw pile */
#canasta-trainer .c-piles { display: flex; gap: 10px; justify-content: center; }
#canasta-trainer .c-pilebox { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
#canasta-trainer .c-pilebox .g-lbl { margin: 0; font-size: 10.5px; letter-spacing: .08em; }
#canasta-trainer .c-pile, #canasta-trainer .c-stockpile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#canasta-trainer .c-pilecap { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; }
#canasta-trainer .c-frozen { box-shadow: 0 0 0 3px #5BA7D9; }
#canasta-trainer .c-frozen ~ .c-pilecap { color: #2F7FB5; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #canasta-trainer .c-frozen ~ .c-pilecap { color: #8CC4EC; }
}
:root[data-theme="dark"] #canasta-trainer .c-frozen ~ .c-pilecap { color: #8CC4EC; }

/* your hand: one column per rank, cards overlapped so the whole hand stays on one screen */
#canasta-trainer .c-handhead { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 6px; }
#canasta-trainer .c-handhead .g-lbl { margin: 0; }
#canasta-trainer .c-tools { display: flex; gap: 8px; }
#canasta-trainer .c-tools .btn { font-size: 13px; padding: 4px 13px; }
#canasta-trainer .c-tools .btn:disabled { opacity: .38; cursor: not-allowed; }
#canasta-trainer .c-tools .btn:disabled:hover { background: transparent; color: var(--text); }
#canasta-trainer .c-hand { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; min-height: 62px; margin: 0 0 8px; padding-top: 6px; }
#canasta-trainer .c-col { display: flex; flex-direction: column; width: 44px; }
#canasta-trainer .c-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;
}
#canasta-trainer .c-col .gcard + .gcard { margin-top: calc(var(--pitch, 20px) - 62px); }
#canasta-trainer .c-col .gcard .gr { font-size: 14px; line-height: 1.1; }
#canasta-trainer .c-col .gcard .gs { font-size: 13px; line-height: 1.1; }
#canasta-trainer .g-controls { margin-bottom: 0; }
#canasta-trainer .g-controls { gap: 7px; }
#canasta-trainer .g-controls .btn { padding: 7px 11px; font-size: 13.5px; }

/* the face-up cards of the other players when the deal is over are read, not played */
#canasta-trainer .c-fan .gcard--red { color: #C0272D; }

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

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   Cards are sized from the board (--cw, a hand column's width: room for thirteen ranks). The hand sits on the bottom
   edge; the table (both teams' groups, and the piles beside them) takes the flexible middle and scrolls inside its
   own box only when a long deal crowds it. On a phone the piles stay beside the groups, in a narrow column. */
.pr-fixed #canasta-trainer > * { --cw: min(calc((100cqw - 40px) / 11.2), 54px, 8cqh); }
.pr-fixed #canasta-trainer .c-table { flex: 1 1 0; min-height: 0; overflow-y: auto; grid-template-columns: minmax(0, 1fr) auto; }
.pr-fixed #canasta-trainer .c-handhead { margin: auto 0 4px; }
.pr-fixed #canasta-trainer .c-hand { flex-wrap: wrap; row-gap: 4px; min-height: 0; margin: 0; padding-top: 2px; gap: max(2px, calc(var(--cw) * .08)); }
.pr-fixed #canasta-trainer .c-col { width: var(--cw); }
.pr-fixed #canasta-trainer .c-col .gcard { width: var(--cw); height: calc(var(--cw) * 1.4); padding: 2px 3px 0; }
.pr-fixed #canasta-trainer .c-col .gcard + .gcard { margin-top: calc(var(--pitch, 20px) - var(--cw) * 1.4); }
.pr-fixed #canasta-trainer .c-col .gcard .gr { font-size: max(11px, calc(var(--cw) * .3)); }
.pr-fixed #canasta-trainer .c-col .gcard .gs { font-size: max(10px, calc(var(--cw) * .28)); }
.pr-fixed #canasta-trainer .c-pile .gcard, .pr-fixed #canasta-trainer .c-stockpile .gcard { width: calc(var(--cw) * 1.05); height: calc(var(--cw) * 1.47); }
@container board (max-width: 520px) {
  .pr-fixed #canasta-trainer .g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .pr-fixed #canasta-trainer .g-stat { font-size: 11.5px; }
  .pr-fixed #canasta-trainer .g-stat b { font-size: 15px; }
  .pr-fixed #canasta-trainer .c-table { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .pr-fixed #canasta-trainer .c-piles { flex-direction: column; gap: 4px; }
  .pr-fixed #canasta-trainer .c-pilebox .g-lbl { font-size: 9.5px; }
  .pr-fixed #canasta-trainer .c-pilecap { font-size: 11px; }
  .pr-fixed #canasta-trainer .c-sidelbl { font-size: 10px; letter-spacing: .06em; }
  .pr-fixed #canasta-trainer .c-handhead .g-lbl { font-size: 10px; }
}
@container board (max-height: 470px) {
  .pr-fixed #canasta-trainer .pr-status { font-size: 13.5px; padding: 6px 10px; margin-bottom: 6px; }
  .pr-fixed #canasta-trainer .g-stats { margin-bottom: 4px; padding-bottom: 4px; }
  .pr-fixed #canasta-trainer .c-opprow { margin-bottom: 4px; }
  .pr-fixed #canasta-trainer .c-fan .gcard { width: 20px; height: 28px; }
  .pr-fixed #canasta-trainer .c-fan .gcard + .gcard { margin-left: -12px; }
  .pr-fixed #canasta-trainer .c-side { padding: 3px 6px 4px; }
  /* stacked cards of one rank closer together: each still shows its corner */
  .pr-fixed #canasta-trainer .c-col .gcard + .gcard { margin-top: calc(min(var(--pitch, 20px), 11px) - var(--cw) * 1.4); }
}
/* a small phone: the other players are their names and card counts only (the labels say how many cards each holds) */
@container board (max-height: 470px) and (max-width: 520px) {
  .pr-fixed #canasta-trainer .c-fan { display: none; }
  .pr-fixed #canasta-trainer .c-seatlbl { font-size: 11px; }
  .pr-fixed #canasta-trainer .g-stat { font-size: 10.5px; line-height: 1.25; }
  .pr-fixed #canasta-trainer .g-stat b { font-size: 13px; }
  .pr-fixed #canasta-trainer .pr-status { font-size: 12.5px; line-height: 1.35; }
}

/* ==========================================================================
   The narrated deal ("Watch a narrated deal"): site/playing/assets/canasta-watch.js. Scoped to its own panel; the
   shared viewer's .wv-* classes do the rest. All four hands are face up, so the cards are small and overlapped, and the
   panel has to stay about one laptop screen tall (the table, the narration, the list of choices and the controls).
   ========================================================================== */
#canasta-watch .wv-stage { padding: 4px 8px 3px; margin-bottom: 6px; min-height: 0; }
#canasta-watch .cw-table { width: 100%; gap: 3px; align-items: stretch; }
#canasta-watch .cw-seat { min-width: 0; gap: 1px; }
#canasta-watch .cw-sides, #canasta-watch .cw-teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; width: 100%; }
#canasta-watch .cw-mid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; width: 100%; min-height: 0; }
#canasta-watch .cw-draw, #canasta-watch .cw-pile, #canasta-watch .cw-team { min-width: 0; }
#canasta-watch .cw-lbl { margin: 0 0 1px; font-size: 12px; line-height: 1.25; color: var(--muted); }
#canasta-watch .cw-legend { text-align: center; font-size: 11.5px; margin-top: 1px; }
#canasta-watch .cw-grouprow { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: flex-start; min-height: 0; }
#canasta-watch .cw-group { min-width: 0; }
#canasta-watch .cw-seat .wv-name { font-size: 11.5px; }
#canasta-watch .wv-cards { justify-content: flex-start; min-height: 34px; flex-wrap: wrap; }
#canasta-watch .cw-seat .wv-cards { justify-content: center; }
#canasta-watch .wv-cards .gcard { width: 24px; height: 34px; border-radius: 4px; }
#canasta-watch .wv-cards .gcard:not(.gcard--back) { align-items: flex-start; justify-content: flex-start; padding: 2px 0 0 3px; }
#canasta-watch .wv-cards .gcard .gr { font-size: 11px; }
#canasta-watch .wv-cards .gcard .gs { font-size: 10px; }
#canasta-watch .wv-cards .gcard + .gcard { margin-left: -10px; }
#canasta-watch .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -6px; }
#canasta-watch .cw-group .wv-cards { min-height: 0; }
#canasta-watch .cw-pile .wv-cards { row-gap: 2px; }
#canasta-watch .cw-pile .wv-cards .gcard + .gcard { margin-left: -13px; }
#canasta-watch .cw-pile .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -9px; }
#canasta-watch .wv-none:empty { display: none; }
#canasta-watch .wv-head { margin-bottom: 4px; }
#canasta-watch .wv-progress { order: 2; flex: 1 1 auto; align-self: baseline; }
@media (max-width: 560px) {
  #canasta-watch .cw-sides, #canasta-watch .cw-teams { grid-template-columns: minmax(0, 1fr); }
  #canasta-watch .cw-mid { grid-template-columns: minmax(0, 1fr); }
  #canasta-watch .wv-cards .gcard { width: 22px; height: 31px; }
  #canasta-watch .wv-cards .gcard + .gcard { margin-left: -11px; }
}
/* the fixed board on a short screen: the two sides and the two piles side by side again, smaller, so the whole
   narrated table fits */
@container board (max-height: 470px) {
  #canasta-watch .cw-sides, #canasta-watch .cw-teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 8px; }
  #canasta-watch .cw-mid { grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
  #canasta-watch .wv-cards .gcard { width: 22px; height: 31px; }
  #canasta-watch .wv-cards .gcard .gr { font-size: 10px; }
  #canasta-watch .wv-cards .gcard .gs { font-size: 9px; }
  #canasta-watch .wv-cards .gcard + .gcard { margin-left: -11px; }
  #canasta-watch .wv-name { font-size: 10.5px; }
}
#canasta-watch .wv-say { padding: 5px 14px 6px; margin-bottom: 4px; min-height: 5.6em; }
#canasta-watch .wv-why { margin-bottom: 4px; }
#canasta-watch .wv-opt { font-size: 13px; line-height: 1.28; }
#canasta-watch .wv-controls { padding-top: 6px; }
#canasta-watch .wv-controls .btn { padding: 6px 14px; }