html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe6f5;
             overscroll-behavior: none; }
/* Height is dvh, not vh: on iOS Safari and Chrome Android 100vh is the LARGE
   viewport — it includes the space behind the browser toolbars — so the bottom
   strip of the game (ground, reset button, hint) rendered under browser chrome
   with no way to scroll to it. 100dvh tracks the actually-visible viewport.
   The vh line above it is the fallback for browsers without dvh; a browser
   that understands dvh overrides it.

   The safe-area insets keep the corners (home button, reset button) clear of
   the notch and home indicator that the page's viewport-fit=cover otherwise
   lets us draw under. They are subtracted from the size rather than set as
   right/bottom offsets because <canvas> is a REPLACED element: with all four
   insets set and width/height:auto it falls back to its intrinsic 300x150
   instead of filling the inset box.

   Nothing here needs a resize listener — tick() reads the element's CSS size
   every frame, so the engine re-lays itself out for free whenever any of this
   changes (rotation, toolbar show/hide, keyboard). */
#canvas {
  display: block; position: fixed; touch-action: none; cursor: default;
  top: env(safe-area-inset-top, 0px);
  left: env(safe-area-inset-left, 0px);
  width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}