/* Bulwark's dome. Behind the character, same layer as Iron Stance's ring. */
.exp-bulwark-host { position: absolute; pointer-events: none; z-index: 3; }

/* height 140, margin-bottom -70 (half) — anchor 0.70 * PLAYER_WIDTH = 79.8px,
   minus halfHeight 70 = 9.8px clear of the ground. */
.exp-bulwark-dome {
  position: absolute; width: 220px; height: 140px;
  margin-left: -110px; margin-bottom: -70px;
  background: url('/assets/skills/knight/fx/shockwave-ring.webp') center/contain no-repeat;
  filter: hue-rotate(45deg) saturate(1.4) brightness(1.15);
  transform-origin: center center;
  will-change: transform, opacity;
  overflow: hidden;
  position: relative; /* re-declared: the highlight band below is positioned relative to this */
}
/* The highlight band: a bright vertical strip that sweeps left-to-right across
   the dome. Positioned with `left` as a percentage of the dome's own width, driven
   by highlightPositionAt in JS — not a CSS animation, so it stays perfectly in
   sync with a dome that can be snapped up or torn down at any time. */
.exp-bulwark-highlight {
  position: absolute; top: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,245,200,.85), transparent);
  mix-blend-mode: screen;
}

/* height 90, margin-bottom -45 (half) — anchor 0.75 * PLAYER_WIDTH = 85.5px,
   minus halfHeight 45 = 40.5px clear of the ground. */
.exp-bulwark-shield {
  position: absolute; width: 90px; height: 90px;
  margin-left: -45px; margin-bottom: -45px;
  background: url('/assets/skills/knight/fx/shield-front.webp') center/contain no-repeat;
  filter: hue-rotate(45deg) saturate(1.2);
  will-change: transform;
}