/* Approved iron-and-torn-cloth HUD. Image slices carry ornament only; all
   values, progress, hit areas and focus states remain live DOM controls. */
html.hw-game-active #appFrame .topbar{position:relative;isolation:isolate;justify-content:flex-end;gap:8px;padding:0 18px 0 0;border:0;background:#100b0fd9;box-shadow:none;overflow:visible}
html.hw-game-active #appFrame .topbar::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/hud/top-rail.webp') left center/calc(100% - 680px) 30px no-repeat;pointer-events:none}
html.hw-game-active #appFrame .top-resources{display:flex;flex:none;gap:3px;margin:0;height:100%;align-items:center}
html.hw-game-active #appFrame .topbar .resource-pill{display:flex;align-items:center;gap:4px;width:190px;min-width:0;height:100%;padding:3px 16px 3px 12px;border:0;border-radius:0;background:url('assets/hud/resource-plate.webp') center/100% 100% no-repeat;box-shadow:none}
html.hw-game-active #appFrame .topbar .resource-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;background:none;box-shadow:none;border-radius:0}
html.hw-game-active #appFrame .resource-icon img{width:100%;height:100%;object-fit:contain}
html.hw-game-active #appFrame .topbar .resource-pill>div:last-child{min-width:0}
html.hw-game-active #appFrame .topbar .resource-pill small{font-size:13px;line-height:16px;letter-spacing:.08em}
html.hw-game-active #appFrame .topbar .resource-pill strong{font-size:19px;line-height:21px}
html.hw-game-active #appFrame .player-tools{display:block;position:relative;flex:none;margin:0;width:50px;height:50px}
html.hw-game-active #appFrame #settingsButton{display:grid;place-items:center;width:50px;height:50px;min-width:44px;min-height:44px;padding:0;border:0;background:none;box-shadow:none}
html.hw-game-active #appFrame #settingsButton img{width:100%;height:100%;object-fit:contain}
html.hw-game-active #appFrame .player-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:100;width:228px;padding:7px;background:#160e16;border:1px solid #70503e;box-shadow:0 8px 24px #000b}
html.hw-game-active #appFrame .player-menu[hidden]{display:none}
html.hw-game-active #appFrame .player-menu button{display:block;width:100%;min-height:48px;padding:10px 14px;text-align:left;font:16px/1.25 var(--font-title,Georgia,serif);color:#dfc9a4;background:#26151d;border:1px solid #49313a}
html.hw-game-active #appFrame .player-menu button+button{margin-top:5px}
html.hw-game-active #appFrame .player-menu small{display:block;font:14px/1.3 var(--font-number,Georgia,serif);color:#ae967c;overflow:hidden;text-overflow:ellipsis}
html.hw-game-active #appFrame .hud-dock{--dock-left:clamp(416px,28vw,535px);--dock-center:clamp(228px,22vw,350px);--dock-right:clamp(180px,17.2vw,330px);display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:var(--dock-left) minmax(0,1fr) var(--dock-center) minmax(0,1fr) var(--dock-right);gap:0;align-items:end;padding:0;margin:0;width:100%;border:0;background:#100b10;box-shadow:none;isolation:isolate}
html.hw-game-active #appFrame .hud-dock::before{display:block;content:'';position:absolute;inset:0;z-index:-1;border:0;background-image:linear-gradient(#0b080cb8,#0b080c59),var(--hud-landscape);background-position:center bottom;background-size:cover;pointer-events:none}
html.hw-game-active #appFrame #errantVitals{position:relative;display:block;width:100%;height:auto;aspect-ratio:535/171;min-width:0;max-height:100%;padding:0;gap:0;border:0;border-radius:0;background:url('assets/hud/forged-vitals.webp?v=2') left bottom/100% 100% no-repeat;box-shadow:none;align-self:end}
html.hw-game-active #appFrame #errantVitals::before,html.hw-game-active #appFrame #errantVitals::after{display:none}
html.hw-game-active #appFrame #errantVitals .life-medallion{position:absolute;left:9.35%;top:13.5%;width:24%;height:auto;aspect-ratio:1;min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;z-index:1}
html.hw-game-active #appFrame #errantVitals .life-orb-liquid{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;opacity:1;clip-path:circle(50%);box-shadow:inset 0 0 9px 3px #0009;background:radial-gradient(ellipse at 35% 25%,#251018,#10090e 70%)}
html.hw-game-active #appFrame #errantVitals .vitals-copy{position:absolute;left:39.5%;top:25%;bottom:10%;width:39%;min-width:0;padding:2px 5px;background:linear-gradient(#170f16,#1b1117);border:0;box-shadow:none;border-radius:2px;display:flex;flex-direction:column;justify-content:center;gap:0}
html.hw-game-active #appFrame #errantVitals .hero-level-line{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:24px;line-height:24px;margin:0;padding:0}
html.hw-game-active #appFrame #errantVitals .errant-name{font-size:19px;line-height:24px;letter-spacing:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child{flex:none;font-size:13px;line-height:24px;letter-spacing:0;padding:0}
html.hw-game-active #appFrame #errantVitals #levelValue{font-size:16px;line-height:24px}
html.hw-game-active #appFrame #errantVitals .hero-health-panel{display:block;width:100%;margin:0;padding:0;border:0;background:none;box-shadow:none}
html.hw-game-active #appFrame #errantVitals .hero-health-line{display:flex;align-items:center;justify-content:space-between;gap:3px;line-height:22px;min-height:22px;margin:0;padding:0}
html.hw-game-active #appFrame #errantVitals .hero-health-line>span{font-size:13px;line-height:22px;letter-spacing:0}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:17px;line-height:22px;white-space:nowrap}
html.hw-game-active #appFrame #errantVitals .hero-health-track{height:8px;margin:1px 0 3px;border:1px solid #060407;border-radius:2px;box-shadow:0 0 0 1px #594139;background:#10080c;overflow:hidden}
html.hw-game-active #appFrame #errantVitals .hero-health-footer{display:flex;justify-content:space-between;gap:4px;white-space:nowrap;font-size:13px;line-height:18px;margin:0;padding:0;letter-spacing:0}
html.hw-game-active #appFrame #errantVitals :is(.hero-health-footer strong,#xpLabel){font-size:13px;line-height:18px;letter-spacing:0}
html.hw-game-active #appFrame #errantVitals .xp-track{height:6px;min-height:6px;margin:2px 0 0;border:1px solid #110b0d;box-shadow:0 0 0 1px #594139;border-radius:2px;background:#0b090d}
html.hw-game-active #appFrame #errantVitals #quickPotion{position:absolute;left:82.2%;top:27%;width:14%;height:65%;min-width:0;min-height:0;padding:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;border:0;background:#1b1119;border-radius:12px;box-shadow:none;transform:none;opacity:1}
html.hw-game-active #appFrame #errantVitals #quickPotionArt{display:block;width:48px;height:48px;min-height:0}
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{display:block;font-size:13px;line-height:18px;white-space:nowrap}
html.hw-game-active #appFrame #errantVitals #quickPotionCount{font-size:16px;line-height:18px;top:0;right:0}
html.hw-game-active #appFrame .hud-torn-banner{display:block;align-self:end;width:100%;height:min(100%,171px);background:url('assets/hud/forged-banner.webp') center bottom/100% 100% no-repeat;pointer-events:none}
html.hw-game-active #appFrame .hud-torn-banner-right{transform:scaleX(-1)}
html.hw-game-active #appFrame .relic-nav{display:flex;align-items:end;justify-content:center;align-self:end;gap:0;padding:0;margin:0;width:100%;height:auto;min-width:0;border:0;background:none;box-shadow:none}
html.hw-game-active #appFrame .relic-nav .relic-button{position:relative;display:block;flex:1;min-width:44px;min-height:44px;width:33.333%;height:auto;aspect-ratio:151/171;padding:0;margin:0;border:0;background:none;border-radius:0;box-shadow:none;transform:none}
html.hw-game-active #appFrame .relic-nav .relic-button::before,html.hw-game-active #appFrame .relic-nav .relic-button::after{display:none}
html.hw-game-active #appFrame .relic-nav .relic-button>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:fill;margin:0;opacity:1}
html.hw-game-active #appFrame .relic-nav .relic-badge{top:14%;right:7%}
html.hw-game-active #appFrame .hud-secondary{position:relative;display:flex;flex-direction:column;justify-content:end;align-items:stretch;gap:0;width:100%;height:auto;aspect-ratio:330/171;align-self:end;padding:15% 11% 5% 17%;margin:0;background:url('assets/hud/forged-exploration.webp') right bottom/100% 100% no-repeat;border:0;box-shadow:none}
html.hw-game-active #appFrame .hud-secondary>button{position:relative;display:flex;align-items:center;justify-content:end;flex:1;gap:6px;min-width:0;min-height:32px;width:100%;padding:0 12px 0 40px;background:none;border:0;box-shadow:none;border-radius:0;font-size:17px;line-height:22px;transform:none}
html.hw-game-active #appFrame .hud-secondary>button :is(img,.secondary-icon){display:none}
html.hw-game-active #appFrame .hud-secondary .secondary-label{display:block;min-width:0;font-size:17px;line-height:22px}
html.hw-game-active #appFrame .hud-secondary kbd{display:block;font-size:13px;line-height:18px;padding:0 3px}
html.hw-game-active #appFrame :is(.relic-button,.hud-secondary>button,#settingsButton,.player-menu button):is(:hover,:focus-visible){outline:1px solid #a48364;outline-offset:-4px;background-color:#af725b18}
/* Smaller desktop: keep text at readable size while giving the status plaque
   more of the left group's width. The screen corners remain flush. */
