/* The live portrait, text, resource fills and class icon stay independent. */
#hero{width:500px;height:187.5px;background:none;border:0;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none}
#hero:before{width:500px;height:187.5px;background:url('hero-hud-frame-v9.webp') center/500px 187.5px no-repeat;z-index:20}
#hero #hud-hero-frame{display:none}
#hero #portrait{width:156px;height:180px;z-index:1}
#hero .hud-portrait-backdrop,#hero #hud-model-head{left:34.3px;top:28.2px;width:104px;height:104px;object-fit:cover}
#hero .vitals{width:500px;height:187.5px}
#hero #name{left:171px;top:56px;width:292px;height:26px;font:21px/26px Georgia;z-index:25}
#hero .resource{mask-image:none;clip-path:none;border-radius:11px;z-index:10;background:#250a0c;overflow:hidden}
#hero .health{left:164px;top:95px;width:310px;height:24px}
#hero .mana{left:164px;top:127px;width:278px;height:17px;background:#181a0b}
#hero .health span{font:16px/24px Georgia}
#hero .mana span{font:12px/17px Georgia}
#hero #hud-level-badge{left:19.72px;top:125.68px;width:36px;height:36px;background:none;clip-path:none;z-index:50}
#hero #level{inset:0;width:36px;height:36px;transform:none;padding:0;font:23px/36px Georgia;display:block;text-align:center}
#hero #hud-class-icon{left:117.18px;top:127.43px;width:32px;height:32px;z-index:50;display:grid;place-items:center;background:none;border-radius:50%;overflow:hidden}
#hero #hud-class-icon:before,#hero #hud-class-icon:after{display:none}
#hero #hud-class-icon img.class-icon{width:27px;height:27px;object-fit:contain;position:static}