.watch-party{max-width:1180px;margin:0 auto;display:grid;gap:12px}.watch-toolbar{display:flex;align-items:center;gap:12px;min-height:40px}.now{display:grid;gap:1px;min-width:0}.now strong{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sync-badge{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text-2)}.sync-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-3)}.sync-badge.live{color:var(--live);border-color:#5fd8a459;background:#5fd8a414}.sync-badge.live:before{background:var(--live);animation:pulse 1.4s infinite}.shell .sync-to-admin-btn{margin-left:0;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);border-radius:999px;font-size:12.5px;font-weight:600}.shell .sync-to-admin-btn:hover:not(:disabled){background:var(--surface-3)}.video-shell{position:relative;aspect-ratio:16 / 9;width:100%;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 24px 60px -24px #000c}.video-shell video,.video-shell iframe,.video-shell .party-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.video-shell video{object-fit:contain}.video-empty{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;color:var(--text-3);background:radial-gradient(ellipse at 50% 35%,#2a2133 0,var(--surface) 70%);pointer-events:none}.video-empty-icon{width:64px;height:64px;display:grid;place-items:center;margin-bottom:8px;border-radius:50%;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(255,79,163,.35)}.video-empty-icon svg{margin-left:3px}.video-empty strong{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.01em}.video-empty small{font-size:14px;max-width:360px;line-height:1.5}.pause-banner{max-width:1180px;margin:0 auto 12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px;border-radius:12px;border:1px solid rgba(242,193,78,.45);background:#f2c14e1a}.pause-banner strong{font-size:14px;color:var(--warn)}.pause-banner span{font-size:13px;color:var(--text-2)}.source-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.source-panel>*{order:5}.source-panel>.video-form{order:1;flex:1 1 380px;display:flex;gap:8px;margin:0}.video-form input{flex:1}.video-form .btn{flex:none}.shell .video-start-wrap{order:2;display:flex;align-items:center;gap:8px;margin:0}.shell .video-start-wrap label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}.shell .video-start-wrap input{width:128px;min-height:40px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text);border-radius:10px;padding:0 10px}.shell .local-video-button{order:3;width:auto;margin:0;min-height:40px;padding:0 14px}.shell .video-source-hint{order:6;flex-basis:100%;margin:0;font-size:12px;color:var(--text-3);line-height:1.45}.shell .video-source-roster{order:7;flex-basis:100%;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.shell .video-source-roster-head{padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;color:var(--text-3)}.shell .video-source-roster-head strong{font-size:11px;color:var(--text-2)}.shell .admin-source-banner{padding:9px 14px;border-bottom:1px solid var(--line);background:var(--accent-soft);color:var(--accent);font-size:12px}.shell .video-source-list{background:var(--line);max-height:180px;overflow-y:auto}.shell .video-source-row{background:var(--surface);padding:9px 14px;font-size:13px}.shell .video-source-row.admin{background:var(--surface-2)}.shell .video-source-name{font-size:13px;color:var(--text)}.shell .video-source-link{font-size:12px;color:var(--text-2)}.shell .video-source-link:hover{color:var(--accent)}.shell .video-source-open{font-size:12px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:8px;color:var(--text-2)}.shell .video-source-open:hover{background:var(--surface-3);color:var(--text)}.shell .video-source-empty{background:var(--surface);color:var(--text-3);font-size:13px;padding:12px 14px}.watch-help{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.5}@media(max-width:860px){.video-shell{border-radius:12px}.now strong{font-size:16px}.source-panel>.video-form{flex-basis:100%}.video-empty strong{font-size:18px}.video-empty small{font-size:13px}}@media(max-width:560px){.watch-toolbar{flex-wrap:wrap;row-gap:8px}.now{flex:1 1 100%}.sync-badge{margin-left:0}.shell .video-start-wrap{flex:1}.shell .video-start-wrap input{flex:1;width:auto}.shell .local-video-button{flex:1}}.room-queue{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.rq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}.rq-head .eyebrow{margin-right:6px}.rq-controls{display:flex;gap:8px}.rq-controls .btn{min-height:34px;padding:0 12px;font-size:13px}.rq-list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto}.rq-item{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line)}.rq-item:last-child{border-bottom:0}.rq-item.current{background:var(--accent-soft)}.rq-num{flex:none;width:22px;text-align:center;font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}.rq-item.current .rq-num{color:var(--accent)}.rq-text{flex:1;min-width:0;display:grid}.rq-text strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rq-text small{font-size:12px;color:var(--text-3)}.rq-play{flex:none;min-height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font-size:13px;font-weight:600}.rq-play:hover:not(:disabled){background:var(--surface-3)}.rq-play:disabled{color:var(--accent);border-color:transparent;opacity:1}.brand{color:var(--text);text-decoration:none}.rq-remove{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--text-3);font-size:18px;line-height:1}.rq-remove:hover{color:#ff8f8f;border-color:#8e4545}.shell .video-start-wrap input,.shell .local-video-button{font-size:14px}.shell:not(.is-host) .source-panel{display:none}.shell .video-start-wrap,.shell .local-video-button,.shell .video-source-hint,.shell .video-source-roster{display:none}.video-problem{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:#100e13f0}.video-problem strong{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text)}.video-problem span{max-width:420px;font-size:14px;line-height:1.5;color:var(--text-2)}.tap-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:15px;font-weight:700;box-shadow:0 12px 40px #0000008c;cursor:pointer;animation:rise .2s ease-out}.tap-prompt:hover{background:#ff7dbb}.video-shell{width:min(100%,max(480px,calc((100dvh - 300px) * 16 / 9)));margin-inline:auto}@media(max-width:860px){:root{--topbar-h: 61px}.stage,.watch-party{display:contents}.stage .pause-banner,.watch-toolbar,.room-queue,.source-panel,.watch-help{margin-inline:16px}.watch-toolbar{margin-top:12px;margin-bottom:8px}.room-queue{margin-top:12px}.source-panel{margin-top:12px;margin-bottom:12px}.video-shell{position:sticky;top:var(--topbar-h);z-index:15;width:100%;margin:0;border-radius:0;border-inline:0;box-shadow:0 10px 24px -12px #000c}.rail{height:calc(100dvh - var(--topbar-h) - (100vw * 9 / 16));min-height:380px}}.video-note{position:absolute;left:50%;bottom:56px;transform:translate(-50%);z-index:7;max-width:calc(100% - 24px);display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px 8px 8px 16px;border-radius:999px;background:#100e13f0;border:1px solid var(--line-strong);color:var(--text);font-size:14px;box-shadow:0 12px 32px #00000080;animation:rise .2s ease-out}.video-note button{min-height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.video-note button:last-child:not(:first-of-type),.video-note span+button+button{background:transparent;color:var(--text-2);border:1px solid var(--line-strong)}.video-note:not(:has(button)){padding:10px 16px}.fs-toggle{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#100e13b8;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}.video-shell:hover .fs-toggle,.fs-toggle:focus-visible,.video-shell.is-fullscreen .fs-toggle{opacity:1}.video-shell.is-fullscreen:not(:hover) .fs-toggle{opacity:0}.fs-toggle:hover{background:#100e13e6;border-color:var(--accent)}.fs-caption{position:absolute;left:24px;bottom:72px;z-index:5;max-width:calc(100% - 48px);padding:10px 16px;border-radius:12px;background:#100e13cc;color:#fff;font-family:var(--font-display);font-size:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.video-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}.video-shell:-webkit-full-screen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}@media(hover:none){.fs-toggle{opacity:1}}@media(max-width:860px){.shell.typing{position:fixed;left:0;right:0;top:var(--typing-top, 0);height:var(--typing-height, 100dvh);z-index:40;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.shell.typing .topbar,.shell.typing .stage>:not(.watch-party),.shell.typing .watch-party>:not(.video-shell),.shell.typing .rail>:not(.messages):not(.composer){display:none!important}.shell.typing .video-shell{position:relative;top:0;flex:none;width:min(100%,calc(var(--typing-height, 100dvh) * .45 * 16 / 9));margin:0 auto;border:0;border-radius:0;box-shadow:none}.shell.typing .rail{flex:1 1 auto;min-height:0;height:auto;border-top:1px solid var(--line)}.shell.typing .rail>.messages{flex:1 1 auto;min-height:0;overflow-y:auto}.shell.typing .composer{padding:8px 12px 10px}.shell.typing .composer textarea{min-height:0}.shell.typing .composer-bottom{margin-top:6px}}.tip-ring{position:fixed;z-index:60;border-radius:14px;border:2px solid var(--accent);box-shadow:0 0 0 9999px #08070a80;pointer-events:none;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}.tip-bubble{position:fixed;z-index:61;padding:14px 16px 12px;border:1px solid rgba(255,79,163,.45);border-radius:14px;background:var(--surface-2);color:var(--text);box-shadow:0 18px 50px #0000008c;animation:rise .2s ease-out}.tip-bubble strong{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em}.tip-bubble p{margin:6px 0 12px;font-size:14px;line-height:1.5;color:var(--text-2)}.tip-count{margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.tip-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.tip-nav{display:flex;gap:8px}.tip-nav .btn{min-height:36px;padding:0 14px}.tip-skip{padding:0;border:0;background:none;color:var(--text-3);font-size:13px;text-decoration:underline;text-underline-offset:3px}.tip-skip:hover{color:var(--text)}.tip-arrow{position:absolute;left:var(--arrow-x, 50%);width:12px;height:12px;background:var(--surface-2);border:1px solid rgba(255,79,163,.45);transform:translate(-50%) rotate(45deg)}.tip-bubble[data-side=below] .tip-arrow{top:-7px;border-right:0;border-bottom:0}.tip-bubble[data-side=above] .tip-arrow{bottom:-7px;border-left:0;border-top:0}.tip-bubble[data-side=inside] .tip-arrow{display:none}.tips-btn{min-height:34px;padding:0 12px;font-size:13px}@media(max-width:480px){.tips-btn{padding:0 10px}}@media(prefers-reduced-motion:reduce){.tip-ring{transition:none}.tip-bubble{animation:none}}.audio-art{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 16px 56px;overflow:hidden;background:#000}.audio-art-bg{position:absolute;inset:-40px;background:radial-gradient(ellipse at 50% 40%,#2a2133 0,#000 75%) center / cover no-repeat;filter:blur(30px) brightness(.5)}.audio-art-cover{position:relative;height:min(60%,340px);aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 18px 50px #0009}.audio-art-title{position:relative;max-width:100%;font-family:var(--font-display);font-size:clamp(15px,2.4vw,22px);font-weight:600;color:#fff;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-shell.audio-mode video{z-index:1;background:transparent;object-position:-100000px -100000px}.audio-art-toggle{position:absolute;left:50%;top:calc(50% - 28px);z-index:4;width:68px;height:68px;display:grid;place-items:center;padding:0 0 0 3px;border:0;border-radius:50%;background:#ff4fa3f2;color:var(--accent-ink);box-shadow:0 10px 30px #0000008c;transform:translate(-50%,-50%);transition:opacity .2s,transform .15s}.audio-art-toggle.is-playing{padding-left:0;opacity:0}.video-shell:hover .audio-art-toggle.is-playing,.audio-art-toggle:focus-visible{opacity:1}@media(hover:none){.audio-art-toggle.is-playing{opacity:.85}}.audio-art-toggle:active{transform:translate(-50%,-50%) scale(.95)}.rq-votes{flex:none;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}.rq-vote{flex:none;min-height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font-size:13px;font-weight:600}.rq-vote:hover{background:var(--surface-3)}.rq-vote.voted{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.rq-handle{flex:none;width:28px;height:32px;margin-left:-6px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-3);font-size:13px;letter-spacing:-2px;cursor:grab;touch-action:none}.rq-handle:hover{color:var(--text);background:var(--surface-3)}.rq-item.dragging{position:relative;z-index:2;background:var(--surface-3);box-shadow:0 8px 24px #00000073}.rq-item.dragging .rq-handle{cursor:grabbing}.rq-item.drop-above{box-shadow:inset 0 2px 0 var(--accent)}.rq-item.drop-below{box-shadow:inset 0 -2px 0 var(--accent)}@media(pointer:coarse){.rq-handle{width:36px;height:40px;font-size:15px}}.popout-panel{position:absolute;inset:0;z-index:6;display:grid;place-content:center;gap:12px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 30%,var(--accent-soft),transparent 70%),var(--surface)}.popout-panel strong{font-family:var(--font-display);font-size:20px}.popout-panel p{margin:0 auto;max-width:46ch;color:var(--text-2);font-size:14px;line-height:1.5}.popout-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.popout-actions .btn{min-height:44px}.popout-count{font-family:var(--font-display);font-size:56px;font-weight:700;color:var(--accent)}.popout-btn{position:absolute;right:10px;top:10px;z-index:5;min-height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#100e13d1;color:var(--text);font-size:13px;font-weight:600}.popout-btn:hover{background:var(--surface-3)}.popout-offer{margin-right:6px}.pb-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;background:#000000b8}.pb-modal[hidden]{display:none}.pb-card{position:relative;width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line-strong);box-shadow:0 24px 64px #0009;overflow:hidden}.pb-card h3{margin:0;font-family:var(--font-display);font-size:20px}.pb-hint{margin:0;font-size:13px;color:var(--text-2);line-height:1.5}.pb-textarea{flex:1;min-height:180px;max-height:40vh;padding:10px 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:13px;line-height:1.6;resize:vertical;font-family:monospace}.pb-textarea:focus{outline:2px solid var(--accent);border-color:transparent}.pb-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pb-status{font-size:13px;color:var(--text-2);flex:1;min-width:0}.pb-actions{display:flex;gap:8px;flex-shrink:0}.pb-close{position:absolute;top:12px;right:14px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}.pb-close:hover{background:var(--surface-3);color:var(--text)}#buildPlaylistBtn{margin-top:6px;width:100%}.host-panel{border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.host-panel summary{cursor:pointer;padding:10px 12px;font-size:13px;font-weight:600;color:var(--accent);list-style:none;display:flex;align-items:center;justify-content:space-between}.host-panel summary::-webkit-details-marker{display:none}.host-panel summary:after{content:"▾";color:var(--text-3);transition:transform .15s}.host-panel[open] summary:after{transform:rotate(180deg)}.host-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 10px}.host-actions .btn{min-height:36px;font-size:13px;padding:0 10px}.switch{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-top:1px solid var(--line);cursor:pointer}.switch input{appearance:none;flex:none;width:34px;height:20px;min-height:0;margin:2px 0 0;padding:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;cursor:pointer;transition:background .15s}.switch input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:transform .15s,background .15s}.switch input:checked{background:var(--accent);border-color:var(--accent)}.switch input:checked:after{transform:translate(14px);background:var(--accent-ink)}.switch strong{display:block;font-size:13px;font-weight:600}.switch small{display:block;font-size:12px;color:var(--text-3);margin-top:1px}.kick-btn{margin-left:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-3);font-size:14px;line-height:1}.kick-btn:hover{background:#ff7a7a2e;color:#ff8f8f}.msg-del{margin-left:auto;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--text-3);font-size:15px;line-height:1;opacity:0;transition:opacity .15s}.message:hover .msg-del,.msg-del:focus-visible{opacity:1}.msg-del:hover{color:#ff8f8f;background:#ff7a7a24}.message-body{min-width:0}.room-notice{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#0a080ceb;text-align:center}.room-notice>div{display:grid;gap:18px;justify-items:center;max-width:420px}.room-notice h2{margin:0;font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em}.room-notice a{text-decoration:none;display:inline-flex;align-items:center}.promote-btn{margin-left:auto;padding:2px 8px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--text-2);font-size:11px;font-weight:600}.promote-btn:hover{border-color:var(--accent);color:var(--accent)}.person-btn{padding:1px 7px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--text-2);font-size:11px;font-weight:600}.person-btn:hover{border-color:var(--line-strong);color:var(--text)}.online-user .mute-btn{margin-left:auto}.online-user.is-muted>span:not(.user-dot){opacity:.5;text-decoration:line-through}.message.is-muted{display:none}@media(pointer:coarse),(max-width:700px){.online-users{max-height:176px;gap:8px}.online-user{min-height:36px}.person-btn,.promote-btn{min-height:28px;padding:4px 10px;font-size:12px}.kick-btn{width:28px;height:28px;font-size:16px}}.support-note{margin:0;padding:10px 12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--text-2)}.support-note a{color:#ff9eb5;font-weight:600;text-decoration:none}.support-note a:hover{text-decoration:underline}.away-banner{position:fixed;left:50%;bottom:20px;z-index:60;transform:translate(-50%);display:flex;align-items:center;gap:14px;max-width:min(560px,calc(100vw - 32px));padding:14px 16px;border:1px solid var(--accent);border-radius:14px;background:var(--surface);box-shadow:0 16px 40px #0000008c;font-size:14px;line-height:1.45}.away-banner .btn{flex:none;min-height:40px}.name-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:#0a080cdb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:rise .2s ease-out}.name-card{width:min(420px,100%);display:grid;gap:12px;padding:28px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);box-shadow:0 30px 80px #0009}.name-card .logo{width:56px;height:56px;margin-bottom:4px}.name-card h2{margin:0;font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.02em}.name-card p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}.name-card p strong{color:var(--accent);font-weight:600}.name-card .label{margin-top:6px}.name-card input{min-height:48px;font-size:16px}.name-card .btn{min-height:48px;font-size:15px;margin-top:4px}.name-card small{font-size:12px;line-height:1.45;color:var(--text-3)}.name-card .name-error{color:#ff8f8f;font-size:13px}.join-card{display:none}