/* /zone — endless wireframe racer (POC, phases 0+1).
   Full-viewport black canvas. The site's body::before scanlines + body::after
   vignette (from style.css) overlay the canvas at z-index 9998/9999, so the
   wireframe road gets the same CRT treatment as every other page without
   any per-page work. */

.zone-page {
  background: #000;
  /* Touch-driven game: kill browser default gestures (scroll, pinch, double-
     tap-to-zoom, callouts, selection) so the canvas owns every pointer. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  /* Expose the iOS notch / Dynamic Island inset to the canvas. The HUD is
     painted directly into the <canvas> rather than laid out in DOM, so we
     can't lean on padding: env(...) — instead zone.js reads this custom
     property in resize() and pushes top-anchored HUD rows down by it. The
     0px fallback covers browsers that don't implement env() at all (the
     value is also 0 on devices without a notch). Paired with the
     viewport-fit=cover meta in zone.html, which is what makes Safari
     report a non-zero inset in the first place. */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* The canvas fills the viewport behind the fixed top-bar. main is fixed so
   it doesn't push body height (which would create a scrollbar on top of the
   green CRT background). */
.zone {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.zone__canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  touch-action: none;
}

/* In fullscreen the page chrome (top-bar with // ZONE // and × exit) just
   clutters the racer — pull it out of the layout so the canvas owns the
   entire viewport. The fullscreen request targets <html>, so :fullscreen
   matches the documentElement and the descendant selector hides the
   header. Legacy WebKit (Safari 13-, older iPad) needs the prefixed
   variant; rules kept separate because a selector list is dropped
   wholesale if any selector is unrecognised. */
:fullscreen .top-bar          { display: none; }
:-webkit-full-screen .top-bar { display: none; }

/* iPhone Safari refuses the Fullscreen API on non-<video> elements, so the
   standard escape hatch there is Add-to-Home-Screen: launching from the
   resulting icon puts the page in a standalone web-app shell. The
   display-mode: standalone media query is how that shell announces
   itself (supported by iOS Safari and the standard PWA spec), so we
   mirror the :fullscreen rule and drop the chrome the same way. The
   exit link goes with it — the only way out becomes iOS's home gesture
   / app switcher, which matches what users expect from a Home-Screen
   app and is the same trade desktop fullscreen makes. The .ios-standalone
   sibling rule is a fallback for iOS shells where (display-mode:
   standalone) fails to match even though the page is in fact running as
   the Home-Screen web-app — zone.js sets that class from the legacy
   navigator.standalone flag, which keeps working there. */
@media (display-mode: standalone) {
  .zone-page .top-bar { display: none; }
}
html.ios-standalone .zone-page .top-bar { display: none; }
