/* Energy Display Component */
.energy-icons {
    display: flex;
    gap: 0.25rem;
}

.energy-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.energy-full {
    color: var(--orange-flash);
}

/* Fill the SVG path to make full icons solid (ux_icon inlines SVG, so path is targetable) */
.energy-full path {
    fill: var(--orange-flash);
}

.energy-empty {
    color: var(--grey-light);
    opacity: 0.4;
}

.energy-unlimited {
    color: var(--green);
    font-weight: 600;
}

.energy-depleted {
    color: var(--grey-dark);
}