*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas-wrapper {
  /*
   * Maintain the 1200:800 (3:2) aspect ratio while filling the viewport.
   * CSS `aspect-ratio` + width/height constraints handles most cases cleanly.
   */
  width: min(100vw, 150vh);   /* 150vh keeps 3:2 ratio (800/1200 * 100vw) */
  aspect-ratio: 1200 / 800;
  position: relative;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Logical pixel grid is always 1200x800; the browser scales the bitmap. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* Prevent browser from intercepting touches for scroll/zoom on mobile */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}