/* Touch-phone landscape only, gated by landscape-track.js. The localhost-only
   preview flag tests the same rules in a desktop browser without touch input. */
#race-board[data-skin=pixel].mobile-landscape{
 margin-left:calc(max(6px,env(safe-area-inset-left)) - 28px);
 margin-right:calc(max(6px,env(safe-area-inset-right)) - 28px);
 padding:4px 10px;scroll-margin-top:4px;
 --landscape-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
#race-board[data-skin=pixel].mobile-landscape .board-heading{flex-wrap:nowrap;min-height:24px;gap:8px;font-size:10px;line-height:12px}
#race-board[data-skin=pixel].mobile-landscape .track-style{font-size:10px}
#race-board[data-skin=pixel].mobile-landscape .track-style select{min-height:24px;height:24px;padding:2px 6px}
#race-board[data-skin=pixel].mobile-landscape .track-viewport{margin-top:4px}
#race-board[data-skin=pixel].mobile-landscape .pixel-scenery{height:clamp(16px,calc(var(--landscape-height) - 366px),64px)}
#race-board[data-skin=pixel].mobile-landscape .pixel-verge{height:12px;margin-bottom:0;border-bottom-width:0}
#race-board[data-skin=pixel].mobile-landscape .track-labels{display:none}
/* If chrome leaves little height, prioritize all lanes and preserve controls.
   The upper post/first-lane sprite need 24px of scenery for full visibility. */
@media(max-height:380px){
 #race-board[data-skin=pixel].mobile-landscape .pixel-scenery{height:24px}
 #race-board[data-skin=pixel].mobile-landscape .board-heading{min-height:24px}
 #race-board[data-skin=pixel].mobile-landscape .pixel-verge{height:6px}
 #race-board[data-skin=pixel].mobile-landscape{padding-block:0;scroll-margin-top:0}
 #race-board[data-skin=pixel].mobile-landscape .track-viewport{margin-top:0}
}
/* Only decoration may bleed outside the safe page. The functional board keeps
   the same safe-width containing block it had with Safari's automatic inset. */
@media(orientation:landscape) and (max-width:1100px) and (max-height:600px){
 @media(pointer:coarse){main{padding-left:calc(28px + env(safe-area-inset-left));padding-right:calc(28px + env(safe-area-inset-right))}}
}
html.landscape-edge main{padding-left:calc(28px + env(safe-area-inset-left));padding-right:calc(28px + env(safe-area-inset-right))}
html.landscape-edge #race-board.mobile-landscape{margin-left:-22px;margin-right:-22px;isolation:isolate}
.landscape-extension{display:none;position:absolute;pointer-events:none;overflow:hidden;z-index:-1;image-rendering:pixelated}
html.landscape-edge .landscape-extension{display:block}
.landscape-extension>div{position:absolute;left:0;width:100%;image-rendering:pixelated}
/* Remove only the old card rim across the decorative bleed; no race box changes. */
html.landscape-edge #race-board.mobile-landscape{outline:none}

/* The bleed box spans the layout viewport using the safe board's own width.
   Clipping is local: stale children cannot contribute horizontal scroll overflow.
   No 100vw, visualViewport.width, scroll offset or timer participates in sizing. */
.landscape-bleed{display:none;position:absolute;left:calc(-6px - env(safe-area-inset-left));width:calc(100% + 12px + env(safe-area-inset-left) + env(safe-area-inset-right));height:0;overflow:hidden;overflow:clip;pointer-events:none;z-index:-1;contain:paint}
html.landscape-edge .landscape-bleed{display:block}
/* Static cover opts out of browser auto-insetting. Keep page content clear of
   vertical device safe areas as well; no change where these values are zero. */
@media(pointer:coarse){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}
/* Full-width frame paint only: same bounds as the existing clipped artwork
   bleed, but behind it and spanning the unchanged board height. Header content
   and all functional containing blocks retain their existing safe coordinates. */
html.landscape-edge #race-board[data-skin=pixel].mobile-landscape::before{
 content:'';position:absolute;top:0;bottom:0;
 left:calc(-6px - env(safe-area-inset-left));
 width:calc(100% + 12px + env(safe-area-inset-left) + env(safe-area-inset-right));
 background:inherit;pointer-events:none;z-index:-2;
 /* Continue the existing 6px dark lower rim beyond the safe card edges. */
 box-shadow:0 6px 0 #14392e;
 overflow:clip;contain:paint;
}