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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Respect notched-iPhone safe areas (notch/Dynamic Island + home indicator).
     The HUD lives in the top corners and the spawn bar at the bottom, so they
     can be occluded in landscape. Padding shrinks the available box; since the
     canvas is centered and Phaser uses Scale.FIT, the letterboxed 16:9 canvas
     scales down to fit within the safe region. max(0px, env(...)) is a no-op on
     non-notched/desktop browsers where env() resolves to 0. */
  padding-top: max(0px, env(safe-area-inset-top));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  padding-left: max(0px, env(safe-area-inset-left));
}

canvas {
  display: block;
  /* Pixel art must use nearest-neighbor upscaling to stay crisp on HiDPI/retina.
     Text already renders at devicePixelRatio resolution via TEXT_RESOLUTION. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
}

/* ---- Portrait rotate prompt (mobile only) ---- */
#rotate-overlay {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    background: #14110c;
    color: #ffdd44;
    text-align: center;
    font-family: monospace, sans-serif;
  }
  /* Hide the game canvas behind the prompt so touches don't reach it. */
  #game-container { visibility: hidden; }
}

.rotate-inner { padding: 24px; max-width: 80vw; }

.rotate-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 16px;
  animation: rotate-hint 2.2s ease-in-out infinite;
}

.rotate-inner p {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}

.rotate-inner span {
  font-size: 14px;
  color: #c9b884;
}

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

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .rotate-icon { animation: none; }
}

/* ---- Self-hosted game fonts (pixel-art typography) ---- */
/* Pixel Operator (CC0, by Jayvee Enaguas) renders crisp, unambiguous glyphs at
   small pixel sizes. It replaced Pixelify Sans, whose capital/lowercase "C" had
   a ~1px aperture that the baked black outline bridged shut so "C" read as "O"
   (e.g. "VICTORY" -> "VIOTORY"). Pixel Operator's "C" has a wide-open mouth that
   survives the outline+downsample bake, while keeping "K" distinct from "H" at
   small sizes (the constraint that drove the earlier Jersey -> Pixelify switch).
   The 700 weight is registered under its own family name so it can be selected
   by the canvas-baked bitmap fonts (whose font shorthand has no weight slot). */
@font-face {
  font-family: 'Pixel Operator';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('/fonts/pixeloperator-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Pixel Operator Bold';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('/fonts/pixeloperator-700.ttf') format('truetype');
}