/* safe-area insets (iPhone notch / home indicator), read by the game
   so canvas-drawn HUD elements stay clear of them */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0f3a66;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* dynamic viewport units: full screen even when iOS reports a
     shorter layout viewport in standalone / with collapsed bars */
  width: 100dvw;
  height: 100dvh;
  background: #0f3a66;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#wrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
}

/* the canvas buffer matches the world (whose aspect matches the
   viewport), and CSS stretches it edge-to-edge: no letterbox strips */
#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0f3a66;
  cursor: crosshair;
}