:root {
  /* Read by src/main.js so on-screen touch controls clear notches and home bars. */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #050507;
  color-scheme: dark;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: default;
  touch-action: none;
}

/* As a page or installed app (html.app), the canvas always covers the whole
   visible viewport, whatever the orientation or the state of mobile browser
   toolbars. Embedded, it just fills its container. */
html.app canvas#game {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

@supports (height: 100dvh) {
  html.app canvas#game {
    width: 100dvw;
    height: 100dvh;
  }
}