html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #ccc;
  font: 14px/1.4 system-ui, sans-serif;
}

/* The canvas must have no border or padding, or SDL's mouse coordinates drift.
   ScummVM's OpenGL renderer letterboxes the game inside it, preserving aspect. */
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  display: block;
  background: transparent;
  outline: none;
  touch-action: none;
}

#status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 0 4px #000;
}

#status.error { color: #f88; }
#status[hidden], #ended[hidden] { display: none; }

#ended {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  z-index: 3;
}

#restart {
  font: inherit;
  color: #000;
  background: #ddd;
  border: 0;
  border-radius: 4px;
  padding: 8px 18px;
  cursor: pointer;
}
#restart:hover { background: #fff; }
#restart:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#restart:active { background: #bbb; }

.noscript { text-align: center; margin-top: 40vh; }