/* Edge-hugging HP/MP bars: no frame, the bar itself is the widget. */
.resource-card{--bar-w:16px;position:absolute;bottom:24px;width:auto;height:min(320px,42vh);padding:0;display:block;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
.resource-card::before{display:none}
.health-card{left:0}
.mana-card{right:0}
.resource-label{display:none}
.resource-tube{position:relative;width:var(--bar-w);height:100%;flex:none;background:#050a0bcc;box-shadow:0 0 12px #0008}
.health-card .resource-tube{border-radius:0;border-right:1px solid #ffffff1c}
.mana-card .resource-tube{border-radius:0;border-left:1px solid #ffffff1c}
.resource-tube::after{content:'';position:absolute;inset:0;z-index:var(--z-local-overlay);pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(to top,transparent 0,transparent calc(10% - 1px),#0007 calc(10% - 1px),#0007 10%)}
.resource-card .meter{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:inherit;background:none;overflow:hidden}
.resource-card .meter i{position:absolute;bottom:0;left:0;width:100%!important;height:var(--resource-fill,100%);transition:height .2s ease;border-radius:inherit}
.resource-card .hp i{background:linear-gradient(90deg,#7e1f2c,#e0525a 55%,#a32a38);box-shadow:0 -1px #ffb3ad,0 0 10px #e0525a66}
.resource-card .mp i{background:linear-gradient(90deg,#174b7d,#4fb0e2 55%,#21709f);box-shadow:0 -1px #bfeaff,0 0 10px #4fb0e266}
.resource-value{position:absolute;z-index:var(--z-local-label);bottom:8px;left:calc(var(--bar-w) + 5px);width:12px;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;line-height:1;letter-spacing:.3px;white-space:nowrap;color:#f3e6c8;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000,0 0 6px #000}
.mana-card .resource-value{left:auto;right:calc(var(--bar-w) + 5px)}
.health-card.low .meter i{animation:hp-low 1s ease-in-out infinite}
.health-card.low .resource-tube{animation:hp-low-glow 1s ease-in-out infinite}
@keyframes hp-low{50%{filter:brightness(1.6) saturate(1.3)}}
@keyframes hp-low-glow{50%{box-shadow:0 0 18px #ff3b45cc}}
@media(max-width:750px){.resource-card{--bar-w:13px;height:min(220px,32vh)}.resource-value{font-size:8.5px}}
@media(max-height:550px){.resource-card{height:38vh}}
@media(prefers-reduced-motion:reduce){.resource-card .meter i{transition:none}.health-card.low .meter i,.health-card.low .resource-tube{animation:none}.health-card.low .resource-tube{box-shadow:0 0 14px #ff3b45aa}}