/* ============================
   🔲 Fundo do container
   ============================ */

#unity-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background: black;
  overflow: hidden;
}

/* BG por trás do canvas */
#unity-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('loading_bg.png') center center no-repeat;
  background-size: cover;
  z-index: 1;
}

/* ============================
   🎮 Canvas Unity
   ============================ */
#unity-canvas {
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Desktop com 9:18 */
@media (min-width: 800px) {
  #unity-canvas {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 18;
  }
}

/* ============================
   🔄 Loading centralizado
   ============================ */
#unity-loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  z-index: 10;
}

/* 🔥 MOBILE — sobe o loading para centralizar visualmente */
@media (max-width: 799px) {
  #unity-loading-bar {
    transform: translate(-50%, -58%);
  }
}

/* ============================
   ✨ Escala dinâmica
   ============================ */

#loading-scale {
  transform-origin: top center;
  width: 330px;               /* largura base para centralizar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                   /* espaçamento perfeito */
}

/* Mobile → reduz */
@media (max-width: 799px) {
  #loading-scale {
    transform: scale(0.62);
  }
}

/* Tablets */
@media (min-width: 800px) and (max-width: 1199px) {
  #loading-scale {
    transform: scale(0.85);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  #loading-scale {
    transform: scale(1);
  }
}

/* ============================
   🖼️ Elementos do loading
   ============================ */

/* LOGO DO GALO */
#unity-logo {
  width: 260px;
  height: 200px;
  background: url('loading_logo.png') center/contain no-repeat;
}

/* ACREDITA QUE É GALO */
#unity-text {
  width: 330px; /* alinhado pelo maior elemento */
  height: 130px;
  background: url('loading_text.png') center/contain no-repeat;
}

/* BARRA */
#unity-progress-bar-empty {
  width: 260px;
  height: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow: hidden;
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  background: black;
}

/* SUBTITULO */
#unity-subtitle {
  width: 280px;
  height: 60px;
  background: url('loading_subtitle.png') center/contain no-repeat;
}

/* ============================
   ⚠️ Warning messages
   ============================ */

#unity-warning {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
  z-index: 50;
}