:root{--bg: #0b0b11;--panel: #16161f;--panel-2: #1e1e2b;--text: #e7e7ef;--muted: #9a9ab0;--accent: #6c5cff;--accent-2: #8a7dff;--error: #ff6b6b;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}canvas{display:block;touch-action:none}.lobby{height:100%;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#1a1a2e 0%,transparent 60%),var(--bg)}.card{width:min(360px,90vw);padding:32px 28px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid #2a2a3a;border-radius:18px;box-shadow:0 20px 60px #00000073;text-align:center}.card h1{margin:0;font-size:40px;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent-2),#c0b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.card .sub{margin:4px 0 22px;color:var(--muted);font-size:13px}.card input{width:100%;padding:12px 14px;margin-bottom:12px;background:#0f0f17;border:1px solid #2f2f42;border-radius:10px;color:var(--text);font-size:15px;outline:none}.card input:focus{border-color:var(--accent)}.card .field-label{display:block;text-align:left;margin:2px 2px 5px;color:var(--muted);font-size:12px}.card .field-label .muted{color:#6f6f86}.card input.invalid{border-color:var(--error)}.avatar-row{display:flex;gap:6px;margin:-4px 0 14px}.card .avatar-row .chip{flex:1;width:auto;padding:7px 6px;background:#0f0f17;border:1px solid #2f2f42;border-radius:8px;color:var(--text);font-size:12px;font-weight:500;text-align:center;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}.card .avatar-row .chip:hover{border-color:var(--accent);background:#14141f}.card .avatar-row .chip.link{display:flex;align-items:center;justify-content:center;color:var(--accent-2)}.card .avatar-row .chip.active{border-color:var(--accent);background:#6c5cff2e;color:#fff}.avatar-hint{margin:-6px 0 14px;text-align:left;font-size:12px}.avatar-hint a{color:var(--accent-2);text-decoration:none}.avatar-hint a:hover{text-decoration:underline}.card button{width:100%;padding:12px 14px;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s}.card button:hover:not(:disabled){background:var(--accent-2)}.card button:active:not(:disabled){transform:translateY(1px)}.card button:disabled{opacity:.5;cursor:default}.card .error{color:var(--error);font-size:13px;margin:12px 0 0}.card .hint{margin:18px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.hud{position:fixed;top:0;left:0;right:0;height:52px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(11,11,17,.85),transparent);pointer-events:none;font-size:14px}.hud-left,.hud-right{display:flex;align-items:center;gap:8px;pointer-events:auto}.hud .muted{color:var(--muted)}.hud .dot{width:8px;height:8px;border-radius:50%;background:#41d672;box-shadow:0 0 8px #41d672}.hud .dot.offline{background:#e0a13a;box-shadow:0 0 8px #e0a13a}.hud button{padding:6px 14px;background:var(--panel-2);border:1px solid #33334a;border-radius:8px;color:var(--text);font-size:13px;cursor:pointer}.hud button:hover{border-color:var(--accent)}.hud button.mic.on{border-color:#41d672;color:#b9f3cd}.hud button.mic.off{border-color:#ff6b6b;color:#ffc3c3}.hud .link-btn{padding:4px 10px;font-size:12px;color:var(--muted)}.hud .link-btn:hover{color:var(--text)}.controls-hint{position:fixed;bottom:80px;left:50%;transform:translate(-50%);padding:7px 14px;background:#16161fb3;border:1px solid #2a2a3a;border-radius:999px;color:var(--muted);font-size:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}.emote-bar{position:fixed;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:6px;padding:7px 9px;background:#16161fcc;border:1px solid #2a2a3a;border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.emote-bar button{width:44px;height:44px;font-size:22px;line-height:1;background:var(--panel-2);border:1px solid #33334a;border-radius:10px;cursor:pointer;transition:transform .06s,border-color .15s}.emote-bar button:hover{border-color:var(--accent);transform:translateY(-2px)}.emote-bar button:active{transform:translateY(0)}.joystick{position:fixed;left:22px;bottom:22px;width:140px;height:140px;border-radius:50%;background:#16161f80;border:1px solid #2a2a3a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;z-index:5;display:none}.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--accent);opacity:.85;box-shadow:0 4px 14px #00000073;pointer-events:none}.emote-bubble{font-size:30px;line-height:1;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}.nameplate{padding:2px 9px;background:#0f0f17d1;border:1px solid var(--accent);border-radius:999px;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transform:translateY(-50%);pointer-events:none;-webkit-user-select:none;user-select:none}@media (pointer: coarse){.joystick{display:block}.controls-hint{display:none}}@media (max-width: 560px){.emote-bar{left:auto;right:12px;bottom:26px;transform:none;gap:5px;padding:6px 7px}.emote-bar button{width:38px;height:38px;font-size:19px}.hud{font-size:12px}.hud-left,.hud-right{gap:6px}}