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;
  background-color: rgba(0, 0, 0, 0);

  /* 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;

  position: absolute;
  top: 0;
}

#Cocos2dGameContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%)!important;
  box-shadow: 0px 0px 20px 0px rgb(0, 0, 0);

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

  overflow: hidden;
}

#Cocos2dGameContainer > iframe {
  overflow: hidden !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
  touch-action: none;
  cursor: inherit;
}

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%;
  background: black no-repeat center;
  background-size: auto;
}

/* Nextspin loading: logo entrance -> hold until scene ready -> exit -> swipe. */
/* 1. Splash states. !important overrides the legacy brand CSS and inline display. */
#splash.ns-two-stage-loading {
  /* Animation timing. Minimum hold (1438ms) is controlled in index.html. */
  --brand-logo-enter-duration: 250ms;
  --brand-logo-exit-duration: 110ms;
  --brand-tagline-enter-duration: 260ms;
  --brand-tagline-enter-delay: 130ms;
  --brand-tagline-exit-duration: 162.5ms;
  --brand-tagline-exit-delay: 87.5ms;
  --swipe-duration: 200ms;

  display: block !important;
  z-index: 10;
  background: #000 !important;
  overflow: hidden;
}

#splash.ns-two-stage-loading.ns-swipe-started {
  background: transparent !important;
}

#splash.ns-two-stage-loading.ns-loading-complete {
  display: none !important;
}

#splash.ns-two-stage-loading .progress-bar,
#splash.ns-two-stage-loading .progress-bar-text {
  display: none !important;
}

/* 2. Logo layout. JavaScript controls the hold; CSS only animates entrance and exit. */
#ns-brand-logo {
  position: absolute;
  display: none;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
}

#splash.ns-two-stage-loading #ns-brand-logo {
  display: block;
}

/* Narrow screens: fit a 9:20 canvas (45vh wide, 222.222222vw tall). */
@media (max-aspect-ratio: 6/13) {
  #ns-brand-logo {
    left: 50%;
    width: min(100vw, 45vh);
    height: min(100vh, 222.222222vw);
    transform: translateX(-50%);
  }
}

/* Wider screens: fit a 9:16 canvas (56.25vh wide, 177.777778vw tall). */
@media (min-aspect-ratio: 9/16) {
  #ns-brand-logo {
    left: 50%;
    width: min(100vw, 56.25vh);
    height: min(100vh, 177.777778vw);
    transform: translateX(-50%);
  }
}

#ns-brand-logo > img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 57%;
  height: 100%;
  opacity: 0;
  filter: none;
  transform: translate3d(-50%, 0, 0);
  transform-origin: center;
  backface-visibility: hidden;
}

/* Entrance: 250ms. Hold: at least 1438ms, extended by JavaScript if needed. */
#ns-brand-logo.ns-brand-logo-ready > img {
  animation: ns-brand-logo-enter var(--brand-logo-enter-duration) ease forwards;
  will-change: opacity, transform, filter;
}

/* Exit starts only when both the minimum display time and the scene are ready. */
#ns-brand-logo.ns-brand-logo-exiting > img {
  animation: ns-brand-logo-exit var(--brand-logo-exit-duration) ease forwards;
}


/* PLAY BOLD scales with the logo container width (cqw). */
.ns-brand-tagline {
  position: absolute;
  top: 54.4%;
  left: 50%;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.85cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.43cqw;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#ns-brand-logo.ns-brand-logo-ready .ns-brand-tagline {
  animation: ns-brand-tagline-enter var(--brand-tagline-enter-duration) ease var(--brand-tagline-enter-delay) forwards;
}

/* Tagline fade starts after 87.5ms; the logo page hides when the 110ms exit ends. */
#ns-brand-logo.ns-brand-logo-exiting .ns-brand-tagline {
  opacity: 1;
  animation: ns-brand-tagline-exit var(--brand-tagline-exit-duration) ease var(--brand-tagline-exit-delay) forwards;
}

/* 3. Swipe: a textured left edge plus a black cover move right together. */
#ns-swipe-transition {
  /* Keep edge width proportional to screen height. */
  --swipe-edge-width: 62.923vh;
  position: absolute;
  top: 0;
  left: calc(-1 * var(--swipe-edge-width));
  width: calc(100vw + var(--swipe-edge-width));
  height: 100vh;
  display: none;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

#ns-swipe-transition > img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--swipe-edge-width);
  height: 100vh;
}

/* Overlap the edge by 20px to avoid a visible seam. */
.ns-swipe-cover {
  position: absolute;
  top: 0;
  left: calc(var(--swipe-edge-width) - 20px);
  width: calc(100vw + 20px);
  height: 100vh;
  background: #000;
}

#ns-swipe-transition.ns-swipe-active {
  animation: ns-swipe-transition var(--swipe-duration) linear forwards;
  will-change: transform;
}

/* 4. Motion details. -50% centers the logo; pixel offsets add the slide. */
@keyframes ns-brand-logo-enter {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(calc(-50% - 25px), 0, 0);
  }
  7% { opacity: 0.55; }
  20% {
    opacity: 1;
    filter: blur(2px);
    transform: translate3d(calc(-50% - 13px), 0, 0);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes ns-brand-logo-exit {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  35% {
    opacity: 0.9;
    transform: translate3d(calc(-50% + 2px), 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + 10px), 0, 0);
  }
}

@keyframes ns-brand-tagline-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ns-brand-tagline-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ns-swipe-transition {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(100vw + var(--swipe-edge-width)), 0, 0); }
}

.progress-bar {
    background-color: #322f31;
    position: absolute;
    left: 50%;
    top: calc(50vh + 65px);
    height: 7px;
    width: 260px;
    border-radius: 20px;
    transform: translate(-50%, -50%);
    display: none;
}

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

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

#height-measure-box {
  width: 1px;
  height: 100vh;
  display: block;
  position: fixed;
  left: 1;
  top: 0px;
}

/* https://developers.google.com/web/updates/2016/12/url-bar-resizing */
#icb-height-measure-box {
  width: 1px;
  height: 100%;
  display: block;
  position: fixed;
  left: 1;
  top: 0px;
}

#swipe-up-full-screen {
  background-color: rgba(0,0,0,0.75);
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 9999px;
  z-index: 9999;
  visibility: hidden;
  display: 'none';
  -webkit-overflow-scrolling: auto;
}

.swipe-up-instruction {
  top: 10px;
  left: 10px;
  position: fixed;
  align-items: baseline;
  display: flex;
  font-size: 1.5em;
  height: 100vh;
  width: 100%;
}

.swipe-up-finger {
  -webkit-animation: swipeup 1s infinite  alternate;
  animation: swipeup 1s infinite  alternate;
}
.swipe-up-finger {
  -webkit-animation: swipeup 1s infinite  reverse;
  animation: swipeup 1s infinite  reverse;
}
@-webkit-keyframes swipeup {
  0% { transform: translateY(15px); }
  100% { transform: translateY(80px); }
}
@keyframes swipeup {
  0% { transform: translateY(15px); }
  100% { transform: translateY(80px); }
}

#request-full-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#portrait-to-landscape {
  background-color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

#game-shell {
  height: 100%;
  width: 100%;
  position: fixed;
  display: flex;
  scroll-behavior: unset;
}

#game-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.portrait-gif {
  opacity: 1;
  animation: none;
  position: absolute;
  top: 35%;
  bottom: 20%;
  width: 100%;
  height: 100%;
  align-items: center;
}

.portrait-text {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 10.5%;
  line-height: 40px;
  color: white;
  font-size: 30px;
}

.background-img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  left: 0;
  right: 0;
  opacity: 1;
}