/* A compact garage and a shared, visible controller focus treatment. */
.garage-menu-open header .tools,.garage-menu-open .map-accuracy{display:none!important}
.garage-menu-open header{pointer-events:none}
.garage-menu-open #controller-status{display:none}
#menu.menu{padding:86px max(28px,env(safe-area-inset-right)) 30px max(28px,env(safe-area-inset-left));align-items:center;overflow:auto;overscroll-behavior:contain;background:linear-gradient(90deg,#080e16ed,#080e16b3 57%,#080e1640)}
#menu .menu-content{width:min(820px,100%);max-width:820px;margin:0 0 0 3vw;padding:0;transform:none}
#menu .edition{font-size:11px;letter-spacing:.12em;margin:0 0 8px;line-height:1.3}
#menu h1.game-title{font-size:clamp(44px,5vw,72px);line-height:.96;letter-spacing:-.025em;max-width:none;margin:0}
#menu .title-main,#menu .title-main em{display:inline;white-space:normal}
#menu .title-route{display:block;width:auto;border:0;margin:9px 0 0;padding:0;font-size:14px;line-height:1.3;letter-spacing:.12em}
#menu .title-credit{display:inline;margin:0 0 0 10px;font-size:13px;letter-spacing:0;color:#d7d5cc}
#menu .title-credit strong{font:inherit;color:#ffd0ad}
#menu .garage-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;margin-top:24px}
#menu .garage-vehicles,#menu .garage-actions{min-width:0}
#menu .garage-heading{display:block;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.14em;color:#c6d0d5;margin:0 0 9px}
#menu .vehicle-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:none;gap:7px;margin:0}
#menu .vehicle-picker button{min-width:0;min-height:58px;margin:0;padding:10px;border-radius:6px;font-size:12px;letter-spacing:.03em;line-height:1.15}
#menu .vehicle-picker small{display:block;margin-top:5px;font-size:9px;letter-spacing:.02em;line-height:1.15;opacity:.75}
#menu .vehicle-picker button.selected{color:#fff5e9;background:#70482d8c;border-color:#ffbc89;box-shadow:inset 0 0 0 1px #ffbc89}
#menu .vehicle-picker #choose-dirtbike.selected{background:#4c60317a;border-color:#c2ef80;box-shadow:inset 0 0 0 1px #c2ef80}
#menu .car-label{position:static;display:flex;gap:4px;text-align:left;transform:none;margin-top:12px}
#menu .car-label>span{font-size:11px;letter-spacing:.06em;line-height:1.3;color:#f3e5d6}
#menu .car-label strong{font-size:20px;line-height:1.1}
#menu .car-label small{font-size:9px;letter-spacing:.03em;line-height:1.35;color:#b6c2cb}
#menu .paint{gap:7px;margin:10px 0 0;min-height:44px;flex-wrap:wrap}
#menu .paint>span{font-size:9px;letter-spacing:.06em;margin-right:4px}
#menu .swatch{width:44px;height:44px;border-width:9px;outline-offset:-4px;border-radius:50%}
#menu .garage-actions{display:grid;align-content:start;gap:8px}
#menu .start{max-width:none;min-height:56px;margin:0;padding:12px 17px;font-size:15px;letter-spacing:.06em;justify-content:center;gap:10px}
#menu .start:disabled{background:#738088;color:#15232b;box-shadow:none;cursor:wait}
#menu #menu-radio-cue{width:100%;max-width:none;min-height:48px;margin:0;padding:10px;text-align:center;font-size:12px;line-height:1.2;letter-spacing:.01em}
#menu .garage-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#menu .garage-shortcuts button{min-width:0;min-height:46px;padding:7px 3px;font-size:10px;line-height:1.2;font-weight:700;letter-spacing:.015em;border:1px solid #8c9caa80;border-radius:5px;background:#15212dcc}
#menu .album-drop{position:static;display:flex;gap:9px;align-items:center;max-width:none;margin:0;padding:6px 8px;min-height:48px;box-shadow:none;border:0;background:transparent;border-radius:5px}
#menu .album-drop img{width:36px;height:36px;flex:none}
#menu .album-drop span{display:block;min-width:0;font-size:11px;line-height:1.35;color:#d9e4df}
#menu .album-drop strong{font-size:11px;line-height:1.3}
#menu .album-drop b{display:block;font-size:9px;letter-spacing:.02em;margin-top:2px;color:#b2dfbc}
#menu .garage-help{display:block;margin:16px 0 0;font-size:11px;line-height:1.35;color:#c3ced3}
#menu .garage-help b{font-weight:700;color:#f5d7bb}
#menu .bottom-line{display:none}
.menu-pad-focus{outline:3px solid #ffca84!important;outline-offset:3px!important;box-shadow:0 0 0 6px #121a23!important}
#menu :is(button,a):focus-visible,#garage-options :is(button,a):focus-visible,#garage-controls :is(button,a):focus-visible,#dialog summary:focus-visible{outline:3px solid #ffca84;outline-offset:3px}
.garage-submenu{z-index:45;padding:22px;overflow:auto;overscroll-behavior:contain}
.garage-submenu>div{width:min(640px,100%);max-width:640px;max-height:calc(100dvh - 44px);overflow:auto;padding:6px}
.garage-submenu h2{font-size:40px;margin:8px 0 20px}
.garage-submenu .garage-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.garage-submenu .assist-toggle,.garage-submenu .secondary{position:static;width:100%;margin:0!important;min-height:48px;padding:10px;font-size:11px;letter-spacing:.04em;line-height:1.35;border:1px solid #8b9aa778;border-radius:5px;background:#182735}
.garage-submenu .assist-toggle b{margin-left:4px}
.garage-submenu .start{margin-top:16px;min-height:48px;max-width:none;justify-content:center}
#garage-controls .intro-tip{display:block;max-width:none;font-size:14px;line-height:1.5;margin:12px 0;color:#d6e0e5}
.garage-control-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}
.garage-control-notes p{margin:0;font-size:12px;line-height:1.55}
.garage-control-notes strong{color:#ffe0c7}
#dialog .pause-instructions{grid-column:1/-1;margin:10px 0 0;color:#cbd8df;font-size:12px;line-height:1.45}
#dialog .pause-instructions summary{cursor:pointer;min-height:44px;padding:13px 7px;border-top:1px solid #73839160;list-style-position:inside;color:#ecddd0}
#dialog .pause-instructions #dialog-text{margin:8px 5px 10px;font-size:13px;line-height:1.5}
#dialog .pause-instructions:not([open]) #dialog-text{display:none}
#dialog>div{max-width:570px}
#dialog h2{font-size:44px;margin:9px 0 15px}
#dialog .secondary{min-height:44px;margin-top:8px;padding:12px;letter-spacing:.04em}
@media(max-height:600px) and (orientation:landscape){
 #menu.menu{padding-top:66px;padding-bottom:max(14px,env(safe-area-inset-bottom));align-items:center}
 #menu .menu-content{margin-left:0;width:min(820px,100%)}
 #menu .edition{font-size:9px;margin-bottom:5px}
 #menu h1.game-title{font-size:36px;margin:0;line-height:1}
 #menu .title-route{display:inline-block;font-size:10px;margin-top:6px;letter-spacing:.08em}
 #menu .title-credit{font-size:10px;margin-left:8px}
 #menu .title-credit strong{font-size:inherit}
 #menu .garage-grid{margin-top:12px;gap:20px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
 #menu .garage-heading{font-size:9px;margin-bottom:6px}
 #menu .vehicle-picker{gap:6px}
 #menu .vehicle-picker button{min-height:44px;padding:7px;font-size:10px}
 #menu .vehicle-picker small{font-size:8px;margin-top:3px}
 #menu .car-label{display:flex;margin-top:8px}
 #menu .car-label>span{font-size:10px}
 #menu .car-label strong,#menu .car-label small{display:none}
 #menu .paint{margin-top:7px;gap:5px}
 #menu .garage-actions{gap:6px}
 #menu .start,#menu #menu-radio-cue,#menu .garage-shortcuts button{min-height:44px;margin:0}
 #menu .start{font-size:13px;padding:9px 12px}
 #menu #menu-radio-cue{font-size:11px;padding:8px}
 #menu .garage-shortcuts button{font-size:9px}
 #menu .album-drop{min-height:38px;padding:1px 6px}
 #menu .album-drop img{width:30px;height:30px}
 #menu .album-drop span,#menu .album-drop strong{font-size:10px}
 #menu .album-drop b{font-size:8px}
 #menu .garage-help{margin-top:10px;font-size:10px}
 .garage-submenu{padding:12px 20px}
 .garage-submenu>div{max-height:calc(100dvh - 24px)}
 .garage-submenu h2{font-size:28px;margin:5px 0 12px}
 .garage-submenu .edition{font-size:10px}
 .garage-submenu .garage-option-grid{gap:7px}
 .garage-submenu .assist-toggle,.garage-submenu .secondary{min-height:44px;padding:8px;font-size:10px}
 .garage-submenu .start{min-height:44px;margin-top:10px;padding:9px}
 #dialog>div{max-width:650px;gap:7px}
 #dialog h2{font-size:30px;margin:2px 0 5px}
 #dialog .pause-instructions{margin:0}
 #dialog .pause-instructions #dialog-text{font-size:12px;line-height:1.4}
}
@media(max-width:620px) and (orientation:portrait){
 #menu.menu{padding-top:76px;align-items:flex-start}
 #menu .menu-content{margin-left:0}
 #menu h1.game-title{font-size:42px}
 #menu .garage-grid{grid-template-columns:1fr;gap:17px;margin-top:18px}
 #menu .vehicle-picker button{min-height:50px}
 #menu .car-label strong,#menu .car-label small{display:none}
 .garage-submenu .garage-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .garage-control-notes{grid-template-columns:1fr}
}
@media(min-width:1900px){#menu .menu-content{width:1020px;max-width:1020px;margin-left:4vw}#menu h1.game-title{font-size:94px}#menu .vehicle-picker button{min-height:76px;font-size:16px}#menu .vehicle-picker small{font-size:12px}#menu .garage-actions>button{min-height:68px;font-size:18px}#menu .garage-shortcuts button{min-height:62px;font-size:13px}#menu .garage-help{font-size:14px}}

/* The garage is a launcher, so its primary action and full vehicle list must
   fit before decorative scale. Short screens keep the same content in a
   denser, independently scrollable panel. */
@media(max-width:980px), (max-height:720px){
 #menu.menu{padding:58px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));align-items:flex-start}
 #menu .menu-content{width:min(760px,100%);max-width:760px;margin:0 auto}
 #menu .edition{margin-bottom:4px;font-size:8px}
 #menu h1.game-title{font-size:clamp(30px,6.2vw,48px)}
 #menu .title-route{margin-top:4px;font-size:9px}
 #menu .title-credit{font-size:9px}
 #menu .garage-grid{margin-top:10px;gap:14px}
 #menu .garage-heading{margin-bottom:5px;font-size:8px}
 #menu .vehicle-picker{gap:5px}
 #menu .vehicle-picker button{min-height:42px;padding:6px;font-size:9px}
 #menu .vehicle-picker small{margin-top:2px;font-size:7px}
 #menu .car-label{margin-top:6px}
 #menu .car-label>span{font-size:9px}
 #menu .car-label strong,#menu .car-label small{display:none}
 #menu .garage-actions{gap:5px}
 #menu .start{min-height:46px;padding:8px 11px;font-size:12px}
 #menu #menu-radio-cue{min-height:42px;padding:7px;font-size:10px}
 #menu .garage-shortcuts{gap:4px}
 #menu .garage-shortcuts button{min-height:42px;padding:5px 2px;font-size:8px}
 #menu .progress-card{padding:9px}
 #menu .album-drop{min-height:38px;padding:1px 5px}
 #menu .album-drop img{width:30px;height:30px}
 #menu .garage-help{margin-top:7px;font-size:9px}
}
@media(max-width:620px) and (orientation:portrait){
 #menu.menu{padding-top:52px}
 #menu .garage-grid{grid-template-columns:1fr;gap:10px}
 #menu .vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
 #menu .garage-actions{padding-bottom:8px}
 #menu .album-drop,#menu .garage-help{display:none}
}