(Crash, Convoy, Raider, Fuel). Adding `class="wlps-locked"` to drops every game into the same fixed-stage geometry without touching any local layout beyond the existing chrome. Strategy: body becomes 100vh, no scroll; .wrap is centered + capped at a reasonable max width (640px portrait / 1100px landscape via media query); overflow inside .wrap is hidden so absolute-positioned game art can't spill past the canvas edge. Sub-header (per-game

) sits above the stage; the playable area below adapts within the .wrap box. ============================================================================ */ body.wlps-locked { /* Lock the document to the viewport so no scroll, no pinch, no rubber-band. */ height: 100vh; height: 100dvh; overflow: hidden; /* Backdrop layer behind the canvas. We use an existing tex texture so we don't need a fresh asset — pit games already feel post-industrial. */ background: radial-gradient(ellipse at 50% 0%, rgba(207,220,26,.06), transparent 60%), radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(0,0,0,.7) 100%), url('../ui/tex_concrete_wall.webp') center/680px repeat, #0a0805 !important; /* Prevent any pinch-zoom / pull-to-refresh inside a pit game. */ touch-action: pan-y; } body.wlps-locked .wrap { /* The canvas. Centered, capped, never grows past the viewport. */ position: relative; width: 100vw; max-width: 720px; height: calc(100vh - 64px); /* leave room for the shared topbar */ height: calc(100dvh - 64px); max-height: 1200px; margin: 64px auto 0; /* top margin = topbar height */ overflow: hidden; display: flex; flex-direction: column; background: rgba(0,0,0,0.55); box-shadow: 0 0 0 1px rgba(200,85,26,0.4), 0 24px 60px rgba(0,0,0,0.55); } /* v5.30: per-Rob, the per-game sub-header is GONE. Players use the back arrow / WASTELORDS logo in the shared topbar to return to The Pit. The header element stays in the DOM so #walletDisplay etc. can still be addressed by legacy game code; we just hide it visually. */ body.wlps-locked .wrap > header { display: none !important; } /* All children of .wrap absorb the available height. */ body.wlps-locked .wrap > :not(header) { flex: 1 1 auto; min-height: 0; } /* Landscape / tablet — let the canvas widen up to 1100px. */ @media (min-width: 900px) and (orientation: landscape) { body.wlps-locked .wrap { max-width: 1100px; max-height: 720px; } } /* Mobile clearance — the shared topbar is 54px on narrow viewports. */ @media (max-width: 768px) { body.wlps-locked .wrap { height: calc(100vh - 54px); height: calc(100dvh - 54px); margin-top: 54px; } }