/* ==========================================================================
   FreeCell practice board.

   freecell-trainer.js sets the size of every card and how far the cards in a column
   overlap, so the longest column still fits the screen. 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.
   ========================================================================== */

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

/* One grid for the top row and the columns, so the four free cells sit over the first four columns
   and the four home piles over the last four. */
.fc-top, .fc-cols {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 8px;
}
.fc-top { grid-template-rows: auto auto; margin: 0 0 8px; }
.fc-cols { align-items: start; min-height: 150px; }

.fc-cap { margin: 0 0 3px; grid-row: 1; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-cap--cells { grid-column: 1 / span 4; }
.fc-cap--home { grid-column: 5 / span 4; }
.fc-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.fc-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. */
.fc-board .gcard { position: relative; flex: 0 0 auto; padding: 0; }
.fc-board .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;
}
.fc-board .gcard .gr, .fc-board .gcard .gs { font-size: inherit; line-height: 1; }
.fc-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;
}
.fc-board .gcard:not(.gcard--back) { border-color: rgba(18, 20, 26, 0.34); }
.fc-board button.gcard:hover { transform: none; border-color: var(--ink); }
.fc-board button.gcard:focus-visible, .fc-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }

/* On the table look (.tbl in brand.css) a big card shows its suit under its rank. A FreeCell column overlaps every
   card, so the suit goes beside the rank, in the top-right corner, where it still shows on a covered card. */
@container (min-width: 40px) {
  .tbl .fc-board .gcard .gs { top: 4cqw; left: auto; right: 7cqw; font-size: 24cqw; }
}

/* An empty place a card can be put: an empty column, an empty free cell, an empty home pile. */
.fc-slot {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto;
  background: transparent; color: var(--muted); font: inherit; cursor: pointer;
  border: 1.5px dashed var(--line-firm); border-radius: 7px;
}
.fc-board .fc-free.fc-slot { background: var(--surface-2); border-style: solid; }
.fc-glyph { font-size: 26px; line-height: 1; opacity: .6; }
.fc-glyph--red { color: var(--accent); }

/* Picked up (red outline), where it can go (dashed), and what the Hint points at (gold). */
.fc-board .fc-sel { box-shadow: 0 0 0 3px var(--accent); z-index: 3; }
.fc-board .fc-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.fc-board .fc-hint-from { box-shadow: 0 0 0 3px var(--brass); z-index: 3; }
.fc-board .fc-hint-to { outline: 3px solid var(--brass); outline-offset: 2px; }
.fc-board .fc-sel.fc-hint-from { box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--brass); }

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

@media (max-width: 560px) {
  .fc-board { padding: 10px 6px; }
  .fc-top, .fc-cols { column-gap: 3px; }
  .fc-cap { font-size: 9px; letter-spacing: .02em; }
  .fc-capx { display: none; }
  .fc-glyph { font-size: 18px; }
  .fc-board .gcard:not(.gcard--back) { padding: 1px 2px; }
  .fc-board .gcard:not(.gcard--back)::after { right: 2px; bottom: 2px; font-size: 1.7em; }
}

@media (forced-colors: active) {
  .fc-board .fc-sel { outline: 3px solid Highlight; box-shadow: none; }
  .fc-board .fc-hint-from { outline: 3px double Highlight; box-shadow: none; }
  .fc-board .fc-target, .fc-board .fc-hint-to { outline: 3px dashed Highlight; }
  .fc-slot { border-color: CanvasText; }
}

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   freecell-trainer.js sizes the cards from the board's width and, on this page, its height too, so the top row and
   a long column fit the board. The columns take the rest of the board; on a phone too small for even the smallest
   cards they scroll inside it. */
.pr-fixed .fc-board .pr-status { min-height: 0; }
.pr-fixed .fc-board .fc-cols { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pr-fixed .pr-dock .fc-controls { margin-top: 0; }
@container board (max-height: 470px) {
  .pr-fixed .fc-board .pr-status { font-size: 13px; padding: 6px 10px; margin-bottom: 6px; }
  .pr-fixed .fc-board .h-stats { margin-bottom: 4px; padding-bottom: 3px; }
}

/* ==========================================================================
   Watch a narrated deal: the table (freecell-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 eight
   columns fit any width without a script, and the way a column overlaps comes from freecell-watch.js as a fraction of
   a card's height. The shared viewer's own rules (.wv-*) are in brand.css; nothing in this file changes them.
   ========================================================================== */
#freecell-watch .wv-stage { container: fwstage / inline-size; padding: 6px 8px 6px; }
.fw-table { --fw-gap: 8px; --fw-w: 38px; --fw-h: calc(var(--fw-w) * 1.4); display: flex; flex-direction: column; align-items: center; gap: 3px; }
@supports (width: 1cqw) { .fw-table { --fw-w: clamp(28px, calc((100cqw - 7 * var(--fw-gap)) / 8), 38px); } }

.fw-key { align-self: stretch; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

.fw-grid { display: grid; grid-template-columns: repeat(8, var(--fw-w)); column-gap: var(--fw-gap); justify-content: center; align-items: start; }
.fw-top { row-gap: 0; margin-bottom: 4px; }
.fw-cap { grid-row: 1; margin: 0 0 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; text-align: center; }
.fw-cap--cells { grid-column: 1 / span 4; }
.fw-cap--home { grid-column: 5 / span 4; }
.fw-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.fw-cell--c0 { grid-column: 1; } .fw-cell--c1 { grid-column: 2; } .fw-cell--c2 { grid-column: 3; } .fw-cell--c3 { grid-column: 4; }
.fw-cell--h0 { grid-column: 5; } .fw-cell--h1 { grid-column: 6; } .fw-cell--h2 { grid-column: 7; } .fw-cell--h3 { grid-column: 8; }
.fw-colno { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; font-weight: 700; }
.fw-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

@container fwstage (max-width: 430px) { .fw-table { --fw-gap: 4px; } .fw-cap { font-size: 9px; } }

.fw-table .gcard { position: relative; flex: 0 0 auto; width: var(--fw-w); height: var(--fw-h); padding: 0; border-radius: 5px; border-width: 1.2px; transition: none; }
.fw-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(--fw-w) * 0.29); border-color: rgba(18, 20, 26, 0.34);
}
.fw-table .gcard .gr, .fw-table .gcard .gs { font-size: inherit; line-height: 1; }
.fw-table .gcard:not(.gcard--back)::after { content: attr(data-s); position: absolute; right: 3px; bottom: 2px; font-size: 2em; line-height: 1; opacity: .9; }

.fw-slot {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--fw-w); height: var(--fw-h);
  border: 1.5px dashed var(--line-firm); border-radius: 5px; color: var(--muted);
}
.fw-glyph { font-size: calc(var(--fw-w) * 0.6); line-height: 1; opacity: .6; }
.fw-glyph--red { color: var(--suit-red, var(--accent)); }
.fw-glyph .red { color: inherit; background: none; padding: 0; }

.fw-table .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }

#freecell-watch .wv-opt { font-size: 13px; line-height: 1.25; }
#freecell-watch .wv-options { gap: 2px; margin-top: 2px; }

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

#freecell-watch .wv-head { margin-bottom: 4px; }
#freecell-watch .wv-say { padding: 6px 14px 7px; margin-bottom: 5px; }
#freecell-watch .wv-text { font-size: 15px; line-height: 1.4; }
#freecell-watch .wv-stage { margin-bottom: 6px; }
#freecell-watch .wv-why { margin-bottom: 4px; }