:root{--cinema-black:#050507;--deep-surface:#101116;--soft-surface:#1b1d24;--electric-purple:#7c3aed;--cyan-accent:#06b6d4;--reel-gold:#f59e0b;--success-green:#22c55e;--warning-yellow:#eab308;--error-red:#ef4444;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-subtle:#ffffff0f;--border-glow:#7c3aed4d;--glass-bg:#1b1d24a6;--glass-border:#ffffff14;--gradient-primary:linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);--gradient-warm:linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);--gradient-glow:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), #7c3aed14, transparent 40%);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}.top-bar{z-index:100;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);background:#101116cc;justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.top-bar-left{align-items:center;gap:10px;display:flex}.top-bar-logo{object-fit:cover;border-radius:8px;width:32px;height:32px}.top-bar-brand{color:var(--text-primary);font-size:1rem;font-weight:700}.top-bar-center{align-items:center;gap:6px;display:flex}.top-bar-name{color:var(--text-secondary);font-size:.9rem}.top-bar-name-input{border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);background:0 0;outline:none;width:140px;padding:4px 8px;font-family:inherit;font-size:.9rem}.top-bar-name-input:focus{border-color:var(--electric-purple)}.phone-name-input{border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);text-align:center;background:0 0;outline:none;width:120px;padding:4px 8px;font-family:inherit;font-size:.85rem}.phone-name-input:focus{border-color:var(--electric-purple)}.top-bar-name-edit{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;transition:color .2s;display:flex}.top-bar-name-edit:hover{color:var(--text-primary)}.top-bar-right{align-items:center;display:flex}.top-bar-android{color:#3ddc84;background:#3ddc841a;border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}.top-bar-android:hover{background:#3ddc8433;transform:scale(1.03)}.home-desktop{flex-direction:column;justify-content:center;align-items:center;gap:40px;min-height:calc(100vh - 56px);padding:40px 24px;display:flex}.home-hero{text-align:center;max-width:600px;animation:fadeInUp .4s var(--ease-smooth);position:relative}.home-hero:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle,#7c3aed1f 0%,#0000 65%);width:140%;height:140%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.home-hero-title{letter-spacing:-.02em;margin-bottom:12px;font-size:2.75rem;font-weight:800;line-height:1.15}.home-hero-subtitle{color:var(--text-secondary);font-size:1rem;line-height:1.5}.text-gradient{background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-gradient-animated{background:linear-gradient(90deg,#7c3aed,#06b6d4,#ec4899,#7c3aed) 0 0/300%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:4s linear infinite textShimmer}@keyframes textShimmer{to{background-position:300%}}.home-ambient-bg{z-index:-1;pointer-events:none;background:radial-gradient(circle,#7c3aed1f 0%,#06b6d414 30%,#0000 60%);border-radius:50%;width:80vw;max-width:800px;height:80vw;max-height:800px;animation:15s ease-in-out infinite alternate floatAmbientHome;position:absolute;top:-20vh;left:50%;transform:translate(-50%)}@keyframes floatAmbientHome{0%{transform:translate(-50%)translateY(0)scale(1)}to{transform:translate(-40%)translateY(40px)scale(1.1)}}.stagger-5{animation-delay:.25s!important}.home-action-grid{z-index:1;gap:80px;width:100%;max-width:400px;display:flex;position:relative}.home-action-card{aspect-ratio:1;-webkit-backdrop-filter:blur(24px);cursor:pointer;background:#14161c99;border:1px solid #ffffff14;border-bottom-color:#ffffff08;border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:24px 20px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;display:flex;box-shadow:inset 0 1px #ffffff14,0 8px 32px #0000004d}.home-action-card:hover{border-color:#7c3aed66;transform:translateY(-8px)scale(1.02);box-shadow:inset 0 1px #ffffff26,0 20px 48px #0006,0 0 32px #7c3aed26}.home-action-card-primary{background:linear-gradient(135deg,#7c3aed26,#06b6d414),#14161cb3}.home-action-icon{color:#fff;border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.home-action-icon-purple{background:var(--gradient-primary);box-shadow:0 14px 30px #7c3aed3d}.home-action-icon-cyan{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 14px 30px #06b6d43d}.home-action-copy{text-align:center;flex-direction:column;gap:4px;display:flex}.home-action-copy strong{color:var(--text-primary);font-size:1.1rem;font-weight:700}.home-action-copy small{color:var(--text-secondary);font-size:.85rem}.home-local-play{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 16px;font-family:inherit;font-size:.85rem;transition:color .2s,background .2s}.home-local-play:hover{color:var(--cyan-accent);background:#06b6d40f}.home-phone{flex-direction:column;min-height:100vh;padding:0 24px;display:none}.home-phone-header{flex-direction:column;align-items:center;gap:8px;padding-top:40px;display:flex}.home-phone-logo{object-fit:cover;border-radius:12px;width:44px;height:44px}.home-phone-brand{color:var(--text-primary);font-size:1.1rem;font-weight:700}.home-phone-name-row{align-items:center;gap:6px;display:flex}.home-phone-name{color:var(--text-secondary);font-size:.85rem}.home-phone-name-edit{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:2px;transition:color .2s;display:flex}.home-phone-name-edit:hover{color:var(--text-primary)}.home-hero-phone{text-align:center;animation:fadeInUp .4s var(--ease-smooth);padding:30px 0;position:relative}.home-hero-title-phone{letter-spacing:-.01em;margin-bottom:8px;font-size:2rem;font-weight:800;line-height:1.2}.home-hero-subtitle-phone{color:var(--text-secondary);font-size:.9rem;line-height:1.4}.home-phone-actions{flex-direction:column;flex:1;justify-content:center;gap:16px;padding-bottom:40px;display:flex}.home-phone-btn{border-radius:var(--radius-xl);cursor:pointer;justify-content:center;align-items:center;gap:12px;width:100%;height:64px;font-size:1.1rem;font-weight:700;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;display:flex}.home-phone-btn:active{transform:scale(.96)}.home-phone-btn-primary{color:#fff;text-shadow:0 1px 2px #0000004d;background:linear-gradient(135deg,#7c3aed,#9d4edd,#06b6d4,#7c3aed) 0 0/300% 300%;border:1px solid #fff3;animation:6s infinite bgGradientFlow;box-shadow:0 12px 28px #7c3aed59,inset 0 1px #ffffff4d}.home-phone-btn-secondary{-webkit-backdrop-filter:blur(24px);color:var(--text-primary);background:#14161c99;border:1px solid #ffffff1a;border-bottom-color:#ffffff0d;box-shadow:inset 0 1px #ffffff1a,0 8px 24px #0003}.home-phone-btn-secondary:hover{background:#06b6d40f;border-color:#06b6d466}.home-footer{flex-direction:column;align-items:center;gap:6px;padding:32px 0 24px;display:flex}.home-version-chip{color:#fff;background:linear-gradient(135deg,#7c3aed40,#06b6d426);border-radius:20px;padding:6px 16px;font-size:.85rem;font-weight:600;display:inline-flex}.home-attribution{color:var(--text-muted);opacity:.5;font-size:.78rem}.home-phone-footer{flex-direction:column;align-items:center;gap:12px;padding-bottom:40px;display:flex}.home-phone-local{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:8px;font-family:inherit;font-size:.82rem}.home-phone-local:hover{color:var(--cyan-accent)}.home-phone-android{color:#3ddc84;background:#3ddc841a;border-radius:999px;padding:8px 16px;font-size:.78rem;font-weight:600;text-decoration:none}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--cinema-black);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden}body{background:var(--cinema-black);background-image:var(--gradient-glow);background-attachment:fixed}#app{min-height:100vh}h1,h2,h3{letter-spacing:-.02em;font-weight:700}h1{font-size:2.5rem;line-height:1.2}h2{font-size:1.75rem;line-height:1.3}h3{font-size:1.25rem;line-height:1.4}.screen-container{max-width:520px;animation:fadeInUp .4s var(--ease-smooth);margin:0 auto;padding:24px 20px 40px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.screen-header{align-items:center;gap:12px;margin-bottom:24px;display:flex}.screen-title{font-size:1.5rem}.screen-header-text{flex-direction:column;display:flex}.screen-subtitle{color:var(--text-secondary);margin-top:2px;font-size:.85rem}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:border-color .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);padding:24px}.glass-card:hover{border-color:var(--border-glow);box-shadow:0 0 30px #7c3aed0f}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all .25s var(--ease-smooth);border:none;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 28px;font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-gradient{color:#fff;text-shadow:0 1px 2px #0000004d;background:linear-gradient(135deg,#7c3aed,#9d4edd,#06b6d4,#7c3aed) 0 0/300% 300%;border:1px solid #fff3;animation:6s infinite bgGradientFlow;box-shadow:0 8px 24px #7c3aed66,inset 0 1px #ffffff4d}.btn-gradient:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px #7c3aed80,inset 0 1px #fff6}.btn-gradient:active:not(:disabled){transform:translateY(0)}@keyframes bgGradientFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.btn-outline{color:var(--text-primary);border:1px solid var(--glass-border);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--electric-purple);background:#7c3aed14}.btn-danger{background:var(--error-red);color:#fff}.btn-danger:hover{background:#dc2626}.btn-icon{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;transition:color .2s,background .2s;display:flex}.btn-icon:hover{color:var(--text-primary);background:#ffffff0f}.input-label{color:var(--text-secondary);margin-bottom:8px;font-size:.85rem;font-weight:500;display:block}.input-field{border:1px solid var(--glass-border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);background:#ffffff0a;outline:none;padding:14px 16px;font-family:inherit;font-size:1rem;transition:border-color .25s,box-shadow .25s}.input-field:focus{border-color:var(--electric-purple);box-shadow:0 0 0 3px #7c3aed26}.input-field::placeholder{color:var(--text-muted)}.input-error{border-color:var(--error-red)!important;box-shadow:0 0 0 3px #ef444426!important}.recent-room-card{flex-direction:column;gap:18px;display:flex;position:relative;overflow:hidden}.recent-room-card:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#7c3aedb3,#06b6d42e,#0000);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.recent-room-copy h3{text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 32px);margin-top:6px;overflow:hidden}.recent-room-copy p:last-child{color:var(--text-muted);margin-top:4px;font-size:.82rem}.recent-room-dismiss{border:1px solid var(--glass-border);width:30px;height:30px;color:var(--text-secondary);cursor:pointer;background:#ffffff0a;border-radius:50%;font-size:1.1rem;line-height:1;position:absolute;top:12px;right:12px}.recent-room-dismiss:hover{color:var(--text-primary);border-color:var(--border-glow)}.recent-room-footer{justify-content:space-between;align-items:center;gap:12px;display:flex}.recent-room-code{gap:6px;display:flex}.recent-room-code span{border:1px solid var(--border-subtle);color:#fff;letter-spacing:.04em;background:#ffffff0f;border-radius:10px;place-items:center;width:28px;height:34px;font-weight:800;display:grid}.recent-room-rejoin{min-height:40px;padding-inline:18px}.home-features{flex-direction:column;gap:16px;display:flex}.feature-item{border-radius:var(--radius-md);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);align-items:center;gap:16px;padding:16px 20px;transition:transform .3s,border-color .3s,box-shadow .3s;display:flex}.feature-item:hover{border-color:var(--border-glow);transform:translate(4px);box-shadow:0 8px 24px #7c3aed1a}.feature-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.feature-icon-purple{color:var(--electric-purple);background:#7c3aed26}.feature-icon-cyan{color:var(--cyan-accent);background:#06b6d426}.feature-icon-gold{color:var(--reel-gold);background:#f59e0b26}.feature-title{color:var(--text-primary);margin-bottom:2px;font-size:.95rem;font-weight:700}.feature-desc{color:var(--text-muted);font-size:.8rem;line-height:1.4}.file-picker-card{text-align:center;padding:40px 24px}.file-picker-icon{color:var(--text-muted);margin-bottom:16px}.file-picker-title{margin-bottom:8px;font-size:1.2rem}.file-picker-desc{color:var(--text-muted);margin-bottom:24px;font-size:.85rem}.selected-file-info{color:var(--success-green);justify-content:center;align-items:center;gap:8px;margin-top:16px;font-size:.85rem;display:flex}.hashing-animation{text-align:center;padding:20px 0}.hash-spinner{border:3px solid var(--glass-border);border-top-color:var(--electric-purple);border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hashing-text{color:var(--text-secondary);margin-bottom:16px;font-size:.9rem}.hash-progress-bar{background:var(--glass-border);border-radius:2px;height:4px;overflow:hidden}.hash-progress-fill{background:var(--gradient-primary);border-radius:2px;width:0%;height:100%;transition:width .3s}.error-card{text-align:center;padding:20px}.error-text{color:var(--error-red);margin-bottom:12px;font-size:.9rem}.error-desc{color:var(--text-muted);font-size:.8rem}.join-card{margin-top:8px}.room-code-input{text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:1.5rem!important;font-weight:700!important}.join-file-section{margin-top:24px}.join-file-desc{color:var(--text-muted);margin-bottom:12px;font-size:.8rem}.join-btn{margin-top:24px}.room-code-display{text-align:center;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--radius-xl);background:linear-gradient(145deg,#191b22cc,#0c0d12f2);border:1px solid #ffffff1a;border-bottom-color:#ffffff08;margin-bottom:16px;padding:30px 20px;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000080,0 0 24px #7c3aed26,inset 0 1px #ffffff26}.room-code-display:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 100% 0,#7c3aed26,#0000 50%),radial-gradient(circle at 0 100%,#06b6d41a,#0000 50%);position:absolute;inset:0}.room-code-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:.8rem;display:block}.room-code-value{justify-content:center;gap:8px;margin-bottom:12px;display:flex}.room-code-char{border-radius:var(--radius-md);color:#fff;text-shadow:0 0 12px #fff6;letter-spacing:0;z-index:1;background:linear-gradient(#ffffff14,#ffffff03);border:1px solid #ffffff26;border-bottom-color:#ffffff0d;justify-content:center;align-items:center;width:48px;height:56px;font-size:1.6rem;font-weight:800;display:flex;position:relative;box-shadow:inset 0 2px 4px #ffffff0d,0 8px 16px #0000004d}.room-code-copy-btn{border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.8rem;transition:all .2s;display:inline-flex}.room-code-copy-btn:hover{border-color:var(--electric-purple);color:var(--electric-purple)}.lobby-screen{max-width:640px;padding-bottom:120px;position:relative}.lobby-section{animation:fadeInUp .48s var(--ease-smooth) both}.stagger-1{animation-delay:40ms}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.16s}.stagger-4{animation-delay:.22s}.lobby-section+.lobby-section{margin-top:18px}.lobby-participants-card{background:#14161c99;border:1px solid #ffffff0f;flex-direction:column;flex:1;margin-bottom:0;padding:24px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,0 8px 24px #0003}.lobby-participants-card:before{content:"";pointer-events:none;background:radial-gradient(circle at 0 0,#7c3aed0d,#0000 70%);position:absolute;inset:0}.participants-header{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.participants-title{color:var(--text-primary);margin-bottom:0;font-size:1.05rem}.participants-list{flex-direction:column;flex:1;gap:10px;padding-right:2px;display:flex;overflow-y:auto}.participant-item{border-radius:var(--radius-md);transition:transform .22s var(--ease-smooth), border-color .22s var(--ease-smooth), background .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth);background:#ffffff08;border:1px solid #ffffff08;align-items:center;gap:14px;padding:14px 16px;display:flex;box-shadow:inset 0 1px #ffffff05}.participant-item:hover{background:#ffffff0d;border-color:#ffffff14;transform:translate(4px);box-shadow:inset 0 1px #ffffff0d,0 8px 16px #00000026}.participant-avatar{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:relative}.avatar-letter{color:#fff;font-size:1rem;font-weight:700}.avatar-status{border:2px solid var(--deep-surface);border-radius:50%;width:12px;height:12px;position:absolute;bottom:0;right:0}.avatar-online{background:var(--success-green)}.avatar-offline{background:var(--text-muted)}.participant-info{flex-direction:column;gap:2px;display:flex}.participant-name{font-size:.95rem;font-weight:600}.participant-status{font-size:.75rem;font-weight:500}.status-host{color:var(--reel-gold)}.status-verified{color:var(--success-green)}.status-waiting{color:var(--text-muted)}.lobby-action{margin-bottom:0;padding:4px 0 8px}.lobby-action .btn{width:100%}.waiting-host{color:var(--text-secondary);justify-content:center;align-items:center;gap:10px;padding:16px;animation:1.8s ease-in-out infinite waitingPulse;display:flex}@keyframes waitingPulse{0%,to{opacity:.45}50%{opacity:1}}.loading-pulse{text-align:center;color:var(--text-muted);padding:20px;font-size:.85rem;animation:1.8s ease-in-out infinite waitingPulse}.participants-chat-btn{background:var(--gradient-primary);color:#fff;cursor:pointer;width:36px;height:36px;transition:transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative}.participants-chat-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #7c3aed4d}.participants-chat-btn.has-unread{animation:1.7s ease-in-out infinite chatPulseSmall}@keyframes chatPulseSmall{0%,to{box-shadow:0 4px 12px #7c3aed4d}50%{box-shadow:0 4px 16px #ef44444d,0 0 0 4px #ef44441a}}.participants-chat-btn .unread-badge{border:2px solid var(--glass-bg);background:var(--error-red);color:#fff;border-radius:9px;place-items:center;min-width:18px;height:18px;padding:0 4px;font-size:.65rem;font-weight:800;display:grid;position:absolute;top:-4px;right:-4px}.lobby-chat-overlay{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);z-index:34;transform-origin:100% 100%;width:min(420px,100vw - 32px);height:min(420px,100vh - 150px);transition:opacity .24s var(--ease-smooth), transform .24s var(--ease-smooth), visibility .24s;position:fixed;bottom:96px;right:max(22px,50vw - 300px);overflow:hidden;box-shadow:0 24px 70px #00000059,0 0 38px #7c3aed1f}.lobby-chat-overlay.open{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.lobby-chat-overlay.closed{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px)scale(.96)}.chat-container{flex-direction:column;height:100%;display:flex}.chat-header{border-bottom:1px solid var(--border-subtle);background:#ffffff0a;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.chat-header-title{font-size:.9rem;font-weight:600}.chat-close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;display:flex}.chat-close-btn:hover{color:var(--text-primary);background:#ffffff0f}.chat-messages{flex-direction:column;flex:1;gap:10px;padding:12px;display:flex;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:0 0}.chat-messages::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:2px}.chat-empty{text-align:center;color:var(--text-muted);padding:20px;font-size:.8rem}.chat-bubble-row{display:flex}.chat-bubble-right{justify-content:flex-end}.chat-bubble-left{justify-content:flex-start}.chat-bubble{word-break:break-word;border-radius:16px;max-width:80%;padding:8px 12px;font-size:.85rem;line-height:1.4}.chat-bubble-mine{background:var(--electric-purple);color:#fff;border-bottom-right-radius:4px}.chat-bubble-other{background:var(--soft-surface);color:var(--text-primary);border-bottom-left-radius:4px}.chat-sender{color:var(--cyan-accent);margin-bottom:2px;font-size:.72rem;font-weight:700;display:block}.chat-text{display:block}.chat-input-row{border-top:1px solid var(--border-subtle);background:#ffffff0a;align-items:center;gap:8px;padding:10px 12px;display:flex}.chat-input{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffff0a;border-radius:24px;outline:none;flex:1;padding:10px 14px;font-family:inherit;font-size:.85rem;transition:border-color .2s}.chat-input:focus{border-color:var(--electric-purple)}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{background:var(--electric-purple);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,transform .2s;display:flex}.chat-send-btn:hover{background:#6d28d9;transform:scale(1.05)}.watch-screen{z-index:1000;background:#000;position:fixed;inset:0}.watch-screen video{object-fit:contain;background:#000;width:100%;height:100%}.watch-overlay{z-index:10;flex-direction:column;justify-content:space-between;transition:opacity .3s;display:flex;position:absolute;inset:0}.watch-screen.idle{cursor:none}.watch-screen.idle .watch-overlay,.watch-overlay.hidden{opacity:0;pointer-events:none}.watch-top-bar{background:linear-gradient(#0009 0%,#0000 100%);justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.watch-top-left{align-items:center;gap:12px;display:flex}.watch-top-right{align-items:center;gap:8px;display:flex}.sync-chip{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:.8rem;font-weight:500;display:flex}.sync-dot{border-radius:50%;width:8px;height:8px}.sync-dot.synced{background:var(--success-green);box-shadow:0 0 6px var(--success-green)}.sync-dot.correcting{background:var(--warning-yellow);box-shadow:0 0 6px var(--warning-yellow)}.sync-dot.reconnecting{background:var(--error-red);box-shadow:0 0 6px var(--error-red)}.controls-toggle-chip{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-family:inherit;font-size:.8rem;font-weight:500;transition:background .2s;display:flex}.controls-toggle-chip:hover{background:#ffffff2e}.btn-icon-watch{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background .2s;display:flex;position:relative}.btn-icon-watch:hover{background:#ffffff1f}.voice-mic-btn svg{stroke:#fff}.voice-mic-btn.voice-connected svg{stroke:var(--error-red)}.voice-mic-btn.voice-connecting svg{stroke:var(--success-green);animation:1s ease-in-out infinite mic-blink}@keyframes mic-blink{0%,to{opacity:1}50%{opacity:.3}}.watch-toast{z-index:40;color:#fff;opacity:0;pointer-events:none;background:#000000c7;border:1px solid #ffffff26;border-radius:8px;padding:10px 16px;transition:opacity .2s,transform .2s;position:absolute;top:76px;left:50%;transform:translate(-50%,-8px)}.watch-toast.visible{opacity:1;transform:translate(-50%)}.chat-badge{background:var(--error-red);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:.6rem;font-weight:700;display:flex;position:absolute;top:2px;right:2px}.video-unread-dot{background:var(--error-red);z-index:15;pointer-events:none;border-radius:50%;width:12px;height:12px;position:absolute;top:32px;right:32px;box-shadow:0 0 8px #ef444499}.watch-center{flex:1;justify-content:center;align-items:center;display:flex}.center-play-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;width:80px;height:80px;transition:transform .2s var(--ease-spring), background .2s;background:#00000073;border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;display:flex}.center-play-btn:hover{background:#0009;transform:scale(1.1)}.watch-bottom-bar{background:linear-gradient(#0000 0%,#000000b3 100%);align-items:center;gap:12px;padding:14px 20px;display:flex}.seek-bar-container{flex:1;align-items:center;height:20px;display:flex;position:relative}.seek-bar{appearance:none;cursor:pointer;z-index:2;background:#fff3;border-radius:2px;outline:none;width:100%;height:4px;position:relative}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 0 4px #0000004d}.seek-bar::-webkit-slider-thumb:hover{transform:scale(1.3)}.seek-bar::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:14px;height:14px}.seek-bar-fill{background:var(--electric-purple);pointer-events:none;z-index:1;border-radius:2px;height:4px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.time-display{color:#fffc;white-space:nowrap;text-align:center;min-width:90px;font-size:.75rem;font-weight:500}.volume-control{align-items:center;gap:4px;display:flex}.volume-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:12px;height:12px}.watch-chat-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;border-left:1px solid var(--glass-border);width:35%;min-width:280px;max-width:400px;animation:slideInRight .3s var(--ease-smooth);background:#000c;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.watch-chat-panel #watchChatContainer{height:100%}.subtitle-overlay{z-index:15;text-align:center;pointer-events:none;max-width:80%;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}.subtitle-text{-webkit-backdrop-filter:blur(8px);color:#fff;text-shadow:0 2px 4px #000000e6;background:#0009;border-radius:8px;padding:8px 20px;font-size:1.6rem;font-weight:700;line-height:1.5;display:inline-block}.settings-panel{z-index:30;animation:fadeInUp .2s var(--ease-smooth);max-height:calc(100vh - 120px);position:absolute;top:56px;right:16px;overflow-y:auto}.settings-card{min-width:280px;padding:20px}.settings-title{margin-bottom:16px;font-size:1rem;font-weight:600}.settings-section{margin-bottom:16px}.settings-section:last-child{margin-bottom:0}.settings-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.8rem;font-weight:600;display:block}.settings-row{flex-direction:column;gap:8px;display:flex}.settings-btn{width:auto!important;padding:10px 16px!important;font-size:.85rem!important}.subtitle-status{color:var(--text-muted);font-size:.78rem}.custom-select{width:100%;position:relative}.custom-select-trigger{border:1px solid var(--glass-border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;background:#ffffff0f;justify-content:space-between;align-items:center;padding:10px 14px;font-size:.85rem;transition:border-color .2s,background .2s;display:flex}.custom-select-trigger:after{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;width:12px;height:12px;transition:transform .2s}.custom-select:hover .custom-select-trigger{background:#ffffff1a}.custom-select.open .custom-select-trigger{border-color:var(--electric-purple)}.custom-select.open .custom-select-trigger:after{transform:rotate(180deg)}.custom-select-options{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-sm);z-index:100;opacity:0;pointer-events:none;background:#14161cf2;border:1px solid #ffffff1a;max-height:160px;transition:opacity .2s,transform .2s;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;transform:translateY(-10px);box-shadow:0 8px 24px #0006}.custom-select.open .custom-select-options{opacity:1;pointer-events:auto;transform:translateY(0)}.custom-option{color:var(--text-secondary);cursor:pointer;padding:10px 14px;font-size:.85rem;transition:background .2s,color .2s}.custom-option:hover{color:var(--text-primary);background:#ffffff14}.custom-option.selected{color:var(--electric-purple);background:#7c3aed33;font-weight:600}.settings-hint{color:var(--text-muted);margin-top:6px;font-size:.72rem;line-height:1.4}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal-card{text-align:center;width:90%;max-width:360px}.modal-card h3{margin-bottom:8px}.modal-card p{color:var(--text-secondary);margin-bottom:24px;font-size:.9rem}.modal-actions{gap:12px;display:flex}.modal-actions .btn{flex:1}@media (width<=600px){.screen-container{padding:16px 14px 32px}.room-code-char{width:36px;height:44px;font-size:1.2rem}.watch-chat-panel{width:100%;min-width:0;max-width:none}.volume-slider,.time-display{display:none}.lobby-chat-fab{bottom:20px;right:20px}.lobby-chat-overlay{width:auto;height:min(430px,100vh - 128px);bottom:88px;left:14px;right:14px}}@media (width<=767px){.home-desktop{display:none}.home-phone{display:flex}.top-bar,.config-warning{display:none}}@media (width>=768px) and (width<=1023px){.home-action-grid{max-width:560px}.home-action-card{min-height:240px;padding:32px 20px}}@media (width>=768px){.home-phone{display:none}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff1f}::selection{color:#fff;background:#7c3aed4d}.config-warning{border-radius:var(--radius-md);color:var(--reel-gold);animation:fadeInUp .4s var(--ease-smooth);background:#f59e0b1a;border:1px solid #f59e0b40;align-items:flex-start;gap:14px;margin-bottom:20px;padding:16px 20px;display:flex}.config-warning svg{flex-shrink:0;margin-top:2px}.config-warning strong{margin-bottom:4px;font-size:.9rem;display:block}.config-warning p{color:var(--text-secondary);margin:0;font-size:.8rem;line-height:1.5}.config-warning code{background:#ffffff0f;border-radius:4px;padding:1px 6px;font-size:.78rem}