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: #888;
  /* Letterbox bars are just this black page showing behind the transparent canvas. */
  background-color: #000;

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

  display: flex;
  flex-direction: column;
  
  /* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
  /* overflow cannot be applied in Cocos2dGameContainer, 
  otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
  overflow: hidden;
}

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

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

canvas {
  background-color: transparent;
  display: block;
  margin: 0 auto;
}

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

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

p.header {
  font-size: small;
}

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

#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* cover, bottom-anchored: same deal as the lobby in-game - fill the screen and let the
     surplus go off the top, which is empty starfield, so the launch pad at the bottom of
     the art always stays whole. contain used to letterbox this with flat bars down both
     sides on anything shorter than 9:20. */
  /* Its own asset (not the in-game background sprite) - that one has the "我的星石"
     wallet caption baked in, which makes no sense floating here before any wallet
     number has loaded. This copy has that caption+icon cleanly erased. */
  background: #0f121c url(assets/splash-bg.jpg?v=1) no-repeat center bottom;
  background-size: cover;
  /* Faded out rather than switched off, so the hand-off to the first frame of the
     game isn't a hard cut. main.js drives the opacity. */
  transition: opacity .35s ease-out;
}

/* Cocos Creator loading logo, centred above the progress bar */
#splash #cocosLogo {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 52%;
  max-width: 420px;
  height: auto;
  pointer-events: none;
}

/* Both of these have to stay on the starfield: the pad in the art now reaches up to 61%
   of the screen on a 16:9 phone (68% on 9:20, 72% on a 9:22.5), and pale text over that
   white pad is unreadable. */
#splash .load-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 51%;
  color: #dce7ff;
  font-size: 14px;
  letter-spacing: 1px;
}

.progress-bar {
    position: absolute;
    left: 27.5%;
    top: 57%;
    height: 3px;
    padding: 2px;
    width: 45%;
    border-radius: 7px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease-in-out;
    background-color: #3dc5de;
}

.stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);            
    
    animation: animate-stripes 1s linear infinite;             
}

@keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}