body {
  padding: 0;
  margin: 0;
  background: #000;
}

/* ===== Unity Container ===== */
#unity-container {
  position: relative;                 /* must be required for progress bar */
  width: min(calc(100vh * (9/19.5)), 100vw);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9/19.5;
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;                   /* avoid cut progress bar */
}

/* ===== Canvas ===== */
#unity-canvas {
  width: 100%;
  height: 100%;
  background: #231F20;
  display: block;
}

/* ===== Loading Bar ===== */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;                      /* JS will show progress bar */
  z-index: 10;
  text-align: center;
}

/* ===== Progress Bar ===== */
#unity-progress-bar-empty {
  margin-left: auto;
  margin-right: auto;
  width: 141px;
  height: 18px;
  background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  background: url('progress-bar-full-dark.png') no-repeat center;
}

/* ===== Unity Logo (optional) ===== */
#unity-logo {
  width: 154px;
  height: 154px;
  margin: 0 auto;
  background: url('unity-logo-dark.png') no-repeat center;
}

/* ===== Warning Banner ===== */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
  z-index: 20;
}