/* The Lie Detector — local styles only (shared classes come from site.css). */

/* ---------- Layout on the stage ---------- */
.ld-table { display: grid; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.ld-zone { display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.ld-zone[hidden], .ld-peek[hidden], .ld-fan[hidden], .ld-stack[hidden], .ld-input-msg[hidden], .ld-pair[hidden], .ld-cols[hidden], .ld-label-line[hidden], .legend[hidden], .ld-side-pile[hidden] { display: none; }
.ld-label-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ld-label-line .pile-label { text-align: left; }
.ld-formula { font-size: 0.9rem; color: var(--secondary-on-stage); }
.ld-row { min-height: calc(var(--card-w) * var(--card-ratio)); }
.ld-tagged { padding-top: 18px; row-gap: 24px; }
/* an empty row shows where the next card will land */
.ld-row:empty::before { content: ""; width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio));
  border-radius: calc(var(--card-w) * 0.09); outline: 1.5px dashed rgba(244, 239, 228, 0.22); outline-offset: -1.5px; }

/* Piles as physical stacks (top card painted last) */
.ld-piles { display: flex; gap: var(--s4); }
.ld-stack { position: relative; width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio)); margin-top: 16px; }
.ld-stack > .card { position: absolute; left: 0; top: 0; }
.ld-stack:empty { border-radius: calc(var(--card-w) * 0.09); outline: 1.5px dashed rgba(244, 239, 228, 0.18); outline-offset: -1.5px; }

/* Rounds: my side and your side */
.ld-side { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; }
.ld-side-pile, .ld-side-audit, .ld-peek { display: grid; gap: 8px; justify-items: start; align-content: start; }
.ld-audit { display: grid; grid-template-columns: repeat(8, var(--card-w)); gap: 6px; padding-top: 18px; }
.ld-slot { display: grid; justify-items: center; gap: 4px; }
.ld-slot-card { width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio)); border-radius: calc(var(--card-w) * 0.09);
  outline: 1.5px dashed rgba(244, 239, 228, 0.18); outline-offset: -1.5px; }
.ld-slot-card:has(.card) { outline-color: transparent; }
.ld-slot-note { font-size: 0.78rem; line-height: 1.2; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ld-peek-body { display: flex; align-items: center; gap: var(--s2); }
.ld-peek-spot { --card-w: clamp(66px, 17vw, 88px); width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio));
  border-radius: calc(var(--card-w) * 0.09); outline: 1.5px dashed rgba(244, 239, 228, 0.18); outline-offset: -1.5px; }
.ld-peek-spot:has(.card) { outline-color: transparent; }
.ld-peek-side { display: grid; gap: 6px; min-width: 7.5em; }
.ld-peek-note { font-size: 0.9rem; color: var(--secondary-on-stage); max-width: 14ch; }
.ld-big-verdict { font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1; min-height: 1em; }
.ld-big-verdict[data-kind="true"] { color: var(--invariant); }
.ld-big-verdict[data-kind="lie"] { color: var(--counter); }

