#unity-container {
  position: absolute
}

# Ensure the root elements fill the viewport so 100% heights work reliably html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#unity-container {
  position: absolute
}

#unity-container.unity-desktop {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
}

#unity-container.unity-mobile {
  position: fixed;
  width: 100%;
  height: 100%;
  left:0;
  top:0
}

#unity-canvas {
  background: {
      {
        {
        BACKGROUND_COLOR
      }
    }
  }
}

.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
}

#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none
}

#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  margin-top: 10px;
  margin-left: 6.5px;
  background: url('progress-bar-empty-dark.png') no-repeat center;
  position: relative;
  /* 相对定位，让子图标可以绝对定位 */
}

#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin-top: 10px;
  background: url('progress-bar-full-dark.png') no-repeat center
}

#unity-footer {
  position: relative
}

.unity-mobile #unity-footer {
  display: none
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none
}

/* 自定义背景容器的样式 */
/* 自定义背景容器的样式：铺满视口，使用 top/bottom/right/left，避免 height:100% 引起的溢出 */
#custom-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* [修改位置 5: 确保Unity画布背景透明] */
/* 确保Unity画布背景透明，让自定义背景显示 */
#unity-canvas {
  background: transparent !important;
}

/* [修改位置 2: 添加Loading文字的样式] */
/* Loading文字样式 */
#loading-text {
  color: white;
  /* 文字颜色为白色 */
  font-size: 16px;
  /* 字体大小 */
  font-family: Arial, sans-serif;
  /* 字体类型 */
  text-align: center;
  /* 文字居中 */
  margin-top: 30px;
  /* 顶部间距，与进度条分开 */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  /* 文字阴影，增加可读性 */
  letter-spacing: 1px;
  /* 字母间距 */
}

/* [修改位置 3: 移动设备上的Loading文字样式] */
/* 移动设备上的Loading文字样式 */
.unity-mobile #loading-text {
  font-size: 14px;
  /* 移动设备上字体稍小 */
  margin-top: 20px;
  /* 移动设备上间距稍小 */
}

/* [修改位置 3: 添加进度条图标的样式] */
/* 进度条图标样式 */
#progress-icon {
  position: absolute;
  /* 绝对定位，相对于进度条容器 */
  left: 0;
  /* 初始位置在左侧 */
  top: 0px;
  /* 位于进度条上方 */
  width: 200px;
  /* 图标宽度 */
  height: 200px;
  /* 图标高度 */
  font-size: 24px;
  /* 字体大小（如果使用emoji或字体图标） */
  text-align: center;
  /* 文字居中 */
  line-height: 30px;
  /* 垂直居中 */
  transition: left 0.3s ease;
  /* 平滑移动过渡效果 */
  transform: translateX(0%);
  /* 水平居中自身宽度 */
  z-index: 20;
  /* 确保图标在最上层 */
}

/* [修改位置 4: 移动设备上的图标样式] */
/* 移动设备上的图标样式 */
.unity-mobile #progress-icon {
  width: 50px;
  /* 移动设备上图标稍小 */
  height: 50px;
  /* 移动设备上图标稍小 */
  font-size: 20px;
  /* 移动设备上字体稍小 */
  line-height: 25px;
  /* 移动设备上垂直居中调整 */
  top: -20px;
  /* 移动设备上位置调整 */
}

/* [修改位置 5: 如果需要使用图片图标，添加图片样式] */
/* 使用图片图标的样式（如果需要） */
#progress-icon.img-icon {
  background-image: url('TemplateData/progress-icon.png')no-repeat center;
  /* 图标图片路径 */
  background-size: contain;
  /* 保持图片比例 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center;
  /* 居中 */
  font-size: 0;
  /* 隐藏文字 */
  display: block !important;
  /* 确保显示 */
  visibility: visible !important;
  /* 确保可见 */
}