/* Default styles (desktop / PC) */
body {
  padding: 0;
  margin: 0;
  background: #1b1a21;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden; /* no scroll on desktop */
}

#unity-container {
  position: relative;
  width: 1280px;
  height: 720px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#unity-container.unity-desktop { 
  width: 1280px; 
  height: 720px; 
}

#unity-container.unity-mobile { 
  width: 100%; 
  max-width: 100vw;
  height: auto; 
  aspect-ratio: 16 / 9; /* Keep correct ratio */
  margin: 0 auto;
}

#unity-canvas { 
  width: 100%; 
  height: 100%; 
  max-width: 100vw;
  max-height: 100vh;
  background: #1b1a21;
  object-fit: contain; /* Keeps aspect ratio inside boundaries */
}

#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; 
  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; 
}

.unity-mobile #unity-footer { 
  display: none; 
}

#unity-webgl-logo { 
  float: left; 
  width: 204px; 
  height: 38px; 
  background: url('webgl-logo.png') no-repeat center; 
}

#unity-build-title { 
  float: right; 
  margin-right: 10px; 
  line-height: 38px; 
  font-family: arial; 
  font-size: 18px; 
}

#unity-fullscreen-button { 
  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; 
}

/* Retina / high-DPI displays (iPhone) */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    display: block;                  /* remove flex centering */
    text-align: center;              /* keep it centered in X */
    overflow-y: auto;                /* allow vertical scroll */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    height: auto;                    /* let it expand */
    min-height: 100vh;
  }

  #unity-container {
    margin: 0 auto;                  /* center in X */
  }

  #unity-canvas {
    width: 100%;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
  }
}