/* Minimal, animated dash indicator. No new update loop or JS animations. */
#hud #dashStatus{
  min-width:0;height:43px;display:inline-flex;align-items:center;gap:9px;
  padding:6px 11px;border:1px solid rgba(135,217,229,.35);border-radius:9px;
  background:rgba(9,31,47,.65);box-shadow:0 5px 20px rgba(2,16,28,.16);
  color:#f2feff;letter-spacing:0;backdrop-filter:blur(4px);
}
#hud #dashKey{
  width:29px;height:29px;display:grid;place-items:center;flex:none;
  padding:0;border:1px solid rgba(86,230,224,.37);border-radius:6px;
  background:rgba(50,223,209,.1);color:#75f2e7;
  font:900 12px/1 Arial,sans-serif;box-shadow:none;
}
#hud #dashStatus .dash-readout{min-width:41px;display:flex;flex-direction:column;gap:3px;text-align:left}
#hud #dashLabel{display:block;font:900 12px/1 Arial,sans-serif;letter-spacing:.04em;white-space:nowrap}
#hud #dashTimer{display:block;color:#9ee7f2;font:800 9px/1 Arial,sans-serif;letter-spacing:.02em;white-space:nowrap}
#hud #dashTimer:empty{display:none}
#hud #dashCharges{display:flex;gap:4px;align-items:center;margin-left:1px}
#hud #dashCharges>i{
  width:7px;height:20px;display:block;border:1px solid rgba(183,226,236,.22);
  border-radius:2px;transform:skew(-12deg);background:rgba(160,201,211,.19);
  box-shadow:none;transition:background-color .25s ease,border-color .25s ease,opacity .25s ease;
}
#hud #dashCharges>i.ready{
  background:linear-gradient(180deg,#8bfff1,#27cfc9);border-color:#aafff6;
  box-shadow:0 0 7px rgba(75,255,236,.35);animation:dash-pip-ready .32s cubic-bezier(.2,.9,.2,1) both;
}
#hud #dashCharges>i.charging{
  background:linear-gradient(0deg,#48ddd8 var(--charge-progress),rgba(160,201,211,.19) var(--charge-progress));
  border-color:rgba(109,244,233,.48);animation:dash-pip-recharge 1.35s ease-in-out infinite alternate;
}
#hud #dashBar{display:none}
#hud #dashStatus.depleted{border-color:rgba(153,192,209,.25)}
#hud #dashStatus.refilled{animation:dash-refill-glow .7s ease-out both}
@keyframes dash-pip-ready{0%{opacity:.55;transform:skew(-12deg) scaleY(.72)}70%{transform:skew(-12deg) scaleY(1.14)}100%{opacity:1;transform:skew(-12deg) scaleY(1)}}
@keyframes dash-pip-recharge{from{opacity:.62}to{opacity:1}}
@keyframes dash-refill-glow{0%{box-shadow:0 0 0 0 rgba(99,255,229,.38)}100%{box-shadow:0 5px 20px rgba(2,16,28,.16)}}
@media(max-width:700px){#hud #dashStatus{height:40px;gap:7px;padding:5px 9px}#hud #dashKey{width:27px;height:27px}#hud #dashCharges>i{height:18px}}
@media(prefers-reduced-motion:reduce){#hud #dashStatus.refilled,#hud #dashCharges>i.ready,#hud #dashCharges>i.charging{animation:none}#hud #dashCharges>i{transition:none}}