html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: arial, sans-serif;
  color: #fff;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Le container force un ratio 16:9 et se contraint a ne jamais depasser la viewport.
   width/height: min() clamp a la plus petite des deux contraintes pour eviter
   depassement. aspect-ratio fait respecter le 16:9 au container. */
#unity-container {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

#unity-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: #231F20;
}

/* Fullscreen natif: quand le container passe en fullscreen (via requestFullscreen),
   il remplit l'ecran mais garde le 16:9 avec letterbox/pillarbox via un fond noir
   et un inner wrapper. L'approche: en fullscreen, le container occupe 100vw x 100vh,
   mais on re-applique le lock 16:9 sur le canvas directement. */
#unity-container:fullscreen,
#unity-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#unity-container:fullscreen #unity-canvas,
#unity-container:-webkit-full-screen #unity-canvas {
  width: min(100vw, calc(100vh * 16 / 9)) !important;
  height: min(100vh, calc(100vw * 9 / 16)) !important;
  aspect-ratio: 16 / 9;
}

/* Loading bar centree sur le canvas */
#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;
  margin: 0 auto;
}
#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;
}

/* Warning banner au-dessus du canvas */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, 0);
  background: white;
  color: #000;
  padding: 10px;
  display: none;
}

/* Footer (fullscreen button) positionne en bas a droite du canvas */
#unity-footer {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
#unity-fullscreen-button {
  width: 38px;
  height: 38px;
  background: url('fullscreen-button.png') no-repeat center;
  cursor: pointer;
}
#unity-build-title {
  display: none; /* titre duplique masque -- le <title> du head suffit */
}