/* ============================================================
   Pixel Garden Defense -- Main Stylesheet
   Handles fullscreen canvas display with 16:9 letterboxing,
   mobile touch prevention, and pixel-perfect rendering.
   ============================================================ */

/* --- Global Reset --- */
/* Remove default margins/padding, use border-box sizing everywhere */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Full-viewport body --- */
/* Black background fills any letterbox area around the canvas.
   Mobile-hardened: fixed positioning, safe-area support, gesture
   prevention, and scroll locking (added/improved in pg-29). */
html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;               /* no scrollbars */
  position: fixed;                /* prevent iOS Safari address-bar bounce */
  top: 0;
  left: 0;
  touch-action: none;             /* prevent browser gestures on touch */
  overscroll-behavior: none;      /* prevent pull-to-refresh on mobile */
  -webkit-touch-callout: none;    /* prevent iOS callout on long-press */
  -webkit-user-select: none;      /* prevent text selection on mobile */
  user-select: none;
  -webkit-tap-highlight-color: transparent;  /* remove iOS tap blue flash */
}

/* --- Game Canvas --- */
/* Positioned absolute and centered; Engine.js sets the actual pixel
   dimensions on load and resize to maintain the 16:9 aspect ratio.
   Touch-hardened: prevents all default gestures and text selection,
   accounts for safe areas on notched phones (pg-29). */
#gameCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Pixel-perfect rendering -- no blurring when CSS-scaled */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Prevent user interactions that interfere with gameplay */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;  /* no blue flash on iOS tap */
}

/* --- Mobile Landscape Hint (added in pg-29) --- */
/* When the screen is in portrait on a narrow device, show a subtle
   "rotate your device" message. The game is 16:9 landscape and
   very cramped in portrait orientation. */
#rotateHint {
  display: none;                  /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: #A5D6A7;
  font-family: monospace;
  font-size: 18px;
  text-align: center;
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Show the rotate hint only on narrow portrait screens (phones) */
@media screen and (orientation: portrait) and (max-width: 600px) {
  #rotateHint {
    display: flex;
  }
}

/* --- Safe Area Padding for Notched Phones (pg-29) --- */
/* On devices with notches (iPhone X+), the browser reports safe area
   insets. We use padding on the body so the canvas centering accounts
   for the usable viewport automatically. */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* --- Back-to-Menu Link --- */
/* Fixed button in the top-left corner to return to the launcher */
#backToMenu {
  position: fixed;
  top: 8px;
  left: 8px;
  color: #ccc;
  font-family: monospace;
  font-size: 14px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 100;
  transition: background 0.2s;
}

/* Lighten background on hover for visual feedback */
#backToMenu:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}