/* Miraskill — page-specific styles. Shared classes come from site.css. */

#try-stage > * + *, #why-stage > * + *, #challenge-stage > * + * { margin-top: var(--s3); }
/* .btn sets display:inline-flex, which would defeat the hidden attribute */
#try-stage [hidden], #why-stage [hidden], #challenge-stage [hidden] { display: none !important; }
/* Local override for a shared-CSS clash: `.curtain .btn { background: var(--page) }` makes the
   primary curtain button's page-coloured label invisible. Keep the primary fill. */
.curtain .btn-primary { background: var(--btn-bg); }
.why-after { margin-top: var(--s4); }

/* A spread of cards that overlaps just enough to fit (width set by trick.js) */
.card-row.fan { flex-wrap: nowrap; gap: 0; width: 100%; }
.card-row.fan > .card + .card { margin-left: var(--fan-ml, 6px); }
.pile.packet-pile, .ch-supply .pile { grid-template-columns: minmax(0, 1fr); justify-items: stretch; min-width: 0; }
.pile-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }

/* Top line: instruction + packet size */
.stage-topline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; justify-content: space-between; }
.stage-topline .stage-instruction { flex: 1 1 32ch; }
.size-field { display: grid; gap: 6px; }

/* Prediction + packet */
.mira-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: end; }
.pred-pile { --card-w: clamp(96px, 11vw, 120px); }
.packet-fan { --card-w: clamp(40px, 6vw, 62px); }
.packet-fan:empty { min-height: 0; }
.card.prediction .face.front { display: grid; place-items: center; }
.card.prediction .pred-text {
  padding: 0 10%; text-align: center; text-transform: uppercase;
  font: 700 calc(var(--w) * 0.112) / 1.3 var(--font-ui); letter-spacing: 0.07em; color: var(--black-ink);
}

/* The pair in your hand */
.hand { display: grid; gap: 8px; justify-items: start; --card-w: clamp(56px, 8vw, 76px); }
.hand-row { gap: 10px; flex-wrap: nowrap; }
.hand-note { color: var(--secondary-on-stage); font-size: 1rem; min-height: 1.5em; max-width: 56ch; }
.hand-note strong { color: var(--paper); }
.label-counter-stage { color: var(--counter); font-weight: 650; }

/* Mats */
.mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; --card-w: clamp(38px, 9.6vw, 50px); }
.mat { border: 1.5px dashed rgba(244, 239, 228, 0.22); border-radius: 12px; padding: 6px 6px 12px; display: grid; align-content: start; gap: 8px; min-width: 0; transition: border-color 160ms ease, background-color 160ms ease; }
.mat-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: 44px;
  padding: 6px 6px; border: 0; border-radius: 8px; background: none; color: var(--paper); font: inherit; text-align: left;
}
button.mat-head { cursor: pointer; }
button.mat-head:disabled { cursor: default; }
.mat-name { font-weight: 650; font-size: 0.98rem; line-height: 1.2; }
.mat-count { font-size: 0.85rem; color: var(--secondary-on-stage); }
.mat.is-open { border-color: rgba(104, 216, 193, 0.45); }
.mat.is-open .mat-head { background: rgba(104, 216, 193, 0.08); }
.mat.is-open:has(.mat-head:hover), .mat.is-open:has(.mat-head:focus-visible) { border-style: solid; border-color: var(--active); background: color-mix(in oklch, var(--active) 9%, transparent); }
.mat-pile { display: flex; flex-direction: column; align-items: center; min-height: calc(var(--card-w) * 1.4); }
.mat-pile > .pair + .pair { margin-top: calc(var(--card-w) * 1.4 * -0.6); }
.mat.is-dense .mat-pile > .pair + .pair { margin-top: calc(var(--card-w) * 1.4 * -0.74); }
.mats.is-mixed-aside .mat-mx { opacity: 0.5; }

.pair { display: flex; }
.pair > .card + .card { margin-left: calc(var(--card-w) * -0.42); }

/* Laying the matching pairs side by side */
.couples { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; --card-w: clamp(38px, 9.6vw, 50px); }
.couple { display: grid; gap: 8px; padding-top: 8px; border-top: 2px solid var(--invariant); }
.couple-legend { display: grid; gap: 8px; padding-top: 8px; border-top: 2px solid transparent; }
.couple-legend span { height: calc(var(--card-w) * 1.4); display: flex; align-items: center; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--secondary-on-stage); }
.pair-missing { width: calc(var(--card-w) * 1.58); height: calc(var(--card-w) * 1.4); border: 1.5px dashed var(--counter); border-radius: 6px; display: grid; place-items: center; color: var(--counter); }

