:root{--bg-0: #0e1116;--bg-1: #151a22;--bg-2: #1c2430;--bg-3: #243041;--line: #2c3a4d;--text: #e8eef6;--muted: #8b9bb0;--accent: #3d9cf0;--accent-2: #2a7fc9;--danger: #e35d6a;--ok: #3ecf8e;--share: #f0a43d;--radius: 10px;--font-display: "Outfit", sans-serif;--font-body: "IBM Plex Sans", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg-0);color:var(--text);font-family:var(--font-body)}#app{height:100%}.hidden{display:none!important}.lobby{position:relative;min-height:100%;display:grid;place-items:center;padding:2rem;overflow:hidden}.lobby-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(61,156,240,.18),transparent 55%),radial-gradient(ellipse 70% 50% at 90% 80%,rgba(240,164,61,.12),transparent 50%),linear-gradient(160deg,#0b0e13,#121820 45%,#0e141c);pointer-events:none}.lobby-panel{position:relative;width:min(420px,100%);display:flex;flex-direction:column;gap:1rem}.lobby-panel.lobby-wide{width:min(520px,100%)}.lobby-panel textarea{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:.65rem .75rem;font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;resize:vertical;outline:none}.lobby-panel textarea:focus{border-color:var(--accent)}.field-grid{display:grid;grid-template-columns:1fr 100px;gap:.75rem}.hint{margin:0;font-size:.75rem;color:var(--muted);line-height:1.4}.hint code{font-size:.68rem;color:var(--accent);word-break:break-all}.badge.owner-badge{background:var(--accent);color:#061018}.participants{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--bg-1);min-height:0}.participants-header{padding:.7rem .85rem;font-family:var(--font-display);font-weight:600;border-bottom:1px solid var(--line);font-size:.9rem}.participants-list{list-style:none;margin:0;padding:.5rem;overflow:auto;display:flex;flex-direction:column;gap:.35rem}.participant-row{display:flex;align-items:center;gap:.45rem;padding:.35rem .4rem;border-radius:8px}.participant-row:hover{background:var(--bg-2)}.participant-row .av{width:28px;height:28px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-size:.7rem;font-weight:700;overflow:hidden;flex-shrink:0}.participant-row .av img{width:100%;height:100%;object-fit:cover}.participant-row .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.participant-row .name{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.context-menu-trigger{flex-shrink:0;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:4px;background:transparent;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.participant-row:hover .context-menu-trigger,.participant-row:focus-within .context-menu-trigger,.participant-row.menu-open .context-menu-trigger,.ban-row:hover .context-menu-trigger,.ban-row:focus-within .context-menu-trigger,.ban-row.menu-open .context-menu-trigger,.chat-msg:hover .context-menu-trigger,.chat-msg:focus-within .context-menu-trigger,.chat-msg.menu-open .context-menu-trigger,.tile:hover .context-menu-trigger,.tile:focus-within .context-menu-trigger,.tile.menu-open .context-menu-trigger,.focus-layer:hover .context-menu-trigger,.focus-layer:focus-within .context-menu-trigger,.focus-layer.menu-open .context-menu-trigger{opacity:1}.tile .context-menu-trigger,.focus-tools .context-menu-trigger{opacity:.85;background:#00000073;color:#fff}.tile:hover .context-menu-trigger,.tile:focus-within .context-menu-trigger,.tile.menu-open .context-menu-trigger,.focus-layer:hover .context-menu-trigger,.focus-layer:focus-within .context-menu-trigger,.focus-layer.menu-open .context-menu-trigger{opacity:1}.context-menu-trigger:hover,.context-menu-trigger:focus-visible{background:var(--bg-3);color:var(--text);outline:none}.tile .context-menu-trigger:hover,.tile .context-menu-trigger:focus-visible,.focus-tools .context-menu-trigger:hover,.focus-tools .context-menu-trigger:focus-visible{background:#000000b3;color:#fff}.context-menu{position:fixed;z-index:80;min-width:9.5rem;padding:.25rem;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);box-shadow:0 8px 24px #00000073;display:flex;flex-direction:column;gap:1px}.context-menu-item{display:block;width:100%;margin:0;padding:.4rem .55rem;border:none;border-radius:4px;background:transparent;color:var(--text);font:inherit;font-size:.8rem;text-align:left;cursor:pointer}.context-menu-item:hover,.context-menu-item:focus-visible{background:var(--bg-3);outline:none}.context-menu-item:disabled{opacity:.45;cursor:default}.context-menu-item.danger{color:var(--danger)}.context-menu-item.danger:hover,.context-menu-item.danger:focus-visible{background:#e35d6a26}.ban-list{border-top:1px solid var(--line);padding:.55rem .65rem .75rem;display:flex;flex-direction:column;gap:.35rem;min-height:0}.ban-list-header{font-size:.8rem;font-weight:600;font-family:var(--font-display)}.ban-empty{margin:0;font-size:.75rem}.ban-entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;max-height:9rem;overflow:auto}.ban-row{display:flex;align-items:center;gap:.35rem;padding:.2rem .25rem;border-radius:6px}.ban-row.menu-open,.ban-row:hover{background:var(--bg-2)}.ban-nick{flex:1;min-width:0;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6vw,3.2rem);letter-spacing:-.03em;margin:0;line-height:1.05}.tagline{margin:0 0 .5rem;color:var(--muted);font-size:.95rem}.field{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem}.field span em{color:var(--muted);font-style:normal;font-weight:400}.field input,.field select,.chat-form input,.controls select{background:var(--bg-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:.65rem .75rem;font:inherit;outline:none}.field input:focus,.chat-form input:focus,.controls select:focus{border-color:var(--accent)}.avatar-row{display:flex;align-items:center;gap:.75rem}.avatar-preview{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}.lobby-actions{display:flex;gap:.75rem;margin-top:.5rem}.lobby-step{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}.lobby-avatar-block{display:flex;align-items:center;gap:1rem}.lobby-avatar-preview{width:72px;height:72px;border-radius:50%;background:var(--bg-3);border:2px solid var(--line);display:grid;place-items:center;overflow:hidden;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--muted);flex-shrink:0}.lobby-avatar-preview img{width:100%;height:100%;object-fit:cover}.lobby-avatar-actions{display:flex;flex-direction:column;gap:.4rem;min-width:0}.lobby-avatar-actions input[type=file]{font-size:.8rem;color:var(--muted);max-width:100%}.lobby-choice{display:flex;flex-direction:column;gap:.75rem}.choice-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;cursor:pointer;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;color:var(--text);transition:border-color .15s,background .15s}.choice-card:hover{border-color:var(--accent);background:var(--bg-3)}.choice-card strong{font-family:var(--font-display);font-size:1.05rem}.choice-card span{font-size:.85rem;color:var(--muted);line-height:1.35}.lobby-advanced{border:1px solid var(--line);border-radius:8px;padding:.55rem .75rem;background:var(--bg-1)}.lobby-advanced summary{cursor:pointer;font-size:.85rem;color:var(--muted);font-weight:600;-webkit-user-select:none;user-select:none}.lobby-advanced[open] summary{margin-bottom:.75rem;color:var(--text)}.lobby-advanced .field-grid,.lobby-advanced .toggle{margin-bottom:.65rem}.lobby-manual-toggle{align-self:flex-start;margin:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--bg-3);color:var(--text);font-family:var(--font-display);font-weight:600;font-size:.9rem;padding:.65rem 1rem;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.btn:hover{background:#2d3c50}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);border-color:var(--accent-2);color:#061018}.btn.primary:hover{background:#5aadf5}.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}.btn.danger:hover{background:#e35d6a26}.btn.ghost{background:transparent}.btn.sm{padding:.4rem .7rem;font-size:.8rem}.error{color:var(--danger);font-size:.85rem;margin:0}.room{height:100%;display:grid;grid-template-rows:auto 1fr auto}.topbar{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;background:var(--bg-1);border-bottom:1px solid var(--line)}.topbar-brand{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}.topbar-meta{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.room-id{font-size:.75rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-right{display:flex;align-items:center;gap:.75rem}.toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.room-body{display:grid;grid-template-columns:1fr 300px;min-height:0}.room-body-3{grid-template-columns:220px 1fr 300px}@media(max-width:1100px){.room-body-3{grid-template-columns:1fr 280px}.room-body-3 .participants{display:none}}@media(max-width:900px){.room-body{grid-template-columns:1fr;grid-template-rows:1fr 220px}}.stage{position:relative;background:linear-gradient(180deg,rgba(28,36,48,.4),transparent 40%),var(--bg-0);min-height:0;overflow:hidden}.tile-grid{height:100%;padding:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(var(--cols, 1),minmax(0,1fr));grid-template-rows:repeat(var(--rows, 1),minmax(0,1fr));align-content:stretch;overflow:hidden}.tile-grid.hide-novideo .tile:not(.has-video):not(.is-self-sharing){display:none}.tile{position:relative;min-width:0;min-height:0;width:100%;height:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;animation:tile-in .25s ease-out}.tile.span-bottom{grid-column:1 / -1;width:50%;justify-self:center}@keyframes tile-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.tile video{width:100%;height:100%;object-fit:contain;background:#0a0c10}.tile .avatar-blob{width:72px;height:72px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--text);overflow:hidden}.tile .avatar-blob img{width:100%;height:100%;object-fit:cover}.tile-meta{position:absolute;left:0;right:0;bottom:0;padding:.45rem .55rem;display:flex;align-items:center;gap:.4rem;background:linear-gradient(transparent,#000000bf);font-size:.8rem}.tile-meta .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .4rem;border-radius:4px;background:var(--share);color:#1a1205}.badge.muted-badge{background:var(--danger);color:#fff}.badge.audio-badge{background:var(--ok);color:#04140c}.tile video.hw-accel,.focus-layer video.hw-accel{transform:translateZ(0);will-change:transform;backface-visibility:hidden}.tile video.hw-soft,.focus-layer video.hw-soft{transform:none;will-change:auto;backface-visibility:visible}.tile-volume{position:absolute;left:.4rem;right:.4rem;bottom:2rem;z-index:2}.volume-slider{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--muted);background:#0000008c;padding:.25rem .4rem;border-radius:6px}.volume-slider input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}.volume-slider.compact .vol-pct{display:none}.vol-pct{min-width:2.2rem;text-align:right;color:var(--text)}.focus-tools{display:flex;align-items:center;gap:.75rem}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0000008c;display:grid;place-items:center;padding:1rem}.settings-panel{width:min(420px,100%);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.75rem}.settings-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.settings-head h2{margin:0;font-family:var(--font-display);font-size:1.1rem}.settings-row{font-size:.9rem;color:var(--text)}.settings-hint{margin:0;font-size:.75rem;color:var(--muted);line-height:1.45}.settings-hint code{font-size:.7rem;color:var(--accent)}.tile-actions{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.3rem;opacity:0;transition:opacity .15s}.tile:hover .tile-actions,.tile:focus-within .tile-actions{opacity:1}.tile.has-video .tile-actions{opacity:1}.focus-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#05070a;display:flex;flex-direction:column;min-height:0}.focus-layer.focus-expanded{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;width:auto;height:auto}.focus-layer video{flex:1 1 auto;min-height:0;min-width:0;width:100%;object-fit:contain;background:#000}.focus-chrome{position:relative;z-index:1;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;background:var(--bg-1);border-top:1px solid var(--line)}.chat{display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--bg-1);min-height:0}.chat-header{padding:.7rem .85rem;font-family:var(--font-display);font-weight:600;border-bottom:1px solid var(--line);font-size:.9rem}.chat-header .muted{color:var(--muted);font-weight:400;font-size:.75rem;margin-left:.35rem}.chat-log{flex:1;overflow:auto;padding:.75rem;display:flex;flex-direction:column;gap:.65rem}.chat-msg{display:grid;grid-template-columns:28px 1fr auto;gap:.45rem;align-items:start;animation:tile-in .2s ease-out}.chat-msg-main{min-width:0}.chat-msg .context-menu-trigger{margin-top:.1rem}.chat-msg .av{width:28px;height:28px;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;font-size:.7rem;font-weight:700;overflow:hidden}.chat-msg .av img{width:100%;height:100%;object-fit:cover}.chat-msg .who{font-size:.75rem;font-weight:600;color:var(--accent)}.chat-msg .body{font-size:.85rem;word-break:break-word;color:var(--text)}.chat-img-thumb{display:block;margin-top:.25rem;padding:0;border:none;background:none;cursor:zoom-in;max-width:100%;border-radius:6px;overflow:hidden;line-height:0}.chat-img-thumb:hover{opacity:.92}.chat-img-thumb img{max-width:100%;display:block;border-radius:6px}.chat-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:3rem 2rem 2rem;background:#000000d9;cursor:zoom-out}.chat-lightbox img{max-width:min(96vw,1200px);max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:4px;cursor:default;-webkit-user-select:none;user-select:none;pointer-events:auto}.chat-lightbox-close{position:absolute;top:.75rem;right:.75rem;width:36px;height:36px;border:none;border-radius:50%;background:transparent;color:#fff;font-size:1.75rem;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:.85}.chat-lightbox-close:hover{opacity:1;background:#ffffff1a}.chat-system{font-size:.75rem;color:var(--muted);text-align:center}.chat-form{display:flex;gap:.4rem;padding:.55rem;border-top:1px solid var(--line)}.chat-form input{flex:1;min-width:0}.chat-attach{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--muted);font-size:1.2rem;line-height:1}.chat-attach:hover{color:var(--text);border-color:var(--accent)}.chat-pending{padding:0 .55rem .55rem;font-size:.75rem;color:var(--muted)}.chat-pending img{max-height:64px;border-radius:4px;margin-top:.25rem}.controls{display:flex;align-items:center;gap:1rem;padding:.65rem 1rem;background:var(--bg-1);border-top:1px solid var(--line);flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:.75rem}.control-group.center{flex:1;justify-content:center}.control-group.end{margin-left:auto}.field.inline{flex-direction:row;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}.field.inline select{padding:.35rem .5rem}.status{font-size:.8rem;color:var(--muted)}.status.ok{color:var(--ok)}.status.warn{color:var(--share)}