/*
 * The game is the page.
 *
 * The stock template centres a fixed 1200x800 box on a white sheet, with a
 * heading above it and a credit line below. All three are gone: the canvas
 * fills the viewport and the page cannot scroll, so nothing but the game is
 * ever on screen.
 */
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  background-color: #0b0f0d;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  /* Stops a drag on the canvas scrolling or rubber-banding the page on iOS. */
  overscroll-behavior: none;
  touch-action: none;
}

body, canvas, div {
  outline: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  /* No blue flash under a finger on every button press. */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

canvas {
  background-color: rgba(0, 0, 0, 0);
  display: block;
  /* Keeps the pixel art crisp when the browser scales the backing store. */
  image-rendering: pixelated;
}

/*
 * Fixed rather than 100% height: on mobile browsers the address bar changes the
 * viewport height as it hides, and a percentage height would resize the canvas
 * mid-play every time it did.
 */
#GameDiv {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

#Cocos3dGameContainer, #GameCanvas {
  width: 100%;
  height: 100%;
}

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}