/* ==========================================================================
   Old Maid practice board. Only what this one page needs: the shared stylesheet
   (brand.css) is not touched. Colors come from its variables, so the board
   follows the site's light and dark themes.

   The board is kept short so that the status line, the table, the whole hand and
   the buttons all fit one laptop screen (1366 x 768) without scrolling: the two
   computer players sit side by side, their cards are small backs, and the pairs
   everyone has put down are small cards in a wrapping row.
   ========================================================================== */

#old-maid-trainer .pr-status { margin-bottom: 10px; }

/* the two computer players, side by side */
.om-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 12px; }
.om-seat {
  min-width: 0; padding: 7px 10px 8px;
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 11px;
}
/* the player the reader takes a card from */
.om-seat--from { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* the computer player who is taking a card right now */
.om-seat--acts { border-style: dashed; border-color: var(--line-firm); }
.om-seat--out .om-backs { opacity: .8; }

.om-seatlbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; line-height: 1.3; }
.om-name { font-size: 15px; font-weight: 700; }
.om-count {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line-firm); color: var(--muted);
}
.om-role { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.om-seat > .om-role { min-height: 1.3em; margin: 1px 0 4px; }
.om-seat--from .om-name, .om-seat--from .om-role { color: var(--accent); }
.om-seat--from .om-role { font-weight: 700; }

/* a hand of face-down cards: spread out, so each card can be clicked when it is the reader's turn to take one */
.om-backs { display: flex; align-items: center; min-height: 44px; padding: 2px 0 4px; }
.om-backs .gcard--back { width: 30px; height: 43px; flex: 0 0 auto; border-radius: 5px; }
.om-backs .gcard--back + .gcard--back { margin-left: -9px; }
.om-backs--tight .gcard--back + .gcard--back { margin-left: -16px; }
.om-backs button.gcard--back:hover,
.om-backs button.gcard--back:focus-visible { transform: translateY(-4px); border-color: var(--accent); position: relative; z-index: 3; }
.om-backs .om-hinted { outline: 3px solid var(--brass); outline-offset: 1px; transform: translateY(-4px); position: relative; z-index: 2; }
/* the Old Maid, turned face up when the game is over */
.om-backs .gcard.om-oldmaid { width: 36px; height: 50px; box-shadow: 0 0 0 3px var(--accent); }

/* pairs that have been put down: two small cards side by side */
.om-pairs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 26px; }
.om-pair {
  display: inline-flex; gap: 1px; padding: 1px; background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: 6px;
}
.om-pair .gcard.om-mini {
  width: auto; min-width: 28px; height: 25px; flex-direction: row; gap: 1px; padding: 0 3px;
  border-width: 1px; border-radius: 4px;
}
.om-mini .gr { font-size: 13px; }
.om-mini .gs { font-size: 13px; }
.om-pair.om-fresh { box-shadow: 0 0 0 2px var(--accent); }
.om-none { font-size: 12.5px; color: var(--muted); }

/* the reader's side */
.om-you { margin: 0; }
.om-you > .om-seatlbl { margin: 0 0 4px; }
.om-you .om-pairs { margin: 0 0 6px; }
.om-handlbl { margin: 0 0 6px; }
.om-hand { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; min-height: 62px; }
@media (min-width: 561px) {
  .om-hand .gcard { width: 44px; height: 62px; }
  /* the first hand has 17 cards: narrower cards keep them on one row */
  .om-hand--tight { gap: 3px; }
  .om-hand--tight .gcard { width: 34px; height: 48px; }
  .om-hand--tight .gcard .gr { font-size: 14px; }
  .om-hand--tight .gcard .gs { font-size: 13px; }
}
.om-hand .gcard.om-fresh { box-shadow: 0 0 0 3px var(--accent); }

@media (max-width: 560px) {
  .om-table { grid-template-columns: minmax(0, 1fr); }
  .om-hand { gap: 0; padding-left: 12px; row-gap: 8px; }
  .om-hand .gcard { margin-left: -12px; box-shadow: -2px 0 3px rgba(18, 20, 26, .12); }
}