.ld-readouts { gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
.ld-readouts[hidden] { display: none; }
.ld-finale { margin: 0 0 var(--s2); }
.ld-controls { margin-top: var(--s1); }
.ld-ctl-group { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ld-ctl-group .field input { width: 5.2em; }
.ld-take { min-width: 9.5em; }
.ld-claim { min-width: 8.5em; }
.ld-seed { margin-top: var(--s2); }
.ld-ledger-wrap { margin-top: var(--s3); }
.ld-ledger-wrap > summary { cursor: pointer; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.ld-ledger-wrap[hidden] { display: none; }
.ld-ledger-wrap .ledger { margin-top: 8px; }

/* ---------- Why it works ---------- */
.ld-why-caption { min-height: 4.4em; }
.ld-deck { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 18px; transition: gap 300ms var(--ease-in-out); }
.ld-pair { display: flex; gap: 4px; position: relative; }
.ld-deck.is-tagged { row-gap: 24px; }
.ld-deck.is-blocks { column-gap: 14px; row-gap: 44px; padding-bottom: 30px; }
.ld-deck.is-blocks .ld-pair::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -11px; height: 7px;
  border: 2px solid var(--invariant); border-top: 0; border-radius: 0 0 4px 4px; pointer-events: none;
}
.ld-deck.is-blocks .ld-pair::before {
  content: attr(data-n); position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  font-size: 0.78rem; font-weight: 700; color: var(--invariant); font-variant-numeric: tabular-nums;
}
.ld-cols { display: grid; grid-template-columns: repeat(8, var(--card-w)); column-gap: 8px; }
.ld-pile-row { min-height: calc(var(--card-w) * var(--card-ratio)); padding-bottom: 20px; }
.ld-pile-row .card-tag.below { font-size: 0.78rem; }
.ld-connectors { margin: -6px 0 2px; }
.ld-conn { justify-self: center; width: 2px; height: 16px; background: var(--invariant); border-radius: 1px; }
.ld-bits { margin: -8px 0 6px; }
.ld-bit { justify-self: center; font-size: 0.74rem; color: var(--secondary-on-stage); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-record { row-gap: 4px; }
.ld-rec {
  justify-self: center; width: var(--card-w); min-height: 36px; display: grid; place-items: center; line-height: 1.05;
  background: var(--paper); color: var(--black-ink); border-radius: 6px; font-weight: 700; font-size: 1rem;
  box-shadow: 0 0 0 2px var(--invariant);
}
.ld-rec[data-color="red"] { color: var(--red-ink); }
.ld-rec small { font-size: 0.68rem; font-weight: 600; color: #4B5A66; }
.ld-code-legend { margin-top: 6px; }
.ld-why-piles { gap: 6px; }
.ld-why-status { margin: var(--s1) 0 var(--s2); gap: var(--s2) var(--s4); }
.ld-why-status .readout[hidden] { display: none; }
#why-stage > .ledger { margin-top: var(--s3); max-height: none; }
.ld-after-stage { margin-top: var(--s4); }
.ld-decoder td:last-child { font-weight: 650; }

/* ---------- Challenge ---------- */
.ld-ch-grid { display: grid; gap: var(--s3); margin: var(--s3) 0; }
@media (min-width: 900px) { .ld-ch-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.ld-ch-grid .ledger { max-height: none; margin-top: 8px; }
.ld-ch-grid .ledger li:last-child { color: var(--active); }
.ld-ch-cards { display: grid; gap: 8px; justify-items: start; }
.ld-ch-row { grid-template-columns: repeat(4, var(--card-w)); column-gap: 16px; padding-top: 18px; margin-bottom: 8px; }
.ld-ch-pred { grid-template-columns: repeat(4, var(--card-w)); column-gap: 16px; }
.ld-vseg { flex-direction: column; width: var(--card-w); }
.ld-vseg button { min-width: 0; padding: 0 2px; font-size: 0.9rem; min-height: 40px; }
#challenge-stage .verdict { margin-top: var(--s3); }
#challenge-stage > .stage-instruction { margin-top: var(--s1); min-height: 0; }
#challenge-stage > .controls { margin-top: var(--s2); }
#challenge-stage > .stage-caption { margin-top: var(--s3); }

@media (max-width: 560px) {
  .ld-piles { gap: var(--s3); }
  .ld-audit { gap: 5px; }
  .ld-cols { column-gap: 6px; }
  .ld-ch-row, .ld-ch-pred { column-gap: 12px; }
  .ld-bit { font-size: 0.66rem; }
  .ld-deck.is-blocks { column-gap: 12px; }
}

/* Review fixes: my shown cards (fan, then a squared face-up pile), input range message, start over */
.ld-fan { padding-top: 0; min-height: calc(var(--card-w) * var(--card-ratio)); }
.ld-shown-stack { margin-top: 16px; }
.ld-input-msg { flex-basis: 100%; color: var(--counter); font-size: 0.95rem; max-width: 60ch; }
.ld-start-over { margin-left: auto; font-weight: 500; color: var(--secondary-on-stage); }
@media (max-width: 560px) { .ld-start-over { margin-left: 0; } }