/* The five approved hero themes. Rarity, lucky marks and skill elements keep their own meaning. */
.hg-formation-slot[data-hero-id] .hg-formation-level {
    background-image:var(--hero-badge);
    color:var(--hero-on-color);
    text-shadow:none;
}
.hg-formation-slot[data-hero-id] .hg-formation-level span {color:inherit}
.hg-hero-card[data-hero-id]:hover .hg-card-portrait-outer {filter:drop-shadow(0 3px 5px var(--hero-edge))}
.hg-hero-card[data-hero-id].edit-selected .hg-card-portrait-outer {outline:2px solid var(--hero-color);outline-offset:2px;border-radius:10px}
.hg-hero-card[data-hero-id] .hg-card-name {text-decoration-color:var(--hero-color)}
#hero-detail-screen[data-hero-id] .hd-hero-name,
#hero-detail-screen[data-hero-id] #hd-top-name {color:var(--hero-light)}
#hero-detail-screen[data-hero-id] .hd-portrait-container {border-color:var(--hero-edge)}
#hero-detail-screen[data-hero-id] .hd-dice-face {
    border-color:var(--hero-color);
    background:var(--hero-light);
    outline-color:var(--hero-edge);
    color:var(--hero-ink);
}
.hd-face-modal[data-hero-id] .hd-face-modal-title {color:var(--hero-ink)}
.hd-face-modal[data-hero-id] .hd-face-modal-item.current {
    border-color:var(--hero-edge);
    background:var(--hero-light);
}
.dice-tray-host .tray-dice-unit[data-hero-id] .dice-cooldown-fill {
    background:linear-gradient(90deg,var(--hero-edge),var(--hero-color));
}
.hero-cast[data-hero-id]:not(.is-lucky):not(.is-ace):not(.is-resonance) .hero-cast-panel {
    background:var(--hero-light);
    border-color:var(--hero-edge);
}
.hero-cast[data-hero-id]:not(.is-lucky):not(.is-ace):not(.is-resonance) .hero-cast-name {color:var(--hero-ink)}
.su-hero-tab-item[data-hero-id].active {filter:drop-shadow(0 1px 3px var(--hero-color))}
.su-hero-tab-item[data-hero-id]:focus-visible {outline-color:var(--hero-color)}
#skill-upgrade-screen[data-hero-id] .su-card-slot {background-color:var(--hero-ink)}
#skill-upgrade-screen[data-hero-id] .su-hero-name {color:var(--hero-light)}
.upgrade-card[data-hero-id] {--card-hero-accent:var(--hero-color)}
.upgrade-card[data-hero-id] .upgrade-card-title,
.upgrade-card[data-hero-id] .upgrade-skill-desc,
.upgrade-card[data-hero-id] .upgrade-growth-note,
#skill-upgrade-screen[data-hero-id] .su-card-type-tag {
    color:var(--hero-card-ink);
    text-shadow:var(--hero-card-text-shadow);
}
.upgrade-card[data-hero-id] .upgrade-desc-number {color:var(--hero-card-number)}
.upgrade-card[data-hero-id]:focus-visible {outline:none}
.hero-card[data-hero-id]:focus-visible {outline-color:var(--hero-color)}
.hero-journey-overlay[data-hero-id] .journey-tab.active {
    background:var(--hero-light);
    border-color:var(--hero-edge);
    color:var(--hero-ink);
}
.hero-journey-overlay[data-hero-id] .journey-role,
.hero-journey-overlay[data-hero-id] .journey-availability {color:var(--hero-edge)}