:root {
  --game_font: 'Impact', 'Arial Black', sans-serif;
  --highlight_color: #ff8000;
  --highlight_color_alt: #ff0;
  --link_color: #c34b1b;
  --muted_color: #584848;
}

body {
  margin: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: var(--highlight_color);
  font-family: var(--game_font);
  letter-spacing: 1px;
  /* Prevent pulling to refresh or zooming on mobile */
  touch-action: none;
}

/* Container to handle desktop vs mobile scaling */
#gameWrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Desktop/Large Tablet Refinement */
@media (min-width: 1024px) {
  #gameWrapper {
    width: 95%;
    max-width: 1400px;
    /* Limit height so FU isn't lost on a huge monitor */
    height: 60vh;
    max-height: 600px;
    aspect-ratio: 16 / 9;
  }
}

canvas {
  /* Use the full size of the wrapper */
  width: 100%;
  height: 100%;

  border: 4px solid var(--muted_color);
  box-shadow: 0 0 45px rgba(255, 128, 0, 0.2);
  background: #010101;

  /* Prevents the "magnifying glass" on long-press */
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;

  /* Ensure it doesn't stretch pixels poorly */
  object-fit: contain;
}