/* High-resolution sculpted RPG artwork, with live values fitted to its wells. */
#hero{left:calc(18px * var(--ui-fit));top:calc(18px * var(--ui-fit));width:500px;height:167px;filter:drop-shadow(0 3px 3px #0008)}
#hero #portrait{left:0;top:0;width:150px;height:167px;border:0;background:none;box-shadow:none;border-radius:50%;padding:0}
#hero #portrait:before{display:none}
#hero #portrait:hover{filter:drop-shadow(0 0 4px #d9b15c55)}
#hero .hud-portrait-backdrop,#hero #hud-model-head{left:32px;top:29px;width:95px;height:95px;border-radius:50%}
#hero:before{content:'';display:block;position:absolute;inset:0;width:500px;height:167px;border-radius:0;background:url('hero-hud-frame-v8.png') center/500px 167px no-repeat;z-index:0;pointer-events:none}
#hero #hud-hero-frame{display:block;inset:0;background:url('hero-hud-metal-overlay.svg') center/500px 167px no-repeat;clip-path:none;z-index:20}
#hero .vitals{inset:0;width:500px;height:167px;display:block;pointer-events:none;z-index:auto}
#hero #name{position:absolute;left:154px;top:50px;width:297px;height:26px;box-sizing:border-box;padding:0 7px;margin:0;border:0;background:none;box-shadow:none;border-radius:0;font:22px/26px Georgia;letter-spacing:.01em;color:#f5e8cb;text-shadow:0 2px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero #name{z-index:25}
#hero .resource{position:absolute;margin:0;padding:0;border:0;box-shadow:none;background:transparent;border-radius:0;clip-path:none;overflow:hidden;transform:none;z-index:10}
#hero .health{left:140px;top:87px;width:341px;height:26px;clip-path:none}
#hero .mana{left:130px;top:112px;width:319px;height:24px;clip-path:none}
#hero .resource i{height:100%;border-radius:0;box-shadow:inset 0 1px 0 #ffddaa55,inset 0 -2px 5px #0006;transition:width .25s}
#hero .resource span{font:16px/24px Georgia;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.02em}
#hero .mana span{font:14px/21px Georgia}
#hero #hud-level-badge{left:27px;top:103px;width:43px;height:43px;background:url('hero-hud-frame-v8.png') -27px -103px/500px 167px no-repeat;clip-path:circle(50%);border:0;border-radius:50%;box-shadow:none;z-index:50}
#hero #hud-level-badge:before{display:none}
#hero #level{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;margin:0;font:25px/1 Georgia;letter-spacing:0;text-align:center;transform:translate(1px,-4px);color:#fae8bc;text-shadow:0 2px 3px #000}
#hero #hud-class-icon{left:122px;top:2px;width:48px;height:48px;border:0;background:none;box-shadow:none;z-index:50;isolation:isolate}
#hero #hud-class-icon:before{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#344432,#0c1710);z-index:-1}
#hero #hud-class-icon:after{content:'';position:absolute;inset:0;background:url('hud-class-frame-v1.png') center/contain no-repeat;pointer-events:none}
#hero #hud-class-icon img.class-icon{width:29px;height:29px;position:relative;z-index:1}

#hero .resource{mask-image:url('hero-hud-wells-mask.svg');mask-size:500px 167px;mask-repeat:no-repeat;mask-mode:alpha}
#hero .health{mask-position:-140px -87px}
#hero .mana{mask-position:-130px -112px}
#hero .resource{pointer-events:auto}
#hero #hud-class-icon,#hero #hud-level-badge{pointer-events:auto}
#hero .resource:focus-visible{outline:1px solid #ead098;outline-offset:2px}
#resource-tooltip,#mob-target-tooltip{position:fixed;z-index:10002;padding:7px 10px;border:1px solid #aa9363;border-radius:5px;background:linear-gradient(145deg,#161910f5,#070a06fa);box-shadow:0 3px 10px #0008,inset 0 0 0 2px #050704;color:#f2e2b9;font:13px/1.2 Georgia,serif;pointer-events:none;white-space:nowrap}
#resource-tooltip[hidden],#mob-target-tooltip[hidden]{display:none}