:root {
  color-scheme: dark;
}

html, body {
  margin: 0;
  height: 100%;
  background: #757575; /* gray surround, like the original Dendy frame */
  color: #222;
  font-family: monospace;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

canvas {
  /* Fixed logical resolution scaled to the window, preserving aspect ratio. */
  height: min(90vh, 90vw * 416 / 544);
  width: auto;
  max-width: 96vw;
  image-rendering: pixelated;
  background: #000;
  border: 3px solid #000;
}

.hint {
  margin: 0;
  font-size: 13px;
  color: #1d1d1d;
  text-align: center;
}