/* Dragon Roar. The module positions everything; this is look only. */
.exp-roar-host { position: absolute; pointer-events: none; z-index: 9; }

/* height 260. The host this element hangs off is anchored (in JS, see Step 10) at
   1.30 * PLAYER_WIDTH = 148.2px — the cone's own anchor, since the cone is what a
   player looks at during the sweep. The head needs to sit HIGHER than that, at the
   table's 1.60 * PLAYER_WIDTH = 182.4px, a difference of 34.2px. A plain centred
   box would use margin-bottom -130 (half of 260); adding that 34.2px on top gives
   margin-bottom -164, which lands the head's true centre at 148.2 + 164 - 130 =
   182.2px — the table's 182.4px to within a rounding pixel, and 52.2px clear of
   the ground either way. The highest anchor in this plan, deliberately: the head
   reads as looming ABOVE the Knight, not level with the cone. */
.exp-roar-head {
  position: absolute; width: 260px; height: 260px;
  margin-left: -130px; margin-bottom: -164px;
  background: url('/assets/skills/knight/fx/dragon-head.webp') center/contain no-repeat;
  transform-origin: center center;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 16px rgba(255, 140, 40, .6));
}

/* height 170, margin-bottom -85 (half) — anchor 1.30 * PLAYER_WIDTH = 148.2px,
   minus halfHeight 85 = 63.2px clear of the ground. */
.exp-roar-cone {
  position: absolute; width: 340px; height: 170px;
  margin-bottom: -85px;
  background: url('/assets/skills/knight/fx/dragon-breath-cone.webp') center/contain no-repeat;
  transform-origin: 0% 50%;
  will-change: transform, opacity;
}
/* The cone grows from the mouth outward, not from its own centre — anchored at its
   left edge (transform-origin 0% 50%) and the module sets margin-left to 0 or
   -340px per facing, done in JS since it depends on which way the Knight faces. */

.exp-roar-ember {
  position: absolute; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffce7a, #ff8a3d 70%, transparent);
  will-change: transform, opacity;
}

/* Screen-space desaturation — not anchored to the character. */
.exp-roar-desaturate {
  position: fixed; inset: 0; pointer-events: none; z-index: 47;
  backdrop-filter: saturate(1);
  transition: backdrop-filter 60ms linear;
}