:root {
  color-scheme: light;
  font-family: "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  background: #18231f;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #18231f; }
body { min-height: 100dvh; }

#unity-container { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #1f1f20; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #1f1f20; outline: none; }

#unity-loading-bar {
  position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: #17211e;
}
#unity-logo { display: flex; align-items: center; justify-content: center; width: 240px; height: 72px; color: #edf5ef; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
#unity-logo::before { content: "CounselCue"; }
#unity-progress-bar-empty { width: min(240px, 66vw); height: 10px; overflow: hidden; border: 1px solid #dce9e1; border-radius: 999px; }
#unity-progress-bar-full { width: 0; height: 100%; background: #82c3a1; transition: width .15s linear; }
#unity-loading-label { color: #edf5ef; font-size: 14px; }

#unity-warning { position: fixed; z-index: 200; left: 50%; top: max(12px, env(safe-area-inset-top)); width: min(680px, calc(100vw - 24px)); transform: translateX(-50%); }
#unity-warning:empty { display: none; }
#unity-warning > div { margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: #fff4d8; color: #3a3021; box-shadow: 0 8px 28px #0005; }
#unity-warning > .error { background: #7f2828; color: white; }

#orientation-message { display: none; }

@media (orientation: portrait) and (max-width: 800px) {
  #unity-container { filter: brightness(.32); pointer-events: none; }
  #cci, #cct, #cch { display: none !important; }
  #orientation-message {
    position: fixed; z-index: 500; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center;
    background: #173029f2; color: white;
  }
  #orientation-message strong { font-size: 21px; }
  #orientation-message span { max-width: 320px; color: #d8ebe0; font-size: 14px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}