/* IL VELO DELL'ATTESA DI CONTROLLO LIVE (Angelo 09/08 16:42).
 *
 * 🔴 DEVE SEMBRARE UN CARICAMENTO, NON UN'ATTESA MISURATA. Niente cifre, niente barra che
 * avanza: una barra al 70% è un conto alla rovescia scritto in un altro alfabeto, e dice al
 * giocatore «mancano tre secondi», cioè esattamente quello che la protezione non deve regalare.
 * Il girotondo qui sotto ha un ciclo di 0,9s che non c'entra niente coi secondi dell'attesa: chi
 * lo guarda non può dedurne quanto manca, nemmeno contando i giri.
 *
 * 📌 In un foglio suo e non dentro `casa.css`: quel file è di 32 KB ed è aperto da altri, e un
 * pezzo nuovo dentro un file grande è un pezzo che nessuno ritrova. (Regola Dav: gli stili
 * stanno nei FOGLI, mai inline.)
 */

.tb-attesa {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Il velo intercetta i clic: durante l'attesa la pagina non si tocca. Non è decorazione —
     è il modo in cui un secondo clic non diventa un secondo coupon nella testa del giocatore. */
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.tb-attesa-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background: rgba(20, 20, 20, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.tb-attesa-giro {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, .22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tb-attesa-gira .9s linear infinite;
}

@keyframes tb-attesa-gira {
  to { transform: rotate(360deg); }
}

/* Chi ha chiesto meno animazioni non resta davanti a un riquadro morto: il giro si ferma e
   resta un cerchio che pulsa piano. L'attesa continua uguale — cambia solo come si racconta. */
@media (prefers-reduced-motion: reduce) {
  .tb-attesa-giro {
    animation: tb-attesa-pulsa 1.6s ease-in-out infinite;
    border-top-color: rgba(255, 255, 255, .22);
  }
  @keyframes tb-attesa-pulsa {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
  }
}