#hud{
  position:absolute;top:10px;left:10px;
  font-size:clamp(11px,2.8vw,14px);
  color:#ffffff;line-height:1.9;pointer-events:none;
  text-shadow:0 0 10px rgba(0,0,60,1);
  z-index:10;
}
#hud .lbl{color:rgba(255,255,255,0.6)}
#hud .val{color:#ffffff;font-weight:700}
#hud .warn{color:rgba(255,120,50,0.95);font-weight:700}
#hud-zoom{display:none}

#leg{
  position:absolute;top:10px;right:10px;
  font-size:clamp(10px,2.4vw,12px);
  color:#ffffff;line-height:2.1;pointer-events:none;text-align:right;
  text-shadow:0 0 8px rgba(0,0,40,0.9);
  z-index:10;
}
@media(max-width:400px){#leg{display:none}}

#stats-panel{
  position:absolute;bottom:8px;left:8px;
  font-size:clamp(11px,2.8vw,13px);
  color:#ffffff;line-height:1.9;pointer-events:none;
  background:rgba(3,5,15,0.85);
  border:1px solid rgba(74,158,255,0.25);
  border-radius:6px;padding:8px 12px;
  display:none;
  text-shadow:0 0 6px rgba(0,0,40,0.8);
  max-width:calc(100vw - 16px);
  z-index:10;
}
#stats-panel.visible{display:block}
#stats-panel .pct-bar{
  display:inline-block;height:6px;background:rgba(74,158,255,0.2);
  border-radius:3px;vertical-align:middle;margin-left:6px;width:70px;
  position:relative;overflow:hidden;
}
#stats-panel .pct-fill{
  position:absolute;top:0;left:0;height:100%;
  background:linear-gradient(90deg,#4a9eff,#ff7043);
  border-radius:3px;transition:width 0.3s;
}