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 {
            margin: 0;
            padding: 0;
            height: 100vh;
             /*   background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d);*/
			   background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* 使用伪元素创建加载动画 */
        body::before,
        body::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        body::before {
            width:70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
            animation-delay: 0s;
        }

        body::after {
            width: 60px;
            height: 60px;
            background: rgba(66, 133, 244, 0.8);
            box-shadow: 0 0 15px rgba(66, 133, 244, 0.6);
            animation-delay: 0.5s;
        }

        /* 脉冲动画 */
        @keyframes pulse {
            0%, 100% {
                transform: scale(0.8);
                opacity: 0.7;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

       

        /* 添加文字提示 */
        body::after {
             content:attr(data-progress);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 11px;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            background: transparent;
            box-shadow: none;
            animation: none;
			
        }

        /* 添加背景粒子效果 */
        body {
          /*  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);*/
            position: relative;
        }

        /* 使用box-shadow创建多个粒子 */
        body::before {
            box-shadow: 
                0 0 20px rgba(255, 255, 255, 0.6),
                40px 30px 0 0 rgba(255, 255, 255, 0.3),
                -40px -30px 0 0 rgba(255, 255, 255, 0.3),
                30px -40px 0 0 rgba(255, 255, 255, 0.3),
                -30px 40px 0 0 rgba(255, 255, 255, 0.3);
            animation: 
                rotate 1.5s linear infinite,
                pulse 2s ease-in-out infinite,
                particleMove 4s ease-in-out infinite;
        }

        @keyframes particleMove {
            0%, 100% {
                box-shadow: 
                    0 0 20px rgba(255, 255, 255, 0.6),
                    40px 30px 0 0 rgba(255, 255, 255, 0.3),
                    -40px -30px 0 0 rgba(255, 255, 255, 0.3),
                    30px -40px 0 0 rgba(255, 255, 255, 0.3),
                    -30px 40px 0 0 rgba(255, 255, 255, 0.3);
            }
            25% {
                box-shadow: 
                    0 0 20px rgba(255, 255, 255, 0.6),
                    -40px 30px 0 0 rgba(255, 255, 255, 0.3),
                    40px -30px 0 0 rgba(255, 255, 255, 0.3),
                    -30px -40px 0 0 rgba(255, 255, 255, 0.3),
                    30px 40px 0 0 rgba(255, 255, 255, 0.3);
            }
            50% {
                box-shadow: 
                    0 0 20px rgba(255, 255, 255, 0.6),
                    -30px -40px 0 0 rgba(255, 255, 255, 0.3),
                    30px 40px 0 0 rgba(255, 255, 255, 0.3),
                    40px -30px 0 0 rgba(255, 255, 255, 0.3),
                    -40px 30px 0 0 rgba(255, 255, 255, 0.3);
            }
            75% {
                box-shadow: 
                    0 0 20px rgba(255, 255, 255, 0.6),
                    30px -40px 0 0 rgba(255, 255, 255, 0.3),
                    -30px 40px 0 0 rgba(255, 255, 255, 0.3),
                    -40px -30px 0 0 rgba(255, 255, 255, 0.3),
                    40px 30px 0 0 rgba(255, 255, 255, 0.3);
            }
        }
 /* 隐藏加载动画的类 */
        .loader-hidden::before,
        .loader-hidden::after {
            opacity: 0;
            visibility: hidden;
            animation: none;
        }
       
 
canvas {
	 width: 100%;
  height: 100%;
  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);
}