* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #0d0910;
  color: #e8e0ef;
  font-family: "Courier New", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  user-select: none;
  -webkit-user-select: none;
}

/* controls overlaid in the top border strip of the game window,
   styled like the game's own menu text (pixelmix, dim -> pale green) */
#overlay-controls {
  position: absolute;
  top: 0;
  right: 3.125cqw;           /* 25px scene border at 1x */
  height: 5cqh;              /* the 25px top strip */
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-family: 'pixelmix', "Courier New", monospace;
  font-size: 2cqh;           /* 10px at 1x, scales with the window */
  line-height: 1;
  pointer-events: none;
}

#overlay-controls .btn {
  color: #3d3d3d;
  cursor: pointer;
  pointer-events: auto;
}

#overlay-controls .btn:hover { color: #e5f0e5; }

#overlay-controls .btn.active {
  color: #e5f0e5;
  cursor: default;
}

#size-control {
  display: none; /* shown by JS in Revamped mode only */
  align-items: center;
  gap: 1.5cqw;
  margin-left: 2cqw;
}

#game {
  position: relative;
  container-type: size;      /* lets the overlay scale in cq units */
  width: 800px;
  height: 500px;
  margin-top: 14px;
  box-shadow: 0 0 40px rgba(140,80,220,.35);
  border: 2px solid #3a2a4a;
  image-rendering: pixelated;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

#credits { margin: 10px; font-size: 11px; color: #6a5a7a; max-width: 800px; text-align: center; }
#credits b { color: #a88fc4; }