.watch-layout { max-width:1220px; margin:auto; padding:24px; }
.watch-heading,.watch-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.watch-heading { justify-content:space-between; margin-bottom:10px; }
.watch-heading h1 { color:var(--gold); }
#viewers,#notice,#player-status { color:var(--muted); }
#notice:not(:empty),#player-status:not(:empty) { margin-block:8px; }
#entry-panel { display:grid; justify-items:center; gap:18px; max-width:450px; margin:45px auto; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#entry-panel img,#empty-screen img { border-radius:25%; }
#entry { width:100%; }
.watch-room { display:grid; grid-template-columns:minmax(0,1fr) minmax(255px,330px); align-items:start; gap:24px; }
.watch-stage,.watch-chat { min-width:0; }
#screen { min-height:200px; aspect-ratio:16/9; position:relative; background:#17141e; border-radius:8px; overflow:hidden; }
#empty-screen,#video-slot { position:absolute; inset:0; }
#empty-screen { display:grid; place-content:center; justify-items:center; gap:10px; color:#dec5ff; }
#video-slot iframe { width:100%; height:100%; border:0; display:block; }
.player-actions { margin-block:10px; }
#seek-label { flex:1; min-width:110px; display:flex; align-items:center; }
#seek { padding:0; accent-color:var(--gold); }
#external { color:var(--gold); font-size:13px; }
.watch-queue,.watch-chat { border-top:1px solid var(--line); padding-top:12px; }
.watch-room h2 { font-size:18px; color:var(--gold); margin-bottom:10px; }
#queue-form,#message-form { grid-template-columns:minmax(0,1fr) auto; }
#queue { margin:8px 0 0; padding-left:24px; }
#queue li { padding:6px 0; overflow-wrap:anywhere; }
#queue li a { color:var(--gold); }
#queue li button { margin-left:8px; }
#watch-log { height:clamp(165px,42vh,450px); overflow:auto; overflow-wrap:anywhere; scrollbar-gutter:stable; }
#watch-log:empty::after { content:'No messages yet.'; color:var(--muted); }
#watch-log p { padding:4px 0; }
#watch-log strong { color:var(--gold); }
#reaction-feed { height:34px; display:flex; align-items:center; gap:8px; overflow:hidden; font-size:13px; color:var(--muted); }
#reaction-feed span { max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#reactions { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
#reactions button { min-width:40px; padding-inline:5px; }
@media (max-width:780px) {
  .watch-layout { padding:16px; }
  .watch-room { grid-template-columns:minmax(0,1fr); }
  #watch-log { height:200px; }
  .watch-page input { font-size:16px; }
  .watch-page button { min-height:44px; }
}