#hud-left .bar { image-rendering: pixelated; }
#hud-left .bar {
  border: 1px solid #1a0d06;
  border-radius: 0;
  background: #2c1a10;
  box-shadow: 0 0 0 1px rgba(226, 187, 99, 0.28);
}
#hud-left .resource-bar { height: 14px; margin-top: 4px; }
#hud-left .bar::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
#hud-left .bar .fill { border-radius: 0; }
#hud-left .bar .fill::after { display: none; }
#hud-left .fill.hp { background: url("../assets/ui/hud-pixel/ruot-huyet.png?v=b29036e591d4") 0 0 / 48px 12px repeat-x; }
#hud-left .fill.mp { background: url("../assets/ui/hud-pixel/ruot-linh.png?v=97b2ba72e25d")  0 0 / 48px 12px repeat-x; }
#hud-left .fill.sp { background: url("../assets/ui/hud-pixel/ruot-than.png?v=9bdcd1ee4f41")  0 0 / 48px 12px repeat-x; }
#hud-left .fill.bp { background: url("../assets/ui/hud-pixel/ruot-giap.png?v=167920510e1d")  0 0 / 8px 12px repeat-x; }
#hud-left .fill.xp {
  background: url("../assets/ui/hud-pixel/ruot-tu-vi.png?v=83d080e996db") 0 0 / 16px 9px repeat-x;
  box-shadow: none;
}
#hud-left .resource-bar .resource-icon {
  inset: auto;
  top: -2px; left: -4px;
  width: 16px; height: 16px;
  font-size: 0; color: transparent; text-shadow: none;
  border: 0; border-radius: 0;
  background: transparent 0 0 / 16px 16px no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(20, 10, 4, 0.55));
}
#hud-left .hp-icon { background-image: url("../assets/ui/hud-pixel/ic-huyet.png?v=0c4c54d48def") !important; }
#hud-left .mp-icon { background-image: url("../assets/ui/hud-pixel/ic-linh.png?v=57bdc3ce6eca")  !important; }
#hud-left .sp-icon { background-image: url("../assets/ui/hud-pixel/ic-than.png?v=927b9773d077")  !important; }
#hud-left .bp-icon { background-image: url("../assets/ui/hud-pixel/ic-giap.png?v=c4b39d1a4237")  !important; }
#hud-left .resource-bar .bar-label,
#hud-left .resource-bar .bar-value,
#hud-left #row-xp > span {
  font-family: var(--font-ui);
  font-weight: 700;
  text-shadow: 1px 0 #1a0904, -1px 0 #1a0904, 0 1px #1a0904, 0 -1px #1a0904,
               1px 1px #1a0904, -1px 1px #1a0904 !important;
}
#hud-left .resource-bar .bar-label {
  top: -1px; bottom: -1px; left: 16px; right: 62px;
  font-size: 11px; line-height: 14px;
  letter-spacing: 0.04em;
}
#hud-left .resource-bar .bar-value {
  top: -1px; right: 4px;
  font-size: 11px; line-height: 14px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
#hud-left #row-hp .bar-label { color: #ffe2da; }
#hud-left #row-mp .bar-label { color: #e2f7ff; }
#hud-left #row-sp .bar-label { color: #f4e6ff; }
#hud-left #row-bp .bar-label { color: #fff4d2; }
#hud-left .resource-bar.locked .bar-label { color: rgba(255, 255, 255, 0.6); }
#hud-left #row-xp.thin { margin-top: 5px; }
#hud-left #row-xp > span {
  top: -2px; bottom: -2px;
  font-size: 10px; line-height: 13px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: #eaffde;
}
@keyframes hudpx-troi { to { background-position-x: 48px; } }
@keyframes hudpx-lui  { to { background-position-x: -48px; } }
#hud-left .fill.hp { animation: hudpx-troi 8s steps(24) infinite; }
#hud-left .fill.mp { animation: hudpx-troi 9.6s steps(48) infinite; }
#hud-left .fill.sp { animation: hudpx-lui 12s steps(48) infinite; }
@media (prefers-reduced-motion: reduce) {
  #hud-left .fill.hp, #hud-left .fill.mp, #hud-left .fill.sp { animation: none; }
}
html.gfx-sieu-lo #hud-left .fill { animation: none; }