/* Bingo setup screen and full-screen board (content/bingo-board.js).
   The wheel's look: the --cp-* night purple corpus-night.css sets on
   body.corpus-night (same values as fallbacks), a radial-lit stage, orange
   for the main button, gold for the pick. Classic bingo balls keep their
   five colours — one per band of fifteen, the rows of the board — so the
   call is just a number and the colour does the "B-I-N-G-O" job. */

#bingoApp {
    --bg-card: var(--cp-card, #33255A);
    --bg-orange: var(--cp-accent, #EE7F3B);
    --bg-inset: rgba(16,8,34,.45);
    --bg-line: rgba(255,255,255,.12);
    --bg-ink: #fff;
    --bg-ink-2: #E4D9FF;
    --bg-ink-3: #B3A2D8;
    --bg-label: #9B8AC4;
    --bg-purple: #7C2BF5;
    --bg-gold: #FBBF24;
    --bg-green: #A9E77A;
    --bg-red: #FF8A8A;
    --b0: #3B82F6; --b1: #EF4444; --b2: #E5E7EB; --b3: #22C55E; --b4: #F59E0B;
    --bg-font-display: 'Baloo 2', 'Fredoka', ui-rounded, system-ui, sans-serif;
    --bg-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-family: var(--bg-font-body);
    color: var(--bg-ink);
    font-size: 15px;
    line-height: 1.45;
    margin: 18px 0 8px;
}
#bingoApp *, #bingoApp *::before, #bingoApp *::after { box-sizing: border-box; }
#bingoApp [hidden] { display: none !important; }
.bg-b0 { --bc: var(--b0); } .bg-b1 { --bc: var(--b1); } .bg-b2 { --bc: var(--b2); } .bg-b3 { --bc: var(--b3); } .bg-b4 { --bc: var(--b4); }

.bg-h { margin: 0 0 10px; font: 800 1.35rem/1.2 var(--bg-font-display); color: var(--bg-ink); }
.bg-label { font-size: .72rem; letter-spacing: 1.5px; font-weight: 900; color: var(--bg-label); text-transform: uppercase; }
.bg-note { margin: 2px 0 8px; font-size: .88rem; color: var(--bg-ink-3); }

.bg-btn {
    appearance: none; cursor: pointer;
    background: rgba(255,255,255,.1); color: var(--bg-ink);
    border: 1px solid var(--bg-line); border-radius: 14px;
    padding: 9px 16px; font: 800 .95rem/1.2 var(--bg-font-body);
    transition: background .15s, transform .1s;
}
.bg-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.bg-btn:active:not(:disabled) { transform: translateY(1px); }
.bg-btn:disabled { opacity: .4; cursor: default; }
.bg-btn:focus-visible, .bg-pill:focus-visible, .bg-num:focus-visible, .bgs-btn:focus-visible, .bgs-select:focus-visible, .bgs-next:focus-visible, .bgs-check:focus-visible { outline: 3px solid var(--bg-gold); outline-offset: 2px; }
.bg-btn--primary { background: var(--bg-purple); border-color: transparent; }
.bg-btn--primary:hover:not(:disabled) { background: #8F45FF; }
.bg-btn--big { padding: 14px 26px; font-size: 1.15rem; border-radius: 16px; }

/* ── Setup ─────────────────────────────────────────────────────────────── */
.bg-card {
    background: var(--bg-card); border: 1px solid var(--bg-line); border-radius: 20px;
    box-shadow: 0 20px 44px rgba(11,16,32,.35);
}
.bg-setup { max-width: 760px; margin: 0 auto; padding: 20px 24px 24px; }
.bg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; }
.bg-row .bg-label { min-width: 110px; }
.bg-row .bg-note { margin: 0; }
.bg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-pill {
    appearance: none; cursor: pointer;
    background: var(--bg-inset); color: var(--bg-ink-2);
    border: 1px solid var(--bg-line); border-radius: 999px;
    padding: 8px 16px; font: 800 .92rem/1.2 var(--bg-font-body);
}
.bg-pill[aria-pressed="true"] { background: var(--bg-purple); border-color: transparent; color: #fff; }
.bg-num {
    width: 5.5em; background: var(--bg-inset); color: var(--bg-ink);
    border: 1px solid var(--bg-line); border-radius: 13px;
    padding: 8px 12px; font: 700 .95rem/1.3 var(--bg-font-body);
}
.bg-num--big { width: 6em; font-size: 1.6rem; text-align: center; }
.bg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.bg-resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 12px 0 4px; padding: 10px 14px; border-radius: 14px;
    background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4);
}

