:root[data-theme=dark]{--bg:#161616;--surface:#222;--raised:#2a2a2a;--line:#414141;--text:#f1eeeb;--muted:#b8b2ad;--selected:#39332f;--hover:#333;--track:#555}
main{gap:0;align-items:start;grid-template-columns:minmax(0,1fr) 260px;padding:14px;max-width:1480px}.screen{position:relative}#picture{position:relative;aspect-ratio:16/9;border-radius:10px 0 0 10px;overflow:hidden;min-height:0}#picture video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-height:none}#picture[data-joining=true]{min-height:320px}
#immersive-hud{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;z-index:3}#video-info,#live-network,#floating-controls{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:10px;color:var(--text)}#video-info{padding:9px 11px;max-width:48%}#title{font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#live-network{pointer-events:auto;font-size:12px;padding:7px 9px;max-width:55%;height:fit-content;line-height:1.6}#live-network[data-health=offline],#live-network[data-health=buffering]{border-color:var(--accent)}
#floating-controls{position:absolute;bottom:14px;left:5%;width:90%;padding:8px 12px;z-index:4}.timeline{margin:0}.controls{margin-top:5px;gap:7px}.controls .control-left{display:none}.controls{grid-template-columns:1fr auto 1fr}.transport-center{grid-column:2}.volume-right{grid-column:3}.playback-status{position:absolute;top:74px;left:16px;max-width:80%;padding:5px 8px;font-size:12px;color:white;background:#161616aa;border-radius:5px;z-index:3;pointer-events:none}
#immersive-hud,#floating-controls,.playback-status{transition:opacity .15s,visibility .15s}#picture[data-controls=hidden] #immersive-hud,#picture[data-controls=hidden] #floating-controls,#picture[data-controls=hidden] .playback-status{opacity:0;visibility:hidden;pointer-events:none}
main>aside{min-height:0;max-height:none;display:flex;flex-direction:column;border-radius:0 10px 10px 0;border:1px solid var(--line);overflow:auto;background:var(--surface);padding:0} .asideHead{padding:9px 10px 3px 4px;display:flex;align-items:flex-start;gap:5px}.asideHead h2{font-size:14px}.asideHead #roomToggle{flex:none;width:28px;padding:4px}#room-information{flex:1;min-width:0}#room-information summary{cursor:pointer}#room-information summary h2{display:inline}#room-information p{font-size:12px}.room-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:7px;background:var(--bg);margin:3px 10px 8px;padding:3px;gap:3px}.room-tabs button{border:1px solid transparent;border-radius:4px}.room-tabs button[aria-selected=true]{border-color:var(--line);background:var(--raised);color:var(--text);font-weight:600}#room-invitation{padding:0 12px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:12px;color:var(--muted)}#room-invitation button{font-size:12px;padding:3px 0;color:var(--accent)}.room-pane{flex:1;min-height:0}aside>.ready{padding:9px 12px;border-top:1px solid var(--line)}aside>.tip{display:none}#room-rail{display:none;border:1px solid var(--line);height:40px;padding:4px}html[data-room-visible=false] main{grid-template-columns:minmax(0,1fr) 30px}html[data-room-visible=false] #room-rail{display:block}html[data-room-visible=false] #picture{border-radius:10px}#sourcePanel:has(#localSourceLabel[hidden]):has(#loadOnline[hidden]){display:none}footer{font-size:11px}
@media(max-width:800px){main{grid-template-columns:minmax(0,1fr);position:relative;padding:8px}main>aside{position:absolute;right:8px;top:8px;width:min(260px,80%);z-index:7}#picture{border-radius:8px}#immersive-hud{top:8px;left:8px;right:8px}#live-network{font-size:10px;max-width:60%}#video-info{max-width:38%;padding:6px}#title{font-size:11px}#floating-controls{bottom:8px;left:2%;width:96%;padding:5px 7px}.volume-right input,.volume-right label,.transport-center button span{display:none}.controls{display:flex;justify-content:space-between}.transport-center{gap:4px}.playback-status{top:60px;font-size:11px}.room-pane{min-height:90px}header{padding:5px 10px}}
@media(prefers-reduced-motion:reduce){#immersive-hud,#floating-controls,.playback-status{transition:none}}
#picture:fullscreen{border-radius:0;width:100%;height:100%;aspect-ratio:auto}#picture:fullscreen video{object-fit:contain}
.controls .control-left{display:flex;align-items:center;min-width:0}#video-playlist-button{font-size:12px;white-space:nowrap}#video-playlist{position:absolute;left:0;bottom:calc(100% + 8px);width:min(340px,100%);max-height:min(320px,calc(56vw - 170px));overflow:auto;padding:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:9px;color:var(--text)}#video-playlist strong{font-size:14px}#video-playlist ol{list-style:none;padding:0;margin:8px 0}#video-playlist li button{font-size:14px;display:block;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 8px}#video-playlist li button[aria-current=true]{background:var(--selected);color:var(--accent)}
@media(max-width:800px){#video-playlist{max-height:calc(56vw - 75px);padding:6px}#video-playlist li button{padding:6px}.controls .control-left{max-width:82px}#video-playlist-button{padding:3px;font-size:11px}}
/* Joining is a separate readable state; video overlays cannot intercept the form. */
:root[data-theme=light]{color-scheme:only light}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-width:0}main,.screen,#picture,#cover,#joinForm{min-width:0;max-width:100%}
:root[data-joining=true] main{display:block;width:100%;max-width:680px;padding:18px}
:root[data-joining=true] #picture{aspect-ratio:auto!important;width:100%;height:auto;min-height:0;border-radius:10px;background:var(--surface)}
:root[data-joining=true] #cover{position:relative;inset:auto;display:block;padding:28px 20px;border:1px solid var(--line);border-radius:10px}
:root[data-joining=true] #joinForm{display:block;box-sizing:border-box;width:100%;max-width:360px;margin:0 auto}
:root[data-joining=true] #joinForm h1{font-size:21px;line-height:1.4;margin:0 0 10px}:root[data-joining=true] #joinForm p{font-size:14px;line-height:1.65;margin:0 0 20px;overflow-wrap:anywhere}:root[data-joining=true] #joinForm label{font-size:14px;margin-bottom:8px}#nickname{box-sizing:border-box;max-width:100%;font-size:16px;min-height:44px}#joinButton{width:100%;min-height:44px;font-size:15px}#joinHint{margin-top:14px!important;margin-bottom:0!important;min-height:24px}
:root[data-joining=true] #immersive-hud,:root[data-joining=true] #floating-controls,:root[data-joining=true] .playback-status,:root[data-joining=true] main>aside,:root[data-joining=true] #room-rail,:root[data-joining=true] #sourcePanel,:root[data-joining=true] footer{display:none!important}
@media(max-width:800px){:root[data-room-visible=false] main{grid-template-columns:minmax(0,1fr)}main>aside{position:static;width:100%;height:auto!important;min-height:250px;max-height:52dvh;border-radius:9px;margin-top:10px}#room-rail{width:100%;min-height:36px;margin-top:10px}#picture[data-joining=true]{min-height:0!important;aspect-ratio:auto!important}:root[data-joining=true] main{padding:12px}:root[data-joining=true] #cover{padding:24px 18px}.screen{width:100%;min-width:0}.controls{min-width:0;flex-wrap:wrap}.controls>*{min-width:0}.volume-right{gap:0}.volume-right button{min-width:32px;padding:5px}#immersive-hud{max-width:calc(100% - 16px)}.playback-status{max-width:calc(100% - 32px);overflow-wrap:anywhere}#room-chat-pane{min-height:180px}#messages{min-height:80px}}
/* Small screens reserve distinct space for feedback instead of stacking overlays. */
[hidden]{display:none!important}
:root[data-theme=dark]{color-scheme:dark}
header .appearance-control select{max-width:112px;font-size:13px;min-height:32px;padding:4px 7px}
.playback-status{position:static;max-width:100%;margin:6px 0 0;padding:4px 2px;background:transparent;color:var(--muted);font-size:12px;line-height:1.5;min-height:18px;overflow-wrap:anywhere}
:root[data-joining=true] .playback-status{display:none!important}
#video-info{min-width:0;flex:1}#live-network{min-width:0}
#room-information summary{list-style:none}#room-information summary::-webkit-details-marker{display:none}
@media(max-width:1000px) and (pointer:coarse), (max-width:800px){
 main,html[data-room-visible=false] main{grid-template-columns:minmax(0,1fr);padding:8px;display:grid}
 main>aside{position:static;width:100%;height:auto!important;min-height:230px;max-height:52dvh;margin-top:8px;border-radius:8px}
 #room-rail{width:100%;margin-top:8px;height:36px}
 #picture{border-radius:8px}
 #immersive-hud{top:6px;left:8px;right:8px;gap:2px;display:flex;flex-direction:column;align-items:flex-start}
 #video-info,#live-network{max-width:100%;background:#181818b8;color:#fff;border:0;border-radius:4px;padding:3px 6px;backdrop-filter:blur(12px);font-size:11px;line-height:1.35}
 #video-info{max-width:85%}#title{font-size:12px;font-weight:500}
 #live-network{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:left}
 #floating-controls{left:6px;right:6px;bottom:6px;width:auto;padding:3px 6px;border-radius:6px;background:#181818b8;color:#fff;border:1px solid #ffffff25}
 #floating-controls .timeline{font-size:10px;gap:6px;height:20px}
 #floating-controls .controls{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:2px;margin-top:0}
 #floating-controls .controls button{min-height:32px;min-width:30px;padding:4px}
 #floating-controls .controls svg{width:18px;height:18px}
 #floating-controls .volume-right input,#floating-controls .volume-right label,#floating-controls #pip,.transport-center button span{display:none}
 #video-playlist-button{font-size:12px;padding:3px}#video-playlist{max-height:min(240px,55dvh);bottom:calc(100% + 5px)}
 .transport-center{gap:0}.volume-right{gap:0}
}
@media(orientation:landscape) and (max-height:550px) and (max-width:1100px){
 header{height:40px;min-height:40px}main{padding:6px}
 .screen{width:min(100%,calc((100dvh - 84px) * var(--media-ratio,1.77778)));margin-inline:auto}
 main>aside{max-height:75dvh}
 #immersive-hud{flex-direction:row;justify-content:space-between;align-items:flex-start}
 #video-info{max-width:40%}#live-network{max-width:58%}
 :root[data-joining=true] .screen{width:100%}
}