/* Stage 7: premium HUD, component 1 = vitals group (orb, HP, regeneration, XP, potion) + resource pills.
   Cosmetic only: values/ids/events come from game.js. Static gradients, no filters, no new animations.
   Reusable pattern: see docs/hud-premium.md ("padrão visual"). Tokens are shared by the next components. */
:root{
  --hud-brass:var(--ui-brass);--hud-brass-hi:var(--ui-brass-hi);--hud-brass-lo:var(--ui-brass-lo);--hud-ink:var(--ui-ink);--hud-panel-a:var(--ui-panel-a);--hud-panel-b:var(--ui-panel-b);
  --hud-text:var(--ui-text);--hud-muted:var(--ui-muted);--hud-hp-hi:var(--ui-hp-hi);--hud-hp:var(--ui-hp);--hud-hp-lo:var(--ui-hp-lo);--hud-xp-hi:var(--ui-xp-hi);--hud-xp-lo:var(--ui-xp-lo);
  --hud-low:var(--ui-low);--hud-crit:var(--ui-crit);--hud-radius:var(--ui-radius);
}
/* Panel frame: hairline brass border, inner shade, notched corner marks (all background layers, no extra nodes) */
/* Hierarchy: name > HP value > bar > meta */
html.hw-game-active #errantVitals .errant-name{color:var(--hud-text)}
html.hw-game-active #errantVitals .hero-level-line>span:last-child{color:var(--hud-muted)}
html.hw-game-active #errantVitals #levelValue{color:var(--hud-brass-hi);font-variant-numeric:lining-nums tabular-nums}
html.hw-game-active #errantVitals #heroHPText{color:#fff0d6;font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px 0 #000}
html.hw-game-active #errantVitals .hero-health-line>span{color:var(--hud-muted)}
/* HP bar: recessed trough, glossy fill with a bright leading edge, soft 10% ticks */
html.hw-game-active #errantVitals .hero-health-track{height:.9rem;margin:.3rem 0 .25rem;border:1px solid #000;border-radius:var(--hud-radius);background:linear-gradient(#000,#1a0a0c 45%,#240d10);box-shadow:0 0 0 1px var(--hud-brass-lo),inset 0 1px 2px #000}
html.hw-game-active #errantVitals{--hud-hp-fill:linear-gradient(180deg,#ffffff30 0 1px,transparent 1px),linear-gradient(180deg,var(--hud-hp-hi),var(--hud-hp) 55%,var(--hud-hp-lo))}
html.hw-game-active #errantVitals .hero-health-track::after{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#0007 calc(10% - 1px) 10%),linear-gradient(180deg,#ffffff14,transparent 45%)}
/* State indicators (existing data-vitality attribute): colour only, no animation added */
html.hw-game-active #errantVitals[data-vitality=low]{--hud-hp-fill:linear-gradient(180deg,#ffffff38 0 1px,transparent 1px),linear-gradient(180deg,#f0a553,var(--hud-low) 55%,#7a3f10)}
html.hw-game-active #errantVitals[data-vitality=low] #heroHPText{color:#ffd9a4}
html.hw-game-active #errantVitals[data-vitality=critical]{--hud-hp-fill:linear-gradient(180deg,#ffffff38 0 1px,transparent 1px),linear-gradient(180deg,#ff6a6a,var(--hud-crit) 55%,#7b0e16)}
html.hw-game-active #errantVitals[data-vitality=critical] #heroHPText{color:#ffb4ab}
html.hw-game-active #errantVitals[data-vitality=critical] .vitals-copy{box-shadow:inset 0 0 0 1px #7b2024,inset 0 0 1rem #5a0d1288,0 .15rem .4rem #0009}
html.hw-game-active #errantVitals[data-vitality=dead] .vitals-copy{opacity:.8}
/* Regeneration + XP */
html.hw-game-active #errantVitals .hero-health-footer{color:var(--hud-muted)}
html.hw-game-active #errantVitals .hero-health-footer strong{color:#a8dba0}
html.hw-game-active #errantVitals #xpLabel{color:var(--hud-xp-hi);font-variant-numeric:lining-nums tabular-nums}
html.hw-game-active #errantVitals .xp-track{height:.4375rem;margin-top:.3rem;border:1px solid #000;border-radius:var(--hud-radius);background:#120d09;box-shadow:0 0 0 1px #4a3520,inset 0 1px 1px #000}
html.hw-game-active #errantVitals .xp-track .xp-fill{background:linear-gradient(180deg,var(--hud-xp-hi),var(--hud-xp-lo));box-shadow:inset -1px 0 0 #fff3c0aa}
/* Potion: same frame language, readable count, lit key cap */
html.hw-game-active #errantVitals #quickPotion{border-radius:var(--hud-radius);border:1px solid #000;background:linear-gradient(180deg,#24161a,#120b0e);box-shadow:inset 0 0 0 1px var(--hud-brass-lo),inset 0 1px 0 1px #ffffff0a,0 .15rem .4rem #0009;transition:box-shadow .2s ease,transform .2s ease}
html.hw-game-active #errantVitals #quickPotion:not(:disabled):is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px var(--hud-brass-hi),0 .15rem .4rem #0009;transform:translateY(-1px)}
html.hw-game-active #errantVitals #quickPotion kbd{border-color:var(--hud-brass-lo);background:#0006;color:var(--hud-brass-hi)}
html.hw-game-active #errantVitals #quickPotion:disabled kbd{color:var(--hud-muted)}
/* Resource pills (ouro, almas, fragmentos): same frame tokens */
html.hw-game-active #appFrame .topbar .resource-pill{border-radius:var(--hud-radius);background:linear-gradient(180deg,var(--hud-panel-a),var(--hud-panel-b));box-shadow:inset 0 0 0 1px var(--hud-brass-lo),inset 0 1px 0 1px #ffffff0a,0 1px 0 #000}
html.hw-game-active #appFrame .topbar .resource-pill small{color:var(--hud-muted);letter-spacing:.16em}
html.hw-game-active #appFrame .topbar .resource-pill strong{color:var(--hud-text);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px 0 #000}
html.hw-game-active #appFrame .topbar .resource-pill:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px var(--hud-brass),inset 0 1px 0 1px #ffffff0a,0 1px 0 #000}
/* Legibility on bright scenes: dark halo behind the text block instead of a heavy filter */
html.hw-game-active #errantVitals .hero-level-line,html.hw-game-active #errantVitals .hero-health-line{text-shadow:0 1px 0 #000,0 0 .35rem #000a}
@media(min-width:1101px) and (min-height:701px){
html.hw-game-active #errantVitals .vitals-copy{position:relative;border:1px solid #000;border-radius:var(--hud-radius);
  background:
   linear-gradient(var(--hud-brass),var(--hud-brass)) 0 0/.7rem 1px no-repeat,linear-gradient(var(--hud-brass),var(--hud-brass)) 0 0/1px .7rem no-repeat,
   linear-gradient(var(--hud-brass),var(--hud-brass)) 100% 0/.7rem 1px no-repeat,linear-gradient(var(--hud-brass),var(--hud-brass)) 100% 0/1px .7rem no-repeat,
   linear-gradient(var(--hud-brass),var(--hud-brass)) 0 100%/.7rem 1px no-repeat,linear-gradient(var(--hud-brass),var(--hud-brass)) 0 100%/1px .7rem no-repeat,
   linear-gradient(var(--hud-brass),var(--hud-brass)) 100% 100%/.7rem 1px no-repeat,linear-gradient(var(--hud-brass),var(--hud-brass)) 100% 100%/1px .7rem no-repeat,
   linear-gradient(180deg,#1e1517f0,#100a0cf0);
  box-shadow:inset 0 0 0 1px var(--hud-brass-lo),inset 0 1px 0 1px #ffffff0a,inset 0 -1.2rem 1.2rem -1rem #000c,0 .15rem .4rem #0009}
html.hw-game-active #errantVitals .hero-health-panel{margin:0;padding:0;border:0;background:none;box-shadow:none}
}
/* Desktop type scale only (compact layouts keep their tuned metrics from hud-legibility/hud-block1) */
@media(min-width:1101px) and (min-height:701px){
  html.hw-game-active #errantVitals .errant-name{font-size:1.5rem;letter-spacing:.02em}
  html.hw-game-active #errantVitals .hero-level-line>span:last-child{font-size:.8125rem;line-height:1.7;padding-top:.2rem;letter-spacing:.16em}
  html.hw-game-active #errantVitals #levelValue{font-size:1.125rem;line-height:1}
  html.hw-game-active #errantVitals #heroHPText{font-size:1.3rem;line-height:1.3}
  html.hw-game-active #errantVitals .hero-health-line>span{font-size:.8125rem;letter-spacing:.16em}
  html.hw-game-active #errantVitals .hero-health-footer{font-size:.8125rem;letter-spacing:.08em}
  html.hw-game-active #errantVitals .hero-health-footer strong{font-size:.8125rem}
  html.hw-game-active #errantVitals #xpLabel{font-size:.8125rem}
}
/* Battle focus (144px dock) and desktops up to 900px tall: keep the hierarchy, tighten the scale and the frame padding */
@media(min-width:1101px) and (min-height:701px){
  html.hw-game-active[data-focus=battle] #errantVitals .vitals-copy{padding-top:.35rem;padding-bottom:.35rem}
  html.hw-game-active[data-focus=battle] #errantVitals .errant-name{font-size:1.25rem}
  html.hw-game-active[data-focus=battle] #errantVitals #heroHPText{font-size:1.1rem;line-height:1.25}
  html.hw-game-active[data-focus=battle] #errantVitals .hero-health-track{height:.75rem;margin:.2rem 0}
  html.hw-game-active[data-focus=battle] #errantVitals .xp-track{margin-top:.2rem}
}
@media(min-width:1101px) and (min-height:701px) and (max-height:900px){
  html.hw-game-active #errantVitals .vitals-copy{padding-top:.35rem;padding-bottom:.35rem}
  html.hw-game-active #errantVitals .errant-name{font-size:1.25rem}
  html.hw-game-active #errantVitals #heroHPText{font-size:1.1rem;line-height:1.25}
  html.hw-game-active #errantVitals .hero-health-track{height:.75rem;margin:.2rem 0}
  html.hw-game-active #errantVitals .xp-track{margin-top:.2rem}
}
/* Review M3: the hero's overhead bar matches the enemy bar (height, outer shade, 10% ticks). Static, no new nodes. */
html.hw-game-active #battlefield .hero-arena-hp>div{position:relative;height:7px;box-shadow:0 0 0 1px #6b4c2c,0 1px 0 2px #0008}
html.hw-game-active #battlefield .hero-arena-hp>div::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#0008 calc(10% - 1px) 10%)}
/* Review M7: the large level number must stay inside its line box (tests/hud-readable.cjs) on tablets/small desktops too */
@media(min-width:761px) and (min-height:601px){
  html.hw-game-active #errantVitals .hero-level-line>span:last-child{padding-top:.2rem;line-height:1.7}
  html.hw-game-active #errantVitals #levelValue{line-height:1}
}
/* Battle focus on 761–1100px wide screens: the dock is 144px, so the vitals tighten their bars and padding (no text removed) */
@media(min-width:761px) and (max-width:1100px) and (min-height:601px){
  html.hw-game-active[data-focus=battle] #appFrame .hud-dock .vitals-copy{padding-top:.2rem;padding-bottom:.2rem}
  html.hw-game-active[data-focus=battle] #errantVitals .hero-level-line>span:last-child{padding-top:.2rem;line-height:1.4}
  html.hw-game-active[data-focus=battle] #appFrame .hud-dock .hero-health-track{height:.5rem;margin:.15rem 0}
  html.hw-game-active[data-focus=battle] #errantVitals :is(.hero-health-footer,#xpLabel){line-height:1rem}
  html.hw-game-active[data-focus=battle] #appFrame .hud-dock .xp-track{margin-top:.15rem}
}