/* Character HUDs share the seven-lane limit with the character artwork. */
.hero-vitals {
  --vitals-color: #70edb2;
  position: absolute;
  top: -12px;
  left: 50%;
  width: min(150%, calc((100cqw - 6 * var(--board-gap, 4px))/7));
  height: 28px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #020611c9);
}
.vitals-frame { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #c5aa73; stroke-width: 1; }
.vitals-shell { fill: #091724f0; stroke: #6c614d; }
.vitals-inlay { stroke: #9fb4c236; }
.hero-vitals .vitals-rank {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 6px;
  border: 1px solid #b39b68;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(#403623, #171d2b);
  box-shadow: 0 1px 4px #030716cc, inset 0 1px #ffedbc33;
  color: #ffe1a0;
}
.vitals-rank .arena-icon { width: 10px; height: 10px; fill: #ffe1a0; stroke: #fff3cc; stroke-width: 1; filter: drop-shadow(0 0 2px #f3bb5555); }
.battle-character[data-stars="3"] .vitals-rank { border-color: #f4cd7e; background: linear-gradient(#715025, #272033); }
.battle-character[data-stars="3"] .vitals-frame { stroke: #ebcb81; }
.battle-character .hero-vitals .healthbar,
.battle-character .hero-vitals .manabar {
  left: 8px;
  right: 8px;
  border-radius: 1px;
  background: #020a13;
  border: 1px solid #ffffff16;
  box-shadow: inset 0 1px 3px #000a;
  overflow: hidden;
  z-index: 1;
}
.battle-character .hero-vitals .healthbar { top: 7px; height: 8px; }
.battle-character .hero-vitals .manabar { top: 18px; height: 4px; }
.hero-vitals .healthbar i,
.hero-vitals .manabar i { display: block; height: 100%; position: relative; transition: width 160ms ease-out; }
.battle-character .hero-vitals .healthbar i { background: linear-gradient(#bdffcd, #5fe4aa 40%, #259971); box-shadow: 0 0 5px var(--vitals-color); }
.enemy-unit .hero-vitals { --vitals-color: #ff887e; }
.enemy-unit .hero-vitals .healthbar i { background: linear-gradient(#ffd0aa, #ef7568 40%, #a13d4e); }
.hero-vitals .healthbar:after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 19%, #05132375 19% 20%); pointer-events: none; }
.battle-character .hero-vitals .manabar i { background: linear-gradient(#c0f8ff, #55cbea 55%, #4986ee); box-shadow: 0 0 5px #75dfff; }
.hero-vitals .manabar i:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #e8fcff; box-shadow: 0 0 4px #cff9ff; }
.vitals-shield { position: absolute; inset: 3px; border: 1px solid #abdaff; border-radius: 3px; opacity: 0; box-shadow: inset 0 0 5px #a1d8ff44, 0 0 6px #87bdff66; transition: opacity 150ms; }
.shielded .vitals-shield { opacity: .85; }
.mana-ready .hero-vitals .manabar { background: #81e3ff; box-shadow: 0 0 8px #80d7ff; }
.mana-ready .hero-vitals .manabar i { animation: mana-ready-light 1.1s ease-in-out infinite; }
.health-critical .hero-vitals .healthbar { border-color: #ff7777; }
.hero-panel-hp > i { position: relative; }
.hero-vitals .health-bonus,
.hero-panel-hp .health-bonus {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(#ffe0a0, #f8a23e 40%, #be5d24);
  border-left: 1px solid #ffedba;
  box-sizing: border-box;
  transition: width 160ms ease-out;
}
@keyframes mana-ready-light { 50% { opacity: .55; } }

/* Bevelled, rarity-coloured equipment seals. Tooltips keep their original anchors. */
.unit-equipment {
  bottom: -6px;
  gap: 3px;
  width: max-content;
  max-width: calc((100cqw - 6 * var(--board-gap, 4px))/7);
  align-items: flex-start;
  pointer-events: auto;
}
.equipment-gem {
  position: relative;
  display: block;
  width: 27px;
  flex: 0 1 27px;
  min-width: 0;
  aspect-ratio: 32 / 36;
  isolation: isolate;
}
.equipment-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--item-color, #dbc186);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px #030711);
  pointer-events: none;
}
.equipment-rim { fill: #0b1424; stroke-opacity: .6; }
.equipment-jewel { fill: var(--item-color, #dbc186); stroke: #fff3cc; stroke-width: .4; }
.unit-equipment .equipment-gem img,
.equipment-slots .equipment-gem img {
  position: absolute;
  inset: 9% 9% auto;
  z-index: 1;
  width: 82%;
  height: 73%;
  object-fit: contain;
  border: 0;
  border-radius: 2px;
  background: #152338;
  box-shadow: inset 0 0 4px #02060c;
}
.equipment-gem:hover .equipment-frame { filter: drop-shadow(0 0 4px var(--item-color, #dbc186)); }
.equipment-gem:hover img { filter: brightness(1.15); }
.equipment-slots .equipment-gem { width: 52px; }
.bench-avatar .unit-equipment { left: 50%; bottom: -3px; transform: translateX(-50%); max-width: 94%; gap: 1px; }
.bench-avatar .equipment-gem { width: 18px; flex-basis: 18px; }
@media (max-width: 750px) {
  .hero-vitals { top: -9px; height: 24px; }
  .hero-vitals .vitals-rank { top: -6px; padding: 1px 3px; }
  .vitals-rank .arena-icon { width: 8px; height: 8px; }
  .battle-character .hero-vitals .healthbar,
  .battle-character .hero-vitals .manabar { left: 4px; right: 4px; }
  .battle-character .hero-vitals .healthbar { top: 6px; height: 7px; }
  .battle-character .hero-vitals .manabar { top: 16px; height: 4px; }
  .unit-equipment { gap: 1px; bottom: -3px; }
  .equipment-gem { width: 22px; flex-basis: 22px; }
}
body[data-effects="reduced"] .hero-vitals i { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-vitals i { transition: none; animation: none; } }