/* Portraits stay outside the active board. Static WebP with code-native offline fallbacks. */
.cast-portrait { width: var(--portrait-size, 128px); height: calc(var(--portrait-size, 128px) * 1.1); max-width: 100%; position: relative; display: inline-block; isolation: isolate; overflow: hidden; vertical-align: middle; border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--cast) 25%, #182539), #152135); border: 1px solid color-mix(in srgb, var(--cast) 45%, #263953); }
.cast-fallback { position: absolute; inset: 0; display: grid; place-items: end center; }
.cast-fallback svg { display: block; width: 100%; height: 100%; }
.cast-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; }
.cast-portrait > img.cast-loaded { opacity: 1; }
.cast-portrait.outfit-circuit { border-color: #83e9e1; }
.cast-portrait.outfit-champion { border-color: #efca72; }
.cast-studio { margin: 18px 0 24px; }
.cast-studio-heading h3 { margin: 4px 0; }
.cast-studio-heading p { margin: 6px 0 16px; }
.cast-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cast-choice, .cast-outfit { color: var(--ink); background: var(--bg); border: 2px solid var(--line); padding: 8px; border-radius: 16px; min-width: 0; font: inherit; cursor: pointer; }
.cast-choice { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cast-choice > span:last-child { display: block; font-size: .85rem; font-weight: 800; overflow-wrap: anywhere; }
.cast-choice .cast-portrait { border-radius: 10px; width: 100%; height: 90px; }
.cast-choice.selected, .cast-outfit.selected { border-color: var(--accent); outline: 1px solid var(--accent); }
.cast-choice.selected > span:last-child::before { content: '✓ '; }
.cast-choice:hover, .cast-outfit:hover:not(:disabled) { border-color: var(--accent); }
.cast-outfits-title { margin: 24px 0 12px; }
.cast-outfits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cast-outfit { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cast-outfit .cast-portrait { width: 100%; height: 110px; }
.cast-outfit b { font-size: .85rem; }
.cast-outfit small { font-size: .74rem; line-height: 1.4; }
.cast-outfit:disabled { opacity: .7; cursor: default; }
.cast-fairness { font-size: .8rem; color: var(--muted); }
.cast-save-status { color: var(--accent); font-size: .85rem; min-height: 1.5em; }
#hero-form { max-width: 720px; }
#hero-emblem { width: 112px; height: 122px; border: 0; background: none; }
#hero-emblem .cast-portrait { width: 112px; height: 122px; }
#hero-emblem svg { width: 100%; height: 100%; }
.st-hero-identity { display: flex; align-items: center; gap: 16px; }
.st-hero-identity > .cast-portrait { flex-shrink: 0; }
.st-hero-identity p { margin: 5px 0; }
.st-bust > .cast-portrait { width: 100%; height: 100%; border: 0; border-radius: 0; }
@media (min-width: 560px) { .cast-roster { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cast-choice .cast-portrait { height: 112px; } .cast-outfit .cast-portrait { height: 150px; } }
@media (max-width: 360px) { .cast-roster, .cast-outfits { gap: 7px; } .cast-choice, .cast-outfit { padding: 6px; } .cast-outfit .cast-portrait { height: 86px; } .st-hero-identity { gap: 10px; } }