/* The control lives in the game HUD, including when embedded in the Arcade. */
.hud-controls .rooftop-fullscreen-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 44px;
 padding: 8px 12px;
 border: 1px solid #ffe43099;
 border-radius: 9px;
 background: #1b2432;
 color: #ffe679;
 font: 700 12px/1.2 Arial, sans-serif;
 white-space: nowrap;
}
.hud-controls .rooftop-fullscreen-button::before {
 content: '';
 width: 12px;
 height: 10px;
 border: 2px solid currentColor;
 border-radius: 2px;
 flex: none;
}
.hud-controls .rooftop-fullscreen-button:hover { background: #303326; }
.hud-controls .rooftop-fullscreen-button:focus-visible { outline: 3px solid #ffe430; outline-offset: 2px; }
.hud-controls .rooftop-fullscreen-button[aria-pressed="true"] { background: #ffe430; color: #111824; }
.rooftop-fullscreen-placeholder { display: block; flex: none; pointer-events: none; }

/* Use the full available viewport, including Safari's changing toolbar height.
   The existing stage ResizeObserver updates the game's camera and pixel ratio. */
#game-surface.rooftop-fullscreen-active {
 position: fixed;
 inset: 0;
 z-index: 2147483646;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 width: 100%;
 height: 100vh;
 height: 100dvh;
 min-width: 0;
 min-height: 0;
 max-width: none;
 max-height: none;
 margin: 0;
 padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
 border: 0;
 border-radius: 0;
 overflow: hidden;
 background: #090c15;
 box-shadow: none;
}
#game-surface.rooftop-fullscreen-active::backdrop { background: #090c15; }
.rooftop-fullscreen-active > .game-hud,
.rooftop-fullscreen-active > .district-strip,
.rooftop-fullscreen-active > .game-controls,
.rooftop-fullscreen-active > .route-progress { flex: none; }
.rooftop-fullscreen-active #stage {
 flex: 1 1 0;
 width: 100%;
 height: auto;
 min-width: 0;
 min-height: 0;
 max-height: none;
 aspect-ratio: auto;
}
.rooftop-fullscreen-active #stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rooftop-fullscreen-active .game-overlay { min-height: 0; }
@media (max-height: 500px) and (orientation: landscape) {
 .rooftop-fullscreen-active > .game-hud { padding: 4px 12px; gap: 12px; flex-wrap: nowrap; }
 .rooftop-fullscreen-active > .district-strip { padding: 4px 12px; }
 .rooftop-fullscreen-active > .game-controls { min-height: 0; padding: 4px 12px; }
 .rooftop-fullscreen-active #jump { min-height: 44px; padding: 8px 20px; }
}
@media (max-width: 420px) {
 .hud-controls .rooftop-fullscreen-button { padding: 8px; gap: 5px; font-size: 11px; }
}