html, body { margin: 0; height: 100%; background: #111; overflow: hidden; }
body {
  /* phones: no scrolling, pinch / double-tap zoom, text selection or long-press menus over the game */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; width: 100vw; height: 100vh; height: 100dvh; object-fit: contain; image-rendering: pixelated; }

/* The game is landscape: on a phone held upright, ask to turn it. */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex; position: fixed; inset: 0; align-items: center; justify-content: center;
    padding: 32px; background: #1a0a2a; color: #ffd24a; text-align: center;
    font: bold 24px sans-serif;
  }
}