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);
}

/* 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: #88888800;
  background-color: #33333300;

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

  display: flex;
  flex-direction: column;
}

#Cocos2dGameContainer {
  position: absolute;
  margin: 0;
  overflow: hidden;
  left: 0px;
  top: 0px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

#Cocos3dGameContainer {
  position: absolute;
  margin: 0;
  overflow: hidden;
  left: 0px;
  top: 0px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}

a:link, a:visited {
  color: #66666600;
}

a:active, a:hover {
  color: #66666600;
}

p.header {
  font-size: small;
}

p.footer {
  font-size: x-small;
}

#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#splash .loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 50%, #d63447 100%);
  box-shadow:
    inset -7px -7px 15px rgba(0, 0, 0, 0.3),
    inset 7px 7px 15px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  animation: splash-bounce 1.2s infinite ease-in-out;
  z-index: 2;
}

#splash .loading-icon::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 16px;
  width: 16px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(1px);
}

#splash .loading-icon::after {
  content: '';
  position: fixed;
  bottom: calc(50% - 185px);
  left: 50%;
  width: 65px;
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: splash-shadow 1.2s infinite ease-in-out;
  z-index: 1;
}

@keyframes splash-bounce {
  0% {
    transform: translate(-50%, -50%) translateY(0) scaleY(0.7) scaleX(1.2);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  25% {
    transform: translate(-50%, -50%) translateY(-25px) scaleY(1) scaleX(1);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-75px) scaleY(1.3) scaleX(0.8);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  75% {
    transform: translate(-50%, -50%) translateY(-25px) scaleY(1) scaleX(1);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  85% {
    transform: translate(-50%, -50%) translateY(0) scaleY(0.8) scaleX(1.1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) scaleY(0.7) scaleX(1.2);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

@keyframes splash-shadow {
  0%, 100% {
    transform: translateX(-50%) scaleX(1.2);
    opacity: 0.6;
  }
  25% {
    transform: translateX(-50%) scaleX(1.0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(-50%) scaleX(0.8);
    opacity: 0.2;
  }
  75% {
    transform: translateX(-50%) scaleX(1.0);
    opacity: 0.4;
  }
  85% {
    transform: translateX(-50%) scaleX(1.1);
    opacity: 0.5;
  }
}