/* Bunco night kit. The page chrome comes from /lib/style.css (the Press design
   system, shared with the bingo tool). The printed sheets use their own colour
   theme (--k-*) and type, and are laid out in millimetres so the preview and
   the paper match: nothing below the "printed sheets" line follows the site design. */

/* Printable area: the paper less 10 mm margins, with 2 mm to spare. */
body, body.paper-letter { --paper-w: 215.9mm; --paper-h: 279.4mm; --pw: 194mm; --ph: 257mm; }
body.paper-a4 { --paper-w: 210mm; --paper-h: 297mm; --pw: 188mm; --ph: 275mm; }

/* ---------- controls ---------- */
.panel > .hint { margin-top: -8px; }
.sheets { border: 0; padding: 0; gap: 0; }
.sheets legend { margin-bottom: 4px; }

.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-opt {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 6px 8px;
  border: var(--rule); border-radius: var(--radius); background: #fff; cursor: pointer; font-size: 15px; font-weight: 700;
  transition: transform var(--dur-quick), box-shadow var(--dur-quick);
}
.theme-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-opt:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.theme-opt:has(input:checked) { background: var(--ink); color: var(--on-ink); box-shadow: 4px 4px 0 var(--orange); }
.theme-opt:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.theme-chip { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius); }
.theme-chip svg { width: 18px; height: 18px; }
.theme-name { flex: 1; min-width: 0; }
.lock { display: inline-grid; flex: none; width: 14px; height: 14px; color: var(--ink-2); }
.theme-opt:has(input:checked) .lock { color: var(--on-ink-2); }
.lock svg { width: 100%; height: 100%; }

/* ---------- preview ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.pager .btn { min-width: var(--tap); padding: 0 12px; font-size: 22px; line-height: 1; }
.pager .preview-meta { min-width: 0; }

/* A sheet of paper at the chosen size; the page inside is scaled to fit. */
.paper {
  position: relative; overflow: hidden; background: #fff; width: min(100%, 540px); justify-self: center;
  aspect-ratio: 215.9 / 279.4; border-radius: 0; box-shadow: var(--shadow-sheet), 0 0 0 1px rgb(28 29 34 / 0.1);
}
.paper[data-paper="a4"] { aspect-ratio: 210 / 297; }
.paper-scale { position: absolute; left: 0; top: 0; width: var(--paper-w); height: var(--paper-h); padding: 10mm; transform-origin: 0 0; }

