/* PIANO ARMY · his hero's portrait (web/army-hero-portrait.css), the hero bar's first box (army-hero-portrait.js): its
   picture with its level in a big badge, its name, its health and experience, a pip a spell; fallen, grey with its
   seconds; co-op his allies' heroes small beside it. The bar's own words and buttons in `.hero-body`, laid out as before. */
.herobar .hero-body { display: contents; }
.hero-portrait { display: flex; align-items: center; gap: 6px; padding-right: 7px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.hero-portrait .hp-face { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 9px; overflow: visible; border: 2px solid #c9a24a; background: radial-gradient(circle at 50% 35%, #2a3352, #0b1020); cursor: pointer; }
.hero-portrait .hp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 7px; transform: scale(1.35); transform-origin: 50% 20%; clip-path: inset(0 round 7px); }
.hero-portrait .hp-lv { position: absolute; right: -7px; bottom: -7px; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(#ffe27a, #d9a22a); color: #1c1300; font: 800 13px/1 "Barlow Condensed", Barlow, sans-serif; border: 2px solid #0b1020; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.hero-portrait .hp-back { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 20px/1 "Barlow Condensed", Barlow, sans-serif; text-shadow: 0 1px 3px #000; }
.hero-portrait.down .hp-face { border-color: #6a6f80; }
.hero-portrait.down .hp-face img { filter: grayscale(1) brightness(0.45); }
.hero-portrait .hp-side { display: flex; flex-direction: column; gap: 3px; min-width: 86px; }
.hero-portrait .hp-name { font: 700 12px/1.1 "Barlow Condensed", Barlow, sans-serif; color: #f0e2b8; white-space: nowrap; }
.hero-portrait .hp-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.hero-portrait .hp-bar u { display: block; height: 100%; border-radius: 3px; transition: width .25s; }
.hero-portrait .hp-health u { background: linear-gradient(#7ee08a, #3bb04f); }
.hero-portrait .hp-xp { height: 4px; }
.hero-portrait .hp-xp u { background: linear-gradient(#b7a6ff, #7a62e8); }
.hero-portrait .hp-pips { display: flex; gap: 3px; }
.hero-portrait .hp-pips em { min-width: 14px; height: 12px; padding: 0 2px; border-radius: 3px; font: 700 9px/12px Barlow, sans-serif; font-style: normal; text-align: center; color: #c9d2ea; background: rgba(255, 255, 255, 0.1); }
.hero-portrait .hp-pips em.ready { background: #3f8fe0; box-shadow: 0 0 5px rgba(63, 143, 224, 0.7); }
.hero-portrait .hp-allies { display: flex; gap: 4px; margin-left: 2px; }
.hero-portrait .hp-allies[hidden] { display: none; }
.hero-portrait .hp-allies span { position: relative; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); background: #0b1020; }
.hero-portrait .hp-allies img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.hero-portrait .hp-allies b { position: absolute; right: 0; bottom: 0; min-width: 13px; padding: 0 2px; font: 800 10px/13px "Barlow Condensed", Barlow, sans-serif; text-align: center; color: #1c1300; background: #e6b84a; border-top-left-radius: 4px; }
.hero-portrait .hp-allies span.down img { filter: grayscale(1) brightness(0.5); }
/* (2D, the hero bar in the field's bottom right corner beside the factory row: its portrait a box of its own just above
   it, left of the small map (which keeps its place over the bar's right end), the bar as wide as before) */
#stage:not(.rendering-3d) .hero-portrait { position: absolute; right: 142px; bottom: calc(100% + 4px); padding: 5px 7px; margin: 0; border: none; border-radius: 10px; background: rgba(14, 18, 34, 0.86); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
#stage:not(.rendering-3d) .herobar.selected .hero-portrait { box-shadow: 0 0 0 2px #72b9ef, 0 2px 10px rgba(0, 0, 0, 0.45); }