*{box-sizing:border-box}
/* The entire document is the game viewport. Iframe bounds are respected. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:#000;min-height:0;display:flex;align-items:center;justify-content:center}
/* Largest uncropped 550:400 game that fits any desktop/landscape window. */
#screen{position:relative;flex:none;width:min(100vw,137.5vh);width:min(100vw,137.5dvh);height:auto;aspect-ratio:11/8;max-height:100vh;max-height:100dvh;overflow:hidden;background:#000;isolation:isolate}
#game{display:block;width:100%;height:100%;image-rendering:auto;touch-action:none;cursor:pointer}
/* Keep the original 550:400 picture ratio on phones, desktop, and inside iframes.
   Any unused viewport area is black letterboxing, never stretched. */
/* Prevent pull-to-refresh/text selection over the touch driving area. */
#screen,#touch{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#pause-layer{position:absolute;inset:0;width:100%;height:100%;z-index:9;color:#f7d344;background:#090a20d9;border:0;font:900 clamp(14px,3vw,25px) Arial,sans-serif;cursor:pointer}
#play-again{position:absolute;left:30%;top:67%;width:40%;height:9%;display:flex;align-items:center;justify-content:center;z-index:7;text-decoration:none;color:#fff;text-shadow:1px 1px 0 #292041;background:linear-gradient(#55557a,#242447);border:2px solid #a9a3dc;border-radius:8px;box-shadow:0 3px 0 #161326;font:900 clamp(10px,2vw,19px) Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
#play-again:hover,#play-again:focus-visible{background:linear-gradient(#7a77a6,#383262);outline:2px solid #fff}
/* Persistent, unobtrusive link on every original Flash screen. */
#more-games-small{position:absolute;top:1.5%;right:1.5%;z-index:8;display:block;padding:3px 6px;
 color:#fff;text-decoration:none;font:800 clamp(9px,1.1vw,13px) Arial,sans-serif;line-height:1.2;
 background:#202044a8;border:1px solid #ffffff82;border-radius:4px;text-shadow:0 1px 2px #000b}
#more-games-small:hover,#more-games-small:focus-visible{background:#454484ec;outline:1px solid white}

[hidden]{display:none!important}
#touch{position:absolute;left:0;right:0;bottom:0;padding:0 max(2%,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(2%,env(safe-area-inset-left));display:none;align-items:flex-end;justify-content:space-between;z-index:6;pointer-events:none}
#touch>.pedal-pad{display:flex;gap:clamp(5px,1.5vw,12px)}
#touch button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;width:clamp(52px,13vmin,82px);height:clamp(52px,13vmin,82px);border-radius:12px;border:2px solid #ffffff95;background:#111a42ab;color:white;font:bold clamp(18px,5vw,29px) Arial,sans-serif;box-shadow:0 2px 8px #0005}
#touch button:active,#touch button.pressed{background:#7065cddd;border-color:white}
/* One continuous steering pill, so touch can slide across the middle. */
#steer-pad{display:flex;flex:none;overflow:hidden;align-items:stretch;justify-content:stretch;
 width:clamp(92px,25vmin,134px);height:clamp(54px,14vmin,76px);border-radius:999px;
 border:2px solid #fff9;background:#687087e8;box-shadow:0 2px 8px #0006;
 pointer-events:auto;touch-action:none}
#steer-pad button{flex:1 1 50%;min-width:0;width:50%;height:100%;border:0;border-radius:0;
 background:transparent;box-shadow:none;font:900 clamp(18px,5vw,29px) Arial,sans-serif;color:#fff;
 touch-action:none;cursor:pointer}
#steer-pad button:active,#steer-pad button.pressed{background:#b5c1d855;border-color:transparent}
#steer-pad button:first-child{padding-left:6px}
#steer-pad button:last-child{padding-right:6px}

@media (hover:none),(pointer:coarse){#touch.in-play{display:flex}}
@media(max-width:600px){#play-again{border-width:1px;border-radius:5px}#more-games-small{padding:2px 4px;font-size:9px}}

/* iPhone Safari: a prolonged press should steer, never select glyphs or
   open the magnifying text loupe / touch callout. Scoped to gameplay. */
#screen,#game,#touch,#touch * {
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 user-select:none;
 -webkit-user-drag:none;
}
#touch,#touch *,#touch button { touch-action:none; }
#touch button { -webkit-appearance:none;appearance:none; }
/* Draw direction markers as CSS shapes, not selectable Unicode text. */
#touch .control-icon{display:block;width:0;height:0;margin:auto;pointer-events:none}
#touch [data-steer="left"] .control-icon{border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:18px solid currentColor}
#touch [data-steer="right"] .control-icon{border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid currentColor}
#touch [data-control="accelerate"] .control-icon{border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid currentColor}
#touch [data-control="brake"] .control-icon{border-left:11px solid transparent;border-right:11px solid transparent;border-top:18px solid currentColor}
