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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

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

#gameCanvas {
  background: #000;
  /* Prevents touch gestures (scroll/zoom) from interfering with gameplay controls */
  touch-action: none;
  display: block;
}

/* Invisible but real/focusable text input that game.js focuses while
   gameState is 'ENTER_NAME' - this is what makes the name typeable on
   mobile (focusing it pops the OS's own keyboard) as well as desktop.
   The canvas draws the name itself; this element is never seen.
   Deliberately kept INSIDE the visible viewport (not off-screen at a
   negative position) at a real, non-zero size - many mobile browsers
   (confirmed on a Cubot King Kong; likely others) silently refuse to
   raise the on-screen keyboard for a focused input positioned off-screen,
   as an anti-abuse heuristic, which made name entry a dead tap on those
   devices even though the input itself focused fine. */
#nameInput {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 40px;
  opacity: 0;
  border: none;
  pointer-events: none;
}

/* Shown (via game.js, toggling the [hidden] attribute) on touch devices
   held in portrait - this is a landscape-oriented shooter, and letting the
   canvas just letterbox down to a thin strip in portrait is unplayable. */
#rotateOverlay {
  position: fixed;
  inset: 0;
  background: #05080c;
  color: #00e5ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  font-family: 'Orbitron', monospace;
  z-index: 10;
  padding: 24px;
}

/* #rotateOverlay's own `display: flex` above (an ID rule) otherwise beats
   the browser's default `[hidden] { display: none }` UA rule, since author
   styles always win over UA defaults regardless of specificity - meaning
   the overlay would stay visible even while JS sets the [hidden] attribute.
   This rule needs to win instead. */
#rotateOverlay[hidden] {
  display: none;
}

#rotateIcon {
  font-size: 64px;
  animation: rotate-hint 1.6s ease-in-out infinite;
}

#rotateText {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}