html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #05070d }
#unity-container { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100vw; max-height: 100vh }
#unity-container.unity-mobile { position: fixed }
#unity-canvas { display: block; max-width: 100vw; max-height: 100vh; background: #231F20; outline: none }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative; height: 38px; background: #ffffff; overflow: hidden }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* Portrait-on-phone overlay. The exhibit's UI is authored against a 1920-wide
   reference; a 412-wide portrait viewport cannot show it at a readable size,
   so we ask for landscape rather than ship a broken layout. Toggled from
   updateRotateHint() in index.html — never shown on desktop. */
#rotate-hint {
  position: fixed; inset: 0; z-index: 20; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  background: #05070d; color: #e6e9f2;
  font-family: -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
}
#rotate-hint .rotate-glyph {
  font-size: 64px; line-height: 1; color: #f0c674;
  animation: rotate-tip 2.4s ease-in-out infinite;
}
#rotate-hint .rotate-line { font-size: 17px; font-weight: 600 }
#rotate-hint .rotate-sub { font-size: 12px; font-weight: 400; opacity: 0.62; line-height: 1.7 }
@keyframes rotate-tip {
  0%, 45% { transform: rotate(0deg) }
  60%, 100% { transform: rotate(90deg) }
}