.hero-portrait{flex-shrink:0;display:inline-block;position:relative}.hero-portrait-image{border-radius:inherit;background:#ffffff0a;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.hero-portrait-img{object-fit:cover;width:100%;height:100%;display:block}.hero-portrait-fallback{color:#fff9;font-size:14px;font-weight:700}.hero-portrait-type{border-radius:50%;position:absolute;box-shadow:0 4px 6px #0002}
.hero-selector-scroll{overscroll-behavior:contain;max-height:400px;padding:16px;overflow-y:auto}.hero-selector-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.hero-selector-grid .hero-selector-option{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px;display:flex}.hero-selector-grid .hero-selector-option:hover:not(:disabled){background:#8b5cf633;border-color:#8b5cf680}.hero-selector-grid .hero-selector-option:disabled{opacity:.3;cursor:not-allowed;background:#ffffff05;border-color:#ffffff0d}.hero-selector-grid .hero-selector-portrait{border:2px solid #ffffff1a;border-radius:50%}.hero-selector-option:hover:not(:disabled) .hero-selector-portrait{border-color:#8b5cf680}.hero-selector-name{text-overflow:ellipsis;white-space:nowrap;color:#fffc;max-width:100%;font-size:12px;font-weight:500;overflow:hidden}.hero-selector-status{text-align:center;color:#fff6;padding:32px 0;font-size:13px}