/* Bingo stays scoped so printing cannot change other tools. */
.bg-app { min-width: 0; }
.bg-app [hidden] { display: none !important; }
.bg-app input:not([type="checkbox"]), .bg-app select, .bg-app textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.bg-app textarea { resize: vertical; }
.bg-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.bg-settings .field, .bg-actions .field { min-width: 0; }
.bg-check { display: flex; align-items: center; gap: .5rem; }
.bg-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 1rem 0; }
.bg-app .btn { white-space: normal; max-width: 100%; }
.bg-card { border: 2px solid var(--text); padding: .75rem; border-radius: .5rem; margin: 1rem auto; max-width: 720px; }
.bg-card h3 { margin: 0 0 .75rem; font-size: 1.1rem; overflow-wrap: anywhere; text-align: right; }
.bg-grid { display: grid; gap: 0; border-top: 1px solid var(--text); border-left: 1px solid var(--text); }
.bg-cell, .bg-column { box-sizing: border-box; min-width: 0; border: 0; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); padding: .5rem .2rem; text-align: center; }
.bg-cell { display: flex; justify-content: center; align-items: center; min-height: 3.2rem; font: inherit; font-size: clamp(.7rem, 2.5vw, 1rem); overflow-wrap: anywhere; background: var(--bg); color: var(--text); border-radius: 0; }
button.bg-cell { cursor: pointer; }
button.bg-cell[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 700; }
button.bg-cell:disabled { opacity: 1; cursor: default; }
button.bg-cell:focus-visible { outline: 3px solid var(--accent, #6366f1); outline-offset: -4px; }
.bg-blank { background: var(--border); }
.bg-result { min-height: 1.5em; font-size: 1.4rem; font-weight: 700; text-align: center; }
.bg-current { font-size: clamp(2rem, 7vw, 4rem); line-height: 1.2; font-weight: 700; text-align: center; overflow-wrap: anywhere; min-height: 1.2em; }
.bg-history { display: flex; flex-wrap: wrap; gap: .5rem 2rem; max-height: 12rem; overflow-y: auto; padding: .5rem 2rem; }
#bg-print-area { display: none; }
#bg-status, #bg-check-result { min-height: 1.5em; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bg-settings { grid-template-columns: minmax(0, 1fr); }
  .bg-card { padding: .35rem; }
  .bg-cell { padding: .35rem .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-app * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@page bingo { size: A4; margin: 12mm; }
@media print {
  html, body { background: white !important; color: black !important; margin: 0 !important; padding: 0 !important; }
  body > :not(main), main > :not(:first-child), main > .container > :not(.bg-app), .bg-app > :not(#bg-print-area) { display: none !important; }
  main, main > .container, .bg-app { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  #bg-print-area { display: block; }
  .bg-sheet { page: bingo; height: var(--bg-sheet-height, 270mm); display: grid; gap: 5mm; break-after: page; break-inside: avoid; }
  .bg-sheet:last-child { break-after: auto; }
  .bg-per-1 { grid-template-rows: minmax(0, 1fr); }
  .bg-per-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .bg-per-4 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
  .bg-card { display: flex; flex-direction: column; min-height: 0; min-width: 0; max-width: none; margin: 0; padding: 3mm; border: 1pt solid black; border-radius: 0; break-inside: avoid; background: white !important; color: black !important; }
  .bg-card h3 { font-size: 12pt; margin: 0 0 2mm; }
  .bg-grid { flex: 1; grid-auto-rows: minmax(0, 1fr); border-color: black; }
  .bg-cell, .bg-column { min-height: 0; border-color: black; background: white !important; color: black !important; font-size: 13pt; padding: 1mm; }
  .bg-blank { background: #eee !important; }
  .bg-per-4 .bg-cell, .bg-per-4 .bg-column { font-size: 8pt; line-height: 1.1; }
  .bg-per-4 .bg-card h3 { font-size: 9pt; }
  .bg-checklist { page: bingo; break-before: page; color: black; }
  .bg-checklist ul { columns: 2; list-style: none; padding: 0; }
  .bg-checklist li { break-inside: avoid; margin: 0 0 2mm; overflow-wrap: anywhere; }
}