#roster{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{height:clamp(130px,25vh,260px)}
.card .fighter-name{display:block;text-transform:uppercase}
span.fighter-name-accent{font:inherit;letter-spacing:inherit;color:#ff4d4d;white-space:nowrap}
.card canvas,.card>img{position:absolute;inset:0;width:100%;height:100%}
.card>img{object-fit:cover;object-position:center 14%;background:#ffffff}
.card:nth-child(3)>img{object-position:center 12%}
.card:nth-child(4)>img,.card:nth-child(5)>img{object-position:center 9%}
.card:nth-child(6)>img{object-position:center 10%}
.card:nth-child(7)>img{object-position:center 15%}
.card:nth-child(8)>img{object-position:center 11%}
@media(max-width:760px){
 #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .card,.card:nth-child(4){height:clamp(88px,23vh,124px);grid-column:auto}
 .card .label{font-size:clamp(12px,3vw,17px);left:6px;bottom:7px}
 .card .label small{font-size:7px;letter-spacing:.35px;margin-top:3px}
 .card .index{font-size:8px;left:6px;top:6px}
}
@media(max-height:460px) and (orientation:landscape){
 .screen{padding-top:8px;padding-bottom:8px}
 header{padding-bottom:7px}
 .select-heading{margin:8px 0 7px}
 .select-heading h1{font-size:27px}
 #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .card,.card:nth-child(4){height:112px;grid-column:auto}
 .card>img{object-position:center top}
 .setup{padding:8px 0;gap:10px}
}
.audio-levels{display:grid;gap:16px;margin:20px 0}
.audio-levels label{display:grid;grid-template-columns:100px 1fr 42px;align-items:center;gap:12px;color:#f4f1e9}
.audio-levels input{width:100%;accent-color:var(--gold)}
.audio-levels output{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}
.audio-levels .blood-setting input{width:auto;justify-self:end;transform:scale(1.25)}