/* One Rank, One Suit — page-specific styles. Shared tokens and classes come from site.css. */

/* Suit ink as text (literal suit colour only); on the dark stage it sits on a paper chip */
/* Suit glyphs in running text keep their literal ink (ink.js wraps them); on the dark stage, or a dark page, they sit on a small paper chip */
.suit-ink { display: inline-block; padding: 0 2px; border-radius: 3px; background: var(--paper); line-height: 1.25; }
.suit-ink.is-red, .card-text.is-red { color: var(--red-ink); }
.suit-ink.is-black, .card-text.is-black { color: var(--black-ink); }
.pair-matrix .suit-ink { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 3px; border-radius: 4px; line-height: 1.35; }
.stack-list { display: block; margin-top: 6px; font-variant-numeric: tabular-nums; word-spacing: 0.18em; color: var(--text-2); }

/* ---------- Try: the face-down fan ---------- */
.fan-wrap { position: relative; padding-bottom: 36px; margin-top: var(--s2); }
.fan { display: flex; flex-wrap: nowrap; align-items: flex-end; padding-top: 16px; min-height: calc(var(--card-w) * var(--card-ratio) + 16px); }
.fan > .card + .card { margin-left: min(calc((100% - var(--card-w)) / var(--gaps, 51) - var(--card-w)), calc(var(--card-w) * -0.5)); }
.fan .card.in-packet .card-tilt { transform: translateY(-14px); }
.fan .card.is-carried { z-index: 5; }
.cut-bracket { position: absolute; height: 10px; border: 2px solid var(--active); border-top: 0; border-radius: 0 0 6px 6px; pointer-events: none; transition: width 160ms var(--ease-out); }
.cut-bracket > span { position: absolute; top: 12px; left: 0; white-space: nowrap; color: var(--active); font-size: 0.85rem; font-weight: 600; }
.cut-controls { margin-top: var(--s2); align-items: flex-end; }
.range-field { min-width: min(100%, 260px); }
.range-field input[type="range"] { min-height: 44px; padding: 0; accent-color: var(--active); background: transparent; border: 0; width: 100%; }
.try-ledger { margin-top: var(--s2); max-height: 7.5em; }

/* ---------- Places ---------- */
.places { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); align-items: flex-start; }
.place { display: grid; justify-items: center; gap: 8px; min-width: 84px; }
.place-slot { --card-w: clamp(58px, 10vw, 78px); }
.place-role { font-size: 0.85rem; color: var(--secondary-on-stage); }
.why-place-card { min-height: 0; justify-content: center; }
.clue-chip { min-height: 28px; }

