/* Original bronze instrument frames. Outer dimensions and persisted placement
   remain owned by the existing movable HUD layout. */
/* Layout handles must not consume a flex column and crush names or bars. */
.layout-edit #player-frame>.hud-grip,
.layout-edit #target-frame>.hud-grip{
 position:absolute;left:0;right:0;top:-21px;height:18px;
 box-sizing:border-box;padding:2px 4px;z-index:6;
}
#player-frame.unit-frame,#target-frame.unit-frame{
 --unit-bronze:#a88952;
 border-color:#877046;
 background:linear-gradient(110deg,#17252cf7 0%,#101c24f5 56%,#0c151dee 100%);
 box-shadow:inset 0 1px #c9ac6a55,inset 0 -1px #050a0de6,inset 0 0 0 3px #060f14b8,0 3px 9px #02090bb3;
 isolation:isolate;
}
#player-frame.unit-frame::before,#target-frame.unit-frame::before{
 content:"";position:absolute;inset:-3px;pointer-events:none;z-index:3;
 border:15px solid transparent;
 border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23967a49' stroke-width='2'%3E%3Cpath d='M2 17V2h15M47 2h15v15M62 47v15H47M17 62H2V47'/%3E%3Cpath stroke='%23d0b477' stroke-width='1' d='M5 16V5h11M48 5h11v11M59 48v11H48M16 59H5V48'/%3E%3C/g%3E%3Cg fill='%23ad8b50' stroke='%23483925' stroke-width='1'%3E%3Cpath d='m4 4 10 3-6 2-1 5Zm56 0-10 3 6 2 1 5Zm0 56-10-3 6-2 1-5ZM4 60l10-3-6-2-1-5Z'/%3E%3C/g%3E%3C/svg%3E") 25% / 15px / 0 stretch;
}
.unit-frame .portrait{
 border-color:#c1a064;
 background:radial-gradient(ellipse at 38% 26%,#4c666a,#20313c 58%,#0c1721);
 box-shadow:0 0 0 1px #25281d,0 0 0 3px #8e72464d,inset 0 0 7px #050a0d,2px 2px 5px #0009;
}
.unit-frame .portrait::after{
 content:"";position:absolute;inset:1px;border:1px solid #e1c58938;border-radius:50%;
 box-shadow:inset 0 2px 3px #d9b16c24,inset 0 -3px 4px #0008;pointer-events:none;z-index:1;
}
.unit-frame .portrait>span{
 width:23px;height:23px;line-height:21px;font-size:13px;font-weight:bold;
 border-color:#c4a366;background:radial-gradient(ellipse at top,#394149,#111c24 72%);
 box-shadow:0 0 0 1px #0a1218,0 2px 3px #000a;color:#fff0c0;text-shadow:0 1px 2px #000;
}
.unit-frame .unit-body{padding-right:1px}
.unit-frame .unit-name{gap:7px;line-height:17px;margin:0 0 4px;min-height:17px}
.unit-frame .unit-name b{
 min-width:0;max-width:none;flex:1;font-size:14px;line-height:17px;font-weight:bold;
 color:#f0ddb1;text-shadow:0 1px 2px #000,0 0 4px #0009;
}
.unit-frame .unit-name span{
 flex:0 1 auto;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font:12px/15px Georgia,'Times New Roman',serif;color:#c5baa0;text-shadow:0 1px #000;
}
.unit-frame .bar{
 height:17px;margin:3px 0;border:1px solid #080f13;
 background:linear-gradient(#071016,#172128);
 box-shadow:0 0 0 1px #7d704b,inset 0 1px 3px #000a;
}
.unit-frame .bar::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(#fff6cb2b,transparent 36%,transparent 62%,#0005);
 box-shadow:inset 0 1px #d7c39324,inset 0 -1px #0007;
}
.unit-frame .bar span{
 z-index:1;padding:0;line-height:15px;font:12px/15px Georgia,'Times New Roman',serif;
 font-variant-numeric:tabular-nums;color:#fff7db;text-shadow:1px 1px 1px #000,-1px -1px 1px #000,0 0 3px #000;
}
.unit-frame .health i{background:linear-gradient(#648842,#315729)}
.unit-frame .enemy i{background:linear-gradient(#ad5145,#722a29)}
.unit-frame .spirit span{font-size:12px;color:#f2e9cb}
#target-frame .target-portrait{background:radial-gradient(ellipse at 38% 26%,#735d49,#382d2b 62%,#171a21)}
#target-range{display:block;margin-top:6px;font:12px/15px Georgia,'Times New Roman',serif;color:#ded1af;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Default title avoids the target; explicitly positioned titles retain priority. */
#hud:has(#target-frame:not([hidden])) #zone-title:not([style*="top:"]):not([style*="left:"]){top:27px;left:calc(50% + 160px)}
@media(min-width:761px) and (max-width:940px){#hud:has(#target-frame:not([hidden])) #zone-title:not([style*="top:"]):not([style*="left:"]){top:190px;left:50%}}
.larger-ui-text .unit-frame .unit-name b{font-size:15px}
.larger-ui-text .unit-frame .bar span,.larger-ui-text #target-range{font-size:13px}
.high-contrast-ui #player-frame.unit-frame,.high-contrast-ui #target-frame.unit-frame{background:#09131d;border-color:#e0c381}
.high-contrast-ui .unit-frame .unit-name span,.high-contrast-ui #target-range{color:#fff0cc}
@media(prefers-reduced-motion:reduce){.unit-frame .bar i{transition:none}}
.reduced-ui-motion .unit-frame .bar i{transition:none}
@media(forced-colors:active){
 #player-frame.unit-frame,#target-frame.unit-frame{border:1px solid CanvasText;box-shadow:none;background:Canvas}
 .unit-frame::before,.unit-frame .portrait::after,.unit-frame .bar::after{display:none}
 .unit-frame .unit-name b,.unit-frame .unit-name span,.unit-frame .bar span,#target-range{color:CanvasText;text-shadow:none}
 .unit-frame .bar{border-color:CanvasText;box-shadow:none}
}