/* Nine square cards, with the selected standing fighter beside them. */
#select#select#select{padding:12px max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
#select#select#select .selection-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(400px,460px);gap:24px;align-items:start;padding-top:0}
#select#select#select .player-preview{grid-column:1;grid-row:1;padding-top:0}
#select#select#select .opponent-preview{grid-column:2;grid-row:1;padding-top:0}
#select#select#select .selection-center{grid-column:3;grid-row:1}
#select#select#select[data-step=player] .player-preview{grid-column:1/3;width:min(100%,520px);justify-self:center}
#select#select#select[data-step=player] .opponent-preview{display:none!important}
#select#select#select .roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#select#select#select .portrait{display:flex;flex-direction:column;min-height:0;overflow:hidden;text-align:center;border-radius:5px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#select#select#select .portrait canvas{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
#select#select#select .portrait-name{width:100%;min-height:28px;padding:5px 2px;font-size:12px;line-height:18px;letter-spacing:.4px;background:#160f20}
#select#select#select .selection-cursor{right:4px;left:auto;top:4px;font-size:10px;padding:2px 3px}
#select#select#select .selection-target{font-size:14px;min-height:34px;margin-bottom:10px;justify-content:center}
#select#select#select .selection-status{margin:7px 0;min-height:20px}
#select#select#select .select-header .select-brand{height:84px}
#select#select#select .mode-picker{margin:8px 0 10px}
#select#select#select #exhibition-options{margin:0 auto 8px;min-height:24px}
#select#select#select .fighter-preview .preview-art{height:clamp(300px,48svh,460px)}
#select#select#select .preview-logo{height:64px;width:100%;max-width:100%;margin:5px auto 0}
#select#select#select .selection-footer{padding-top:8px}
#select#select#select .selection-footer .audio-options{margin-top:8px;padding-top:8px}
@media(max-width:1000px){
 #select#select#select .selection-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(320px,42%);gap:16px}
}
@media(max-width:720px),(max-width:1000px) and (pointer:coarse){
 #select#select#select{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 #select#select#select .select-header .select-brand{height:64px}
 #select#select#select .selection-stage{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:10px}
 #select#select#select .player-preview,#select#select#select[data-step=player] .player-preview{grid-column:1;grid-row:1;width:100%}
 #select#select#select .selection-center{grid-column:2;grid-row:1}
 #select#select#select .opponent-preview{position:relative;grid-column:1;grid-row:1;top:auto;right:auto;margin:250px 0 0;width:100%}
 #select#select#select .fighter-preview .preview-art{height:clamp(170px,28svh,235px)}
 #select#select#select[data-step=opponent] .fighter-preview .preview-art{height:110px}
 #select#select#select .preview-logo{height:46px}
 #select#select#select .player-tag{height:40px;min-height:40px;line-height:14px;font-size:11px;padding:2px;letter-spacing:0;align-content:center;justify-content:center}
 #select#select#select .roster{gap:5px}
 #select#select#select .portrait-name{font-size:11px;line-height:15px;min-height:25px;padding:5px 0;letter-spacing:0}
 #select#select#select .portrait[data-index="3"] .portrait-name{font-size:10px}
 #select#select#select .selection-cursor{font-size:9px;padding:1px 2px;right:2px;top:2px}
 #select#select#select .selection-target{font-size:11px;line-height:1.35;min-height:34px;margin-bottom:6px}
 #select#select#select .selection-status{font-size:11px;line-height:1.4}
 #select#select#select .selection-actions .start{font-size:12px;line-height:1.3;min-height:48px;padding:8px 4px;overflow-wrap:anywhere}
 #select#select#select .selection-hint{display:none}
 #select#select#select .selection-footer{margin-top:10px;gap:8px}
 #select#select#select .selection-footer select{font-size:16px;max-width:150px;min-height:44px}
 #select#select#select .selection-footer .language-option{grid-column:1/-1;justify-content:center;font-size:12px;gap:8px}
 #select#select#select .selection-footer .quiet{min-height:44px}
}
/* Small phones use the full width for readable square cards. */
@media(max-width:374px) and (orientation:portrait){
 #select#select#select .selection-stage{grid-template-columns:1fr;gap:12px}
 #select#select#select .player-preview,#select#select#select[data-step=player] .player-preview{grid-column:1;grid-row:1;display:grid;grid-template-columns:115px minmax(0,1fr);gap:4px 10px;align-items:center}
 #select#select#select .player-preview .player-tag{grid-column:1/-1;height:28px;min-height:28px}
 #select#select#select .player-preview .preview-art{grid-column:1;grid-row:2/4;height:135px}
 #select#select#select .player-preview .preview-logo{grid-column:2;grid-row:2;height:50px}
 #select#select#select .player-preview .selection-actions{grid-column:2;grid-row:3;margin:0}
 #select#select#select .selection-center{grid-column:1;grid-row:2}
 #select#select#select .portrait-name{font-size:12px}
 #select#select#select .portrait[data-index="3"] .portrait-name{font-size:12px}
 #select#select#select[data-step=opponent] .player-preview{display:block;grid-column:1;grid-row:1;width:50%}
 #select#select#select[data-step=opponent] .opponent-preview{grid-column:1;grid-row:1;width:50%;justify-self:end;margin:0}
 #select#select#select[data-step=opponent] .player-preview .preview-art{height:110px}
}
@media(orientation:landscape) and (max-height:600px){
 #select#select#select .selection-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(270px,43%);gap:12px}
 #select#select#select .selection-center{grid-column:3;grid-row:1}
 #select#select#select .player-preview{grid-column:1;grid-row:1}
 #select#select#select[data-step=player] .player-preview{grid-column:1/3;max-width:360px}
 #select#select#select .opponent-preview{grid-column:2;grid-row:1;margin:0}
 #select#select#select .fighter-preview .preview-art,#select#select#select[data-step=opponent] .fighter-preview .preview-art{height:180px}
 #select#select#select .select-header .select-brand{height:52px}
}
/* A short landscape screen uses two card rows so selection stays in reach. */
@media(orientation:landscape) and (max-height:500px){
 #select#select#select{padding-top:max(5px,env(safe-area-inset-top))}
 #select#select#select .select-header{min-height:0;padding-bottom:3px;gap:8px}
 #select#select#select .select-header .select-brand{height:36px;max-width:240px}
 #select#select#select .select-header h1{font-size:12px}
 #select#select#select .select-header .eyebrow{font-size:10px}
 #select#select#select .club-brand img{width:32px;height:32px}
 #select#select#select .mode-picker{margin:3px 0 5px;gap:6px}
 #select#select#select .mode-picker button{min-height:34px;padding:5px 8px;font-size:12px}
 #select#select#select .selection-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,min(54%,400px));gap:12px}
 #select#select#select .roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 #select#select#select .portrait-name{font-size:11px;line-height:14px;min-height:22px;padding:4px 0;letter-spacing:0}
 #select#select#select .portrait[data-index="3"] .portrait-name{font-size:10px}
 #select#select#select .fighter-preview .preview-art,#select#select#select[data-step=opponent] .fighter-preview .preview-art{height:140px}
 #select#select#select .player-tag{height:28px;min-height:28px;font-size:11px}
 #select#select#select .preview-logo{height:40px}
 #select#select#select .selection-target{min-height:20px;font-size:11px;margin-bottom:5px}
 #select#select#select .selection-status{font-size:11px;min-height:15px;margin:4px 0}
 #select#select#select .selection-actions .start{min-height:44px;font-size:12px;padding:7px 4px}
 #select#select#select .selection-hint{display:none}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:720px){
 #select#select#select .selection-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,62%)}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:600px){
 #select#select#select .roster{grid-template-columns:repeat(3,minmax(0,1fr))}
}