.sr-char-card { background: #0f141d; border-color: var(--bs-border-color); transition: border-color .2s; }
.sr-char-card:hover { border-color: var(--bs-info); }
.sr-char-img-wrap { position: relative; overflow: hidden; height: 280px; background: #06090e; }
.sr-char-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .3s; }
.sr-char-card:hover .sr-char-img { transform: scale(1.04); }
.sr-char-overlay {
    position: absolute; inset: 0;
    background: rgba(6, 9, 14, 0.82);
    color: #e0e0e0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.25rem;
    opacity: 0; transition: opacity .25s;
}
.sr-char-card:hover .sr-char-overlay { opacity: 1; }
.sr-char-footer { background: #0a0f18; border-top: 1px solid var(--bs-border-color); padding: .6rem 1rem; text-align: center; }
.sr-char-no-img { width: 100%; height: 100%; background: #0a0f18; }
.sr-char-delete { position: absolute; top: 6px; right: 6px; z-index: 10; opacity: 0; transition: opacity .2s; padding: 2px 6px; font-size: 0.7rem; line-height: 1; }
.sr-roster-grid > div:hover .sr-char-delete { opacity: 1; }

.sr-roster-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: calc(var(--roster-cols) * 200px + (var(--roster-cols) - 1) * 1rem);
  margin-inline: auto;
}
.sr-roster-grid > div {
  width: 200px;
  flex-shrink: 0;
}