/* Last Cards Match — page-specific layout. Tokens and shared classes come from site.css. */

/* Local override for a shared-CSS clash: `.curtain .btn { background: var(--page) }` paints the
   primary curtain button the colour of its own label. Keep the primary fill. */
.curtain .btn-primary { background: var(--btn-bg); }
/* `.btn { display: inline-flex }` beats the [hidden] attribute; make hidden mean hidden on these stages. */
#try-stage [hidden], #why-stage [hidden], #challenge-stage [hidden] { display: none !important; }
/* Long, specific button labels may wrap on phones rather than overflow. */
.stage .btn { white-space: normal; text-align: center; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }

/* ---------- Packets ---------- */
#try-stage { --card-w: clamp(56px, 6.6vw, 78px); }
#try-stage .stage-instruction { margin-bottom: 12px; }
.try-readouts { gap: 12px 32px; margin: 4px 0 28px; align-items: flex-end; }
.packets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 680px) { .packets { grid-template-columns: minmax(0, 1fr); } }
.packet { display: grid; gap: 8px; justify-items: start; align-content: start; }
.packet-head { display: flex; gap: 12px; align-items: baseline; }
.packet-size { font-size: 0.85rem; color: var(--secondary-on-stage); }
.packet-row { flex-wrap: nowrap; }
.packet-row.is-clickable { cursor: pointer; }
.packet .top-marker { margin-top: -2px; }
.move-btn { margin-top: 6px; }
.btn-suit { font-size: 1.15em; line-height: 1; }

/* The move strip: eleven numbered slots, filled with the packet chosen */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tick {
  width: 26px; height: 36px; border-radius: 5px; border: 1.5px dashed rgba(244, 239, 228, 0.22);
  display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center; padding-top: 3px;
  color: var(--structure); line-height: 1;
}
.tick-n { font-size: 0.62rem; font-weight: 600; }
.tick-s { font-size: 1rem; }
.tick[data-side="H"], .tick[data-side="S"] { background: var(--paper); border: 1.5px solid var(--paper); color: rgba(23, 33, 43, 0.55); }
.tick[data-side="H"] .tick-s { color: var(--red-ink); }
.tick[data-side="S"] .tick-s { color: var(--black-ink); }
.tick.is-last { box-shadow: 0 0 0 2px var(--stage), 0 0 0 4px var(--active); }

/* Discarded pairs */
.discards-wrap { margin-top: 32px; display: grid; gap: 10px; }
.discards { display: flex; flex-wrap: wrap; gap: 12px; }
.discard {
  --card-w: 40px;
  display: grid; gap: 6px; justify-items: center; padding: 8px 10px 10px;
  border: 1.5px dashed rgba(244, 239, 228, 0.18); border-radius: 10px; min-width: 104px;
  transition: border-color 160ms ease;
}
.discard.is-target { border-color: var(--active); border-style: solid; }
.discard-row { flex-wrap: nowrap; justify-content: center; }
.try-controls { margin-top: 24px; }
#try-stage .verdict { margin-top: 20px; }
#try-stage .stage-caption:empty { display: none; }
#try-stage .stage-caption { margin-top: 8px; }
/* The one whimsical accent: the last two cards lean toward each other. */
.card.lean-in-r .card-tilt { transform: rotate(3deg); }
.card.lean-in-l .card-tilt { transform: rotate(-3deg); }

/* ---------- Why: packets beside the ring of ranks ---------- */
#why-stage { --card-w: clamp(46px, 5vw, 60px); }
.why-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 16px; }
.src-note { font-size: 0.92rem; }
.why-instr { min-height: 4.4em; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 40px; align-items: start; margin-top: 8px; }
@media (max-width: 760px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }
.why-cards { display: grid; gap: 18px; align-content: start; }
.why-ticks { display: grid; gap: 8px; }
.why-ledger { max-height: none; margin-top: 6px; }
.why-ledger li.is-empty::before { content: none; }
.why-clock { display: grid; gap: 12px; justify-items: center; }
.clock { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.clock-ring { fill: none; stroke: var(--structure); stroke-width: 2; }
.clock-arc { fill: none; stroke: var(--invariant); stroke-width: 6; stroke-linecap: round; }
.clock-arc-label { fill: var(--invariant); font: 600 16px var(--font-ui); stroke: var(--stage); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
.clock-node { transition: transform 460ms var(--ease-in-out), opacity 300ms ease; }
.clock-node circle { fill: var(--paper); stroke: transparent; stroke-width: 4; transition: stroke 160ms ease; }
.clock-node text { fill: var(--black-ink); font: 700 20px var(--font-ui); }
.clock-node.is-match circle { stroke: var(--invariant); }
.clock-node.is-gone { opacity: 0; }
.clock-ptr, .clock-ptr-inner { transition: transform 460ms var(--ease-in-out); }
.clock-ptr rect { fill: var(--paper); stroke: transparent; stroke-width: 3.5; transition: stroke 160ms ease; }
.clock-ptr text { font: 700 21px var(--font-ui); }
.ptr-H text { fill: var(--red-ink); }
.ptr-S text { fill: var(--black-ink); }
.clock-ptr.is-active rect { stroke: var(--active); }
.clock-ptr.is-match rect { stroke: var(--invariant); }
.clock-legend { display: grid; gap: 6px; justify-items: start; max-width: 320px; }
.lg-ptr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--paper); margin-right: 8px; font-size: 0.85rem; vertical-align: -4px; }
.clock-legend span:nth-child(1) .lg-ptr { color: var(--red-ink); }
.clock-legend span:nth-child(2) .lg-ptr { color: var(--black-ink); }
.why-readouts { gap: 12px 28px; margin-top: 24px; }
.why-law { margin-top: 16px; }
#why-stage .controls { margin-top: 24px; }
.step-count { margin-left: auto; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .clock-node, .clock-ptr, .clock-ptr-inner { transition: none; }
}

/* ---------- Challenge ---------- */
.tasks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.tasks li { display: flex; gap: 12px; align-items: baseline; }
.tasks .chip { flex: none; min-width: 64px; justify-content: center; }
.ch-settings { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start; margin-bottom: 20px; }
.stepper { display: inline-flex; gap: 6px; align-items: center; }
.btn-step { min-width: 44px; padding: 0; font-size: 1.25rem; }
.split-field { min-width: min(280px, 100%); }
.split-field input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--active); }
.split-out { color: var(--paper); font-size: 0.95rem; }
.ch-instr { margin-top: 20px; min-height: 0; }
.ch-results { --card-w: 46px; display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 16px 0 20px; }
.ch-pair { display: grid; gap: 8px; justify-items: start; }
.ch-arith { font-size: 0.85rem; color: var(--secondary-on-stage); line-height: 1.3; display: grid; }
.ch-line { white-space: nowrap; }
.ch-arith.is-bad { color: var(--counter); }
.is-stale { opacity: 0.4; }