@media (forced-colors: active) {
  .om-seat--from { border-color: Highlight; box-shadow: none; }
  .om-backs .om-hinted { outline-color: Highlight; }
  .om-pair.om-fresh, .om-hand .gcard.om-fresh { box-shadow: none; outline: 2px solid Highlight; }
}

/* ==========================================================================
   The narrated watch mode (old-maid-watch.js). The shared viewer's classes (.wv-*) come from brand.css; what
   is new is the table: one row for each player, with who it is on the left, the hand face up, and the pairs
   put down. Kept short so that the whole panel fits one laptop screen.
   ========================================================================== */
#oldmaid-watch .wv-head { margin-bottom: 4px; }
#oldmaid-watch .wv-stage { margin-bottom: 6px; padding: 6px 8px 5px; min-height: 0; }
#oldmaid-watch .wv-say { margin-bottom: 5px; padding: 6px 14px 7px; }
#oldmaid-watch .wv-why { margin-bottom: 5px; }
#oldmaid-watch .wv-options { gap: 0; }
#oldmaid-watch .om-wtable { display: grid; gap: 4px; }
#oldmaid-watch .om-wseat {
  display: grid; grid-template-columns: 104px auto minmax(0, 1fr); grid-template-areas: "id hand pairs";
  column-gap: 8px; align-items: start; justify-items: start;
  padding: 3px 8px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
}
#oldmaid-watch .om-wid { grid-area: id; min-width: 0; text-align: left; }
#oldmaid-watch .om-wid p { margin: 0; text-align: left; }
#oldmaid-watch .om-wname { font-size: 14px; font-weight: 700; color: var(--text); }
#oldmaid-watch .om-wseat.wv-seat--active .om-wname { color: var(--accent); }
#oldmaid-watch .om-wrole { font-weight: 700; }
#oldmaid-watch .om-whand { grid-area: hand; min-width: 0; }
#oldmaid-watch .om-whand .wv-cards { justify-content: flex-start; min-height: 42px; }
#oldmaid-watch .om-pairs { grid-area: pairs; justify-content: flex-start; align-content: flex-start; min-height: 26px; padding-top: 7px; }
#oldmaid-watch .om-wseat--out .om-whand { opacity: .75; }
/* a gold edge marks the Old Maid; the plain card border is too thin to see on a small card */
#oldmaid-watch .gcard.gcard--meld { border-width: 2.5px; }
#oldmaid-watch .om-wlegend { margin: 5px 0 0; min-height: 1.3em; }
#oldmaid-watch .wv-opt-label { white-space: normal; max-width: 150px; }
#oldmaid-watch .wv-opt { grid-template-columns: minmax(34px, 150px) 74px 1fr; }
@media (max-width: 560px) {
  #oldmaid-watch .om-wseat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "hand" "pairs"; }
  #oldmaid-watch .om-pairs { padding-top: 0; }
  /* a dealt hand of 17 cards is wider than a phone: let it wrap onto a second row */
  #oldmaid-watch .om-whand .wv-cards { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; padding-left: 10px; }
  #oldmaid-watch .om-wid { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
  #oldmaid-watch .wv-opt { grid-template-columns: minmax(30px, 110px) 1fr; }
  #oldmaid-watch .wv-opt-label { max-width: 110px; }
}
@media (forced-colors: active) {
  #oldmaid-watch .gcard.gcard--meld { border-color: Highlight; }
}

/* ==========================================================================
   Fixed-board layout (.pr-fixed, see docs/fixed-board-rollout.md). The board is a size container: the
   cards are sized from the room it has, and a crowded board (a phone, a short window) shows each player's
   pairs as a count ("5 pairs down") instead of every pair, so nothing is cut off and the page never scrolls.
   ========================================================================== */
