html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#unity-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Usa 100vh per forzare l'altezza basata sul viewport */
}

#unity-canvas {
  width: 100%;
  height: 100vh; /* Assicurati che anche il canvas occupi l'intera altezza del viewport */
  background: #FFFFFF;
  display: block;
}

#loading-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/Build/The Last Dwarfs.jpg') center / cover no-repeat;
  z-index: 1; /* Sfondo con z-index più basso */
}
  
/* Barra di caricamento di Unity */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  display: block;
  z-index: 10;
}

/* Contenitore della barra di caricamento */
#unity-progress-bar-wrapper {
  position: relative;
  width: 274px;
  height: 36px;
  overflow: hidden;
  border-radius: 18px;
}

/* Immagine di sfondo della barra vuota */
#unity-progress-bar-empty {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('emptybar.png') no-repeat center;
  background-size: cover;
  z-index: 2;
}

/* Barra piena che rappresenta il caricamento */
#unity-progress-bar-full {
  position: absolute;
  width: 0%; /* Questo valore verrà aggiornato dinamicamente */
  height: 100%;
  top: 0;
  left: 0;
  background: url('fullbar.png') no-repeat center;
  background-size: cover;
  transition: width 0.05s;
  z-index: 1;
}

/* Testo di caricamento */
#loading-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
  font-family: 'Luckiest Guy', sans-serif;
  text-shadow: -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000;
}

#loading-message {
  position: absolute;
  width: 100%;
  max-width: 80%;
  text-align: center;
  font-size: 3.5vw; /* Dimensione adattiva in base alla larghezza della viewport */
  color: #ffffff;
  font-weight: bold;
  font-family: 'Luckiest Guy', sans-serif;
  text-shadow: -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.4;
  z-index: 10;
  padding: 0 20px;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  #loading-message {
    font-size: 4.5vw; /* Maggiorazione per schermi piccoli */
    top: 55%;
  }
}

/* Media query per schermi più grandi */
@media (min-width: 1024px) {
  #loading-message {
    font-size: 2.5vw; /* Ridotto su schermi grandi per mantenere proporzioni */
    top: 55%;
  }
}

/* Schermata di transizione */
#transition-screen {
  display: none; /* Nasconde la schermata di transizione inizialmente */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* Sfondo nero */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Sopra tutti gli altri elementi */
}

#transition-screen img {
  max-width: 60%;
  max-height: 60%;
  animation: zoomIn 2s ease-out forwards; /* Definisce l'animazione */
}

/* Definizione dell'animazione zoomIn */
@keyframes zoomIn {
  0% {
    transform: scale(0.5); /* Inizia al 50% della dimensione */
    opacity: 0; /* Invisibile all'inizio */
  }
  100% {
    transform: scale(1); /* Raggiunge la dimensione originale */
    opacity: 1; /* Completa visibilità */
  }
}

/* Stili di base per il modale */
#telegramAlert {
  display: none; /* Nascondi il modale per default */
  flex-direction: column; /* Imposta la direzione del flex a colonna */
  justify-content: center; /* Centra il contenuto orizzontalmente */
  align-items: center; /* Allinea verticalmente il contenuto al centro */
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 500px;
  background-color: black;
  border-radius: 10px;
  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

#telegramAlert p {
  font-size: 3.0vw;
  font-family: 'Luckiest Guy', cursive;
  line-height: 1.2;
  margin: 0 0 20px 0; /* Aggiunge un margine sotto il paragrafo per separare dal bottone */
  white-space: normal; /* Permette al testo di andare a capo normalmente */
}

#telegramAlert .no-wrap {
  white-space: nowrap; /* Impedisce che il testo vada a capo */
}

.button-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

#closeAlertButton {
  padding: 6px 12px; /* Riduci padding */
  font-size: 2vh; /* Riduci dimensione del testo */
  background-color: #0088cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Luckiest Guy', cursive;
}

.game-container.blurred {
  filter: blur(8px);
}

@media (min-width: 768px) {
  #telegramAlert p {
    font-size: 2.5vw; /* Riduci la dimensione del testo per schermi grandi */
  }
}

@media (max-width: 480px) {
  #telegramAlert p {
    font-size: 4.0vw; /* Aumenta la dimensione del testo per schermi molto piccoli */
  }
}

/* Avviso di errore o warning */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}

/* Aggiungi uno stile per prevenire selezione del testo su dispositivi touch */
canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}