/* Art-backed HUD; native coordinates measured on the approved 1672 x 941 artwork. */
:root{--ui-fit:.8;--hud-scale:1;--hud-art:url('hud-ornate-v2.png')}
button:focus-visible{outline:2px solid #ffe2a2;outline-offset:3px}
#hero,#minimap,#quest,.combat-dock,.utility,.wallet{background-image:var(--hud-art);background-size:1672px 941px;background-repeat:no-repeat;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:0;filter:drop-shadow(0 3px 3px #0007)}
#hero{top:0;left:0;width:500px;height:180px;display:block;background-position:0 0;transform:scale(var(--ui-fit));transform-origin:top left}
#portrait{position:absolute;left:12px;top:10px;width:146px;height:165px;background:none;border:0;box-shadow:none;padding:0;border-radius:45%;cursor:pointer}
#portrait:hover{filter:drop-shadow(0 0 7px #e8bc6b)}
#level{position:absolute;left:33px;top:108px;width:44px;height:36px;text-align:center;font:25px/36px Georgia;color:#f7e5b8;letter-spacing:0;text-shadow:0 2px 3px #000}
.vitals{position:absolute;left:158px;top:28px;width:305px}
#name{height:29px;margin:0 0 9px;padding:0 8px;font:25px/29px Georgia;color:#f2e4c7;text-shadow:0 2px 3px #000;background:none;border:0}
.resource{position:relative;height:24px;margin:0 4px 7px 0;overflow:hidden;clip-path:polygon(0 0,98% 0,100% 50%,98% 100%,0 100%)}
.resource i{display:block;height:100%;transition:width .25s;background:linear-gradient(#f16c5e 0%,#ab181c 18%,#800a10 65%,#e0453a 95%);box-shadow:inset 0 0 7px #260002}
.resource span{position:absolute;inset:0;font:18px/24px Georgia;color:#fff0d3;text-align:center;text-shadow:0 2px 3px #000,0 0 4px #000}
.mana{height:20px}.mana i{width:100%;opacity:.8;background:linear-gradient(#5ccaf8,#1469a6 28%,#07345a 75%,#2584b9);box-shadow:inset 0 0 6px #00112b}.mana span{font-size:14px;line-height:20px}
.mana.energy i{opacity:.9;background:linear-gradient(#fff19a,#e6bd27 28%,#9a6410 75%,#f1ca38);box-shadow:inset 0 0 6px #4b2e00,0 0 5px #e1b62d55}
#minimap{top:0;right:0;width:302px;height:338px;background-position:-1370px 0;transform:scale(var(--ui-fit));transform-origin:top right}
#map-open{position:absolute;inset:0 0 auto;width:302px;height:280px;border:0;background:none;box-shadow:none;padding:0;border-radius:50%;isolation:isolate}
#map-open:after{content:'';position:absolute;inset:0;background:var(--hud-art) -1370px 0/1672px 941px;pointer-events:none}
.map-terrain{position:absolute;left:28px;top:35px;width:245px;height:224px;border-radius:50%;background:url('village-v1.png') center/100% 100%;filter:sepia(.35) brightness(.8);overflow:hidden;z-index:-1}
#map-marker,#large-marker{position:absolute;width:13px;height:13px;transform:translate(-50%,-50%) rotate(45deg);background:#fff0b6;border:2px solid #796431;box-shadow:0 0 7px #ffdc84;z-index:1}.north{display:none}
.map-label{position:absolute;left:38px;top:278px;width:226px;height:44px;text-align:center;font:21px Georgia;color:#f2e6c8;text-shadow:0 2px 3px #000}.map-label small{font:14px Georgia;color:#8eb56d;letter-spacing:0;margin-top:5px}
#quest{right:0;top:calc(350px * var(--ui-fit));width:338px;height:100px;background-position:-1334px -350px;transform:scale(var(--ui-fit));transform-origin:top right}
#quest small{position:absolute;left:52px;top:16px;font:17px Georgia;letter-spacing:1px;color:#ecdab0}#quest b{position:absolute;left:52px;top:59px;font:17px Georgia;color:#e8dfc7}#quest h2,#quest p,#objective{display:none}
footer{position:absolute;bottom:0;width:100%;height:0;padding:0;background:none;pointer-events:none}
.hint{position:absolute;bottom:calc(198px * var(--ui-fit));left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#e0d2b1;opacity:.75;text-shadow:0 2px 4px #000}
.combat-dock{position:absolute;width:868px;height:198px;bottom:calc(15px * var(--ui-fit));left:50%;transform:translateX(-50%) scale(var(--ui-fit));transform-origin:bottom center;background-position:-400px -728px;pointer-events:none}
.gem{display:none}.dock-main{position:absolute;inset:0}.action-row{position:absolute;left:130px;top:50px;display:flex;gap:8px}
#skills{display:flex;gap:8px}body.in-game #skills{opacity:1}
#skills button,#potion,#mana-potion,.locked-slots>span{position:relative;width:70px;height:98px;flex:none;padding:0;border:0;background:none;box-shadow:none;border-radius:3px;pointer-events:auto}
#skills button:disabled{cursor:not-allowed;opacity:1!important}#skills button:hover,#potion:hover{background:#edc77816;filter:drop-shadow(0 0 6px #f8c777)}
.atlas{position:absolute;left:3px;top:5px;width:62px;height:65px;display:block;background-image:url('hud-classic-v1.png');background-size:1672px 941px;background-position:var(--atlas-x,-530px) -785px;border-radius:2px;pointer-events:none}
#skills button span{display:none}#skills strong,.action-row kbd{position:absolute;top:70px;left:18px;width:31px;height:30px;min-width:0;text-align:center;margin:0;font:20px/30px Georgia;color:#eeddb6;text-shadow:0 2px 2px #000;background:#0c100bef;border:1px solid #725c35;border-radius:3px;box-shadow:inset 0 0 0 1px #b69b5933;transform:none;z-index:2}
.locked-slots{display:flex;gap:8px}.locked-slots>span{cursor:help}.locked-slots>span:before{content:'';position:absolute;left:3px;top:5px;width:62px;height:65px;background:url('hud-classic-v1.png') -612px -785px/1672px 941px;filter:brightness(.8);border-radius:2px}.locked-slots>span:nth-child(2):before{background-position:-690px -785px}.locked-slots>span:nth-child(3):before{background-image:url('hud-ornate-v2.png');background-position:-768px -783px}.locked-slots kbd{color:#b6a582}.slot-lock{position:absolute;top:10px;right:5px;width:10px;height:8px;font-size:0;background:#bda269;border:1px solid #f0d7a2;box-shadow:0 1px 4px #000}.slot-lock:before{content:'';position:absolute;left:1px;top:-6px;width:4px;height:5px;border:1px solid #ead09a;border-radius:4px 4px 0 0}
#potion{margin-left:0}.potion-art{display:none}#potion-count{position:absolute;right:3px;top:44px;font:18px Georgia;background:#0b0e0b;padding:0 2px;color:#ffe7b5;text-shadow:0 1px 2px #000}#potion:disabled{opacity:.6}#mana-potion{cursor:not-allowed}#mana-potion:after{content:'—';position:absolute;right:5px;top:46px;background:#0b0e0b;color:#aaa087}
.experience-track{position:absolute;left:125px;top:157px;width:626px;height:18px;background:#0b0e0b;overflow:hidden;clip-path:polygon(1% 0,99% 0,100% 50%,99% 100%,1% 100%,0 50%)}.experience-track i{display:block;height:100%;background:linear-gradient(#ffe9a8,#d6a543 25%,#9d6b1e 70%,#f4cf72);box-shadow:inset 0 0 4px #c0872a;transition:width .25s}.experience-track span{position:absolute;inset:0;text-align:center;font:15px/18px Georgia;color:#f5e7c6;text-shadow:0 2px 2px #000,0 0 4px #000}
.wallet{position:absolute;left:calc(14px * var(--ui-fit));bottom:calc(36px * var(--ui-fit));width:390px;height:66px;background-position:-14px -843px;transform:scale(var(--ui-fit));transform-origin:bottom left;padding:23px 65px;font:20px Georgia;color:#e3cb93;pointer-events:auto}
.utility{position:absolute;right:calc(4px * var(--ui-fit));bottom:calc(26px * var(--ui-fit));width:408px;height:101px;background-position:-1264px -814px;display:flex;transform:scale(var(--ui-fit));transform-origin:bottom right;pointer-events:auto}
.utility button{position:relative;width:68px;min-width:0;height:101px;padding:67px 0 0;border:0;background:none;box-shadow:none;border-radius:0;font:14px Georgia;color:#e6d1a5;text-align:center;text-shadow:0 1px 3px #000}.utility button b{display:none}.utility button:hover{background:#f4c66e18;filter:drop-shadow(0 0 5px #d8a254)}
.large-map{position:relative}.large-map img{display:block;width:100%}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-grid p{display:flex;justify-content:space-between;border-bottom:1px solid #756340;padding:8px}.skill-description{position:relative;border-bottom:1px solid #685a3a;padding:10px 45px}.skill-description kbd{position:absolute;left:12px;top:25px;color:#eacb8f;font:22px Georgia}.skill-description h2{font-size:22px}.skill-description p{margin:5px 0}select{background:#191d13;color:#ead9b2;padding:8px;border:1px solid #88754d;margin-left:12px}#items>button{width:100%}#toast{z-index:10}dialog{z-index:20}body:not(.in-game)>#minimap{visibility:hidden}
@media(max-width:700px){#quest{display:none}.hint{display:none}.utility button{font-size:17px}.wallet{width:300px;clip-path:inset(0 0 0 0)}dialog{max-height:85vh;overflow:auto}}
@media(prefers-reduced-motion:reduce){.resource i,.experience-track i{transition:none}}

/* Pixel-aligned interiors: artwork remains the only source of borders. */
.vitals{inset:0;width:500px;padding:0;pointer-events:none}
#name{position:absolute;left:165px;top:28px;width:285px;height:27px;line-height:27px;padding:0;margin:0;overflow:hidden;white-space:nowrap}
.resource{position:absolute;margin:0;border:0;box-shadow:none;transform:none;border-radius:0;background:#101511 url('resource-bar-background-v1.png') center/100% 100% no-repeat}
.health{left:153px;top:63px;width:314px;height:26px;clip-path:path('M 7 1 L 307 1 Q 310 6 313 12 L 306 24 L 1 24 Q 5 15 7 1 Z')}
.mana{left:149px;top:96px;width:299px;height:22px;clip-path:path('M 7 1 L 291 1 L 298 10 L 290 20 L 1 20 Q 5 11 7 1 Z')}
.resource span{font-size:16px;line-height:26px;transform:none;white-space:nowrap}.mana span{font-size:12px;line-height:22px}
.resource i{position:relative;overflow:hidden}
/* Three identical tiles: one full tile of travel makes the loop boundary identical.
   Animate only transform, at constant speed, without a hold or visible reset. */
.resource i:after{content:'';position:absolute;top:0;bottom:0;left:0;width:300%;background:linear-gradient(90deg,transparent 0%,#ffffff08 20%,#ffffff24 50%,#ffffff08 80%,transparent 100%) 0 0/33.3333333333% 100% repeat-x;animation:resource-light 6s linear infinite;will-change:transform;pointer-events:none}
.mana i:after{animation-duration:7s;animation-delay:-3.5s}
@keyframes resource-light{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.3333333333%,0,0)}}
.combat-dock{background-image:none;isolation:isolate}
.combat-dock:before{content:'';position:absolute;inset:0;background:var(--hud-art) -400px -728px/1672px 941px;z-index:-1;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 43%,99.3% 43%,99.3% 100%,0 100%,0 92%,1% 92%,1% 56%,0 56%)}
.action-row{display:block;left:130px;top:50px;width:610px;height:98px}
#skills,.locked-slots{position:absolute;inset:0;display:block;pointer-events:none}
#skills button,.locked-slots>span,#potion,#mana-potion{position:absolute;top:0;width:70px;height:95px;pointer-events:auto;transition:filter .16s ease,background-color .16s ease}
#skills button:nth-child(1){left:0}#skills button:nth-child(2){left:78px}#skills button:nth-child(3){left:156px}
.locked-slots>span:nth-child(1){left:234px}.locked-slots>span:nth-child(2){left:312px}.locked-slots>span:nth-child(3){left:390px}
#potion{left:468px}#mana-potion{left:545px}
#skills strong,.action-row kbd{left:19px;top:69px;width:29px;height:25px;line-height:25px;font-size:18px;background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;bottom:auto;transform:none}
#skills button:active:not(:disabled),#potion:active:not(:disabled){filter:brightness(1.3)}
.experience-track{left:128px;top:158px;width:620px;height:15px}.experience-track span{font-size:13px;line-height:15px}
.utility{display:block;background-position:-1264px -814px;width:404px;height:101px}
.utility button{position:absolute;top:10px;width:63px;height:80px;padding:54px 0 0;display:block;overflow:hidden;white-space:nowrap;text-align:center;font-size:13px;line-height:20px;transition:background-color .15s ease,filter .15s ease}
.utility button:nth-child(1){left:8px}.utility button:nth-child(2){left:75px}.utility button:nth-child(3){left:141px}.utility button:nth-child(4){left:206px}.utility button:nth-child(5){left:272px}.utility button:nth-child(6){left:336px}
.utility button:hover{background:linear-gradient(#f7d59319,#efbc5830);filter:brightness(1.2)}.utility button:active{background:#efbc5840}
.utility button:focus-visible{outline:1px solid #e6c789;outline-offset:-3px;border-radius:5px}
#map-open:focus-visible,#portrait:focus-visible{outline:none}
#map-open:focus-visible:after,#map-open:hover:after{filter:drop-shadow(0 0 4px #e7bd7180)}
#map-open:after{transition:filter .2s ease}
#portrait:focus-visible{box-shadow:inset 0 0 12px #e7bd71;border-radius:48%}
.gem{display:block;position:absolute;pointer-events:none;width:54px;height:77px;border:0;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#ffdfb666,transparent 60%);opacity:.4;animation:gem-light 4.5s ease-in-out infinite}
.gem.red{left:58px;top:77px}.gem.blue{left:751px;top:77px;animation-delay:-2s;background:radial-gradient(ellipse at 35% 20%,#bfeeff66,transparent 60%)}
@keyframes gem-light{50%{opacity:.12}100%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.resource i:after,.gem{animation:none}.utility button,#skills button,#potion,#map-open:after{transition:none}}
.cooldown{display:none;position:absolute;left:3px;top:5px;width:62px;height:65px;background:#090d0bb8;color:#fff1cc;font:23px/65px Georgia;text-align:center;font-style:normal;text-shadow:0 2px 4px #000;border-radius:2px;pointer-events:none}.cooldown.visible{display:block}

/* Foreground metal: only the two inset wells are cut out of this artwork layer.
   Resource fills, shine and labels render underneath, never across the frame. */
#hero{isolation:isolate}
#hero .vitals{z-index:1}
#hero:after{content:'';position:absolute;inset:0;background:var(--hud-art) 0 0/1672px 941px;z-index:2;pointer-events:none;clip-path:path(evenodd,'M 145 55 H 496 V 126 H 145 Z M 162 65 H 460 L 465 75 L 459 86 H 156 Q 160 76 162 65 Z M 158 98 H 439 L 444 106 L 438 115 H 152 Q 156 107 158 98 Z')}
#hero #portrait{z-index:3}

/* Icon crops must stop above the baked-in keycap row in the reference image. */
.atlas,.locked-slots>span:before{height:59px}
/* Cover baked-in potion quantities with one live counter, or an empty well.
   These bounds cover the complete old glyph, not only its right-hand half. */
#potion-count{left:43px;right:auto;top:44px;width:22px;height:21px;padding:0 4px 0 0;background:#10110e;color:#ffe7b5;font:16px/21px Georgia;text-align:right;border-radius:2px}
#mana-potion:after{content:'';left:43px;right:auto;top:44px;width:22px;height:21px;background:#10110e;border-radius:2px}
/* Native key wells are centred independently of the icon crop above them. */
#skills strong,.action-row kbd{left:18px;top:68px;width:31px;height:27px;font-size:18px;line-height:27px;text-align:center;overflow:hidden}

/* One uniform slot grid replaces the baked-in frames beneath the live controls. */
.action-row:before{content:'';position:absolute;left:-5px;top:-3px;width:622px;height:103px;background:linear-gradient(#151711,#0c100c);pointer-events:none}
#skills button,.locked-slots>span,#potion,#mana-potion{background:none!important;filter:none!important;box-shadow:none!important;outline:none;border:0;isolation:isolate}
#skills button:before,.locked-slots>span:before,#potion:before,#mana-potion:before{content:'';position:absolute;left:0;top:0;width:70px;height:76px;border:2px ridge #a58a58;border-radius:5px;background:radial-gradient(ellipse at top,#3b3523,#10130f 75%);box-shadow:inset 0 0 0 2px #070a07,0 2px 3px #000;filter:none}
.locked-slots>span:nth-child(n):before{background:radial-gradient(ellipse at top,#3b3523,#10130f 75%)}
.action-row .atlas{display:block;left:7px;top:7px;width:56px;height:58px;background-image:url('hud-ornate-v2.png');background-position:calc(var(--atlas-x,-530px) - 5px) -788px;border-radius:2px;z-index:1}
.action-row .potion-art{left:18px;width:34px;background-position:-1013px -787px}
.action-row .mana-potion-art{left:18px;width:34px;background-position:-1091px -787px}
#skills button:after,#potion:after,#mana-potion:after{content:'';position:absolute;inset:0 auto auto 0;width:70px;height:76px;border:2px solid transparent;border-radius:5px;background:none;pointer-events:none;z-index:4;transition:border-color .16s,box-shadow .16s}
#skills button:hover:after,#skills button:focus-visible:after,#potion:hover:after,#potion:focus-visible:after{border-color:#e1c48b;box-shadow:inset 0 0 9px #e9bc4d30}
#skills button:active:not(:disabled):after,#potion:active:not(:disabled):after{box-shadow:inset 0 0 14px #f6d48965}
#skills strong,.action-row kbd{top:73px;left:19px;width:32px;height:26px;border:1px solid #a58a58;border-radius:3px;background:linear-gradient(#1e2117,#090d09);box-shadow:0 1px 3px #000,inset 0 0 0 1px #443a24;line-height:24px;z-index:5}
#potion-count{top:49px;left:45px;width:20px;height:20px;padding:0 2px;background:#10130fe8;font-size:14px;line-height:20px;z-index:3}
.slot-lock{top:7px;right:7px;z-index:3}.cooldown{left:7px;top:7px;width:56px;height:58px;line-height:58px;z-index:2}
@media(prefers-reduced-motion:reduce){#skills button:after,#potion:after{transition:none}}

/* Frameless artwork: exactly one atlas tile per independent, empty UI well. */
.action-row .atlas{left:7px;top:9px;width:56px;height:56px;background-image:url('ability-icons-v1.png');background-size:400% 200%;background-position:0 0;background-repeat:no-repeat;overflow:hidden}
.action-row .atlas[data-icon="1"]{background-position:33.333333% 0}
.action-row .atlas[data-icon="2"]{background-position:66.666667% 0}
.action-row .atlas[data-icon="3"]{background-position:100% 0}
.action-row .atlas[data-icon="4"]{background-position:0 100%}
.action-row .atlas[data-icon="5"]{background-position:33.333333% 100%}
.action-row .potion-art{background-position:66.666667% 100%}
.action-row .mana-potion-art{background-position:100% 100%}

/* Fill the inner well; the 3px inset leaves the metal rim fully exposed. */
.action-row .atlas{left:3px;top:3px;width:64px;height:70px;border-radius:3px;clip-path:inset(0 round 3px)}
.cooldown{left:3px;top:3px;width:64px;height:70px;line-height:70px;border-radius:3px}

/* Swordsman whirlwind: distinct circular attack artwork inside the existing well. */
#skills button[aria-label='Круговой удар'] .atlas{background-image:url('whirlwind-icon-v1.png');background-size:100% 100%;background-position:center}

/* Settings: separate sound and controls pages, styled as an in-world brass panel. */
.settings-tabs{display:flex;gap:8px;margin:4px 0 22px;border-bottom:1px solid #75603b}.settings-tabs button{padding:9px 20px;border:0;border-bottom:2px solid transparent;background:none;box-shadow:none;color:#a99c7d}.settings-tabs button.active{color:#f0d9a4;border-bottom-color:#d2a556;background:linear-gradient(transparent,#c4943022)}.settings-page{display:none}.settings-page.active{display:block}.audio-setting{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,2fr) 48px 105px;align-items:center;gap:14px;padding:18px 14px;margin:10px 0;border:1px solid #6e5a373f;background:linear-gradient(90deg,#0e130ee8,#242417b8);box-shadow:inset 0 0 16px #0005}.audio-setting b{display:block;font:19px Georgia;color:#ead4a3}.audio-setting small{margin-top:5px;color:#958b71}.audio-setting output{font:16px Georgia;color:#e2c681;text-align:right}.audio-setting input[type='range']{appearance:none;width:100%;height:7px;border:1px solid #77633d;background:#090d0a;box-shadow:inset 0 1px 4px #000}.audio-setting input[type='range']::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border:2px solid #ddc17f;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3d791,#8c672b 70%);box-shadow:0 0 8px #e4bc5655;cursor:pointer}.sound-switch{display:flex;align-items:center;gap:7px;color:#cdbc94;font:13px Georgia;cursor:pointer}.sound-switch input{appearance:none;width:34px;height:18px;border:1px solid #6f5b38;border-radius:12px;background:#11150f;box-shadow:inset 0 1px 4px #000;position:relative}.sound-switch input:after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#76684a;transition:left .15s,background .15s}.sound-switch input:checked{background:#3d502f;border-color:#b99a55}.sound-switch input:checked:after{left:18px;background:#f0cf82;box-shadow:0 0 6px #e6bd5a}.settings-page select{min-width:150px}@media(max-width:700px){.audio-setting{grid-template-columns:1fr 48px}.audio-setting>div,.audio-setting .sound-switch{grid-column:1/-1}}

/* Portrait well measured in the atlas coordinate system: centre (91,86), radius 53. */
#hero{background-image:none;isolation:isolate}
#hero::before{content:'';position:absolute;left:38px;top:33px;width:106px;height:106px;border-radius:50%;background:#050706;z-index:1;pointer-events:none}
#hero #portrait{z-index:auto;filter:none}
#hero #hud-model-head{position:absolute;left:26px;top:23px;width:106px;height:106px;object-fit:cover;border:0;border-radius:50%;clip-path:circle(50%);background:transparent;z-index:2;pointer-events:none}
#hud-model-head:not([src]){visibility:hidden}
#hero:after{z-index:4;clip-path:path(evenodd,'M 0 0 H 500 V 180 H 0 Z M 38 86 A 53 53 0 1 0 144 86 A 53 53 0 1 0 38 86 Z M 162 65 H 460 L 465 75 L 459 86 H 156 Q 160 76 162 65 Z M 158 98 H 439 L 444 106 L 438 115 H 152 Q 156 107 158 98 Z M 158 28 H 463 V 57 H 158 Z')}
#hero #level{z-index:5;left:33px;top:105px;width:44px;height:40px;line-height:40px;background:none;border:0;box-shadow:none}
#hud-class-icon{position:absolute;right:0;bottom:7px;width:34px;height:34px;display:grid;place-items:center;background:#101812;border:1px solid #b59252;border-radius:50%;box-shadow:0 2px 5px #000a;pointer-events:none;z-index:5}
#hud-class-icon img.class-icon{width:26px;height:26px;position:static;object-fit:contain;transform:none}
/* Independent portrait, vitals, frame, level and class layers. */
#hero{--hud-layer-portrait:1;--hud-layer-vitals:10;--hud-layer-frame:20;--hud-layer-level:30;--hud-layer-class:40}
#hero::before,#hero::after{display:none}
#hero #portrait{z-index:var(--hud-layer-portrait);filter:none}
#hero .vitals{z-index:var(--hud-layer-vitals)}
.hud-portrait-backdrop{position:absolute;left:26px;top:23px;width:106px;height:106px;border-radius:50%;background:#69704a url('hud-portrait-backdrop-v1.png') center/cover no-repeat;pointer-events:none}
#hud-hero-frame{position:absolute;inset:0;background:var(--hud-art) 0 0/1672px 941px;pointer-events:none;z-index:var(--hud-layer-frame);clip-path:path(evenodd,'M 0 0 H 500 V 180 H 0 Z M 38 86 A 53 53 0 1 0 144 86 A 53 53 0 1 0 38 86 Z M 162 65 H 460 L 465 75 L 459 86 H 156 Q 160 76 162 65 Z M 158 98 H 439 L 444 106 L 438 115 H 152 Q 156 107 158 98 Z M 158 28 H 463 V 57 H 158 Z')}
#hud-level-badge{position:absolute;left:43px;top:113px;width:48px;height:48px;background:var(--hud-art) -43px -113px/1672px 941px;clip-path:circle(50%);z-index:var(--hud-layer-level);pointer-events:none}
#hero #level{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;line-height:1;font-size:25px;background:none;border:0;box-shadow:none}
#hero #hud-class-icon{left:128px;top:112px;right:auto;bottom:auto;z-index:var(--hud-layer-class)}
/* Readable character nameplate, independently layered above its backing. */
#hero #name{position:absolute;left:158px;top:28px;width:305px;height:29px;padding:0 12px;margin:0;border:1px solid #ac884d;border-radius:3px 12px 3px 3px;background:linear-gradient(110deg,#101713f5,#263024ed 60%,#131a14ed);box-shadow:inset 0 1px 0 #e7c77930,inset 0 -3px 8px #0008,0 2px 5px #0007;color:#f6e7c7;font:22px/27px Georgia;letter-spacing:.015em;text-shadow:0 2px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}