/* ==========================================================================
   Rummy practice board.

   Styles only the Rummy practice page (practice/rummy.html). It is loaded
   after the shared stylesheet and uses the shared colors (the CSS variables)
   and card faces, so the board follows the light and dark themes. Every class
   here starts with "ru-".

   The whole board has to fit one laptop screen (1366 x 768) without
   scrolling: the status line, the opponent's cards, the table, both piles,
   your whole hand and the buttons. The cards are small for that reason, the
   table is the only part that grows (it wraps onto a second and third row
   when many groups have been put down), and the piles sit beside it instead
   of above it.
   ========================================================================== */

#rummy-trainer .pr-status { margin-bottom: 10px; }
#rummy-trainer .g-stats { padding-bottom: 6px; margin-bottom: 10px; }

/* Your opponent: the name and a fan of face-down cards on one line. */
.ru-opprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 10px; }
.ru-opprow .g-lbl { margin: 0; flex: 0 0 auto; max-width: 100%; }
.ru-opphand { margin: 0; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ru-opphand .gcard { width: 26px; height: 37px; }
.ru-opphand .gcard .gr { font-size: 11px; }
.ru-opphand .gcard .gs { font-size: 10px; }
.ru-opphand .gcard--back + .gcard--back { margin-left: -15px; }
/* After the deal the opponent's cards are shown face up, and must be readable. */
.ru-opphand--up .gcard { width: 32px; height: 45px; }
.ru-opphand--up .gcard .gr { font-size: 13px; }
.ru-opphand--up .gcard .gs { font-size: 12px; }

/* The middle: the two piles on the left, the groups on the table beside them. */
.ru-mid { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 12px; }
.ru-piles { display: flex; gap: 12px; flex: 0 0 auto; }
.ru-pile { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ru-pile .gcard { width: 44px; height: 62px; }
.ru-cap { margin: 0; max-width: 72px; text-align: center; line-height: 1.2; font-size: 10.5px; font-weight: 700;
          letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ru-empty-pile { opacity: .6; border-style: dashed; }

.ru-table { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; min-height: 62px; }
.ru-none { margin: 0; align-self: center; font-size: 14px; }

/* One group on the table. It is a button: with a card selected, pressing it adds the card to it. */
.ru-group {
  display: flex; margin: 0; padding: 5px 6px; font: inherit; color: inherit; background: transparent;
  border: 1.5px dashed var(--line-firm); border-radius: 9px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ru-group:disabled { cursor: default; color: inherit; }
.ru-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ru-group .gcard { width: 30px; height: 42px; border-radius: 5px; border-width: 1.2px; }
.ru-group .gcard .gr { font-size: 12px; }
.ru-group .gcard .gs { font-size: 11px; }
.ru-group .gcard + .gcard { margin-left: -9px; box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
/* A 10 has two digits, so the card laid over its right edge covers a little less of it and the 0 stays readable. */
.ru-group .gcard.ru-ten + .gcard { margin-left: -7px; }
/* A group you put down has a solid gold border. */
.ru-group--mine { border-style: solid; border-color: var(--brass); }
/* The groups the selected card fits, and the group a Hint names. */
.ru-group--fits, .ru-group--hint { outline: 3px solid var(--text); outline-offset: 2px; }

/* Your hand. The label says what the cards in it would cost you, so it is plain text, not a small heading. */
.ru-handhead { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 8px; }
.ru-handhead .g-lbl { margin: 0; flex: 1 1 280px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.ru-tools { display: flex; gap: 8px; }
.ru-tools .btn { font-size: 13px; padding: 4px 13px; }
.ru-tools .btn:disabled { opacity: .38; cursor: not-allowed; }
.ru-tools .btn:disabled:hover { background: transparent; color: var(--text); }
.ru-hand { gap: 4px; margin: 0 0 10px; padding-top: 6px; }
@media (min-width: 561px) {
  .ru-hand .gcard { width: 44px; height: 62px; }
}
/* The card you just took or drew. */
.gcard.ru-new { box-shadow: 0 0 0 2px var(--accent); }

/* Phone: overlap the cards of your hand so eleven of them fit in one or two even rows. */
@media (max-width: 560px) {
  .ru-hand { gap: 0; row-gap: 8px; padding-left: 14px; }
  .ru-hand .gcard { margin-left: -14px; box-shadow: -2px 0 3px rgba(18, 20, 26, .12); }
  .ru-hand .gcard.ru-ten + .gcard { margin-left: -11px; }
  .ru-mid { flex-direction: column; }
  .ru-table { width: 100%; }
}
/* The Coach sits under the board on a phone or tablet, and the newest tip appears under the buttons. */
@media (max-width: 899px) {
  #rummy-trainer { display: flex; flex-direction: column; }
  #rummy-trainer .ru-handhead { display: contents; }
  #rummy-trainer .ru-handhead .g-lbl { margin: 0 0 8px; flex: 0 0 auto; }
  #rummy-trainer .ru-tools { order: 5; margin: 0 0 12px; }
  #rummy-trainer .pr-tip { order: 6; }
}

@media (forced-colors: active) {
  .ru-group { border: 2px dashed CanvasText; }
  .ru-group--mine { border: 3px double Highlight; }
  .ru-group--fits, .ru-group--hint { outline-color: Highlight; }
  .gcard.ru-new { outline: 3px solid Highlight; box-shadow: none; }
}

/* ==========================================================================
   Narrated deal (rummy-watch.js): the shared two-seat table (.wv-table2) with the two piles on the
   left of the middle band and the groups on the table beside them. The whole panel, the table, the
   narration, its list of choices and the controls, has to stay about one laptop screen tall, so the
   cards are small and the groups wrap onto a second row only when many have been put down.
   ========================================================================== */
#rummy-watch .wv-head { margin-bottom: 4px; }
#rummy-watch .wv-stage { margin-bottom: 6px; padding-top: 6px; }
#rummy-watch .wv-say { margin-bottom: 6px; }
#rummy-watch .wv-why { margin-bottom: 6px; }
#rummy-watch .wv-options { gap: 1px; }
#rummy-watch .wv-opt { font-size: 13px; line-height: 1.3; }
.ru-w-table { gap: 4px; }
.ru-w-mid { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 6px 18px; width: 100%; min-height: 62px; }
.ru-w-piles { display: flex; gap: 14px; flex: 0 0 auto; }
.ru-w-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ru-w-pile .wv-cards { min-height: 42px; }
.ru-w-pile .wv-caption { font-size: 11.5px; }
.ru-w-groups { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 4px 8px; flex: 1 1 auto; min-width: 0; }
.ru-w-none { align-self: center; padding-top: 18px; }
.ru-w-group { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1px 5px 3px; border: 1.2px dashed var(--line-firm); border-radius: 8px; }
.ru-w-group .wv-name { font-size: 11px; line-height: 1.2; }
.ru-w-group .wv-cards { min-height: 0; }
.ru-w-group .wv-cards .gcard { width: 27px; height: 38px; }
.ru-w-group .wv-cards .gcard .gr { font-size: 11.5px; }
.ru-w-group .wv-cards .gcard .gs { font-size: 10.5px; }
.ru-w-group .wv-cards .gcard + .gcard { margin-left: -9px; }
.ru-w-group .wv-cards:not(.wv-cards--loose) .gcard.wv-after-ten { margin-left: -7px; }
.ru-w-legend { min-height: 1.3em; }
@media (max-width: 560px) {
  .ru-w-mid { flex-direction: column; align-items: center; }
  .ru-w-groups { justify-content: center; width: 100%; }
}

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   Cards are sized from the board (--rw, a hand card's width): the hand overlaps a little and sits on the bottom
   edge; the piles and the groups on the table share the flexible middle. A crowded table late in a deal scrolls
   inside its own box rather than pushing the hand off the board. */
.pr-fixed #rummy-trainer > * { --rw: min(calc((100cqw - 40px) / 9.9), 70px, 10.5cqh); }
.pr-fixed #rummy-trainer .ru-hand { flex-wrap: nowrap; gap: 0; padding: 4px 0 0 calc(var(--rw) * .15); margin: 0; }
.pr-fixed #rummy-trainer .ru-hand .gcard { width: var(--rw); height: calc(var(--rw) * 1.4); margin-left: calc(var(--rw) * -.15); box-shadow: -2px 0 3px rgba(18, 20, 26, .14); }
.pr-fixed #rummy-trainer .ru-hand .gcard .gr { font-size: max(12px, calc(var(--rw) * .32)); }
.pr-fixed #rummy-trainer .ru-hand .gcard .gs { font-size: max(11px, calc(var(--rw) * .3)); }
.pr-fixed #rummy-trainer .ru-handhead { margin: 0 0 4px; }
.pr-fixed #rummy-trainer .ru-mid { flex: 1 1 0; min-height: 0; margin-bottom: 8px; overflow: hidden; }
.pr-fixed #rummy-trainer .ru-pile .gcard { width: calc(var(--rw) * .9); height: calc(var(--rw) * 1.26); }
.pr-fixed #rummy-trainer .ru-table { align-self: stretch; max-height: 100%; overflow-y: auto; box-sizing: border-box; }
.pr-fixed #rummy-trainer .ru-group .gcard { width: max(24px, calc(var(--rw) * .6)); height: max(34px, calc(var(--rw) * .84)); }
.pr-fixed #rummy-trainer .ru-opprow { margin-bottom: 8px; }
@container board (max-width: 520px) {
  .pr-fixed #rummy-trainer .g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .pr-fixed #rummy-trainer .g-stat { font-size: 11.5px; }
  .pr-fixed #rummy-trainer .g-stat b { font-size: 16px; }
  .pr-fixed #rummy-trainer .ru-handhead .g-lbl { font-size: 12px; }
  .pr-fixed #rummy-trainer .ru-mid { gap: 10px; }
}
/* on a phone the piles sit above the groups (the 560px rule above): the groups take what is left under them */
@media (max-width: 560px) {
  .pr-fixed #rummy-trainer .ru-table { flex: 1 1 0; min-height: 0; max-height: none; }
}
@container board (max-height: 470px) {
  .pr-fixed #rummy-trainer .g-stats { margin-bottom: 6px; padding-bottom: 4px; }
  .pr-fixed #rummy-trainer .ru-opprow .g-lbl { font-size: 10px; }
  .pr-fixed #rummy-trainer .ru-pile .g-lbl { font-size: 9.5px; }
  .pr-fixed #rummy-trainer .ru-handhead .g-lbl { font-size: 11.5px; line-height: 1.3; }
}
/* (on a phone the hand header's parts are items of the board itself, see the 899px rule above) */
.pr-fixed #rummy-trainer .ru-handhead .g-lbl { flex: 0 0 auto; }
.pr-fixed #rummy-trainer .ru-tools { margin: 6px 0 0; }