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;

  /* ⚠ BLACK, not the Cocos stock #333. Design resolution is 1136x640 under SHOW_ALL, so on any
     viewport that is not 16:9 the body shows through as letterbox bars. The original build is
     rgb(0,0,0); stock 3.8.8 ships #333, which draws those bars as visible grey borders around the
     playfield. Matching the original here is a fidelity fix, not a style preference. */
  background-color: rgb(0, 0, 0);

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

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

#GameDiv, #Cocos3dGameContainer, #GameCanvas {
  width: 100%;
  height: 100%;
}

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

/* ===================================================================================
   Branded splash — carried across from the original 2.4.6 build's style-mobile.a5a11.css.
   Kept rule-for-rule so the loading screen matches what players saw before the rebuild.
   The two orientation media queries are the original's, and they are the reason the splash
   composes correctly in portrait as well as landscape — do not collapse them into one.
   =================================================================================== */

.LogoPage {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Stacks above #GameDiv. The original had no explicit z-index because its canvas was a sibling
     declared BEFORE the splash; keep this explicit so DOM order stops mattering. */
  z-index: 10;
}

#progress-bg {
  position: fixed;
  top: 85%;
  left: 0%;
  width: 100%;
  height: 10%;
}

.progress-bar {
    background-color: #1a1a1a;
    position: absolute;
    left: 30%;
    top: 5%;
    height: 12%;
    width: 40%;
    padding: 2px;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-text {
    color: #dfdfdf;
    text-shadow: 1px 1px gray;
    position: fixed;
    top: 90%;
    left: 0%;
    width: 100%;
    height: 100%;
    font-size: 110%;
    overflow: auto;
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    transition: width .2s ease-in-out;
    background-color: #34c2e3;
}

.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 .5s linear infinite;
}

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

@media screen and (orientation:portrait) {

  .Logo{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 2vh;
    left: 0%;
  }

  .Logo img{
    width: auto;
    height: 21vh;
    display: inline-block;
    vertical-align: middle;
  }

  .Left{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 22vh;
    left: 0%;
  }

  .Left img{
    width: auto;
    height: 27vh;
    display: inline-block;
    vertical-align: middle;
  }

  .Right{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 47vh;
    right: 0%;
  }

  .Right img{
    width: auto;
    height: 27vh;
    display: inline-block;
    vertical-align: middle;
  }

}

@media screen and (orientation:landscape) {
  .Logo{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 4%;
    left: 0%;
  }

  .Logo img{
    width: auto;
    height: 30%;
    display: inline-block;
    vertical-align: middle;
  }

  .Left{
    width: 55%;
    height: 55%;
    position: fixed;
    top: 30%;
    left: 0%;
  }

  .Left img{
    width: auto;
    height: 100%;
  }

  .Right{
    width: 55%;
    height: 55%;
    position: fixed;
    top: 30%;
    right: 0%;
  }

  .Right img{
    width: auto;
    height: 100%;
  }

  @media screen and (max-width: 160vh) {

    .Left{
      width: calc(55% + ((100vw - 160vh) / 6));
      height: calc(55% + ((100vw - 160vh) / 6));
    }

    .Right{
      width: calc(55% + ((100vw - 160vh) / 6));
      height: calc(55% + ((100vw - 160vh) / 6));
      right: calc((160vh - 100vw) / 12);
    }

  }
}