/* ============================================
   Pixel Siege — Main Stylesheet
   Fullscreen game canvas with 16:9 letterbox
   ============================================ */

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

/* --- Full-viewport dark background, no scrolling --- */
html, body {
  width: 100%;
  height: 100%;
  background-color: #000;       /* Black letterbox bars */
  overflow: hidden;             /* No scrollbars */
  font-family: monospace;
  color: #ccc;
  /* Prevent mobile pull-to-refresh and elastic bouncing */
  overscroll-behavior: none;
  touch-action: none;           /* We handle all touch events in JS */
}

/* --- Game canvas: centered, pixel-perfect, fills viewport at 16:9 --- */
#gameCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Crisp pixel rendering — no smoothing on upscale */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Prevent text selection and touch callouts on the canvas */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Actual pixel size is set dynamically by Engine.js on resize */
}

/* --- Back-to-menu link: top-left corner --- */
#backToMenu {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  background: rgba(30, 30, 60, 0.7);
  color: #aaa;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s;
}

/* Hover effect for back-to-menu link */
#backToMenu:hover {
  background: rgba(60, 60, 100, 0.8);
  color: #fff;
}