/* ---------- Clue panel ---------- */
.clue-panel { margin-top: var(--s3); display: grid; gap: var(--s2); }
.clue-row { display: grid; gap: 6px; }
.clue-label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.clue-none { color: var(--secondary-on-stage); font-style: italic; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-btn {
  min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(244, 239, 228, 0.28); background: transparent; color: var(--paper);
  font: 650 1.05rem/1 var(--font-ui); transition: transform 150ms var(--ease-press), background-color 150ms ease;
}
.pick-btn:active { transform: scale(0.97); }
.pick-btn[aria-pressed="true"] { background: var(--paper); color: var(--stage); border-color: var(--paper); }
.pick-btn.is-red, .pick-btn.is-black { background: var(--paper); font-size: 1.35rem; }
.pick-btn.is-red { color: var(--red-ink); }
.pick-btn.is-black { color: var(--black-ink); }
.pick-btn.is-red[aria-pressed="true"], .pick-btn.is-black[aria-pressed="true"] { outline: 3px solid var(--active); outline-offset: 2px; }
.pick-btn[aria-pressed="true"]:not(.is-red):not(.is-black) { outline: 3px solid var(--active); outline-offset: 2px; }

/* ---------- Why: cycle strips ---------- */
.why-top { justify-content: space-between; }
.why-caption { margin-top: var(--s2); min-height: 4.4em; }
.cycles { display: grid; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.cycle-strip { display: grid; gap: 6px; }
.cyc-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.cyc-cells { display: grid; gap: 3px; align-items: start; }
.cycle-strip.rank .cyc-cells { grid-template-columns: repeat(13, minmax(0, 46px)) 22px; }
.cycle-strip.suit .cyc-cells { grid-template-columns: repeat(4, minmax(0, 46px)) 22px; }
.cyc-cell { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.cyc-face {
  width: 100%; height: clamp(30px, 7.4vw, 48px); display: grid; place-items: center; border-radius: 6px;
  background: var(--paper); color: var(--black-ink); font: 700 clamp(0.8rem, 2.9vw, 1.15rem)/1 var(--font-ui); letter-spacing: -0.03em;
}
.cyc-cell.is-red .cyc-face { color: var(--red-ink); }
.cycle-strip.suit .cyc-face { font-size: clamp(1rem, 3.6vw, 1.4rem); }
.cyc-cell[data-ring] .cyc-face { outline: 2.5px solid transparent; outline-offset: 2px; }
.cyc-cell[data-ring="active"] .cyc-face { outline-color: var(--active); }
.cyc-cell[data-ring="structure"] .cyc-face { outline: 2px dashed var(--structure); }
.cyc-cell[data-ring="invariant"] .cyc-face { outline-color: var(--invariant); }
.cyc-tag { font-size: 0.7rem; font-weight: 700; color: var(--active); min-height: 1.15em; white-space: nowrap; line-height: 1.15; }
.cyc-wrap { align-self: start; color: var(--secondary-on-stage); font-size: 1.1rem; line-height: clamp(30px, 7.4vw, 48px); text-align: center; }
.crib { margin-top: var(--s2); }

/* ---------- Why: the deck as four rows of thirteen ---------- */
.deck-grid-wrap { display: grid; gap: 8px; margin-top: var(--s3); }
.deck-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; max-width: 760px; }
.dg-head { text-align: center; font: 700 clamp(0.62rem, 2.3vw, 0.85rem)/1.6 var(--font-ui); color: var(--structure); transition: color 200ms ease; }
.deck-grid.show-columns .dg-head { color: var(--invariant); }
.dg-cell {
  position: relative; text-align: center; border-radius: 4px; padding: 6px 0; white-space: nowrap; letter-spacing: -0.04em;
  font: 700 clamp(0.6rem, 2.35vw, 0.95rem)/1 var(--font-ui);
  background: rgba(244, 239, 228, 0.05); color: transparent;
  transition: background-color 240ms ease, color 240ms ease;
}
.dg-cell.is-shown { background: var(--paper); color: var(--black-ink); }
.dg-cell.is-shown.is-red { color: var(--red-ink); }
.dg-cell[data-ring] { outline: 2.5px solid transparent; outline-offset: 1px; z-index: 1; }
.dg-cell[data-ring="active"] { outline-color: var(--active); }
.dg-cell[data-ring="invariant"] { outline-color: var(--invariant); }
.dg-cell[data-ring="structure"] { outline: 2px dashed var(--structure); }
.deck-grid.show-columns .dg-cell.is-shown { box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--invariant) 70%, transparent); }
.readouts { margin-top: var(--s3); gap: var(--s2) var(--s4); }
.why-controls { margin-top: var(--s3); }
.step-count { color: var(--secondary-on-stage); font-size: 0.95rem; margin-left: 4px; }
.why-ledger { margin-top: var(--s2); max-height: 8.5em; }

/* ---------- Challenge ---------- */
.challenge-panel { margin-top: var(--s3); }
.challenge-panel > .stage-instruction { margin-bottom: var(--s1); }
.pick-fields { display: flex; gap: 8px; }
.pick-fields .field select { min-width: 0; }
.place-feedback { font-size: 0.92rem; line-height: 1.4; max-width: 30ch; text-align: center; color: var(--secondary-on-stage); }
.place-feedback.is-ok { color: var(--invariant); }
.place-feedback.is-wrong { color: var(--paper); border-top: 2px solid var(--counter); padding-top: 6px; text-align: left; }
.seed { font-size: 0.88rem; color: var(--secondary-on-stage); }
#panel-magician .places { gap: var(--s3) var(--s4); }
#panel-magician .verdict, #panel-design .verdict { margin-top: var(--s3); }

