:root{--panel: rgba(8, 12, 22, .72);--panel-border: rgba(120, 170, 255, .22);--accent: #6ea8ff;--good: #59d18e;--warn: #ffc857;--bad: #ff6b6b;--text: #e6ecf7;--text-dim: #9fb0cc}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#03050a;color:var(--text);font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#renderCanvas{width:100%;height:100%;display:block;outline:none;touch-action:none}#hud{position:fixed;inset:0;display:grid;grid-template-columns:minmax(240px,320px) 1fr minmax(200px,260px);grid-template-rows:auto 1fr auto;gap:12px;padding:16px;pointer-events:none}.hud-block{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:12px 14px;backdrop-filter:blur(8px);pointer-events:auto;font-size:12.5px}.hud-block h1{margin:0;font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}.hud-block h2{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);font-weight:600}.subtitle{margin:4px 0 0;font-size:12px;color:var(--text-dim)}#hud>header{grid-column:1;grid-row:1}.flight{grid-column:3;grid-row:1;justify-self:end;width:100%}.network{grid-column:3;grid-row:2;justify-self:end;align-self:start;width:100%}.controls{grid-column:1;grid-row:3;align-self:end;display:flex;flex-direction:column;gap:10px}.stats{grid-column:3;grid-row:3;justify-self:end;align-self:end;width:100%;line-height:1.7;color:var(--text-dim)}.stats b{color:var(--text);font-variant-numeric:tabular-nums}.hint{grid-column:2;grid-row:3;align-self:end;justify-self:center;font-size:11.5px;color:var(--text-dim);max-width:560px;text-align:center}.bar-row{display:grid;grid-template-columns:62px 1fr 48px;align-items:center;gap:8px;margin-bottom:6px;color:var(--text-dim)}.bar{height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#4a8cff,#7ec8ff);transition:width .08s linear}.bar>i.fuel{background:linear-gradient(90deg,#d9a13b,#ffd479)}.bar-row b{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}.kv{line-height:1.75;color:var(--text-dim);margin-top:6px}.kv b{color:var(--text);font-variant-numeric:tabular-nums}#flightState{color:var(--good)}#flightState.warn{color:var(--warn)}.player-list{list-style:none;margin:6px 0 0;padding:0;max-height:160px;overflow:auto}.player-list li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--text)}.player-list li span{color:var(--text-dim);font-variant-numeric:tabular-nums}.hint-small{margin:6px 0 0;font-size:11px;color:var(--text-dim)}#statusValue.online{color:var(--good)}#statusValue.connecting{color:var(--warn)}#statusValue.offline{color:var(--bad)}.field{display:flex;flex-direction:column;gap:4px}.field label{font-size:11.5px;color:var(--text-dim)}.row{display:flex;gap:8px}input[type=text]{flex:1;min-width:0;background:#0006;border:1px solid var(--panel-border);border-radius:8px;color:var(--text);padding:7px 9px;font-size:13px;font-family:inherit}input[type=text]:focus{outline:1px solid var(--accent)}button{background:#6ea8ff24;border:1px solid rgba(110,168,255,.45);color:var(--text);border-radius:8px;padding:7px 12px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:background .15s ease;white-space:nowrap}button:hover{background:#6ea8ff47}#crashBanner{position:fixed;left:50%;top:24px;transform:translate(-50%);background:#3c0a0ae6;border:1px solid rgba(255,107,107,.5);color:#ffd7d7;padding:10px 18px;border-radius:10px;font-size:13px;display:none;z-index:20}#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#03050ad9;font-size:15px;letter-spacing:.08em;color:var(--text-dim);z-index:10}@media(max-width:980px){#hud{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;overflow:auto}#hud>header,.flight,.network,.controls,.stats,.hint{grid-column:1;grid-row:auto;justify-self:stretch;align-self:start}}