: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}.action-dock{position:fixed;bottom:18px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:6}.action-toggle{padding:9px 16px;font-size:14px;font-weight:600;color:#fff;background:#16161fd9;border:1px solid #33334a;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s}.action-toggle:hover,.action-toggle.open{border-color:var(--accent)}.action-strip{display:flex;flex-direction:column;gap:8px;max-width:min(560px,94vw);padding:10px 12px;background:#16161feb;border:1px solid #2a2a3a;border-radius:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.action-tabs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.action-tabs .tab{padding:4px 10px;font-size:11px;color:var(--muted);background:var(--panel-2);border:1px solid #33334a;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s}.action-tabs .tab:hover{color:var(--text);border-color:var(--accent)}.action-tabs .tab.active{color:#fff;border-color:var(--accent);background:#6c5cff38}.action-row{display:flex;flex-wrap:nowrap;gap:6px;max-width:min(560px,94vw);overflow-x:auto;padding-bottom:2px}.action-row button{flex:0 0 auto;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}.action-row button:hover{border-color:var(--accent);transform:translateY(-2px)}.action-row 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){.action-dock{left:auto;right:12px;bottom:26px;transform:none;align-items:flex-end}.action-strip{max-width:84vw}.action-row{max-width:78vw}.action-row button{width:40px;height:40px;font-size:20px}.hud{font-size:12px}.hud-left,.hud-right{gap:6px}}.edit-fab{position:fixed;top:64px;left:14px;padding:8px 14px;font-size:13px;font-weight:600;color:#fff;background:#16161fd9;border:1px solid #33334a;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:7;transition:border-color .15s}.edit-fab:hover{border-color:var(--accent)}.editor{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:86vw;display:flex;flex-direction:column;gap:10px;padding:12px;background:#101017f2;border-left:1px solid #2a2a3a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:20}.editor-top{display:flex;flex-direction:column;gap:8px}.editor-actions{display:flex;flex-wrap:wrap;gap:6px}.editor button{padding:6px 10px;font-size:12px;color:#e8e8f0;background:var(--panel-2);border:1px solid #33334a;border-radius:8px;cursor:pointer;transition:border-color .15s}.editor button:hover{border-color:var(--accent)}.editor button.primary{background:var(--accent);color:#0b0b12;border-color:var(--accent);font-weight:600}.editor-selected{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px;background:var(--panel-2);border-radius:10px}.editor-selected .sel-name{font-size:12px;font-weight:600;flex:1 1 100%}.editor-selected small,.editor-hint{font-size:11px;color:var(--muted)}.editor-palette{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.editor-palette details{border:1px solid #2a2a3a;border-radius:8px;padding:4px 8px}.editor-palette summary{cursor:pointer;font-weight:600;font-size:13px;padding:4px 0}.palette-cat h5{margin:6px 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.palette-row{display:flex;flex-wrap:wrap;gap:5px}.palette-item{padding:4px 7px!important;font-size:11px!important;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-item.active{border-color:var(--accent)!important;background:#6366f12e!important}.select{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;padding:18px 16px 22px;gap:12px;background:radial-gradient(900px 520px at 50% 8%,#241a3a 0%,transparent 62%),radial-gradient(700px 500px at 50% 120%,#1a2340 0%,transparent 60%),var(--bg);overflow:hidden}.select-head{text-align:center;flex:0 0 auto}.select-head h1{margin:0;font-size:34px;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent-2),#c0b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.select-head .sub{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.22em}.select-stage{flex:1 1 auto;min-height:0;width:100%;display:flex;justify-content:center}.select-preview{position:relative;width:min(460px,92vw);height:100%;border:1px solid #2c2c40;border-radius:20px;background:radial-gradient(closest-side at 50% 65%,rgba(108,92,255,.22),transparent 72%),linear-gradient(180deg,#1e1e2b99,#0c0c1299);box-shadow:inset 0 0 60px #6c5cff1f,0 18px 50px #00000080;overflow:hidden}.fighter-name{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:26px;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 2px 16px rgba(108,92,255,.6),0 2px 6px rgba(0,0,0,.8);pointer-events:none}.roster{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;max-height:30vh;overflow-y:auto}.roster-tile{width:78px;height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid #2f2f42;border-radius:12px;color:var(--text);cursor:pointer;transition:transform .08s,border-color .15s,box-shadow .15s}.roster-tile:hover{border-color:var(--accent);transform:translateY(-2px)}.roster-tile.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 22px #6c5cff80}.roster-emoji{font-size:26px;line-height:1}.roster-label{font-size:10px;color:var(--muted);text-align:center;line-height:1.1;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:560px}.select-foot input{flex:1 1 160px;padding:12px 14px;background:#0f0f17;border:1px solid #2f2f42;border-radius:10px;color:var(--text);font-size:15px;outline:none}.select-foot input:focus{border-color:var(--accent)}.enter-btn{flex:0 0 auto;padding:12px 26px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 24px #6c5cff66;transition:transform .05s,filter .15s}.enter-btn:hover:not(:disabled){filter:brightness(1.1)}.enter-btn:active:not(:disabled){transform:translateY(1px)}.enter-btn:disabled{opacity:.45;cursor:default;box-shadow:none}.select-error{flex:0 0 auto;margin:0;color:var(--error);font-size:13px}@media (max-width: 560px){.roster-tile{width:66px;height:66px}.roster-emoji{font-size:22px}}.perf-hud{position:fixed;top:58px;right:12px;z-index:30;padding:8px 12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;line-height:1.5;color:#b9f3cd;background:#0b0b11e0;border:1px solid #2a2a3a;border-radius:10px;pointer-events:none;white-space:nowrap}.perf-hud b{color:#fff}.tint-row{flex:0 0 auto;display:flex;justify-content:center;gap:8px}.tint{width:30px;height:30px;border-radius:50%;border:2px solid #2f2f42;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;transition:transform .08s,border-color .15s,box-shadow .15s}.tint:hover{transform:translateY(-2px);border-color:var(--accent)}.tint.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}