/* Extra styles for /bingo-caller-1-75 and /bingo-caller-1-90 (builds on growth-pages.css). */
.call-ball small { display: block; font-size: .42em; letter-spacing: .08em; color: var(--accent); margin-bottom: .1em; }
.call-ball span, .call-ball [data-ball] { font-size: clamp(2.35rem, 7vw, 4.5rem); font-weight: 950; line-height: 1; text-align: center; }
.call-name { min-height: 1.6em; margin: -.4rem 0 .6rem; color: #fff; font-size: 1.05rem; font-weight: 800; }
.history-chip.newest { color: #fff; background: var(--brand); }
.range-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; }
.range-line input { width: 100%; accent-color: var(--brand); }
.range-line output { min-width: 3ch; font-weight: 800; color: var(--brand-dark); }
.b75-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.b75-col { display: grid; gap: .3rem; }
.b75-head { display: grid; place-items: center; min-height: 40px; border-radius: .5rem; color: #fff; background: var(--brand-dark); font-size: 1.15rem; font-weight: 950; }
.b75-cell, .b90-cell { display: grid; place-items: center; min-height: 30px; border: 1px solid #d9deea; border-radius: .45rem; color: #5c677b; background: #fff; font-size: .82rem; font-weight: 800; }
.b75-cell.called, .b90-cell.called { border-color: var(--brand); color: #fff; background: var(--brand); }
.b75-cell.latest, .b90-cell.latest { border-color: var(--accent); background: var(--accent); }
@media (min-width: 900px) { .b75-board { grid-template-columns: minmax(0, 1fr); } .b75-col { grid-template-columns: 48px repeat(15, minmax(0, 1fr)); } .b75-head { min-height: 34px; } }
.b90-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .3rem; }
.pattern-wrap { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.pattern-grid { display: grid; grid-template-columns: repeat(5, 22px); gap: 3px; padding: 6px; border-radius: .6rem; background: var(--soft); border: 1px solid var(--line); }
.pat-cell { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #fff; border: 1px solid #d9deea; font-size: .7rem; color: #fff; }
.pat-cell.on { background: var(--accent); border-color: var(--accent); }
.pat-cell.free:not(.on) { color: var(--muted); }
.segmented.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stage-steps { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.stage-steps li { flex: 1; padding: .4rem .5rem; border-radius: .55rem; background: #eceff5; color: #546078; font-size: .8rem; font-weight: 800; text-align: center; }
.stage-steps li.current { background: var(--brand-dark); color: #fff; }
.stage-steps li.done { background: var(--success-soft); color: var(--success); text-decoration: line-through; }
.stage-box { padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--soft); }
.stage-box p { margin: .4rem 0; }
.stage-title { font-weight: 900; }
@media (max-width: 560px) { .pattern-wrap { grid-template-columns: minmax(0, 1fr); } .b75-cell, .b90-cell { min-height: 28px; font-size: .74rem; } }
.call-ball [data-ball].idle { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.02em; }
/* Below-the-fold content renders lazily; keeps first-load layout cheap on phones. */
main > section.section.soft, main > section.section[aria-labelledby="faq-heading"], .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }