html,body,#root{width:100%;min-height:100%;margin:0;overscroll-behavior:none;touch-action:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{overflow:hidden;background:#05070b;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.game-page{--accent-cyan: 69, 213, 255;--accent-violet: 164, 121, 255;--accent-amber: 255, 188, 103;--hud-bg: rgba(8, 14, 24, .74);--hud-border: rgba(120, 214, 255, .36);--hud-text: #e9f7ff;--hud-muted: #cce8ff;--hud-panel-shadow: rgba(4, 8, 16, .45)}.game-page{position:relative;width:100vw;height:100vh;overflow:hidden;color:var(--hud-text);font-family:Menlo,Consolas,Monaco,Liberation Mono,monospace;background:radial-gradient(circle at 14% 9%,rgba(var(--accent-cyan),.26),rgba(var(--accent-cyan),0) 44%),radial-gradient(circle at 84% 12%,rgba(var(--accent-violet),.22),rgba(var(--accent-violet),0) 42%),radial-gradient(circle at 74% 82%,rgba(var(--accent-amber),.13),rgba(var(--accent-amber),0) 40%),radial-gradient(circle at 18% 8%,#14263a,#0a1220 46%,#05070d)}.arena{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.join-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;overflow:hidden;background:radial-gradient(circle at 14% 12%,rgba(var(--accent-cyan),.22),rgba(var(--accent-cyan),0) 44%),radial-gradient(circle at 84% 10%,rgba(var(--accent-violet),.2),rgba(var(--accent-violet),0) 42%),radial-gradient(circle at 70% 84%,rgba(var(--accent-amber),.12),rgba(var(--accent-amber),0) 42%),#020408db}.join-overlay:before,.join-overlay:after{content:"";position:absolute;pointer-events:none}.join-overlay:before{width:min(74vmin,660px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(var(--accent-cyan),.24);box-shadow:0 0 0 16px rgba(var(--accent-violet),.08),0 0 42px rgba(var(--accent-cyan),.26) inset;top:50%;left:50%;transform:translate(-50%,-50%);animation:joinOrbitSpin 28s linear infinite}.join-overlay:after{width:min(52vmin,460px);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(var(--accent-amber),.28);top:50%;left:50%;transform:translate(-50%,-50%);animation:joinOrbitSpinReverse 18s linear infinite}.join-card{position:relative;z-index:1;width:min(420px,calc(100vw - 32px));padding:20px;border-radius:16px;background:linear-gradient(155deg,#111e34b3,#070d18e6),radial-gradient(circle at 12% 8%,rgba(var(--accent-cyan),.16),rgba(var(--accent-cyan),0) 38%);border:1px solid rgba(var(--accent-cyan),.45);box-shadow:0 24px 56px #00000080,0 0 0 1px rgba(var(--accent-cyan),.22) inset;display:grid;gap:11px}.join-kicker{margin:0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--accent-cyan),.92)}.join-title{margin:0;display:grid;gap:2px;line-height:1.04}.join-title-main{font-size:clamp(23px,3.8vw,34px);font-weight:800;color:#f0fbff;text-shadow:0 0 24px rgba(var(--accent-cyan),.33),0 0 54px rgba(var(--accent-violet),.2)}.join-title-sub{font-size:clamp(16px,2.8vw,24px);font-weight:700;background:linear-gradient(110deg,rgba(var(--accent-cyan),1),rgba(var(--accent-violet),.96),rgba(var(--accent-amber),.96));background-size:220% 220%;background-position:0% 50%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:joinShimmer 5.5s ease infinite}.join-description{margin:0;color:var(--hud-muted);font-size:12px}.join-loading{margin:0;color:rgba(var(--accent-amber),.95);font-size:11px;letter-spacing:.04em;animation:joinPulse 1.8s ease-in-out infinite}.join-badges{display:flex;flex-wrap:wrap;gap:6px}.join-badges span{border:1px solid rgba(var(--accent-cyan),.34);border-radius:999px;padding:3px 8px;font-size:10px;color:#e1f5ffeb;background:#09121fc2}.join-card h1{margin:0;font-size:22px}.join-card p{margin:0;color:var(--hud-muted);font-size:12px}.join-card label{font-size:11px;color:var(--hud-muted)}.join-input{width:100%;border:1px solid rgba(var(--accent-cyan),.46);border-radius:10px;background:#080e18f5;color:var(--hud-text);font:inherit;font-size:14px;padding:10px 12px}.join-btn{border:1px solid rgba(var(--accent-cyan),.52);border-radius:999px;background:linear-gradient(180deg,#152944f5,#0a111ef7);color:var(--hud-text);font:inherit;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:11px 14px;cursor:pointer;box-shadow:0 10px 22px #02070e75}.join-btn:not(:disabled):hover{border-color:rgba(var(--accent-cyan),.76);transform:translateY(-1px)}.join-btn:not(:disabled):active{transform:translateY(0)}.join-btn:disabled{opacity:.5;cursor:default}@keyframes joinShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes joinPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes joinOrbitSpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes joinOrbitSpinReverse{0%{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}.hud{position:absolute;z-index:2;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 10px 28px var(--hud-panel-shadow)}.hud h1,.hud h2,.hud p,.hud ul{margin:0}.hud-dock{top:12px;left:12px;right:12px;width:min(1080px,calc(100vw - 24px));max-height:min(74vh,860px);padding:8px;display:grid;gap:8px;z-index:3}.hud-dock-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.hud-dock-brand{display:grid;gap:2px;min-width:112px}.hud-dock-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f0fbff}.hud-dock-sub{font-size:10px;color:var(--hud-muted)}.hud-dock-toggle-row{display:flex;flex-wrap:wrap;gap:6px}.hud-dock-toggle{border:1px solid rgba(var(--accent-cyan),.34);background:#080e18b8;color:var(--hud-muted);font:inherit;font-size:10px;line-height:1;padding:6px 10px;border-radius:999px;cursor:pointer}.hud-dock-toggle.active{color:var(--hud-text);border-color:rgba(var(--accent-cyan),.72);background:linear-gradient(180deg,#182c4ae0,#080e18e6);box-shadow:0 0 0 1px rgba(var(--accent-cyan),.24) inset}.hud-dock-actions{display:flex;gap:6px}.hud-dock-body{display:grid;gap:8px;overflow:auto;max-height:min(62vh,740px);padding-right:2px}.hud-dock-body.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hud-dock-body.is-stack{grid-template-columns:1fr}.hud-dock-panel{min-width:0}.hud-dock-empty{font-size:11px;color:var(--hud-muted);margin:0}.hud-dock .hud{position:relative;inset:auto;transform:none;width:auto;max-width:none;max-height:none}.hud-dock .hud-left,.hud-dock .hud-player,.hud-dock .hud-right,.hud-dock .hud-feed,.hud-dock .hud-config{padding:10px 12px;width:auto;max-width:none}.hud-dock .hud-left,.hud-dock .hud-right,.hud-dock .hud-feed,.hud-dock .hud-config{font-size:11px}.hud-dock .hud-right,.hud-dock .hud-feed{overflow:visible}.hud-dock .hud-config{max-height:none;overflow:visible}.hud-dock .hud-feed{display:block}.hud-left{top:14px;left:14px;max-width:min(580px,calc(100vw - 28px));padding:12px 14px;display:grid;gap:7px;font-size:13px}.hud-left h1{font-size:17px}.hud-right{top:14px;right:14px;width:min(340px,calc(100vw - 28px));padding:12px 14px}.hud-player{top:190px;left:14px;width:min(260px,calc(100vw - 28px));padding:10px 12px;display:grid;gap:8px}.hud-player h2{font-size:13px}.player-atom-name{font-size:11px;color:var(--hud-muted)}.player-control{display:grid;gap:6px}.player-control .label{font-size:11px;color:var(--hud-muted)}.player-control-row{display:grid;grid-template-columns:30px 1fr 30px;gap:6px;align-items:center}.player-control-row select,.player-control-row input[type=number]{width:100%;border:1px solid rgba(var(--accent-cyan),.42);border-radius:8px;background:#080e18e0;color:var(--hud-text);font:inherit;font-size:12px;padding:6px 7px}.player-btn{border:1px solid rgba(var(--accent-cyan),.45);border-radius:8px;background:linear-gradient(180deg,#0d1828e0,#080e18e0);color:var(--hud-text);font:inherit;font-size:14px;height:30px;cursor:pointer}.player-btn:disabled{opacity:.42;cursor:default}.hud-right h2,.hud-feed h2{margin-bottom:8px;font-size:14px}.hud-right ul,.hud-feed ul{list-style:none;padding:0;display:grid;gap:6px}.hud-right li{display:flex;justify-content:space-between;gap:8px;font-size:12px}.hud-right li.self{font-weight:700}.hud-right .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-feed{top:190px;right:14px;width:min(340px,calc(100vw - 28px));padding:10px 14px}.hud-feed li{font-size:12px;color:var(--hud-muted)}.hud-config{top:14px;left:50%;transform:translate(-50%);width:min(460px,calc(100vw - 28px));max-height:min(72vh,760px);padding:10px 12px;overflow:auto;font-size:11px;z-index:3}.config-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.config-head h2{margin:0;font-size:13px}.config-actions{display:flex;align-items:center;gap:7px}.config-switch{display:flex;align-items:center;gap:4px;font-size:10px}.config-btn{border:1px solid rgba(var(--accent-cyan),.45);background:linear-gradient(180deg,#0d1828e0,#080e18e0);color:var(--hud-text);font:inherit;font-size:10px;padding:4px 8px;border-radius:999px;cursor:pointer}.config-list{margin-top:8px;display:grid;gap:6px}.config-presets{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}.config-tabs{margin-top:7px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.config-tab{border:1px solid rgba(var(--accent-cyan),.34);background:#080e18b3;color:var(--hud-muted);font:inherit;font-size:10px;padding:4px 6px;border-radius:8px;cursor:pointer}.config-tab.active{color:var(--hud-text);border-color:rgba(var(--accent-cyan),.68);background:linear-gradient(180deg,#182c4ae0,#080e18e6);box-shadow:0 0 0 1px rgba(var(--accent-cyan),.22) inset}.config-note{margin-top:6px;font-size:10px;color:var(--hud-muted)}.config-row{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:8px}.config-row .label{font-size:10px;color:var(--hud-muted)}.config-row .value{text-align:right;font-size:10px;color:var(--hud-text);font-variant-numeric:tabular-nums}.config-row input[type=range]{width:100%;touch-action:manipulation}.hud-config input,.hud-config button{touch-action:manipulation}.hud-bottom{left:50%;bottom:14px;transform:translate(-50%);width:min(760px,calc(100vw - 28px));padding:10px 14px;display:flex;justify-content:space-between;gap:10px;font-size:13px}.ok{color:rgb(var(--accent-cyan))}.warn{color:rgb(var(--accent-amber))}.mobile-show{display:none}.touch-ui{position:absolute;inset-inline:0;bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));z-index:4;display:none;justify-content:space-between;align-items:flex-end;gap:14px;padding-inline:14px;padding-bottom:6px;pointer-events:none}.touch-ui.touch-force-visible{display:flex}.touch-rotate{display:grid;gap:4px;justify-items:start;pointer-events:auto}.touch-stick{position:relative;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 45% 35%,rgba(var(--accent-cyan),.28),#070f1ce6 68%);border:1px solid rgba(var(--accent-cyan),.36);box-shadow:0 8px 20px #02050b8c;touch-action:none}.touch-stick-ring{position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(var(--accent-violet),.3);background:radial-gradient(circle at 50% 50%,rgba(var(--accent-cyan),.11),#08101a4d 72%)}.touch-stick-center{position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:rgba(var(--accent-cyan),.84)}.touch-stick-knob{position:absolute;left:calc(50% - 17px);top:calc(50% - 17px);width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--accent-cyan),.64);background:radial-gradient(circle at 35% 32%,#f4fbff,#79d8ff 62%,#394c76);box-shadow:0 5px 12px #00000057;pointer-events:none}.touch-rotate-label{margin:0;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--accent-cyan),.9)}.touch-actions{display:grid;gap:9px;justify-items:end;pointer-events:auto}.touch-btn{min-width:86px;min-height:40px;border:1px solid rgba(var(--accent-cyan),.48);border-radius:999px;background:linear-gradient(180deg,#18243ef0,#0a111ef0);color:var(--hud-text);font-size:10px;font-weight:700;letter-spacing:.06em;touch-action:none;-webkit-user-select:none;user-select:none;white-space:nowrap}.touch-btn.touch-round{min-width:88px;min-height:88px;border-radius:50%;font-size:11px}.touch-btn.fire{font-size:12px}.touch-burn{background:linear-gradient(180deg,#493113f2,#221607f5)}.touch-btn:active{transform:scale(.96);background:linear-gradient(180deg,#3d5c84f2,#17223af2)}@media(max-width:960px){.hud-dock{top:8px;left:8px;right:8px;width:auto;max-height:min(48vh,480px);padding:6px;gap:6px}.hud-dock-head{grid-template-columns:1fr;align-items:stretch;gap:6px}.hud-dock-brand{min-width:0;gap:1px}.hud-dock-title{font-size:10px}.hud-dock-sub{font-size:9px}.hud-dock-toggle-row{gap:4px}.hud-dock-toggle{font-size:9px;padding:4px 8px}.hud-dock-actions{justify-content:flex-end}.hud-dock-body{max-height:min(34vh,340px);gap:6px}.hud-dock-body.is-grid{grid-template-columns:1fr}.hud-dock .hud-left,.hud-dock .hud-player,.hud-dock .hud-right,.hud-dock .hud-feed,.hud-dock .hud-config{padding:6px 7px}.hud-dock .hud-left,.hud-dock .hud-right,.hud-dock .hud-feed,.hud-dock .hud-config{font-size:9px}.hud-dock .hud-feed{display:block}.join-overlay{padding:12px}.join-card{width:min(360px,calc(100vw - 24px));padding:14px;gap:8px}.join-card h1{font-size:18px}.join-card p{font-size:11px}.join-title-main{font-size:clamp(20px,6vw,30px)}.join-title-sub{font-size:clamp(14px,4.8vw,20px)}.join-badges span{font-size:9px;padding:3px 7px}.join-input{font-size:13px;padding:9px 10px}.join-btn{font-size:12px;padding:9px 12px}.hud{border-radius:8px}.hud-left{top:106px;left:8px;max-width:min(54vw,228px);padding:5px 6px;gap:2px;font-size:8px;line-height:1.2}.hud-config{top:8px;left:50%;right:auto;transform:translate(-50%);width:min(360px,calc(100vw - 170px));max-height:38vh;padding:7px 8px}.config-head h2{font-size:11px}.config-actions,.config-presets{gap:5px}.config-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.config-btn,.config-switch,.config-tab{font-size:9px}.config-row{grid-template-columns:82px 1fr 40px;gap:6px}.config-row .label,.config-row .value{font-size:9px}.hud-left h1{font-size:10px}.hud-player{top:8px;left:8px;width:min(30vw,140px);padding:6px;gap:4px}.hud-player h2{font-size:10px}.player-control{gap:3px}.player-atom-name,.player-control .label{font-size:8px}.player-control-row{grid-template-columns:22px 1fr 22px;gap:4px}.player-control-row select,.player-control-row input[type=number]{font-size:9px;padding:3px 4px;border-radius:6px}.player-btn{height:22px;font-size:12px;border-radius:6px}.mobile-hide{display:none}.mobile-show{display:inline}.hud-left .mobile-show{display:block}.hud-right{top:8px;right:8px;left:auto;width:min(36vw,154px);max-height:30vh;overflow:auto;padding:6px}.hud-right h2{font-size:10px;margin-bottom:3px}.hud-right ul{gap:4px}.hud-right li{font-size:9px;align-items:baseline;gap:6px}.hud-right .name{max-width:60px}.hud-feed{display:none}.hud-bottom{left:8px;right:8px;bottom:146px;transform:none;width:auto;padding:4px 6px;flex-wrap:wrap;justify-content:space-around;gap:4px 8px;font-size:9px}.touch-ui{display:flex;bottom:max(18px,calc(env(safe-area-inset-bottom) + 13px));gap:10px;padding-inline:10px;padding-bottom:6px}.touch-rotate{gap:3px}.touch-stick{width:96px;height:96px}.touch-stick-knob{left:calc(50% - 16px);top:calc(50% - 16px);width:32px;height:32px}.touch-rotate-label{font-size:8px}.touch-btn.fire{min-width:80px;min-height:80px;font-size:11px}.touch-btn.touch-round{min-width:80px;min-height:80px;font-size:10px}.touch-btn{min-width:78px;min-height:38px;font-size:9px}}@media(max-width:640px){.hud-dock{max-height:min(44vh,420px);padding:5px;gap:5px}.hud-dock-title{font-size:9px}.hud-dock-sub{font-size:8px}.hud-dock-toggle{font-size:8px;padding:3px 7px}.hud-dock-body{max-height:min(30vh,300px);gap:5px}.join-overlay{padding:8px}.join-card{width:calc(100vw - 16px);padding:12px;border-radius:10px}.join-card h1{font-size:16px}.join-card p,.join-card label{font-size:10px}.join-kicker{font-size:9px}.join-title-main{font-size:clamp(18px,7vw,24px)}.join-title-sub{font-size:clamp(12px,5.5vw,17px)}.join-loading{font-size:9px}.join-badges{gap:4px}.join-badges span{font-size:8px;padding:2px 6px}.join-input{font-size:12px;padding:8px 9px}.join-btn{font-size:11px;padding:8px 10px}.hud-left{top:92px;max-width:min(56vw,184px);padding:4px 5px;font-size:8px}.hud-config{width:min(320px,calc(100vw - 148px));max-height:34vh;padding:6px}.hud-player{width:min(33vw,128px)}.config-head h2{font-size:10px}.config-btn,.config-switch{font-size:8px}.config-presets,.config-tabs{gap:4px}.config-row{grid-template-columns:72px 1fr 34px;gap:5px}.config-row .label,.config-row .value{font-size:8px}.config-tab{font-size:8px;padding:3px 5px}.hud-left h1{font-size:9px}.hud-right{width:min(38vw,128px);max-height:26vh;padding:5px}.hud-right h2{font-size:9px}.hud-right li{font-size:8px;gap:4px}.hud-right .name{max-width:50px}.hud-bottom{bottom:126px;padding:3px 5px;gap:3px 6px;font-size:8px}.touch-ui{padding-inline:8px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));gap:8px;padding-bottom:5px}.touch-rotate{gap:2px}.touch-stick{width:86px;height:86px}.touch-stick-knob{left:calc(50% - 14px);top:calc(50% - 14px);width:28px;height:28px}.touch-rotate-label{font-size:7px}.touch-btn{min-width:66px;min-height:36px;font-size:8px}.touch-btn.touch-round{min-width:70px;min-height:70px;font-size:9px}.touch-btn.fire{min-width:70px;min-height:70px;font-size:10px}}