.heroes-sort-label { color: #f8dfa0; white-space: nowrap; }
.hero-tile-power { position: absolute; z-index: 3; top: 14px; right: 1px; height: 11px; display: flex; align-items: center; justify-content: center; gap: 1px; padding: 0 2px; border-radius: 4px 0 0 4px; background: #171f37df; color: #ffe798; font-size: 8px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px #000; }
.hero-tile-power svg { width: 8px; height: 8px; flex: none; }
.hero-power-bar { display: flex; align-items: center; justify-content: center; gap: 7px; width: min(260px, 100%); min-height: 30px; margin: 0 auto 3px; padding: 2px 10px; border: 1px solid #d2b674; border-radius: 6px 6px 14px 14px; background: linear-gradient(#343e61, #222b48); box-shadow: 0 2px 0 #242339; color: #ffe798; cursor: pointer; }
.hero-power-bar svg { width: 25px; height: 25px; }
.hero-power-label { font-size: 11px; color: #e4e7f4; }
.hero-power-bar strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.hero-power-info { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #afbfe7; border-radius: 4px; color: #fff; font: 700 12px Georgia, serif; background: #5d72a0; }
.hero-power-bar:focus-visible { outline: 3px solid #fff4b8; outline-offset: 2px; }
.hero-power-total { text-align: center; color: #ffe798; font-size: 28px; font-weight: 800; }
.hero-power-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; padding: 14px; background: #23294077; border: 1px solid #8592b3; border-radius: 8px; }
.hero-power-breakdown dt { color: #edf1ff; }
.hero-power-breakdown dd { margin: 0; color: #ffe798; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .heroes-sort-label { font-size: 8px; } .hero-tile-power { font-size: 8px; } }