body { padding: 0; margin: 0 }
#unity-container { position: absolute; width: 100%; height: 100%; }

/* PC specific styles */
body.pc {
  background-color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
}

body.pc #unity-container {
	height: 100vh;
    aspect-ratio: 9 / 19.5;
    width: auto;
    max-height: 100vh;
    max-width: 65vw;
}

/* Auto-scale for smaller desktop screens */
@media (max-height: 900px) {
  body.pc #unity-container {
    transform: scale(0.9);
  }
}
@media (max-height: 800px) {
  body.pc #unity-container {
    transform: scale(0.8);
  }
}
@media (max-height: 700px) {
  body.pc #unity-container {
    transform: scale(0.7);
  }
}
@media (max-height: 600px) {
  body.pc #unity-container {
    transform: scale(0.6);
  }
}

#unity-canvas { width: 100%; height: 100%; background: #231F20 }
#unity-loading-bar { position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); display: none }
#unity-logo { display: none }
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; 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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }