* {
  -webkit-tap-highlight-color: transparent;
}


html,
body {
  margin: 0;

  width: 100%;

  background: #ff6a6a;

  overflow: hidden;

  overscroll-behavior: none;

  touch-action: none;
}


html,
body {
  height: 100dvh;
  min-height: 100dvh;
}


@supports not (height: 100dvh) {

  html,
  body {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }

}


@media all and (display-mode: standalone),
       all and (display-mode: fullscreen) {

  html,
  body {
    height: 100vh;
    min-height: 100vh;
  }

}


body {
  position: relative;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
}


.app-viewport {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}


.game-wrapper {
  position: relative;
  flex: none;
}


canvas {
  display: block;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  touch-action: none;

  cursor: pointer;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
}


.pixel-grid {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  opacity: 0.1;

  pointer-events: none;

  background-image:
    linear-gradient(
      to right,
      #86f7ff 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      #86f7ff 1px,
      transparent 1px
    );
}