/* One final responsive layout, with scrollable menus and stable touch targets. */
#menu,#pauseScreen,#end{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;scroll-padding:80px 20px 32px;-webkit-overflow-scrolling:touch}
#menu{padding:84px max(6vw,24px) max(28px,env(safe-area-inset-bottom));}
#menu .panel{display:block;width:min(410px,100%);margin:0;flex:none;}
#menu .title{margin:12px 0 18px;transform:none;}
#menu .title .name{font-size:28px;line-height:1;}
#menu .title .bike-word{font-size:84px;line-height:.86;margin-top:5px;}
#menu .mode{min-height:60px;padding:10px 12px;}
#menu .mode strong{font-size:14px;margin-bottom:3px;}
#menu .mode span{font-size:13px;}
#menu .control-mode{display:flex;gap:8px;margin:8px 0 0;}
#menu .control-mode button,#pauseScreen .control-mode button{min-height:44px;min-width:100px;font-size:13px;padding:8px 14px;}
#menu .control-mode-note{font:13px/1.4 Arial,sans-serif;margin:6px 0 12px;}
#menu .garage{margin:12px 0;}
#menu .garage-heading{font-size:12px;margin-bottom:7px;letter-spacing:.07em;}
#menu .bike-choice{min-height:62px;padding:5px 2px;}
#menu .bike-choice svg{height:32px;}
#menu .bike-choice b{font:700 11px Arial,sans-serif;letter-spacing:0;}
#menu .bike-description{font:13px/1.4 Arial,sans-serif;margin:7px 0 12px;}
#menu #start{min-height:50px;}
#menu .underrow{display:none;}
#menu .menu-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:0;border:0;margin-top:12px;}
#menu .menu-tools button{min-height:44px;text-align:center;padding:8px 5px;font:700 12px/1.3 Arial,sans-serif;letter-spacing:0;}
#menu .menu-settings{margin-top:8px;}
#menu .menu-settings summary{min-height:44px;font-size:13px;}
#menu .menu-settings>div{gap:8px;}
#menu .menu-settings .link{min-height:44px;font-size:13px;padding:8px;}
#menu .gamepad-status{font-size:12px;line-height:1.5;margin:10px 0;}
.topbar{top:max(14px,env(safe-area-inset-top));}
.top-action{min-height:44px;font:700 12px Arial,sans-serif;letter-spacing:0;}
.fullscreen{font-size:24px;}
.pause{width:44px;height:44px;font-size:18px;}
#pauseScreen{padding:72px 22px max(28px,env(safe-area-inset-bottom));backdrop-filter:none;background:#111d31ee;}
#pauseScreen .panel{display:block;width:min(450px,100%);margin:0 auto;}
#pauseScreen .endtitle{font-size:38px;line-height:1.1;margin:12px 0 22px;}
#pauseScreen #resume{min-height:50px;}
.pause-actions{display:flex;justify-content:center;gap:18px;margin:10px 0;}
#pauseScreen .pause-actions .link{min-height:44px;font-size:13px;padding:10px;}
#pauseScreen .control-mode{display:flex;justify-content:center;gap:8px;margin:12px 0;}
.pause-help{border-top:1px solid #526173;border-bottom:1px solid #526173;text-align:left;margin:14px 0;}
.pause-help summary{min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:700;cursor:pointer;color:var(--teal);}
.pause-help summary::after{content:' +';margin-left:auto;font-size:20px;}
.pause-help[open] summary::after{content:' −';}
#pauseControls{margin:10px 0;border-radius:4px;}
#pauseControls .input-pair{font-size:14px;min-height:40px;}
.stance-guide{font-size:13px;line-height:1.6;}
.mouse-feel{flex-wrap:wrap;min-height:44px;font-size:13px;}
.mouse-feel input{min-height:44px;}
#game.paused .thumb-controls,#game.paused .device-help,#game.paused .toast,#game.replaying .thumb-controls{display:none!important;}
#game.paused .line-display,#game.replaying .line-display{visibility:hidden;}
.utility-close{min-width:44px;min-height:44px;}
.utility-card .link{min-height:44px;font-size:13px;padding:10px 8px;}
.utility-screen{overscroll-behavior:contain;}
.utility-card{backdrop-filter:none;}
.device-help{width:276px;padding:12px;text-align:left;backdrop-filter:none;}
.device-help .controls-heading{font:700 12px Arial,sans-serif;margin-bottom:8px;}
.device-help .control-sheet{gap:5px 10px;}
.device-help .input-pair{font-size:13px;min-height:32px;}
.device-help .control-glyph{width:28px;height:28px;}
.device-help .control-tip{font-size:12px;line-height:1.5;margin-top:8px;}
.rotate-hint{max-width:calc(100vw - 24px);white-space:normal;font:12px/1.4 Arial,sans-serif;bottom:max(10px,env(safe-area-inset-bottom));padding:6px 10px;}
.rotate-hint button{min-width:44px;min-height:44px;}
#menu .rotate-hint{position:static;z-index:auto;left:auto;bottom:auto;transform:none;width:100%;max-width:100%;margin-top:12px;}
.thumb-pad,.grind-pad,.top-action,.replay-console{backdrop-filter:none;}
.pad-caption{font:700 12px/1.3 Arial,sans-serif;letter-spacing:.02em;top:-24px;}
.pad-north,.pad-south{font-size:11px;letter-spacing:0;}
.pump-control{top:-80px;}
.grind-pad,.fire-pad{font-size:12px!important;}
.easy-controls #pumpControl{display:none;}
.replay-console button,.replay-console select,.replay-header button{min-height:44px!important;min-width:44px;font-size:13px;}
.replay-edit summary{min-height:44px;display:flex;align-items:center;padding:8px 0;font-size:13px;}
.replay-edit summary::after{content:' +';margin-left:auto;font-size:18px;}
.replay-edit[open] summary::after{content:' −';}
.replay-edit[open]{max-height:none;overflow:visible;}
.replay-loop{min-height:44px;padding:0 5px;}
.replay-console input[type=range]{min-height:44px;touch-action:pan-x;}
.replay-console{max-height:calc(100% - 90px);overflow-y:auto;overscroll-behavior:contain;}
#replayMarks{position:relative;top:auto;left:auto;right:auto;height:auto;display:flex;gap:6px;overflow-x:auto;pointer-events:auto;touch-action:pan-x;margin-bottom:4px;}
#replayMarks:empty{display:none;}
#replayMarks .shot-mark{position:static;transform:none;flex:none;width:auto;min-width:64px;min-height:44px;padding:6px 8px;border:1px solid #526173;border-radius:4px;background:#19324b;font-size:12px;}
.replay-header{z-index:2;}
@media(max-width:700px){
 #menu{padding:80px 20px max(72px,env(safe-area-inset-bottom));}
 #menu .panel{width:min(410px,100%);}
 #menu .title .name{font-size:clamp(24px,7vw,28px);}
 #menu .title .bike-word{font-size:76px;}
 .topbar{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));}
 .brand-copy{display:none;}.brand{gap:0;}.brand-icon{font-size:21px;}
 .top-actions{gap:5px;}.top-action{padding:0 10px;}
 #netStatus{display:none;}.fullscreen{width:44px;padding:0;}
 .hudtop{top:76px;left:14px;gap:13px;padding:5px 8px;}
 .metric label{font-size:11px;letter-spacing:.02em;}.metric strong{font-size:26px;}.metric small{font-size:10px;}
 .objective{left:14px;right:auto;top:141px;font-size:11px;letter-spacing:0;max-width:calc(100vw - 28px);}
 .health{top:177px;left:14px;}.pause{top:76px;right:14px;}
 .thumb-controls{--pad-size:132px;bottom:max(24px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));}
 #game[data-input=touch] .line-display{bottom:calc(264px + env(safe-area-inset-bottom));left:50%;width:min(290px,calc(100vw - 36px));max-width:none;min-width:0;}
 #game[data-input=touch] .line-result b{font-size:27px;}
 .thumb-controls .pad-caption{font-size:11px;}
 #pauseScreen{padding-top:72px;}
 .replay-console{left:10px;right:10px;}.replay-camera-row{gap:8px;}.replay-camera-row input{width:60px;}
}
@media(orientation:landscape) and (max-height:540px){
 #menu{padding:66px max(24px,env(safe-area-inset-left)) max(26px,env(safe-area-inset-bottom));align-items:flex-start;}
 #menu .panel{width:min(760px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;margin:auto;}
 #menu .eyebrow{grid-column:1;grid-row:1;font-size:11px;}
 #menu .title{grid-column:1;grid-row:2;margin:8px 0 14px;}
 #menu .title .name{font-size:25px;}.title .bike-word,#menu .title .bike-word{font-size:65px;}
 #menu .garage{grid-column:1;grid-row:3/7;margin:0;}
 #menu .bike-description{font-size:12px;}
 #menu .mode-row{grid-column:2;grid-row:1/3;align-self:start;margin:0 0 8px;}
 #menu .mode{min-height:60px;padding:8px;}
 #menu .mode span{font-size:12px;}
 #menu .control-mode{grid-column:2;grid-row:3;margin:0;}
 #menu #controlModeNote{grid-column:2;grid-row:4;margin:5px 0 10px;font-size:12px;}
 #menu #start{grid-column:2;grid-row:5;min-height:46px;}
 #menu .menu-tools{grid-column:2;grid-row:6;margin:10px 0 0;}
 #menu .menu-tools button{font-size:11px;min-height:44px;}
 #menu .gamepad-status{grid-column:1;grid-row:7;margin:9px 0 0;}
 #menu .menu-settings{grid-column:2;grid-row:7;margin:6px 0 0;}
 #menu .connectbox{grid-column:1/3;grid-row:8;margin-top:12px;}
 .topbar{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));}
 .top-action{min-height:44px;}.brand-copy small{display:none;}
 .hudtop{top:61px;left:max(18px,env(safe-area-inset-left));gap:13px;padding:4px 8px;}
 .metric strong{font-size:24px;}.metric label{font-size:11px;letter-spacing:.02em;}
 .objective{top:122px;left:max(18px,env(safe-area-inset-left));font-size:11px;padding:4px 6px;letter-spacing:0;}
 .health{top:153px;left:max(18px,env(safe-area-inset-left));}
 .wave{display:none;}.pause{top:61px;right:max(18px,env(safe-area-inset-right));width:44px;height:44px;}
 .thumb-controls{--pad-size:122px;bottom:max(18px,env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));}
 #game[data-input=touch] .line-display{bottom:max(20px,env(safe-area-inset-bottom));left:46%;width:clamp(140px,24vw,230px);max-width:230px;min-width:0;}
 #game[data-input=touch] .line-display>strong{font-size:11px;line-height:1.3;padding:6px;}
 #game[data-input=touch] .line-result small{font-size:11px;line-height:1.3;}
 #game[data-input=touch] .line-result b{font-size:26px;}
 .thumb-controls .fire-pad,.thumb-controls .grind-pad{left:-66px;width:52px;height:52px;}
 .thumb-controls .grind-pad{top:4px;bottom:auto;}.thumb-controls .fire-pad{bottom:8px;}
 .toast{top:46%;max-width:46vw;font-size:12px;}
 .device-help{width:250px;padding:8px 10px;bottom:12px;}.device-help .control-tip{display:none;}
 #pauseScreen{padding:64px 20px 24px;}#pauseScreen .panel{width:min(440px,100%);}
 #pauseScreen .endtitle{font-size:30px;margin:8px 0 14px;}
 #pauseScreen .eyebrow{font-size:11px;}
 .replay-console{bottom:max(8px,env(safe-area-inset-bottom));padding:6px 12px;}
 .replay-camera-row{gap:14px;}.replay-timeline-wrap{margin-top:5px;}
}
@media(orientation:landscape) and (max-width:740px){
 #menu .panel{column-gap:16px;}#menu .title .name{font-size:21px;}
 #menu .menu-tools{grid-template-columns:1fr 1fr;}#menu .menu-tools #onlineToggle{grid-column:1/3;}
 #game[data-input=touch] .line-display{bottom:175px;left:50%;width:220px;}
 .objective{max-width:50vw;}
}
@media(prefers-reduced-motion:reduce){.screen,.toast,.primary{transition:none!important;}}

