html, body {
  margin: 0;
  height: 100%;
  background: #0b0b0b;
  color-scheme: light only;
}

#unity-container {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
}

/* Keep strict 9:16; fill height; pillarbox on wide screens */
#unity-canvas {
  display: block;
  aspect-ratio: 9 / 16;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  outline: none;
  /* For pixel art, uncomment: */
  /* image-rendering: pixelated; */
}

@supports (height: 100svh) {
  #unity-canvas {
    width: min(100vw, calc(100svh * 9 / 16));
    height: min(100svh, calc(100vw * 16 / 9));
  }
}

@supports (height: 100dvh) {
  #unity-canvas {
    width: min(100vw, calc(100dvh * 9 / 16));
    height: 100dvh;
  }
}

/* Loading bar overlay */
#unity-loading-bar {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  /* Stack loading image and bar vertically */
  flex-direction: column;
  gap: 16px;
}

#unity-logo { display: none; }

#unity-progress-bar-empty {
  width: min(70%, 320px);
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background: #ffffff;
  transition: width 0.2s ease;
}

/* Explicitly fix colors in dark mode user agents */
@media (prefers-color-scheme: dark) {
  #unity-progress-bar-empty { background: rgba(255, 255, 255, 0.25); }
  #unity-progress-bar-full { background: #ffffff; }
}

/* Fullscreen fixes: ensure the container truly covers the visual viewport on mobile */
:fullscreen #unity-canvas,
::-webkit-full-screen #unity-canvas {
  height: 100vh;
  width: min(100vw, calc(100vh * 9 / 16));
}

#unity-container:fullscreen,
#unity-container:-webkit-full-screen {
  align-items: center;
  justify-items: center;
}

@supports (height: 100svh) {
  :fullscreen #unity-canvas,
  :-webkit-full-screen #unity-canvas {
    height: 100svh;
    width: min(100vw, calc(100svh * 9 / 16));
  }
}

@supports (height: 100dvh) {
  :fullscreen #unity-canvas,
  :-webkit-full-screen #unity-canvas {
    height: 100dvh;
    width: min(100vw, calc(100dvh * 9 / 16));
  }
}

/* Prevent UA darkening/color filter in fullscreen overlays */
:fullscreen body,
:-webkit-full-screen body {
  background: #0b0b0b !important;
}

#unity-loading {
  display: block;
  width: min(70vw, 360px);
  height: auto;
  max-width: 100%;
  /* Ensure it stays crisp and centered above the bar */
  object-fit: contain;
}

.background-enabled {
  background-image: url(Background_LOADING_square.jpg);
  background-position: center;
}