/* Desktop selection fits the viewport; every control remains visible. */
#intro{height:100dvh;overflow:hidden;padding:12px 20px;display:flex;align-items:flex-end;justify-content:center}
#intro[hidden]{display:none!important}
.desktopMenu{width:min(1360px,100%);margin:0;padding:12px 18px;flex:none;border-radius:16px}
#intro h1{font-size:20px;line-height:1.2;margin:0 0 6px}
.rosterPicker{margin:0 0 8px}.sidePicker{margin:0 0 7px}.sidePicker button{padding:6px 14px;font-size:13px}
#rosterGrid{gap:8px}.rosterCard{min-width:0;font-size:11px;line-height:1.2;padding:3px 3px 5px}
.rosterCard img{height:clamp(80px,16dvh,144px);max-height:none;aspect-ratio:auto}
.matchSetup{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0}
.matchSetup label{min-width:0;gap:4px}.matchSetup label>span:first-child{display:block;font-size:11px;color:#ffe9a0;line-height:1.2}
.matchSetup label>span:not(:first-child){display:block;font-size:10px;line-height:1.25;min-height:0}
.matchSetup select{width:100%;min-width:0;font-size:12px;padding:7px 5px;border-radius:6px}
.desktopMenu>.musicControls{margin:7px 0 4px}
#intro #schemeHelp{font-size:11px;line-height:1.3;margin:4px 0}
#intro #loading{font-size:11px;line-height:1.3;margin:3px 0 6px}
#play,#demo{padding:9px 18px;font-size:13px}
#intro .keys{display:block;font-size:10px;line-height:1.2;margin:6px 0 0;max-height:none;overflow:visible}
@media(max-height:780px){
 #intro{padding:10px 16px}.desktopMenu{padding:10px 14px}
 #intro h1{font-size:18px}.rosterCard img{height:clamp(72px,14dvh,104px)}
 .matchSetup label>span:not(:first-child){font-size:9px}
 #intro .keys{display:none}
}
@media(max-width:1150px){
 #intro{padding:8px 12px}.desktopMenu{padding:10px 12px}
 .matchSetup{gap:6px}.matchSetup select{font-size:11px}
 .rosterCard{font-size:10px}#rosterGrid{gap:5px}
}
@media(max-height:610px){
 #intro{padding:7px 12px}.desktopMenu{padding:8px 12px}
 #intro h1{font-size:16px;margin-bottom:4px}.sidePicker{margin-bottom:5px}.sidePicker button{padding:4px 12px}
 .rosterCard img{height:72px}.rosterPicker{margin-bottom:6px}
 .matchSetup label>span:not(:first-child){display:none}.matchSetup select{padding:6px 4px}
 .desktopMenu>.musicControls{margin:5px 0 2px}.desktopMenu>.musicControls button{padding:4px 10px}
 #play,#demo{padding:7px 16px}#intro #loading{margin-bottom:4px}
}
@media(max-width:900px){.matchSetup{grid-template-columns:repeat(3,minmax(0,1fr))}.matchSetup label>span:not(:first-child){display:none}}