* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #231F20;
  display: flex;
  flex-direction: column; /* 縦に並べる */
}

/* キャラチャット共通ヘッダーのエリア */
#chara-chat-header {
  width: 100%;
  flex-shrink: 0; /* ヘッダーが潰れないように固定 */
  z-index: 100;
}

/* Unityアプリとロード画面を包むコンテナ */
#unity-app-container {
  position: relative; /* 子要素の absolute の起点にする */
  flex: 1; /* 残りの画面をすべて占有 */
  width: 100%;
  overflow: hidden;
}

/* Canvasを画面全体に固定（左上に小さくなるのを防ぐ） */
#unity-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: #CACACA;
}

/* ロード画面全体のオーバーレイ */
#loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("LoadingBgPatternTop.png");
  background-repeat: repeat;
  background-position: center;
  background-color: #f0f0f0;
  /*background-size: 80px auto;*/
  transition: opacity 0.5s ease-out;  /* フェード時間は index.html と整合 */
}

#loading-content {
  text-align: center;
  width: 90%;
  /* デフォルトは80vw、横長画面では60vw */
  max-width: min(80vw, 500px);
  transform: translateY(-30px);
}

/* 横長画面の場合 */
@media (orientation: landscape) {
  #loading-content {
    max-width: min(60vw, 500px);
  }
}

#title-logo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: transparent; /* 背景色を透明に */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  background-image: url("VanillaTalkTitle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* 画像全体が見えるように調整 */
}

#loading-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 18px;
  color: #333;
}

/* バーのコンテナ（高さを低くして細長くする） */
#loading-bar-container {
  position: relative;
  width: 100%;
  height: 10px; /* ここでバーの太さを調整 */
}

/* 下地：LoadingGaugeBaseTop.png (60x10) - 左右30pxを固定 */
#loading-bar-base {
  position: absolute;
  top: 0;
  left: -25px; /* 左に25px広げる */
  width: calc(100% + 50px); /* 全体で50px大きくする */
  height: 100%;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-image-source: url("LoadingGaugeBaseTop.png");
  border-image-slice: 0 29 0 29 fill;
  border-image-width: 0 30px 0 30px;
  border-image-repeat: stretch;
}

/* 進捗：LoadingGaugeTop.png (8x8) - 左右4pxを固定 */
#loading-bar-fill {
  position: absolute;
  top: 10%;
  left: 0;
  width: 0%;
  height: 80%;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-image-source: url("LoadingGaugeTop.png");
  border-image-slice: 0 3 0 3 fill;
  border-image-width: 0 4px 0 4px;
  border-image-repeat: stretch;
  transition: width 0.1s ease-out;
}