:root{--ui-r: 4px;--panel-r: 8px;--pad: 12px;--ctl: 2.2em;--panel: #202020;--panel-edge: #3c3c3c;--second: #2e2e2e;--edge: #5a5a5a;--ink: #e2e2e2;--dim: #929292;--faint: #5c5c5c;--hot: #6cf}.ui{color:var(--ink)}.ui-panel{box-sizing:border-box;padding:var(--pad);background:var(--panel);border:2px solid var(--panel-edge);border-radius:var(--panel-r)}.ui hr{flex:none;width:100%;height:2px;margin:0;background:var(--panel-edge);border:0}.ui button:not(.close-btn),.ui input:not([type=range]){box-sizing:border-box;height:var(--ctl);padding:0 .9em;border:2px solid var(--edge);border-radius:var(--ui-r);font:inherit;line-height:calc(var(--ctl) - 4px)}.ui input:not([type=range]){background:#141414;border-color:var(--panel-edge);color:var(--ink);outline:none}.ui button:not(.close-btn){flex:none;background:#262626;color:var(--ink);cursor:pointer;white-space:nowrap;outline:none}.ui button:not(.close-btn):hover:not(:disabled){border-color:var(--hot);color:#fff}.ui button:not(.close-btn):active:not(:disabled){background:#1c2c38}.ui button:not(.close-btn):disabled{opacity:.45;cursor:default}.ui .pick,.ui .tabs{display:flex;gap:0}.ui .pick button:not(.close-btn),.ui .tabs button:not(.close-btn){margin-left:-2px;border-radius:0;color:var(--dim)}.ui .pick button:not(.close-btn):first-child,.ui .tabs button:not(.close-btn):first-child{margin-left:0;border-radius:var(--ui-r) 0 0 var(--ui-r)}.ui .pick button:not(.close-btn):last-child,.ui .tabs button:not(.close-btn):last-child{border-radius:0 var(--ui-r) var(--ui-r) 0}.ui .pick button:not(.close-btn):hover:not(:disabled),.ui .tabs button:not(.close-btn):hover:not(:disabled){position:relative}.ui .pick button:not(.close-btn).on:not(:disabled),.ui .tabs button:not(.close-btn).on:not(:disabled){position:relative;background:#1c2c38;border-color:var(--hot);color:#fff;cursor:default}.ui .close-btn{background:none;border:0;color:var(--dim);cursor:pointer;font-size:1.4em;line-height:1;padding:0 .2em}.ui .close-btn:hover{color:#f55}.ui kbd{display:inline-block;padding:0 .4em;background:var(--second);border:0;border-radius:var(--ui-r);color:var(--ink);font:inherit}.app{position:relative;width:100%;height:100%;font:14px/1.4 ui-monospace,Consolas,monospace;cursor:default}.view{display:block;width:100%;height:100%}.net{position:absolute;top:10px;left:12px;color:var(--dim);pointer-events:none}.net .dot{display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:50%;background:var(--faint)}.net .dot.online{background:#5d5}.net .dot.reconnecting,.net .dot.connecting{background:#db5}.net .dot.full{background:#e55}.cockpit{position:absolute;inset:0;pointer-events:none;--hud: #8ff5d0;--hud-dim: #8ff5d055;font-family:Rajdhani,ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:.08em;color:var(--hud);text-shadow:0 0 6px #8ff5d080}.stick{position:absolute;left:50%;bottom:120px;width:84px;height:84px;margin-left:-42px;border:1px solid var(--hud-dim);border-radius:50%}.stick span{position:absolute;left:38px;top:38px;width:8px;height:8px;border-radius:50%;background:var(--hud);box-shadow:0 0 6px var(--hud)}.cluster{position:absolute;bottom:22px;display:flex;flex-direction:column;gap:6px;min-width:230px;padding:10px 14px;background:linear-gradient(#0a141299,#0a141244);clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.cluster.left{left:22px;border-left:2px solid var(--hud)}.cluster.right{right:22px;border-right:2px solid var(--hud);text-align:right}.side{font-size:.9em;letter-spacing:.3em}.side.blue{color:#8a9cff;text-shadow:0 0 6px #8a9cff80}.side.red{color:#ff6ab8;text-shadow:0 0 6px #ff6ab880}.gauge{display:flex;align-items:center;gap:8px}.gauge label{width:36px;font-size:.85em;opacity:.7}.gauge b{width:34px;text-align:right;font-size:1.3em}.segs{display:flex;gap:3px}.segs i{width:12px;height:10px;background:var(--hud-dim);transform:skew(-20deg)}.segs i.on{background:var(--hud);box-shadow:0 0 5px var(--hud)}.segs i.on.low{background:#ff5040;box-shadow:0 0 6px #ff5040}.line{width:147px;height:4px;background:var(--hud-dim)}.line span{display:block;height:100%;background:var(--hud);box-shadow:0 0 5px var(--hud)}.chips{display:flex;gap:10px;font-size:.85em;opacity:.55}.chips .on,.chips .ready{opacity:1}.chips .on{color:#fff}.gun{font-size:.95em;opacity:.4}.gun.on{opacity:1;font-size:1.1em}.gun kbd{margin-right:8px;padding:0 4px;border:1px solid var(--hud-dim);font:inherit}.gun em{margin-left:8px;font-style:normal;color:#fff}.gun .line{margin:3px 0 0 auto}.target{margin-top:4px;color:#ff7a60;text-shadow:0 0 6px #ff7a6080}.target span{display:block;font-size:.85em;opacity:.8}.score{position:absolute;top:10px;left:50%;transform:translate(-50%);padding:0 18px;background:#0a1412b0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%);font:700 2em Rajdhani,ui-monospace,monospace;letter-spacing:.1em;pointer-events:none}.score i{margin:0 10px;font-style:normal;color:#ffffff60}.score .blue{color:#8a9cff;text-shadow:0 0 10px #8a9cff}.score .red{color:#ff6ab8;text-shadow:0 0 10px #ff6ab8}.feed{position:absolute;top:10px;right:12px;text-align:right;color:#ffb080;font:600 1.05em Rajdhani,ui-monospace,monospace;letter-spacing:.05em;pointer-events:none}.wreck{position:absolute;top:38%;width:100%;text-align:center;font-size:2.2em;letter-spacing:.4em;color:#ff5040;text-shadow:0 0 12px #ff5040}.wreck small{display:block;font-size:.45em;letter-spacing:.2em;opacity:.8}.warn{position:absolute;top:18%;width:100%;text-align:center;font:700 1.6em Rajdhani,ui-monospace,monospace;letter-spacing:.4em;pointer-events:none}.warn .locked{color:#ffb040;animation:blink 1s steps(2) infinite}.warn .missile{color:#ff3020;animation:blink .25s steps(2) infinite}@keyframes blink{50%{opacity:.25}}.menu{position:absolute;top:40px;left:12px;bottom:12px;overflow-y:auto;pointer-events:none}.card{display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));background:#101418d8;pointer-events:auto}.card h1{font-size:1.6em;letter-spacing:.2em}.card .row{display:flex;gap:8px}.card input{flex:1;min-width:0}.card table{border-spacing:0 3px}.card td:first-child{padding-right:12px;white-space:nowrap}.card .hint{color:var(--dim)}.card .war{align-items:center}.card .war>span{width:50px;color:var(--dim)}.card .war input[type=range]{flex:1}.card .crowd{width:64px;text-align:right}.card .level{display:flex;align-items:center;gap:12px}.card .level span{width:70px;color:var(--dim)}.card .level input{flex:1}
