.heroPicker{position:relative;min-width:0}
.heroPickerSelection{display:block;position:relative;min-width:0;width:100%}
.heroPickerSelection input[readonly]{cursor:pointer;min-width:0;padding-right:35px}
.heroPickerSelection .heroPickerPortrait{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:56px;height:32px;object-fit:contain;border-radius:4px;pointer-events:none}

.heroPickerPanel{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;padding:10px;background:#fff;border:1px solid #cdd6e8;border-radius:10px;box-shadow:0 10px 24px #14244430}
.heroPickerPanel[hidden]{display:none}
.heroPickerPanel .heroPickerSearch{width:100%;box-sizing:border-box}
.heroPickerCount{display:block;margin:8px 0;color:#65758f}
.heroPickerList{max-height:300px;overflow:auto;overscroll-behavior:contain;display:grid;gap:3px}
.heroPickerList button{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:7px 8px;background:#fff;border:1px solid transparent;border-radius:6px;color:#17233b;cursor:pointer;font-size:13px}
.heroPickerList button:hover,.heroPickerList button:focus-visible{background:#f1f4ff;border-color:#b8c5f5;outline:none}
.heroPickerList button[aria-selected=true]{background:#eaf0ff;border-color:#7e90ef}
.heroPickerList img{flex:0 0 56px;object-fit:contain;border-radius:3px}
.heroPickerList span{min-width:0;display:grid;gap:2px;overflow-wrap:anywhere}
.heroPickerList b{font-size:13px;font-weight:600}
.heroPickerList small{color:#65758f;font-size:12px}
.heroPickerEmpty{padding:14px 0;text-align:center;color:#65758f}
@media(max-width:600px){.heroPickerList{max-height:220px}}

#recordingHeroTarget{display:grid;gap:6px;align-content:start;font-size:13px;color:#53617d}
#recordingHeroTarget[hidden]{display:none}

/* One outline and one inside chevron for all recording target controls. */
#recordingViewType,#recordingMatchPlayer,#recordingHeroName{appearance:none;-webkit-appearance:none;width:100%;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2337445e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px}
.heroPickerSelection:has(.heroPickerPortrait:not([hidden])) #recordingHeroName{padding-left:76px}

.heroPickerTeam{display:grid;gap:3px;min-width:0}.heroPickerTeam h4{margin:0;padding:7px 8px;font-size:12px;background:#edf7f2;color:#17684a;border-radius:5px}.heroPickerTeam[data-side="dire"] h4{background:#fff0ed;color:#9f4135}.heroPickerTeam[data-side="unknown"] h4{background:#f1f3f8;color:#53617d}