@import "https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0908;--surface:#141210;--surface2:#1c1916;--border:#242018;--border2:#3a352e;--accent:#f0a500;--accent-dim:#f0a5001f;--text:#f2ede8;--muted:#7c766f;--danger:#e05252;--success:#4caf7d;--font-display:"Syne", sans-serif;--font-body:"Inter", sans-serif;--radius:8px;--radius-lg:12px}html,body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6}input,textarea,select{font-family:var(--font-body);color:var(--text);background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius);outline:none;width:100%;padding:10px 12px;font-size:14px;transition:border-color .15s}input::placeholder{color:var(--muted)}input:focus{border-color:var(--accent)}button{font-family:var(--font-display);letter-spacing:.02em;border-radius:var(--radius);cursor:pointer;border:none;padding:11px 20px;font-size:14px;font-weight:700;transition:opacity .15s,transform .1s}button:active{transform:scale(.98)}.btn-primary{background:var(--accent);color:var(--bg)}.btn-primary:hover{opacity:.9}.btn-secondary{border:.5px solid var(--border2);color:var(--text);background:0 0}.btn-secondary:hover{border-color:var(--muted)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.room-shell{--kb-inset:0px;min-height:100dvh;height:calc(100dvh + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0px);background:var(--bg);max-width:100%;color:var(--text);flex-direction:column;display:flex;position:relative;overflow:hidden}.room-header{border-bottom:.5px solid var(--border);flex:0 0 44px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;min-width:0;height:44px;padding:0 4px;display:grid}.room-icon-btn{width:auto;min-width:44px;height:44px;min-height:44px;color:var(--text);letter-spacing:.02em;border-radius:var(--radius);background:0 0;border:none;padding:0 10px;font-size:13px}.room-title{font-family:var(--font-display);letter-spacing:.02em;text-align:center;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:15px;font-weight:700;overflow:hidden}.room-disconnect{top:env(safe-area-inset-top,0px);z-index:20;background:var(--accent);color:var(--bg);text-align:center;font-size:13px;font-family:var(--font-display);letter-spacing:.04em;padding:8px 16px;font-weight:700;position:absolute;left:0;right:0}.room-stage{flex:1;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.room-player{z-index:4;grid-area:1/1;width:100%;max-width:100%;position:sticky;top:0}.room-player-frame{background:#000;width:100%;padding-bottom:56.25%;position:relative;overflow:hidden}@media (orientation:portrait){.room-player{max-height:40vh}.room-player-frame{padding-bottom:min(56.25%,40vh)}}.room-player-inner{position:absolute;inset:0}.room-player-overlay{z-index:2;text-align:center;background:#0a0908c7;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex;position:absolute;inset:0}.room-player-overlay h2{font-family:var(--font-display);color:var(--text);margin:0;font-size:16px;font-weight:700}.room-player-overlay p{max-width:280px;color:var(--muted);margin:0;font-size:13px;line-height:1.5}.room-player-overlay .room-mismatch-title{color:var(--danger)}.room-load-cta,.room-tap-cta,.room-choose-file{max-width:100%;min-height:48px;padding:12px 18px}.room-file-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.room-format-warn{color:var(--accent);margin:0;font-size:12px;line-height:1.45}.room-meta{grid-area:2/1;min-width:0;padding:12px 16px 72px;overflow:auto}.watch-beside-wrap,.room-guest-voice-hint,.room-host-strip{width:calc(100% + 32px);margin:-12px -16px 12px}.room-chat-sheet{z-index:3;min-height:0;height:calc(56px + env(safe-area-inset-bottom,0px));max-height:calc(56px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:.5px solid var(--border);border-radius:16px 16px 0 0;flex-direction:column;grid-area:2/1;align-self:end;width:100%;min-width:0;max-width:100%;display:flex;overflow:hidden}.room-chat-sheet.open{align-self:stretch;height:auto;max-height:100%}.room-chat-peek{border:none;border-bottom:.5px solid var(--border);width:100%;height:56px;min-height:56px;color:var(--muted);font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;text-align:left;background:0 0;border-radius:0;flex:0 0 56px;padding:0 16px;font-size:11px;font-weight:700}.room-chat-sheet input,.room-chat-sheet textarea{font-size:16px}.room-chat-send{flex-shrink:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:0}.chat-input-row{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px) + var(--kb-inset,0px));border-top:.5px solid var(--border);align-items:center;gap:8px;display:flex}.room-popup{bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--surface2);border:.5px solid var(--border2);border-radius:var(--radius-lg);white-space:nowrap;z-index:100;padding:12px 20px;font-size:14px;position:fixed;left:50%;transform:translate(-50%)}.watch-beside-wrap{max-height:40dvh;padding:14px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-bottom:.5px solid var(--border);z-index:5;flex-direction:column;flex-shrink:0;gap:12px;margin:0;display:flex;position:relative;overflow-y:auto}.watch-beside-copy{color:var(--text);margin:0;padding-right:36px;font-size:16px;line-height:1.45}.watch-beside-dismiss{width:44px;min-width:44px;height:44px;min-height:44px;color:var(--muted);border-radius:var(--radius);background:0 0;border:none;padding:0;font-size:24px;line-height:1;position:absolute;top:6px;right:4px}.watch-beside-cta{width:100%;min-height:48px;font-size:15px}.watch-beside-never{min-height:44px;color:var(--muted);font-family:var(--font-body);letter-spacing:0;text-transform:none;background:0 0;border:none;align-self:center;padding:8px 12px;font-size:13px;font-weight:400}.watch-beside-scrim{z-index:4;background:#0a090859;position:absolute;inset:0}.room-guest-voice-hint{background:var(--accent-dim);border-bottom:.5px solid #f0a50040;flex-shrink:0;align-items:center;gap:8px;margin:0;padding:10px 12px 10px 16px;display:flex}.room-guest-voice-text{min-width:0;color:var(--text);flex:1;font-size:14px;line-height:1.4}.room-guest-voice-dismiss{width:44px;min-width:44px;height:44px;min-height:44px;color:var(--muted);border-radius:var(--radius);background:0 0;border:none;flex-shrink:0;padding:0;font-size:22px;line-height:1}.room-host-strip{background:var(--surface);border-bottom:.5px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:10px 16px;display:flex}.room-sync-bar{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.room-snap-btn{letter-spacing:.02em;text-transform:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-width:44px;min-height:44px;padding:8px 14px;font-size:13px;line-height:1.2;display:flex}.room-snap-label{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;font-size:13px;font-weight:700}.room-snap-sub{font-family:var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted);font-size:11px;font-weight:400}.room-chat-sheet.explainer-open{visibility:hidden;pointer-events:none}.room-meta.explainer-scrim{position:relative}.room-waiting-chip{min-height:44px;color:var(--accent);background:var(--accent-dim);border:.5px solid #f0a50059;border-radius:20px;align-items:center;padding:8px 14px;font-size:13px;font-weight:500;display:inline-flex}.room-viewer-chip{color:var(--text);background:var(--surface);border:.5px solid var(--border2);border-radius:20px;align-items:center;gap:8px;padding:5px 14px;font-size:13px;display:inline-flex}.room-lag-badge{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700;line-height:1.2}.room-lag-badge.ok{color:var(--success);background:#4caf7d26}.room-lag-badge.warn{color:var(--accent);background:var(--accent-dim)}.room-lag-badge.muted{color:var(--muted);background:#7c766f26}@media (min-width:800px){.room-stage{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 300px}.room-player{grid-area:1/1;max-height:none;position:relative}.room-player-frame{padding-bottom:56.25%}.room-meta{grid-area:2/1;padding-bottom:16px}.room-chat-sheet,.room-chat-sheet.open{border-top:none;border-left:.5px solid var(--border);border-radius:0;flex-shrink:0;grid-area:1/2/-1;align-self:stretch;width:300px;height:auto;max-height:none}}