/* ==========================================================================
   Golf solitaire practice board.

   golf-solitaire-trainer.js sets the size of every card and how far the cards in a column
   overlap, so a full column of five still fits the board. This file says how things line up
   and what they look like. Every color comes from the site's variables (see brand.css),
   so the light and dark themes both work. Loaded after brand.css.
   ========================================================================== */

.gs-board { padding: 12px 16px 12px; }
.gs-board .pr-status { margin: 0 0 8px; padding: 7px 12px; font-size: 15px; line-height: 1.4; }
@media (min-width: 561px) { .gs-board .pr-status { min-height: 58px; } }
.gs-board .h-stats { margin: 0 0 8px; padding-bottom: 5px; }
.gs-board .pr-tip { margin-top: 10px; }

/* The top row: the draw pile over the first column, the discard pile over the second and third,
   and the line that says which ranks fit beside it. One grid with the columns, so things line up. */
.gs-top, .gs-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 10px; }
.gs-top { grid-template-rows: auto auto; margin: 0 0 12px; }
.gs-cols { align-items: start; }

.gs-cap { margin: 0 0 3px; grid-row: 1; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-cap--draw { grid-column: 1; }
.gs-cap--pile { grid-column: 2 / span 3; }
.gs-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.gs-cell--draw { grid-column: 1; }
.gs-cell--pile { grid-column: 2 / span 2; justify-content: flex-start; }
.gs-cell--score { grid-column: 4 / span 4; justify-content: flex-start; align-items: center; align-self: center; }
.gs-fan { display: flex; align-items: flex-start; }
.gs-fits { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.gs-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* Cards: the rank and suit sit in the top-left corner so a card that is partly covered still reads. */
.gs-board .gcard { position: relative; flex: 0 0 auto; padding: 0; }
.gs-board .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px;
  padding: 2px 4px; line-height: 1; text-align: left; overflow: hidden;
  border-color: rgba(18, 20, 26, 0.34);
}
.gs-board .gcard .gr, .gs-board .gcard .gs { font-size: inherit; line-height: 1; }
.gs-board .gcard:not(.gcard--back)::after {
  content: attr(data-s); position: absolute; right: 5px; bottom: 3px; font-size: 2.1em; line-height: 1; opacity: .9;
}
.gs-board button.gcard:hover { transform: none; border-color: var(--ink); }
.gs-board button.gcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }
/* A card with cards below it cannot be played yet; it stays fully readable, only the pointer says so. */
.gs-board .gcard.gs-covered { cursor: default; }
/* The two cards under the top of the discard pile peek out, a little faded. */
.gs-board .gcard.gs-under { opacity: .7; }

.gs-slot {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto;
  background: transparent; color: var(--muted); font: inherit;
  border: 1.5px dashed var(--line-firm); border-radius: 7px;
}
.gs-slot:disabled { opacity: .6; }
.gs-count {
  position: absolute; right: 3px; bottom: 3px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line-firm);
  font-size: 12px; font-weight: 700; line-height: 1.5;
}

/* What the Hint points at (gold). */
.gs-board .gs-hint { box-shadow: 0 0 0 3px var(--brass); z-index: 3; }

.gs-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.gs-controls .btn:disabled { opacity: .38; cursor: not-allowed; }
.gs-controls .btn:disabled:hover { background: transparent; color: var(--text); }

@media (max-width: 560px) {
  .gs-board { padding: 10px 8px; }
  .gs-top, .gs-cols { column-gap: 4px; }
  .gs-cap { font-size: 9px; letter-spacing: .02em; }
  .gs-cap--draw { font-size: 8px; letter-spacing: 0; overflow: visible; }   /* "Draw pile" must fit over one narrow column */
  .gs-fits { font-size: 13px; }
}

@media (forced-colors: active) {
  .gs-board .gs-hint { outline: 3px double Highlight; box-shadow: none; }
  .gs-slot { border-color: CanvasText; }
}

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   golf-solitaire-trainer.js sizes the cards from the board's width and its height, so the top row and a full
   column fit the board. */
