html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #12100e;
  color: #f4ead5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The three rules that keep the page still under a player's thumbs: no scrolling,
     no browser gesture handling on the canvas, no rubber-band overscroll. */
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

#unity-container {
  position: fixed;
  inset: 0;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #12100e;
  /* A long press on a canvas otherwise offers to select or save it. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#unity-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#unity-progress-bar {
  width: 60%;
  max-width: 320px;
  height: 6px;
  background: rgba(244, 234, 213, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

#unity-progress-fill {
  width: 0;
  height: 100%;
  background: #c19f61;
}

/* Pure DOM, so it shows before the wasm has loaded — the visitor is told to rotate while
   the download is still running rather than after it.

   No z-index on purpose: it comes after #unity-container in the document, which is already
   enough to paint it over the canvas. A z-index here would also outrank Unity's soft-keyboard
   bar, which it appends to document.body with no z-index of its own, and bury the only text
   input a phone gets. */
#rotate-overlay {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #12100e;
    font-size: 20px;
    text-align: center;
    padding: 24px;
  }
}