/* ------------------------------------------------------------------
   RainierFullscreen —— 基于老板给的 RainierTemplate 复制修改
   改动只有一件事：容器不再写死 960x540，而是铺满整个视口，
   所以两侧/上下不再有留白；配合 Fullscreen.js 启动后自动进全屏。
   SDK（outer.js / RainierDockingSDK.js）与 UnityProgress 均未改动。
   ------------------------------------------------------------------ */

.webgl-content * {border: 0; margin: 0; padding: 0}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;              /* 不留滚动条 */
  background: #000;              /* 兜底色，避免出现白边 */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* 铺满视口，不再用 translate(-50%,-50%) 居中 + 固定宽高 */
.webgl-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;                    /* 盖在 #bg 上面 */
}

/* 背景独立成层（index.html 里有 <div id="bg">）：
   1) Unity 会把 json 的 backgroundColor 用内联样式写进 #gameContainer，
      背景图写在容器上会被它盖掉 —— 分层后背景图才能真正显示；
   2) translateZ(0) 把它提升成独立合成层，加载时进度条每帧变宽
      不会拖着一整屏 1.1MB 的背景图反复重绘（这是加载期卡顿的大头） */
#bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: #000 url('bg-Image.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

#gameContainer{
  position: relative;            /* logo/progress 用 absolute 50% 定位，需要有定位祖先 */
  width: 100% !important;
  height: 100% !important;
  /* UnityLoader 会把 json 的 backgroundColor（#231F20）以内联样式写进容器，
     不加 !important 会把背景图整个盖成纯色。画布本身不透明，这里透明没有副作用。 */
  background: transparent !important;
}

/* Unity 自己会把 canvas 的像素尺寸同步成容器尺寸，这里只保证它是块级、不留行内间隙 */
#gameContainer canvas {
  display: block;
  outline: none;
}

.webgl-content .logo, .progress {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 15px; width: 300px; margin-top: 60px;}
/* 轨道与填充共用同一张胶囊素材（progressFull.Dark.png）：
   原版的 progressEmpty 是 1px 细描边空心框，缩到 15px 高后只剩发丝线，
   和 7px 粗的实心填充叠加会像"笔在画线"一样错位。
   共用素材后两者形状/粗细/缩放完全一致（300/680 == 15/34，天然等比），
   轨道只是被滤镜压暗的同一根胶囊。width 用 !important 顶掉
   UnityProgress.js 每帧写入的 (1-p)%，保证轨道恒定全宽、填充从左往右盖上来。 */
.webgl-content .progress .empty {background: url('progressFull.Dark.png') no-repeat left / cover; width: 100% !important; height: 100%; position: absolute; filter: brightness(.32) saturate(.75);}
.webgl-content .progress .full {background: url('progressFull.Dark.png') no-repeat left / cover; width: 0%; height: 100%; position: absolute;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

/* 首次交互前的提示条；进了全屏或已交互过就隐藏 */
#fs-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: 14px/1.4 "Microsoft YaHei", Helvetica, Arial, sans-serif;
  letter-spacing: .5px;
  pointer-events: none;          /* 不要挡住点击 */
  opacity: 1;
  transition: opacity .35s ease;
  z-index: 9999;
}
#fs-hint.hide { opacity: 0; }