:root {
  --unity-vh: 100vh;
}

@supports (height: 100svh) {
  :root {
    --unity-vh: 100svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --unity-vh: 100dvh;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: var(--unity-vh);
  overflow: hidden;
  background: #000;
  /* 黒背景でレターボックスを明確に */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メインコンテナ - 画面全体を使用 */
#unity-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--unity-vh);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

/* キャンバスラッパー - 9:16アスペクト比を維持 */
#unity-canvas-wrapper {
  position: relative;
  width: 100vw;
  height: calc(100vw * 1.7778);
  /* 16/9 * width */
  max-width: calc(var(--unity-vh) * 0.5625);
  /* 9/16 of available height */
  max-height: var(--unity-vh);
  background: #1a1a1a;
}

@supports (aspect-ratio: 9 / 16) {
  #unity-canvas-wrapper {
    width: min(100vw, calc(var(--unity-vh) * 0.5625));
    height: auto;
    max-height: var(--unity-vh);
    aspect-ratio: 9 / 16;
  }
}

/* 横長画面（PC等）の場合 */
@media (min-aspect-ratio: 9/16) {
  #unity-canvas-wrapper {
    width: calc(var(--unity-vh) * 0.5625);
  }
}

/* 縦長画面（スマホ縦等）の場合 */
@media (max-aspect-ratio: 9/16) {
  #unity-canvas-wrapper {
    width: 100vw;
    max-height: var(--unity-vh);
  }
}

/* Unityキャンバス */
#unity-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: #1a1a1a;
}

/* ローディング画面 */
#unity-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#unity-logo {
  width: 308px;
  height: 260px;
  background: url('logo_blackBack.png') no-repeat center / contain;
  margin-bottom: 20px;
  max-width: 80%;
}

#unity-progress-bar-empty {
  width: 60%;
  max-width: 400px;
  height: 24px;
  border: 2px solid #FFD700;
  box-sizing: border-box;
  position: relative;
  margin-top: 10px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  transition: width 0.4s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}

#progress-text {
  margin-top: 8px;
  font-size: 18px;
  color: #FFF;
  font-family: Arial, sans-serif;
}

/* フッター */
#unity-footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* モバイル対応 */
.unity-mobile #unity-container {
  width: 100vw;
  height: var(--unity-vh);
}

/* モバイル縦向き */
@media (max-width: 768px) and (orientation: portrait) {
  #unity-canvas-wrapper {
    max-width: 100vw;
  }

  #unity-footer {
    display: none;
    /* モバイルではフルスクリーンボタン非表示 */
  }
}

/* モバイル横向き */
@media (max-width: 768px) and (orientation: landscape) {
  #unity-footer {
    bottom: 10px;
    right: 10px;
  }
}


/* 古いブラウザ対応（aspect-ratioが効かない場合） */
@supports not (aspect-ratio: 9 / 16) {
  #unity-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: calc(var(--unity-vh) * 0.5625);
    padding-bottom: 177.78%;
    /* 16/9 * 100 */
  }

  #unity-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}