@font-face {
  font-family: emulogic;
  src: url("../fonts/emulogic.ttf");
}
body {
  background-color: #222;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent scrolling */
}

#game-container {
  display: flex;
  flex-direction: column;
  /* Aspect ratio = 800 width / (120 HUD + 800 Game) height = 800/920 ~= 0.869 */
  aspect-ratio: 800/920;
  height: 98vh; /* Leave a tiny gap */
  width: auto;
  max-width: 98vw;

  /* Fallback for aspect-ratio support if needed, but modern browsers are fine */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Nice glow */
}

#gameScreen {
  width: 100%;
  height: auto;
  background-color: #70acf4;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

#gameHUD {
  width: 100%;
  height: auto;
  background-color: #70acf4;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  margin-bottom: -1px; /* Fix potential pixel gap between canvases */
}