/* Il VS a inizio partita, il cartello di fine e la copertina all'apertura. */

/* --- Il VS e il cartello di fine (ingresso.js) ------------------------------ */

/* Come in Clash Royale: l'avversario in alto sulla fascia rossa e tu in basso
   sulla blu, come state al tavolo, e il VS in mezzo. Le fasce entrano dai
   lati, il VS cade dall'alto, e quando tocca trema tutto. */

/* Le scritte grandi, i due VS e il titolo del cartello, sono bianche col
   contorno nero, piu' spesso sotto, dove fa da ombra; i nomi hanno lo stesso
   contorno, piu' sottile, e il titolo della copertina lo stesso, sotto l'oro.
   Il contorno sono copie della scritta spostate su una capsula: la meta' di
   sopra di un cerchio intorno alla lettera, quella di sotto piu' in basso, i
   fianchi in mezzo. -webkit-text-stroke, a questi spessori, fa le punte sugli
   spigoli della V. Tutto in em, cosi' il contorno cresce con la scritta. */
.ingresso-vs, .uscita-vs, #fine-testo, #copertina-titolo span::before, #sabato-oggi-titolo span::before,
.evento-vs-titolo span::before, .evento-nome span::before, #manutenzione-titolo span::before, #manutenzione-tempo {
    --contorno: #000000;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
        -0.055em 0 0 var(--contorno), -0.051em -0.021em 0 var(--contorno),
        -0.039em -0.039em 0 var(--contorno), -0.021em -0.051em 0 var(--contorno),
        0 -0.055em 0 var(--contorno), 0.021em -0.051em 0 var(--contorno),
        0.039em -0.039em 0 var(--contorno), 0.051em -0.021em 0 var(--contorno),
        0.055em 0 0 var(--contorno), 0.055em 0.08em 0 var(--contorno),
        0.051em 0.101em 0 var(--contorno), 0.039em 0.119em 0 var(--contorno),
        0.021em 0.131em 0 var(--contorno), 0 0.135em 0 var(--contorno),
        -0.021em 0.131em 0 var(--contorno), -0.039em 0.119em 0 var(--contorno),
        -0.051em 0.101em 0 var(--contorno), -0.055em 0.08em 0 var(--contorno),
        0.055em 0.04em 0 var(--contorno), -0.055em 0.04em 0 var(--contorno),
        0 0.16em 0.2em rgba(0, 0, 0, 0.5);
}

/* il margine dentro tiene il contorno al di qua del taglio dei nomi lunghi */
.ingresso-nome, .uscita-nome {
    --contorno: #000000;
    box-sizing: border-box;
    padding: 0 0.1em;
    text-shadow:
        -0.06em 0 0 var(--contorno), -0.042em -0.042em 0 var(--contorno),
        0 -0.06em 0 var(--contorno), 0.042em -0.042em 0 var(--contorno),
        0.06em 0 0 var(--contorno), 0.06em 0.05em 0 var(--contorno),
        0.042em 0.092em 0 var(--contorno), 0 0.11em 0 var(--contorno),
        -0.042em 0.092em 0 var(--contorno), -0.06em 0.05em 0 var(--contorno),
        0.06em 0.025em 0 var(--contorno), -0.06em 0.025em 0 var(--contorno),
        0 0.1em 0.14em rgba(0, 0, 0, 0.45);
}

#ingresso {
    padding: 0;
    overflow: hidden;
    background-image: radial-gradient(ellipse at 50% 50%, #1d3c31 0%, #0e1e19 62%, #07110d 100%);
    transition: opacity 0.4s ease;
}

#ingresso.esce {
    opacity: 0;
}

.ingresso-dentro {
    width: 100%;
    animation: scossa 0.32s 0.72s ease both;
}

