/* Existing HUD geometry and percentage widths stay in styles.css / UISystem.
   The frame is sliced, not stretched as a full bar; the fill is a clipped strip. */
.resource-panel .resource-bar {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}
.resource-panel .health-bar {
  border-image-source: url("assets/ui-hud-v107/health-frame.png");
  border-image-slice: 2 fill;
}
.resource-panel .mana-bar {
  border-image-source: url("assets/ui-hud-v107/mana-frame.png");
  border-image-slice: 2 fill;
}
.resource-panel .experience-bar {
  border-image-source: url("assets/ui-hud-v107/experience-frame.png");
  border-image-slice: 1 fill;
}
.resource-panel .resource-bar .resource-fill {
  background-repeat: repeat-x;
  background-size: 8px 100%;
  image-rendering: pixelated;
}
.resource-panel .health-bar .resource-fill {
  background-image: url("assets/ui-hud-v107/health-fill.png");
}
.resource-panel .mana-bar .resource-fill {
  background-image: url("assets/ui-hud-v107/mana-fill.png");
}
.resource-panel .experience-bar .resource-fill {
  background-image: url("assets/ui-hud-v107/experience-fill.png");
}
.resource-panel .resource-fill::after { display: none; }