html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: default;
  image-rendering: pixelated;
}

noscript pre {
  color: #c33;
  font: bold 16px monospace;
  padding: 2rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#touch-note {
  display: none;
}

/* Touch-only devices: the game needs a mouse and keyboard */
@media (hover: none) and (pointer: coarse) {
  #touch-note {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.88);
    color: #cdcdd7;
    font: 16px/1.5 monospace;
    text-align: center;
  }

  #touch-note pre {
    margin: 0;
    color: #ff3c32;
    font: bold 22px monospace;
  }

  #touch-note p {
    margin: 0;
    max-width: 28ch;
  }
}

canvas:focus-visible {
  outline: 2px solid #ff5040;
  outline-offset: -2px;
}

#fatal {
  display: none;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 3em;
  overflow: auto;
  color: #ff5040;
  background: #000;
  font: 15px/1.5 monospace;
  white-space: pre-wrap;
}