/*
 * styles.css — Shell styles.
 *
 * The goal: make the browser window a pure game surface.
 * The canvas handles all rendering; CSS only prevents the browser
 * from fighting with it (scroll, selection, rubber-band bounce).
 */

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

html,
body {
  width:      100%;
  height:     100%;
  overflow:   hidden;

  background: #000;          /* letter-box colour — matches CONFIG.COLOR_VOID */

  /*
   * touch-action: none blocks the browser's native pan / pinch-zoom
   * on the game surface.  Essential for correct touch input on Android.
   * The InputManager's touchmove preventDefault() provides a second layer.
   */
  touch-action:        none;
  -webkit-touch-callout: none;

  /* Block long-press text selection on mobile */
  user-select:          none;
  -webkit-user-select:  none;
}

canvas {
  display: block;  /* removes the inline-block gap below the element */

  /*
   * Pixel-perfect scaling hint for browsers that interpolate when the
   * CSS display size differs from the physical canvas pixel count.
   * Has no effect on vector rendering but helps if we ever blit sprite sheets.
   */
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  /* Canvas is always positioned top-left; transforms handle centering */
  position: absolute;
  top:  0;
  left: 0;
}