:root{color-scheme:dark;--bg:#080e18;--card:#101a28;--line:#28384a;--ink:#e5edf6;--muted:#8c9eb4;--cyan:#71eced;--gold:#ffca72;--red:#ff584f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer;min-height:44px;color:var(--ink);background:#192a3b;border:1px solid #395064;border-radius:3px}button:hover{background:#254358}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.masthead{height:88px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-weight:900;letter-spacing:4px;font-size:23px;display:flex;align-items:center;gap:10px}.wordmark small{border-left:1px solid #536477;padding-left:18px;margin-left:8px;letter-spacing:3px;font:10px monospace;color:var(--muted)}.star{color:var(--gold);font-size:40px}.signal{font:10px monospace;letter-spacing:2px;color:var(--cyan);display:flex;gap:12px;align-items:center}.signal i,.bug i{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 12px var(--red)}#clock{color:var(--muted);margin-left:14px}main{max-width:1840px;padding:28px 3.5vw;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.broadcast{min-width:0;position:relative;background:#0b1421;display:grid;grid-template-rows:auto auto 40px;border:1px solid #324659;overflow:hidden}#stage{width:100%;aspect-ratio:16/10;grid-row:1;background:radial-gradient(ellipse at 50% 40%,#143552,#080e18 80%)}#stage canvas{display:block;width:100%;height:100%}.frame-top{position:absolute;left:22px;right:22px;top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:10px monospace;letter-spacing:1px}.bug{display:flex;gap:7px;align-items:center;background:#080e18dd;padding:8px 10px;color:var(--red)}.bug b{color:var(--ink);border-left:1px solid #455565;padding-left:10px;letter-spacing:1.5px}.camera{color:#b9c9d8;font-size:9px}.mode{position:absolute;top:63px;left:22px;max-width:calc(100% - 44px);background:#32250ce8;border:1px solid #7a5b28;padding:7px 10px;color:#ffe1a7;font:9px monospace;letter-spacing:1px}.mode.live-mode{background:#08302bdd;border-color:#29645a;color:var(--cyan)}.mode.stale{background:#4b1818;color:#ffc8c4;border-color:#ab4b43}.segment{position:absolute;left:24px;top:108px;display:flex;flex-direction:column;gap:7px;pointer-events:none;text-shadow:0 2px 8px #000}.segment>span{font:8px monospace;letter-spacing:3px;color:var(--gold)}.segment>b{font-size:clamp(12px,1.6vw,24px);letter-spacing:1.5px}.segment>small{font:8px monospace;letter-spacing:1px;color:#b0c7db;max-width:350px;line-height:1.7}.parody{position:absolute;right:18px;top:calc(100% - 190px);font:8px monospace;letter-spacing:1px;color:#bdcddb;background:#0a1621b8;padding:5px 8px}.caption{min-height:116px;display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-top:2px solid var(--gold);background:linear-gradient(105deg,#1b2b3a,#111b29);grid-row:2}.speaker-mark{font-size:30px;line-height:32px;color:var(--gold)}.caption>div{flex:1;min-width:0}.caption b{font:700 11px monospace;letter-spacing:2px;color:var(--gold)}.caption p{font-size:clamp(14px,1.05vw,20px);line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere}#voice-status{font:7px monospace;letter-spacing:1px;color:var(--muted);position:absolute;right:12px;bottom:45px}.ticker{grid-row:3;display:flex;align-items:center;gap:14px;background:#080f17;border-top:1px solid var(--line);font:10px monospace;overflow:hidden;white-space:nowrap}.ticker b{color:var(--cyan);height:100%;display:flex;align-items:center;padding:0 16px;border-right:1px solid #334458;font-size:8px;letter-spacing:1.6px;flex-shrink:0}.ticker span{overflow:hidden;text-overflow:ellipsis;flex:1}.ticker small{color:#879aaa;margin-right:12px;font-size:7px}.sidebar{display:flex;flex-direction:column;gap:18px}.board-card,.chat-card{background:var(--card);border:1px solid var(--line);padding:18px}.card-heading{display:flex;align-items:center;justify-content:space-between}.card-heading h1,.card-heading h2{font:700 12px monospace;letter-spacing:2px;margin:0}.card-heading>span{font:8px monospace;color:var(--muted);letter-spacing:1px}.board-meta{font:9px monospace;color:var(--muted);margin:16px 0}.board-meta>b{color:var(--ink);font-size:16px}.board-meta>span{display:block;margin-top:8px;color:var(--cyan);font-size:8px;letter-spacing:.7px}#board{list-style:none;padding:0;margin:0}#board li{display:grid;grid-template-columns:22px 9px 1fr;gap:8px;align-items:center;min-height:37px;border-top:1px solid #263749}#board .rank{font:9px monospace;color:#8096aa}#board .dot{width:6px;height:6px;background:var(--body-color);border-radius:50%}#board .slot{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}#board .slot b{font:9px monospace;text-transform:uppercase;color:#a6b6c6}#board .holder{font:10px monospace;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:var(--ink)}#board li:first-child{min-height:48px}#board li:first-child .slot b,#board li:first-child .holder{color:var(--gold)}.siege{margin-top:14px;padding:13px 0 0;border-top:1px solid #425268;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.siege>span{flex:1;font:8px monospace;color:var(--muted);letter-spacing:1px}.siege b{display:block;font-size:9px;color:var(--gold);margin-top:6px;letter-spacing:0}.siege strong{font:24px monospace;color:var(--gold)}progress{width:100%;height:3px;accent-color:var(--gold);border:0}progress::-webkit-progress-bar{background:#263447}progress::-webkit-progress-value{background:var(--gold)}.rules{color:#9aacbe;font:9px/1.8 monospace;margin:12px 0 0}.chat-card{padding:16px}#chat-log{height:136px;overflow-y:auto;overflow-wrap:anywhere;margin:12px 0;font:10px/1.7 monospace;color:#a8bccd}#chat-log p{margin:5px 0;padding-left:9px;border-left:1px solid #3b5b70}.reactions{display:flex;gap:5px}.reactions button{flex:1;font:8px monospace;letter-spacing:1px;padding:0 5px}form{display:flex;gap:5px;margin-top:10px}input{min-width:0;flex:1;background:#0b1420;color:var(--ink);border:1px solid #405468;padding:0 9px;height:44px;border-radius:3px;font:11px monospace}form button{width:44px;color:var(--cyan);font-size:23px}#chat-status{font:8px/1.6 monospace;color:#9eb0c1;margin:10px 0 0}.sound{position:absolute;bottom:180px;left:22px;padding:0 15px;color:var(--cyan);background:#0c202fe8;font:9px monospace;letter-spacing:1px;z-index:7}.stage-status{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font:10px monospace;letter-spacing:3px;background:#0b1622cc;padding:18px;pointer-events:none}.breaking{position:absolute;top:185px;left:22px;right:22px;background:#a62e28ed;display:flex;align-items:center;gap:12px;padding:12px 16px;box-shadow:0 0 40px #ff584f33;font:12px monospace;z-index:4}.breaking b{letter-spacing:2px;white-space:nowrap}.breaking span{font-size:12px}.title-card{position:absolute;inset:25% 8% auto;background:#091724f0;border-left:3px solid var(--gold);padding:35px;display:flex;flex-direction:column;gap:15px;z-index:3}.title-card small{font:9px monospace;color:var(--gold);letter-spacing:3px}.title-card strong{font-size:32px}.avatar-label{position:absolute;transform:translate(-50%,-50%);font:700 8px monospace;letter-spacing:1px;padding:5px 7px;background:#0a1823c9;border-bottom:1px solid #63c7ce;color:#c9e5ef;white-space:nowrap;pointer-events:none}footer{max-width:1840px;padding:0 3.5vw 28px;display:flex;align-items:center;gap:20px;color:var(--muted);font:8px monospace;letter-spacing:1px}footer>span:first-child{color:var(--gold)}footer p{flex:1;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}
body.stream{overflow:hidden}.stream .masthead,.stream footer{display:none}.stream main{display:block;padding:0;max-width:none}.stream .broadcast{width:100vw;height:100vh;border:0;display:block}.stream #stage{width:100%;height:100%;aspect-ratio:auto}.stream .frame-top{left:42px;right:42px;top:28px;font-size:14px}.stream .bug{font-size:14px;padding:12px 16px}.stream .camera{font-size:12px}.stream .mode{top:87px;left:42px;font-size:12px}.stream .segment{left:44px;top:145px}.stream .segment>b{font-size:28px}.stream .segment>span,.stream .segment>small{font-size:11px}.stream .caption{position:absolute;bottom:75px;left:42px;width:calc(100% - 440px);min-height:115px;padding:20px 25px}.stream .caption p{font-size:23px}.stream .caption b{font-size:15px}.stream .caption #voice-status{font-size:8px;bottom:8px}.stream .ticker{position:absolute;bottom:0;width:100%;height:50px;font-size:15px}.stream .ticker b{font-size:12px}.stream .ticker small{font-size:10px}.stream .sidebar{position:absolute;right:40px;bottom:75px;width:300px}.stream .chat-card{display:none}.stream .board-card{background:#0b1525e8;backdrop-filter:blur(8px);border-color:#4b5e71}.stream #board li{min-height:40px}.stream .holder{font-size:12px!important}.stream .parody{top:auto;bottom:205px;right:40px;font-size:10px}.stream .sound{bottom:220px;left:42px}.stream .breaking{left:42px;right:385px;top:245px;font-size:22px}.stream .breaking span{font-size:18px}.stream .avatar-label{font-size:11px}.stream .stage-status{top:55%}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 260px;padding:18px 20px;gap:15px}.masthead{padding:0 20px}.wordmark small{display:none}.board-card{padding:14px}.segment>small{max-width:250px}.camera{display:none}.caption{min-height:135px}.parody{top:calc(100% - 200px)}}
@media(max-width:700px){.masthead{height:65px;padding:0 16px}.wordmark{font-size:17px;letter-spacing:3px}.star{font-size:30px}#clock{display:none}.signal{font-size:8px;letter-spacing:1px;gap:7px}main{padding:0;display:flex;flex-direction:column;gap:0}.broadcast{width:100%;border-left:0;border-right:0}#stage{aspect-ratio:4/3}.frame-top{top:12px;left:12px;right:12px}.bug{font-size:8px;padding:7px}.mode{left:12px;top:47px;font-size:7px;max-width:calc(100% - 24px);letter-spacing:.3px}.segment{left:14px;top:82px;gap:5px}.segment>b{font-size:13px;letter-spacing:1px}.segment>span{font-size:7px;letter-spacing:2px}.segment>small{font-size:6px;max-width:270px}.caption{padding:16px;gap:12px;min-height:140px}.caption p{font-size:14px;line-height:1.5}.caption b{font-size:10px}.speaker-mark{font-size:25px}.ticker{gap:8px}.ticker b{padding:0 12px;font-size:7px}.ticker span{font-size:9px}.ticker small{display:none}.parody{top:auto;bottom:186px;font-size:6px;right:10px}.sound{left:14px;bottom:210px;min-height:44px;font-size:8px}.sidebar{width:100%;gap:14px;padding:16px}.board-card,.chat-card{padding:18px}.card-heading h1,.card-heading h2{font-size:13px}#board li{min-height:42px}#board .holder{font-size:11px}#board .slot b{font-size:10px}.board-meta{display:flex;align-items:center;gap:7px}.board-meta>span{margin:0 0 0 auto}.siege{margin-top:12px}.rules{font-size:10px}.chat-card #chat-log{height:150px;font-size:11px}.reactions button{font-size:9px}input{font-size:12px}#chat-status{font-size:9px}.breaking{top:135px;left:12px;right:12px;padding:10px;gap:8px;font-size:9px}.breaking span{font-size:10px}.title-card{inset:32% 5% auto;padding:20px}.title-card strong{font-size:21px}.title-card small{font-size:7px}.avatar-label{font-size:6px;padding:3px;letter-spacing:0}footer{padding:10px 18px 24px;gap:12px;flex-wrap:wrap}footer p{flex-basis:100%;order:3;margin:0}#connection{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Shot-specific graphics keep telemetry and faces clear of broadcast overlays. */
.stream.screen-shot .sidebar,.stream.screen-shot .segment,.screen-shot .avatar-label{display:none}
.stream.screen-shot .caption{width:calc(100% - 84px);min-height:95px}
.stream.screen-shot .breaking{top:170px;right:42px;font-size:16px}
.stream.screen-shot .parody{bottom:185px}
#labels{position:absolute;inset:0;pointer-events:none}
.avatar-label{font-size:10px;letter-spacing:.6px}
@media(max-width:700px){
  body:not(.stream) main,body:not(.stream) .sidebar{min-width:0;max-width:100%}
  body:not(.stream) #stage{aspect-ratio:13/10}
  body:not(.stream) .segment>small{display:none}
  body:not(.stream) .segment{top:79px}
  body:not(.stream) .avatar-label{font-size:8px;padding:3px 5px}
  body:not(.stream) .parody{top:107px;bottom:auto;font-size:7px;left:14px;right:auto}
  body:not(.stream) .sound{top:142px;bottom:auto;left:14px;z-index:7}
  body:not(.stream) .caption{min-height:150px;padding-bottom:26px}
  body:not(.stream) #voice-status{bottom:44px}
  body:not(.stream) .board-meta{flex-wrap:wrap}
  body:not(.stream) .masthead .wordmark{min-height:44px;align-items:center}
  body:not(.stream) .masthead{gap:8px}
  body:not(.stream) .signal{white-space:nowrap;font-size:7px}
  body:not(.stream).screen-shot .segment{display:none}
  body:not(.stream).screen-shot .parody{top:80px}
  body:not(.stream).screen-shot .breaking{top:112px}
}
/* Round 3: the lounge. The screen carries the board; the sidebar only keeps the headline numbers. */
.status{display:grid;gap:10px;margin:12px 0}.status div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}
.status dt{color:var(--muted);font-size:12px;letter-spacing:1.5px}.status dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
#sun-holder{color:var(--gold)}#countdown{color:#ff9a62;font-variant-numeric:tabular-nums}
.caption[data-who=commander] .speaker-mark{color:var(--gold)}.caption[data-who=nav] .speaker-mark{color:var(--cyan)}
.stream .sidebar{display:none}.stream .caption{width:calc(100% - 84px)}.stream .breaking{right:42px}
/* The screen is the show: segment cards and breaking banners sit low, clear of it. */
.title-card{inset:auto auto 24% 4%;padding:20px 28px;max-width:60%}
.stream .title-card{inset:auto auto 225px 42px}.stream .title-card strong{font-size:40px}
.stream .breaking{top:auto;bottom:215px;left:42px;right:42px}
@media(max-width:700px){body:not(.stream) .segment>small{display:none}body:not(.stream) .title-card{inset:auto 4% 8% 4%;max-width:none}}
.screen-shot .title-card{display:none!important}
.stream.screen-shot .breaking{top:auto;bottom:215px}
/* Round 4, phone: one slim row of chips on top, one lower-third bar under the stage. Faces and the screen stay clear. */
@media(max-width:700px){
  body:not(.stream) .bug b{display:none}
  body:not(.stream) .mode{top:12px;left:auto;right:12px;max-width:68%;text-align:right;padding:6px 8px}
  body:not(.stream) .segment,body:not(.stream).screen-shot .segment{display:flex;flex-direction:row;align-items:center;gap:8px;top:calc(100vw * 10 / 13 - 28px);left:0;right:0;height:28px;padding:0 12px;background:linear-gradient(90deg,#060c16f2 60%,#060c1600);text-shadow:none}
  body:not(.stream) .segment>span{display:none}
  body:not(.stream) .segment>b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
  body:not(.stream) .parody,body:not(.stream).screen-shot .parody{top:calc(100vw * 10 / 13 - 22px);bottom:auto;left:auto;right:8px;font-size:6px;padding:3px 5px;z-index:2}
  body:not(.stream) .sound{top:44px}
  body:not(.stream) .breaking,body:not(.stream).screen-shot .breaking{top:44px}
  body:not(.stream) .title-card{inset:auto 4% 40px 4%}
}
.stream .sound{top:28px;bottom:auto;left:50%;transform:translateX(-50%)}
@media(max-width:700px){body:not(.stream) .sound{top:calc(100vw * 10 / 13 - 82px)}}
/* Round 5: three sets, a wipe between them, and the audience's controls. */
.avatar-label{left:0;top:0;transform:none;will-change:transform}
.wipe{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 8%;background:linear-gradient(100deg,#060c16 0%,#0b1a2b 62%,#132b40 100%);border-left:6px solid var(--gold);transform:translateX(-102%);transition:transform .42s cubic-bezier(.7,0,.25,1);pointer-events:none}
.wipe.on{transform:none}.wipe small{font:700 11px monospace;letter-spacing:4px;color:var(--gold)}.wipe b{font:800 clamp(26px,5vw,72px) "Chakra Petch",Arial,sans-serif;letter-spacing:3px}.wipe span{font:700 12px monospace;letter-spacing:3px;color:var(--cyan)}
.poll-bug{position:absolute;top:63px;right:22px;max-width:min(320px,42%);display:flex;flex-direction:column;gap:4px;padding:9px 12px;background:#07121ee8;border-left:3px solid var(--gold);font:9px monospace;letter-spacing:1px;z-index:3;pointer-events:none}
.poll-bug b{color:var(--gold);letter-spacing:2px}.poll-bug span{color:var(--ink);font:700 12px Arial,sans-serif;letter-spacing:0;line-height:1.35}.poll-bug i{font-style:normal;color:var(--cyan);font-size:11px}.poll-bug small{display:none;color:var(--muted);font-size:8px}.poll-bug.closed{border-left-color:var(--cyan)}
.cam-pick{position:absolute;right:22px;top:150px;display:flex;gap:8px;align-items:center;background:#0b2230e8;border:1px solid #2f6a77;padding:7px 10px;font:9px monospace;letter-spacing:1px;z-index:3;pointer-events:none}.cam-pick b{color:var(--cyan)}.cam-pick span{color:var(--ink);font-weight:700}
#bursts{position:absolute;left:0;right:0;top:0;bottom:156px;pointer-events:none;overflow:hidden;z-index:2}
.burst{position:absolute;bottom:8px;font:800 12px "Chakra Petch",Arial,sans-serif;letter-spacing:1px;padding:4px 8px;border-radius:2px;background:#07121ecc;animation:rise 2.4s ease-out forwards;white-space:nowrap}
.burst.cheer{color:#ffd27a;border:1px solid #8a6a2c}.burst.boo{color:#ff9a90;border:1px solid #8a3a34}.burst.gasp{color:#9ff4f2;border:1px solid #2f6a77}.burst.hype{color:#e2b8ff;border:1px solid #6a3f8a}
@keyframes rise{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:.9}100%{transform:translate(var(--drift),-190px);opacity:0}}
.call-card{background:var(--card);border:1px solid var(--line);padding:16px}.call-card h3{font:700 9px monospace;letter-spacing:2px;color:var(--muted);margin:16px 0 8px}
#poll-clock{color:var(--gold)!important}.poll-q{font:700 14px/1.4 Arial,sans-serif;margin:12px 0 10px}
.poll-options{display:grid;gap:6px}.poll-option{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 12px;text-align:left;background:linear-gradient(90deg,#24425a var(--pct,0%),#122130 var(--pct,0%));font:700 11px monospace;letter-spacing:.5px}
.poll-option[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}.poll-option.won{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}.poll-option:disabled{cursor:default;opacity:.85}.poll-option b{color:var(--cyan)}
.call-card .reactions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.call-card .reactions button{font:8px monospace;letter-spacing:.5px;padding:0 4px}.reactions i{font-style:normal;color:var(--gold);margin-left:3px}
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.worlds button{font:8px monospace;letter-spacing:1px;padding:0 4px}
#call-status{font:8px/1.6 monospace;color:#9eb0c1;margin:10px 0 0}
.stream .poll-bug{top:87px;right:42px;max-width:380px;padding:14px 18px;font-size:12px}.stream .poll-bug span{font-size:17px}.stream .poll-bug i{font-size:15px}.stream .poll-bug small{display:block}.stream .cam-pick{top:auto;bottom:230px;right:42px;font-size:13px;padding:10px 14px}
.stream #bursts{bottom:200px}.stream .burst{font-size:17px}
.screen-shot .poll-bug{opacity:.92}
@media(max-width:700px){
  body:not(.stream) .sidebar .call-card{order:-1}
  body:not(.stream) .call-card{padding:18px}
  body:not(.stream) .call-card .reactions button,body:not(.stream) .worlds button{font-size:9px}
  body:not(.stream) .poll-bug{top:44px;left:12px;right:auto;max-width:62%;padding:6px 8px;gap:2px;font-size:7px}
  body:not(.stream) .poll-bug span{font-size:10px}body:not(.stream) .poll-bug i{font-size:9px}
  body:not(.stream) .cam-pick{top:44px;right:12px;font-size:7px;padding:5px 7px}
  body:not(.stream) #bursts{bottom:175px}body:not(.stream) .burst{font-size:9px}
  .breaking:not([hidden])~.poll-bug,.breaking:not([hidden])~.cam-pick{display:none}
  .wipe{padding:0 6%}.wipe span{font-size:9px}.wipe small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.wipe{transition:none}}
.breaking:not([hidden])~.title-card{display:none}