/* Compact metal-framed combat HUD. */
#vitals{left:18px!important;top:18px!important;transform:none!important;width:300px!important;height:76px;padding:8px 16px 9px 92px!important;border:2px solid #768996!important;border-radius:38px 19px 23px 38px;background:linear-gradient(180deg,#71818c 0%,#273841 16%,#101d28 46%,#394b56 88%,#8e9b9e)!important;box-shadow:0 0 0 2px #172029,0 3px 8px #000b,inset 0 1px 1px #e1e2cf!important;font:700 11px system-ui!important;pointer-events:none}
#vitals:after{content:'';position:absolute;right:-6px;top:29px;width:9px;height:16px;background:linear-gradient(90deg,#83929a,#1e2d37);border:1px solid #14232e;border-radius:5px}
#hudPortraitFrame{position:absolute;left:19px;top:6px;width:61px;height:61px;border-radius:50%;border:3px solid #b3a77c;box-shadow:0 0 0 3px #182735,0 0 0 5px #647582,inset 0 0 10px #000;overflow:hidden;background:#0a141c}
#hudPortrait{position:absolute;width:340%;max-width:none;height:auto;left:-120%;top:-18%;image-rendering:auto}
#hudLevel{position:absolute;left:-11px;top:24px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 40% 25%,#596972,#101b28 70%);border:2px solid #9b9677;box-shadow:0 0 0 2px #1e2a32;color:#fff3ce;font:bold 14px Georgia,serif;z-index:2}
#vitals .vitalsHeading{display:block;margin:0 0 4px!important;height:14px;font-size:10px;color:#eadcab;text-shadow:0 1px 2px #000;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#vitals .vitalRow{position:relative;display:grid;grid-template-columns:20px 1fr;gap:3px;height:16px;font:bold 9px system-ui;color:#eee2b8}
#vitals .vitalRow+.vitalRow{margin-top:3px}#vitals .vitalTrack{height:14px;border:1px solid #b2bec4;border-radius:7px;background:#09101b;box-shadow:0 0 0 1px #10202b,inset 0 2px 4px #000}
#vitals .vitalValue{position:absolute;left:23px;right:0;top:0;line-height:16px;text-align:center;font:700 9px/16px system-ui;color:white;text-shadow:0 1px 2px #000,1px 0 2px #000}
#vitals #hpFill{background:linear-gradient(#ffac9a,#e53836 48%,#9e1727 55%,#ef5b48);border-radius:7px;box-shadow:inset 0 1px 0 #ffe1bf}
#vitals #mpFill{background:linear-gradient(#96ddff,#3295f1 48%,#1858a8 55%,#499df3);border-radius:7px;box-shadow:inset 0 1px 0 #d0f5ff}
#info{top:106px!important;left:18px!important;padding:5px 9px!important;font:10px/1.5 system-ui!important;border:1px solid #6b777b70!important;border-radius:6px;background:#0b1925ad!important;box-shadow:none!important}#info .hudBrand{display:none}
#targetHud{position:fixed;left:336px;top:23px;width:268px;height:65px;z-index:20;pointer-events:none;color:#fff0b8;font:700 12px system-ui;padding:8px 14px;border:2px solid #7b8b94;border-radius:18px;background:linear-gradient(#73808a,#1b2935 23%,#172531 70%,#61737f);box-shadow:0 0 0 2px #192530,0 3px 8px #000a}
body:not(.playing) #targetHud{display:none}
#targetName{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;text-align:center;margin:0 0 5px;text-shadow:0 1px 3px #000}#targetTrack{height:16px;border:1px solid #b6bfc2;border-radius:8px;position:relative;background:#180f18;overflow:hidden;box-shadow:0 0 0 1px #0d1c26}#targetFill{height:100%;background:linear-gradient(#ffbc85,#e84431 45%,#a91924 55%,#eb5b43);transition:width .18s ease;border-radius:8px}#targetValue{position:absolute;inset:0;text-align:center;font:700 10px/14px system-ui;color:#fff3db;text-shadow:0 1px 2px #000}
@media(max-width:780px){#vitals{left:12px!important;top:10px!important;width:270px!important}#targetHud{left:300px;top:15px;width:230px}#info{top:99px!important;left:12px!important}}
@media(max-width:620px){#vitals{width:245px!important;padding-right:10px!important}#targetHud{left:18px;top:100px;width:239px;height:61px}#info{top:173px!important;max-width:240px}}

/* Armor class badge beside the level / portrait. Uses the existing defense stat. */
#hudAC{position:absolute;left:0;top:61px;z-index:3;display:flex;align-items:center;gap:4px;min-width:63px;height:22px;box-sizing:border-box;padding:2px 7px 2px 4px;border:1px solid #a99a74;border-radius:5px;background:linear-gradient(#35444c,#101e29);color:#e4d6ae;font:600 10px/1 system-ui;white-space:nowrap;box-shadow:0 2px 5px #0008}
#hudAC svg{width:16px;height:16px;fill:#81969c;stroke:#e2debf;stroke-width:1.3;stroke-linejoin:round}#hudAC b{color:#fff5d8;font-size:12px;font-variant-numeric:tabular-nums}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){#hudAC{top:61px;height:25px;min-width:80px;font-size:15px}#hudAC b{font-size:17px}#hudAC svg{width:20px;height:20px}}
