/* Scene HUD: original VARDENYX colors, ornamental portrait rings, compact classic RPG bars. */
.unit-frames{--unit-width:264px;--unit-height:88px;--unit-top:max(10px,env(safe-area-inset-top));--unit-edge:max(12px,env(safe-area-inset-left));position:absolute;inset:0;pointer-events:none;z-index:70;color:#f5e9c7}
.unit-frame{position:absolute;top:var(--unit-top);width:min(var(--unit-width),calc(50% - 44px));min-height:var(--unit-height);display:flex;align-items:center;gap:9px;padding:9px;border:1px solid #a68c57;border-radius:45px 10px 10px 45px;background:linear-gradient(155deg,#253d3ff5,#101e27f5);box-shadow:0 3px 12px #06131799,inset 0 0 0 2px #3d4a42;pointer-events:auto;text-align:left;font:inherit}
.player-unit-frame{left:var(--unit-edge);cursor:pointer}
.player-unit-frame:hover{border-color:#ecd18a;background:linear-gradient(155deg,#354b46,#162733)}
.player-unit-frame:focus-visible{outline:3px solid #f1d28e;outline-offset:3px}
.target-unit-frame{right:calc(max(12px,env(safe-area-inset-right)) + 60px)}
.target-unit-frame[hidden]{display:none}
.unit-portrait{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:50%;border:3px ridge #c6ab6e;box-shadow:0 0 0 2px #17262a,inset 0 0 12px #000;background:radial-gradient(circle,#5d7874,#172833);display:block}
.unit-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;border-radius:50%;pointer-events:none}
.unit-portrait svg{display:block;width:100%;height:100%;border-radius:50%;pointer-events:none}
.unit-portrait b{position:absolute;right:-3px;bottom:-3px;min-width:23px;height:23px;padding:2px;border:1px solid #be9d62;border-radius:50%;background:#182931;color:#f4db96;font-size:11px;text-align:center;line-height:17px}
.unit-details{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.unit-details>strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 13px Georgia,serif;color:#f6e8c2;text-shadow:0 1px 2px #000}
.unit-resource{position:relative;height:17px;flex-shrink:0;background:#08151c;box-shadow:inset 0 1px 4px #000;border:1px solid #07151b;border-radius:3px;overflow:hidden}
.unit-resource i{position:absolute;inset:0 auto 0 0;display:block;width:0;transition:width .25s ease-out}
.unit-hp i{background:linear-gradient(#dc5556,#972b3c)}
.unit-mana i{background:linear-gradient(#449cdb,#215094)}
.unit-resource span{position:relative;display:block;text-align:center;font:700 10px/15px system-ui,sans-serif;color:white;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.unit-target-state{font:700 10px system-ui;color:#d5c4a5}
.unit-target-state:empty,.unit-effects:empty{display:none}
.unit-effects{display:flex;gap:4px;flex-wrap:wrap}
.unit-effect{display:inline-flex;align-items:center;gap:2px;min-width:22px;height:21px;padding:1px 3px;border:1px solid #bba978;background:#213c31;border-radius:4px;color:#c8ed8c;font:700 13px system-ui}
.unit-effect small{font-size:9px}.effect-burning,.effect-fire{color:#ffd189;background:#592d24}.effect-slow{color:#b6e8ff;background:#24495a}
.unit-dead .unit-portrait img{filter:grayscale(1);opacity:.65}
.unit-frame-hurt{animation:unit-frame-damage .6s ease-out}
@keyframes unit-frame-damage{0%,45%{box-shadow:0 0 16px #f74f4f,inset 0 0 16px #dd333377;border-color:#ff8181}100%{box-shadow:0 3px 12px #06131799}}
/* Reserve separate bands for HUD and location heading; menus and modal dialogs stay above. */
.app-shell:has(.unit-frames) .field-overlay-heading{top:112px;max-width:calc(100% - 240px)}
.app-shell:has(.unit-frames) .city-location .location-heading,.app-shell:has(.unit-frames) .gate-location .location-heading{top:110px}
.app-shell:has(.unit-frames) .game-minimap-hud{top:128px}
@media(max-width:950px),(max-height:560px){
 .unit-frames{--unit-width:208px;--unit-height:71px;--unit-top:max(6px,env(safe-area-inset-top));--unit-edge:8px}
 .unit-frame{padding:6px;gap:7px;width:min(var(--unit-width),calc(50% - 36px))}
 .unit-portrait{flex-basis:48px;width:48px;height:48px;border-width:2px}
 .unit-details{gap:3px}.unit-details>strong{font-size:11px}.unit-resource{height:15px}.unit-resource span{font-size:9px;line-height:13px}
 .target-unit-frame{right:58px}.unit-portrait b{font-size:10px;min-width:20px;height:20px;line-height:14px}
 .app-shell:has(.unit-frames) .field-overlay-heading{top:90px;max-width:calc(100% - 165px)}
 .app-shell:has(.unit-frames) .city-location .location-heading,.app-shell:has(.unit-frames) .gate-location .location-heading{top:88px}
 .app-shell:has(.unit-frames) .game-minimap-hud{top:112px}
 .unit-effect{height:17px;min-width:18px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.unit-resource i{transition:none}.unit-frame-hurt{animation:none;border-color:#ff8181}}

@media(max-width:460px){.unit-portrait{flex-basis:40px;width:40px;height:40px}.unit-resource span{font-size:8px}.unit-details>strong{font-size:10px}}