body { padding: 0; margin: 0; background: #FF808E; }
#unity-container { position: fixed; width: 100%; height: 100%; left: 0; top: 0; }
#unity-canvas { width: 100%; height: 100%; background: #FF808E; }

/* =======================================================================
   ======================================================================= */
#unity-loading-bar { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  
  /* 保持 Flex 排版，確保手機與電腦都絕對置中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* 【解決不消失的核心關鍵】
    不要在這裡寫 display: none !important。
    讓 Unity 預設的 JavaScript 去切換 display: none。
  */
}

/* 如果 Unity 載入完成將其隱藏，但因為某些手機瀏覽器相容性導致 display:none 失敗時的雙重保險 */
#unity-loading-bar[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* LOGO 區塊：請根據你新圖的實際尺寸修改 width 與 height */
#unity-logo { 
  width: 200px; 
  height: 200px; 
  background: url('unity-logo-light.png') no-repeat center;
  background-size: contain;  
}

/* 進度條底條（還沒載入時的深綠色空條） */
#unity-progress-bar-empty { 
  width: 200px;                    
  height: 8px;                    
  margin-top: 20px;          /* 只有上方留 20px 區隔 LOGO，不影響整體置中 */
  background: #AB7A86;             
  border-radius: 5px;              
  overflow: hidden;                
}

/* 進度條本體（隨著載入慢慢變長的亮綠色條） */
#unity-progress-bar-full { 
  width: 0%; 
  height: 100%;                    
  margin-top: 0px;                 
  background: #FFD8D8;             
  border-radius: 5px;              
  transition: width 0.2s ease-out; 
}

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