/* ==========================================================================
   Go Fish practice board. Loaded after brand.css by practice/go-fish.html and
   only that page. It uses the brand tokens (--surface, --accent, ...) so the
   dark and light themes follow without anything here naming a color.

   The whole board - status line, the two players and the draw pile, the
   "Who asked for what" table, the reader's hand and the buttons - has to fit
   one laptop screen (1366x768) without scrolling, even in the middle of a
   deal when a hand holds 15 or more cards.
   ========================================================================== */

.gf-board .pr-status { margin-bottom: 10px; }

/* The two computer players, with the draw pile between them. Each player is one
   big button: clicking anywhere on it chooses that player to ask. */
.felt.gf-table {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); gap: 8px;
  align-items: stretch; margin: 0 0 10px;
  padding: 14px 16px;
}
.felt .gf-opp {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0;
  text-align: left; font: inherit; color: #EBE6D7; cursor: pointer;
  background: rgba(10, 30, 22, .45); border: 1.5px solid rgba(235, 230, 215, .25); border-radius: 11px; padding: 8px 10px 9px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.felt .gf-opp:hover:not(:disabled) { border-color: #EBE6D7; }
/* Not the reader's turn: the player cannot be chosen, but must stay fully readable. */
.felt .gf-opp:disabled { cursor: default; color: #EBE6D7; opacity: 1; }
.felt .gf-opp--active { border-color: #E8B931; }
.felt .gf-opp--active .gf-name { color: #E8B931; }
.felt .gf-opp--picked { border-color: #E8B931; box-shadow: 0 0 0 2px #E8B931; }
.felt .gf-opp--hint:not(.gf-opp--picked) { border-style: dashed; border-color: #E8B931; box-shadow: 0 0 0 2px #E8B931; }
.felt .gf-opp--out { opacity: .8; }
.felt .gf-opp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.felt .gf-name { font-size: 15px; font-weight: 700; }
.felt .gf-count {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(235, 230, 215, .4); color: #EBE6D7; white-space: nowrap;
}

/* A fan of face-down cards, one per card held. A long hand squeezes instead of wrapping. */
.gf-backs { display: flex; align-items: center; min-height: 38px; font-size: 12.5px; color: var(--muted); }
.gf-backs .gcard { width: 26px; height: 38px; min-width: 4px; flex: 0 1 26px; margin-left: -11px; border-radius: 5px; box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
.gf-backs .gcard:first-child { margin-left: 0; }
.gf-backs--empty { font-style: italic; }

.gf-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; }
.gf-line-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gf-chips { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.gf-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px;
  font-size: 12px; font-weight: 700; line-height: 1; border-radius: 5px;
  border: 1px solid var(--line-firm); background: var(--surface); color: var(--text);
}
.gf-chip--book { border-color: var(--brass); color: var(--brass); }
.gf-chip--gone { text-decoration: line-through; opacity: .6; }
.gf-none { font-size: 12.5px; font-style: italic; color: var(--muted); }
/* Inside a player's panel the book chips are a little smaller, so ten books still fit on two lines at most. */
.gf-opp .gf-line { min-height: 20px; gap: 2px 6px; }
.gf-opp .gf-chips { gap: 2px; }
.gf-opp .gf-chip { min-width: 19px; height: 20px; padding: 0 3px; font-size: 11.5px; }

/* The draw pile and the count of books made. */
.gf-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.gf-stack { display: block; padding: 0 5px 5px 0; }
.gf-stack .gcard { width: 38px; height: 54px; box-shadow: 2px 2px 0 var(--line-firm), 4px 4px 0 var(--line); }
.gf-pile { margin: 4px 0 0; font-size: 13px; line-height: 1.25; color: var(--muted); }
.gf-pile b { font-size: 19px; color: var(--text); }
.gf-made { margin: 0; font-size: 12px; line-height: 1.25; color: var(--muted); }

/* Who asked for what: one row per player, oldest ask first. */
.gf-log { width: 100%; margin: 0 0 8px; font-size: 13px; }
.gf-log caption {
  text-align: left; padding: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.gf-log-key { margin-left: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.gf-log th[scope="row"] {
  width: 56px; padding: 3px 8px 3px 0; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text);
  vertical-align: middle; white-space: nowrap;
}
.gf-log td { padding: 3px 0; vertical-align: middle; }
.gf-log td .gf-chip { margin: 1px 3px 1px 0; }
.gf-log td .gf-none { margin-right: 6px; }

/* The reader's hand, in groups of the same rank. Cards of one rank overlap, with the rank and suit at the
   top left so each one still shows. */
.gf-handhead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; }
.gf-handhead .g-lbl { margin: 0; }
.gf-mybooks { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.gf-hand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-height: 62px; margin: 0 0 10px; padding-top: 6px; }
.gf-group { display: flex; border-radius: 9px; }
.gf-hand .gcard {
  width: 42px; height: 58px; align-items: flex-start; justify-content: flex-start; padding: 5px 0 0 6px; text-align: left;
}
.gf-hand .gcard .gr { font-size: 15px; }
.gf-hand .gcard .gs { font-size: 14px; }
.gf-group .gcard + .gcard { margin-left: -22px; box-shadow: -2px 0 3px rgba(18, 20, 26, .16); }
.gf-group--hint { outline: 2px dashed var(--brass); outline-offset: 3px; }

/* On a wide screen the hand left most of the board empty and the cards were hard to read, so they
   grow by about a quarter there. A long hand still drops to the snug and tight sizes below. */
@media (min-width: 900px) {
  .gf-hand .gcard {
    width: 53px; height: 73px; padding: 6px 0 0 7px;
  }
  .gf-hand .gcard .gr {
    font-size: 19px;
  }
  .gf-hand .gcard .gs {
    font-size: 17px;
  }
  .gf-group .gcard + .gcard {
    margin-left: -30px;
  }
}
.gf-hand--snug { gap: 8px 8px; }
.gf-hand--snug .gcard { width: 38px; height: 54px; padding-left: 5px; }
.gf-hand--snug .gf-group .gcard + .gcard { margin-left: -24px; }
.gf-hand--tight { gap: 6px 6px; }
.gf-hand--tight .gcard { width: 36px; height: 52px; padding-left: 4px; }
.gf-hand--tight .gf-group .gcard + .gcard { margin-left: -24px; }
/* A 10 has two digits: its cards overlap a little less, at every hand size, so both digits of each one still show. */
.gf-group--ten .gcard + .gcard, .gf-hand--snug .gf-group--ten .gcard + .gcard, .gf-hand--tight .gf-group--ten .gcard + .gcard { margin-left: -14px; }

@media (max-width: 560px) {
  .gf-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gf-center { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: center; gap: 14px; }
  .gf-center .gf-stack { display: none; }
  .gf-log th[scope="row"] { width: 46px; }
}

@media (forced-colors: active) {
  .gf-opp--picked, .gf-opp--hint:not(.gf-opp--picked) { outline: 3px solid Highlight; }
  .gf-chip--gone { text-decoration: line-through; opacity: 1; }
}

/* ==========================================================================
   The narrated watch of Go Fish (#gofish-watch, built by go-fish-watch.js on the shared .wv-* viewer).

   Three players, one row each, in the order they play, with the draw pile beside them. A row has the
   player's name above its cards, which sit in groups of one rank, and the books that player has put down
   (four cards each, stacked) to the right. The whole panel has to stay about one laptop screen tall, so a
   hand of 20 cards wraps its groups instead of making the table wider.
   ========================================================================== */
#gofish-watch { padding-top: 12px; padding-bottom: 8px; }
/* The panel has to stay about one laptop screen tall with the list of choices open: a little less air than the shared defaults. */
#gofish-watch .wv-stage { margin-bottom: 8px; padding: 6px 8px 4px; }
#gofish-watch .wv-controls { padding-top: 6px; }
#gofish-watch .wv-controls .btn { padding: 6px 14px; }
#gofish-watch .wv-say { padding: 6px 14px 7px; min-height: 0; }
#gofish-watch .wv-text { line-height: 1.42; }
#gofish-watch .wv-why { margin-bottom: 4px; }
#gofish-watch .wv-opt { font-size: 13px; line-height: 1.3; }
.gfw-table { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 0 10px; align-items: start; }
.gfw-seats { display: grid; gap: 2px; min-width: 0; }
.gfw-seat { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 2px 4px; border-radius: 9px; }
.gfw-id { min-width: 0; }
.gfw-seat .wv-name { text-align: left; font-size: 13px; }
.gfw-cards { margin: 0; font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.gfw-seat--active .gfw-cards { color: var(--text); }
.gfw-hand { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: center; gap: 3px 7px; min-width: 0; min-height: 46px; padding-top: 3px; }
.gfw-group { justify-content: flex-start; min-height: 0; }
/* The cards of a hand overlap a little more than the shared rule has them, with the rank and the suit at the top left (as in the
   practice game's own hand), so a hand of 20 cards needs two rows of groups, not three. A 10 has two digits, so the card laid over
   it is moved over a little more. */
.gfw-hand .gcard { align-items: flex-start; justify-content: flex-start; padding: 3px 0 0 4px; position: relative; }
.gfw-hand .gcard + .gcard { margin-left: -13px; }
.gfw-hand .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -11px; }
/* A card that has just moved, or is raised, must not be laid over its right-hand neighbor (the shared rule does that): the
   neighbor's rank is at its left edge, which is the part that would be covered. */
.gfw-hand .wv-cards .gcard.wv-fresh, .gfw-hand .wv-cards .gcard.wv-chosen { z-index: auto; }
/* A hand of more than 12 cards: smaller cards, laid closer. */
.gfw-hand--big { min-height: 42px; }
.gfw-hand--big .gcard { width: 27px; height: 39px; padding: 2px 0 0 3px; }
.gfw-hand--big .gcard .gr { font-size: 11px; }
.gfw-hand--big .gcard .gs { font-size: 10px; }
.gfw-hand--big .gcard + .gcard { margin-left: -12px; }
.gfw-hand--big .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -10px; }
.gfw-books { max-width: 176px; min-width: 58px; }
.gfw-books-lbl { margin: 0 0 2px; font-size: 11px; line-height: 1.2; color: var(--muted); text-align: right; white-space: nowrap; }
.gfw-stacks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 7px; }
/* A book is four cards of one rank, stacked: only the top card shows its rank, which is all a book needs. */
.gfw-book { min-height: 0; }
.gfw-book .gcard { width: 22px; height: 31px; border-radius: 4px; }
.gfw-book .gcard .gr { font-size: 10.5px; }
.gfw-book .gcard .gs { font-size: 9.5px; }
.gfw-book .gcard + .gcard, .wv-cards.gfw-book .gcard.wv-after-ten { margin-left: -17px; }

.gfw-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; text-align: center; }
.gfw-stack { display: block; padding: 0 5px 5px 0; }
.gfw-stack .gcard { width: 34px; height: 48px; box-shadow: 2px 2px 0 var(--line-firm), 4px 4px 0 var(--line); }
.gfw-count { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.2; }
.gfw-made { margin: 3px 0 0; font-size: 12px; line-height: 1.25; color: var(--muted); }
.gfw-legend { margin: 4px 0 0; min-height: 1.3em; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .gfw-table { grid-template-columns: minmax(0, 1fr); }
  .gfw-pile { flex-direction: row; justify-content: center; gap: 4px 12px; flex-wrap: wrap; padding-top: 6px; }
  .gfw-stack .gcard { width: 26px; height: 37px; }
  .gfw-seat { grid-template-columns: minmax(0, 1fr) auto; row-gap: 1px; }
  .gfw-id { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .gfw-hand { grid-column: 1 / -1; }
  .gfw-books { grid-column: 1 / -1; max-width: none; display: flex; align-items: center; gap: 8px; }
  .gfw-books-lbl { text-align: left; margin: 0; }
  .gfw-stacks { justify-content: flex-start; }
}

/* ==========================================================================
   Fixed-board layout (.pr-fixed, see docs/fixed-board-rollout.md). The board is a size container, so the
   cards are sized from the room it has: the hand takes whatever height is left under the table and the log,
   and its cards grow or shrink (and wrap to more rows) to fit. The page never scrolls.
   ========================================================================== */
.pr-fixed .gf-board { --gw: clamp(30px, min(9.5cqw, 12cqh), 74px); --bw: clamp(16px, 4.2cqh, 34px); }
.pr-fixed .gf-board:has(.gf-hand--snug) { --gw: clamp(30px, min(8cqw, 10cqh), 62px); }
.pr-fixed .gf-board:has(.gf-hand--tight) { --gw: clamp(30px, min(6.6cqw, 8cqh), 52px); }
.pr-fixed .gf-board .pr-status { margin-bottom: 8px; }
.pr-fixed .gf-table { margin-bottom: 8px; }
.pr-fixed .gf-backs { min-height: calc(var(--bw) * 1.45); }
.pr-fixed .gf-backs .gcard { width: var(--bw); height: calc(var(--bw) * 1.45); flex-basis: var(--bw); margin-left: calc(var(--bw) * -.42); }
.pr-fixed .gf-backs .gcard:first-child { margin-left: 0; }
.pr-fixed .gf-stack .gcard { width: calc(var(--bw) * 1.3); height: calc(var(--bw) * 1.9); }
.pr-fixed .gf-log { margin-bottom: 6px; }
.pr-fixed .gf-handhead { margin-bottom: 4px; }
.pr-fixed .gf-hand {
  flex: 1 1 0; min-height: 0; overflow: hidden; align-content: flex-start; align-items: flex-start;
  gap: 6px 10px; margin: 0; padding: 4px 0 0 0;
}
.pr-fixed .gf-hand .gcard, .pr-fixed .gf-hand--snug .gcard, .pr-fixed .gf-hand--tight .gcard {
  width: var(--gw); height: calc(var(--gw) * 1.4); padding: calc(var(--gw) * .1) 0 0 calc(var(--gw) * .13);
}
.pr-fixed .gf-hand .gcard .gr { font-size: max(13px, calc(var(--gw) * .34)); }
.pr-fixed .gf-hand .gcard .gs { font-size: max(12px, calc(var(--gw) * .3)); }
.pr-fixed .gf-hand .gf-group .gcard + .gcard,
.pr-fixed .gf-hand--snug .gf-group .gcard + .gcard,
.pr-fixed .gf-hand--tight .gf-group .gcard + .gcard { margin-left: calc(var(--gw) * -.52); }
.pr-fixed .gf-hand .gf-group--ten .gcard + .gcard,
.pr-fixed .gf-hand--snug .gf-group--ten .gcard + .gcard,
.pr-fixed .gf-hand--tight .gf-group--ten .gcard + .gcard { margin-left: calc(var(--gw) * -.34); }
.pr-fixed .gf-hand--snug, .pr-fixed .gf-hand--tight { gap: 5px 8px; }
/* A short board (a small laptop window, a phone): the log's key and the draw pile's picture step aside. */
@container board (max-height: 520px) {
  .pr-fixed .gf-log-key { display: none; }
  .pr-fixed .gf-log th[scope="row"] { padding: 1px 8px 1px 0; }
  .pr-fixed .gf-log td { padding: 1px 0; }
  .pr-fixed .gf-stack { display: none; }
  .pr-fixed .gf-opp { padding: 5px 8px 6px; gap: 4px; }
}
@container board (max-height: 430px) {
  .pr-fixed .gf-log { display: none; }
}

/* The narrated table: its cards grow with the board (a hand of more than 12 cards keeps the smaller size). */
.pr-fixed #gofish-watch { --gwc: clamp(30px, min(6.5cqw, 6cqh), 52px); }
.pr-fixed .gfw-hand .gcard { width: var(--gwc); height: calc(var(--gwc) * 1.4); padding: calc(var(--gwc) * .08) 0 0 calc(var(--gwc) * .12); }
.pr-fixed .gfw-hand .gcard .gr { font-size: max(12px, calc(var(--gwc) * .34)); }
.pr-fixed .gfw-hand .gcard .gs { font-size: max(11px, calc(var(--gwc) * .3)); }
.pr-fixed .gfw-hand .gcard + .gcard { margin-left: calc(var(--gwc) * -.5); }
.pr-fixed .gfw-hand .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: calc(var(--gwc) * -.4); }
.pr-fixed .gfw-hand--big .gcard { width: max(27px, calc(var(--gwc) * .8)); height: max(38px, calc(var(--gwc) * 1.12)); }
.pr-fixed .gfw-hand--big .gcard + .gcard { margin-left: calc(max(27px, var(--gwc) * .8) * -.5); }
.pr-fixed .gfw-hand--big .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: calc(max(27px, var(--gwc) * .8) * -.4); }
.pr-fixed .gfw-hand { min-height: calc(var(--gwc) * 1.4); }
@container board (max-width: 520px) {
  .pr-fixed .gfw-seat { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-fixed .gfw-id { grid-column: 1; grid-row: 1; }
  .pr-fixed .gfw-books { grid-column: 2; grid-row: 1; min-width: 0; max-width: none; }
  .pr-fixed .gfw-hand { grid-column: 1 / -1; grid-row: 2; }
}
@container board (max-height: 470px) {
  .pr-fixed .gfw-legend, .pr-fixed .gfw-made { display: none; }
}

/* On the felt: the draw-pile count, the books line and its "none yet" read light, like the rest of the table. */
.felt .gf-pile, .felt .gf-made, .felt .gf-none, .felt .gf-line-lbl { color: #C9D8CF; }
.felt .gf-pile b { color: #EBE6D7; }