:root{color-scheme:dark;--bg: #071012;--surface: #101719;--surface-strong: #172124;--line: #263235;--text: #f4f0e8;--muted: #aab0ae;--blue: #78b7ff;--green: #8ed7a5;--coral: #ff9c7a;--yellow: #ffd166;--danger: #ff7474;--shadow: 0 24px 80px rgba(0, 0, 0, .35);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:var(--bg);color:var(--text)}#root{height:100vh;overflow:hidden}button,input,select{font:inherit}button{border:0;cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.55}input,select{width:100%;border:1px solid var(--line);background:#111416;color:var(--text);border-radius:8px;padding:.78rem .9rem;outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #78b7ff26}.lobby{height:100vh;display:grid;align-content:center;gap:.9rem;overflow:auto;padding:2rem min(6vw,5rem)}.lobbyHero{max-width:900px}.brandMark{display:inline-flex;align-items:center;gap:.55rem;color:var(--text);font-weight:800;letter-spacing:0}.brandMark.compact{width:112px;flex-direction:column;color:var(--text);gap:0}.heroLogo{display:block;width:min(520px,82vw);height:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,.28))}.roomLogo{width:112px;height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}.lobby h1{max-width:850px;margin:.45rem 0 .9rem;color:#fff;font-size:clamp(4.2rem,10vw,8.5rem);font-weight:900;line-height:.92;letter-spacing:0}.lobby p{max-width:680px;margin:0 0 2.6rem;color:var(--muted);font-size:clamp(1.15rem,2.2vw,1.75rem);font-weight:700;line-height:1.55}.joinStrip{display:grid;grid-template-columns:minmax(200px,360px) auto;align-items:end;gap:.85rem}label{display:grid;gap:.45rem;color:var(--muted);font-size:.85rem;font-weight:700}.primaryButton,.iconButton,.mediaForm button,.chatForm button,.nameForm button{min-height:46px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:#101112;background:var(--green);font-weight:800;padding:0 1rem}.featureBand{width:min(900px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.featureBand div{min-height:78px;border-top:1px solid var(--line);display:flex;align-items:center;gap:.7rem;color:var(--muted)}.appShell{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.topBar{min-height:126px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem min(3vw,2rem);border-bottom:1px solid var(--line);background:#101112d1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.roomIdentity,.topActions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.roomPill,.modeReadout,.connection{display:inline-flex;align-items:center;gap:.45rem;min-height:34px;border-radius:999px;padding:0 .75rem;background:var(--surface);color:var(--muted);font-size:.85rem;font-weight:700}.connection span{width:8px;height:8px;border-radius:50%;background:var(--danger)}.connection.connected span{background:var(--green)}.segmented{display:inline-grid;grid-template-columns:1fr 1fr;min-height:38px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.segmented button{min-width:78px;background:transparent;color:var(--muted);font-weight:800}.segmented .active{background:var(--blue);color:#0b1115}.iconButton.wide{min-width:104px;background:var(--surface-strong);color:var(--text);border:1px solid var(--line)}.watchLayout{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,31vw,560px);min-height:0;overflow:hidden}.stage{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(420px,1fr) auto;position:relative;overflow:hidden}.playerFrame{position:relative;min-height:0;height:100%;background:#070808;overflow:hidden}.playerFrame video,.playerFrame iframe,.youtubeMount,.youtubeMount iframe{width:100%;height:100%;min-height:0;display:block;border:0;background:#070808}.playerFallback{min-height:0;display:grid;place-items:center;align-content:center;gap:.55rem;color:var(--muted);text-align:center;padding:2rem}.playerFallback strong{color:var(--text)}.controlVeil{position:absolute;left:1rem;bottom:1rem;border:1px solid rgba(255,255,255,.13);background:#0b0e10c7;color:var(--text);border-radius:8px;padding:.65rem .75rem;font-weight:800;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controlVeil.subtle{right:1rem;text-align:center}.clockBadge{position:absolute;top:1rem;right:1rem;border-radius:8px;padding:.45rem .65rem;background:#0b0e10b3;color:var(--yellow);font-variant-numeric:tabular-nums;font-weight:900}.playerCommandOverlay{position:absolute;left:50%;bottom:1rem;transform:translate(-50%);z-index:3;pointer-events:none}.playerCommandOverlay button{min-width:96px;min-height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0b0e10c2;color:var(--text);font-weight:900;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.playerCommandOverlay button:hover{background:#8ed7a533;border-color:#8ed7a5b3}.mediaDock{display:grid;grid-template-columns:minmax(220px,320px) minmax(280px,1fr);gap:.85rem;align-items:center;max-height:320px;overflow:auto;padding:1rem min(3vw,1.5rem);border-top:1px solid var(--line);background:#181b1df0}.mediaSummary{display:flex;align-items:center;gap:.75rem;min-width:0}.mediaSummary div{flex:1;min-width:0}.mediaSummary span,.mediaSummary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mediaSummary small{color:var(--muted);margin-top:.2rem}.quickPlaylistButton{min-height:38px;border:1px solid var(--line);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;flex:0 0 auto;padding:0 .75rem;background:var(--surface);color:var(--text);font-size:.9rem;font-weight:800}.quickPlaylistButton:hover:not(:disabled){border-color:#8ed7a5cc;background:#8ed7a524}.mediaForm,.mediaSearch,.chatForm,.nameForm,.playlistCreate,.playlistAddUrl,.playlistSearch{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:.55rem}.mediaForm button,.mediaSearch button,.chatForm button,.nameForm button,.playlistCreate button,.playlistAddUrl button,.playlistSearch button{padding:0}.formError{grid-column:2;color:var(--danger)}.playlistQuickMessage{grid-column:2;color:var(--green);font-weight:800}.mediaDiscovery{grid-column:1 / -1;display:grid;gap:.75rem}.sidePanel{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:.85rem;padding:1rem;border-left:1px solid var(--line);background:#121416e6;overflow:hidden}.nameForm{align-items:end}.panelTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;min-height:44px}.panelTabs button{border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-weight:900}.panelTabs button.active{background:var(--blue);border-color:var(--blue);color:#071016}.panelBlock,.chatPanel,.playlistPanel{min-height:0;border:1px solid var(--line);background:var(--surface);border-radius:8px;overflow:hidden}.panelTitle{min-height:46px;display:flex;align-items:center;gap:.55rem;padding:0 .85rem;border-bottom:1px solid var(--line);font-weight:900}.panelTitle span{margin-left:auto;color:var(--muted)}.peopleList{display:grid;gap:.2rem;padding:.6rem}.personRow{min-height:42px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:0 .45rem;border-radius:8px}.personRow:hover{background:var(--surface-strong)}.personRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#081016;font-weight:900}.hostIcon{color:var(--yellow)}.chatPanel{display:grid;grid-template-rows:auto minmax(180px,1fr) auto auto}.playlistPanel{display:grid;grid-template-rows:auto minmax(0,1fr)}.playlistBody{min-height:0;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:.75rem;padding:1rem}.playlistSelectRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem}.smallAction,.addCurrentButton{min-height:42px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--surface-strong);border:1px solid var(--line);color:var(--text);font-weight:800;padding:0 .75rem}.playlistMode{width:100%}.playlistMode button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-width:0;padding:0 .5rem}.playlistDivider{min-height:1px;display:grid;place-items:center;position:relative;color:var(--muted);font-size:.72rem;font-weight:900}.playlistDivider:before{content:"";width:100%;border-top:1px solid var(--line);position:absolute;top:50%;left:0}.playlistDivider span{position:relative;z-index:1;padding:0 .55rem;background:#121416f2}.playlistMessage{border-radius:8px;border:1px solid var(--line);background:#111416;color:var(--muted);min-height:1rem;line-height:1.4;padding:.65rem .7rem}.playlistMessage.success{border-color:#8ed7a559;color:var(--green)}.playlistMessage.error{border-color:#ff747473;color:var(--danger)}.playlistItems{min-height:0;overflow:auto;display:grid;align-content:start;gap:.45rem;padding-right:.15rem}.searchResults{display:grid;gap:.5rem;padding-bottom:.35rem}.mediaSearchResults{max-height:168px;overflow:auto;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));padding-right:.15rem}.searchResult{min-height:68px;display:grid;grid-template-columns:86px minmax(0,1fr) auto auto;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:8px;background:#111416;padding:.45rem}.searchResult img,.searchThumbFallback{width:86px;height:48px;border-radius:6px;object-fit:cover;background:var(--surface-strong)}.searchThumbFallback{display:grid;place-items:center;color:var(--muted)}.searchResult div{min-width:0}.searchResult strong,.searchResult small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.searchResult strong{font-size:.9rem}.searchResult small{color:var(--muted);margin-top:.18rem;font-size:.78rem}.searchResult button{min-height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;background:var(--surface-strong);border:1px solid var(--line);color:var(--text);font-weight:800;padding:0 .55rem}.searchResult button:hover:not(:disabled){border-color:#8ed7a5cc;background:#8ed7a524}.playlistCount{color:var(--muted);font-size:.82rem;font-weight:800;padding:.15rem .1rem .25rem}.playlistItem{width:100%;min-height:56px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.75rem;border-radius:8px;background:#141719;color:var(--text);border:1px solid transparent;padding:.65rem .75rem;text-align:left}.playlistItem.active{border-color:var(--green);background:#8ed7a51a}.playlistItem span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-strong);color:var(--muted);font-size:.8rem;font-weight:900}.playlistItem strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.96rem}.playlistItem small{color:var(--muted);text-transform:capitalize}.emptyPlaylist{margin:0;color:var(--muted);line-height:1.45}.messageList{overflow:auto;display:grid;align-content:start;gap:.75rem;padding:.85rem}.chatMessage{display:grid;gap:.25rem}.chatMessage div{display:flex;align-items:baseline;gap:.55rem}.chatMessage strong{color:var(--green)}.chatMessage time{color:var(--muted);font-size:.74rem}.chatMessage p{margin:0;color:var(--text);line-height:1.45;overflow-wrap:anywhere}.reactionRow{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;padding:.7rem .85rem 0}.reactionRow button{min-height:34px;border-radius:8px;background:var(--surface-strong)}.chatForm{padding:.85rem}.reactionBurst{pointer-events:none;position:absolute;inset:0 390px 88px 0;overflow:hidden}.reactionBurst span{position:absolute;bottom:5rem;font-size:2.4rem;animation:floatUp 2.4s ease-in forwards;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}.toast{position:fixed;left:50%;bottom:1rem;transform:translate(-50%);max-width:min(92vw,520px);border:1px solid var(--line);background:#202529f0;color:var(--text);border-radius:8px;padding:.8rem 1rem;box-shadow:var(--shadow);z-index:10}.loadingScreen{min-height:100vh;display:grid;place-items:center;align-content:center;gap:1rem;color:var(--muted)}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes floatUp{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:1}to{transform:translateY(-48vh) scale(1.25);opacity:0}}@media(max-width:980px){body,#root,.appShell{height:auto;min-height:100vh;overflow:auto}.watchLayout{grid-template-columns:1fr;overflow:visible}.stage{grid-template-rows:minmax(52vh,auto) auto;overflow:visible}.sidePanel{border-left:0;border-top:1px solid var(--line);min-height:620px;overflow:visible}.reactionBurst{inset:0 0 88px}}@media(max-width:720px){.lobby{align-content:start;padding:2rem 1rem}.heroLogo{width:min(340px,100%)}.joinStrip,.featureBand,.mediaDock{grid-template-columns:1fr}.mediaDock{max-height:none}.topBar{align-items:flex-start;flex-direction:column}.roomLogo{width:92px;height:auto}.brandMark.compact,.roomLogo{width:92px}.topActions{width:100%}.segmented,.iconButton.wide{flex:1}.playerFrame video,.playerFrame iframe,.youtubeMount,.youtubeMount iframe{min-height:46vh}.mediaSearchResults{grid-template-columns:1fr;max-height:220px}.formError,.playlistQuickMessage{grid-column:1}.searchResult{grid-template-columns:72px minmax(0,1fr) 42px 42px}.searchResult img,.searchThumbFallback{width:72px;height:42px}.searchResult button{padding:0}.searchResult button:first-of-type span{display:none}}