/* v022: the court ends above the toolbar, so controls cannot cover a player. */
:root{--toolbar-height:38px}
html,body,#game{width:100%;height:100%;margin:0;overflow:hidden}
#court{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--toolbar-height));display:block}
footer{position:absolute;left:0;right:0;bottom:0!important;transform:none;width:100%;height:var(--toolbar-height);padding:3px 8px;box-sizing:border-box;display:flex;flex-wrap:nowrap;gap:8px;align-items:center;justify-content:center;background:#12271d;border-top:1px solid #83976d}
footer button{padding:5px 12px!important;margin:0!important;font-size:12px!important;line-height:20px;white-space:nowrap}
#status{left:12px;right:auto;top:54px;bottom:auto!important;transform:none;max-width:min(240px,32vw);padding:0;background:none;box-shadow:none;border:0;font-size:12px;line-height:1.35;text-align:left;text-shadow:0 1px 3px #000,0 0 5px #000;pointer-events:none}
#status:empty{display:none}
#controlsOverlay{max-height:calc(100dvh - 24px);width:min(620px,90vw);overflow:auto;box-sizing:border-box;padding:18px}
#extraControls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:12px 0}
#extraControls #padStatus,#extraControls>span{display:block;flex-basis:100%;font-size:12px}
#extraControls button{font-size:12px;padding:6px 12px}
#extraControls .musicControls{flex-basis:100%;margin:4px 0}

/* Keep the title artwork visible above the bottom-aligned selection panel. */
#intro{width:100%;height:100dvh;padding:8px 12px;overflow:hidden;background-position:center top;align-items:flex-end}
.desktopMenu{width:min(1240px,100%);padding:8px 12px;box-sizing:border-box;background:linear-gradient(100deg,#10281cc9,#10281cdb);border:1px solid #c4d59a77;border-radius:14px}
#intro h1{font-size:18px;line-height:1.1;margin:0 0 4px}
.rosterPicker{margin:0 0 6px}.sidePicker{margin:0 0 5px;gap:6px}
.sidePicker button{font-size:12px;padding:5px 12px;line-height:1.1}
#rosterGrid{gap:6px;grid-template-columns:repeat(8,minmax(0,1fr))}
.rosterCard{padding:3px!important;font-size:10px;line-height:1.15;min-width:0}
.rosterCard img{height:clamp(48px,12dvh,104px);width:100%;object-fit:contain;aspect-ratio:auto}
.rosterCaption{min-height:25px;gap:2px!important;flex-direction:column;justify-content:flex-start}
.rosterName{max-width:100%;font-size:inherit;line-height:1.1}
.selectionBadges{height:11px;line-height:11px}
.selectionBadges b{font-size:8px!important;line-height:11px!important;padding:0 4px!important}
.matchSetup{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0}
.matchSetup label{gap:2px}.matchSetup label>span:first-child{font-size:10px;line-height:1.1}
.matchSetup label>span:not(:first-child){display:none}
.matchSetup select{font-size:11px;padding:5px 3px;min-width:0;height:28px}
.desktopMenu .musicControls{margin:5px 0 3px;gap:8px;flex-wrap:nowrap}
.desktopMenu .musicControls button{padding:4px 9px;font-size:11px;line-height:1.2;margin:0}
.desktopMenu .musicControls input[type=range]{width:76px}
.desktopMenu .musicControls output{font-size:10px}
#menuSound{color:#14291c;background:#ffe77c;border:1px solid #fff0a8}
#intro #schemeHelp{font-size:10px;line-height:1.2;margin:2px 0}
#intro #loading{font-size:10px;line-height:1.15;margin:2px 0 4px}
#play,#demo{padding:7px 15px;font-size:12px;margin:0 3px;line-height:1.2}
#intro .keys{display:none}
@media(max-height:540px){
 #intro{padding:5px 10px}.desktopMenu{padding:6px 10px}
 #intro h1{font-size:15px}.sidePicker button{padding:4px 10px;font-size:11px}
 .rosterCard img{height:clamp(42px,11dvh,59px)}
 .matchSetup select{height:25px;font-size:10px}.matchSetup label>span:first-child{font-size:9px}
 .rosterPicker{margin-bottom:4px}.rosterCard{font-size:9px}
 #intro #schemeHelp,#intro #loading{font-size:9px}
}
@media(max-width:700px){
 .matchSetup{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 #intro{padding:4px 6px}.desktopMenu{padding:5px 7px}
 #rosterGrid{gap:3px}.rosterCard{font-size:8px;border-width:2px!important}
 .sidePicker{margin-bottom:3px}.rosterCaption{min-height:23px}
 footer{gap:4px;padding:3px 5px}footer button{font-size:11px!important;padding:5px 8px!important}
 #status{font-size:10px;top:48px;max-width:30vw}
}