:root{--cream:#f6f7eb;--red:#e94f37;--red-dark:#d43e27;--dark:#393e41;--card:#fff;--border:#e3e4d9;--muted:#6c7276;--stage:#393e41;--btn-alt:#393e41;--sans:system-ui, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--cream:#1f2224;--dark:#f6f7eb;--card:#2a2e31;--border:#3a4045;--muted:#9aa0a4;--stage:#16181a;--btn-alt:#4a5155;--red-dark:#ff6b54}body{background:var(--cream);color:var(--dark);-webkit-font-smoothing:antialiased;margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3{color:var(--dark)}.site-header{box-sizing:border-box;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:48px;width:100%;max-width:1400px;margin:0 auto;padding:16px 32px;display:flex}.header-logo{width:auto;height:96px;display:block}.header-user{align-items:center;gap:12px;display:flex}.theme-toggle{border:1px solid var(--border);color:var(--dark);background:0 0;padding:10px 14px;font-size:18px;line-height:1}.theme-toggle:hover{border-color:var(--red);box-shadow:none;background:0 0}.header-user label{color:var(--muted);font-size:14px}.site-footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);margin-top:auto;padding:24px 20px 32px;font-size:13px}.landing{box-sizing:border-box;flex-direction:column;align-items:center;gap:40px;width:100%;max-width:760px;margin:0 auto;padding:24px 20px;display:flex}.stats-row{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.stat-card{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:12px;min-width:150px;padding:18px 28px;box-shadow:0 1px 3px #393e4114}.stat-value{color:var(--red);font-size:32px;font-weight:700;line-height:1.1}.stat-label{color:var(--muted);margin-top:4px;font-size:13px}.landing-actions{flex-direction:column;gap:12px;width:100%;max-width:420px;display:flex}.join-row{gap:8px;display:flex}.join-row input{flex:1;width:auto}.join-error{color:var(--red);text-align:center;margin:4px 0 0;font-size:15px}input{border:1px solid var(--border);background:var(--card);color:var(--dark);box-sizing:border-box;border-radius:8px;outline:none;width:220px;padding:12px 16px;font-size:16px}input:focus{border-color:var(--red)}button{background:var(--red);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;transition:background .15s,box-shadow .15s,transform 50ms}button:hover{background:var(--red-dark);box-shadow:0 2px 8px #e94f3759}button:active{transform:translateY(1px)}.btn-secondary{background:var(--btn-alt)}.btn-secondary:hover{background:var(--btn-alt);filter:brightness(1.15);box-shadow:0 2px 8px #0000004d}.roomview{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:0 20px 24px}.room-subheader{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:4px 0 12px;display:flex}.room-title{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.room-title h1{margin:0;font-size:26px}.roomcode{border:1px dashed var(--muted);color:var(--dark);cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;font-family:ui-monospace,monospace;font-size:15px;font-weight:400}.roomcode:hover{border-color:var(--red);color:var(--red);box-shadow:none;background:0 0}.leave-btn{border:1px solid var(--red);color:var(--red);background:0 0}.leave-btn:hover{background:var(--red);color:#fff}.room-members{color:var(--muted);padding-bottom:8px;font-size:14px}.watch-grid{grid-template-columns:3fr 1fr;align-items:start;gap:20px;display:grid}@media (width<=900px){.watch-grid{grid-template-columns:1fr}}.video-col{min-width:0}.video-controls{gap:8px;margin-bottom:12px;display:flex}.video-controls input{flex:1;width:auto}.btn-youtube{background:var(--btn-alt);flex-shrink:0;padding:12px 14px;font-size:15px;line-height:1}.video-stage{width:100%}.player-wrap{aspect-ratio:16/9;background:var(--stage);border-radius:12px;width:100%;position:relative}.player-wrap .click-catcher{z-index:10;cursor:pointer;background:0 0;position:absolute;inset:0}.player-wrap{overflow:hidden}.video-remove{margin-top:10px;padding:8px 16px;font-size:14px}.player-stack{width:100%}.player-stack:fullscreen{background:#000;flex-direction:column;justify-content:flex-end;display:flex;position:relative}.player-stack:fullscreen .player-wrap{aspect-ratio:auto;border-radius:0;flex:1;width:100%;height:100%}.player-stack:fullscreen .custom-controls{z-index:20;background:linear-gradient(#0000,#000000d9);margin-top:0;padding:24px 16px 12px;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.player-stack:fullscreen .custom-controls.idle{opacity:0;pointer-events:none}.custom-controls{flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;display:flex}.custom-controls button{background:var(--dark);color:var(--cream);flex-shrink:0;padding:8px 14px;font-size:15px}.custom-controls button:hover{background:var(--red);box-shadow:none}.btn-remove{border:1px solid var(--red);color:var(--red);background:0 0}.btn-remove:hover{background:var(--red);color:#fff}.seek-bar{min-width:120px;accent-color:var(--red);cursor:pointer;flex:1;padding:0}.volume-bar{width:80px;accent-color:var(--red);cursor:pointer;flex-shrink:0;padding:0}.position-indicator{color:var(--muted);margin-left:4px;font-family:ui-monospace,monospace;font-size:14px}.quality-badge{color:var(--muted);border:1px solid var(--border);border-radius:4px;flex-shrink:0;margin-left:4px;padding:2px 6px;font-family:ui-monospace,monospace;font-size:12px}.idle-screen{aspect-ratio:16/9;background:var(--stage);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.idle-muffin{opacity:.9;filter:drop-shadow(0 6px 18px #00000059);width:140px;height:auto}.idle-title{color:#fff;font-size:20px;font-weight:600}.idle-sub{color:#b9bec1;opacity:.85;font-size:14px}.chat{flex-direction:column;width:100%;margin:0;display:flex}.panel-title{margin:0 0 8px;font-size:16px}.chat-messages{text-align:left;background:var(--card);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:6px;height:320px;padding:12px;display:flex;overflow-y:auto}.chat-msg{word-break:break-word;margin:0;font-size:15px}.chat-msg.own{color:var(--red)}.chat-input-row{gap:8px;margin-top:8px;display:flex;position:relative}.chat-input-row input{flex:1;width:auto}.chat-input-row button{padding:12px 18px}.emoji-toggle{background:var(--card);border:1px solid var(--border);color:var(--dark);padding:12px 14px;font-size:20px}.emoji-toggle:hover{background:var(--card);border-color:var(--red);box-shadow:none}.emoji-picker{background:var(--card);border:1px solid var(--border);z-index:10;border-radius:8px;flex-wrap:wrap;gap:4px;padding:8px;display:flex;position:absolute;bottom:110%;left:0;box-shadow:0 4px 12px #393e4126}.emoji-btn{background:0 0;border:none;padding:4px;font-size:22px}.emoji-btn:hover{background:var(--cream);box-shadow:none}.soundboard{margin-top:16px}.soundboard-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;display:grid}.sound-btn{background:var(--card);color:var(--dark);border:1px solid var(--border);border-radius:2px;padding:12px 10px;font-size:13px}.sound-btn:hover{background:var(--card);border-color:var(--red);color:var(--red);box-shadow:none}.landing{flex:1}.header-user input{width:160px}.header-user label{white-space:nowrap}