/* /live · the room page.
   /live?obs=1  stream mode: a fixed 1920x1080 stage (html.obs, set by live.js), no cursor, no buttons, scaled to fit
                a smaller preview window. Everything under "OBS" below applies only there.
   /live        fluid page for viewers: ≥1100px room (16:9) + meter on the left, log + vote on the right, strip below;
                <1100px one column: room, THE ROOM VOTE, room log, THE METER, strip. Never scrolls sideways. */

body{display:block;min-height:0;background:#0a0b0a}

/* ---------------------------------------------------------------- shared pieces */
.lv-room{border:3px solid #2a2e28;background:#050605;box-sizing:border-box}
.lv-meter{background:#121412;border:3px solid #2a2e28;box-sizing:border-box}
.lv-log{display:flex;flex-direction:column;background:#121412;border:3px solid #2a2e28;overflow:hidden;min-width:0}
.lv-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:12px 18px;background:var(--charge);color:#121412;font:700 15px/1.1 var(--mono);letter-spacing:.04em}
.lv-h .lt-tag{font:400 22px/1 var(--display)}
.lv-h .lt-outlet{margin-left:auto}
.lt-outlet em{font-style:normal}
.lt-outlet.s-dead em,.lt-outlet.s-weak em{color:#121412;background:var(--drain);padding:0 6px}
.lt-outlet.s-surge em{color:#121412;background:#fff3b0;padding:0 6px}
.lv-lines{list-style:none;margin:0;padding:10px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:0;overflow:hidden}
.lv-lines li{flex:0 0 auto;font:500 15px/1.4 var(--mono);color:var(--bone);overflow-wrap:anywhere;min-width:0}
.lv-lines li time{color:var(--charge);margin-right:10px;font-weight:700}
.lv-lines li.k-paid,.lv-lines li.k-meter,.lv-lines li.k-poll,.lv-lines li.k-launch{color:var(--charge)}
.lv-lines li.loud span{text-transform:uppercase}
.lv-lines li.new{animation:lv-in .45s cubic-bezier(.16,1,.3,1)}
.lv-lines li.empty{color:var(--grime)}
.lv-lines .share{margin-left:10px;font:700 11px/1 var(--mono);letter-spacing:.1em;color:var(--grime);text-decoration:none;border:1px solid #3a3e38;padding:2px 6px;vertical-align:1px;white-space:nowrap}
.lv-lines .share:hover,.lv-lines .share:focus-visible{color:var(--charge);border-color:var(--charge)}
@keyframes lv-in{from{transform:translateY(14px);opacity:0}}
main.live .vote-card{background:#121412;border:3px solid var(--charge)}
.lv-strip{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;background:#121412;border-top:4px solid var(--charge);box-sizing:border-box}
.lt-bug{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;min-width:0}
.lt-bug b{font:400 26px/1.25 var(--display);color:var(--charge);white-space:nowrap}
.lt-bug span{font:700 15px/1.3 var(--mono);color:var(--bone);letter-spacing:.03em;overflow-wrap:anywhere;min-width:0}
.lt-bug span.ph{color:var(--grime);letter-spacing:.1em}
.lv-share{flex:0 0 auto}
.lt-disc{margin:0 0 0 auto;font:700 13px/1.4 var(--mono);letter-spacing:.04em;color:rgba(238,235,224,.72)}
@media (prefers-reduced-motion:reduce){.lv-lines li.new{animation:none}}

/* ---------------------------------------------------------------- fluid /live (viewers) */
html:not(.obs) body{overflow-x:hidden}
main.live:not(.obs){display:grid;gap:16px;padding:16px;max-width:1920px;margin:0 auto;box-sizing:border-box;grid-template-columns:minmax(0,1fr);grid-template-areas:"banner" "room" "vote" "log" "meter" "strip"}
main.live:not(.obs) > .launch-banner{grid-area:banner}
main.live:not(.obs) .lv-room{grid-area:room;width:100%;aspect-ratio:16/9}
main.live:not(.obs) .lv-room .rv{width:100%;height:100%}
main.live:not(.obs) .lv-side{display:contents}
main.live:not(.obs) .lv-log{grid-area:log}
main.live:not(.obs) .lv-vote{grid-area:vote;min-width:0}
main.live:not(.obs) .lv-meter{grid-area:meter;min-width:0}
main.live:not(.obs) .lv-strip{grid-area:strip;padding:14px 16px}
@media (min-width:1100px){
  main.live:not(.obs){grid-template-columns:minmax(0,1fr) minmax(360px,30%);grid-template-areas:"banner banner" "room side" "meter side" "strip strip";grid-template-rows:auto auto minmax(0,1fr) auto;align-items:start}
  main.live:not(.obs) .lv-side{grid-area:side;display:flex;flex-direction:column;gap:16px;min-width:0}
}
@media (max-width:520px){
  main.live:not(.obs){padding:10px;gap:12px}
  .lt-bug b{font-size:22px}
  .lt-disc{margin-left:0}
}

/* ---------------------------------------------------------------- OBS: /live?obs=1, a fixed 1920x1080 stage */
html.obs,html.obs body{width:1920px;height:1080px;overflow:hidden;background:#050605}
html.obs,html.obs body,main.live.obs,main.live.obs *{cursor:none}
main.live.obs{position:relative;width:1920px;height:1080px;overflow:hidden;transform-origin:0 0;background:#0a0b0a}
main.live.obs .lv-room{position:absolute;left:24px;top:24px;width:1280px;height:720px}
main.live.obs .lv-room .rv{width:100%;height:100%}
main.live.obs .lv-meter{position:absolute;left:24px;top:764px;width:1286px;height:184px;padding:18px 22px}
main.live.obs .lv-meter .mtr-h{font:700 24px/1.1 var(--mono);gap:18px}
main.live.obs .lv-meter .mtr-h b{font:400 30px/1 var(--display)}
main.live.obs .lv-meter .mtr-bar{margin-top:16px;gap:8px}
main.live.obs .lv-meter .mtr-track{height:22px}
main.live.obs .lv-meter .mtr-l b{font:400 18px/1.1 var(--display)}
main.live.obs .lv-meter .mtr-l small{font:700 16px/1.1 var(--mono)}
main.live.obs .lv-side{position:absolute;left:1328px;top:24px;width:568px;height:924px;display:flex;flex-direction:column;gap:16px}
main.live.obs .lv-log{flex:1 1 auto;min-height:0}
main.live.obs .lv-h{flex-wrap:nowrap;font-size:17px;line-height:1}
main.live.obs .lv-h .lt-tag{font-size:24px}
main.live.obs .lv-lines{flex:1 1 auto}
main.live.obs .lv-lines li{font:500 20px/1.3 var(--mono);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
main.live.obs .lv-vote{flex:0 0 auto}
main.live.obs .vote-card{padding:16px 18px}
main.live.obs .vote-card .vc-h b{font-size:26px}
main.live.obs .vote-card .vc-opt b{font-size:20px}
main.live.obs .vote-card .vc-opt .vc-n{font-size:24px}
main.live.obs .lv-strip{position:absolute;left:0;right:0;bottom:0;height:108px;flex-wrap:nowrap;padding:0 24px}
main.live.obs .lt-bug{flex-wrap:nowrap}
main.live.obs .lt-bug b{font-size:34px}
main.live.obs .lt-bug span{font-size:20px;white-space:nowrap}
main.live.obs .lt-disc{font-size:16px;line-height:1.2;white-space:nowrap}
main.live.obs .launch-banner{position:absolute;left:27px;top:27px;width:1274px;z-index:6;box-sizing:border-box}