@media(max-width:1599px){
html.hw-game-active #appFrame .hud-secondary>button{padding-right:4px;padding-left:25px;gap:3px}
html.hw-game-active #appFrame #errantVitals .vitals-copy{left:34%;width:48%;top:16%;bottom:5%;padding:2px 4px}
html.hw-game-active #appFrame #errantVitals .life-medallion{left:7%;top:22%;width:25%}
html.hw-game-active #appFrame #errantVitals .errant-name{font-size:17px}
html.hw-game-active #appFrame #errantVitals #quickPotion{left:84%;width:12%;top:22%;height:70%}
html.hw-game-active #appFrame #errantVitals #quickPotionArt{width:32px;height:36px}
html.hw-game-active #appFrame #errantVitals .hero-health-line>span{font-size:13px}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:16px}
}
/* Preserve compact responsive modes without hiding the new menu or controls. */
@media(max-width:760px){
html.hw-game-active #appFrame .topbar{padding:0 4px;gap:2px}
html.hw-game-active #appFrame .topbar::before{display:none}
html.hw-game-active #appFrame .top-resources{flex:1;gap:0}
html.hw-game-active #appFrame .topbar .resource-pill{flex:1;width:auto;padding:4px 7px;gap:1px}
html.hw-game-active #appFrame .topbar .resource-icon{width:25px;height:25px}
html.hw-game-active #appFrame .topbar .resource-pill small{font-size:9px;line-height:13px;letter-spacing:0}
html.hw-game-active #appFrame .topbar .resource-pill strong{font-size:15px;line-height:18px}
html.hw-game-active #appFrame .player-tools,html.hw-game-active #appFrame #settingsButton{width:44px;height:44px}
html.hw-game-active #appFrame .hud-dock{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:90px minmax(0,1fr);align-items:end}
html.hw-game-active #appFrame #errantVitals{grid-column:1/-1;grid-row:1;width:100%;height:90px;aspect-ratio:auto;background-size:100% 100%}
html.hw-game-active #appFrame #errantVitals .life-medallion{left:5%;top:10%;width:70px;height:70px}
html.hw-game-active #appFrame #errantVitals .vitals-copy{left:29%;top:0;bottom:0;width:51%;padding:1px 4px}
html.hw-game-active #appFrame #errantVitals .hero-level-line,html.hw-game-active #appFrame #errantVitals .errant-name,html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child{font-size:12px;line-height:18px;min-height:18px}
html.hw-game-active #appFrame #errantVitals #levelValue{font-size:13px;line-height:18px}
html.hw-game-active #appFrame #errantVitals .hero-health-line,html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:13px;line-height:18px;min-height:18px}
html.hw-game-active #appFrame #errantVitals .hero-health-line>span{font-size:10px;line-height:18px}
html.hw-game-active #appFrame #errantVitals :is(.hero-health-footer,.hero-health-footer strong,#xpLabel){font-size:10px;line-height:16px}
html.hw-game-active #appFrame #errantVitals #quickPotion{left:83%;top:10%;width:14%;height:80%}
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{font-size:10px}
html.hw-game-active #appFrame .relic-nav{grid-row:2;grid-column:1;width:165px;max-width:100%;height:65px;justify-self:center}
html.hw-game-active #appFrame .relic-nav .relic-button{height:65px;aspect-ratio:auto}
html.hw-game-active #appFrame .hud-secondary{grid-row:2;grid-column:2;height:65px;aspect-ratio:auto;padding:0 5px 3px 8px}
html.hw-game-active #appFrame .hud-secondary>button{min-height:28px;padding:0;font-size:13px}
html.hw-game-active #appFrame .hud-secondary .secondary-label{font-size:13px;line-height:18px}
html.hw-game-active #appFrame .hud-torn-banner{display:none}
}
@media(min-width:761px) and (max-height:600px){
html.hw-game-active #appFrame .hud-dock{--dock-left:390px;--dock-center:190px;--dock-right:170px}
html.hw-game-active #appFrame #errantVitals{height:100px;aspect-ratio:auto}
html.hw-game-active #appFrame #errantVitals .vitals-copy{top:0;bottom:0}
html.hw-game-active #appFrame #errantVitals .life-medallion{width:80px;top:10px}
html.hw-game-active #appFrame .hud-secondary{height:95px;aspect-ratio:auto}
html.hw-game-active #appFrame .relic-nav .relic-button{height:85px;aspect-ratio:auto}
}
/* Retire the previous rail's forced flat backgrounds. */
html.hw-game-active #appFrame .topbar .resource-pill{background:url('assets/hud/resource-plate.webp') center/100% 100% no-repeat!important}
html.hw-game-active #appFrame .hud-secondary>button{height:auto;min-height:32px;border:0!important;background:none!important;box-shadow:none!important}
html.hw-game-active #appFrame .hud-secondary>button:is(:hover,:focus-visible,[aria-expanded=true]){background:#af725b18!important;box-shadow:none!important}
html.hw-game-active #appFrame .hud-dock::before{background-image:linear-gradient(#0b080cb8,#0b080c59),var(--hud-landscape)!important}
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals .life-medallion{left:9.35%;top:13.5%;width:24%;height:auto}}
html.hw-game-active #appFrame .hud-dock::before{height:auto}
html.hw-game-active #appFrame #errantVitals .hero-level-line{flex-direction:row;flex-wrap:nowrap}
html.hw-game-active #appFrame #errantVitals .hero-health-line{flex-direction:row;flex-wrap:nowrap}
/* Use separate lines for regeneration and XP so large values stay readable. */
html.hw-game-active #appFrame #errantVitals .hero-health-footer{flex-direction:column;align-items:flex-start;gap:0}
html.hw-game-active #appFrame #errantVitals .hero-health-line #heroHPText{order:0}
html.hw-game-active #appFrame .topbar .resource-pill strong{line-height:26px}
html.hw-game-active #appFrame .hud-dock{grid-template-columns:var(--dock-left) minmax(0,calc((100% - var(--dock-center))/2 - var(--dock-left))) var(--dock-center) minmax(0,1fr) var(--dock-right)}
@media(max-width:760px){html.hw-game-active #appFrame .hud-dock{grid-template-columns:minmax(0,1fr) 112px}html.hw-game-active #appFrame .topbar .resource-pill strong{line-height:20px}}
html.hw-game-active #appFrame .topbar .resource-pill small{margin-bottom:0;line-height:18px}
html.hw-game-active #appFrame #errantVitals #lifeOrbFill{background:url('assets/hud/orb-liquid.webp') center/cover no-repeat}
html.hw-game-active #appFrame .hud-secondary .secondary-label{flex:none;letter-spacing:.02em}
html.hw-game-active #appFrame .player-tools{order:1}
@media(max-width:760px){
html.hw-game-active #appFrame #errantVitals{background:#150d13;border-left:3px solid #56443e;border-bottom:2px solid #56443e}
html.hw-game-active #appFrame #errantVitals .life-medallion{border:3px solid #78645a;border-radius:50%;box-shadow:0 0 0 2px #21191a}
}
@media(min-width:761px) and (max-height:600px){
html.hw-game-active #appFrame #errantVitals .vitals-copy{padding:0 4px}
html.hw-game-active #appFrame #errantVitals .hero-level-line,html.hw-game-active #appFrame #errantVitals .errant-name,html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child,html.hw-game-active #appFrame #errantVitals #levelValue{line-height:22px;min-height:22px}
html.hw-game-active #appFrame #errantVitals .hero-health-track{height:6px;margin:1px 0 2px}
html.hw-game-active #appFrame #errantVitals .xp-track{height:5px;min-height:5px}
}
html.hw-game-active #appFrame #errantVitals .vitals-copy{min-height:0}
@media(min-width:761px) and (max-height:600px){
html.hw-game-active #appFrame #errantVitals{height:auto;max-height:none;aspect-ratio:535/171}
html.hw-game-active #appFrame #errantVitals .vitals-copy{top:16%;bottom:5%}
}
@media(max-width:760px){
html.hw-game-active #appFrame .topbar [data-resource] .resource-tooltip{position:fixed;top:calc(var(--resource-rail-bottom,78px) + 6px);left:12px;right:auto;transform:none;width:min(240px,calc(100vw - 24px))}
}

/* ===== Review pass (desktop, Full HD first) ===== */
/* Top rail: the brand was removed on purpose, so the empty ornament rail goes too; resources sit on a dark band. */
html.hw-game-active #appFrame .topbar::before{display:none}
/* Resource plates: label + value centred inside the plate window, larger icons (the art has padding). */
@media(min-width:761px){
html.hw-game-active #appFrame .topbar .resource-pill{padding:0 18px 0 14px;gap:8px}
html.hw-game-active #appFrame .topbar .resource-icon{width:42px;height:42px}
html.hw-game-active #appFrame .resource-icon img{scale:1.3}
html.hw-game-active #appFrame .topbar .resource-pill>div:last-child{display:flex;flex-direction:column;justify-content:center;height:100%;padding:3px 0 1px}
html.hw-game-active #appFrame .topbar .resource-pill small{font-size:11px;line-height:13px;letter-spacing:.12em;color:#b89a78}
html.hw-game-active #appFrame .topbar .resource-pill strong{font-size:18px;line-height:21px;color:#f1e4cf;font-variant-numeric:tabular-nums;text-shadow:0 1px 1px #000}
html.hw-game-active #appFrame .player-tools{margin-right:2px}
}
/* Relics at the art's own pixel size in Full HD (151/151/158 x 171), proportionally smaller below it: no stretching, no seams. */
@media(min-width:761px){
html.hw-game-active #appFrame .hud-dock{--relic-h:clamp(96px,8.9vw,171px);--dock-center:calc(var(--relic-h)*460/171)}
html.hw-game-active #appFrame .relic-nav .relic-button{flex:none;width:auto;height:var(--relic-h);aspect-ratio:auto}
html.hw-game-active #appFrame .relic-nav .relic-button>img{width:auto;height:100%;object-fit:contain}
/* torn banners keep their own proportions (no horizontal stretch) and hang from the relic frame */
html.hw-game-active #appFrame .hud-torn-banner{height:var(--relic-h);background-size:auto 100%;background-position:right bottom;background-repeat:no-repeat}
}
/* Potion: no loose box over the frame; icon, count and a compact "CURAR Q" that fits. */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals #quickPotion{background:radial-gradient(closest-side,#2a141c 60%,#1b111900);border-radius:50%}
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{font-size:11px;line-height:14px;letter-spacing:.04em;display:flex;align-items:center;gap:3px}
html.hw-game-active #appFrame #errantVitals #quickPotion kbd{font-size:11px;line-height:13px;padding:0 3px;min-width:14px;text-align:center}
}
/* Regions / Journal: keys clear of the frame's right edge */
@media(min-width:761px){html.hw-game-active #appFrame .hud-secondary>button{padding-right:24px}
html.hw-game-active #appFrame .hud-secondary kbd{min-width:18px;text-align:center}}
/* Narrower desktops: the potion keeps icon, count and its key only (the word no longer collides with the status plaque) */
@media(min-width:761px) and (max-width:1599px){
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{font-size:0;letter-spacing:0;gap:0}
html.hw-game-active #appFrame #errantVitals #quickPotion kbd{font-size:11px}
}
/* 1024-1279: Regions/Journal labels stay right of their painted icons */
@media(min-width:761px) and (max-width:1279px){
html.hw-game-active #appFrame .hud-secondary>button{padding-right:16px;gap:4px}
html.hw-game-active #appFrame .hud-secondary .secondary-label{font-size:14px;letter-spacing:0}
html.hw-game-active #appFrame .hud-secondary kbd{font-size:11px;min-width:15px}
}
/* Status reads directly on the forged frame (no separate box); a dark text shadow keeps it legible. */
html.hw-game-active #appFrame #errantVitals .vitals-copy{background:none!important;box-shadow:none!important}
html.hw-game-active #appFrame #errantVitals .vitals-copy :is(span,strong,small,b){text-shadow:0 1px 0 #000,0 0 3px #000,0 0 6px #000c}
/* Regions / Journal: names only (shortcuts M and J still work) */
html.hw-game-active #appFrame .hud-secondary kbd{display:none!important}
/* resource labels at the readable minimum (13px) */
@media(min-width:761px){html.hw-game-active #appFrame .topbar .resource-pill small{font-size:13px;line-height:15px;letter-spacing:.1em}}
/* Status merged into the forged frame: the live bars sit exactly on the frame's painted grooves (HP and XP) and the
   text sits in the free bands between them. Positions are fractions of the 535x171 frame art. */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .vitals-copy{left:0;top:0;width:100%;height:100%;bottom:auto;padding:0;display:block}
html.hw-game-active #appFrame #errantVitals .hero-health-panel{display:contents}
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line,.hero-health-line,.hero-health-footer){position:absolute;left:42.2%;width:35%;margin:0}
html.hw-game-active #appFrame #errantVitals .hero-level-line{top:27.5%;height:13%;min-height:0}
html.hw-game-active #appFrame #errantVitals .hero-health-line{top:40.5%;height:13%;min-height:0}
html.hw-game-active #appFrame #errantVitals .hero-health-footer{top:62%;height:12.5%;flex-direction:row;align-items:center;justify-content:space-between}
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line,.hero-health-line,.hero-health-footer)>*{line-height:1.15}
html.hw-game-active #appFrame #errantVitals .hero-health-track{position:absolute;left:41.6%;width:36.1%;top:53.8%;height:7.6%;margin:0;border:0;border-radius:2px;box-shadow:none}
html.hw-game-active #appFrame #errantVitals .xp-track{position:absolute;left:41.9%;width:35.3%;top:75.9%;height:4.4%;min-height:0;margin:0;border:0;border-radius:2px;box-shadow:none;background:#0d090c}
}
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-health-footer>*{white-space:nowrap}
html.hw-game-active #appFrame #errantVitals :is(.hero-health-footer,.hero-health-footer strong,#xpLabel){font-size:12px;letter-spacing:.02em}
}
@media(min-width:1600px){html.hw-game-active #appFrame #errantVitals :is(.hero-health-footer,.hero-health-footer strong,#xpLabel){font-size:13px}}
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-health-footer strong{display:inline!important;margin-left:.3em}
html.hw-game-active #appFrame #errantVitals :is(.hero-health-footer,.hero-health-footer>span,.hero-health-footer strong,#xpLabel){font-size:clamp(11px,.68vw,13px)!important;line-height:1.15!important}
html.hw-game-active #appFrame #errantVitals .errant-name{font-size:clamp(14px,1vw,19px)!important}
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line>span:last-child,.hero-health-line>span){font-size:clamp(11px,.68vw,13px)!important}
html.hw-game-active #appFrame #errantVitals #levelValue{font-size:clamp(12px,.83vw,16px)!important}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:clamp(13px,.88vw,17px)!important}
}
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-health-footer{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:6px!important}
html.hw-game-active #appFrame #errantVitals .hero-health-footer>span:first-child{display:inline-flex!important;align-items:baseline;gap:.35em;flex-direction:row!important}
}
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals .hero-health-footer>span:first-child{flex-wrap:nowrap!important;white-space:nowrap!important}}
/* Short regeneration label (index.html) so regen + XP share one line inside the frame; full value stays in its tooltip */
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals #xpLabel{overflow:hidden;text-overflow:ellipsis;min-width:0}html.hw-game-active #appFrame #errantVitals .hero-health-footer strong{margin-left:0}}
/* Regeneration lives in the Livro Negro status tiles; the HUD keeps HP and XP only */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-health-footer>span:first-child{display:none!important}
html.hw-game-active #appFrame #errantVitals .hero-health-footer{justify-content:flex-start!important}
.codex-summary .hero-stat-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
}
/* Hero: name above the head instead of the overhead HP bar (HP is read on the HUD) */
html.hw-game-active #combatHero .hero-arena-hp{display:none!important}
html.hw-game-active #battlefield #combatHero .hero-ground-name{display:block!important;position:absolute;left:50%;top:auto;bottom:calc(100% - var(--hero-head-y,0%) + .4rem);transform:translateX(-50%);z-index:13;pointer-events:none;
 font:500 clamp(13px,.9vw,17px)/1.1 var(--font-title,'Optimus Princeps',serif);letter-spacing:.06em;color:#ead8b6;white-space:nowrap;text-shadow:0 1px 0 #000,0 0 4px #000,0 0 8px #000c}
