/* REFERENCE
 * - ui/companion/kellari-conductor.js (adds every class below)
 * - ui/companion/fight-stage.js + fight-stage.css (the arena chrome this extends;
 *   `data-tool` on .fight-actor is the armed seat)
 * - ui/overlay/mote-tools.js (the props; .mote-tool is hidden by mote-anim-idle.css
 *   until a stance shows it — exactly like the work + hold poses)
 * - ui/companion/mote-work.css + mote-holds.css (the stances these mirror)
 * - ui/companion/mote.html (owns #kellari-stage, OUTSIDE the card's innerHTML)
 * - .claude/UI-RULES.md (palette tokens; transform/opacity only)
 *
 * Sammalkellari replay stage: the arena host that survives the card's
 * re-render, the 1–3 enemy seats, the three event readings the boss farm
 * has no word for (magic, poison, heal), and — v3.2 — the armed player:
 * the weapon the RESULT was resolved with sits in the hands, and a cleave
 * splits its second victim with a flash.
 */

/* ── The host. Hidden until a replay runs; the card never rewrites it. ── */
.kellari-stage { display: none; padding: 0; overflow: hidden; }
.kellari-stage.is-on { display: block; }
.kellari-stage .pg-stage {
  height: clamp(220px, 44vw, 300px);
  max-height: none;
}

/* ── Enemy seats: ordinary chat-motes, so they get the ordinary tag, only
      a touch wider than a party frame because 1–3 names must stay read. ── */
.fight-actor--enemy .fight-actor__hp { width: 64px; }
.fight-actor--enemy .fight-actor__hp-fill { background: linear-gradient(180deg, #d2a05e, #9a6a34); }
.fight-actor--enemy .fight-actor__name { font-size: 10.5px; }

/* ── Armed stance (data-tool = the prop in the hands). Two-handed grip
      shouldered on +X, the strike side — the work chop pose, held still:
      a weapon poises, it does not float. The sword keeps its fencer's
      angle from mote-holds.css. No data-tool = the boss farm, untouched. ── */
.fight-actor[data-tool] .mote-hand { animation: none; }
.fight-actor[data-tool] .mote-tool { visibility: visible; transform: translate(70px, 54px) rotate(-10deg); }
.fight-actor[data-tool] .mote-hand--r { transform: translate(-12.5px, -6px) rotate(-8deg); }
.fight-actor[data-tool] .mote-hand--l { transform: translate(53.6px, 0.4px) rotate(-8deg); }
.fight-actor[data-tool="sword_wood"] .mote-tool { transform: translate(74px, 58px) rotate(22deg); }
.fight-actor[data-tool="sword_wood"] .mote-hand--r { transform: translate(-8.5px, -2px) rotate(20deg); }
.fight-actor[data-tool="sword_wood"] .mote-hand--l { transform: translate(59px, 4.3px) rotate(20deg); }

/* ── Cleave: the axe's split flash on the SECOND victim — a sideways
      stretch and a blink, opacity + transform only. Only a `cleave` event
      earns it (§1 row 7); a plain hit stays a plain hurt. ── */
.fight-actor--split .fight-actor__body { animation: mk-split 320ms ease-out 1; }
@keyframes mk-split {
  0%   { opacity: 1; transform: scaleX(1) translateX(0); }
  22%  { opacity: 0.5; transform: scaleX(1.22) translateX(2px); }
  55%  { opacity: 1; transform: scaleX(0.94) translateX(-1px); }
  100% { opacity: 1; transform: scaleX(1) translateX(0); }
}

/* ── Magic: the caster flares, no colour on the victim (the ✦ word carries
      the type). Opacity only — filter is banned on combat surfaces. ── */
.fight-actor--casting .fight-actor__body { animation: mk-cast 420ms ease-out 1; }
@keyframes mk-cast {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 0.72; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Poison: a slow shiver, not a hit — the tick has no attacker. ── */
.fight-actor--poison .fight-actor__body { animation: mk-poison 620ms ease-in-out 1; }
@keyframes mk-poison {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px); }
  55% { transform: translateX(1.5px); }
  80% { transform: translateX(-0.8px); }
}

/* ── Heal: the bar goes up and the frame breathes once. ── */
.fight-actor--healed .fight-actor__hp-fill { background: linear-gradient(180deg, #b9e08c, #6fae54); }
.fight-actor--healed .fight-actor__tag { animation: mk-heal-tag 700ms ease-out 1; }
@keyframes mk-heal-tag {
  0% { opacity: 1; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fight-actor--split .fight-actor__body,
  .fight-actor--casting .fight-actor__body,
  .fight-actor--poison .fight-actor__body,
  .fight-actor--healed .fight-actor__tag { animation: none !important; }
}