/* ================================================================
   Pixel Aces — Main Stylesheet
   Fullscreen 16:9 canvas with black letterbox bars
   ================================================================ */

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

/* Prevent scrolling and set black background for letterbox bars */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  /* Disable text selection so touch/drag doesn't highlight text */
  user-select: none;
  -webkit-user-select: none;
  /* Suppress tap highlight on mobile (iOS/Android) */
  -webkit-tap-highlight-color: transparent;
  /* Prevent overscroll bounce on mobile browsers */
  overscroll-behavior: none;
}

/* ---- Game canvas ---- */
/* The canvas is 960x540 native. CSS scales it to fill the viewport
   while preserving the 16:9 aspect ratio. object-fit: contain adds
   black letterbox bars on the shorter axis automatically. */
#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  /* Disable image smoothing so pixel art stays crisp */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Center the canvas in the viewport */
  position: absolute;
  top: 0;
  left: 0;
  /* Prevent touch callout on mobile */
  -webkit-touch-callout: none;
  touch-action: none;
}

/* ---- Loading overlay ---- */
/* Shown briefly while scripts load, hidden by engine.js on init */
#loadingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #8ec8f0;
  font-family: monospace;
  font-size: 24px;
  letter-spacing: 4px;
  z-index: 10;
}