@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-extralight-italic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-semibold-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-extrabold-italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito/nunito-black-italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: block;
}

:root {
  --y_overflow: 1px;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  touch-action: none !important;
}

html {
  margin: 0px;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none !important;
  overscroll-behavior: none;
}

body {
  margin-top: var(--y_overflow);
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  padding: 0;
  width: 100%;
  height: calc(100% + var(--y_overflow));
  overflow: hidden;
  touch-action: none !important;
  overscroll-behavior: none;
  background-color: #0039B9;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#navigationCanvas {
  z-index: 3;
}

#invalidShotCanvas {
  position: absolute;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

#gameUICanvas {
  position: absolute;
  left: 0;
  top: 0;
  /* pointer-events: none; */
}

#loadingCanvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 110;
}

#fpsCanvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 999;
}

#overlayCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 111;
}
#overlayCanvas.show {
  animation: bounceIn 0.24s ease forwards;
}
#overlayBackground {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 109;
  background: rgba(0, 0, 0, 0.8);
}

#dialogCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 120;
}
#tooltipCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 120;
}

#dialogCanvas.show {
  animation: bounceIn 0.24s ease forwards;
}
#dialogOverlay {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 119;
  background: rgba(0, 0, 0, 0.8);
}

.webgl-canvas {
  pointer-events: none;
}

#overlayCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 123;
}
#overlayBackground {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 121;
  background: rgba(0, 0, 0, 0.8);
}
#vfxOverlayBackCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 122;
  pointer-events: none;
}
#vfxOverlayFrontCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 124;
  pointer-events: none;
}