/* Keep HP on its original maximum-HP scale; shield is an independent layer. */
#hp-bar{isolation:isolate}
#hp-bar.has-shield{border-color:#f7faf5;box-shadow:0 0 0 1px #12201680}
#hp-bar.has-shield #hp-fill{transition:none}
#hp-bar #hp-shield-fill{background:#f7faf5;transition:none;pointer-events:none}
#hp-bar #hp-shield-overflow{background:repeating-linear-gradient(120deg,transparent 0,transparent 3px,#fffffff0 3px,#fffffff0 4px);transition:none;pointer-events:none}
#hp-bar .hp-readout{left:auto;right:5px;display:flex;gap:6px;white-space:nowrap}
#hp-bar .hp-readout b{position:static;color:#e3cfb7;font-variant-numeric:tabular-nums;font-weight:400;text-shadow:0 1px 2px #000}
#hp-bar .hp-readout #hp-shield-value{color:#fff}
#hp-bar.has-shield .hp-readout b{text-shadow:0 1px 1px #08140d,0 -1px 1px #08140d,1px 0 1px #08140d,-1px 0 1px #08140d}
@media(max-width:380px){#hp-bar .hp-readout{gap:4px}#hp-bar .hp-readout #hp-shield-value{font-size:7px}}