/* V.51: five equal cards; upcoming operatives remain visible and responsive. */
body.choosing #character-selection{max-width:min(1090px,96vw)}
body.choosing .character-roster{width:100%;box-sizing:border-box}
body.choosing .character-card{min-width:0;width:20%;flex:1 1 20%}
body.choosing #pick-guardian img{object-position:50% 18%}
body.choosing #pick-mechanic img{object-position:50% 18%}
body.choosing .character-card.unavailable,
body.choosing .character-card.unavailable:hover,
body.choosing .character-card.unavailable:focus{opacity:1;transform:none;cursor:pointer;border-color:#89918a70;box-shadow:none}
body.choosing .character-card.unavailable img{filter:grayscale(1) brightness(.72)}
body.choosing .character-card.unavailable .operative-caption{color:#aeb6b3}
body.choosing .character-card.unavailable .operative-caption small{color:#9ca8a6}
body.choosing .character-card.unavailable.soon-peek,
body.choosing .character-card.unavailable.soon-peek:hover{
  border-color:#d2ad78;
  box-shadow:inset 0 0 0 2px #d2ad78;
}
body.choosing .character-card.unavailable.soon-peek .operative-caption small{color:#f0c58e}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){
  body.choosing #character-selection{max-width:min(720px,96vw)}
  body.choosing .character-roster{gap:0}
  body.choosing .character-card{width:20%;flex:1 1 20%}
  body.choosing .operative-caption strong{font-size:clamp(9px,1.6vw,13px);letter-spacing:.5px}
}
@media(max-width:540px){
  body.choosing #character-selection{max-width:100%}
  body.choosing .character-card{width:20%;flex:1 1 20%}
  body.choosing .character-roster{padding:6px}
  body.choosing .operative-caption strong{font-size:clamp(7px,1.8vw,10px);letter-spacing:0}
  body.choosing .operative-caption small{font-size:clamp(5px,1.3vw,7px);letter-spacing:0}
}