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: #333;

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

  display: flex;
  flex-direction: column;
}

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

#GameDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  border: 0;
  margin: 0;
  background-color: #fff;
}

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


/* splash */
#splash{position:fixed;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;justify-content:center;align-items:center;background-image:url(https://webusstatic.yo-star.com/stellasora/stellasora-puzzle-minigame/prod/loading_bg.c324a260.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;overflow:hidden;z-index:100;}
.splash-slogan{width:40vw;max-width:53.1rem;min-width:22.125rem;height:auto;margin-bottom:2rem;margin-right:4rem;z-index:10;}
.splash-loading-text{width:18vw;max-width:22.2rem;min-width:5.55rem;height:auto;margin-bottom:1.5rem;z-index:10;}
.splash-bar-wrap{position:relative;width:20vw;max-width:25.375rem;min-width:12.5rem;padding-bottom:6rem;z-index:10;overflow:visible;}
.splash-progress-bar{width:100%;height:2rem;border-radius:20px;border:4px solid #A1ADBB;background:#fff;box-sizing:border-box;padding:3px;}
.splash-progress-inner{width:100%;height:100%;border-radius:16px;}
.splash-progress-rate{display:block;position:relative;height:100%;border-radius:16px;background:#A1ADBB;transition:width .3s ease;}
.splash-adorn-wrap{position:absolute;right:0;top:50%;transform:translate(50%,20%);width:8vw;z-index:2;}
.splash-adorn{display:block;width:8vw;max-width:18.15rem;min-width:4.5375rem;height:auto;}
.splash-adorn-shadow{width:50%;height:2rem;background:rgba(21,40,45,.2);border-radius:50%;margin:-1rem 3.5rem 0;}
@media(max-width:1600px){.splash-slogan{width:36vw;margin-bottom:4rem;margin-right:4rem}.splash-loading-text{width:16vw;margin-bottom:1.5rem}.splash-bar-wrap{width:20vw;padding-bottom:0}.splash-progress-bar{width:100%;height:1.5rem;border-width:4px;padding:3px}.splash-adorn-wrap{width:10vw;transform:translate(50%,20%)}.splash-adorn{width:10vw}.splash-adorn-shadow{width:50%;height:1.5rem;margin:-1rem 3rem 0}}
@media(max-width:1280px){.splash-slogan{width:60vw;margin-bottom:6rem;margin-right:2rem}.splash-loading-text{width:30vw;margin-bottom:1.5rem}.splash-bar-wrap{width:32vw;padding-bottom:5rem}.splash-progress-bar{width:100%;height:1.5rem;border-width:4px;padding:2px}.splash-adorn-wrap{width:16vw;transform:translate(50%,30%)}.splash-adorn{width:16vw}.splash-adorn-shadow{width:45%;height:1.5rem;margin:-0.8rem 3.5rem 0}}
@media(max-width:600px) and (orientation:portrait){.splash-slogan{width:60vw;margin-bottom:8rem;margin-right:0.5rem}.splash-loading-text{width:30vw;margin-bottom:1rem}.splash-bar-wrap{width:32vw;padding-bottom:1rem}.splash-progress-bar{width:100%;height:1rem;border-width:2px;padding:2px}.splash-adorn-wrap{width:22vw;transform:translate(50%,20%)}.splash-adorn{width:22vw}.splash-adorn-shadow{width:50%;height:1rem;margin:-0.5rem 1.5rem 0}}
@media(max-height:600px) and (orientation:landscape){.splash-slogan{width:40vw;margin-bottom:0.5rem;margin-right:0.5rem}.splash-loading-text{width:20vw;margin-bottom:0.5rem}.splash-bar-wrap{width:22vw;padding-bottom:5rem}.splash-progress-bar{width:100%;height:1rem;border-width:2px;padding:2px}.splash-adorn-wrap{width:10vw;transform:translate(50%,10%)}.splash-adorn{width:10vw}.splash-adorn-shadow{width:50%;height:1rem;margin:-0.5rem 1.5rem 0}}
.splash-slogan{margin-right:0}
@media(min-width:1601px){.splash-bar-wrap{padding-bottom:6rem}}
@media(max-height:600px) and (orientation:landscape){.splash-bar-wrap{padding-bottom:4rem}}


/* horizontal-wrapper */
#horizontal-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background-color:#ffffff;display:none;flex-direction:column;justify-content:center;align-items:center;z-index:200;}
#horizontal-wrapper img{width:80px;height:auto;display:block;}
#horizontal-wrapper span{font-size:18px;margin-top:22px;color:#333333;text-align:center;}
@media(max-width:1023px) and (orientation:portrait){#horizontal-wrapper{display:flex;}}