.hud{--squid-blue: #4da8ff;--squid-blue-dim: #2c6fb0;--squid-blue-glow: rgba(77, 168, 255, .55);position:fixed;inset:0;pointer-events:none;z-index:10;color:var(--squid-blue);font:12px/1.3 system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 8px var(--squid-blue-glow);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top    top" ".      ." "left   right";padding:12px;gap:12px}.hud>*{pointer-events:none}.hud .interactive{pointer-events:auto}.hud__top{grid-area:top;display:flex;justify-content:space-between;gap:8px}.hud__bottom-left{grid-area:left;display:flex;flex-direction:column;gap:8px}.hud__bottom-right{grid-area:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}.hud__panel{background:#08101c80;border:1px solid var(--squid-blue-glow);border-radius:6px;padding:8px 12px;min-width:120px}.hud__fuel{display:flex;flex-direction:column;gap:4px}.hud__fuel-bar{width:160px;height:8px;border-radius:4px;background:#4da8ff1f;overflow:hidden}.hud__fuel-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--squid-blue-dim),var(--squid-blue));box-shadow:0 0 12px var(--squid-blue-glow);transition:width .12s linear}.hud__connection{font-weight:500}.hud__connection[data-state=connected]{color:var(--squid-blue)}.hud__connection[data-state=connecting],.hud__connection[data-state=reconnecting]{color:#f0c870;text-shadow:0 0 8px rgba(240,200,112,.5)}.hud__connection[data-state=offline]{color:#f06070;text-shadow:0 0 8px rgba(240,96,112,.5)}@media (max-aspect-ratio: 16/10) and (max-width: 900px) and (orientation: landscape){.hud{font-size:11px;padding:8px}.hud__panel{min-width:96px;padding:6px 8px}.hud__fuel-bar{width:120px}}@media (orientation: portrait){.hud{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;grid-template-areas:"top    top" "left   right" ".      ." ".      ."}.hud__bottom-right{align-items:flex-start;text-align:left}}.hud .interactive{min-width:44px;min-height:44px;display:inline-grid;place-items:center}.touch-controls{--squid-blue: #4da8ff;--squid-blue-soft: rgba(77, 168, 255, .18);--squid-blue-glow: rgba(77, 168, 255, .55);position:fixed;inset:0;pointer-events:none;z-index:20;transition:opacity .28s ease-out}.touch-controls--idle{opacity:.3}.touch-controls>*{pointer-events:auto}.touch-stick{position:absolute;bottom:6vmin;width:clamp(132px,22vmin,200px);height:clamp(132px,22vmin,200px);display:grid;place-items:center;color:var(--squid-blue);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}.touch-stick--left{left:4vmin}.touch-stick--right{right:4vmin}.touch-stick__base{position:absolute;inset:0;border-radius:50%;background:var(--squid-blue-soft);border:1px solid var(--squid-blue-glow);box-shadow:0 0 24px var(--squid-blue-glow) inset;pointer-events:none}.touch-stick__knob{position:relative;width:36%;height:36%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),var(--squid-blue) 70%);box-shadow:0 0 14px var(--squid-blue-glow);pointer-events:none;will-change:transform}.touch-stick__label{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;pointer-events:none}.touch-button{position:absolute;display:grid;place-items:center;font:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--squid-blue);background:var(--squid-blue-soft);border:1px solid var(--squid-blue-glow);border-radius:9999px;box-shadow:0 0 16px var(--squid-blue-glow);min-width:44px;min-height:44px;padding:0 14px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform 80ms ease-out,background .12s}.touch-button:active,.touch-button.active{background:#4da8ff52;transform:scale(.96)}.touch-button--thrust{bottom:4vmin;left:50%;transform:translate(-50%);width:clamp(112px,18vmin,160px);height:clamp(48px,8vmin,64px)}.touch-button--thrust:active,.touch-button--thrust.active{transform:translate(-50%) scale(.96)}.touch-button--ping{right:4vmin;bottom:calc(6vmin + clamp(132px,22vmin,200px) + 24px)}.touch-button--map{right:4vmin;bottom:calc(6vmin + clamp(132px,22vmin,200px) + 84px)}body.input-keyboard .touch-controls{display:none}