/* GP036: viewport-safe recovery and fixed pause actions, with no page scaling. */
:root{--gp36-view-width:100vw;--gp36-view-height:100vh;--gp36-view-x:0px;--gp36-view-y:0px}
@supports(height:100dvh){:root{--gp36-view-height:100dvh}}
.gp36-fullscreen,.gp36-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:9px 14px;border:1px solid #87adce;border-radius:5px;background:#153960;color:#f5f8ff;font:800 12px/1.2 Arial,sans-serif;letter-spacing:.35px;white-space:normal;touch-action:manipulation;pointer-events:auto;flex-shrink:0}
.gp36-fullscreen:hover,.gp36-back:hover{background:#23507a}
.gp36-fullscreen:focus-visible,.gp36-back:focus-visible,#pause #resume:focus-visible{outline:3px solid #f5d47c;outline-offset:2px}
.gp36-fullscreen[aria-pressed=true]{background:#133e3f;border-color:#9bbeb2}
.gp36-fullscreen.race-action-held{background:#f5d47c;color:#10223b}
.gp36-screen-status{font:12px/1.4 Arial,sans-serif;color:#c3d9ed;margin:6px 0 0;overflow-wrap:anywhere;letter-spacing:0}
/* Fixed containers follow the *visible* viewport, including mobile browser/IME UI.
   Pinch zoom is left to the browser (the controller does not undo it). */
#pause,#map-overlay,#result,#dc25-modal,#cb26-modal,#sv27-modal,.cb26-overlay,.sv27-confirm,#dc25-resume{
 position:fixed;inset:auto;top:var(--gp36-view-y);left:var(--gp36-view-x);width:var(--gp36-view-width);height:var(--gp36-view-height);max-height:var(--gp36-view-height);box-sizing:border-box
}
#pause{overflow:hidden;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#pause>.modal{display:flex;flex-direction:column;min-height:0;max-height:100%;width:min(850px,100%);margin:auto;padding:0;overflow:hidden;background:#102d52;border-radius:7px}
#gp36-pause-content{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:22px 26px;scroll-padding:12px;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
#gp36-pause-content>.modal-buttons{margin-top:16px}
#gp36-pause-content .settings>label>span{min-width:0}
#gp36-pause-content .settings select{max-width:54%;min-width:0}
.gp36-pause-bar{flex:0 0 auto;padding:10px 14px;background:#081c36;border-bottom:1px solid #6c94b8;z-index:2}
.gp36-bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.gp36-bar-row>b{font:800 11px/1.3 Arial,sans-serif;letter-spacing:.65px;min-width:0;color:#b9d7ee}
.gp36-bar-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:8px;flex-shrink:0}
#pause #resume{margin:0;min-width:140px;min-height:44px;padding:9px 14px;background:#c62839;border:1px solid #ed94a1;color:#fff;justify-content:center;font:800 12px/1.2 Arial,sans-serif;letter-spacing:.5px;border-radius:5px}
#pause .gp36-screen-status{margin-top:6px;font-size:12px}
/* Put a recovery/Back bar inside each active dialog: outside elements may be inert. */
.gp36-dialog-bar{position:sticky;top:0;z-index:8;padding:8px 14px;background:#091e39;border-block:1px solid #7497b8;flex:0 0 auto}
#dc25-modal,#cb26-modal,#sv27-modal{scroll-padding-top:104px;overflow-y:auto;overflow-x:hidden;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#dc25-modal>.dc25-panel,#cb26-modal>.cb26-panel,#sv27-modal>.cb26-panel{min-height:0;margin:0 auto}
#dc25-modal .dc25-heading,#cb26-modal .cb26-header,#sv27-modal .cb26-header{padding:18px 22px}
.gp36-simple-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.gp36-simple-bar>.gp36-screen-status{margin:0;max-width:500px}
.gp36-menu-screen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid #8ab2d33d;margin-bottom:12px}
.gp36-menu-screen>.gp36-screen-status{flex:1 1 150px;margin:0;font-size:11px}
#fullscreen-button.gp36-fullscreen{min-height:44px;padding:7px 10px;font-size:10px;letter-spacing:.4px}
#gp36-race-fullscreen{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;font:700 27px/1 Arial,sans-serif}
#hud .hud-right{gap:8px}
/* Custom/focus HUD bars leave both Pause and Screen targets accessible. */
body:is([data-screen-hud=focus],[data-screen-hud=detail]) #sv27-racebar{right:max(118px,calc(env(safe-area-inset-right) + 112px));max-width:calc(100% - 144px)}
#gp36-rotate-fullscreen{min-width:180px}
@media(max-width:620px){
 .gp36-bar-row{gap:8px;flex-wrap:wrap}
 .gp36-bar-actions{flex:1 0 auto;justify-content:flex-end}
 #pause .gp36-bar-row>b{flex-basis:100%}
 #pause .gp36-bar-actions{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr}
 #pause #resume{min-width:0}
 .gp36-pause-bar{padding:8px 10px}
 #gp36-pause-content{padding:18px 16px}
 #pause .gp36-screen-status{font-size:11px}
 .gp36-dialog-bar{padding:8px 10px}
 .gp36-dialog-bar .gp36-bar-row>b{font-size:10px}
 .gp36-fullscreen,.gp36-back{font-size:11px;padding:9px 11px}
 .gp36-simple-bar .gp36-screen-status{font-size:11px}
 #dc25-modal,#cb26-modal,#sv27-modal{scroll-padding-top:118px}
}
@media(orientation:landscape) and (max-height:480px){
 #pause .gp36-bar-row{flex-wrap:nowrap}
 #pause .gp36-bar-row>b{flex-basis:auto;font-size:10px}
 #pause .gp36-bar-actions{flex-basis:auto;display:flex}
 #pause #resume{min-width:136px}
 .gp36-pause-bar,.gp36-dialog-bar{padding:6px 10px}
 .gp36-pause-bar .gp36-screen-status,.gp36-dialog-bar .gp36-screen-status{font-size:11px;margin-top:4px;line-height:1.25}
 #gp36-pause-content{padding:14px 18px}
 .gp36-menu-screen{gap:8px;margin-bottom:8px;padding-bottom:6px}
 .gp36-menu-screen .gp36-screen-status{font-size:10px}
 .gp36-bar-row>b{font-size:10px}
 .gp36-fullscreen,.gp36-back{font-size:11px}
 #dc25-modal,#cb26-modal,#sv27-modal{scroll-padding-top:96px}
 body.touch #gp36-race-fullscreen{margin:0}
 body:is([data-screen-hud=focus],[data-screen-hud=detail]) #sv27-racebar{width:auto;gap:6px 12px}
}
@media(prefers-reduced-motion:reduce){#gp36-pause-content{scroll-behavior:auto}}
/* World-space annotations may retain their old pixel positions while paused.
   Keep them out of modal layout and prevent offscreen projections from widening
   the document after rotation. Gameplay labels inside the screen are unchanged. */
#rival-tags,#gate-labels,#route-guides,#procedural-head-bubbles{overflow:hidden}
body:not([data-state=play]) :is(#rival-tags,#gate-labels,#route-guides,#procedural-head-bubbles){display:none}