.ingresso-lato {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    padding: 28px 24px;
    text-align: left;
    animation: vs-da-sinistra 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.ingresso-lato.suo {
    flex-direction: row-reverse;
    text-align: right;
    animation-name: vs-da-destra;
}

/* la fascia, storta come quelle di Clash Royale e piu' larga dello schermo,
   perche' storta non lasci scoperti gli angoli */
.ingresso-lato::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -60px;
    right: -60px;
    z-index: -1;
    transform: skewY(-5deg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(90deg, #2f6fed 0%, #1f4fbf 55%, #163a8e 100%);
}

.ingresso-lato.suo::before {
    background-image: linear-gradient(270deg, #e0404c 0%, #b0242f 55%, #7e1621 100%);
}

.ingresso-lato .avatar {
    margin-right: 18px;
    font-size: 30px;
}

.ingresso-lato.suo .avatar {
    margin: 0 0 0 18px;
}

.ingresso-chi {
    flex: 1 1 auto;
    min-width: 0;
}

.ingresso-nome {
    overflow: hidden;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ingresso-maglia {
    margin-top: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #ffe08a;
}

.ingresso-maglia .maglia {
    margin-right: 6px;
}

.ingresso-riga {
    margin-top: 4px;
    font-size: 16px;
    opacity: 0.9;
}

/* il sabato, per quanto si moltiplica la vittoria a ognuno dei due: il
   distintivo grande, che si vede da lontano */
.ingresso-palio {
    display: flex;
    align-items: center;
    margin-top: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #ffd2b0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: medaglia-arriva 0.5s 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.ingresso-lato.suo .ingresso-palio {
    justify-content: flex-end;
}

.ingresso-palio .per-distintivo {
    margin-left: 8px;
    padding: 2px 12px 2px 7px;
    font-size: 24px;
    letter-spacing: 0;
    text-transform: none;
}

.ingresso-medaglie {
    margin-top: 8px;
}

.ingresso-medaglie .medaglia-svg {
    margin-right: 6px;
    animation: medaglia-arriva 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.ingresso-lato.suo .ingresso-medaglie .medaglia-svg {
    margin: 0 0 0 6px;
}

.ingresso-vs {
    position: relative;
    z-index: 1;
    margin: -10px 0;
    font-size: 78px;
    font-style: italic;
    line-height: 1;
    animation: vs-cade 0.4s 0.36s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

/* in orizzontale sul telefono le due fasce e il VS non ci stanno */
@media (max-height: 520px) {
    .ingresso-lato {
        padding: 14px 24px;
    }

    .ingresso-lato .avatar {
        font-size: 20px;
    }

    .ingresso-nome {
        font-size: 24px;
    }

    .ingresso-vs {
        font-size: 52px;
    }
}

/* sull'iPad c'e' posto, e il VS deve riempirlo */
@media (min-width: 700px) and (min-height: 700px) {
    .ingresso-lato {
        padding: 44px 48px;
    }

    .ingresso-lato .avatar {
        font-size: 44px;
    }

    .ingresso-nome {
        font-size: 46px;
    }

    .ingresso-maglia {
        font-size: 18px;
    }

    .ingresso-riga {
        font-size: 21px;
    }

    .ingresso-medaglie svg {
        width: 50px;
        height: 50px;
    }

    .ingresso-vs {
        margin: -16px 0;
        font-size: 124px;
    }
}

@keyframes vs-da-sinistra {
    0% { opacity: 0; transform: translateX(-110%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes vs-da-destra {
    0% { opacity: 0; transform: translateX(110%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes vs-cade {
    0% { opacity: 0; transform: scale(3) rotate(-10deg); }
    70% { opacity: 1; transform: scale(0.92) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Il VS dell'evento (ingresso.js): nel giorno di un evento il fondo verde
   lascia il posto a quello dell'evento, coi raggi che girano e l'orlo
   acceso, e sopra le fasce arrivano il segno, il nome timbrato e la regola,
   un distintivo alla volta. I colori dei raggi, dell'orlo e del nome li
   mette la classe dell'evento: --raggi, --orlo, --titolo. */
#ingresso.evento::before {
    content: '';
    position: absolute;
    top: 22%;
    left: 50%;
    z-index: -1;
    width: 1100px;
    height: 1100px;
    margin: -550px 0 0 -550px;
    background-image: repeating-conic-gradient(var(--raggi) 0deg 9deg, transparent 9deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 25%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, #000 25%, transparent 100%);
    animation: premio-gira 20s linear infinite;
    pointer-events: none;
}

#ingresso.evento::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    box-shadow: inset 0 0 90px 22px var(--orlo);
    pointer-events: none;
}

.evento-vs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    margin-bottom: -4px;
}

/* flex, perche' il segno non si porti dietro lo spazio sotto la riga */
.evento-vs-segno {
    position: relative;
    z-index: 0;
    display: flex;
}

.evento-vs-titolo {
    margin-top: 2px;
    font-size: 44px;
    font-weight: bold;
    line-height: 1.05;
    white-space: nowrap;
    animation: evento-timbra 0.4s 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* il colore ritagliato sulla scritta, il contorno nella copia dietro */
.evento-vs-titolo span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: var(--titolo);
    -webkit-background-clip: text;
    background-clip: text;
}

.evento-vs-titolo span::before {
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #000000;
}

@keyframes evento-timbra {
    0% { opacity: 0; transform: scale(2.3); }
    100% { opacity: 1; transform: scale(1); }
}

.evento-vs-regole {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.evento-vs-regole > .per-distintivo {
    margin: 0 4px;
    font-size: 18px;
    animation: medaglia-arriva 0.45s 0.85s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.evento-vs-regole > :nth-child(2) { animation-delay: 0.97s; }
.evento-vs-regole > :nth-child(3) { animation-delay: 1.09s; }
.evento-vs-regole > :nth-child(4) { animation-delay: 1.21s; }

/* il ×5, l'ultimo, arriva e poi pulsa come dappertutto */
.evento-vs-regole > .per-5 {
    animation: medaglia-arriva 0.45s 1.21s cubic-bezier(0.2, 1.4, 0.4, 1) both, brace 1.1s 1.66s ease-in-out infinite alternate;
}

/* Il sabato: la brace della sua schermata, i raggi arancio, l'orlo che arde
   e le fasce col riflesso del fuoco; la fiamma si accende dal basso e poi
   respira */
#ingresso.sabato {
    --bg: #2b0d06;
    --raggi: rgba(255, 160, 70, 0.17);
    --orlo: rgba(255, 110, 20, 0.42);
    --titolo: linear-gradient(#fff3c4 0%, #ffd060 40%, #ff9a2e 75%, #e2561c 100%);
    background-image: radial-gradient(ellipse at 50% 36%, #6a2309 0%, #2b0d06 55%, #120402 100%);
}

#ingresso.sabato::after {
    animation: sabato-arde 1.3s ease-in-out infinite alternate;
}

@keyframes sabato-arde {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

#ingresso.sabato .ingresso-lato::before {
    box-shadow: 0 0 0 2px rgba(255, 180, 90, 0.5), 0 0 26px rgba(255, 120, 40, 0.5), 0 10px 28px rgba(0, 0, 0, 0.5);
}

#ingresso.sabato .evento-vs-segno {
    transform-origin: 50% 100%;
    animation: sabato-accende 0.5s 0.15s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

#ingresso.sabato .evento-vs-segno::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -90%;
    z-index: -1;
    width: 280%;
    height: 180%;
    background-image: radial-gradient(circle, rgba(255, 170, 60, 0.55) 0%, rgba(255, 110, 30, 0.18) 40%, rgba(255, 110, 30, 0) 68%);
}

#ingresso.sabato .evento-vs-segno .fiamma {
    display: block;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
    animation: sabato-fiamma 1.7s 0.7s ease-in-out infinite;
}

@keyframes sabato-accende {
    0% { opacity: 0; transform: scale(0.3, 0.1); }
    70% { opacity: 1; transform: scale(1.1, 1.2); }
    100% { opacity: 1; transform: none; }
}

/* sui telefoni bassi la testa si stringe e perde prima il segno, poi la
   regola; in orizzontale resta solo il fondo dell'evento, perche' le fasce
   col palio riempiono gia' lo schermo */
@media (max-height: 720px) {
    #ingresso.sabato .evento-vs-segno .fiamma {
        width: 48px;
        height: 64px;
    }

    .evento-vs-titolo {
        font-size: 34px;
    }
}

@media (max-height: 600px) {
    .evento-vs-segno {
        display: none;
    }
}

@media (max-height: 560px) {
    .evento-vs-regole {
        display: none;
    }

    .evento-vs-titolo {
        font-size: 28px;
    }
}

@media (max-height: 520px) {
    .evento-vs {
        display: none;
    }
}

@media (min-width: 700px) and (min-height: 700px) {
    #ingresso.sabato .evento-vs-segno .fiamma {
        width: 96px;
        height: 128px;
    }

    .evento-vs-titolo {
        font-size: 60px;
    }

    .evento-vs-regole > .per-distintivo {
        font-size: 24px;
    }
}

/* Il cartello di fine: le due carte del VS affiancate, tu a sinistra. Chi
   vince si alza in oro, chi perde si spegne, ognuna porta il bollino di
   quanto vale la partita, e sotto la tua carta i punti contano fino al
   totale nuovo. Senza carte il cartello si centra dal titolo, come prima. */
#fine-volti {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    margin-bottom: 16px;
}

#fine:not(.con-volti) #fine-testo {
    margin-top: auto;
}

#fine.con-volti #fine-testo {
    animation: cer-timbro 0.5s 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.uscita-volto {
    position: relative;
    z-index: 0;
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: vs-da-sinistra 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.uscita-volto.suo {
    animation-name: vs-da-destra;
}

.uscita-volto .avatar {
    font-size: 21px;
}

/* l'alone dietro la carta di chi vince, quello della maglia nella cerimonia */
.uscita-volto.vince::before {
    content: '';
    position: absolute;
    top: -24px;
    left: 50%;
    width: 140px;
    height: 140px;
    margin-left: -70px;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(224, 180, 76, 0.55) 0%, rgba(224, 180, 76, 0) 64%);
    animation: cer-alone 2.4s ease-in-out infinite;
}

.uscita-volto.vince .avatar {
    box-shadow:
        0 0 0 3px var(--oro),
        0 0 24px rgba(224, 180, 76, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.45);
    animation: uscita-vince 0.5s 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.uscita-volto.perde .avatar,
.uscita-volto.perde .uscita-nome {
    animation: uscita-perde 0.4s 0.4s ease both;
}

.uscita-nome {
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    font-size: 17px;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.uscita-volto.mio .uscita-nome {
    color: #9dbcff;
}

.uscita-volto.suo .uscita-nome {
    color: #ff9ea6;
}

.uscita-volto.vince .uscita-nome {
    color: var(--oro);
}

.uscita-vs {
    flex: 0 0 auto;
    margin: 30px 8px 0;
    font-size: 26px;
    font-style: italic;
    opacity: 0.85;
}

.uscita-punti {
    margin-top: 6px;
    white-space: nowrap;
}

.uscita-totale {
    display: inline-block;
    font-size: 15px;
    opacity: 0.85;
}

.uscita-totale.arrivato {
    animation: batte 0.45s ease;
}

/* il moltiplicatore del sabato cade col suo distintivo, e il totale va sotto */
.uscita-bonus {
    font-size: 15px;
    animation: cer-timbro 0.45s 0.95s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.uscita-punti.con-bonus .uscita-totale {
    display: block;
    margin-top: 4px;
    text-align: center;
}

/* Il titolo sta sul nastro del GUI Pro: verde per chi vince, rosso per chi
   perde, grigio per la patta. Il nastro si allunga dalla colonna di mezzo,
   come i nove pezzi di Unity: le due meta' restano intere ai lati del titolo.
   Nella patta le due carte si spengono, perche' nessuno ha vinto. */
#fine.vittoria #fine-testo,
#fine.sconfitta #fine-testo,
#fine.patta #fine-testo {
    box-sizing: border-box;
    max-width: 100%;
    height: 64px;
    margin-bottom: 14px;
    padding: 0 4px;
    border-style: solid;
    border-width: 0 58px;
    border-image-slice: 0 128 fill;
    border-image-width: 0 58px;
    border-image-repeat: stretch;
    font-size: 38px;
    line-height: 54px;
    white-space: nowrap;
    /* in due il titolo porta il nome, che puo' essere lungo */
    overflow: hidden;
    text-overflow: ellipsis;
    animation: nastro-apre 0.45s 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

#fine.vittoria #fine-testo {
    border-image-source: url('/app/immagini/nastro-vittoria.png');
}

#fine.sconfitta #fine-testo {
    border-image-source: url('/app/immagini/nastro-sconfitta.png');
}

#fine.patta #fine-testo {
    border-image-source: url('/app/immagini/nastro-patta.png');
}

/* sui telefoni stretti «Has perdido» col nastro non ci starebbe */
@media (max-width: 360px) {
    #fine.vittoria #fine-testo,
    #fine.sconfitta #fine-testo,
    #fine.patta #fine-testo {
        font-size: 32px;
    }
}

@keyframes nastro-apre {
    0% { opacity: 0; transform: scaleX(0.2); }
    100% { opacity: 1; transform: scaleX(1); }
}

.uscita-volto.patta .avatar,
.uscita-volto.patta .uscita-nome {
    animation: patta-spenta 0.4s 0.4s ease both;
}

@keyframes patta-spenta {
    0% { opacity: 1; filter: none; }
    100% { opacity: 0.6; filter: grayscale(0.7); }
}

/* I bollini sulle due carte: quanto vale la partita a ciascuno, in oro chi
   prende, in rosso chi lascia e in grigio lo 0 della patta */
.uscita-bollino {
    position: absolute;
    top: -12px;
    left: calc(50% + 14px);
    z-index: 1;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background-image: radial-gradient(circle at 35% 30%, #ff7a63 0%, #c92a1a 75%);
    color: #ffffff;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transform: rotate(12deg);
    animation: cer-timbro 0.45s 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.uscita-bollino.su {
    background-image: radial-gradient(circle at 35% 30%, #ffe28f 0%, #d9a334 75%);
    color: #2a1d05;
}

.uscita-bollino.fermo {
    background-image: radial-gradient(circle at 35% 30%, #b9bec4 0%, #6f767e 75%);
    color: #ffffff;
}

/* Sotto il titolo del cartello, il Sabato di fuoco: i gradini e cosa vuol
   dire questa partita. Dal terzo gradino il cartello trema (partita.js). */
#fine-sabato {
    width: 100%;
    max-width: 300px;
    margin: -6px 0 18px;
}

#fine-gradini .gradini {
    margin: 0 auto;
    font-size: 15px;
}

/* una cosa per riga (rigaFine in sabato.js), e una riga che va a capo non
   lascia sola l'ultima parola */
#fine.sopra #fine-sabato-testo {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffb27a;
    white-space: pre-line;
    text-wrap: balance;
}

/* Al posto delle righe, i distintivi (distintiviFine in sabato-vista.js): il
   moltiplicatore preso con quanto vale, la freccia e il prossimo spento; in
   cima la medaglia e la figura che aspettano in sala */
.fine-distintivi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 4px;
}

.fine-distintivi .per-distintivo.preso {
    padding: 3px 14px 3px 8px;
    font-size: 24px;
}

.per-punti {
    margin-left: 7px;
    font-size: 0.8em;
    opacity: 0.95;
}

.fine-freccia {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: #ffb27a;
    opacity: 0.8;
}

.fine-prossima {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.fine-prossima-di {
    margin-bottom: 2px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd2b0;
    opacity: 0.85;
}

/* il prossimo e' spento: si sa quanto vale, ma non e' ancora preso */
.fine-prossima .per-distintivo {
    font-size: 15px;
    opacity: 0.55;
    filter: saturate(0.5);
    box-shadow: none;
    animation: none;
}

.fine-premi {
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-top: 4px;
}

.fine-tessera {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: #ffe6c8;
}

.fine-figura svg {
    display: block;
    width: 42px;
    height: 42px;
}

.fine-sotto {
    width: 100%;
    font-size: 13px;
    color: #ffd2b0;
    opacity: 0.85;
}

.fine-pastiglia {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 178, 122, 0.55);
    font-size: 14px;
    color: #ffd2b0;
}

#fine.trema {
    animation: scossa 0.45s ease;
}

/* Gli scoppi del Sabato di fuoco (esplosione in animazioni.js): il bagliore
   coi colori del gradino, le scintille lunghe che partono dal centro e
   cadono un poco, e in quelli grandi l'onda che si allarga */
.scintilla {
    position: fixed;
    width: 16px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    transform-origin: 0 50%;
    pointer-events: none;
    animation: scintilla 1s cubic-bezier(0.12, 0.75, 0.3, 1) forwards;
}

@keyframes scintilla {
    0% { opacity: 1; transform: translateY(0) rotate(var(--angolo)) translateX(4px) scaleX(0.4); }
    25% { opacity: 1; transform: translateY(2px) rotate(var(--angolo)) translateX(calc(var(--via) * 0.6)) scaleX(1.5); }
    100% { opacity: 0; transform: translateY(24px) rotate(var(--angolo)) translateX(var(--via)) scaleX(0.3); }
}

.scoppio-bagliore {
    position: fixed;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    background-image: radial-gradient(circle, #ffffff 0%, var(--fuoco-su) 22%, var(--fuoco-mezzo) 42%, rgba(255, 120, 40, 0) 70%);
    pointer-events: none;
    animation: scoppio-bagliore 0.6s ease-out forwards;
}

@keyframes scoppio-bagliore {
    0% { opacity: 1; transform: scale(0.2); }
    100% { opacity: 0; transform: scale(2.2); }
}

.scoppio-onda {
    position: fixed;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    box-sizing: border-box;
    border: 3px solid rgba(255, 236, 170, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(255, 210, 90, 0.8);
    pointer-events: none;
    animation: scoppio-onda 0.9s ease-out forwards;
}

@keyframes scoppio-onda {
    0% { opacity: 1; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(5); }
}

@keyframes uscita-vince {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

@keyframes uscita-perde {
    0% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* i lampi dei fuochi sono tondi: quello del pilastro prende la forma della carta */
#festa .lampo {
    border-radius: 50%;
}

/* --- La copertina (copertina.js) ------------------------------------------ */

/* Aprendo il gioco da chiuso, prima del menu: il titolo d'oro e cinque
   personaggi a ventaglio sul panno del body, che e' quello del menu che viene
   dopo, tovaglia della festa compresa. Sta sopra a tutto e si vede anche
   mentre html.avvio nasconde la pagina. La misura della carta e' sua, dal
   lato corto dello schermo. Si muove col solo foglio di stile, come il VS,
   perche' parte prima del codice, e una cosa alla volta: il mazzetto sale
   chiuso, le carte si aprono dal mezzo, il titolo ci cade sopra. La riga
   sotto, che e' da tradurre, arriva quando il titolo e' caduto
   (html.titolo-caduto, dallo script in testa a index.html) e il codice c'e'.
   Se main.js non arriva se ne va da sola dopo sei secondi, oltre l'attesa
   piu' lunga di un telefono lento. */
#copertina {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    padding-bottom: 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: inherit;
    text-align: center;
    --cw: min(24.5vw, 15vh);
    --ch: calc(var(--cw) * 1.42);
    --raggio: calc(var(--cw) * 0.09);
    transition: opacity 0.6s ease;
    animation: copertina-via 0.3s 6s forwards;
}

html.avvio #copertina {
    visibility: visible;
}

html.senza-copertina #copertina {
    display: none;
}

/* mentre sfuma il menu si tocca gia' */
#copertina.esce {
    opacity: 0;
    pointer-events: none;
}

/* i semi delle carte, una volta sola per i due angoli */
#copertina .copertina-semi {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

#copertina-titolo {
    margin: 0 0 calc(var(--cw) * 0.5);
    font-size: calc(var(--cw) * 0.8);
    font-weight: bold;
    line-height: 1.06;
    white-space: nowrap;
    animation: vs-cade 0.45s 0.95s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

/* L'oro e' il fondo ritagliato sulla scritta, che e' trasparente. Il fondo
   si dipinge sotto le ombre della scritta, e il contorno, che e' fatto di
   ombre, lo coprirebbe: sta in una copia nera dietro */
#copertina-titolo span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(#fff6cf 0%, #f6d06a 38%, #e0a930 70%, #b9831c 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

#copertina-titolo span::before {
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #000000;
}

#copertina-carte {
    position: relative;
    width: 100%;
    height: calc(var(--ch) * 1.34);
    animation: copertina-mazzetto 0.3s ease-out both;
}

/* Il ventaglio: le carte partono chiuse dietro quella in mezzo, che sta sopra
   e non si muove, e si aprono ognuna al suo posto, prima le due accanto e poi
   le due esterne */
#copertina-carte .carta {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(var(--cw) * -0.5);
    transform-origin: 50% 115%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
    animation: copertina-ventaglio 0.5s 0.3s cubic-bezier(0.25, 1, 0.4, 1.08) both;
}

#copertina-carte .carta:nth-child(1) {
    z-index: 1;
    transform: translate(calc(var(--cw) * -0.92), calc(var(--cw) * 0.22)) rotate(-20deg);
    animation-delay: 0.5s;
}

#copertina-carte .carta:nth-child(2) {
    z-index: 2;
    transform: translate(calc(var(--cw) * -0.46), calc(var(--cw) * 0.11)) rotate(-10deg);
}