.pr-fixed .gs-board .pr-status { min-height: 0; }
.pr-fixed .gs-board .gs-cols { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pr-fixed .pr-dock .gs-controls { margin-top: 0; }
@container board (max-height: 470px) {
  .pr-fixed .gs-board .pr-status { font-size: 13px; padding: 6px 10px; margin-bottom: 6px; }
  .pr-fixed .gs-board .h-stats { margin-bottom: 4px; padding-bottom: 3px; }
}

/* ==========================================================================
   Watch a narrated deal: the table (golf-solitaire-watch.js draws it into the viewer's stage).

   Nothing here is clickable. The size of a card comes from the width of the stage (a container query), so the seven
   columns fit any width without a script. Every color comes from the site's variables, so both themes work. The shared
   viewer's own rules (.wv-*) are in brand.css; nothing in this file changes them.
   ========================================================================== */
#golf-solitaire-watch .wv-stage { container: gwstage / inline-size; padding: 6px 8px 6px; }
.gw-table { --gw-gap: 8px; --gw-w: 40px; --gw-h: calc(var(--gw-w) * 1.4); display: flex; flex-direction: column; align-items: center; gap: 4px; }
@supports (width: 1cqw) { .gw-table { --gw-w: clamp(28px, calc((100cqw - 6 * var(--gw-gap)) / 7), 44px); } }
.gw-key { align-self: stretch; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

.gw-piles { display: grid; grid-template-columns: repeat(7, var(--gw-w)); column-gap: var(--gw-gap); align-items: start; }
.gw-cap { grid-row: 1; margin: 0 0 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; text-align: left; }
.gw-cap--draw { grid-column: 1; }
.gw-cap--pile { grid-column: 2 / span 3; }
.gw-cell { grid-row: 2; display: flex; align-items: flex-start; min-width: 0; }
.gw-cell--draw { grid-column: 1; justify-content: center; }
.gw-cell--pile { grid-column: 2 / span 2; }
.gw-cell--fits { grid-column: 4 / span 4; align-self: center; font-size: 13px; font-weight: 700; color: var(--text); }
.gw-fan { display: flex; }
.gw-fan .gcard + .gcard { margin-left: calc(var(--gw-w) * -0.64); }

.gw-nums, .gw-cols { display: grid; grid-template-columns: repeat(7, var(--gw-w)); column-gap: var(--gw-gap); justify-content: center; align-items: start; }
.gw-colno { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; font-weight: 700; }
.gw-col { display: flex; flex-direction: column; align-items: center; min-height: calc(var(--gw-h) * 2.2); }
.gw-col .gcard + .gcard { margin-top: calc(var(--gw-h) * -0.7); }

/* a wide stage has room for bigger cards */
@container gwstage (min-width: 560px) { .gw-table { --gw-w: 54px; --gw-gap: 12px; } }
@container gwstage (max-width: 430px) { .gw-table { --gw-gap: 4px; } .gw-cap { font-size: 9px; } .gw-cell--fits { font-size: 11px; } }

.gw-table .gcard { position: relative; flex: 0 0 auto; width: var(--gw-w); height: var(--gw-h); padding: 0; border-radius: 5px; border-width: 1.2px; transition: none; }
.gw-table .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px; padding: 1px 3px; line-height: 1; text-align: left; overflow: hidden;
  font-size: calc(var(--gw-w) * 0.29); border-color: rgba(18, 20, 26, 0.34);
}
.gw-table .gcard .gr, .gw-table .gcard .gs { font-size: inherit; line-height: 1; }
.gw-table .gcard:not(.gcard--back)::after { content: attr(data-s); position: absolute; right: 3px; bottom: 2px; font-size: 2em; line-height: 1; opacity: .9; }
.gw-table .gcard.gw-under { opacity: .7; }
.gw-count {
  position: absolute; right: 2px; bottom: 2px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-firm); font-size: 11px; font-weight: 700; line-height: 1.45;
}
.gw-slot {
  display: inline-flex; flex: 0 0 auto; width: var(--gw-w); height: var(--gw-h);
  border: 1.5px dashed var(--line-firm); border-radius: 5px;
}

/* a card that has just been played or turned over (red outline) */
.gw-table .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }

#golf-solitaire-watch .wv-opt { font-size: 13px; line-height: 1.25; }
#golf-solitaire-watch .wv-options { gap: 2px; margin-top: 2px; }
#golf-solitaire-watch .wv-head { margin-bottom: 4px; }
#golf-solitaire-watch .wv-say { padding: 6px 14px 7px; margin-bottom: 5px; }
#golf-solitaire-watch .wv-text { font-size: 15px; line-height: 1.4; }
#golf-solitaire-watch .wv-stage { margin-bottom: 6px; }

@media (forced-colors: active) {
  .gw-table .gcard.wv-fresh { outline-color: Highlight; }
  .gw-slot { border-color: CanvasText; }
}