/* Bro Rogue — Shared icon language
   Inline SVG references use the sprite mounted in screens/meta.html.
   Emoji remains available for expressive flavor text; semantic UI cues use
   this consistent stroke, sizing, and state treatment instead. */

.uiIconSprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.uiIcon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uiIcon--element {
    width: 1.3em;
    height: 1.3em;
    filter: drop-shadow(0 0 5px currentcolor);
}

.uiIcon--need {
    width: 1.1rem;
    height: 1.1rem;
    color: rgb(255 255 255 / 82%);
}

.uiIcon--stat {
    width: 1rem;
    height: 1rem;
    color: var(--secondary-color);
}

.uiIcon--status {
    width: 0.95rem;
    height: 0.95rem;
}

.uiIcon--venue {
    width: 1.25em;
    height: 1.25em;
    stroke-width: 1.65;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
}

.uiIcon--action {
    width: 1.05em;
    height: 1.05em;
}

.elementBadge .uiIcon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 1.75;
}

.characterCard .statPill .uiIcon {
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -0.18em;
}

.stageEmoji,
.progressRail-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stageEmoji .uiIcon {
    width: 3.9rem;
    height: 3.9rem;
    stroke-width: 1.35;
}

.progressRail-dot .uiIcon {
    width: 1rem;
    height: 1rem;
    stroke-width: 1.7;
}

.needBarIcon,
[class$='NeedBarIcon'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    min-width: 1.3rem;
    font-size: 0;
}

[class$='NeedBarIcon'] .uiIcon {
    width: 1rem;
    height: 1rem;
}

.statLabel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.statusBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.statusPip .uiIcon {
    width: 0.85rem;
    height: 0.85rem;
}

.stageTimeIndicator .uiIcon,
#battleStageInfo .uiIcon {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .uiIcon--element,
    .uiIcon--venue {
        filter: none;
    }
}