body {
  margin: 0;
  overflow: hidden; /* Keeps scrollbars away */
  width: 100%;
  height: 100%;
}

canvas {
  display: block; /* Removes default inline-block space */
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

#blocker {
  position: absolute;
  left: 0;
  top: 0;
  /* FIX: Changed from 1920px/1080px to 100% */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

  /* Optional: Ensure it sits above the canvas but below the text */
  z-index: 10;
}

#instructions {
  position: absolute;
  /* FIX: Changed from 540px (half of 1080) to 50% */
  top: 50%;
  /* FIX: Changed from 960px (half of 1920) to 50% */
  left: 50%;

  /* This keeps it perfectly centered regardless of screen size */
  transform: translate(-50%, -50%);

  font-size: 24px;
  font-family: monospace;
  color: white;
  text-align: center; /* Ensures multi-line text centers */

  background-color: rgba(0, 0, 0, 0.7);
  padding: 1em;
  border-radius: 1em;
  border: 5px solid #f00;

  width: max-content; /* Prevents box from being too wide */
  max-width: 90%; /* Prevents text from overflowing on mobile */
  z-index: 20;
}

#fpslabel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;

  font-size: 24px;
  font-family: monospace;
  color: white;
}

#hud {
  position: absolute;
  /* FIX: Changed from 700px to percentage (approx 65-70%) */
  top: 70%;
  /* FIX: Changed from 960px to 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;

  font-size: 24px;
  font-family: monospace;
  color: white;
  width: max-content;
}