/* ── The balls ─────────────────────────────────────────────────────────── */
.bg-ball {
    --d: 56px;
    position: relative; flex: none; width: var(--d); height: var(--d); border-radius: 50%;
    display: grid; place-items: center;
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.65), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 65% 75%, rgba(0,0,0,.28), rgba(0,0,0,0) 55%),
        var(--bc);
    box-shadow: 0 .12em .35em rgba(0,0,0,.45), inset 0 -.08em .2em rgba(0,0,0,.25);
    font-size: var(--d);
}
.bg-ball-n {
    display: grid; place-items: center; width: 62%; height: 62%; border-radius: 50%;
    background: #fff; color: #1F1438;
    font: 800 .3em/1 var(--bg-font-display); letter-spacing: -.02em;
    box-shadow: inset 0 .02em .06em rgba(0,0,0,.25);
}
.bg-ball--small { --d: 54px; }
.bg-ball--big { --d: min(31vh, 38vw, 420px); }
.bg-ball--big .bg-ball-n { font-size: .34em; }
.bg-ball.is-new { animation: bg-pop .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bg-pop {
    0% { transform: translateY(-40%) scale(.25) rotate(-220deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: none; opacity: 1; }
}

/* ── The stage: full screen ────────────────────────────────────────────── */
html.bg-no-scroll, html.bg-no-scroll body { overflow: hidden; }
.bgs {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
    padding: 14px clamp(12px, 2.4vw, 32px) clamp(10px, 2vh, 22px);
    background: radial-gradient(ellipse at 50% 28%, #4A3590, #2B1D4B 58%, #1F1438);
    color: #fff; overflow: hidden;
}
.bgs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.bgs-brand { display: flex; align-items: baseline; gap: 12px; }
.bgs-title { font: 800 1.6rem/1 var(--bg-font-display); color: #fff; }
.bgs-code { font: 900 1.2rem/1 var(--bg-font-display); letter-spacing: .12em; color: var(--bg-gold); }
.bgs-progress { margin-right: auto; font-weight: 800; color: var(--bg-ink-2); }
.bgs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bgs-btn, .bgs-select {
    appearance: none; cursor: pointer;
    background: rgba(16,8,34,.5); color: #fff;
    border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
    padding: 8px 14px; font: 800 .9rem/1.2 var(--bg-font-body);
}
.bgs-btn:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.bgs-btn:disabled { opacity: .35; cursor: default; }
.bgs-icon { padding: 8px 12px; font-size: 1.05rem; }

.bgs-mid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 16vw, 230px); gap: 16px; min-height: 0; }
.bgs-hero { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 0; }
.bgs-ball-host { display: grid; place-items: center; min-height: 0; }
.bgs-msg { font: 800 clamp(2.4rem, 9vw, 6rem)/1.1 var(--bg-font-display); color: var(--bg-gold); text-shadow: 0 .05em 0 rgba(0,0,0,.3); }
.bgs-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bgs-next, .bgs-check {
    appearance: none; cursor: pointer; border: 0; color: #fff;
    border-radius: 18px; padding: 14px 34px;
    font: 800 clamp(1.2rem, 2.4vw, 1.8rem)/1.1 var(--bg-font-display);
    box-shadow: 0 .6vh 0 rgba(0,0,0,.28);
    transition: transform .08s;
}
.bgs-next { background: linear-gradient(180deg, #F08A45, #E06A24); }
.bgs-check { background: linear-gradient(180deg, #8F45FF, #6A1FD6); }
.bgs-next:active:not(:disabled), .bgs-check:active { transform: translateY(.5vh); }
.bgs-next:disabled { opacity: .4; cursor: default; }
.bgs-reader { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.bgs-reader-name { font: 800 1.6rem/1 var(--bg-font-display); color: var(--bg-green); }

.bgs-side { display: grid; align-content: start; gap: 8px; min-height: 0; overflow: hidden; }
.bgs-side-h { font-size: .72rem; letter-spacing: 1.5px; font-weight: 900; color: var(--bg-label); text-transform: uppercase; }
.bgs-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; justify-items: center; }
.bgs-dim { color: var(--bg-ink-3); font-size: .9rem; grid-column: 1 / -1; justify-self: start; }
.bgs-winners { display: grid; gap: 4px; margin-top: 8px; }
.bgs-winner { font-weight: 800; font-size: .95rem; color: var(--bg-green); }

.bgs-board { display: grid; gap: clamp(3px, .6vh, 6px); }
.bgs-row { display: grid; grid-template-columns: repeat(15, 1fr); gap: clamp(3px, .5vw, 6px); }
.bgs-n {
    display: grid; place-items: center; aspect-ratio: 1.55 / 1; border-radius: 10px;
    font: 800 clamp(.7rem, 1.9vw, 1.6rem)/1 var(--bg-font-display);
    color: var(--bc); background: rgba(16,8,34,.45); border: 2px solid color-mix(in srgb, var(--bc) 35%, transparent);
}
.bgs-n.is-on { background: var(--bc); color: #1F1438; border-color: transparent; box-shadow: 0 .3vh 0 rgba(0,0,0,.25); }
.bgs-n.is-last { animation: bg-glow 1.1s ease-in-out infinite; }
@keyframes bg-glow { 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 22px var(--bc); } }

/* ── Check card (inside the stage, so it shows full screen) ────────────── */
.bg-modal-back {
    position: absolute; inset: 0; z-index: 10; display: grid; place-items: start center;
    padding: 4vh 12px; overflow: auto; background: rgba(11,16,32,.8);
}
.bg-modal {
    width: min(640px, 100%); padding: 22px 24px 26px;
    background: #33255A; border: 1px solid var(--bg-line); border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0,0,0,.5); color: #fff;
}
.bg-check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bg-result { margin: 16px 0 4px; font: 900 clamp(2.2rem, 7vw, 3.6rem)/1 var(--bg-font-display); }
.bg-result--bingo { color: var(--bg-green); animation: bg-glow-text 1s ease-in-out 3; }
.bg-result--not { color: var(--bg-gold); }
.bg-result--none { color: var(--bg-red); font-size: clamp(1.6rem, 5vw, 2.4rem); }
@keyframes bg-glow-text { 50% { text-shadow: 0 0 24px rgba(169,231,122,.9); transform: scale(1.04); } }
.bg-result-sub { margin: 0 0 10px; font-weight: 800; color: var(--bg-ink-2); }
.bg-check-tools { margin: 6px 0 10px; }
.bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; aspect-ratio: 1 / 1; max-width: 420px; }
.bg-cell {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-width: 0; padding: 4px; border-radius: 10px;
    background: var(--bg-inset); border: 2px solid transparent;
    font: 800 clamp(1rem, 3vw, 1.5rem)/1.1 var(--bg-font-display);
}
.bg-cell.is-marked { background: rgba(124,43,245,.55); }
.bg-cell.is-free { background: rgba(255,255,255,.16); font-size: .8em; letter-spacing: .06em; }
.bg-cell.is-win { background: #2d8a3e; border-color: var(--bg-green); color: #fff; }
.bg-cell.is-missing { border-color: var(--bg-orange); border-style: dashed; }

/* ── Embedded in Class Progress: no page heading or SEO copy ───────────── */
html.bg-embed, html.bg-embed body { background: transparent; }
html.bg-embed body { padding: 0; }
html.bg-embed .corpus-container { max-width: none; padding: 0; margin: 0; }
html.bg-embed #bingoApp { margin: 0; }
html.bg-embed .corpus-toprow, html.bg-embed .hm-header, html.bg-embed .hm-about,
html.bg-embed .ct-offer, html.bg-embed .corpus-faq, html.bg-embed .corpus-nav, html.bg-embed nav { display: none !important; }

@media (max-width: 760px) {
    .bgs-mid { grid-template-columns: 1fr; }
    .bgs-side { display: none; }
    .bg-ball--big { --d: min(34vh, 70vw); }
    .bg-setup { padding: 16px; }
}
@media (max-height: 560px) {
    .bg-ball--big { --d: min(36vh, 40vw); }
}
@media (prefers-reduced-motion: reduce) {
    .bg-btn { transition: none; }
    .bg-ball.is-new, .bgs-n.is-last, .bg-result--bingo { animation: none; }
}