.pr-fixed #old-maid-trainer { --hw: min(calc((100cqw - 30px) / 13.5), 62px, 10cqh); --bw: clamp(24px, 6cqh, 40px); }
.pr-fixed #old-maid-trainer .pr-status { margin-bottom: 8px; }
.pr-fixed .om-table { margin-bottom: 8px; }
.pr-fixed .om-backs { min-height: calc(var(--bw) * 1.45); }
.pr-fixed .om-backs .gcard--back { width: var(--bw); height: calc(var(--bw) * 1.45); min-width: 8px; flex: 0 1 var(--bw); }
.pr-fixed .om-backs .gcard--back + .gcard--back { margin-left: calc(var(--bw) * -.3); }
.pr-fixed .om-backs--tight .gcard--back + .gcard--back { margin-left: calc(var(--bw) * -.55); }
.pr-fixed .om-you { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.pr-fixed .om-handlbl { margin: 0 0 4px; }
.pr-fixed .om-hand, .pr-fixed .om-hand--tight { flex-wrap: nowrap; gap: 0; margin: 0; min-height: 0; padding-left: calc(var(--hw) * .25); }
.pr-fixed .om-hand .gcard, .pr-fixed .om-hand--tight .gcard {
  width: var(--hw); height: calc(var(--hw) * 1.4); margin-left: calc(var(--hw) * -.25); flex: 0 0 auto;
  box-shadow: -2px 0 3px rgba(18, 20, 26, .14);
}
.pr-fixed .om-hand .gcard .gr { font-size: max(13px, calc(var(--hw) * .33)); }
.pr-fixed .om-hand .gcard .gs { font-size: max(12px, calc(var(--hw) * .3)); }
.pr-fixed .om-hand .gcard.om-fresh { box-shadow: 0 0 0 3px var(--accent); }
/* a crowded board: pairs become a count */
@container board (max-width: 520px) {
  .pr-fixed #old-maid-trainer { --hw: min(calc((100cqw - 30px) / 8.5), 54px, 11cqh); }
  .pr-fixed .om-hand, .pr-fixed .om-hand--tight { flex-wrap: wrap; row-gap: 4px; }
  .pr-fixed .om-table { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pr-fixed .om-seat { padding: 5px 8px 6px; }
  .pr-fixed .om-seatlbl { display: flex; }
  .pr-fixed .om-seat > .om-role { display: none; }
}
@container board (max-width: 520px), (max-height: 600px) {
  .pr-fixed .om-pairs[data-n] > .om-pair { display: none; }
  .pr-fixed .om-pairs[data-n]::before { content: attr(data-n) " pairs down"; font-size: 12.5px; color: var(--muted); }
  .pr-fixed .om-pairs[data-n="1"]::before { content: "1 pair down"; }
  .pr-fixed .om-pairs { min-height: 0; }
}
@container board (max-height: 470px) {
  .pr-fixed .om-seat > .om-role { display: none; }
}
.pr-fixed .om-you > * { flex-shrink: 0; }
/* a short phone board: the two computer players sit side by side */
@container board (max-width: 520px) and (max-height: 470px) {
  .pr-fixed #old-maid-trainer { --bw: 22px; --hw: min(calc((100cqw - 30px) / 9), 40px, 11cqh); }
  .pr-fixed .om-table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .pr-fixed .om-seat { padding: 4px 6px 5px; }
  .pr-fixed .om-name { font-size: 14px; }
  .pr-fixed .om-backs { padding: 1px 0 2px; }
  .pr-fixed .om-you > .om-seatlbl { margin-bottom: 2px; }
  .pr-fixed .om-handlbl { font-size: 11.5px; }
}

/* The narrated table on a narrow board: each seat is a name line (with its pairs count) over one row of cards,
   a full hand of 17 overlapping so that it stays on one row. */
@container board (max-width: 520px) {
  .pr-fixed #oldmaid-watch .om-wseat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id pairs" "hand hand"; padding: 3px 6px 4px; row-gap: 2px; justify-items: stretch; }
  .pr-fixed #oldmaid-watch .om-pairs { padding-top: 0; justify-content: flex-end; align-self: center; }
  .pr-fixed #oldmaid-watch .om-whand .wv-cards { flex-wrap: nowrap; padding-left: 0; min-height: 0; }
  .pr-fixed #oldmaid-watch .om-whand .gcard { width: 28px; height: 39px; flex: 0 0 auto; margin-left: calc(-28px + (100cqw - 76px) / 17); }
  .pr-fixed #oldmaid-watch .om-whand .gcard:first-child { margin-left: 0; }
  .pr-fixed #oldmaid-watch .om-wid p { margin: 0; }
  .pr-fixed #oldmaid-watch .wv-caption.om-wlegend { display: none; }
}