.graphics-label{font:700 11px Arial,sans-serif;letter-spacing:.1em;color:var(--sub);margin-top:12px}.graphics-mode button{min-width:0!important;min-height:44px;flex:1}.graphics-mode{margin-bottom:12px!important}

#topbar:not(.playing) #rideReset{display:none}#rideReset{min-width:44px;min-height:44px}.pause-actions{flex-wrap:wrap}

@media(max-width:600px){.topbar.playing #rideReset{width:44px;padding:0;font-size:0}.topbar.playing #rideReset::before{content:"↺";font-size:24px}}

#game[data-input=touch] .keyboard-shortcut,#game[data-input=gamepad] .keyboard-shortcut{display:none}

@media(orientation:landscape) and (max-height:540px){
 #menu .spawn-picker{grid-column:2;grid-row:5}
 #menu #start{grid-row:6}
 #menu .underrow{grid-column:2;grid-row:7}
 #menu .menu-tools{grid-row:8}
 #menu .gamepad-status{grid-column:1;grid-row:9}
 #menu .menu-settings{grid-column:2;grid-row:9}
 #menu .connectbox{grid-row:10}
 #menu .garage{grid-row:3/9}
}

#topbar:not(.playing) #summitTeleport{display:none}
@media(orientation:landscape) and (max-height:540px){
 #menu{padding-top:58px;scroll-padding-top:58px}
 #menu .title{margin:5px 0 9px}
 #menu .title .name{font-size:20px}
 #menu .title .bike-word{font-size:48px}
 #menu #controlModeNote{font-size:11px;line-height:1.25;margin:4px 0 7px}
 #menu .spawn-picker{margin:2px 0 6px}
 #menu .spawn-picker button{min-height:40px;padding:7px}
 #menu #start{min-height:44px}
 #menu .panel{padding-bottom:24px}
}

/* Riding prompts are a compact action card, not a second pause menu. */
#rideControls{width:320px;padding:12px 14px;border:1px solid #a5c9cb45;border-left:3px solid var(--teal);border-radius:8px;background:#101f30ed;box-shadow:0 4px 16px #0003;}
#rideControls .controls-heading{font:800 12px/1.2 Arial,sans-serif;letter-spacing:.12em;color:var(--teal);margin-bottom:8px;}
#rideControls .control-sheet{gap:5px 12px;}
#rideControls .input-pair{min-height:32px;font:600 14px/1.25 Arial,sans-serif;gap:7px;}
#rideControls .control-glyph{width:27px;height:27px;flex:none;}
#rideControls .control-glyph.wide{width:35px;}
#rideControls .control-tip{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-top:7px;margin-top:7px;font:12px Arial,sans-serif;color:#b9ceda;}
#rideControls .control-tip .control-glyph{height:21px;width:28px;}
@media(max-width:1000px){
 #rideControls{width:262px;right:16px;bottom:14px;padding:10px;}
 #rideControls .input-pair{font-size:12px;}
 #game[data-input="keyboard"] .line-display,#game[data-input="gamepad"] .line-display{left:42%;max-width:27vw;}
}
@media(orientation:landscape) and (max-height:540px){
 #rideControls{width:244px;padding:8px 10px;bottom:10px;right:12px;}
 #rideControls .input-pair{min-height:26px;font-size:12px;}
 #rideControls .control-glyph{height:23px;width:23px;}
 #rideControls .controls-heading{margin-bottom:4px;font-size:12px;}
 #rideControls .control-tip{padding-top:4px;margin-top:4px;}
}
/* Grind remains discoverable regardless of the context card's current phase. */
.ride-grind{position:absolute;right:max(28px,env(safe-area-inset-right));top:202px;display:flex;align-items:center;gap:10px;min-height:54px;padding:9px 14px;border:2px solid var(--gold);border-radius:8px;background:#202630ed;color:var(--gold);pointer-events:auto;text-align:left;}
.ride-grind b{display:block;font:800 14px/1.2 Arial,sans-serif;letter-spacing:.08em;}
.ride-grind small{display:block;margin-top:3px;font:10px/1.2 Arial,sans-serif;letter-spacing:.04em;}
.ride-grind.armed{background:#66531fed;color:#fff1bd;}
.ride-grind.on-rail{border-color:var(--teal);color:var(--teal);}
#game[data-input=touch] .ride-grind{display:none;}
#touchGrind{white-space:pre-line;line-height:1.25;border-width:2px;z-index:3;}
@media(max-width:700px){.ride-grind{right:14px;top:135px;min-height:48px;padding:7px 10px;}}
@media(orientation:landscape) and (max-height:540px){.ride-grind{right:14px;top:138px;min-height:46px;padding:6px 10px;}}