/* くまのまなびじま — やさしいポートレート・ラッパー
   2〜6さい向け。あたたかい島テーマ。広告/外部追跡なし。 */
* { box-sizing: border-box; }
html, body {
  padding: 0; margin: 0; height: 100%;
  background: linear-gradient(160deg, #aee6f2 0%, #7ec8e3 45%, #fce5b6 100%);
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ステージ: たてながの9:16カードとして中央に */
#stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
#unity-canvas {
  display: block;
  background: #bfe9c9;
  aspect-ratio: 9 / 16;
  height: 96vh;
  max-width: 96vw;
  width: auto;
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(40, 80, 110, 0.30);
}

/* スマホ: 画面いっぱい(角丸なし) */
@media (max-aspect-ratio: 3/5), (max-width: 560px) {
  #unity-canvas {
    height: 100vh; height: 100dvh;
    width: 100vw; max-width: 100vw;
    border-radius: 0; box-shadow: none;
  }
  #credit { font-size: 9px; }
}

/* ===== ローディング画面 ===== */
#loading-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, #aee6f2 0%, #7ec8e3 55%, #fce5b6 100%);
  border-radius: inherit;
  transition: opacity 0.55s ease;
  z-index: 5;
}
#loading-screen.done { opacity: 0; pointer-events: none; }

#loading-bear { animation: bounce 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.12)); }
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

#loading-title {
  font-size: clamp(22px, 6vw, 34px);
  font-weight: 800; color: #4a6b3a;
  text-shadow: 0 2px 0 rgba(255,255,255,0.7);
  letter-spacing: 1px;
}
#loading-text { font-size: clamp(14px, 4vw, 18px); color: #5a4634; font-weight: 700; }
.dots span { animation: blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

#loading-track {
  width: min(64vw, 240px); height: 16px;
  background: rgba(255,255,255,0.6);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}
#loading-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #ffb347, #ff8aa0);
  border-radius: 999px;
  transition: width 0.25s ease;
}
#loading-hint { font-size: clamp(11px, 3vw, 13px); color: #6a7a55; margin-top: 2px; }

/* けいこく/エラーバナー */
#unity-warning {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  background: #fff; border-radius: 10px; padding: 10px; display: none; z-index: 10;
  max-width: 86%; font-size: 13px;
}

/* ライセンス・安全表記 */
#credit {
  position: fixed; left: 0; right: 0; bottom: 0;
  text-align: center; padding: 4px 8px;
  font-size: 11px; color: #3c5a47;
  background: rgba(255,255,255,0.42);
  z-index: 4; pointer-events: auto;
}
#credit a { color: #2a6a4a; }