html {
  -ms-touch-action: none;
}

body,
canvas,
div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;

  cursor: default;
  color: #888;
  background-color: #333;

  text-align: center;
  font-family: Helvetica, Verdana, Arial, sans-serif;

  display: flex;
  flex-direction: column;
}

canvas {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#bg_black {
  width: 100%;
  height: 100%;
  background-color: #000;
}

#GameDiv,
#Cocos3dGameContainer,
#GameCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#splash {
  background: #000;
  position: absolute;
  transition: transform 3s;
  transform: scale(1.2);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background-image: url("landingPage.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#splash_opcity {
  background-color: rgb(0, 0, 0);
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: 40px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* .game-logo {
  height: auto;
  max-width: 230px;
} 

/* @media only screen and (max-width: 600px) {
  .game-logo {
    max-width: 230px;
  }
}

@media only screen and (min-width: 768px) {
  .game-logo {
    max-width: 230px;
  }
}

@media only screen and (min-width: 992px) {
  .game-logo {
    max-width: 230px;
  }
}

@media only screen and (min-width: 1200px) {
  .game-logo {
    max-width: 230px;
    width: 100%;
  }
} */

.preloading {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 999;
}

.canvas-container {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1638px !important;
  width: 756px !important;

  transform: translate(-50%, -50%) scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none; /* loading bar is display-only; let taps reach the Cocos canvas */

  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.canvas-container .center-node {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow: visible; /* glow.png extends past the 300px bar at 100% */
}

.logo-super-bull {
  display: block;
  margin-top: 284px;
  width: 230px;
  height: 186px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 0 0 #000;
  border-radius: 0;
}

.loading-bar {
  position: relative;
  width: 300px;
  max-width: 300px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 259px;
  overflow: visible; /* glow.png (40px) is taller than the 30px bg */
  --cap-left-w: 31px; /* left.png width */
  --cap-right-w: 26px; /* right.png width */
  --cap-overlap: 0.6px; /* how far left.png overlaps the fill's rounded end */
  --cap-right-overlap: 14px; /* deeper: must cover the fill's rounded corners (radius ~12px) */
  --cap-feather: 6px; /* fade-in width of right.png's left edge, hides the color step */
  --glow-w: 40px; /* glow.png width */
  --glow-offset: 9px; /* how far glow.png's right edge extends past right.png's */
  --group-shift: 2px; /* shifts caps + fill + glow right so they look centered on the bg */
}

.progress-bg {
  width: 300px;
  height: 30px;
  display: block;
  position: absolute;
  top: 0;
  left: 12;
  z-index: 1;
  pointer-events: none;
  margin: 0 auto;
}

.progress-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.progress-side-left {
  right: calc(100% - var(--cap-overlap));
  width: var(--cap-left-w);
}

.progress-side-right {
  left: calc(100% - min(var(--cap-right-overlap), 100%)); /* 100% caps it while the fill is short */
  width: var(--cap-right-w);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--cap-feather));
  mask-image: linear-gradient(to right, transparent, #000 var(--cap-feather));
}

.progress-glow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% - min(var(--cap-right-overlap), 100%) + var(--cap-right-w) - var(--glow-w) + var(--glow-offset));
  width: var(--glow-w);
  height: 40px;
  display: block;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: plus-lighter; /* additive: adds glow color onto what's below */
}

.progress-process {
  position: absolute;
  top: 0;
  left: calc(var(--cap-left-w) - var(--cap-overlap) + var(--group-shift));
  height: 30px;
  width: 0px;
  overflow: visible;
  z-index: 2;
}

.progress-fill {
  width: 100%;
  height: 24px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.custom-loading-text {
  color: #fff;
  font-size: 24px;
  letter-spacing: -0.53px;
  text-align: center;
  margin-top: 15px;
  font-family: 'Montserrat', 'Montserrat-Regular', Arial, sans-serif;
  margin-left: auto;
  margin-right: auto;
}


#custom-loading.fade-out {
  animation: fadeOutLoading 1.8s forwards;
  pointer-events: none;
}

@keyframes fadeOutLoading {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#background.fade-out {
  animation: fadeOutLoading 1.8s forwards;
  pointer-events: none;
}

#logo-super.fade-out {
  animation: fadeOutLoading 1.8s forwards;
  pointer-events: none;
}

#background {
  transition: opacity 1.8s;
}