/* --- DigiCity WebGL template (mobile-first + responsive + portrait lock) --- */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #231F20;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Full-viewport canvas container, always centered */
#unity-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #231F20;
}

/* Canvas sized responsively via pure CSS to preserve 16:9 aspect and
   letterbox naturally within the viewport. min() picks the smaller of the
   width- or height-limited candidate, guaranteeing the canvas always fits.
   No JS resizing — Unity's matchWebGLToCanvasSize keeps the drawing
   buffer synced with this CSS size, so mouse clicks land where they should. */
#unity-canvas {
  display: block;
  background: #231F20;
  outline: none;
  width:  min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

/* --- Loading bar (unchanged from Unity default) --- */
#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;
}

/* --- Non-critical warning banner --- */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 0);
  background: white;
  padding: 10px;
  display: none;
}

/* --- Portrait-orientation lock overlay --- */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #231F20;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  flex-direction: column;
}
#rotate-overlay .icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: rotate-hint 2s ease-in-out infinite;
}
#rotate-overlay .title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
#rotate-overlay .subtitle {
  font-size: 15px;
  opacity: 0.8;
  max-width: 320px;
}
@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}

/* Show the overlay only on mobile phones in portrait */
@media (max-width: 900px) and (orientation: portrait) {
  #rotate-overlay { display: flex; }
  /* visibility: hidden (not display: none) keeps Unity running underneath,
     so no reload when the user rotates back to landscape */
  #unity-canvas   { visibility: hidden; }
}