/* ==========================================================================
   unity-screen.css — structure de l'écran Unity (voir js/unity-screen.js)
   Uniquement la mise en place et les états ; l'habillage (couleurs,
   boutons, cadre) est propre à chaque page projet.
   ========================================================================== */

.unity-screen {
  --progress: 0;

  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.unity-screen__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  outline: none;
  transition: opacity 0.5s ease;
}

/* Aperçu + bouton, puis chargement, puis erreur */
.unity-screen__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.unity-screen__progress,
.unity-screen__error,
.unity-screen__fullscreen {
  display: none;
}

.unity-screen__bar {
  width: min(22rem, 80%);
  overflow: hidden;
}

.unity-screen__bar span {
  display: block;
  height: 100%;
  width: calc(var(--progress) * 100%);
  transition: width 0.3s ease;
}

/* --- États -------------------------------------------------------------- */

.unity-screen[data-state="loading"] .unity-screen__launch,
.unity-screen[data-state="loading"] .unity-screen__hint,
.unity-screen[data-state="error"] .unity-screen__launch,
.unity-screen[data-state="error"] .unity-screen__hint {
  display: none;
}

.unity-screen[data-state="loading"] .unity-screen__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.unity-screen[data-state="error"] .unity-screen__error {
  display: block;
}

.unity-screen[data-state="running"] .unity-screen__canvas {
  opacity: 1;
}

.unity-screen[data-state="running"] .unity-screen__overlay {
  opacity: 0;
  visibility: hidden;
}

.unity-screen[data-state="running"] .unity-screen__fullscreen {
  display: grid;
  place-items: center;
}

.unity-screen__fullscreen {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
}