:root{color-scheme:dark;--canvas:#101114;--panel:#1c1e23;--edge:#37383e;--soft:#b5b3b7;--ivory:#f5f0eb;--red:#e6433c;font-family:"Segoe UI",Arial,sans-serif;background:var(--canvas);color:var(--ivory)}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{min-width:320px}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
*{scrollbar-color:var(--edge) var(--canvas);scrollbar-width:thin}

.entry-screen,.waiting-screen{min-height:100dvh;display:grid;place-items:center;padding:40px 24px}
.entry-inner,.waiting-inner{width:min(100%,390px);text-align:center}
.entry-mark,.waiting-inner img{border-radius:50%;display:block;margin:0 auto}
h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.025em;line-height:1.08}
.entry-inner h1,.waiting-inner h1{font-size:clamp(38px,6vw,52px);margin:25px 0 42px}
#join-form{display:grid;text-align:left;gap:9px}
#join-form label{font-size:13px;font-weight:600;margin:8px 0 0}
#join-form input{height:54px;width:100%;padding:0 17px;color:var(--ivory);background:var(--panel);border:1px solid var(--edge);border-radius:8px;outline:none}
#join-form input::placeholder{color:#aaa8ac}
#join-form input:focus{border-color:var(--red)}
.primary-button{height:55px;margin-top:17px;color:white;background:#c1322d;border:0;border-radius:8px;font-weight:700}
.primary-button:hover{background:#aa2925}
.entry-error{margin:19px 0 0;color:#ffb9b5;font-size:13px;line-height:1.5}
.waiting-inner{position:relative}
.waiting-inner h1{margin-bottom:12px}
.waiting-inner p{color:var(--soft);margin:0;line-height:1.5}
.waiting-pulse{width:34px;height:3px;background:var(--red);border-radius:3px;display:block;margin:30px auto -8px}
.quiet-button{margin-top:30px;border:0;background:none;color:var(--soft);text-decoration:underline;text-underline-offset:4px;padding:10px}
.quiet-button:hover{color:var(--ivory)}

.watch-screen{min-height:100dvh;display:grid;grid-template-rows:auto minmax(320px,1fr) auto auto;gap:16px;padding:18px clamp(16px,3vw,46px) 22px}
.watch-header{display:flex;align-items:center;gap:22px;min-width:0;min-height:48px}
.watch-brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:Georgia,serif;font-size:26px}
.watch-brand img{border-radius:50%}
.watch-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft);font-size:14px}
.connection-label{margin-left:auto;white-space:nowrap;color:var(--soft);font-size:12px}
.connection-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;margin-right:9px;vertical-align:1px}
.player-frame{position:relative;min-height:0;background:#08090b;overflow:hidden;border-radius:10px;display:grid;place-items:center}
.player-frame:fullscreen{border-radius:0}
.player-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#08090b}
.video-overlay{position:relative;z-index:1;color:var(--soft);font-size:14px;text-align:center;padding:20px}
.start-button{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);background:#c1322d;border:0;border-radius:8px;color:#fff;padding:15px 22px;font-weight:700;white-space:nowrap}
.player-toolbar{position:absolute;z-index:3;bottom:0;left:0;right:0;min-height:76px;background:rgba(10,11,13,.9);display:flex;align-items:center;gap:18px;padding:13px clamp(15px,2vw,30px)}
.shared-controls{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tool-button{height:38px;border:1px solid #555459;border-radius:7px;background:#242429;color:var(--ivory);padding:0 13px;font-size:13px;white-space:nowrap}
.tool-button:hover{background:#36363b}
.time-label{font-size:12px;font-variant-numeric:tabular-nums;color:var(--soft);white-space:nowrap}
#seek{flex:1;min-width:70px;accent-color:var(--red);cursor:pointer}
.speed-label,.host-only{font-size:12px;color:var(--soft);white-space:nowrap}
#speed{height:38px;background:#242429;border:1px solid #555459;border-radius:7px;color:var(--ivory);padding:0 8px}
.toolbar-end{display:flex;gap:9px;margin-left:auto}
.tracks-panel{position:absolute;z-index:4;right:20px;bottom:88px;width:min(320px,calc(100% - 40px));max-height:calc(100% - 110px);overflow:auto;background:#1c1e23;padding:22px;border-radius:10px;box-shadow:0 14px 42px rgba(0,0,0,.5);display:grid;gap:8px}
.tracks-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tracks-heading strong{font-family:Georgia,serif;font-size:23px;font-weight:400}
.tracks-heading button{border:0;background:none;color:var(--soft);font-size:27px;line-height:1;width:30px;height:30px}
.tracks-panel label{font-size:12px;color:var(--soft);margin-top:8px}
.tracks-panel select{height:43px;min-width:0;width:100%;padding:0 10px;border-radius:7px;border:1px solid var(--edge);background:#111216;color:var(--ivory)}
.watch-footer{display:flex;justify-content:space-between;gap:16px;color:var(--soft);font-size:12px;font-variant-numeric:tabular-nums}
.network-warning{margin:0;color:var(--soft);font-size:12px}
@media(max-width:760px){.watch-screen{padding:12px;gap:12px;grid-template-rows:auto minmax(270px,1fr) auto auto}.watch-header{gap:12px}.watch-title{font-size:12px}.watch-brand span{display:none}.player-toolbar{align-items:stretch;flex-wrap:wrap;gap:8px;padding:10px}.shared-controls{order:2;width:100%;flex-basis:100%;gap:7px}.host-only{order:2}.toolbar-end{order:1;width:100%;justify-content:flex-end}.tracks-panel{bottom:110px;right:10px}.speed-label{display:none}}
@media(max-width:480px){.watch-screen{grid-template-rows:auto minmax(220px,1fr) auto auto}.watch-header{min-height:36px}.watch-brand img{width:32px;height:32px}.connection-label{font-size:11px}.player-toolbar{min-height:65px}.time-label{font-size:11px}.tool-button{padding:0 9px}.tracks-panel{bottom:105px}}