.hud{
  position:absolute;
  left:22px;
  right:22px;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  font-family: var(--font);
}

.hud__row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.hud__pill{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(233,238,247,.85);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  backdrop-filter: blur(8px);
}

.hud__bar{
  flex:1;
  min-width:220px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
  backdrop-filter: blur(8px);
}

.hud__label{
  font-size:12px;
  color:rgba(233,238,247,.70);
  margin-bottom:6px;
}

.hud__meter{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.hud__fill{
  height:100%;
  width:50%;
  background:rgba(199,255,107,.60);
}

.hud__small{
  color:rgba(233,238,247,.75);
  font-size:12px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 10px;
  backdrop-filter: blur(8px);
}