.seed-line { font-size: 0.9rem; }

/* Why it works */
.why-fan { --card-w: clamp(36px, 6vw, 56px); }
#why-stage .mats { --card-w: clamp(36px, 9.6vw, 48px); }
/* Colour cards carry their letter in the middle: keep each pair and each pile fully visible */
#why-stage .pair > .card + .card { margin-left: 4px; }
#why-stage .mat-pile > .pair + .pair { margin-top: 6px; }
.why-readouts { gap: var(--s2) var(--s4); align-items: flex-start; }
.why-readouts .readout-value { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 600; }
.why-readouts .readout-value.is-invariant { font-family: var(--font-math); font-size: 1.5rem; font-weight: 400; }
.why-eqs { display: grid; gap: 6px; font-size: 1.05rem; max-width: 62ch; }
.why-eqs p { margin: 0; }
.why-eqs strong { color: var(--paper); font-weight: 650; }
.eq-label { display: inline-block; min-width: 9.5em; color: var(--secondary-on-stage); font-size: 0.9rem; }
.eq-note { color: var(--secondary-on-stage); }
.eq-note.eq-gold { color: var(--invariant); }
.eq-note.eq-gold strong, .eq-note.eq-gold var { color: var(--invariant); }
.why-ledger { max-height: none; }
.why-fan:empty { min-height: 0; }
.gold-line { border-left: 3px solid var(--invariant); padding: 4px 0 4px 14px; display: grid; gap: 2px; }
.gold-label { color: var(--secondary-on-stage); font-size: 0.92rem; }
.gold-value { font-family: var(--font-math); font-size: 1.5rem; line-height: 1.25; color: var(--invariant); }
.gold-label var { color: var(--paper); }
.step-count { margin-left: auto; }

/* Challenge */
.ch-supply { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); --card-w: clamp(40px, 5vw, 52px); padding-top: 6px; }
.ch-inv { gap: var(--s2) var(--s4); align-items: flex-end; }
.guess { display: grid; gap: 6px; }
.guess-row { display: flex; align-items: center; gap: 10px; }
.guess-row output { min-width: 2.6ch; text-align: center; }
.guess-row .step-btn { min-width: 44px; min-height: 44px; font-size: 1.3rem; padding: 0; }
.guess-value { padding: 0 6px; border-bottom: 2px solid var(--active); }
/* Arrange the dealing order: boxes of two */
.arrange-wrap { display: grid; gap: 10px; }
.arrange { display: flex; flex-wrap: wrap; gap: 22px 8px; padding-top: 16px; counter-reset: arrpair; --card-w: clamp(44px, 5vw, 54px); }
.arr-pair { position: relative; display: flex; gap: 4px; padding: 5px; border: 1.5px dashed rgba(244, 239, 228, 0.25); border-radius: 10px; counter-increment: arrpair; }
.arr-pair::before { content: "pair " counter(arrpair); position: absolute; left: 6px; top: -18px; font-size: 0.72rem; color: var(--secondary-on-stage); letter-spacing: 0.04em; }
.guess .readout-label var { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.ch-supply .pile-label { text-align: left; }
.ch-fan:empty { min-height: 0; }
#challenge-stage .mats { --card-w: clamp(36px, 9.6vw, 48px); }
.ch-table { margin-top: var(--s2); }
.ch-table .seed-cell { color: var(--secondary-on-stage); font-size: 0.85rem; }
.ch-table .gap-cell { color: var(--invariant); font-weight: 650; }

@media (max-width: 720px) {
  .ch-supply { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Wrap the supply rows instead of fanning, so every card is a full 44px+ tap target */
  .ch-supply { --card-w: 48px; }
  .ch-supply .card-row.fan { flex-wrap: wrap; gap: 6px; }
  .ch-supply .card-row.fan > .card + .card { margin-left: 0; }
  .mira-top { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .mats { gap: 6px; }
  .mat { padding: 4px 4px 10px; }
  .mat-head { padding: 4px; }
  .mat-name { font-size: 0.9rem; }
  .step-count { margin-left: 0; flex-basis: 100%; }
  .eq-label { display: block; min-width: 0; }
}