/* ==========================================================================
   Pyramid Solitaire practice board.

   pyramid-solitaire-trainer.js sets the size of every card and how far each row of the pyramid sits below the one
   above it, so the whole pyramid 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.
   ========================================================================== */

.pys-board { padding: 12px 16px 12px; }
.pys-board .pr-status { margin: 0 0 8px; padding: 7px 12px; font-size: 15px; line-height: 1.4; }
.pys-board .h-stats { margin: 0 0 8px; padding-bottom: 5px; }
.pys-board .pr-tip { margin-top: 10px; }

/* The piles: the draw pile, the turned-over pile and the removed pile, with the trip count beside them. */
.pys-top { display: grid; grid-template-columns: repeat(3, auto) 1fr; grid-template-rows: auto auto; column-gap: 14px; margin: 0 0 10px; justify-content: center; }
.pys-cap { grid-row: 1; margin: 0 0 3px; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; text-align: center; }
.pys-cap--draw { grid-column: 1; } .pys-cap--turned { grid-column: 2; } .pys-cap--out { grid-column: 3; }
.pys-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; }
.pys-cell--draw { grid-column: 1; } .pys-cell--turned { grid-column: 2; } .pys-cell--out { grid-column: 3; }
.pys-trip { grid-column: 4; grid-row: 2; align-self: center; margin: 0; font-size: 13px; color: var(--muted); }

/* The pyramid: seven rows, each centered, each starting a little below the one above, so every card is partly
   covered by the two cards below it. The script sets the height and each row's top. */
.pys-pyramid { position: relative; min-height: 120px; }
.pys-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }

/* Cards: the rank and suit sit in the top-left corner so a card that is partly covered still reads. */
.pys-board .gcard { position: relative; flex: 0 0 auto; padding: 0; }
.pys-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;
}
.pys-board .gcard .gr, .pys-board .gcard .gs { font-size: inherit; line-height: 1; }
.pys-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;
}
.pys-board .gcard:not(.gcard--back) { border-color: rgba(18, 20, 26, 0.34); }
.pys-board button.gcard:hover { transform: none; border-color: var(--ink); }
.pys-board button.gcard:focus-visible, .pys-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }
/* A covered card is still face up and readable; its corner is only a little quieter, so the free cards stand out. */
.pys-board .gcard.pys-covered { filter: saturate(.75) brightness(.96); }
.pys-board .gcard.pys-covered::after { display: none; }   /* only its corner shows anyway */

/* An empty place: the used-up draw pile, an empty turned-over or removed pile, a place in the pyramid already cleared. */
.pys-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;
}
button.pys-slot { cursor: pointer; }
button.pys-slot:disabled { cursor: default; opacity: .6; }
.pys-slot.pys-gone { visibility: hidden; }
.pys-glyph { font-size: 26px; line-height: 1; opacity: .6; }

.pys-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;
}

/* Picked (red outline), what it pairs with (dashed), and what the Hint points at (gold). */
.pys-board .pys-sel { box-shadow: 0 0 0 3px var(--accent); z-index: 3; }
.pys-board .pys-target { outline: 2px dashed var(--accent); outline-offset: 2px; z-index: 2; }
.pys-board .pys-hint { box-shadow: 0 0 0 3px var(--brass); z-index: 3; }
.pys-board .pys-sel.pys-hint { box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--brass); }

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

@media (max-width: 560px) {
  .pys-board { padding: 10px 8px; }
  .pys-top { column-gap: 8px; }
  .pys-cap { font-size: 9px; letter-spacing: .02em; }
  .pys-glyph { font-size: 20px; }
}

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

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   The script sizes the cards from the board's width and height, so the piles and the whole pyramid fit. */
.pr-fixed .pys-board .pr-status { min-height: 0; }
.pr-fixed .pys-board .pys-pyramid { flex: 0 0 auto; }
.pr-fixed .pr-dock .pys-controls { margin-top: 0; }
@container board (max-height: 470px) {
  .pr-fixed .pys-board .pr-status { font-size: 13px; padding: 6px 10px; margin-bottom: 6px; }
  .pr-fixed .pys-board .h-stats { margin-bottom: 4px; padding-bottom: 3px; }
}

/* ==========================================================================
   Watch a narrated deal: the table (pyramid-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 pyramid
   fits any width without a script. On a wide stage the piles sit beside the pyramid, which keeps the panel about one
   laptop screen tall; on a narrow one they sit above it.
   ========================================================================== */
#pyramid-solitaire-watch .wv-stage { container: pwstage / inline-size; padding: 6px 8px 6px; }
.pw-table { --pw-gap: 6px; --pw-w: 38px; --pw-h: calc(var(--pw-w) * 1.4); display: flex; flex-direction: column; align-items: center; gap: 4px; }
@supports (width: 1cqw) { .pw-table { --pw-w: clamp(30px, calc((100cqw - 6 * var(--pw-gap)) / 7), 46px); } }

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

.pw-board { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pw-piles { display: grid; grid-template-columns: repeat(3, var(--pw-w)); column-gap: 26px; align-items: start; }
.pw-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; }
.pw-cell { grid-row: 2; display: flex; justify-content: center; }
.pw-trip { grid-column: 1 / span 3; grid-row: 3; margin: 2px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

.pw-pyr { position: relative; width: calc(7 * var(--pw-w) + 6 * var(--pw-gap)); height: calc(var(--pw-h) * 3.52); }
.pw-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: var(--pw-gap); }
.pw-row--1 { top: 0; } .pw-row--2 { top: calc(var(--pw-h) * .42); } .pw-row--3 { top: calc(var(--pw-h) * .84); }
.pw-row--4 { top: calc(var(--pw-h) * 1.26); } .pw-row--5 { top: calc(var(--pw-h) * 1.68); } .pw-row--6 { top: calc(var(--pw-h) * 2.1); }
.pw-row--7 { top: calc(var(--pw-h) * 2.52); }

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

/* a card that has just moved (red) and a pyramid card that has just been uncovered (gold) */
.pw-table .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.pw-table .gcard.pw-freed { outline: 2px solid var(--brass); outline-offset: 1px; z-index: 2; }

/* a wide stage: the pyramid on the left, the piles on the right */
@container pwstage (min-width: 560px) {
  .pw-table { --pw-w: 46px; --pw-gap: 6px; }
  .pw-board { flex-direction: row; justify-content: center; align-items: flex-start; gap: 28px; }
  .pw-pyr { order: -1; }
}

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

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