/* Design: the sixteen-position ring and the 4×4 pair checklist */
.design-grid { display: grid; gap: var(--s3); align-items: center; margin-top: var(--s2); }
@media (min-width: 820px) { .design-grid { grid-template-columns: minmax(300px, 400px) 1fr; } }
.design-side { display: grid; gap: var(--s3); justify-items: center; }
.ring16 { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; }
.ring-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--secondary-on-stage); font-size: 0.85rem; line-height: 1.3; pointer-events: none; }
.ring-arrow { font-size: 2rem; color: var(--structure); }
.ring-pos {
  position: absolute; transform: translate(-50%, -50%); width: 44px; height: 50px; padding: 0; border: 0; border-radius: 7px;
  background: var(--paper); cursor: pointer; display: grid; place-items: center; font: inherit;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.25);
  transition: transform 150ms var(--ease-press);
}
.ring-pos:active { transform: translate(-50%, -50%) scale(0.95); }
.ring-pos.is-red { color: var(--red-ink); }
.ring-pos.is-black { color: var(--black-ink); }
.ring-sym { font-size: 1.45rem; line-height: 1; margin-top: -6px; }
.ring-no { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font: 600 0.62rem/1 var(--font-ui); color: #6E7C87; }
.ring-pos[data-ring] { outline: 3px solid transparent; outline-offset: 2px; }
.ring-pos[data-ring="active"] { outline-color: var(--active); }
.ring-pos[data-ring="counter"] { outline-color: var(--counter); }
.pair-matrix { border-collapse: separate; border-spacing: 5px; }
.pair-matrix caption { caption-side: bottom; font-size: 0.85rem; color: var(--secondary-on-stage); padding-top: 6px; max-width: 30ch; margin: 0 auto; line-height: 1.4; }
.pair-matrix th { font-size: 1.15rem; font-weight: 400; text-align: center; padding: 0; }
.pm-cell { width: 48px; height: 44px; border-radius: 6px; border: 1.5px solid; background: transparent; cursor: pointer; font: 700 1.1rem/1 var(--font-math); font-variant-numeric: tabular-nums; }
.pm-cell.is-missing { border-style: dashed; border-color: var(--structure); color: var(--structure); }
.pm-cell.is-once { border-color: var(--invariant); color: var(--invariant); }
.pm-cell.is-many { border-color: var(--counter); color: var(--counter); }
.pm-cell.is-selected { outline: 2.5px solid var(--active); outline-offset: 2px; }
.design-result { margin-top: var(--s3); display: grid; gap: 10px; }
.result-row { gap: 4px; }

/* Local override: shared .controls/.verdict set display, which would defeat the hidden attribute */
.stage [hidden] { display: none !important; }

#try-stage > .controls:not(.cut-controls), #try-stage > .verdict { margin-top: var(--s3); }

/* Backward wrap: a faint copy of the last suit drawn before the first */
.cycle-strip.suit.has-ghost .cyc-cells { grid-template-columns: repeat(5, minmax(0, 46px)) 22px; }
.cyc-ghost .cyc-face { background: color-mix(in oklch, var(--paper) 55%, var(--stage)); }
.cyc-ghost[data-ring="active"] .cyc-face { outline-style: dashed; }

/* Deck grid: 13 columns on wide screens; on phones, transposed to 13 rows (one per value) of 4 */
.dg-head, .dg-cell { grid-row: var(--dr); grid-column: var(--dc); }
.narrow-only { display: none; }
@media (max-width: 479px) {
  .deck-grid { grid-template-columns: 2.2em repeat(4, minmax(0, 1fr)); max-width: 420px; gap: 3px 6px; }
  .dg-head, .dg-cell { grid-row: var(--pr); grid-column: var(--pc); }
  .dg-head { font-size: 0.95rem; line-height: 1; align-self: center; }
  .dg-cell { font-size: 1rem; padding: 6px 0; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}

/* Feedback kept from an earlier attempt */
.place-feedback.is-earlier { opacity: 0.7; border-top-color: var(--structure); }
.place-feedback.is-earlier::before { content: "Last time: "; font-weight: 650; }