html,body{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  cursor: default;
  padding: 0;
  border: 0;
  margin: 0;

  text-align: center;
  background-color: white;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

body, canvas, div {
  outline: 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 */
}

canvas {
  background-color: rgba(34, 155, 183, 255);
}

/* #GameDiv {
    margin: 0 auto;
    position:relative;
    border:5px solid black;
    border-radius: 10px;
    box-shadow: 0 5px 50px #333
} */


#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_chillax_web{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2273B7; 
  z-index: 10; /* 设置一个较高的 z-index 值 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#splash_chillax_mobile{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2273B7; 
  z-index: 9; /* 设置一个较高的 z-index 值 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}


.text_word{
  position: fixed; /* 将元素固定在视口中 */
  bottom: 0; /* 距离视口底部的距离为 0 */
  width: 100%; /* 宽度占满整个视口 */
  padding: 10px; /* 添加一些内边距 */
  text-align: center; /* 文本居中对齐 */
  font-size: 12px; /* 设置标题的字体大小为 24 像素 */
}

#logo{
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: 60vh;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.loading_gif{
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: 60vh;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-color: #2274b700; 
}

#word{
  position: fixed;
  top: 48%;
  left: 50%;
  width: auto;
  height: 8vh;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#word1{/* 专门给第一个welcome准备的 */
  position: fixed;
  top: 48%;
  left: 50%;
  width: auto;
  height: 8vh;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 1;
}

.wordimage {
  opacity: 0; /* 初始状态设置为不可见 */
}

#loading{
  position: fixed;
  top: 90%;
  left: 50%;
  width: auto;
  height: 5vh;
  transform: translateX(-50%);
  animation: gradientAnimation 1.5s infinite; /* 4s 是动画的总时间，你可以根据需要调整 */
}

@keyframes gradientAnimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#blinds_container {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  z-index: 999; /* 设置一个较高的 z-index 值 */
}

.blinds {
  flex: 1;
  width: 100%;
  /* background: #2273B7;  */
  background: #2273B7; /* 设置百叶窗颜色 */
  animation: openBlinds 0.3s ease-in-out; /* 设置动画名称、时间、缓动函数 */
  transform-origin: top center; /* 设置变换的原点为顶部中心 */
  transform: scaleY(0);
}
@keyframes openBlinds {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

#GameDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0; /* 游戏界面在下层 */
}

#GameCanvas {
  width: 100%;
  height: 100%;
}