/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Prevent double-tap zoom on iOS / Android Chrome without disabling scroll */
  touch-action: manipulation;
}

/* ── Root ────────────────────────────────────────────────────────────────── */
html, body {
  /* Use % not vw — 100vw includes the scrollbar width on some desktop browsers,
     causing a horizontal overflow on mobile. */
  width: 100%;
  height: 100%;
  /* Prevent pull-to-refresh and overscroll bounce */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: #0a0a0a;
  /* Block text selection so tap gestures don't highlight text */
  user-select: none;
  -webkit-user-select: none;
}

/* ── Game container ──────────────────────────────────────────────────────── */
#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respect iOS notch / home-bar safe areas */
  padding-top:    env(safe-area-inset-top);
  padding-right:  env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */
#game-container canvas {
  display: block;
  /* Crisp edges — matches Phaser's roundPixels: true */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* On touch devices, prevent the browser handling touch events on the canvas
     so Phaser's pointer system gets all events. */
  touch-action: none;
}

/* ── Mobile viewport fix ─────────────────────────────────────────────────── */
/* On iOS, 100vh includes the browser chrome height which causes overflow.
   Use dvh (dynamic viewport height) where supported, fall back to 100%. */
@supports (height: 100dvh) {
  html, body, #game-container {
    height: 100dvh;
  }
}