/*
 * Shared blood-volume meter styling. Loaded by calc.html and gm.html.
 *
 * The palette is driven by custom properties so the same markup reads
 * correctly on the player's parchment sheet and on the GM's dark panel; only
 * the tokens are overridden under body.gm-page, never the layout.
 */

/* Palette is INHERITED, never hardcoded: calc.html publishes --ui-fg /
   --ui-fg-muted (which flip with its light/dark sheet themes) and gm.html
   publishes --ink / --muted. Chaining the fallbacks means the meter follows
   whichever page it lands on, including a theme the player switches at
   runtime. Everything else is derived from currentColor so there is no second
   palette to keep in sync. */
.blood-meter {
  --blood-meter-ink: var(--ui-fg, var(--ink, #2c2016));
  --blood-meter-muted: var(--ui-fg-muted, var(--muted, rgba(44, 32, 22, 0.62)));
  --blood-tone: #8d1c2c;

  display: block;
  color: var(--blood-meter-ink);
}

.blood-meter-title {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blood-meter-muted);
  margin-bottom: 4px;
}

.blood-meter-body {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.blood-meter-bottle {
  position: relative;
  width: 30px;
  height: 120px;
  flex: 0 0 auto;
  overflow: hidden;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.24));
}

.blood-meter.is-compact .blood-meter-bottle {
  width: 20px;
  height: 80px;
}

.blood-meter-vase-art {
  position: absolute;
  width: 444.444%;
  height: 111.111%;
  left: -164.444%;
  top: -3.611%;
  display: block;
  pointer-events: none;
}

.blood-meter-vase-back {
  z-index: 1;
  opacity: 0.92;
}

.blood-meter-liquid-mask {
  z-index: 2;
  overflow: hidden;
  -webkit-mask: url("blood-vase-back.svg?v=20260904b") center / 100% 100% no-repeat;
  mask: url("blood-vase-back.svg?v=20260904b") center / 100% 100% no-repeat;
}

.blood-meter-liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--blood-fill-bottom, 8.549%);
  height: var(--blood-fill-height, 86.572%);
  background: linear-gradient(
    to bottom,
    var(--blood-liquid-top, #eb1102) 0%,
    var(--blood-liquid-bottom, #4E0235) 100%
  );
  transition: height 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.blood-meter-wave {
  position: absolute;
  left: -35%;
  width: 170%;
  height: 4%;
  min-height: 10px;
  border-radius: 46%;
  transform-origin: 50% 50%;
  animation: blood-meter-wave-drift 3.8s ease-in-out infinite alternate;
}

/* Dark blood behind, light blood in front. Near-full opacity on both: at 0.38
   the rear crest blended into the body colour and the drift was invisible. */
.blood-meter-wave--rear {
  top: -1.1%;
  background: var(--blood-liquid-shadow, #540600);
  opacity: 0.95;
  animation-duration: 5.2s;
  animation-direction: alternate-reverse;
}

.blood-meter-wave--front {
  top: -0.35%;
  background: var(--blood-liquid-highlight, #f42229);
  opacity: 0.92;
}

.blood-meter-vase-outline {
  z-index: 3;
}

@keyframes blood-meter-wave-drift {
  0% {
    transform: translateX(-7%) rotate(-1.5deg) scaleY(0.72);
  }

  55% {
    transform: translateX(3%) rotate(1deg) scaleY(1);
  }

  100% {
    transform: translateX(8%) rotate(-0.5deg) scaleY(0.78);
  }
}

.blood-meter-readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  justify-content: center;
}

.blood-meter-level {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blood-tone);
  background: transparent;
  border: 1px solid var(--blood-tone);
  border-radius: 999px;
  padding: 1px 8px;
}

.blood-meter-volume {
  font-size: 1.02rem;
  line-height: 1.2;
}

.blood-meter.is-compact .blood-meter-volume {
  font-size: 0.9rem;
}

.blood-meter-of {
  color: var(--blood-meter-muted);
  font-size: 0.82em;
}

.blood-meter-percent,
.blood-meter-fatigue {
  font-size: 0.74rem;
  color: var(--blood-meter-muted);
}

.blood-meter-fatigue {
  color: var(--blood-tone);
  font-weight: 600;
}

.blood-meter-regen {
  font-size: 0.74rem;
  color: var(--blood-meter-muted);
}

/* A stalled refill is actionable information (still bleeding / recovery
   blocked), so it carries the level's colour rather than sitting in muted
   text with the routine rate line. */
.blood-meter-regen.is-stalled {
  color: var(--blood-tone);
  font-weight: 600;
}

.blood-meter-description {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--blood-meter-muted);
  max-width: 42ch;
}

.blood-meter-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.blood-meter-effect {
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 0 6px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--blood-tone);
  color: var(--blood-meter-ink);
  white-space: nowrap;
}

/* Graphic-only variant (player sheet): the bottle alone, at double size since
   it is carrying the whole reading with no numbers beside it. */
.blood-meter.is-graphic-only .blood-meter-bottle {
  width: 104px;
  height: 416px;
}

/* Player dashboard placement: overlays the open space to the right of the
   skeleton, standing on the floor of the status-map frame. */
.dashboard-blood {
  position: absolute;
  top: auto;
  /* Inset off the frame edge so the vase stands on the parchment field rather
     than across the illuminated border painted around it. */
  bottom: 3%;
  right: 7%;
  z-index: 2;
  pointer-events: none;
}

/* GM tactical card / damage dashboard placement lives in gm-damage.css, which
   owns the panel chrome those surfaces sit inside. */

@media (max-width: 640px) {
  .blood-meter-description {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blood-meter-liquid {
    transition: none;
  }

  .blood-meter-wave {
    animation: none;
  }
}