/*  `100vh` on iOS is the viewport with the browser toolbar hidden, so a page sized in it keeps
    the bottom of itself underneath the toolbar whenever the toolbar is on screen — which is what
    puts the foot of the game out of reach. `100dvh` is the viewport that is actually visible and
    it follows the toolbar in and out; `100vh` stays as the fallback for browsers without it. */
html,
body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: #0b2039;
  overflow: hidden;
  /*  Nothing scrolls, so the rubber-band drag that would otherwise move the whole page under a
      swipe on the board is turned off. */
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  top: 0;
  left: 0;
}

#gameParent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/*  `viewport-fit=cover` lets the canvas run under the notch and the home indicator, which is
    what keeps the artwork edge to edge; the strip they sit in is kept clear of anything tappable
    inside the game instead (SAFE_BOTTOM in game-config.js). */
#gameParent canvas {
  display: block;
}