/* IL VELO DELL'ATTESA DI CONTROLLO LIVE (Angelo 09/08 16:42 · **rifatto il 16/08 00:51**).
 *
 * 🔴 LA BARRA È UNA RICHIESTA DEL CLIENTE, E RIBALTA UNA SCELTA NOSTRA. Fino a stanotte qui
 * c'era un girotondo, con questa ragione scritta accanto: *«una barra al 70% è un conto alla
 * rovescia scritto in un altro alfabeto, e dice al giocatore quanto manca — cioè esattamente
 * quello che la protezione non deve regalare»*. Angelo il 16/08 alle 00:51-00:53 ha chiesto il
 * contrario, con un'immagine (`inbox/proof/16-08_ANGELO_barra-attesa-8-secondi.png`):
 *
 *     *«mi devi mettere un LOADING DI 8 SECONDI prima che vengano accettate; il loading deve
 *       essere visibile ma NON deve mostrare i secondi; qualcosa che dia l'impressione che stai
 *       aspettando»*
 *
 * ⇒ La scelta è sua e vince: la barra si vede e si riempie. Quello che resta della ragione
 *   vecchia è **la mezza misura che si poteva tenere senza disobbedire**: i segmenti sono
 *   **dodici** su otto secondi, cioè uno ogni 0,67 s — si vede avanzare, e non si conta.
 *   Con otto segmenti su otto secondi il giocatore avrebbe avuto un orologio in mano.
 * 📌 Nessuna cifra da nessuna parte: quello Angelo l'ha ripetuto, ed è anche la riga vecchia.
 *
 * ⏱ LA DURATA NON STA QUI: la scrive il JS in `--tb-attesa-durata` leggendo `data-tb-hold`, che
 * arriva dal motore (`bets_svc.attesa_live`, configurabile per skin). Se un giorno la skin la
 * mette a 12, la barra dura 12 — senza toccare questo foglio.
 *
 * 📌 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);
  /* di scorta: se il JS non riuscisse a scriverla, la barra si riempie lo stesso in 8 s */
  --tb-attesa-durata: 8s;
  --tb-attesa-segmenti: 12;
}

.tb-attesa-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  /* fondo scuro, come nell'immagine che ha mandato */
  background: rgba(18, 18, 18, .94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* 🗣 LA FRASE SOPRA LA BARRA (Angelo, 16/08 14:50 Roma): *«quando si gioca un coupon live, sopra
   il downloading inserisci questa frase, LIVE COUPON IN ATTESA»*.
   ⚠️ Le maiuscole stanno QUI e non nella stringa, ed è una scelta con una ragione: quel testo è
   un msgid che deve andare in nove cataloghi, e un msgid urlato non si sa tradurre — da
   «LIVE COUPON IN ATTESA» chi traduce non può ricavare il caso normale, mentre il contrario è
   gratis. Sullo schermo la frase resta la sua, parola per parola.
   📌 `letter-spacing` perché in maiuscolo senza respiro le parole si impastano; niente cifre e
   niente conto alla rovescia, che è la riga che questa cura non tocca. */
.tb-attesa-testo {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  /* la barra è larga 232px: il testo non deve allargare il riquadro oltre la sua misura */
  max-width: 232px;
}

/* 🖼 FEDELE ALL'IMMAGINE DI ANGELO: **una barra sola** — pista scura arrotondata con un filo di
   bordo — e dentro il verde che avanza con le sue striature. Non dodici quadratini staccati:
   il primo tentativo li aveva col vuoto in mezzo e la resa era un'altra cosa (confrontata con
   `16-08_ANGELO_barra-attesa-8-secondi.png`, che è come lui la vuole).
   ⚖️ I segmenti restano dodici, ma **attaccati**: la striatura è quella che si vede nella sua
   immagine, e il conto alla rovescia resta illeggibile (0,67 s l'uno). */
.tb-attesa-barra {
  display: flex;
  gap: 0;
  width: 232px;
  height: 18px;
  padding: 2px;
  border-radius: 6px;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .22);
  overflow: hidden;
}

/* Ogni segmento parte spento e si accende **verde**, uno dopo l'altro: l'ultimo finisce quando
   finisce l'attesa. `forwards` è la ragione per cui la barra resta piena invece di ricominciare:
   un ciclo che riparte direbbe «abbiamo finito e ricominciato», che non è quello che succede. */
.tb-attesa-barra i {
  flex: 1 1 auto;
  /* la riga scura fra un segmento e l'altro: è la striatura dell'immagine, non un vuoto */
  border-right: 1px solid rgba(0, 0, 0, .55);
  background: transparent;
  animation: tb-attesa-accendi calc(var(--tb-attesa-durata) / var(--tb-attesa-segmenti))
             linear forwards;
}

.tb-attesa-barra i:last-child { border-right: 0; }

@keyframes tb-attesa-accendi {
  to { background: linear-gradient(180deg, #5df57f 0%, #23c14c 100%); }
}

/* Chi ha chiesto meno animazioni non resta davanti a un riquadro morto, e nemmeno davanti a una
   barra che corre: i segmenti pulsano piano, tutti insieme. L'attesa dura uguale — cambia solo
   come si racconta. */
@media (prefers-reduced-motion: reduce) {
  .tb-attesa-barra i {
    animation: tb-attesa-pulsa 1.6s ease-in-out infinite;
  }
  @keyframes tb-attesa-pulsa {
    0%, 100% { background: rgba(255, 255, 255, .10); }
    50%      { background: rgba(61, 220, 99, .45); }
  }
}