/* Hide the key card — page-specific styles. Shared tokens and classes come from site.css. */

/* Shared classes like .btn and .pile set `display`, which would override the hidden attribute. */
.stage [hidden] { display: none !important; }

#try-stage, #why-stage, #magician-stage { --card-w: clamp(52px, 13vw, 84px); }

.hk-sub { margin: var(--s4) 0 var(--s2); }
.hk-after-stage { margin-top: var(--s4); }
.hk-after-stage h3 { margin-top: var(--s4); }
.hk-before-stage { margin-bottom: var(--s3); }
.hk-top { justify-content: space-between; margin-bottom: var(--s2); }
.hk-count, .hk-seed { color: var(--secondary-on-stage); }
.hk-seed { margin-top: var(--s2); font-size: 0.92rem; }
.hk-seed:empty { display: none; }
.hk-fails { color: var(--counter); font-weight: 650; }
.hk-gold { color: var(--invariant); font-weight: 700; }

/* ---------- Table area: hand / row / covered ---------- */
.hk-table { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-start; margin-top: var(--s2); }
.hk-rowcover { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; }
.hk-row { padding-top: 18px; padding-bottom: 24px; min-height: calc(var(--card-w) * var(--card-ratio) + 42px); }
.hk-slots { display: flex; gap: 8px; padding-top: 18px; }
.hk-slot-col { display: grid; justify-items: center; gap: 6px; }
.hk-rowcover .pile > .hk-slot-col { padding-top: 18px; }
.hk-slot { position: relative; }
.hk-slot > .card { position: absolute; left: -1.5px; top: -1.5px; }
.hk-slot-label { font-size: 0.85rem; font-weight: 700; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.hk-slot-label.is-active { color: var(--active); }

.hk-prediction { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.3; color: var(--paper); margin: var(--s1) 0 var(--s3); max-width: 32ch; }

.hk-readouts { margin-top: var(--s2); gap: var(--s2) var(--s4); align-items: flex-start; }
.hk-readouts + .legend { margin-top: var(--s2); }
.stage .legend + .controls { margin-top: var(--s3); }
.hk-count-ro { margin: var(--s3) 0 var(--s2); }
.hk-count-ro .readout-value { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }

/* ---------- Card picker: rank × suit grid in two bands ---------- */
.hk-picker { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: var(--s2); max-width: 900px; }
.hk-band { display: grid; grid-template-columns: 1.2em repeat(var(--n), minmax(0, 1fr)); gap: 4px; align-items: center; flex: 7 1 300px; }
.hk-band + .hk-band { flex-grow: 6; }
.hk-suit { text-align: center; font-size: 1rem; color: var(--secondary-on-stage); }
.hk-pick {
  min-height: 44px; min-width: 0; padding: 0; border-radius: 7px; border: 0;
  background: var(--paper); color: var(--black-ink); cursor: pointer;
  font: 650 0.95rem/1 var(--font-ui); letter-spacing: -0.02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  transition: transform 150ms var(--ease-press), opacity 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hk-pick[data-color="red"] { color: var(--red-ink); }
.hk-pick .s { font-size: 0.92em; }
.hk-pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--stage), 0 0 0 4.5px var(--active); transform: translateY(-2px); }
.hk-pick:disabled { opacity: 0.32; cursor: not-allowed; }
.hk-pick:active:not(:disabled) { transform: scale(0.97); }
.hk-step .hk-picker { margin-top: 4px; }

/* ---------- The 8 × 8 message table ---------- */
.hk-grid-wrap { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; margin-top: var(--s2); }
.hk-grid-side { flex: 1 1 220px; display: grid; gap: var(--s2); align-content: start; }
.hk-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; width: min(100%, 500px); font-variant-numeric: tabular-nums; }
.hk-gh { display: grid; place-items: center; font-weight: 700; color: var(--secondary-on-stage); font-size: 0.88rem; min-height: 26px; }
/* Corner key, split diagonally: "2nd →" names the column header row, "1st ↓" the row header column. */
.hk-corner { position: relative; font-size: 0.6rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; display: block; min-height: 30px; }
.hk-corner-col { position: absolute; top: 2px; right: 2px; }
.hk-corner-row { position: absolute; bottom: 2px; left: 2px; }
.hk-cell {
  aspect-ratio: 1; min-width: 0; min-height: 33px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(244, 239, 228, 0.14); background: var(--stage-raised); color: var(--paper);
  font: 500 0.8rem/1.08 var(--font-ui); display: grid; place-items: center; align-content: center; cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.hk-cell.is-diag { background: transparent; border: 1px dashed rgba(244, 239, 228, 0.07); cursor: default; }
.hk-cell.is-taken { background: color-mix(in oklch, var(--paper) 9%, var(--stage)); }
.hk-cell[data-ring="active"] { box-shadow: inset 0 0 0 2px var(--active); }
.hk-cell[data-ring="active"]:not(.is-taken) { background: color-mix(in oklch, var(--active) 14%, var(--stage)); }
.hk-cell[data-ring="counter"] { box-shadow: inset 0 0 0 2px var(--counter); }
.hk-cell[data-ring="invariant"] { box-shadow: inset 0 0 0 2px var(--invariant); }
.hk-cell.is-hint { background: color-mix(in oklch, var(--active) 30%, var(--stage)); }
.hk-hand { display: block; color: var(--secondary-on-stage); letter-spacing: 0.01em; }
.hk-hand b { color: var(--paper); font-weight: 800; }
.hk-side:empty { display: none; }

/* ---------- Waiting hands (challenge 2) ---------- */
.hk-chips-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; justify-content: space-between; margin-top: var(--s2); }
.hk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-hand-chip { min-height: 40px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.stage .hk-hand-chip[aria-pressed="true"] { --btn-border: var(--active); color: var(--active); box-shadow: inset 0 0 0 1px var(--active); }

/* ---------- Magician's worksheet (challenge 1) ---------- */
.hk-sheet { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: grid; gap: var(--s3); counter-reset: sheet; }
.hk-step { counter-increment: sheet; display: grid; gap: 10px; padding-left: 2.4em; position: relative; }
.hk-step::before {
  content: counter(sheet); position: absolute; left: 0; top: 0.05em; width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1.5px solid var(--structure); display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: var(--secondary-on-stage);
}
.hk-step.is-current::before { border-color: var(--active); color: var(--active); }
.hk-step-q { color: var(--paper); }
.hk-done { color: var(--secondary-on-stage); font-size: 0.98rem; }
.hk-done:empty { display: none; }
.hk-pats { gap: 6px; }
.hk-pat { font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.hk-sheet .field input { width: 6.5em; }

@media (max-width: 560px) {
  .hk-table { gap: var(--s1) var(--s3); }
  .hk-top .segmented button { padding: 0 9px; }
  .hk-step { padding-left: 2.1em; }
}

/* Spacing between a stage's main view and its controls */
#why-stage .ledger, #eight-stage .ledger { max-height: none; }
.hk-grid-wrap + .controls, .stage .verdict + .controls { margin-top: var(--s3); }
.hk-sheet + .verdict { margin-top: var(--s1); }

/* Touch targets and empty ledgers (review) */
.hk-hand-chip, #count-stage .btn-sm { min-height: 44px; }
.stage hr:has(+ .ledger:empty) { display: none; }
.ledger:empty { display: none; }
.field input[aria-invalid="true"] { border-color: var(--counter); }
#hk-n-note { font-size: 0.9rem; margin-top: 6px; }