/* Live viewport framing; visual card design is shared with the approved preview. */
.live-page { overflow:hidden; }
.chat-pause-notice { position:absolute; z-index:15; bottom:5%; left:3%; right:3%; margin:0; padding:1cqw; background:#182235f5; color:#fff4d6; border:2px solid var(--gold); font-size:1.5cqw; text-align:center; }
.live-broadcast { width:100vw; height:100vh; max-width:none; padding:0; display:grid; place-items:center; }
.live-broadcast .broadcast-frame { width:min(100vw,calc(100vh * 16 / 9)); margin:0; border-radius:0; box-shadow:none; aspect-ratio:16/9; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.round-label,.room-label { font-size:1.35cqw; font-weight:750; color:var(--cream); }
.round-label small,.room-label small { display:block; font-size:.85cqw; color:var(--muted); font-weight:500; margin-top:.4cqw; }
.room-label { text-align:right; }
.room-label strong { color:var(--teal); letter-spacing:.08em; }
.live-broadcast .side-panels { gap:.6cqw; }
.live-broadcast .info-panel { padding:.65cqw; }
.live-broadcast .eyebrow { margin-bottom:.4cqw; }
.live-broadcast .recent-list { gap:.5cqw; }
.called-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:.25cqw; }
.called-grid li { text-align:center; border:1px solid #ffffff25; border-radius:.3cqw; padding:.18cqw 0; font-size:1.35cqw; line-height:1.3; font-weight:800; font-variant-numeric:tabular-nums; color:#82909f; background:#0c1220; }
.called-grid li.called { color:#091a1b; background:var(--teal); border-color:var(--teal); }
.called-grid li.current { color:#101820; background:var(--gold); border:2px solid #fff4d6; padding:calc(.18cqw - 1px) 0; }
/* Keep the completed round's board visible above the winner celebration. */
.live-page:has(#winner:not([hidden])) .called-panel { position:fixed; z-index:25; right:2vw; top:2vh; width:29vw; background:#101827f5; }
.live-page:has(#winner:not([hidden])) .winner-content { margin-right:28vw; width:60vw; }
.live-broadcast .instructions p:not(.eyebrow) { margin:.35cqw 0; }
.claim-panel p:not(.eyebrow),.no-calls { margin:0; font-size:1.05cqw; line-height:1.45; overflow-wrap:anywhere; }
.live-broadcast .art-window { position:relative; }
.live-broadcast .card-copy h1 { font-size:4.8cqw; }
.live-broadcast .broadcast-footer { padding:.8cqw 2.8cqw; }
.holding,.winner { position:fixed; inset:0; z-index:20; display:grid; place-items:center; text-align:center; padding:5vw; background:radial-gradient(ellipse at center,#222340,#0c1220 75%); }
.holding img { width:min(500px,50vw); }
.holding h1,.winner h1 { font:500 clamp(32px,5vw,100px)/1.1 Georgia,serif; margin:1.5vw 0; overflow-wrap:anywhere; }
.holding p,.winner p { font-size:clamp(18px,2vw,38px); color:var(--cream); line-height:1.5; margin:.8vw 0; }
.winner { background:radial-gradient(ellipse at center,#353023,#0c1220 75%); }
.winner { overflow:hidden; isolation:isolate; padding:3vh 5vw 24vh; }
.winner::after { content:""; position:absolute; inset:2vh 2vw; border:1px solid #efce7b66; box-shadow:inset 0 0 65px #efce7b18; border-radius:24px; pointer-events:none; }
.winner-rays { position:absolute; inset:-100%; z-index:-1; background:repeating-conic-gradient(from 0deg,#efce7b12 0deg 10deg,transparent 10deg 30deg); animation:winner-rays 40s linear infinite; }
#winnerConfetti { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.winner-content { position:relative; width:min(1200px,90vw); animation:winner-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
.winner-trophy { color:var(--gold); width:clamp(55px,10vh,130px); margin:0 auto 1vh; filter:drop-shadow(0 0 22px #efce7b55); animation:trophy-arrive 1s cubic-bezier(.2,.8,.2,1) both; }
.winner-trophy svg { display:block; width:100%; }
.winner h1 { color:#fff4d6; text-shadow:0 3px 30px #efce7b50; font-size:clamp(30px,5.5vw,105px); margin:1vh 0; }
.winner #winnerDetail { font-size:clamp(15px,1.7vw,32px); }
.winner #winnerPrize { display:inline-block; border:1px solid #efce7b80; border-radius:999px; background:#efce7b15; padding:.3em 1.2em; color:var(--gold); font-weight:800; }
@keyframes winner-rays { to { transform:rotate(360deg); } }
@keyframes winner-arrive { from { opacity:0; transform:translateY(35px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes trophy-arrive { from { opacity:0; transform:translateY(-35px) scale(.5) rotate(-12deg); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .winner-rays,.winner-content,.winner-trophy { animation:none; } }
.winner .winner-kicker { color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:clamp(16px,1.5vw,28px); }
#winnerSafety { font-size:clamp(14px,1.15vw,22px); color:var(--muted); }
.shoutout { position:fixed; z-index:30; bottom:5vh; left:50%; transform:translateX(-50%); width:min(1050px,86vw); background:rgba(13,21,34,.97); border:1px solid var(--gold); border-radius:18px; padding:18px 26px; box-shadow:0 14px 50px #0008; text-align:center; }
.shoutout strong { color:var(--gold); font-size:clamp(18px,1.8vw,32px); }
.shoutout p { margin:8px 0; color:var(--cream); font-size:clamp(16px,1.3vw,25px); line-height:1.4; }
.shoutout small { color:var(--muted); font-size:clamp(11px,.8vw,15px); }
@media (max-width:760px) and (orientation:portrait) {
  .live-page { overflow:auto; }
  .live-broadcast { height:auto; min-height:100vh; display:block; }
  .live-broadcast .broadcast-frame { width:100%; box-sizing:border-box; aspect-ratio:auto; display:block; }
  .round-label,.room-label { font-size:12px; }
  .round-label small,.room-label small { font-size:10px; }
  .live-broadcast .card-copy h1 { font-size:8cqw; }
  .live-broadcast .info-panel { padding:12px; }
  .live-broadcast .side-panels { gap:12px; grid-template-columns:minmax(0,1fr); }
  .claim-panel { grid-column:1/-1; }
  .called-grid { gap:4px; }
  .called-grid li { font-size:16px; padding:4px 0; }
  .called-grid li.current { padding:3px 0; }
  .claim-panel p:not(.eyebrow),.no-calls { font-size:13px; }
  .live-page:has(#winner:not([hidden])) .called-panel { left:3vw; right:3vw; top:auto; bottom:2vh; width:auto; }
  .live-page:has(#winner:not([hidden])) .winner-content { margin-right:0; width:90vw; }
  .winner { padding:3vh 5vw 280px; }
  .chat-pause-notice { position:relative; left:auto; right:auto; bottom:auto; margin:12px; padding:12px; font-size:14px; }
}