/* Bingo card styles, shared by the on-page preview and the PDF output. */
.card { background: #fff; border: 3px solid #1f2430; border-radius: 6px; padding: 12px; max-width: 520px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: #1f2430; }
.card-title { text-align: center; font-weight: 800; font-size: 1.4em; margin: 0 0 8px; overflow-wrap: anywhere; }
.card-letters { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-weight: 900; font-size: 2.2em; line-height: 1.1; color: #d94f30; }
.card-grid { display: grid; border-top: 2px solid #1f2430; border-left: 2px solid #1f2430; }
.card-3 .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-4 .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-5 .card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; border-right: 2px solid #1f2430; border-bottom: 2px solid #1f2430; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.card-5 .len-s { font-size: 1em; } .card-5 .len-m { font-size: .8em; } .card-5 .len-l { font-size: .65em; }
.card-4 .len-s { font-size: 1.2em; } .card-4 .len-m { font-size: .95em; } .card-4 .len-l { font-size: .68em; }
.card-3 .len-s { font-size: 1.5em; } .card-3 .len-m { font-size: 1.15em; } .card-3 .len-l { font-size: .85em; }
/* Phone-width cards: smaller word text so short words don't break mid-word. */
@media (max-width: 420px) {
  .card-5 .len-s { font-size: .85em; } .card-5 .len-m { font-size: .7em; } .card-5 .len-l { font-size: .6em; }
  .card-4 .len-s { font-size: 1.05em; } .card-4 .len-m { font-size: .85em; } .card-4 .len-l { font-size: .62em; }
}
.cell.num { font-size: 2em; font-weight: 800; }
.cell.free { background: #fbe3dc; color: #b63e22; font-weight: 900; letter-spacing: .05em; }
.card-foot { text-align: right; font-size: .7em; color: #5b6270; margin-top: 6px; }