#copertina-carte .carta:nth-child(3) {
    z-index: 3;
    transform: translate(0, 0) rotate(0deg);
    animation: none;
}

#copertina-carte .carta:nth-child(4) {
    z-index: 2;
    transform: translate(calc(var(--cw) * 0.46), calc(var(--cw) * 0.11)) rotate(10deg);
}

#copertina-carte .carta:nth-child(5) {
    z-index: 1;
    transform: translate(calc(var(--cw) * 0.92), calc(var(--cw) * 0.22)) rotate(20deg);
    animation-delay: 0.5s;
}

#copertina-riga {
    margin: calc(var(--cw) * 0.12) 0 0;
    font-size: calc(var(--cw) * 0.2);
    opacity: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html.titolo-caduto:not(.avvio) #copertina-riga {
    animation: copertina-riga 0.35s ease-out forwards;
}

@keyframes copertina-mazzetto {
    from { opacity: 0; transform: translateY(calc(var(--cw) * 0.3)); }
}

@keyframes copertina-ventaglio {
    from { transform: translate(0, 0) rotate(0deg); }
}

@keyframes copertina-riga {
    from { opacity: 0; transform: translateY(0.4em); }
    to { opacity: 0.88; transform: none; }
}

@keyframes copertina-via {
    to { opacity: 0; visibility: hidden; }
}