/* Host caller and presentation screen */
.caller-page { padding-top: 24px; }
.caller-intro { max-width: 62ch; margin-bottom: 18px; }
.caller-setup { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
.caller { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .caller { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 18px; }
.panel h2 { font-size: 1.2rem; margin-bottom: .6em; }
.call-display { text-align: center; padding: 18px 10px; border-radius: 16px; background: var(--bg); border: 2px solid var(--line); }
.call-title { color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.call-now { font-family: var(--head); font-weight: 800; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1.02; margin: 0; overflow-wrap: anywhere; }
.call-answer { color: var(--muted); min-height: 1.4em; margin: 6px 0 0; }
.call-count { margin: 6px 0 0; font-weight: 700; }
.call-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.call-buttons .btn-lg { flex: 1 1 220px; }
.hint-keys { font-size: .88rem; color: var(--muted); }
.control-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.control-row > label, .control-row > div { flex: 1 1 160px; }
.control-row .label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .95rem; }
.auto-status { font-weight: 700; color: var(--green); min-height: 1.4em; }
.num-board { display: grid; gap: 4px; }
.num-board.lettered .board-row { display: grid; grid-template-columns: 2.2em repeat(15, 1fr); gap: 3px; }
.num-board.plain { grid-template-columns: repeat(10, 1fr); }
.board-letter { font-family: var(--head); font-weight: 800; display: grid; place-items: center; }
.board-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: clamp(.55rem, 1.1vw, .85rem); color: var(--muted); }
.board-cell.called { background: rgba(214, 36, 110, .85); color: #fff; border-color: transparent; }
.board-cell.last { outline: 3px solid var(--yellow); outline-offset: 1px; }
.board-scroll { overflow-x: auto; }
.num-board.lettered { min-width: 420px; }
.word-board { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; counter-reset: w; }
.word-board li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .92rem; }
.word-board li.last { border-color: var(--magenta); box-shadow: inset 0 0 0 1px var(--magenta); font-weight: 700; }
.board-empty { color: var(--muted); }
.mini-pattern { display: grid; gap: 2px; width: 90px; padding: 4px; background: #fff; border: 2px solid #1D1B3A; border-radius: 6px; }
.mini-pattern span { aspect-ratio: 1; border-radius: 2px; background: #E9EAF4; }
.mini-pattern span.on { background: #D6246E; }
.mini-pattern span.free { outline: 2px solid #FFC53D; outline-offset: -2px; }
.pattern-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.check-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.check-card { border: 2px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); }
.check-card.is-win { border-color: var(--green); }
.check-grid { display: grid; gap: 2px; margin: 8px 0; }
.check-grid span { aspect-ratio: 1; display: grid; place-items: center; text-align: center; font-size: .56rem; line-height: 1.05; padding: 1px; border-radius: 3px; background: #F1F2F8; color: #1D1B3A; overflow: hidden; overflow-wrap: anywhere; }
.check-grid span.marked { background: #FAD3E2; }
.check-grid span.winning { background: #D6246E; color: #fff; font-weight: 700; }
.verdict { font-weight: 800; margin: 4px 0; }
.verdict.win { color: var(--green); }
.verdict.no { color: var(--muted); }
.announce-row { display: flex; gap: 6px; flex-wrap: wrap; }
.announce-row input { flex: 1 1 110px; min-height: 44px; }
.winners { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.winners li { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--bg); }
.winner-actions { display: flex; gap: 6px; }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .92rem; }

/* Winner banner and confetti (both views) */
.win-banner { position: fixed; inset: 0; display: grid; place-items: center; z-index: 80; background: rgba(21, 20, 43, .55); padding: 20px; }
.win-inner { background: #fff; color: #1D1B3A; border: 6px solid #D6246E; border-radius: 28px; padding: 28px 40px; text-align: center; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.win-kicker { font-family: var(--head); font-weight: 800; color: #D6246E; font-size: clamp(2.4rem, 8vw, 5rem); margin: 0; line-height: 1; }
.win-name { font-family: var(--head); font-weight: 800; font-size: clamp(1.8rem, 6vw, 3.6rem); margin: 10px 0 4px; overflow-wrap: anywhere; }
.win-detail { font-size: clamp(1rem, 2.4vw, 1.5rem); margin: 0; color: #5A5878; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* Presentation window */
body.present-mode { background: var(--bg); }
body.present-mode .site-head, body.present-mode .site-foot, body.present-mode .caller-host, body.present-mode #consentBanner { display: none !important; }
.present-root { min-height: 100vh; padding: 3vh 3vw; box-sizing: border-box; }
body.video-layout .present-root { padding: 6vh 18vw 8vh 4vw; }
.present-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); grid-template-areas: "main side" "board board"; gap: 2.5vh 2vw; }
.present-main { grid-area: main; text-align: center; background: var(--surface); border-radius: 24px; padding: 3vh 2vw; border: 2px solid var(--line); }
.present-side { grid-area: side; display: grid; gap: 2vh; align-content: start; }
.present-board { grid-area: board; background: var(--surface); border-radius: 24px; padding: 2vh 2vw; border: 2px solid var(--line); }
.present-title { font-weight: 700; color: var(--muted); font-size: clamp(1rem, 2vw, 1.6rem); margin: 0; }
.present-call { font-family: var(--head); font-weight: 800; font-size: clamp(3rem, 14vh, 11rem); line-height: 1; margin: 1vh 0; color: var(--ink); overflow-wrap: anywhere; }
.present-count { font-size: clamp(1rem, 2.2vw, 1.8rem); font-weight: 700; margin: 0; }
.present-recent { color: var(--muted); font-size: clamp(.9rem, 1.8vw, 1.4rem); margin: 1vh 0 0; }
.present-recent span { display: inline-block; margin: 0 .4em; font-weight: 700; }
.present-pattern, .present-winners { background: var(--surface); border-radius: 20px; padding: 2vh 1.5vw; border: 2px solid var(--line); text-align: center; }
.present-pattern p, .present-winners p { margin: 0 0 1vh; font-weight: 700; color: var(--muted); }
.present-pattern .mini-pattern { width: clamp(90px, 14vh, 180px); margin: 0 auto 1vh; }
.present-winners ol { text-align: left; margin: 0; padding-left: 1.3em; font-weight: 700; }
.present-winners li span { color: var(--muted); font-weight: 400; }
.present-board .board-cell { font-size: clamp(.7rem, 1.6vh, 1.2rem); }
.present-board .num-board.lettered { min-width: 0; }
.present-foot { text-align: center; color: var(--muted); margin: 1.5vh 0 0; }
.present-wait { text-align: center; padding-top: 30vh; }
.present-tools { position: fixed; right: 12px; bottom: 12px; z-index: 50; opacity: .35; }
.present-tools:hover, .present-tools:focus-within { opacity: 1; }
@media (max-width: 800px) { .present-grid { grid-template-columns: 1fr; grid-template-areas: "main" "side" "board"; } body.video-layout .present-root { padding: 3vh 3vw; } }
body:not(.present-mode) .present-root, body:not(.present-mode) .present-tools { display: none; }
.caller > div { min-width: 0; }

.room-live { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.room-qr svg { width: 150px; height: 150px; display: block; border-radius: 10px; border: 1px solid var(--line); }
.room-code-label { margin: 0; font-weight: 700; color: var(--muted); }
.room-code { font-family: var(--head); font-weight: 800; font-size: 2rem; letter-spacing: .15em; margin: 0; }
.room-link { overflow-wrap: anywhere; margin: 4px 0 8px; }
.room-count { font-weight: 700; margin: 6px 0; }
.room-players { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow: auto; }
.room-players li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: .88rem; }
.present-join { display: grid; grid-template-columns: auto 1fr; gap: 3vw; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; padding: 3vh 3vw; margin-bottom: 2.5vh; }
.present-join svg { width: clamp(160px, 30vh, 340px); height: auto; }
.present-join h2 { font-size: clamp(1.6rem, 4vw, 3rem); margin: 0 0 1vh; }
.present-join .pj-code { font-family: var(--head); font-weight: 800; font-size: clamp(2.2rem, 7vw, 5rem); letter-spacing: .15em; margin: 0; }
.present-join .pj-url { font-size: clamp(1rem, 2vw, 1.6rem); color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.present-qr-corner { position: fixed; left: 2vw; bottom: 2vh; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; z-index: 5; }
.present-qr-corner svg { width: 90px; height: 90px; }
.present-qr-corner strong { font-family: var(--head); font-size: 1.4rem; letter-spacing: .1em; display: block; }
body.video-layout .present-qr-corner { left: 4vw; bottom: 8vh; }

.host-pic { height: 1em; width: auto; vertical-align: -0.12em; }
.board-pic { height: 1.4em; width: 1.4em; vertical-align: middle; }
.present-pic { display: block; height: clamp(120px, 26vh, 300px); width: auto; margin: 0 auto 1vh; }
.present-pic-name { display: block; font-size: clamp(1.8rem, 6vh, 4rem); }
.check-grid span img { width: 85%; height: 85%; object-fit: contain; }

.host-guide { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px; margin-bottom: 18px; }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.guide-head h2 { font-size: 1.3rem; margin: 0; }
.guide-steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.guide-steps > li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.guide-steps h3 { margin: 4px 0 4px; }
.guide-steps p { margin: 0 0 8px; font-size: .95rem; }
.g-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(214, 36, 110, .55); color: #fff; font-family: var(--head); font-weight: 800; }
.guide-steps > li.done .g-num { background: var(--green); }
.guide-steps > li.done .g-num::after { content: "✓"; }
.guide-steps > li.done .g-num { font-size: 0; }
.guide-steps > li.done .g-num::after { font-size: 1rem; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.guide-current { font-weight: 700; color: var(--green); margin: 4px 0 0; }
.guide-recent { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.guide-recent a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--surface); font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--ink); }
.flash { animation: flash 1.2s ease-out 1; }
@keyframes flash { 0% { box-shadow: 0 0 0 4px rgba(214,36,110,.6); } 100% { box-shadow: 0 0 0 0 rgba(214,36,110,0); } }

/* ===== Hosting wizard ===== */
.wz-cards { --accent: #D6246E; --accent-bg: #FCE7F0; }
.wz-players { --accent: #2F5BEA; --accent-bg: #E8EDFF; }
.wz-play { --accent: #0E7C62; --accent-bg: #E3F4EE; }
:root[data-theme="dark"] .wz-cards, :root[data-theme="dark"] .wz-players, :root[data-theme="dark"] .wz-play { --accent-bg: rgba(255,255,255,.08); }
.wizard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; position: relative; z-index: 1; }
@media (max-width: 700px) { .wizard-steps { gap: 6px; } }
.wz-tab { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; min-height: 60px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; font-family: var(--head); cursor: pointer; }
.wz-tab small { display: block; font-family: var(--body); font-weight: 700; font-size: .75rem; color: var(--muted); }
.wz-tab .wz-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); flex: none; }
.wz-tab .wz-icon svg { width: 22px; height: 22px; }
.wz-tab[aria-current="step"] { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(29,27,58,.15); }
.wz-tab[aria-current="step"] small { color: rgba(255,255,255,.85); }
.wz-tab[aria-current="step"] .wz-icon { background: rgba(255,255,255,.2); color: #fff; }
.wz-tab.done:not([aria-current="step"]) .wz-icon { background: var(--green); color: #fff; }
@media (max-width: 560px) { .wz-tab { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; font-size: .85rem; } .wz-tab .wz-icon { width: 30px; height: 30px; } }
.wizard-panel { background: var(--surface); border-radius: 22px; border: 2px solid var(--line); border-top: 8px solid var(--accent); padding: 20px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(29,27,58,.07); }
.wz-head { background: var(--accent-bg); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.wz-head h2 { margin: 4px 0 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.wz-head p { margin: 0; }
.wz-badge { display: inline-block; background: var(--accent); color: #fff; font-weight: 800; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }
.wz-sub { font-size: 1.05rem; margin: 18px 0 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choice { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; min-height: 96px; }
.choice strong { font-family: var(--head); font-size: 1.1rem; }
.choice span { color: var(--muted); font-size: .92rem; }
.choice:hover, .choice:focus-visible { border-color: var(--accent); }
.choice.selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.choice.selected strong::after { content: "  ✓"; color: var(--accent); }
.guide-current { font-weight: 800; color: var(--green); margin: 14px 0 0; }
.guide-tip { font-weight: 700; margin: 12px 0; min-height: 1.4em; }
.host-link { margin-top: 18px; background: var(--bg); border: 2px dashed var(--accent); border-radius: 16px; padding: 12px 14px; }
.host-link .wz-sub { margin-top: 0; }
.host-link-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.host-link-row input { flex: 1 1 260px; font-size: .88rem; min-height: 44px; }
.wz-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .wz-two { grid-template-columns: 1fr; } }
.wz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.wizard-panel .panel { background: var(--bg); }
.wizard-panel .caller { margin-top: 4px; }

.guide-current.needs-choice { color: var(--magenta); }
.wz-tab[aria-disabled="true"], [data-wz-go][aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.choice-grid.flash { animation: flash 1.2s ease-out 1; border-radius: 16px; }

/* Caller intro band */
.caller-band { position: relative; isolation: isolate; padding: 18px 0 20px; margin: -24px 0 18px; max-width: none; border-bottom: 0; }
.caller-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: linear-gradient(120deg, #FCE7F0 0%, #EEF2FF 55%, #E6F4EF 100%); box-shadow: inset 0 -2px 0 var(--band-edge); }
:root[data-theme="dark"] .caller-band::before { background: linear-gradient(120deg, #2A1830 0%, #1E2240 55%, #15332B 100%); }
/* Step 2 plan questions */
.plan-q { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.plan-q legend { font-family: var(--head); font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.q-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .95rem; }
.choice[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.plan-box { background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 18px; padding: 16px 18px; margin: 4px 0 16px; }
.plan-box h3 { margin: 0 0 8px; }
.plan-list { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.plan-list li { padding-left: 4px; }
.plan-list .btn { margin-left: 6px; vertical-align: middle; }

.room-share { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.copied { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.room-explain { background: var(--surface); border-left: 5px solid var(--blue); border-radius: 10px; padding: 10px 12px; font-size: .92rem; margin: 6px 0 10px; }

.game-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.btn-secondary-green { background: linear-gradient(135deg, #16977A, #0B6852); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(14, 124, 98, .25); }
.game-live { font-weight: 800; color: var(--green); }
.break-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.break-ctl select { min-height: 44px; }
.break-status { font-family: var(--head); font-weight: 800; font-size: 1.2rem; color: var(--blue); }
.present-break { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(21, 20, 43, .82); color: #fff; text-align: center; }
.present-break p { margin: 0; font-weight: 800; font-size: clamp(1.4rem, 4vw, 3rem); }
.present-break .pb-time { font-family: var(--head); font-size: clamp(4rem, 18vw, 12rem); line-height: 1; color: #FFC53D; }
.claims-panel { border: 2px solid var(--green); background: #E3F4EE; }
:root[data-theme="dark"] .claims-panel { background: rgba(14,124,98,.18); }

/* BINGO claims alert (top of step 3) */
.claims-alert { background: linear-gradient(135deg, #FFF4D6, #FCE7F0); border: 3px solid #D6246E; border-radius: 18px; padding: 12px 16px; margin-bottom: 14px; box-shadow: 0 10px 26px rgba(214, 36, 110, .2); }
.claims-alert h2 { margin: 0 0 8px; font-size: 1.35rem; color: #B81B5C; }
@media (prefers-reduced-motion: no-preference) { .claims-alert .bell { display: inline-block; animation: ring 1.2s ease-in-out 3; } @keyframes ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } } }
.claims-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.claims-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: #fff; color: #1D1B3A; border-radius: 12px; padding: 10px 12px; }
.claims-list .cl-who { font-weight: 800; font-family: var(--head); font-size: 1.05rem; }
.claims-list .cl-meta { color: #5A5878; font-size: .9rem; }
.claims-list .cl-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.claims-list .cl-result.win { color: #0E7C62; font-weight: 800; }
.claims-list .cl-result.no { color: #B81B5C; font-weight: 800; }
/* Join info on the play step */
.join-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--surface); border: 2px dashed #2F5BEA; border-radius: 14px; padding: 8px 12px; margin-bottom: 14px; }
.js-label { font-weight: 700; color: var(--muted); }
.js-code { font-family: var(--head); font-size: 1.4rem; letter-spacing: .12em; color: #2F5BEA; }
.js-url { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.js-qr { flex-basis: 100%; }
.js-qr svg { width: 180px; height: 180px; border-radius: 10px; border: 1px solid var(--line); }
/* More fun calling screen */
.wz-play .call-display { background: radial-gradient(circle at 50% 0%, #FFF4D6 0%, var(--bg) 60%); border: 3px solid transparent; background-clip: padding-box; position: relative; }
.wz-play .call-display::before { content: ""; position: absolute; inset: -3px; border-radius: 18px; padding: 3px; background: linear-gradient(90deg, #D6246E, #2F5BEA, #0E7C62, #E3A600); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.call-display.has-call .call-now { display: inline-block; padding: .05em .45em; border-radius: 999px; background: #FFC53D; color: #1D1B3A; border: 4px solid #1D1B3A; box-shadow: 6px 6px 0 #1D1B3A; }
:root[data-theme="dark"] .wz-play .call-display { background: var(--surface); }
.num-board.lettered .board-row:nth-child(1) .board-cell.called { background: #D6246E; }
.num-board.lettered .board-row:nth-child(2) .board-cell.called { background: #2F5BEA; }
.num-board.lettered .board-row:nth-child(3) .board-cell.called { background: #0E7C62; }
.num-board.lettered .board-row:nth-child(4) .board-cell.called { background: #C98A00; }
.num-board.lettered .board-row:nth-child(5) .board-cell.called { background: #7A3FC2; }
.num-board.lettered .board-row:nth-child(1) .board-letter { color: #D6246E; }
.num-board.lettered .board-row:nth-child(2) .board-letter { color: #2F5BEA; }
.num-board.lettered .board-row:nth-child(3) .board-letter { color: #0E7C62; }
.num-board.lettered .board-row:nth-child(4) .board-letter { color: #C98A00; }
.num-board.lettered .board-row:nth-child(5) .board-letter { color: #7A3FC2; }
/* Presentation footer and TV controls */
.present-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; width: fit-content; margin: 2vh auto 0; font-size: clamp(.9rem, 1.6vw, 1.3rem); font-weight: 700; color: var(--ink); }
.present-foot img { height: 1.8em; width: auto; }
.present-foot .pf-code { font-family: var(--head); color: #2F5BEA; letter-spacing: .1em; }
.present-controls { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; gap: 8px; background: rgba(21, 20, 43, .88); padding: 8px; border-radius: 999px; transition: opacity .3s ease; }
.present-controls.idle { opacity: 0; pointer-events: none; }
.present-controls button { min-height: 48px; border-radius: 999px; border: 0; padding: 0 18px; font: inherit; font-weight: 800; cursor: pointer; background: #fff; color: #1D1B3A; }
.present-controls button.pc-next { background: #D6246E; color: #fff; }

.plan-select { display: block; margin-bottom: 4px; }
.plan-select select { width: 100%; }
.prize-row { margin-top: 12px; }
.prize-msg-error { color: #B81B5C !important; font-weight: 700; }
.claim-pause { background: #fff; color: #1D1B3A; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.claims-list .cl-result.late { color: #C98A00; font-weight: 800; }
.present-prize { margin-top: 1vh; font-weight: 800; color: #B81B5C; font-size: clamp(1rem, 2vw, 1.5rem); }
.win-prize { margin: 6px 0 0; font-weight: 800; color: #0E7C62; font-size: clamp(1rem, 2.4vw, 1.5rem); }

.btn-end { background: #fff; color: #B81B5C; border: 2px solid #B81B5C; }
.recap-panel { background: linear-gradient(135deg, #E3F4EE, #EEF2FF); border: 3px solid #0E7C62; border-radius: 20px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 10px 26px rgba(14, 124, 98, .18); }
:root[data-theme="dark"] .recap-panel { background: var(--surface); }
.recap-kicker { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: #0E7C62; }
.recap-panel h2 { margin: 2px 0 10px; }
.recap-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.recap-stats span { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.recap-stats strong { font-family: var(--head); font-size: 1.3rem; display: block; }
.recap-table td, .recap-table th { padding: 6px 10px; text-align: left; }
.recap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.present-end { text-align: center; padding: 6vh 4vw; }
.present-end h2 { font-size: clamp(2.4rem, 7vw, 5rem); margin: 0 0 2vh; }
.present-end ol { list-style: none; padding: 0; margin: 0 auto 3vh; max-width: 900px; display: grid; gap: 1.2vh; }
.present-end li { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 1.4vh 2vw; font-size: clamp(1rem, 2.4vw, 1.8rem); font-weight: 700; }
.present-end .pe-cta { display: inline-flex; align-items: center; gap: 2vw; background: var(--surface); border: 3px solid #D6246E; border-radius: 20px; padding: 2vh 2vw; font-size: clamp(1rem, 2.2vw, 1.7rem); font-weight: 800; text-align: left; }
.present-end .pe-cta svg { width: clamp(100px, 16vh, 180px); height: auto; }

/* ===== Accessibility pass ===== */
.btn-secondary-green { background: linear-gradient(135deg, #0D735B, #08533F); }
.wz-tab[aria-current="step"] small { color: #fff; }
.num-board.lettered .board-row:nth-child(4) .board-cell.called { background: #8A6100; }
.num-board.lettered .board-row:nth-child(1) .board-letter { color: #B81B5C; }
.num-board.lettered .board-row:nth-child(2) .board-letter { color: #2146C7; }
.num-board.lettered .board-row:nth-child(3) .board-letter { color: #0B6B54; }
.num-board.lettered .board-row:nth-child(4) .board-letter { color: #8A6100; }
.num-board.lettered .board-row:nth-child(5) .board-letter { color: #6A33A8; }
:root[data-theme="dark"] .num-board.lettered .board-row:nth-child(1) .board-letter { color: #FF7DB0; }
:root[data-theme="dark"] .num-board.lettered .board-row:nth-child(2) .board-letter { color: #9DB3FF; }
:root[data-theme="dark"] .num-board.lettered .board-row:nth-child(3) .board-letter { color: #5AD8B2; }
:root[data-theme="dark"] .num-board.lettered .board-row:nth-child(4) .board-letter { color: #FFC53D; }
:root[data-theme="dark"] .num-board.lettered .board-row:nth-child(5) .board-letter { color: #C9A6FF; }
:root[data-theme="dark"] .js-code { color: #9DB3FF; }
:root[data-theme="dark"] .recap-kicker { color: #5AD8B2; }
/* Presentation board sits on white panels even in dark mode, so keep light-mode letter colors there */
body.present-mode .num-board.lettered .board-row:nth-child(4) .board-letter { color: #8A6100; }

/* 90-ball tickets */
.ticket-mini { width: 108px; height: auto; }
.ticket-mini span { aspect-ratio: 1; }
.ticket-mini span.blank { background: transparent; border-color: transparent; }
.check-grid.ticket-grid span { font-size: .8rem; min-height: 26px; }
.check-grid.ticket-grid span.blank { background: var(--line); }