/* HELLWARD · Darkest — stone/brass HUD, torchlit menu, duel symmetry.
   No filters or blend modes; no blurred box-shadows on repainting HUD parts. */

/* ---------- Stage light ----------
   Torch pools, vignette and ceiling darkness are baked into the regional art
   (tools/build-darkest.cjs): a full-screen translucent overlay cost ~10 FPS
   while sprites animate in software rendering. */

/* ---------- HUD: one forged slab of stone, iron and tarnished brass ---------- */
:root{--dd-brass:var(--ui-brass);--dd-brass-hi:#d9b77a;--dd-brass-lo:var(--ui-brass-lo);--dd-blood-hi:#c8443a;--dd-stone:url('assets/ui/dd-stone.webp')}
@media(min-width:1000px) and (min-height:600px){
 /* Top rail */
 #appFrame .topbar{background:linear-gradient(#151011f2,#0b0809f2),var(--dd-stone) 0 0/256px;border-bottom:0;box-shadow:0 1px 0 #000,0 2px 0 var(--dd-brass-lo),0 3px 0 #000}
 #appFrame .topbar::after{display:block;content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,transparent,var(--dd-brass) 15%,var(--dd-brass-hi) 50%,var(--dd-brass) 85%,transparent);pointer-events:none}
 #appFrame .topbar .brand-name{font-size:1.75rem;font-weight:600;line-height:1;letter-spacing:.06em;color:#d8b67c;text-shadow:0 1px 0 #000,0 0 .9rem #8e1f2280}
 #appFrame .topbar .brand-mark{color:var(--dd-blood-hi)}
 #appFrame .topbar .top-resources{gap:.75rem}
 #appFrame .topbar .resource-pill{padding:.15rem .9rem .15rem .4rem;border:1px solid #000;background:linear-gradient(#1d1516,#0e0a0b);box-shadow:inset 0 0 0 1px var(--ui-brass-dim),inset 0 1px 0 1px #ffffff08,0 1px 0 #000}
 #appFrame .topbar .resource-pill small{color:#b8996f;letter-spacing:.14em}

 /* Bottom slab */
 #appFrame .hud-dock{max-width:none;gap:1.25rem;padding:.7rem 1.25rem .7rem;grid-template-columns:minmax(28rem,38rem) minmax(0,1fr) 12rem;grid-template-rows:minmax(0,1fr);
  background:linear-gradient(#000d,#0000 1.2rem),linear-gradient(#00000059,#0000),var(--dd-stone) 0 0/256px,#181213;
  box-shadow:inset 0 1px 0 #000,inset 0 2px 0 var(--dd-brass-lo),inset 0 3px 0 #000}
 #appFrame .hud-dock::before{inset:3px 0 auto;height:1px;border:0;border-image:none;z-index:0;background:linear-gradient(90deg,transparent,var(--dd-brass) 8%,var(--dd-brass-hi) 50%,var(--dd-brass) 92%,transparent)}

 /* Vitals */
 #appFrame .hud-dock .errant-vitals{max-width:none;gap:.9rem;grid-template-columns:var(--hud-orb-size) minmax(0,1fr) 5rem}
 #appFrame .hud-dock .vitals-copy{position:relative;align-self:center;padding:.6rem .95rem .65rem;border:1px solid #000;background:radial-gradient(ellipse 75% 90% at 50% 50%,#0000 45%,#000a),linear-gradient(#0d090acc,#150f10cc);box-shadow:inset 0 0 0 1px var(--ui-brass-dim)}
 #appFrame .hud-dock .hero-level-line{margin-bottom:.15rem}
 #appFrame .hud-dock .errant-name{font-family:var(--font-title)!important;font-size:1.625rem;line-height:1.1;font-weight:600;color:#ecd4a4;text-shadow:0 2px 0 #000}
 #appFrame .hud-dock .hero-level-line>span:last-child{color:#b99c72;letter-spacing:.16em}
 #appFrame .hud-dock #levelValue{font-size:1.125rem;color:#f3ddb5}
 #appFrame .hud-dock #heroHPText{font-size:1.25rem;color:#f7e8cd}
 #appFrame .hud-dock .hero-health-track{position:relative;height:.8rem;margin:.3rem 0;border:1px solid #000;box-shadow:0 0 0 1px var(--ui-brass-lo);background:linear-gradient(#000,#1b0a0c 40%)}
 #appFrame .hud-dock .hero-health-track::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#000a calc(10% - 1px) 10%)}
 #appFrame .hud-dock .xp-track{height:.4375rem;min-height:.4375rem;margin-top:.35rem;border:1px solid #000;box-shadow:0 0 0 1px #46331f;background:#17110c}
 #appFrame .hud-dock .xp-track .xp-fill{background:linear-gradient(#e9c67f,#94703a)}

 /* Potion: a square satchel slot */
 #appFrame .hud-dock #quickPotion{width:5rem;height:6rem;align-self:center;justify-content:flex-end;padding:.3rem 0 .4rem;gap:.25rem;border:1px solid #000;background:radial-gradient(ellipse at 50% 36%,#3b201d,#120c0d 72%,#050304);box-shadow:inset 0 0 0 1px var(--ui-brass-lo)}
 #appFrame .hud-dock #quickPotion::after{display:none}
 #appFrame .hud-dock #quickPotion #quickPotionArt{width:2.5rem;height:2.75rem}
 #appFrame .hud-dock #quickPotion>span:last-child{font-size:.8125rem;letter-spacing:.08em;color:#e3c995}

 /* Relics: three framed plaques */
 #appFrame .hud-dock .relic-nav{width:100%;max-width:42rem;justify-self:center;align-self:stretch;height:auto;min-height:0;padding:0;gap:.9rem;align-items:stretch;overflow:hidden}
 #appFrame .hud-dock .relic-button{height:auto;min-height:0;padding:.35rem .4rem .4rem;gap:.1rem;justify-content:center}
 #appFrame .hud-dock .relic-button::before{inset:0;border:1px solid #000;border-image:none;background:radial-gradient(ellipse 80% 85% at 50% 45%,#1c1415 35%,#060405);box-shadow:inset 0 0 0 1px var(--ui-brass-lo),inset 0 0 0 3px #000,inset 0 0 0 4px #2f2117}
 #appFrame .hud-dock .relic-button:is(:hover,:focus-visible,[aria-expanded=true])::before{background:radial-gradient(ellipse at 50% 38%,#4a231b,#140d0d 72%,#060405);box-shadow:inset 0 0 0 1px var(--dd-brass-hi),inset 0 0 0 3px #000,inset 0 0 0 4px var(--ui-brass-lo)}
 #appFrame .hud-dock .relic-button img{width:min(3.5rem,6.2vh);height:min(3.5rem,6.2vh)}
 #appFrame .hud-dock .relic-caption{min-height:0;padding:0;border:0;border-image:none;background:none;gap:.05rem}
 #appFrame .hud-dock .relic-caption>span{font-size:1rem;line-height:1.25;color:#efd5a3;letter-spacing:.1em;text-shadow:0 2px 0 #000}
 #appFrame .hud-dock .relic-caption>small{font-size:.8125rem;color:#a98e69;letter-spacing:.14em}

 /* Secondary plaques */
 #appFrame .hud-dock .hud-secondary{width:auto;gap:.6rem;align-self:center}
 #appFrame .hud-dock .hud-secondary button{height:2.9rem;min-height:2.9rem;border:1px solid #000!important;border-image:none!important;background:radial-gradient(ellipse 85% 120% at 50% 50%,#1f1617 40%,#080506)!important;box-shadow:inset 0 0 0 1px var(--ui-brass-lo)!important;clip-path:none!important}
 #appFrame .hud-dock .hud-secondary button::before,#appFrame .hud-dock .hud-secondary button::after{display:none}
 #appFrame .hud-dock .hud-secondary button:is(:hover,:focus-visible,[aria-expanded=true]){background:radial-gradient(ellipse at 50% 50%,#3d1e19,#140d0d 80%)!important;box-shadow:inset 0 0 0 1px var(--dd-brass-hi)!important}
 #appFrame .hud-dock .hud-secondary .secondary-label{font-size:.95rem;line-height:1.4;letter-spacing:.12em;color:#ead09f}
}

/* Shorter desktop windows: same slab, tighter type. */
@media(min-width:1000px) and (min-height:600px) and (max-height:900px){
 #appFrame .hud-dock{padding:.5rem 1rem;gap:1rem}
 #appFrame .hud-dock .vitals-copy{padding:.4rem .8rem .45rem}
 #appFrame .hud-dock .errant-name{font-size:1.3rem}
 #appFrame .hud-dock #heroHPText{font-size:1.0625rem;line-height:1.35}
 #appFrame .hud-dock .hero-health-track{height:.625rem;margin:.2rem 0}
 #appFrame .hud-dock .xp-track{margin-top:.2rem}
 #appFrame .hud-dock #quickPotion{height:5.25rem}
 #appFrame .hud-dock .relic-caption>span{font-size:.9rem}
 #appFrame .hud-dock .hud-secondary button{height:2.6rem;min-height:2.6rem}
}
@media(min-width:1000px) and (max-width:1280px){
 #appFrame .hud-dock{grid-template-columns:minmax(19rem,1.25fr) minmax(17rem,1fr) 9.5rem;gap:.75rem;padding-inline:.75rem}
 #appFrame .hud-dock .errant-vitals{gap:.6rem;grid-template-columns:var(--hud-orb-size) minmax(0,1fr) 4.25rem}
 #appFrame .hud-dock #quickPotion{width:4.25rem}
 #appFrame .hud-dock .relic-nav{gap:.5rem}
 #appFrame .hud-dock .relic-caption>span{font-size:.8rem;letter-spacing:.05em}
 #appFrame .hud-dock .relic-caption>small{font-size:.8125rem;letter-spacing:.04em}
 #appFrame .hud-dock .hud-secondary .secondary-label{font-size:.8rem;letter-spacing:.06em}
}
/* Brass corner brackets on every command plaque. */
@media(min-width:1000px) and (min-height:600px){
 #appFrame .hud-dock .relic-button::after{display:block;content:'';position:absolute;inset:.3rem;z-index:-1;pointer-events:none;opacity:.85;background:
  linear-gradient(var(--dd-brass),var(--dd-brass)) 0 0/.7rem 1px,linear-gradient(var(--dd-brass),var(--dd-brass)) 0 0/1px .7rem,
  linear-gradient(var(--dd-brass),var(--dd-brass)) 100% 0/.7rem 1px,linear-gradient(var(--dd-brass),var(--dd-brass)) 100% 0/1px .7rem,
  linear-gradient(var(--dd-brass),var(--dd-brass)) 0 100%/.7rem 1px,linear-gradient(var(--dd-brass),var(--dd-brass)) 0 100%/1px .7rem,
  linear-gradient(var(--dd-brass),var(--dd-brass)) 100% 100%/.7rem 1px,linear-gradient(var(--dd-brass),var(--dd-brass)) 100% 100%/1px .7rem;background-repeat:no-repeat}
}

/* ---------- Health bars: framed, segmented, blood-red ---------- */
#appFrame #bossHUD .souls-boss-track{height:.6875rem;border:1px solid #000;box-shadow:0 0 0 1px #7a5a34,0 0 0 2px #000;background:#14080a}
#appFrame #bossHUD #bossHPFill{background:linear-gradient(#c24a3e,#8a1f24 55%,#5c1218)}
#appFrame #bossHUD #bossHPDamageTrail{background:#c9a15c}
#appFrame #bossHUD .souls-boss-track::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),#0008 calc(5% - 1px) 5%)}
#appFrame #bossHUD #bossHUDName{color:#ecd2a2;text-shadow:0 2px 0 #000,0 0 .8rem #000}
#appFrame .battlefield .mob-info .hp-track{position:relative;border:1px solid #000!important;box-shadow:0 0 0 1px #6b4c2c,0 1px 0 2px #0008;background:#14080a!important;border-radius:0}
#appFrame .battlefield .mob-info .hp-fill{background:linear-gradient(#c24a3e,#8a1f24 55%,#5c1218);border-radius:0}
#appFrame .battlefield .mob-info .hp-track::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#0008 calc(10% - 1px) 10%)}
#appFrame #combatHero .hero-arena-hp>div{border:1px solid #000;box-shadow:0 0 0 1px #6b4c2c;background:#14080a}

/* The main menu moved to menu-cinematic.css (step 6). */

/* ---------- Duel symmetry ----------
   Every enemy shares the hero's foot line; on desktop its feet mirror the
   hero's distance from the edge (game.js mirrorEnemyPosition). */
#appFrame #battlefield .attack-target{bottom:calc(var(--floor) - var(--boss-foot-offset,0px))!important}
@media(min-width:1000px){
 #appFrame #battlefield .attack-target{left:calc(var(--enemy-x) - var(--enemy-w) * var(--battle-sprite-scale) / 2 - 2.604166667% + var(--enemy-mirror-shift,0px))!important}
}