/* Part 13. Positions use the 1920px reference; actor sizes and floor stay intact. */
@media(min-width:1000px) {
  #appFrame #battlefield .combat-hero {
    left: calc(23.4375% - var(--hero-w) * var(--battle-sprite-scale) / 2) !important;
  }
  #appFrame #battlefield .attack-target {
    left: calc(var(--enemy-x) - var(--enemy-w) * var(--battle-sprite-scale) / 2 - 2.604166667%) !important;
  }
  #appFrame #bossHUD { width: min(40rem, 33.333333333vw); }
}

/* Clip all stage ancestors, including the document: focus may otherwise pan
   a hidden-overflow ancestor even though there are no visible scrollbars. */
html.hw-game-active, html.hw-game-active body { height: 100dvh; min-height: 0; max-height: 100dvh; overflow: clip; }
html.hw-game-active { scroll-behavior: auto !important; }
html.hw-game-active #appFrame { max-height: 100dvh; overflow: clip; }
#appFrame :is(.game-layout, .battle-column, .battle-panel, #battlefield) { overflow: clip; }

/* Keep the rare toe/weapon extremities in front of the track, never covered. */
#appFrame #bossHUD { bottom: 32px; z-index: 3; }
#bossHUD .souls-boss-heading { justify-content: center; gap: .5rem; text-align: center; }
#bossHUD #bossHUDName { flex: 0 1 auto; min-width: 0; }
#bossHUD #bossHUDLevel { font-size: 14px; line-height: 1.2; white-space: nowrap; }
body #appFrame #bossHUDValue {
  font-family: var(--font-body) !important;
  font-size: 16px; line-height: 1.2; color: #f3e5ce;
  text-shadow: -1px -1px #10090c, 1px -1px #10090c, -1px 1px #10090c,
    1px 1px #10090c, 0 2px 2px #000;
}

#appFrame #combatHero .hero-arena-hp {
  width: max(100px, var(--hero-sprite-width, 100px));
  bottom: calc(100% - var(--hero-head-y, 0%) + 8px);
}

body #appFrame #battlefield .boss-damage {
  color: #fff0d1; font-family: var(--font-body) !important;
  text-shadow: -1px -1px #10090c, 1px -1px #10090c, -1px 1px #10090c,
    1px 1px #10090c, 0 2px 2px #000;
}
body #appFrame #battlefield .boss-damage.crit { color: #ebc76f; font-weight: 800; }