/* Remove the browser's default margins so the canvas
   sits flush against every edge of the screen. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;          /* no scrolling */
  background: #000;
}

/* Center the game horizontally. On phones the canvas is as wide as
   the window so this does nothing visible; on desktop the canvas is
   a phone-shaped column (see main.js) and this puts it in the middle. */
body {
  display: flex;
  justify-content: center;
}

canvas {
  display: block;            /* removes a small gap browsers add under canvases */
  /* (image-rendering: pixelated was removed: the canvas now renders
     at the screen's native resolution, so there's no blocky upscale
     to sharpen — the art should stay smooth and detailed.) */

  /* NOTE: a canvas has TWO sizes — its internal resolution
     (canvas.width, drawing surface) and its display size on screen.
     Both are set in main.js; the browser scales between them
     automatically. */
  touch-action: none;        /* tell the browser: taps are MINE, don't scroll/zoom */
  user-select: none;         /* no text-selection highlight when tapping fast */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; /* no grey flash on iOS taps */
}