/* The spectator deals poker — page-specific styles. */
.stage [hidden] { display: none !important; }
#try-stage { --card-w: clamp(36px, 4.6vw, 56px); }
#why-stage, #challenge-stage { overflow: hidden; }

.pk-table { display: grid; gap: var(--s3); margin-top: var(--s2); }
.pile-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pile-head .pile-label { text-align: left; }
.pile-wide { width: 100%; }
.pk-sources, .pk-why-sources { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
/* face-down piles in Try: the top (leftmost) card lies uppermost; face-up fans keep later cards on top so every corner index shows */
#try-stage .card-row.overlap:not(.pk-hand-row) > .card { z-index: var(--z, auto); }
/* a long face-down fan: 25 cards fit at phone width */
.card-row.pk-fan > .card + .card { margin-left: calc(var(--card-w) * -0.7); }
.tagged-row { gap: 22px 4px; padding-top: 16px; }
#try-stage .tagged-row { --card-w: clamp(28px, 3.6vw, 42px); }
.word { color: var(--paper); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.pk-word { margin-top: calc(var(--s2) * -0.5); }

/* the prediction slip: paper on the table */
.pk-prediction { background: var(--paper); color: var(--black-ink); border-radius: 8px; padding: 10px 14px; max-width: 34rem; margin-bottom: var(--s3); border-left: 4px solid var(--structure); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.pk-prediction.is-kept { border-left-color: var(--invariant); }
.pk-prediction-label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text-3, #6E7C87); }
.pk-prediction p { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.35; }

.phase-strip { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.phase-strip li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--secondary-on-stage); border: 1px solid rgba(244, 239, 228, 0.18); }
.phase-strip .phase-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(244, 239, 228, 0.1); font-size: 0.75rem; }
.phase-strip li[aria-current="step"] { color: var(--active); border-color: var(--active); }
.phase-strip li.is-done { color: var(--paper); }

.pk-controls { margin-top: var(--s3); }
.pk-note { margin-top: var(--s2); min-height: 1.5em; }
.pk-ledger { margin-top: var(--s3); color: var(--secondary-on-stage); font-size: 0.92rem; }
.pk-ledger summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.control-label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper .btn-sm { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.stepper-value { min-width: 2.2ch; text-align: center; font-family: var(--font-math); font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* practice piles: physical stacks, top card uppermost */
.pk-piles { display: flex; flex-wrap: wrap; gap: var(--s2); --card-w: clamp(46px, 5.6vw, 62px); }
.pk-pile { display: grid; gap: 6px; justify-items: start; }
.pk-stack { position: relative; width: calc(var(--card-w) + 12px); height: calc(var(--card-w) * var(--card-ratio) + 14px); }
.pk-stack > .card { position: absolute; left: calc(var(--d, 0) * 3px); top: calc(var(--d, 0) * 3px); }

/* hands */
.pk-hands { display: grid; gap: var(--s3) var(--s2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); --card-w: clamp(42px, 4.4vw, 56px); }
.pk-hand { display: grid; gap: 6px; align-content: start; border-left: 3px solid transparent; padding-left: 10px; }
.pk-hand.is-win { border-left-color: var(--invariant); }
.pk-hand-row.overlap > .card + .card { margin-left: calc(var(--card-w) * -0.5); }
.pk-hand-note { font-size: 0.95rem; line-height: 1.45; color: var(--paper); min-height: 1.4em; }

/* Why: the five-by-five grid */
.pk-why-top { justify-content: space-between; margin-bottom: var(--s2); }
.pk-why-sources { margin: var(--s2) 0; --card-w: clamp(40px, 4.4vw, 54px); }
.pk-why-sources .card-row { padding-bottom: 22px; }
.card-row.pk-why-fan > .card + .card { margin-left: calc(var(--card-w) * -0.55); }
.pk-grid { display: grid; gap: 26px; margin: var(--s2) 0; --card-w: clamp(44px, 5.2vw, 60px); }
.pk-grid-head { margin-bottom: -8px; }
.pk-grid-line { display: grid; grid-template-columns: 4.6rem auto; align-items: center; gap: 10px; }
.pk-grid-label { font-size: 0.8rem; color: var(--secondary-on-stage); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.pk-grid-row { min-height: calc(var(--card-w) * var(--card-ratio)); }
.pk-why-readouts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.pk-ro { font-size: 1.15rem; font-family: var(--font-ui); }
#why-stage .controls, #challenge-stage .controls { margin-top: var(--s3); }
#why-stage .legend { margin-top: var(--s2); }
.legend .swatch.sw-active { background: none; border: 2.5px solid var(--active); }
.legend .swatch.sw-invariant { background: none; border: 2.5px solid var(--invariant); }

/* Challenge */
.pk-setup { margin: var(--s2) 0; align-items: flex-end; }
.pk-setup-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-range { font-size: 0.9rem; }
.pk-range.is-in { color: var(--invariant); }
.pk-range.is-out { color: var(--counter); }
#challenge-stage .field select { max-width: 100%; }
#challenge-stage .pk-fan { --card-w: clamp(34px, 4.2vw, 48px); }
.pk-results { display: grid; gap: var(--s3) var(--s4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--s2); --card-w: clamp(40px, 4.4vw, 50px); }
.pk-results:empty { display: none; }
.pk-result { display: grid; gap: 6px; align-content: start; }
.pk-choices { display: grid; gap: 8px; width: 100%; }
.pk-choices .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.3; padding: 8px 14px; }
#challenge-stage .verdict { margin-top: var(--s3); }
#challenge-stage .verdict p + p, #challenge-stage .verdict .verdict-title + p { margin-top: 6px; }

@media (max-width: 560px) {
  .pk-grid-line { grid-template-columns: 3.4rem auto; gap: 6px; }
  .pk-grid { --card-w: 46px; }
  .pk-grid .card-row.tight { gap: 4px; }
}

.pk-hand > .pile-label, .pk-pile > .pile-label { text-align: left; }
.pk-grid-head { text-align: left; }
.pk-result > .pile-label { text-align: left; }
@media (max-width: 560px) { .pk-piles { --card-w: 44px; gap: 8px; } }

/* review fixes */
.pip-chip { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.5em; padding: 0 4px; border-radius: 4px; background: var(--paper); color: var(--black-ink); font-weight: 700; font-size: 0.95rem; line-height: 1; }
.pip-chip.s-H, .pip-chip.s-D { color: var(--red-ink); }
.pk-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pk-ro-hand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.pk-ro-cat { font-weight: 600; }
.pk-ro-cat.is-invariant { color: var(--invariant); }
.pk-ro-cat.is-active { color: var(--active); }
.pk-mini { padding-bottom: 22px; }
.pk-dyn td { white-space: nowrap; }
.pk-dyn th { white-space: normal; vertical-align: bottom; }
@media (max-width: 560px) { .pk-dyn th, .pk-dyn td { padding: 6px 7px; font-size: 0.92rem; } }
.nowrap { white-space: nowrap; }