/* Il caricamento mostrato finché Flutter non disegna il primo fotogramma
   (web/flutter_bootstrap.js lo toglie). */
html, body {
  margin: 0;
  height: 100%;
  background: #F3EDDE; /* la carta della grafica di partenza (Carta chiaro) */
  /* niente «tira per aggiornare» né rimbalzi del browser sul telefono */
  overscroll-behavior: none;
}
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
#loading img {
  border-radius: 22px;
}
#loading .bar {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: #E3EAF6;
  overflow: hidden;
}
#loading .bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: #2372F5;
  animation: ottomino-loading 1.1s ease-in-out infinite;
}
@keyframes ottomino-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  #loading .bar span { animation: none; width: 100%; }
}

/* «Il gioco non parte?» (web/flutter_bootstrap.js): dopo 25 secondi, o
   subito se il caricamento fallisce; allora la barra si ferma. */
#loading .stuck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1E2433;
  text-align: center;
}
#loading .stuck p {
  margin: 0;
}
#loading .stuck button {
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  background: #2372F5;
  border: 0;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
}
#loading .stuck a {
  color: #2372F5;
}
#loading.failed .bar {
  display: none;
}