/* Always Five Face Up — page-specific styles. Shared tokens and classes come from site.css. */

/* ---- Numbered places: fixed slots that cards move between ---- */
.places-box { display: grid; gap: 6px; justify-content: start; }
.row-ends { display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 700; margin-bottom: 34px; }
.row-ends .bottom-marker { color: var(--structure); }
.places { display: grid; grid-template-columns: repeat(var(--n), var(--card-w)); gap: 32px var(--place-gap, 12px); }
.place { display: grid; justify-items: center; gap: 8px; }
.place-slot { 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.10); outline-offset: 2px; position: relative; }
.place-no { font-size: 0.85rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; line-height: 1; min-width: 26px; min-height: 22px; display: grid; place-items: center; border-radius: 5px; border: 1.5px solid transparent; }
/* Even lane: boxed numbers (lane membership is a property of the place, not the card) */
.place.is-even .place-no { border-color: rgba(244, 239, 228, 0.35); }
.place.is-target .place-no { border-color: var(--active); color: var(--active); font-weight: 700; }
.place.is-done .place-no { border-color: rgba(244, 239, 228, 0.35); color: var(--paper); }
.place.is-pulse .place-no { border-color: var(--active); color: var(--active); }

/* Cut preview, lift, packet turn (stagekit.js) */
.card.will-cut { outline: 2px dashed var(--secondary-on-stage); outline-offset: 3px; }
.card.will-cut .card-tilt { transform: translateY(-5px); }
.card.is-lifted .card-tilt { transform: translateY(calc(var(--w) * -0.2)); }
.card.is-packet-turning { transform-style: preserve-3d; perspective: none; }
.card.is-packet-turning .card-tilt { transform-style: preserve-3d; }
.card.is-packet-turning .card-tag { opacity: 0; }

/* Card sizes: ten in a row on wide screens, two rows of five on phones */
.ff-stage { --card-w: 74px; }
.ff-table { margin-top: var(--s3); }
@media (max-width: 1100px) { .ff-stage { --card-w: 62px; } }
.row-ends .wrap-marker { display: none; }
@media (max-width: 860px) { .ff-stage .places { grid-template-columns: repeat(5, var(--card-w)); } .ff-stage .row-ends .bottom-marker { display: none; } .ff-stage .row-ends .wrap-marker { display: inline; } }
@media (max-width: 560px) { .ff-stage { --card-w: 54px; } .ff-stage .places { --place-gap: 12px; } }
/* When the row wraps, the numbered places carry the reading order; leave room for tags */


.ff-controls { margin-top: var(--s3); }
.seed { font-size: 0.85rem; color: var(--secondary-on-stage); }
.seed code { font-family: var(--font-ui); color: var(--paper); }
.stage .ledger.inline { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: none; }
.progress { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.readouts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; margin-top: var(--s2); }
.readout-value.is-counter { color: var(--counter); }
.lane-readouts .rel .chip { margin-top: 6px; }
.stage .btn-counter { --btn-fg: var(--counter); --btn-border: color-mix(in oklch, var(--counter) 70%, transparent); }

/* The sealed prediction */
.pred { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.pred .card { --card-w: 70px; }
.pred-label { font-size: 0.9rem; color: var(--secondary-on-stage); max-width: 22ch; }
.pred-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--black-ink); line-height: 1.05; text-align: center; }
.pred-text span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.pred-text b { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1.1; }
.reveal-line { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.3; color: var(--paper); max-width: 40ch; display: block; }

/* Challenge */
.variant-pick { flex-wrap: wrap; }
.rule-line { margin-top: var(--s2); color: var(--secondary-on-stage); max-width: 62ch; }
.rule-line strong { color: var(--paper); }
.question { display: grid; gap: 10px; margin-top: var(--s2); }
.question .q { font-weight: 650; }
.question .controls .btn { white-space: normal; text-align: left; line-height: 1.25; padding: 10px 14px; }
.legend span { display: inline-block; }
#try-stage .row-ends { margin-bottom: 12px; }
.place-slot .card:disabled { cursor: default; }