/* style.css: how the page looks. Game drawing happens on the canvas, not here. */

/* The HUD's fonts (hud.js), kept with the game so it works offline. Both are SIL Open Font
   Licence (assets/fonts/OFL-*.txt); Latin letters only. Pixelify Sans is one variable font
   covering every weight. */
@font-face {
  font-family: 'Pixelify Sans';
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/PixelifySans.woff2) format('woff2');
}
@font-face {
  font-family: 'Black Ops One';
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/BlackOpsOne-Regular.woff2) format('woff2');
}

body {
  margin: 0;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Scale the 1366x768 canvas to fit the window, keeping its shape. */
canvas {
  width: min(100vw, calc(100vh * 1366 / 768));
  image-rendering: pixelated; /* keep pixel art sharp when the canvas is stretched */
  touch-action: none;         /* on phones, touches control the game instead of scrolling/zooming */
  user-select: none;
  -webkit-user-select: none;
}

/* Testing-only cheat panel, top left, over the game. */
#cheats {
  position: fixed;
  top: 8px;
  left: 8px;
  font: 14px sans-serif;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
}
#cheats summary {
  cursor: pointer;
}
#cheat-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

/* The full-screen button, top right, faint so it doesn't get in the way (fullscreen.js). */
#fullscreen {
  position: fixed;
  top: 8px;
  right: 8px;
  font: 13px sans-serif;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  opacity: 0.6;
  cursor: pointer;
}
#fullscreen:hover {
  opacity: 1;
}