/* ============================================================
 * style.css — Canvas centering, background, mobile layout
 * Pixel Plumber scaffold (pp-01)
 * ============================================================ */

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

/* --- Page background ------------------------------------- */
html, body {
  width: 100%;
  height: 100%;
  background: #0a0a1a;       /* very dark blue-black */
  overflow: hidden;           /* no scrollbars */
  font-family: monospace;
  user-select: none;          /* prevent text selection during play */
  -webkit-user-select: none;
}

/* --- Canvas centering ------------------------------------ */
#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Canvas ---------------------------------------------- */
#game-canvas {
  /* Native 960x540, displayed at 1:1 on desktop */
  width: 960px;
  height: 540px;
  image-rendering: pixelated;            /* Chrome/Edge */
  image-rendering: crisp-edges;          /* Firefox */
  -ms-interpolation-mode: nearest-neighbor; /* IE/Edge legacy */
  touch-action: none;                    /* prevent gestures on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* ===== Mobile responsive scaling ========================= */

/* Landscape phones: scale canvas to fill width while keeping 16:9 */
@media (max-width: 960px) {
  #game-canvas {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
  }
}

/* Portrait phones: letterbox, canvas at top */
@media (max-width: 600px) and (orientation: portrait) {
  #game-container {
    align-items: flex-start;
    padding-top: env(safe-area-inset-top, 0);
  }

  #game-canvas {
    width: 100vw;
    height: calc(100vw * 9 / 16);
    max-height: 100vh;
  }
}

/* Cap at native size on large screens */
@media (min-width: 961px) {
  #game-canvas {
    max-width: 960px;
    max-height: 540px;
  }
}