:root { color-scheme: dark; }
/* The page never scrolls, on any screen: nothing here is taller or wider than the window. */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #050507; }
body {
  box-sizing: border-box;      /* the bottom padding counts inside the height instead of adding to it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  color: #f5f5f7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 600; letter-spacing: .02em; }
p { margin: .5rem 0 0; color: #8a8a93; font-size: .95rem; text-align: center; }

/* With scripts running, the canvas draws the page and the game; the real heading stays for screen readers. */
canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer;
         -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.js h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }