/* Baby Hummer — 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; }
.row-ends .bottom-marker { color: var(--structure); }
.places { display: grid; grid-template-columns: repeat(var(--n), var(--card-w)); gap: var(--place-gap, 14px); }
.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; }
.places-box.is-spread .places { --place-gap: 30px; }

/* Lift a cut packet; turn a packet as one unit (stagekit.js) */
.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 */
.bh-stage { --card-w: 92px; }
@media (max-width: 560px) { .bh-stage { --card-w: 66px; } .places { --place-gap: 10px; } .places-box.is-spread .places { --place-gap: 16px; } }

/* Layout of the stage */
.bh-main { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: flex-start; margin-top: var(--s3); }
.bh-side { display: grid; gap: var(--s2); min-width: 0; }
.bh-controls { margin-top: var(--s3); }
.bh-controls .group-label { width: 100%; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.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; }
.readout-value.is-counter { color: var(--counter); }
.readouts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }

/* Peek button: press and hold */
.peek-btn { touch-action: none; -webkit-touch-callout: none; user-select: none; }
.peek-note { font-size: 0.9rem; color: var(--secondary-on-stage); }

/* Counter-styled button for the forbidden move (sandbox only) */
.stage .btn-counter { --btn-fg: var(--counter); --btn-border: color-mix(in oklch, var(--counter) 70%, transparent); }

/* Seats around a tiny table (the simplified representation) */
.seats { width: 210px; max-width: 100%; height: auto; overflow: visible; }
.seats .table-ring { fill: none; stroke: var(--structure); stroke-width: 1.5; stroke-dasharray: 4 5; }
.seats .seat-no { fill: var(--secondary-on-stage); font: 600 12px var(--font-ui); text-anchor: middle; }
.seats .mate-line { stroke-width: 3; stroke-linecap: round; transition: opacity 200ms ease; }
.seats .mate-line.is-invariant { stroke: var(--invariant); }
.seats .mate-line.is-counter { stroke: var(--counter); stroke-dasharray: 6 6; }
.seats .mini { transition: transform 450ms var(--ease-in-out); }
.seats .mini rect { stroke-width: 0; }
.seats .mini.up rect { fill: var(--paper); }
.seats .mini.down rect { fill: var(--card-back); stroke: var(--card-back-line); stroke-width: 1.5; }
.seats .mini text { font: 700 13px var(--font-ui); text-anchor: middle; dominant-baseline: central; }
.seats .mini.up text { fill: var(--black-ink); }
.seats .mini.up.red text { fill: var(--red-ink); }
.seats .mini.down text { fill: var(--paper); font-size: 11px; opacity: 0.85; }
.seats .mini .sel-ring { fill: none; stroke: var(--active); stroke-width: 2.5; }
.seats-caption { font-size: 0.85rem; color: var(--secondary-on-stage); max-width: 30ch; }
@media (prefers-reduced-motion: reduce) { .seats .mini { transition: none; } }

/* Finish question */
.question { display: grid; gap: 10px; margin-top: var(--s2); }
.question .q { font-weight: 600; }

/* The reveal's one accent: the card leans; nothing else moves */
.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; }

/* Tables in prose */
.prose .table-wrap { margin-top: 1em; }

/* Identity tags may wrap to two lines on narrow cards */
.places-box .row-ends { margin-bottom: 14px; }
.bh-stage .places-box .row-ends { margin-bottom: 40px; }
.bh-stage .card-tag { white-space: normal; width: max-content; max-width: calc(var(--card-w) + 12px); text-align: center; line-height: 1.15; }
.card-tag.is-odd { color: var(--paper); }
#try-stage .places-box .row-ends { margin-bottom: 14px; }

.seats .mate-line.is-pair { stroke-dasharray: 5 6; }
.bh-stage .stage-instruction { margin-bottom: var(--s3); }