:root{color:#f4fff9;font-synthesis:none;background:#07100d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input{font:inherit}main{isolation:isolate;width:100%;height:100%;position:relative}.world-wrap{background:#111820;position:absolute;inset:0;overflow:hidden}#world{touch-action:none;cursor:grab;width:100%;height:100%;display:block}#world:active{cursor:grabbing}.panel{z-index:4;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(145deg,#08120ff2,#10231ce8);border:1px solid #83d9b955;border-radius:20px;width:min(360px,100vw - 40px);max-height:calc(100vh - 40px);padding:22px;transition:width .25s,padding .25s;position:absolute;top:20px;left:20px;overflow:auto;box-shadow:0 24px 80px #000a}.eyebrow{color:#4fe0b5;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:800}h1{letter-spacing:-.04em;margin:0 0 18px;font-size:clamp(25px,4vw,36px)}form{gap:16px;display:grid}.name-field{color:#bdd8ce;gap:7px;font-size:13px;display:grid}.name-field input,button{border:1px solid #315c4d;border-radius:12px;width:100%;min-height:46px;padding:11px 13px}.name-field input{color:#fff;background:#07100d}.name-field input:focus-visible{outline-offset:2px;outline:2px solid #4fe0b5}.avatar-field{border:0;min-width:0;margin:0;padding:0}.avatar-field legend{color:#bdd8ce;margin-bottom:8px;padding:0;font-size:13px}.avatar-list{scroll-snap-type:x proximity;scrollbar-color:#315c4d transparent;gap:9px;padding:2px 2px 11px;display:flex;overflow-x:auto}.avatar-option{cursor:pointer;scroll-snap-align:start;background:#0b1612;border:1px solid #315c4d;border-radius:12px;flex:0 0 70px;place-items:center;gap:4px;padding:7px 5px 5px;display:grid;position:relative}.avatar-option input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.avatar-icon{color:#08100d;background:radial-gradient(circle at 35% 28%, #fff9 0 9%, transparent 10%), var(--avatar-color);border-radius:50%;place-items:center;width:48px;height:48px;font-size:21px;font-weight:900;display:grid;box-shadow:inset 0 -8px 16px #0003}.avatar-number{color:#78998c;font-variant-numeric:tabular-nums;letter-spacing:.12em;font-size:9px}.avatar-option:has(input:checked){background:#28111b;border-color:#ff4f8b;box-shadow:0 0 0 2px #ff4f8b55}.avatar-option:has(input:checked) .avatar-number{color:#ff8fb5}.avatar-option:has(input:focus-visible){outline-offset:2px;outline:2px solid #4fe0b5}button{color:#18050c;cursor:pointer;background:#ff4f8b;border:0;font-weight:850}button:disabled{opacity:.45;cursor:not-allowed}#status{color:#4fe0b5;min-height:21px;margin:14px 0 6px;font-size:13px}#status.error{color:#ff829e}.connection-stats{border-top:1px solid #244c3e;margin:0;padding-top:8px}.connection-stats div{justify-content:space-between;padding:3px 0;font-size:11px;display:flex}dt{color:#78998c}dd{font-variant-numeric:tabular-nums;margin:0}.hint{color:#78998c;margin:10px 0 0;font-size:11px;line-height:1.5}.world-hud{z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;background:#07100db8;border:1px solid #ffffff1a;border-radius:12px;justify-items:end;gap:2px;padding:10px 13px;display:grid;position:absolute;top:20px;right:20px;box-shadow:0 8px 30px #0006}.world-hud strong{font-size:12px}.world-hud span{color:#8db5a6;font-variant-numeric:tabular-nums;font-size:10px}.world-hud span[data-ready=true]{color:#4fe0b5}.camera-hint{z-index:2;color:#cae0d8;pointer-events:none;background:#07100da8;border-radius:999px;padding:8px 11px;font-size:10px;position:absolute;bottom:20px;right:20px}.joystick{display:none}body.joined .panel{width:230px;padding:14px 16px}body.joined .panel h1,body.joined .panel form{display:none}body.joined .panel .eyebrow{margin:0;font-size:9px}body.joined .panel #status{min-height:0;margin:5px 0}body.joined .panel .hint{margin-top:5px}@media (width<=760px),(pointer:coarse){.panel{width:min(340px,100vw - 20px);max-height:min(58vh,540px);padding:18px;top:10px;left:10px}.world-hud{align-items:end;top:auto;bottom:10px;right:10px}.camera-hint{top:12px;bottom:auto;right:12px}.joystick{z-index:3;touch-action:none;background:radial-gradient(circle,#4fe0b51f 0 38%,#07100d85 39% 100%);border:1px solid #ffffff2b;border-radius:50%;place-items:center;width:118px;height:118px;display:grid;position:absolute;bottom:24px;left:20px;box-shadow:inset 0 0 24px #0007}.joystick:before,.joystick:after{content:"";background:#ffffff1f;position:absolute}.joystick:before{width:1px;height:78%}.joystick:after{width:78%;height:1px}.joystick-knob{z-index:1;pointer-events:none;background:#4fe0b5c9;border:2px solid #c5ffed88;border-radius:50%;width:50px;height:50px;transition:transform 40ms linear;position:relative;box-shadow:0 8px 24px #0008}body.joined .panel{width:185px;max-height:none;padding:10px 12px;top:10px;left:10px}body.joined .connection-stats,body.joined .panel .hint{display:none}}@media (prefers-reduced-motion:reduce){.panel,.joystick-knob{transition:none}}