/* Readability floor used by the HUD tests: 13px labels, 16px HP value */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line>span:last-child,.hero-health-line>span,#xpLabel,.hero-health-footer){font-size:13px!important}
html.hw-game-active #appFrame #errantVitals .errant-name{font-size:clamp(15px,1vw,19px)!important}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:clamp(16px,.9vw,17px)!important}
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{font-size:13px!important;gap:4px!important;letter-spacing:.03em}
html.hw-game-active #appFrame #errantVitals #quickPotion kbd{font-size:13px!important}
html.hw-game-active #appFrame #errantVitals #quickPotion .potion-word{font-style:normal}
}
html.hw-game-active #appFrame #errantVitals #quickPotion .potion-word{display:none}
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals :is(#xpLabel,.hero-health-footer,.hero-level-line>*,.hero-health-line>*){line-height:1.35!important}}
/* Relics and banners never exceed the dock's own height (e.g. the compact battle-focus dock) */
@media(min-width:761px){
html.hw-game-active #appFrame .relic-nav{height:100%;align-items:end}
html.hw-game-active #appFrame .relic-nav .relic-button{height:min(var(--relic-h),100%)}
html.hw-game-active #appFrame .hud-torn-banner{height:min(var(--relic-h),100%)}
}
/* XP line: full bar width, no tracking, so long values like "1,2k / 3,4k XP · 37%" fit at 13px */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-health-footer{left:41.6%!important;width:38.4%!important}
html.hw-game-active #appFrame #errantVitals #xpLabel{letter-spacing:0!important;overflow:visible!important;font-variant-numeric:tabular-nums}
}
@media(min-width:761px) and (max-width:1279px){html.hw-game-active #appFrame #errantVitals .hero-health-footer{width:41.5%!important}}
/* Player name lives only above the hero's head; the HUD frame shows level, HP and XP */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .errant-name{display:none!important}
html.hw-game-active #appFrame #errantVitals .hero-level-line{justify-content:flex-end}
}
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .hero-level-line{justify-content:flex-start}
html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child{letter-spacing:.08em}
}
/* Text floor: nothing readable in combat below 13px (stage line, enemy level/HP, attack hint, hero level) */
html.hw-game-active #appFrame :is(#stageNumber,#stageKills,.stage-caption>span,#mobLevel,#mobHPText,#levelValue,#announcementCounter){font-size:13px!important;line-height:1.3!important}
html.hw-game-active #appFrame .target-hint{font-size:13px!important;line-height:1.2!important;letter-spacing:.08em!important}
html.hw-game-active #appFrame #mobName{font-size:clamp(14px,.95vw,18px)!important}
html.hw-game-active #appFrame :is(#stageNumber,#stageKills,#mobLevel,#mobHPText,.target-hint){text-shadow:0 1px 0 #000,0 0 4px #000,0 0 8px #000c}
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals #levelValue{font-size:13px!important}}
/* ===== Vitals text inside the frame's dark window (30%-87% of the art height), bold ===== */
@media(min-width:761px){
/* one line above the HP groove: level on the left, HP value on the right (the bar itself says "life") */
html.hw-game-active #appFrame #errantVitals .hero-level-line{top:34%!important;height:18%!important;left:42.6%!important;width:auto!important;display:flex;align-items:center}
html.hw-game-active #appFrame #errantVitals .hero-health-line{top:34%!important;height:18%!important;left:42.6%!important;width:34.6%!important;justify-content:flex-end!important;align-items:center!important}
html.hw-game-active #appFrame #errantVitals .hero-health-line>span{display:none!important}
html.hw-game-active #appFrame #errantVitals .hero-health-footer{top:62.2%!important;height:13%!important;left:42.6%!important;width:34.6%!important}
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line>span:last-child,#levelValue,#heroHPText,#xpLabel){font-weight:700!important;line-height:1.2!important;white-space:nowrap}
html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child{font-size:12px!important;letter-spacing:.08em}
html.hw-game-active #appFrame #errantVitals #levelValue{font-size:14px!important}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:clamp(14px,.85vw,16px)!important}
html.hw-game-active #appFrame #errantVitals #xpLabel{font-size:12px!important}
/* potion: count badge and key inside the potion slot (no longer on the frame's top edge) */
html.hw-game-active #appFrame #errantVitals #quickPotion{top:31%!important;height:56%!important}
html.hw-game-active #appFrame #errantVitals #quickPotionCount{top:auto!important;bottom:22%!important;right:6%!important;font-size:12px!important;font-weight:700;min-width:18px;padding:0 3px;line-height:16px!important}
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{position:absolute;bottom:2px;left:50%;transform:translateX(-50%)}
html.hw-game-active #appFrame #errantVitals #quickPotion kbd{font-size:12px!important;font-weight:700}
}
/* No "click to attack" caption for the mouse; keyboard focus still shows it as the focus cue */
html.hw-game-active #appFrame .target-hint{visibility:hidden!important}
html.hw-game-active #appFrame #attackTarget:focus-visible .target-hint{visibility:visible!important}
html.hw-game-active #appFrame #errantVitals :is(.lv-long,.lv-short){font-style:normal}
html.hw-game-active #appFrame #errantVitals .lv-short{display:none}
@media(min-width:761px) and (max-width:1599px){
html.hw-game-active #appFrame #errantVitals .lv-long{display:none}
html.hw-game-active #appFrame #errantVitals .lv-short{display:inline}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:14px!important}
}
/* The frame already paints the potion: show that one (no duplicate icon, no dark disc over it) */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals #quickPotion{background:none!important}
html.hw-game-active #appFrame #errantVitals #quickPotionArt{visibility:hidden!important}
}
/* empty potion slot: the painted flask is dimmed */
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals #quickPotion:disabled{background:radial-gradient(closest-side,#0b080cd0 62%,#0b080c00 92%)!important}}
/* Thinner HP bar: the painted groove (static red segments) is covered with the window's own tone, the live bar
   sits in its lower part, and the text line above gets more room. */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals .vitals-copy::before{content:'';position:absolute;left:41.2%;width:36.9%;top:53.2%;height:8.8%;border-radius:3px;pointer-events:none;
 background:linear-gradient(#2a1615,#291716);box-shadow:0 0 3px 2px #29161599}
html.hw-game-active #appFrame #errantVitals .hero-health-track{top:57%!important;height:4.2%!important;border-radius:2px;box-shadow:0 0 0 1px #0a0608,0 0 0 2px #4f3a33!important}
html.hw-game-active #appFrame #errantVitals :is(.hero-level-line,.hero-health-line){top:35%!important;height:20%!important}
}
@media(min-width:761px) and (max-width:1599px){html.hw-game-active #appFrame #errantVitals .hero-health-footer{width:41%!important}html.hw-game-active #appFrame #errantVitals #xpLabel{letter-spacing:-.01em!important}}
/* Potion count: centred on the painted flask, bold white, no badge box */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals #quickPotionCount{top:56%!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;
 min-width:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;
 font-size:clamp(16px,1.05vw,20px)!important;line-height:1!important;font-weight:800!important;color:#fff!important;font-variant-numeric:tabular-nums;
 text-shadow:0 1px 0 #000,0 0 3px #000,0 0 6px #000,0 0 10px #000c!important;z-index:3}
}
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals #quickPotionCount{left:44%!important;top:57%!important}}
/* ===== Orb carries HP; the window keeps level + XP only ===== */
@media(min-width:761px){
/* potion count: exact centre of the painted flask body (88.0% / 65.5% of the frame art), number only */
html.hw-game-active #appFrame #errantVitals #quickPotionCount{left:41.4%!important;top:61.6%!important}
/* HP value centred on the life orb */
html.hw-game-active #appFrame #errantVitals .hero-health-line{left:9.35%!important;top:13.5%!important;width:24%!important;height:75%!important;z-index:3;display:flex!important;justify-content:center!important;align-items:center!important;pointer-events:none}
html.hw-game-active #appFrame #errantVitals #heroHPText{font-size:clamp(14px,.85vw,16px)!important;font-weight:800!important;color:#fff;letter-spacing:0;
 text-shadow:0 1px 0 #000,0 0 3px #000,0 0 6px #000,0 0 10px #000c!important}
/* no HP bar in the window: the orb shows life */
html.hw-game-active #appFrame #errantVitals .hero-health-track{visibility:hidden!important}
/* window: level on the upper line, XP value on the middle line, XP bar in the painted lower groove */
html.hw-game-active #appFrame #errantVitals .hero-level-line{top:37%!important;height:18%!important;left:42.6%!important;width:34.6%!important;justify-content:flex-start!important}
html.hw-game-active #appFrame #errantVitals .hero-level-line>span:last-child{font-size:14px!important}
html.hw-game-active #appFrame #errantVitals #levelValue{font-size:16px!important}
html.hw-game-active #appFrame #errantVitals .hero-health-footer{top:59%!important;height:15%!important}
html.hw-game-active #appFrame #errantVitals #xpLabel{font-size:13px!important}
}
@media(min-width:761px) and (max-width:1599px){
html.hw-game-active #appFrame #errantVitals #quickPotionCount{left:33.3%!important}
/* with the HP value gone from this line, the full word fits again */
html.hw-game-active #appFrame #errantVitals .lv-long{display:inline}
html.hw-game-active #appFrame #errantVitals .lv-short{display:none}
}
/* HP value on the orb keeps the danger colours (white -> amber -> red) */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals #heroHPText{color:#fff!important}
html.hw-game-active #appFrame #errantVitals[data-vitality=low] #heroHPText{color:#ffc46b!important}
html.hw-game-active #appFrame #errantVitals[data-vitality=critical] #heroHPText{color:#ff5a4e!important}
}
@media(min-width:761px) and (max-width:1599px){html.hw-game-active #appFrame #errantVitals #xpLabel{font-size:12px!important}}
/* the HP groove is now removed from the frame art itself (forged-vitals v2): no cover plate */
@media(min-width:761px){html.hw-game-active #appFrame #errantVitals .vitals-copy::before{display:none!important}}

/* ===== Full-bleed arena: one continuous scene, no inner box ===== */
html.hw-game-active #appFrame .arena-backdrop{display:block;position:absolute;left:0;width:100%;aspect-ratio:16/9;top:calc(var(--arena-cy,50%) - 28.125vw);z-index:0;pointer-events:none;
 background:#0b080c center/cover no-repeat}
#appFrame .arena-backdrop{display:none}
/* no gold box: corner brackets and the top bar's underline go */
html.hw-game-active #appFrame .battle-corner{display:none!important}
html.hw-game-active #appFrame .topbar::after{display:none!important}
/* top bar and HUD float over the scene; soft shade only where text sits */
html.hw-game-active #appFrame .topbar{background:linear-gradient(#0b080ccc,#0b080c66 60%,#0b080c00)!important}
html.hw-game-active #appFrame .hud-dock{background:none!important}
html.hw-game-active #appFrame .hud-dock::before{background:linear-gradient(#0b080c00,#0b080c99 45%,#0b080cee)!important}
/* the box's own edge vignette would draw a seam inside the continuous scene: top shade only, no bottom band */
html.hw-game-active #appFrame #battlefield::after{background:linear-gradient(#07050833,transparent 18%)!important}
/* where the painting ends (below the HUD on tall screens) it fades into the page instead of a hard edge */
html.hw-game-active #appFrame .arena-backdrop::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:12%;background:linear-gradient(#0b080c00,#0b080c)}
html.hw-game-active #appFrame{background:#0b080c}
html.hw-game-active #appFrame .arena-backdrop::after{height:5%!important}
html.hw-game-active #appFrame .hud-dock::before{background:linear-gradient(#0b080c00,#0b080c8c 30%,#0b080cd9 65%,#0b080c)!important}
/* the HUD base turns fully dark before the painting's lower end can show between the HUD pieces */
html.hw-game-active #appFrame .hud-dock::before{background:linear-gradient(#0b080c00,#0b080ca6 22%,#0b080ce6 40%,#0b080c 52%)!important}
/* ===== Labels centred inside their own plaques ===== */
@media(min-width:761px){
/* Regions / Journal: each button covers its whole plaque (icon included, still clickable there); the name is centred
   in the fabric window right of the painted icon (33%-80% of the art width; rows centred at 37% and 72.5%) */
html.hw-game-active #appFrame .hud-secondary{padding:0!important;display:block!important}
html.hw-game-active #appFrame .hud-secondary>button{position:absolute!important;left:14%!important;width:66%!important;padding:0 0 0 28.8%!important;margin:0!important;
 min-height:0!important;height:24%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;flex:none!important}
html.hw-game-active #appFrame .hud-secondary>button:first-child{top:25%!important}
html.hw-game-active #appFrame .hud-secondary>button:last-child{top:60.5%!important}
html.hw-game-active #appFrame .hud-secondary .secondary-label{text-align:center;line-height:1.1!important;font-weight:600}
/* resource plates: a little taller than the bar (they float over the scene), so label + value sit inside the fabric */
html.hw-game-active #appFrame .topbar .resource-pill{align-self:flex-start;height:60px!important;width:224px!important;padding:0 20px 0 18px!important}
html.hw-game-active #appFrame .topbar .resource-pill>div:last-child{padding:0!important;gap:1px}
html.hw-game-active #appFrame .topbar .resource-pill small{line-height:15px!important}
html.hw-game-active #appFrame .topbar .resource-pill strong{font-size:19px!important;line-height:21px!important}
html.hw-game-active #appFrame .topbar .resource-icon{width:44px!important;height:44px!important}
html.hw-game-active #appFrame .player-tools{align-self:flex-start;margin-top:5px}
}
@media(min-width:761px) and (max-width:1279px){html.hw-game-active #appFrame .topbar .resource-pill{width:200px!important}}
@media(min-width:761px){html.hw-game-active #appFrame .topbar .resource-pill strong{font-size:18px!important;line-height:24px!important}html.hw-game-active #appFrame .topbar .resource-pill small{line-height:14px!important}}
/* Exact centring (measured against the painted fabric windows) */
@media(min-width:761px){
/* Regions/Journal: text centred in the fabric window 29%-80% of the art (padding % is of the panel width) */
html.hw-game-active #appFrame .hud-secondary>button{padding-left:15%!important}
/* resources: label and value centred in the fabric to the right of the icon, and vertically in the window */
html.hw-game-active #appFrame .topbar .resource-pill>div:last-child{flex:1 1 auto!important;min-width:0;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:4px 0 0!important}
html.hw-game-active #appFrame .topbar .resource-pill small,html.hw-game-active #appFrame .topbar .resource-pill strong{text-align:center!important;width:auto!important}
}
/* ===== Potion slot: everything centred on the painted flask (frame art: flask 81.5%-94.5% x 38%-75%,
   body centre 88% / 65.5%) ===== */
@media(min-width:761px){
html.hw-game-active #appFrame #errantVitals #quickPotion{left:81.5%!important;width:13%!important;top:38%!important;height:37%!important;padding:0!important;border-radius:0!important;overflow:visible!important}
/* count: centre of the flask body */
html.hw-game-active #appFrame #errantVitals #quickPotionCount{left:50%!important;top:74%!important}
/* use ring + glow: one circle around the flask body, same centre as the count */
html.hw-game-active #appFrame #errantVitals .potion-use-ring{left:50%!important;top:74%!important;width:64%!important;height:auto!important;aspect-ratio:1;translate:-50% -50%;transform:none!important;margin:0!important}
html.hw-game-active #appFrame #errantVitals .potion-use-glow{inset:auto!important;left:50%!important;top:74%!important;width:64%!important;height:auto!important;aspect-ratio:1;translate:-50% -50%;border-radius:50%!important;border:0!important;box-shadow:0 0 10px 3px #ffb0703d!important}
/* key: centred under the flask */
html.hw-game-active #appFrame #errantVitals #quickPotion>span:last-child{left:50%!important;right:auto!important;top:calc(100% + 2px)!important;bottom:auto!important;transform:translateX(-50%)!important;margin:0!important}
}
@media(min-width:761px) and (max-width:1599px){html.hw-game-active #appFrame #errantVitals #quickPotion{left:81.5%!important;width:13%!important}}