/* ============================================================
   Large-print games -- shared styles
   Design goals: big readable type, black-on-white contrast,
   large targets (>= 56px), strong focus rings, works on phones.
   ============================================================ */
:root {
  --ink: #000;
  --paper: #fff;
  --muted: #2b2b2b;
  --navy: #0b2e6b;
  --blue: #0b3d91;
  --blue-dark: #082a66;
  --soft: #eef3fb;
  --line: #1a1a1a;
  --danger: #8a0000;
  --ok: #0b5a1f;
  --focus: #ffbf00;
  --radius: 12px;
  --font: "Atkinson Hyperlegible", Verdana, "Segoe UI", Arial, Helvetica, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } /* 18px base; most text is 1.1-1.25rem */
body {
  margin: 0; font-family: var(--font); font-size: 1.1rem; line-height: 1.65;
  color: var(--ink); background: var(--paper);
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1.25rem; padding-bottom: 3rem; }
h1, h2, h3 { line-height: 1.25; color: #000; }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0.4em 0 0.4em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 1.95rem); margin: 1.8em 0 0.5em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 0.4em; }
p, li { max-width: 72ch; }
a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 7px #000; border-radius: 4px; }
.lead { font-size: 1.3rem; max-width: 62ch; }
.muted { color: var(--muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 0.8rem 1.2rem; z-index: 100; font-size: 1.2rem; }
.skip-link:focus { left: 0; }

/* ---------- header / nav ---------- */
.site-header { background: var(--navy); color: #fff; border-bottom: 6px solid #000; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.6rem; }
.brand:hover { color: #fff; }
.brand-badge { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; color: #000; font-size: 1.15rem; border: 3px solid #000; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nav-list li { max-width: none; }
.nav-list a { display: inline-flex; align-items: center; min-height: 48px; padding: 0.3rem 0.9rem; color: #fff; text-decoration: none; font-weight: 700; border-radius: 8px; border: 2px solid transparent; }
.nav-list a:hover { background: #1c4a99; color: #fff; }
.nav-list a[aria-current="page"] { background: #fff; color: #000; border-color: #000; }

.site-footer { background: #f1f1f1; border-top: 4px solid #000; padding: 1.5rem 0 2.5rem; margin-top: 2rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.8rem; }
.footer-links a { display: inline-block; min-height: 44px; padding: 0.4rem 0; font-weight: 700; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 60px; min-width: 60px; padding: 0.6rem 1.4rem;
  font: inherit; font-size: 1.25rem; font-weight: 800; line-height: 1.2; cursor: pointer;
  color: #fff; background: var(--blue); border: 3px solid #000; border-radius: var(--radius); text-decoration: none;
}
.btn:hover { background: var(--blue-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #fff; color: #000; }
.btn.secondary:hover { background: var(--soft); color: #000; }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #fdecec; }
.btn.big { min-height: 84px; font-size: 1.8rem; padding: 0.6rem 2rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: #fff; color: #000; box-shadow: inset 0 0 0 4px var(--blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1rem 0; }

.panel { background: var(--soft); border: 3px solid #000; border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem; margin: 1.2rem 0; }
.panel h2 { margin-top: 0; font-size: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem 1.5rem; }
fieldset { border: 2px solid #000; border-radius: 8px; margin: 0; padding: 0.6rem 0.9rem 0.8rem; background: #fff; min-width: 0; }
legend { font-weight: 800; padding: 0 0.4rem; }
label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.field { min-width: 0; }
.field .hint, .hint { display: block; font-weight: 400; font-size: 1rem; color: var(--muted); margin-top: 0.2rem; }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; min-height: 56px; padding: 0.5rem 0.7rem; font: inherit; font-size: 1.2rem;
  color: #000; background: #fff; border: 3px solid #000; border-radius: 8px;
}
textarea { min-height: 220px; line-height: 1.5; resize: vertical; }
input[type="range"] { width: 100%; min-height: 48px; accent-color: var(--blue); }
.choice { display: flex; align-items: center; gap: 0.7rem; min-height: 52px; padding: 0.25rem 0; font-weight: 700; cursor: pointer; margin: 0; }
.choice input { width: 28px; height: 28px; flex: none; accent-color: var(--blue); cursor: pointer; }
.stepper { display: flex; gap: 0.5rem; align-items: stretch; }
.stepper input { text-align: center; font-weight: 800; font-size: 1.5rem; }
.stepper .btn { min-width: 60px; padding: 0.3rem 0.8rem; font-size: 1.6rem; }
.notice { border: 3px solid #000; border-left-width: 10px; background: #fff; padding: 0.7rem 1rem; border-radius: 8px; margin: 1rem 0; }
.notice.warn { border-color: #7a4b00; background: #fff7e0; }
.notice.error { border-color: var(--danger); background: #fdecec; }
.notice p { margin: 0.3rem 0; }
.notice ul { margin: 0.3rem 0; padding-left: 1.4rem; }

/* ---------- "How to play" box (bingo pages) ---------- */
details.howto { border: 4px solid #000; border-left-width: 12px; border-left-color: var(--navy); border-radius: var(--radius); background: #fff; margin: 1rem 0 1.4rem; }
details.howto > summary { cursor: pointer; padding: 0.6rem 1rem; min-height: 56px; display: flex; align-items: center; gap: 0.6rem; list-style: none; }
details.howto > summary::-webkit-details-marker { display: none; }
details.howto > summary::before { content: "\25B6"; font-size: 1.1rem; transition: transform .15s; }
details.howto[open] > summary::before { transform: rotate(90deg); }
details.howto > summary h2 { margin: 0; font-size: 1.45rem; }
details.howto > summary::after { content: "(tap to hide)"; font-size: 1rem; color: var(--muted); margin-left: auto; }
details.howto:not([open]) > summary::after { content: "(tap to show)"; }
.howto-body { padding: 0 1.2rem 1rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0.3rem 0 0.8rem; display: grid; gap: 0.7rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3.2rem; min-height: 2.4rem; max-width: 70ch; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; }
.win-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.8rem; }
.win-rules p { margin: 0; background: var(--soft); border: 2px solid #000; border-radius: 10px; padding: 0.7rem 0.9rem; }
.crosslink { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; background: #fff7e0; border: 3px solid #000; border-radius: var(--radius); padding: 0.7rem 1rem; margin: 1rem 0; font-weight: 700; }
.crosslink p { margin: 0; flex: 1 1 18rem; }
.placeholder { background: #fff3a8; padding: 0 0.2em; border: 1px dashed #000; font-weight: 800; }

/* ---------- home hub ---------- */
.hero { padding: 1rem 0 0.5rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.tool-grid li { max-width: none; }
.tool-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 4px solid #000; border-radius: 16px; padding: 1.3rem; text-decoration: none; color: #000; }
.tool-card:hover { background: var(--soft); color: #000; }
.tool-card .icon { font-size: 3rem; line-height: 1; margin-bottom: 0.4rem; }
.tool-card h2, .tool-card h3 { margin: 0.1em 0 0.3em; font-size: 1.55rem; }
.tool-card p { margin: 0 0 1rem; flex: 1; }
.tool-card .go { font-weight: 800; color: var(--blue); text-decoration: underline; }

/* ---------- article text ---------- */
.content { margin-top: 2.5rem; border-top: 4px solid #000; padding-top: 0.5rem; }
.content ol li, .content ul li { margin-bottom: 0.4rem; }
details.faq { border: 3px solid #000; border-radius: 10px; margin: 0.7rem 0; background: #fff; max-width: 80ch; }
details.faq summary { cursor: pointer; font-weight: 800; padding: 0.8rem 1rem; min-height: 56px; list-style-position: inside; }
details.faq .faq-a { padding: 0 1rem 0.9rem; }
details.faq .faq-a p { margin-top: 0; }
.ad-slot { margin: 1.5rem 0; }

/* ---------- screen preview sheets ---------- */
.print-area { margin-top: 1rem; }
.sheet { background: #fff; color: #000; border: 3px solid #000; margin: 0 auto 1.5rem; padding: 1rem; max-width: 8.5in; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.sheet-label { font-size: 0.95rem; color: var(--muted); text-align: center; margin: 0 0 0.3rem; }
.toolbar { position: sticky; top: 0; z-index: 5; background: #fff; border: 3px solid #000; border-radius: 10px; padding: 0.4rem 0.8rem; margin: 0.8rem 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.toolbar .btn { min-height: 56px; }
.status { font-weight: 700; margin: 0.4rem 0; min-height: 1.6em; }

/* ---------- BINGO CARDS ---------- */
.cards-sheet { display: grid; gap: 0.8in 0.4in; justify-items: center; align-items: center; }
.cards-sheet.cpp-1 { grid-template-columns: 1fr; }
.cards-sheet.cpp-2 { grid-template-columns: 1fr; }
.cards-sheet.cpp-3 { grid-template-columns: 1fr; }
.cards-sheet.cpp-4, .cards-sheet.cpp-6 { grid-template-columns: 1fr 1fr; }
.bcard { container-type: inline-size; width: 100%; color: #000; background: #fff; }
.cpp-1 .bcard.b75 { max-width: 7in; }
.cpp-2 .bcard.b75 { max-width: 4.6in; --ar: 1.25; }
.cpp-4 .bcard.b75 { max-width: 3.45in; }
.cpp-2 .bcard.b90, .cpp-3 .bcard.b90 { max-width: 7.2in; }
.cpp-6 .bcard.b90 { max-width: 3.55in; }
.bcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; font-weight: 800; font-size: 5.2cqw; line-height: 1.2; padding: 0 0 1.2cqw; }
.bcard-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgrid { display: grid; border: 3px solid #000; }
.b75 .bgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.b90 .bgrid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.bcell { display: grid; place-items: center; min-width: 0; overflow: hidden; font-family: Arial, "Liberation Sans", Helvetica, sans-serif; aspect-ratio: var(--ar, 1); border: 2px solid #000; margin: -1px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.b75 .bcell { font-size: 10.5cqw; }
.b75.xl .bcell { font-size: 13cqw; border-width: 3px; }
.b75 .bcell.hd { font-size: 9cqw; border-bottom-width: 5px; }
.b75.xl .bcell.hd { font-size: 11cqw; }
.b90 .bcell { font-size: 6.6cqw; }
.b90.xl .bcell { font-size: 7.6cqw; border-width: 3px; }
.cpp-2 .bcard.b90 { --ar: 0.6; }
.cpp-3 .bcard.b90 { --ar: 0.85; }
.cpp-6 .bcard.b90 { --ar: 0.5; }
.b90 .bcard-head { font-size: 3.6cqw; }
.cpp-6 .b90 .bcard-head { font-size: 5.2cqw; }
.bcell.free { font-size: 4.4cqw !important; letter-spacing: 0.02em; text-align: center; }
.b75.xl .bcell.free { font-size: 5.2cqw !important; }
.bcell.blank { background: repeating-linear-gradient(45deg, #fff 0 5px, #d9d9d9 5px 7px); }

/* ---------- WORD SEARCH ---------- */
.gridwrap { container-type: inline-size; width: 100%; max-width: var(--grid-max, 7in); margin: 0 auto; }
.ws-title, .cw-title { text-align: center; font-size: 2rem; font-weight: 800; margin: 0 0 0.2rem; line-height: 1.2; }
.ws-sub, .cw-sub { text-align: center; margin: 0 0 0.6rem; font-size: 1.05rem; }
.ws-name { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 0.5rem; }
.ws-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: 100%; border: 3px solid #000; background: #fff; }
.ws-cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #777; font-weight: 700; line-height: 1; font-size: calc(var(--fill, 60) * 1cqw / var(--n)); font-family: Verdana, Arial, sans-serif; text-transform: uppercase; }
.ws-cell.ans { background: #cfcfcf; font-weight: 900; box-shadow: inset 0 0 0 2px #000; }
.answers-on .ws-cell:not(.ans) { color: #666; font-weight: 400; }
.ws-words { columns: 3 9rem; column-gap: 1.2rem; margin: 0.9rem auto 0; padding: 0; list-style: none; max-width: 7.4in; font-weight: 700; font-size: var(--wl, 18pt); line-height: 1.5; }
.ws-words li { break-inside: avoid; max-width: none; display: flex; gap: 0.5em; align-items: baseline; }
.ws-words li::before { content: ""; flex: none; width: 0.7em; height: 0.7em; border: 2px solid #000; align-self: center; }
.ws-words li.done { text-decoration: line-through; }

/* ---------- CROSSWORD ---------- */
.cw-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); width: 100%; background: #fff; border: 3px solid #000; }
.cw-cell { position: relative; aspect-ratio: 1; border: 1.5px solid #000; background: #fff; display: grid; place-items: center; }
.cw-cell.block { background: #000; border-color: #000; }
.ink-save .cw-cell.block { background: transparent; border-color: transparent; }
.ink-save.cw-grid { border-color: transparent; }
.cw-cell.block.pat { background: #000; }
.cw-num { position: absolute; top: 1px; left: 2px; font-size: calc(36cqw / var(--cols)); font-weight: 800; line-height: 1; }
.cw-letter { font-size: calc(58cqw / var(--cols)); font-weight: 800; line-height: 1; }
.cw-clues { columns: 2 17rem; column-gap: 1.6rem; margin-top: 1rem; font-size: var(--cl, 15pt); line-height: 1.35; }
.cw-clues h3 { margin: 0.2em 0 0.3em; font-size: 1.2em; border-bottom: 3px solid #000; break-after: avoid; }
.cw-clues ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.cw-clues li { break-inside: avoid; margin: 0 0 0.45em; max-width: none; display: grid; grid-template-columns: 2.1em 1fr; }
.cw-clues li b { font-weight: 800; }
.answers-key-label { text-align: center; font-weight: 800; font-size: 1.6rem; }

/* ---------- CALLER ---------- */
.caller-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.call-box { background: #fff; border: 5px solid #000; border-radius: 20px; text-align: center; padding: 0.6rem 0.5rem 1rem; }
.call-label { font-size: 1.2rem; font-weight: 800; margin: 0; }
.call-main { display: flex; justify-content: center; align-items: baseline; gap: 0.15em; line-height: 0.95; font-weight: 900; font-variant-numeric: tabular-nums; min-height: 1em; }
.call-letter { flex: none; font-size: clamp(3.2rem, 8.5vw, 5.5rem); border: 6px solid #000; border-radius: 50%; width: 1.35em; height: 1.35em; display: grid; place-items: center; align-self: center; margin-right: 0.15em; }
.call-letter:empty { visibility: hidden; }
.call-num { font-size: clamp(6rem, 17vw, 11.5rem); }
.call-count { font-size: 1.2rem; font-weight: 700; margin: 0.3rem 0 0; }
.recent { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.recent li { max-width: none; border: 3px solid #000; border-radius: 10px; padding: 0.15rem 0.7rem; font-size: 1.5rem; font-weight: 800; background: #fff; }
.caller-controls .btn-row { margin: 0.5rem 0; }
.caller-controls .btn.big { flex: 1 1 200px; }
.board { display: grid; gap: 4px; background: #fff; }
.board75 { grid-template-columns: 2.2em repeat(15, minmax(0, 1fr)); }
.board90 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.bd { display: grid; place-items: center; aspect-ratio: 1.15; border: 2px solid #000; font-weight: 800; font-size: clamp(0.85rem, 2.1vw, 1.45rem); background: #fff; color: #000; border-radius: 6px; position: relative; }
.board90 .bd { aspect-ratio: 1.3; font-size: clamp(1rem, 2.6vw, 1.6rem); }
.bd.called { background: #000; color: #fff; }
.bd.last { background: #ffbf00; color: #000; outline: 4px solid #000; z-index: 1; }
.bd.rowhead { background: var(--navy); color: #fff; border-color: #000; font-size: clamp(1rem, 2.4vw, 1.6rem); }
.legend { font-size: 1rem; margin: 0.6rem 0 0; }
.kbd { display: inline-block; min-width: 1.8em; padding: 0 0.4em; text-align: center; border: 2px solid #000; border-bottom-width: 4px; border-radius: 6px; background: #fff; font-weight: 800; font-family: inherit; }
.shortcuts { columns: 2 16rem; padding: 0; list-style: none; margin: 0.5rem 0 0; }
.shortcuts li { margin: 0 0 0.4rem; break-inside: avoid; }
.fullscreen-mode .caller-stage { grid-template-columns: 1fr; }
.fullscreen-mode .call-letter { font-size: clamp(5rem, 14vw, 12rem); }
.fullscreen-mode .call-num { font-size: clamp(9rem, 32vw, 30rem); }
.fullscreen-mode .site-header, .fullscreen-mode .site-footer, .fullscreen-mode .content, .fullscreen-mode .page-intro { display: none; }

@media (max-width: 860px) {
  .caller-stage { grid-template-columns: 1fr; }
  .board75 { grid-template-columns: 1.8em repeat(15, minmax(0, 1fr)); gap: 2px; }
  .bd { border-width: 1px; border-radius: 3px; }
}
@media (max-width: 600px) {
  html { font-size: 106%; }
  .btn { width: 100%; }
  .btn-row .btn, .stepper .btn { flex: 1 1 auto; }
  .stepper .btn { width: auto; }
  .toolbar .btn { width: auto; flex: 1 1 140px; }
  .brand { font-size: 1.35rem; }
  .nav-list a { padding: 0.2rem 0.6rem; min-height: 44px; font-size: 1rem; }
  .header-inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .page-intro { font-size: 1.1rem; }
  .sheet { padding: 0.5rem; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ============================================================
   PRINT: only the sheets, black on white, no nav / ads / buttons
   ============================================================ */
@page { size: letter; margin: 0.5in; }
@media print {
  html { font-size: 12pt; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .no-print, .site-header, .site-footer, .skip-link, .ad-slot, .toolbar, noscript { display: none !important; }
  main.wrap { max-width: none; padding: 0; margin: 0; }
  main > :not(.print-area) { display: none !important; }
  .print-area { margin: 0; }
  .sheet { border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto; }
  .sheet:not(.flow) { height: var(--page-h, 9.9in); overflow: hidden; break-after: page; page-break-after: always; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet-label { display: none; }
  .cards-sheet { gap: 0 0.3in; align-content: stretch; }
  .cards-sheet.cpp-1 { grid-template-rows: 1fr; }
  .cards-sheet.cpp-2 { grid-template-rows: 1fr 1fr; }
  .cards-sheet.cpp-3 { grid-template-rows: repeat(3, 1fr); }
  .cards-sheet.cpp-4 { grid-template-rows: 1fr 1fr; }
  .cards-sheet.cpp-6 { grid-template-rows: repeat(3, 1fr); }
  .sheet.flow { break-after: page; page-break-after: always; }
  .sheet.flow:last-child { break-after: auto; page-break-after: auto; }
  .ws-cell.ans { background: #d0d0d0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cw-cell.block { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ink-save .cw-cell.block { background: transparent !important; }
  .bcell.blank { background: repeating-linear-gradient(45deg, #fff 0 5px, #bbb 5px 7px) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
}
@media print {
  .bd { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .board { gap: 2px; }
  .bd.last { outline-width: 2px; background: #000; color: #fff; }
}
.brow { display: contents; }