/* Fill the window with black and centre the game canvas. */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The canvas keeps its 16:9 shape and scales to fit the window (see resize() in game.js). */
#game {
  display: block;
  background: #05080d;
  cursor: crosshair;
  image-rendering: auto;
  touch-action: none; /* stops the page scrolling on touch devices */
}

/* --- Phones / tablets --- */
html, body {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
/* "Rotate to landscape" suggestion for portrait phones */
#rotate {
  display: none;
  position: fixed; inset: 0;
  z-index: 10;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(3, 8, 14, 0.94);
  color: #e8f7ff; font: 18px monospace; text-align: center;
}
#rotate.show { display: flex; }
#rotate .rotate-icon { font-size: 64px; margin-bottom: 12px; }
#rotate button {
  margin-top: 24px; padding: 16px 32px;
  font: bold 18px monospace; color: #e8f7ff;
  background: #12324a; border: 2px solid #4fc3ff; border-radius: 10px;
  touch-action: manipulation;
}