:root{--bg: #0b0d12;--panel: #141823;--panel-2: #1a1f2b;--border: #262c3a;--text: #f5f7fb;--muted: #9aa4b5;--accent: #7c5cff;--accent-2: #00d4a0;--danger: #ff5c7c;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}a{color:var(--accent)}.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--accent) 18%,var(--bg)) 0%,var(--bg) 55%)}.gate-box{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;text-align:center}.gate-box h1{margin:0;font-size:clamp(32px,8vw,48px);letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.gate-hint{margin:0 0 4px;color:var(--muted)}.gate .input{text-align:center}.gate-error{color:var(--danger);font-size:14px}.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:28px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--accent) 18%,var(--bg)) 0%,var(--bg) 55%)}.landing h1{font-size:clamp(40px,9vw,72px);margin:0;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.landing .tagline{margin:0;color:var(--muted);max-width:420px;line-height:1.5}.landing .actions{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px}.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;padding:14px 16px;font-weight:600;transition:transform .08s ease,border-color .15s ease,background .15s ease}.btn:hover{border-color:var(--accent)}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(90deg,var(--accent),#6a4cf0);border-color:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.join{display:flex;gap:8px}.input{flex:1;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:14px;font-size:16px}.input:focus{outline:none;border-color:var(--accent)}.room{height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel);flex-wrap:wrap}.brand{font-weight:800;letter-spacing:-.02em}.roomid{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:13px;color:var(--muted)}.roomid code{color:var(--text)}.icon-btn{border:none;background:transparent;color:var(--muted);padding:2px 4px;border-radius:6px}.icon-btn:hover{color:var(--text);background:var(--border)}.spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:4px 10px}.dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2)}.dot.off{background:var(--muted)}.wallet{font-weight:700;color:var(--text)}.presence{position:relative;display:inline-flex}.pill-btn{cursor:pointer}.pill-btn:hover{color:var(--text);border-color:var(--muted)}.roster-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90}.roster{position:absolute;top:calc(100% + 8px);right:0;z-index:91;width:220px;max-height:60vh;overflow-y:auto;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px #00000073;padding:8px}.roster-head{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:4px 8px 8px}.roster-empty{color:var(--muted);font-size:13px;padding:4px 8px 8px}.roster-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.roster-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:14px}.roster-item:hover{background:var(--panel)}.roster-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-wrap{flex:1;position:relative;background:#000;min-height:0}.preview-wrap iframe{width:100%;height:100%;border:0;display:block}@keyframes spin{to{transform:rotate(360deg)}}.fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent),#6a4cf0);color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px #7c5cff73;z-index:50;transition:transform .12s ease,box-shadow .15s ease}.fab:hover{transform:scale(1.05)}.fab:active{transform:scale(.96)}.fab.building{background:var(--panel-2);border:1px solid var(--border)}.fab-icon{font-size:26px;line-height:1}.fab-spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060a8c;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}.drawer-scrim.open{opacity:1;pointer-events:auto}.drawer{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--panel);border-top:1px solid var(--border);border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -16px 40px #00000080;transform:translateY(110%);transition:transform .26s cubic-bezier(.32,.72,0,1)}.drawer.open{transform:translateY(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between}.drawer-head h2{margin:0;font-size:17px;font-weight:700}.drawer-input{width:100%;resize:none;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:14px;font-size:16px;line-height:1.45;min-height:110px;max-height:40vh}.drawer-input:focus{outline:none;border-color:var(--accent)}.drawer-send{width:100%}@media(min-width:640px){.drawer{left:auto;right:18px;bottom:18px;width:380px;border-radius:16px;border:1px solid var(--border);transform:translateY(calc(100% + 24px))}.drawer.open{transform:translateY(0)}}.toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 8px 24px #0006;z-index:80}@media(max-width:560px){.topbar{gap:8px}}