/* ---------- printed sheets (shared by preview and paper) ---------- */
.kit-page {
  width: var(--pw); height: var(--ph); overflow: hidden; display: flex; flex-direction: column;
  background: #fff; color: var(--k-ink); font: 10pt/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.kit-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kit-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4mm; }
/* Fixed blocks keep their size; the block marked flex: 1 on each page takes what's left. */
.kit-body > * { flex-shrink: 0; }
.made-with { margin: 2mm 0 0; text-align: center; font-size: 7.5pt; color: #777; }
.kit-page h2, .kit-page h3, .kit-page p { margin: 0; }
.motif { display: inline-grid; flex: none; color: var(--k-accent); }
.motif svg { width: 100%; height: 100%; }

.kit-head { display: flex; align-items: center; gap: 4mm; padding-bottom: 3mm; border-bottom: 0.6mm solid var(--k-accent); }
.kit-head .motif { width: 12mm; height: 12mm; }
.kit-head-text { flex: 1; min-width: 0; }
.kit-title { font-size: 22pt; line-height: 1.1; font-weight: 800; color: var(--k-ink); }
.kit-sub { font-size: 10.5pt; color: var(--k-accent); font-weight: 600; overflow-wrap: anywhere; }
.pill { flex: none; font-size: 11pt; font-weight: 800; color: #fff; background: var(--k-accent); border-radius: 99px; padding: 1.5mm 5mm; }
.kit-note { font-size: 9.5pt; color: #444; }
.kit-box { border: 0.3mm solid var(--k-accent); background: var(--k-soft); border-radius: 2.5mm; padding: 3mm 4mm; display: grid; gap: 1.5mm; font-size: 9.5pt; }
.kit-box h3 { font-size: 11pt; color: var(--k-accent); }

/* Grids drawn as cells over a dark background: crisp lines on screen and paper. */
.sc-grid, .tally-grid, .out-grid, .prize-grid, .roster-grid {
  display: grid; gap: 0.3mm; background: var(--k-ink); border: 0.35mm solid var(--k-ink); border-radius: 1.5mm; overflow: hidden;
}
.cell { background: #fff; padding: 0.6mm 1.5mm; min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; }
.cell.th { background: var(--k-accent); color: #fff; font-weight: 700; font-size: 8.5pt; justify-content: center; text-align: center; line-height: 1.1; }
.cell.rl { background: var(--k-soft); font-weight: 700; justify-content: center; }
.cell.spacer { background: var(--k-soft); }
.cell.total { background: #fff; box-shadow: inset 0 0 0 0.4mm var(--k-accent); }

/* Score cards: 6 (2 x 3) or 4 (2 x 2) to a page, with cut space between. */
.score-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5mm 5mm; }
.score-cards[data-per-page="4"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.score-card { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5mm; border: 0.3mm dashed #999; border-radius: 3mm; padding: 3mm; }
.sc-head { display: flex; align-items: center; gap: 2mm; }
.sc-head .motif { width: 6mm; height: 6mm; }
.sc-heading { flex: 1; min-width: 0; font-weight: 800; font-size: 11pt; color: var(--k-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-date { font-size: 8pt; color: #555; white-space: nowrap; }
.sc-who { display: flex; align-items: baseline; justify-content: space-between; gap: 2mm; border-bottom: 0.3mm solid var(--k-ink); padding-bottom: 0.8mm; }
.sc-name { font-weight: 800; font-size: 12pt; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-name.blank { font-weight: 400; font-size: 8.5pt; color: #666; }
.sc-meta { font-size: 7.5pt; color: #555; white-space: nowrap; }
.sc-grid { flex: 1; min-height: 0; grid-template-columns: 13mm repeat(var(--sets), minmax(0, 1fr)) 11mm; grid-template-rows: auto repeat(10, minmax(0, 1fr)); font-size: 8.5pt; }
.sc-grid[data-single] { grid-template-columns: 15mm minmax(0, 1fr); }
.sc-grid .cell { padding: 0 1mm; }
.sc-grid .cell.th { padding: 0.8mm 0.5mm; font-size: 7.5pt; }
.sc-hint { font-size: 7pt; color: #555; text-align: center; }

/* Table tally: one page per table, a block per set. */
.tally-sets { flex: 1; min-height: 0; display: grid; gap: 4mm; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.tally-sets[data-sets="1"] { grid-template-columns: 1fr; }
.tally-set { min-height: 0; display: flex; flex-direction: column; gap: 1mm; }
.tally-set-title { font-size: 11pt; color: var(--k-accent); }
.tally-grid { flex: 1; min-height: 0; grid-template-columns: 13mm 1fr 1fr; grid-template-rows: auto repeat(6, minmax(0, 1fr)); }
.tally-grid .cell.rl { font-size: 14pt; }
.tally-sets[data-sets="1"] .tally-grid .cell.rl { font-size: 22pt; }
.tally-sets[data-sets="1"] .tally-grid .cell.th { font-size: 10pt; padding: 1.5mm; }

/* Table cards: two tent cards a page. Cut across the middle, fold each in half. */
.kit-tables .kit-body { gap: 0; }
.tent { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tent + .tent { border-top: 0.3mm dashed #999; }
.tent.empty { border-top: 0.3mm dashed #999; }
.tent-face { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5mm; background: var(--k-soft); margin: 3mm 0; border-radius: 3mm; }
.tent-face.flip { transform: rotate(180deg); }
.tent-face .motif { width: 10mm; height: 10mm; }
.tent-label { font-size: 14pt; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--k-ink); }
.tent-number { font-size: 64pt; line-height: 1; font-weight: 900; color: var(--k-accent); }
.tent-sub { font-size: 12pt; font-weight: 700; color: var(--k-ink); max-width: 90%; overflow-wrap: anywhere; }
.fold { flex: none; border-top: 0.3mm dotted #bbb; height: 0; font-size: 0; }

/* Rules sheet. */
.rules-score { border: 0.4mm solid var(--k-accent); border-radius: 2.5mm; padding: 2.5mm 4mm; display: grid; gap: 1.5mm; }
.rules-score h3 { font-size: 11pt; color: var(--k-accent); }
.rs-row { display: flex; align-items: center; gap: 4mm; }
.rs-dice { display: flex; gap: 1.2mm; color: var(--k-ink); }
.die { width: 9mm; height: 9mm; display: inline-grid; }
.die svg { width: 100%; height: 100%; }
.rs-what { flex: 1; font-size: 11pt; }
.rs-points { font-weight: 800; font-size: 11pt; color: var(--k-accent); white-space: nowrap; }
.rules-cols { columns: 2; column-gap: 7mm; }
.rules-part { break-inside: avoid; margin-bottom: 3mm; display: grid; gap: 1mm; font-size: 10pt; line-height: 1.3; }
.rules-part h3 { font-size: 12pt; color: var(--k-accent); }
.house { margin-top: auto; display: grid; gap: 5.5mm; }
.house h3 { font-size: 11pt; color: var(--k-accent); }
.house .line { border-bottom: 0.3mm solid #999; height: 0; }

/* Seating chart. */
.seat-tables { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4mm; }
.seat-tables[data-cols="3"] { --cols: 3; }
.seat-tables[data-cols="3"] .seat { font-size: 8pt; }
.seat-table { min-height: 0; border: 0.3mm solid var(--k-accent); border-radius: 2.5mm; padding: 2mm 3mm; display: flex; flex-direction: column; gap: 1.5mm; max-height: 70mm; }
.seat-table h3 { font-size: 10pt; color: var(--k-accent); }
.seat-map { flex: 1; min-height: 0; display: grid; grid-template: "top top top" auto "left board right" minmax(9mm, 1fr) "bottom bottom bottom" auto / minmax(0, 1fr) 15mm minmax(0, 1fr); gap: 1mm; align-items: center; }
.seat-board { grid-area: board; justify-self: center; width: 13mm; height: 13mm; display: grid; place-items: center; background: var(--k-soft); border: 0.3mm solid var(--k-accent); border-radius: 2mm; font-weight: 800; font-size: 13pt; color: var(--k-accent); }
.seat { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; font-size: 8.5pt; line-height: 1.15; }
.seat.top { grid-area: top; } .seat.bottom { grid-area: bottom; } .seat.left { grid-area: left; } .seat.right { grid-area: right; }
.seat-letter { font-weight: 800; color: var(--k-accent); font-size: 8pt; }
.seat-name { max-width: 100%; overflow-wrap: anywhere; }
.seat.ghost .seat-name { color: #888; font-style: italic; }

/* Who sits out. */
.out-grid { grid-template-columns: 16mm repeat(var(--sets), minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(14mm, auto)); }
.out-grid .cell:not(.th):not(.rl) { flex-direction: column; align-items: flex-start; justify-content: center; font-size: 8.5pt; gap: 0.5mm; padding: 1mm 1.5mm; }
.out-name { overflow-wrap: anywhere; }

/* Prize tracker. */
.prize-grid { grid-template-columns: 38mm 1fr 22mm; grid-auto-rows: 10mm; }
.prize-grid .cell.rl { justify-content: flex-start; }
.roster-title { font-size: 11pt; color: var(--k-accent); }
.roster { flex: 1; min-height: 0; display: grid; gap: 4mm; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.roster[data-cols="2"] { --cols: 2; }
/* Rows share the space left on the page, up to 10 mm each. */
.roster-grid { align-self: start; height: 100%; max-height: calc(var(--rows) * 10mm + 7mm); grid-template-columns: minmax(0, 1fr) repeat(4, 12mm); grid-template-rows: auto repeat(var(--rows), minmax(0, 1fr)); font-size: 8.5pt; }
.roster-grid .cell.name { justify-content: flex-start; font-weight: 600; font-size: 8pt; line-height: 1.05; overflow-wrap: anywhere; }
.roster-grid .cell.th { font-size: 7.5pt; }

/* ---------- print ---------- */
.print-only { display: none; }
@media print {
  body { background: #fff; }
  .no-print, .test-banner { display: none !important; }
  .print-only { display: block; }
  .sheet .kit-page { break-after: page; break-inside: avoid; }
  .sheet .kit-page:last-child { break-after: auto; }
}