/* ============================================================
   MODERN THEME — combat bars
   Kept in its own file so it does not collide with wr-arena.css.

   The engine writes .hp-fill's `background` and `width` inline, and
   .hp-shield's left/width, so none of that is contested here. What is
   left — the frame around the bar, the tick marks, the type, and a
   trailing damage ghost — is where the cheap look actually comes from.
   ============================================================ */

/* ---------- the frame ----------
   A 1.5px flat gold rectangle around a bright green fill is what makes
   this read as a prototype. Chamfer the ends, split the border into a
   lit top and a dark underside, and sit the whole thing in a well. */
html[data-wr="on"] .hp-bar,
html[data-wr="on"] .mana-bar {
  border: 0;
  border-radius: 0;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  background: #05090f;
  box-shadow:
    inset 0 0 0 1px rgba(200, 170, 110, 0.30),
    inset 0 1px 0 rgba(240, 230, 210, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
html[data-wr="on"] .hp-bar { height: 15px; }

/* a single hard specular line across the top of the glass */
html[data-wr="on"] .hp-bar::after,
html[data-wr="on"] .mana-bar::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 230, 210, 0.35) 18%,
              rgba(240, 230, 210, 0.35) 82%, transparent);
  z-index: 5; pointer-events: none;
}

/* ---------- ticks ----------
   Black dividers at 35% just muddy the fill. Thin light ones read as
   etched glass and survive on top of any fill colour the engine picks. */
html[data-wr="on"] .hp-segment-line {
  border-right: 1px solid rgba(1, 10, 19, 0.55);
  box-shadow: inset -2px 0 0 -1px rgba(240, 230, 210, 0.13);
}

/* ---------- type ---------- */
html[data-wr="on"] .hp-text,
html[data-wr="on"] .mana-bar-text {
  font-family: var(--wr-font-ui, inherit);
  font-size: 9px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;      /* stops the count jittering */
  text-shadow: 0 1px 2px rgba(1, 10, 19, 0.95), 0 0 6px rgba(1, 10, 19, 0.8);
}

/* ---------- damage ghost ----------
   wr-bars.js inserts one of these per bar and drives its width. It sits
   under the fill and lags behind it, so a hit leaves a pale streak that
   drains a beat later — the single clearest way to read *how much* just
   happened rather than only the new total. */
html[data-wr="on"] .wr-ghost {
  position: absolute; top: 0; height: 100%;
  z-index: 1;                                /* under fill(?) and shield */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 236, 210, 0.85), rgba(232, 120, 90, 0.55));
  box-shadow: 0 0 8px rgba(255, 180, 140, 0.5);
  transition: width 620ms cubic-bezier(.2, 0, .1, 1), opacity 300ms linear;
}
html[data-wr="on"] .wr-ghost.wr-heal {
  background: linear-gradient(180deg, rgba(210, 255, 226, 0.8), rgba(70, 200, 130, 0.5));
  box-shadow: 0 0 8px rgba(120, 240, 170, 0.45);
}

/* ---------- the whole slot reacts ---------- */
html[data-wr="on"] .card-slot.wr-hurt .hp-bar {
  animation: wr-bar-hit 420ms var(--wr-ease-out);
}
@keyframes wr-bar-hit {
  0%   { box-shadow: inset 0 0 0 1px rgba(255, 210, 190, 0.95), 0 0 16px rgba(232, 67, 63, 0.75); }
  100% { box-shadow: inset 0 0 0 1px rgba(200, 170, 110, 0.30), 0 1px 3px rgba(0, 0, 0, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] .wr-ghost { transition: none; }
  html[data-wr="on"] .card-slot.wr-hurt .hp-bar { animation: none; }
}