/* Il viaggio: i pezzi comuni, il pulsante del menu, l'apertura, la scelta,
   il racconto e la fine. Le classi cominciano tutte con vg-. */

/* --- Il viaggio: i pezzi comuni (viaggio-pezzi.js) ------------------------ */

/* Il viaggio e' un pannello pieno come la sala, vuoto: ogni scena ci si
   disegna dentro da sola (viaggio-vista.js). La scena e' alta quanto lo
   schermo e, prima di dover scorrere, stringe la carta grande con adatta().
   Le classi cominciano con vg-: style.css ha regole globali su nomi comuni
   (.fumetto, .scelta, .oro), e un nome uguale se le porterebbe dietro. Le
   animazioni, come nel resto del gioco, solo transform e opacity. */
#viaggio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vg-scena {
    --vg-cw: min(45vw, 24vh, 200px);
    --vg-cw: min(45vw, 24dvh, 200px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(env(safe-area-inset-right, 0px) + 16px)
        calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

.vg-scena > * {
    flex: 0 0 auto;
    max-width: 100%;
}

/* il racconto si legge al buio: il fondo dei pannelli del gioco */
.vg-scena.vg-buio {
    background-color: var(--sopra);
    background-image: var(--sopra-luce);
}

/* una parola sola sull'ultima riga, a 320 px e in spagnolo, sembra un errore */
.vg-scena p {
    margin: 0;
    text-wrap: pretty;
}

.vg-narratore p {
    text-wrap: balance;
}

/* Quello che si racconta prende lo spazio fra la cima e i pulsanti, e ci sta
   in mezzo */
.vg-corpo {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* I pulsanti in fondo, uno sotto l'altro. A capo invece del nowrap dei
   pulsanti: in spagnolo e a 320 px una scritta lunga uscirebbe. */
.vg-fila {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 330px;
    padding-top: 14px;
    animation: premio-sotto 0.4s 0.75s ease both;
}

.vg-fila .grande {
    width: 100%;
    margin-bottom: 10px;
    padding: 6px 22px;
    line-height: 1.1;
    white-space: normal;
}

.vg-fila > :last-child {
    margin-bottom: 0;
}

/* Dove la scena non ci sta e scorre, col telefono girato, i pulsanti restano
   attaccati in fondo, sopra quello che scorre: sotto il bordo nessuno sapeva
   che c'erano. vg-scorre la mette adatta() di viaggio-pezzi.js. Il margine
   sopra i pulsanti non prende i tocchi, che sono di quello che c'e' sotto. */
.vg-scorre .vg-fila {
    position: sticky;
    bottom: 0;
    z-index: 4;
    pointer-events: none;
}

.vg-scorre .vg-fila > * {
    pointer-events: auto;
}

/* Il palco e' largo quanto la scena e alto quanto la carta coi suoi margini.
   I raggi non ne escono: fuori farebbero scorrere la scena, e tagliati dal
   bordo si vedrebbe lo spigolo. */
.vg-palco {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 560px;
    height: calc(var(--vg-cw) * 1.42 + 48px);
    animation: premio-arriva 0.7s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* I raggi d'oro della cerimonia dei premi, piu' leggeri. Girano dentro un
   riquadro fermo grande quanto il palco, che li sfuma a ellisse verso i suoi
   bordi: la maschera sul pezzo che gira girerebbe con lui. */
.vg-raggi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(closest-side, #000 0, #000 30%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0, #000 30%, transparent 100%);
    pointer-events: none;
}

.vg-raggi::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    margin: -400px 0 0 -400px;
    background-image: repeating-conic-gradient(rgba(255, 214, 120, 0.2) 0deg 8deg, rgba(255, 214, 120, 0) 8deg 22.5deg);
    animation: premio-gira 26s linear infinite;
}

.vg-aura {
    position: relative;
    animation: galleggia 4s ease-in-out infinite;
}

/* l'alone della leggendaria: i colori della sua rarita', sfocati, che
   respirano dietro la carta */
.vg-aura::before {
    content: '';
    position: absolute;
    top: -9%;
    left: -12%;
    right: -12%;
    bottom: -9%;
    z-index: -1;
    border-radius: 30%;
    background: linear-gradient(135deg, #ff8fcf, #8fbaff 28%, #fff09a 52%, #8ff0c8 76%, #c08fff);
    filter: blur(16px);
    opacity: 0.5;
    animation: vg-respira 2.8s ease-in-out infinite;
}

@keyframes vg-respira {
    0%, 100% { opacity: 0.38; transform: scale(0.96); }
    50% { opacity: 0.7; transform: scale(1.04); }
}

/* la targa prende il carattere dal --cw del suo contenitore */
.vg-palco .vg-con-targa {
    --cw: var(--vg-cw);
}

.vg-palco .carta {
    --cw: var(--vg-cw);
    --ch: calc(var(--vg-cw) * 1.42);
    --raggio: calc(var(--vg-cw) * 0.075);
    transform: rotate(-4deg);
    box-shadow: 0 0 0 2px var(--popolo-luce, #fff3b8), 0 0 22px var(--popolo-luce, #fff3b8), 0 14px 26px rgba(0, 0, 0, 0.55);
}

/* gli indici di una carta grande stanno dove li mette una carta vera, non a
   5 px dal bordo */
.vg-palco .carta .valore {
    top: calc(var(--cw) * 0.045);
    left: calc(var(--cw) * 0.075);
}

.vg-palco .carta .valore.giu {
    top: auto;
    left: auto;
    right: calc(var(--cw) * 0.075);
    bottom: calc(var(--cw) * 0.045);
}

.vg-palco .carta.figura .semino {
    top: calc(var(--cw) * 0.36);
    left: calc(var(--cw) * 0.075);
}

.vg-palco .carta.figura .semino.giu {
    top: auto;
    left: auto;
    right: calc(var(--cw) * 0.075);
    bottom: calc(var(--cw) * 0.36);
}

/* Il fumetto della guida della sala, con la punta in su verso la carta */
.vg-fumetto {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 380px;
    margin-top: 16px;
    padding: 11px 14px 9px;
    border-radius: 18px;
    background: #fdfdfb;
    color: #1c1c1e;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    animation: premio-sotto 0.4s 0.45s ease both;
}

.vg-fumetto::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 12px solid #fdfdfb;
}

.vg-scena p.vg-fumetto-chi {
    margin-bottom: 2px;
    font-size: 14px;
    color: var(--popolo, #6b4cc4);
}

.vg-scena p.vg-fumetto-titolo {
    margin-bottom: 4px;
    font-size: 19px;
    line-height: 1.15;
}

.vg-scena p.vg-riga {
    padding: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 15px;
    line-height: 1.25;
    color: #34343a;
}

.vg-scena .vg-fumetto-chi + .vg-riga,
.vg-scena .vg-fumetto-titolo + .vg-riga,
.vg-scena .vg-fumetto > .vg-riga:first-child {
    border-top: 0;
}

.vg-narratore {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
}

.vg-scena p.vg-narratore-titolo {
    margin-bottom: 14px;
    font-size: 34px;
    line-height: 1.08;
    animation: cer-timbro 0.5s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.vg-scena p.vg-narratore-riga {
    margin-bottom: 12px;
    font-size: 22px;
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 0, 0, 0.35);
    animation: premio-sotto 0.5s ease both;
    animation-delay: calc(var(--i, 0) * 0.35s + 0.35s);
}

.vg-scena p.vg-narratore-riga:last-child {
    margin-bottom: 0;
}

/* L'oro della copertina: il fondo ritagliato sulla scritta, e il contorno
   nero in una copia dietro (data-t), perche' l'ombra della scritta stessa
   coprirebbe l'oro. La copia e' larga quanto la scritta e va a capo nello
   stesso punto. */
.vg-oro {
    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;
}

.vg-oro::before {
    --contorno: #000000;
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    color: #000000;
    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);
}

.vg-cuori {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.vg-cuori .cuore {
    margin: 0 1px;
    animation: medaglia-arriva 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.vg-cuori .cuore:nth-child(1) { animation-delay: 0.3s; }
.vg-cuori .cuore:nth-child(2) { animation-delay: 0.4s; }
.vg-cuori .cuore:nth-child(3) { animation-delay: 0.5s; }

@media (max-height: 640px) {
    .vg-fila .grande {
        min-height: 52px;
        font-size: 18px;
    }

    .vg-scena p.vg-riga {
        padding: 3px 0;
        font-size: 14px;
    }

    .vg-scena p.vg-narratore-riga {
        font-size: 19px;
    }

    .vg-scena p.vg-narratore-titolo {
        font-size: 28px;
    }

    .vg-palco {
        height: calc(var(--vg-cw) * 1.42 + 30px);
    }
}

@media (min-width: 700px) and (min-height: 700px) {
    .vg-scena p.vg-riga {
        font-size: 17px;
    }

    .vg-scena p.vg-fumetto-titolo {
        font-size: 22px;
    }

    .vg-scena p.vg-narratore-riga {
        font-size: 26px;
    }

    .vg-fumetto {
        max-width: 460px;
    }
}

/* --- Il viaggio: il pulsante del menu (viaggio-vista.js) -------------------- */

/* Resta una placca di vetro come «Allenamento»: il blu di «Gioca online» deve
   restare la cosa piu' forte del menu. Lo distinguono la cornice iridescente
   delle leggendarie, un lampo che ci passa sopra, e tre figure a ventaglio
   che spuntano dal bordo. */
#viaggio-apri {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 8px 14px 8px 88px;
    line-height: 1.1;
    white-space: normal;
}

/* la cornice e il lampo stanno in un riquadro ritagliato sul pulsante; le
   carte no, perche' devono uscire dal bordo */
.viaggio-luce {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.viaggio-luce::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(110deg, #ff8fcf, #8fbaff 28%, #fff09a 52%, #8ff0c8 76%, #c08fff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.viaggio-luce::before {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 34%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    transform: translateX(-160%) skewX(-20deg);
    animation: viaggio-lampo 5.5s 1.2s ease-in-out infinite;
}

@keyframes viaggio-lampo {
    0% { transform: translateX(-160%) skewX(-20deg); }
    24%, 100% { transform: translateX(420%) skewX(-20deg); }
}

/* l'alone che respira attorno, nei colori della cornice */
#viaggio-apri::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    box-shadow: 0 0 14px 1px rgba(255, 143, 207, 0.32), 0 0 22px 3px rgba(143, 186, 255, 0.22);
    pointer-events: none;
    animation: viaggio-respira 3s ease-in-out infinite;
}

@keyframes viaggio-respira {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.viaggio-scritte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.viaggio-nome {
    font-size: 21px;
    color: #ffd66e;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

#viaggio-sotto {
    margin-top: 4px;
    font-size: 13px;
    font-weight: normal;
    opacity: 0.85;
    text-wrap: balance;
}

/* Tre figure aperte come una mano di carte, attorno a un perno sotto il
   pulsante, quella in mezzo piu' alta; spuntano sopra il bordo. La targa non
   ce l'hanno: sono l'icona del pulsante, grandi un dito. */
.viaggio-ventaglio {
    --cw: 35px;
    --ch: 50px;
    --raggio: 4px;
    position: absolute;
    left: 10px;
    bottom: 12px;
    width: 76px;
    height: var(--ch);
    pointer-events: none;
}

.viaggio-posto {
    position: absolute;
    left: calc(50% - var(--cw) / 2);
    bottom: 0;
    transform-origin: 50% 170%;
    transform: rotate(calc((var(--i) - 1) * 17deg)) translateY(calc((1 - (var(--i) - 1) * (var(--i) - 1)) * -8px));
}

/* quella in mezzo davanti alle altre due */
.viaggio-posto:nth-child(2) {
    z-index: 1;
}

.viaggio-posto .carta {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.5);
    opacity: 0;
}

/* le carte spuntano quando il menu si vede: sotto la copertina l'entrata
   passerebbe senza che nessuno la guardi */
.viaggio-entra .viaggio-posto .carta {
    animation: viaggio-spunta 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.12s);
}

/* la carta in mezzo, finita l'entrata, galleggia come il logo */
.viaggio-entra .viaggio-posto:nth-child(2) .carta {
    animation: viaggio-spunta 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.27s both, viaggio-galleggia 4s 1s ease-in-out infinite;
}

@keyframes viaggio-spunta {
    0% { opacity: 0; transform: translateY(26px) scale(0.6); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes viaggio-galleggia {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* A viaggio cominciato la propria carta, in mezzo, ha gli angoli consumati da
   mille partite, come la racconta l'apertura: sbiaditi dove la stampa se ne va
   per prima, i bordi scuriti dalle mani e una piega. L'usura sta sopra la
   cornice, che si consuma anche lei. Piu' leggera della carta consumata del
   racconto: grande un dito, la seppia la farebbe sparire. */
.viaggio-usura {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(255, 247, 228, 0.95), rgba(255, 247, 228, 0.55) 10%, rgba(255, 247, 228, 0) 19%),
        radial-gradient(circle at 100% 0, rgba(255, 247, 228, 0.8), rgba(255, 247, 228, 0) 14%),
        radial-gradient(circle at 0 100%, rgba(255, 247, 228, 0.8), rgba(255, 247, 228, 0) 14%),
        radial-gradient(circle at 100% 100%, rgba(255, 247, 228, 0.95), rgba(255, 247, 228, 0.55) 10%, rgba(255, 247, 228, 0) 19%),
        linear-gradient(112deg, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, 0.5) 56%, rgba(110, 72, 30, 0.35) 57.5%, rgba(0, 0, 0, 0) 59%),
        rgba(196, 150, 84, 0.16);
    box-shadow: inset 0 0 5px 1px rgba(110, 70, 25, 0.55);
    pointer-events: none;
}

.viaggio-propria .carta {
    filter: saturate(0.82);
    box-shadow: 0 0 0 1px rgba(255, 228, 170, 0.7), 0 0 10px rgba(255, 214, 110, 0.55), 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Telefoni bassi: un pulsante in piu' spinge giu' «Gioca online», che qui sta
   gia' a filo del fondo; il viaggio si fa piu' basso degli altri */
@media (max-height: 640px) {
    #viaggio-apri {
        min-height: 54px;
        margin-top: 6px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .viaggio-nome {
        font-size: 19px;
    }

    #viaggio-sotto {
        margin-top: 2px;
    }

    .viaggio-ventaglio {
        bottom: 8px;
    }
}

/* --- Il viaggio: apertura, scelta, racconto e fine (viaggio-racconto.js) ---- */

/* Sul palco la carta del nonno non ha raggi ne' l'alone della leggendaria:
   una luce calda e bassa dietro, come una lampada sul tavolo */
.vg-del-nonno .vg-raggi {
    display: none;
}

.vg-del-nonno .vg-aura::before {
    background: radial-gradient(closest-side, rgba(255, 206, 120, 0.8), rgba(255, 206, 120, 0));
    filter: blur(8px);
}

.vg-palco .carta.vg-consumata {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 14px 26px rgba(0, 0, 0, 0.5);
}

/* L'apertura: il baule della cantina e, uscite da lui, otto dorsi consumati a
   ventaglio, uno che si alza e brilla. Le misure vengono tutte da --vg-mcw,
   la larghezza di una carta, che la scena stringe se le righe non ci stanno:
   il baule si stringe con lei.
   Le carte escono dal baule perche' il baule e' due copie della stessa
   immagine: una dietro e una davanti, tagliata sul bordo vicino
   dell'apertura (61,8% dell'altezza), che ne copre il fondo. --vg-bocca e'
   l'altezza di quel bordo dal fondo del mazzo: l'immagine ha il 5% vuoto
   sotto il baule, e il baule scende per pareggiarlo. Il perno del ventaglio
   e' appena sotto le carte, non lontano come quando erano sole: stanno
   strette in basso, dove l'apertura e' piccola, e si aprono in alto. */
.vg-mazzo {
    --vg-mcw: min(20vw, 10vh, 84px);
    --vg-mcw: min(20vw, 10dvh, 84px);
    --vg-mch: calc(var(--vg-mcw) * 1.42);
    --vg-bw: calc(var(--vg-mcw) * 3.2);
    --vg-bh: calc(var(--vg-bw) * 1.172);
    --vg-bocca: calc(var(--vg-bh) * 0.335);
    --vg-perno: 135%;
    --vg-passo: 8.5deg;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: 380px;
    height: calc(var(--vg-bh) * 0.9);
    margin-bottom: 18px;
}

.vg-mazzo .vg-raggi::before {
    animation-duration: 34s;
}

/* Vecchio e impolverato: il filtro della carta consumata, un po' piu'
   spento perche' l'oro del baule e' tutto saturo, e sopra una patina di
   polvere. La polvere segue l'immagine per luminosita': sul contorno nero non
   si posa. */
.vg-baule {
    --vg-baule-img: url('/app/immagini/baule-giorno-aperto.png');
    position: absolute;
    left: 50%;
    bottom: calc(var(--vg-bh) * -0.047);
    width: var(--vg-bw);
    height: var(--vg-bh);
    margin-left: calc(var(--vg-bw) / -2);
    transform-origin: 50% 100%;
    animation: vg-baule-entra 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
    pointer-events: none;
}

.vg-baule::before,
.vg-baule::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.vg-baule::before {
    background: var(--vg-baule-img) center / 100% 100% no-repeat;
    filter: sepia(0.5) saturate(0.8) brightness(0.9) contrast(0.95);
}

.vg-baule::after {
    background:
        radial-gradient(circle at 24% 30%, rgba(238, 228, 204, 0.8) 0 0.7%, transparent 1.2%),
        radial-gradient(circle at 71% 22%, rgba(238, 228, 204, 0.7) 0 0.6%, transparent 1.1%),
        radial-gradient(circle at 38% 71%, rgba(238, 228, 204, 0.7) 0 0.8%, transparent 1.3%),
        radial-gradient(circle at 83% 66%, rgba(238, 228, 204, 0.6) 0 0.6%, transparent 1.1%),
        radial-gradient(circle at 14% 58%, rgba(238, 228, 204, 0.6) 0 0.7%, transparent 1.2%),
        radial-gradient(circle at 56% 80%, rgba(96, 62, 22, 0.35) 0 0.9%, transparent 1.4%),
        radial-gradient(circle at 27% 89%, rgba(96, 62, 22, 0.3) 0 0.7%, transparent 1.2%),
        linear-gradient(180deg, rgba(226, 214, 188, 0.7) 0, rgba(226, 214, 188, 0) 20%),
        linear-gradient(180deg, rgba(226, 214, 188, 0) 46%, rgba(226, 214, 188, 0.5) 52%, rgba(226, 214, 188, 0.36) 61%, rgba(226, 214, 188, 0) 63%),
        radial-gradient(ellipse at 50% 55%, rgba(110, 72, 26, 0) 55%, rgba(110, 72, 26, 0.34) 100%);
    -webkit-mask-image: var(--vg-baule-img);
    mask-image: var(--vg-baule-img);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-mode: luminance;
}

.vg-baule-davanti {
    z-index: 4;
    -webkit-clip-path: inset(61.8% 0 0 0);
    clip-path: inset(61.8% 0 0 0);
}

@keyframes vg-baule-entra {
    from { opacity: 0; transform: translateY(24px) scale(0.85); }
}

.vg-mazzo .carta {
    --cw: var(--vg-mcw);
    --ch: var(--vg-mch);
    --raggio: calc(var(--vg-mcw) * 0.08);
    position: absolute;
    left: 50%;
    bottom: calc(var(--vg-bocca) - var(--vg-mcw) * 0.1);
    margin-left: calc(var(--vg-mcw) / -2);
    border-width: calc(var(--vg-mcw) * 0.05);
    transform-origin: 50% var(--vg-perno);
    transform: rotate(calc((var(--i) - 3.5) * var(--vg-passo)));
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.35);
    animation: vg-ventaglio 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
    animation-delay: calc(var(--i) * 0.05s + 0.6s);
}

/* escono dall'apertura: partono giu', col fondo sotto il bordo del baule */
@keyframes vg-ventaglio {
    from { opacity: 0; transform: translateY(calc(var(--vg-mch) * 0.8)) rotate(0deg); }
    30% { opacity: 1; }
}

/* quella del nonno per te: esce dal ventaglio lungo il suo asse, con la
   cornice calda e una luce che la attraversa (nel ::before: il ::after e'
   della carta consumata) */
.vg-mazzo .carta.vg-brilla {
    z-index: 2;
    border-color: #f3e2b8;
    transform: rotate(calc((var(--i) - 3.5) * var(--vg-passo))) translateY(-30%);
    box-shadow: 0 0 0 2px #c99a45, 0 0 18px 4px rgba(255, 196, 110, 0.75), 0 14px 22px rgba(0, 0, 0, 0.5);
    animation: vg-esce 1.1s 1.1s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes vg-esce {
    0% { opacity: 0; transform: translateY(calc(var(--vg-mch) * 0.8)) rotate(0deg); }
    45% { opacity: 1; transform: rotate(calc((var(--i) - 3.5) * var(--vg-passo))); }
}

.vg-mazzo .carta.vg-brilla::before {
    content: '';
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    z-index: 3;
    width: 45%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 240, 200, 0.7), rgba(255, 255, 255, 0));
    transform: translateX(-160%) skewX(-18deg);
    animation: vg-luce 2.6s 2s ease-in-out infinite;
}

@keyframes vg-luce {
    0% { transform: translateX(-160%) skewX(-18deg); }
    40%, 100% { transform: translateX(330%) skewX(-18deg); }
}

/* la luce dietro la carta che brilla: calda, non iridescente. Un pezzo a se',
   con la stessa rotazione, perche' dentro la carta coprirebbe il dorso */
.vg-mazzo .vg-alone {
    position: absolute;
    left: 50%;
    bottom: calc(var(--vg-bocca) - var(--vg-mcw) * 0.1);
    z-index: 1;
    width: var(--vg-mcw);
    height: var(--vg-mch);
    margin-left: calc(var(--vg-mcw) / -2);
    border-radius: 30%;
    transform-origin: 50% var(--vg-perno);
    transform: rotate(calc((var(--i) - 3.5) * var(--vg-passo))) translateY(-30%) scale(1.35, 1.25);
    background: radial-gradient(closest-side, #ffd27e, rgba(255, 190, 90, 0.6) 60%, rgba(255, 190, 90, 0));
    filter: blur(12px);
    opacity: 0;
    animation: vg-alone-respira 2.8s 1.7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vg-alone-respira {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

/* scintille che si accendono a turno: attorno al mazzetto, e attorno alla
   carta quando si parla della sua anima */
.vg-scintilla {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background: #fff3c4;
    -webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    filter: drop-shadow(0 0 5px #ffd66e) drop-shadow(0 0 2px #fff);
    opacity: 0;
    animation: vg-scintilla 1.8s ease-in-out infinite;
    pointer-events: none;
}

.vg-mazzo .vg-scintilla.vg-s1 { left: calc(50% + var(--vg-mcw) * 0.9); top: 12%; animation-delay: 1.7s; }
.vg-mazzo .vg-scintilla.vg-s2 { left: calc(50% - var(--vg-mcw) * 0.6); top: 8%; width: 15px; height: 15px; margin: -7px 0 0 -7px; animation-delay: 2.2s; }
.vg-mazzo .vg-scintilla.vg-s3 { left: calc(50% + var(--vg-mcw) * 0.2); top: 2%; width: 16px; height: 16px; margin: -8px 0 0 -8px; animation-delay: 2.7s; }

@keyframes vg-scintilla {
    0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    40% { opacity: 1; transform: scale(1) rotate(45deg); }
    70% { opacity: 0.7; transform: scale(0.8) rotate(70deg); }
}

/* Le righe del narratore, piu' staccate fra loro che dentro una riga andata a
   capo: due pezzi della stessa riga restano una riga */
.vg-apertura p.vg-narratore-riga {
    margin-bottom: 17px;
    line-height: 1.12;
}

/* L'invito in fondo, che pulsa quando il narratore ha finito: tutto lo
   schermo e' il pulsante, come nelle schermate di Clash Royale */
.vg-invito-posto {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding-top: 10px;
}

.vg-scena p.vg-invito {
    font-size: 18px;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    animation: premio-sotto 0.4s var(--vg-dopo, 2s) ease both, vg-invito 1.7s calc(var(--vg-dopo, 2s) + 0.4s) ease-in-out infinite;
}

@keyframes vg-invito {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.07); }
}

/* La scelta: la carta grande qui e' tutto lo schermo, piu' grande che
   altrove, e se non ci sta adatta() la stringe */
.vg-scena.vg-sceglie {
    --vg-cw: min(56vw, 31vh, 250px);
    --vg-cw: min(56vw, 31dvh, 250px);
}

.vg-scena p.vg-titolo-grande {
    font-size: 26px;
    line-height: 1.08;
    text-wrap: balance;
    animation: cer-timbro 0.5s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.vg-scena p.vg-sotto {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.2;
    opacity: 0.8;
    animation: premio-sotto 0.4s 0.3s ease both;
}

/* Le otto carte del nonno in mano, su due file a ventaglio basso: quella
   toccata si alza ed e' cerchiata d'oro, le altre stanno un passo indietro.
   L'arco e l'inclinazione stanno in translate e rotate, che si sommano
   all'entrata. Ogni carta ha un posto di un quarto di fila, che e' quanto
   puo' essere larga la sua targa: un nome piu' lungo va a capo. */
.vg-mano {
    --vg-posto: calc(min(100vw - 32px, 360px) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 14px 0 12px;
}

.vg-fila-carte {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

/* la carta che si alza nella seconda fila non arriva ai nomi della prima, e
   se ci arriva ci passa sotto */
.vg-fila-carte + .vg-fila-carte {
    z-index: 1;
    margin-top: 20px;
}

.vg-scegli {
    --cw: min(calc(var(--vg-posto) - 30px), 44px);
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: var(--vg-posto);
    translate: 0 var(--arco, 0px);
    rotate: calc((var(--j) - 1.5) * 4deg);
    transition: translate 0.25s cubic-bezier(0.2, 1.5, 0.4, 1);
    animation: premio-arriva 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
    animation-delay: calc(var(--i) * 0.05s + 0.15s);
}

.vg-scegli.vg-scelta {
    translate: 0 calc(var(--arco, 0px) - 6px);
}

.vg-fila-carte .vg-targa {
    max-width: calc(var(--vg-posto) - 2px);
    font-size: 10px;
    white-space: normal;
    transition: opacity 0.2s ease;
}

/* a 320 px il posto e' di 72 px e «Wyatt Earp», «Giulio Cesare» e
   «Montezuma» restavano a 2-3 px l'uno dall'altro: un poco piu' piccole,
   perche' fra due targhe resti un vuoto che si veda */
@media (max-width: 359px) {
    .vg-fila-carte .vg-targa {
        padding: 1px 4px 2px;
        font-size: 9.5px;
    }
}

/* quella toccata il nome lo ha sotto, sulla carta grande: qui basta la
   cornice d'oro, e due «Tomoe» sullo stesso schermo erano uno di troppo */
.vg-fila-carte .vg-scelta .vg-targa {
    opacity: 0;
}

.vg-fila-carte .carta {
    --ch: calc(var(--cw) * 1.42);
    --raggio: calc(var(--cw) * 0.09);
    opacity: 0.62;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.vg-fila-carte .carta .valore {
    top: 1px;
    left: 3px;
}

.vg-fila-carte .carta .valore.giu {
    top: auto;
    left: auto;
    right: 3px;
    bottom: 1px;
}

/* il semino piccolo come quello di una carta in mano non si leggerebbe */
.vg-fila-carte .carta .semino {
    display: none;
}

.vg-fila-carte .vg-scelta .carta {
    opacity: 1;
    box-shadow: 0 0 0 2px #ffc857, 0 0 12px rgba(255, 200, 87, 0.8), 0 6px 10px rgba(0, 0, 0, 0.45);
}

.vg-scegli.premuto .carta {
    opacity: 0.9;
}

/* sotto la carta grande: il popolo, poi il seme che si comincia a
   collezionare, ognuno nella sua riga */
.vg-scheda {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 340px;
    margin-top: 16px;
    animation: premio-sotto 0.4s 0.35s ease both;
}

.vg-scena p.vg-scheda-popolo {
    font-size: 22px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.vg-scena p.vg-scheda-seme {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 14px 4px 5px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    font-size: 16px;
    line-height: 1.15;
    text-align: left;
}

.vg-scheda-seme-testo {
    min-width: 0;
    text-wrap: balance;
}

/* il seme in un tondo bianco, come nell'angolo di una carta: nero sul panno
   non si vedrebbe */
.vg-seme-tondo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 50%;
    background: #fdfdfb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    color: #1c1c1e;
}

.vg-seme-tondo.vg-rosso {
    color: #c8202a;
}

.vg-seme-tondo svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Il racconto: il palco prende lo spazio libero e il fumetto sta in fondo, le
   righe cambiano altezza e Avanti non si sposta da sotto il dito. La carta e'
   piu' grande che altrove; se non ci sta adatta() la stringe. */
.vg-scena.vg-racconto {
    --vg-cw: min(56vw, 30vh, 240px);
    --vg-cw: min(56vw, 30dvh, 240px);
}

.vg-racconto .vg-corpo {
    justify-content: flex-end;
}

.vg-racconto .vg-palco {
    flex: 1 0 auto;
    height: auto;
    min-height: calc(var(--vg-cw) * 1.42 + 48px);
}

/* Una riga per volta, grande, senza filetti: e' una battuta, non un elenco */
.vg-fumetto.vg-dice {
    z-index: 3;
    min-height: 92px;
}

.vg-scena p.vg-detto {
    font-size: 19px;
    line-height: 1.25;
    color: #1c1c1e;
    text-wrap: balance;
    animation: vg-detto 0.3s ease both;
}

@keyframes vg-detto {
    from { opacity: 0; transform: translateY(6px); }
}

.vg-scena .vg-dice p.vg-fumetto-chi {
    margin-bottom: 3px;
}

/* il piede della guida della sala: i passi a pallini, Salta e Avanti */
.vg-piede {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.vg-punti {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}

.vg-punti i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 2px 3px 2px 0;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.16);
}

.vg-punti i.vg-fatto {
    background: color-mix(in srgb, var(--popolo, #6b4cc4) 45%, transparent);
}

.vg-punti i.vg-acceso {
    width: 14px;
    background: var(--popolo, #6b4cc4);
}

.vg-salta {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 4px;
    padding: 6px 8px;
    color: #77777f;
    font-size: 14px;
}

.vg-piede .piccolo, .vg-scelte .piccolo {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 16px;
    white-space: normal;
    line-height: 1.1;
}

/* la domanda della lezione chiude il racconto: le due risposte nel fumetto,
   come «Piu' tardi» e Avanti nell'ultimo passo della guida della sala */
.vg-scelte {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.vg-scelte .piccolo {
    margin: 4px 0 0 8px;
}

.vg-scelte .piccolo.oro {
    min-height: 44px;
    padding: 0 22px;
    font-size: 17px;
}

.vg-scelte .vg-grigio {
    background-color: rgba(0, 0, 0, 0.07);
    background-image: none;
    box-shadow: none;
    color: #4a4a52;
    text-shadow: none;
}

/* Nell'anima la carta fa un passo indietro, in alto nel palco, e lascia la
   scena alle carte del nonno. --vg-alza lo misura la scena: porta la cima
   della carta in cima al palco. La scala (0.62) e' anche PICCOLA in
   viaggio-racconto.js. */
.vg-palco .vg-aura {
    transition: scale 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), translate 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.vg-palco.vg-in-scena .vg-aura {
    scale: 0.62;
    translate: 0 var(--vg-alza, 0px);
}

/* l'anima del nonno: un lume caldo nel petto della figura, che respira, e la
   lampada dietro che si allarga. Il lume si somma alla carta (screen):
   coperta, la figura sbiadirebbe. */
.vg-del-nonno .carta.vg-consumata::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 55%;
    z-index: 3;
    width: calc(var(--cw) * 0.62);
    height: calc(var(--cw) * 0.62);
    margin: calc(var(--cw) * -0.31) 0 0 calc(var(--cw) * -0.31);
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff6d8 0, rgba(255, 214, 120, 0.9) 28%, rgba(255, 190, 80, 0.35) 60%, rgba(255, 190, 80, 0));
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
    pointer-events: none;
}

.vg-del-nonno.vg-accesa .carta.vg-consumata::before {
    opacity: 1;
    transform: scale(1);
    animation: vg-anima 2.2s 0.6s ease-in-out infinite;
}

@keyframes vg-anima {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.85); }
}

.vg-del-nonno.vg-accesa .vg-aura::before {
    top: -22%;
    left: -30%;
    right: -30%;
    bottom: -22%;
    opacity: 1;
    animation: none;
    filter: blur(18px);
}

.vg-palco .vg-scintilla {
    display: none;
}

.vg-palco.vg-accesa .vg-scintilla {
    display: block;
}

.vg-palco .vg-scintilla.vg-s1 { left: calc(50% + var(--vg-cw) * 0.55); top: 18%; animation-delay: 0.3s; }
.vg-palco .vg-scintilla.vg-s2 { left: calc(50% - var(--vg-cw) * 0.6); top: 40%; width: 15px; height: 15px; margin: -7px 0 0 -7px; animation-delay: 0.9s; }
.vg-palco .vg-scintilla.vg-s3 { left: calc(50% + var(--vg-cw) * 0.45); top: 78%; width: 16px; height: 16px; margin: -8px 0 0 -8px; animation-delay: 1.5s; }

/* Il teatro: le carte del nonno, sopra il palco e sotto il fumetto, fisse
   allo schermo e tagliate dai suoi bordi. Ogni attore va dove gli dice la
   scena con una transizione, ognuno col suo ritardo. */
.vg-teatro {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.vg-attore {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: transform var(--t, 0.6s) cubic-bezier(0.3, 1.15, 0.45, 1) var(--d, 0s), opacity 0.35s ease var(--d, 0s);
}

.vg-teatro.vg-fermo .vg-attore {
    transition: none;
}

.vg-attore .carta {
    --cw: var(--vg-sw, 50px);
    --ch: calc(var(--vg-sw, 50px) * 1.42);
    --raggio: calc(var(--vg-sw, 50px) * 0.08);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 8px 14px rgba(0, 0, 0, 0.35);
}

/* la targa delle carte da riprendere prende la misura dalla carta, e si
   accende quando si sparpagliano */
.vg-attore .vg-con-targa {
    --cw: var(--vg-sw, 50px);
}

.vg-attore .vg-targa {
    opacity: 0;
    transition: opacity 0.3s ease 0.25s;
}

.vg-teatro.vg-nomi .vg-attore .vg-targa {
    opacity: 1;
}

.vg-teatro.vg-fermo .vg-attore .vg-targa {
    transition: none;
}

.vg-attore .carta.dorso {
    border-width: calc(var(--vg-sw, 50px) * 0.05);
}

.vg-attore .carta .valore {
    top: calc(var(--cw) * 0.04);
    left: calc(var(--cw) * 0.07);
}

.vg-attore .carta .valore.giu {
    top: auto;
    left: auto;
    right: calc(var(--cw) * 0.07);
    bottom: calc(var(--cw) * 0.04);
}

.vg-attore .carta.figura .semino {
    left: calc(var(--cw) * 0.07);
}

.vg-attore .carta.figura .semino.giu {
    left: auto;
    right: calc(var(--cw) * 0.07);
}

/* quelle che non si lasciano prendere: ogni tanto uno scatto, con la targa */
.vg-attore.vg-testarda > * {
    animation: vg-testarda 2.6s ease-in-out infinite;
    animation-delay: var(--w, 0s);
}

@keyframes vg-testarda {
    0%, 78%, 100% { transform: rotate(0deg) translateY(0); }
    82% { transform: rotate(-9deg) translateY(-4px); }
    87% { transform: rotate(8deg) translateY(-2px); }
    92% { transform: rotate(-4deg); }
}

/* la luce della volonta' del nonno: calda, sul mazzo e poi sulle carte */
.vg-luce-teatro {
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 220, 140, 0.85), rgba(255, 196, 90, 0.35) 55%, rgba(255, 196, 90, 0));
}

.vg-luce-teatro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 250, 225, 0.7), rgba(255, 250, 225, 0) 60%);
    animation: vg-respira 1.8s ease-in-out infinite;
}

/* La fine, la cerimonia di #vinto in quattro tempi:
   0,1 s   la carta del nonno arriva, consumata, e attorno le carte battute
   1,3 s   le battute volano una per una in «Vai in sala», che sobbalza
   2,35 s  «Premio sbloccato!», la carta si gira e si gira ancora
   3,2 s   e' iridescente: lampo, raggi, rarita', coriandoli
   3,6 s   il fumetto, una riga per volta
   CERIMONIA_MS e CORIANDOLI_MS in viaggio-racconto.js li seguono. */
.vg-scena.vg-cerimonia {
    isolation: isolate;
}

.vg-cer-raggi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    animation: vg-appare 0.6s 3.25s ease both;
}

@keyframes vg-appare {
    from { opacity: 0; }
}

/* centrati sulla carta (--vg-cy, che la scena misura) */
.vg-cer-raggi::before {
    content: '';
    position: absolute;
    top: var(--vg-cy, 34%);
    left: 50%;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    background-image: repeating-conic-gradient(rgba(255, 214, 120, 0.22) 0deg 8deg, rgba(255, 214, 120, 0) 8deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    animation: premio-gira 22s linear infinite;
}

/* i raggi del palco qui sarebbero doppi */
.vg-cerimonia .vg-raggi {
    display: none;
}

/* come nel racconto il palco prende lo spazio libero: ci stanno attorno le
   carte battute, e il fumetto resta in fondo */
.vg-scena.vg-fine {
    --vg-cw: min(50vw, 26vh, 220px);
    --vg-cw: min(50vw, 26dvh, 220px);
}

.vg-fine .vg-palco {
    flex: 1 0 auto;
    height: auto;
    min-height: calc(var(--vg-cw) * 1.42 + 48px);
}

.vg-scena p.vg-sbloccato {
    margin-bottom: 4px;
    font-size: 34px;
    line-height: 1.08;
    text-wrap: balance;
    animation: cer-timbro 0.5s 2.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* La carta che si gira: davanti quella consumata, dietro la leggendaria. Un
   giro e mezzo che rallenta, cosi' le due facce si alternano prima di
   fermarsi sulla nuova. */
.vg-gira {
    position: relative;
    width: var(--vg-cw);
    height: calc(var(--vg-cw) * 1.42);
    transform-style: preserve-3d;
    animation: vg-gira 1s 2.4s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

@keyframes vg-gira {
    0% { transform: perspective(900px) rotateY(0deg) scale(1); }
    18% { transform: perspective(900px) rotateY(40deg) scale(1.14) translateY(-12px); }
    100% { transform: perspective(900px) rotateY(540deg) scale(1); }
}

.vg-faccia {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.vg-faccia.vg-dietro {
    transform: rotateY(180deg);
}

/* l'alone iridescente si accende quando la carta ha finito di girarsi, con
   un lampo bianco */
.vg-cerimonia .vg-aura::before {
    animation: vg-appare 0.5s 3.25s ease both, vg-respira 2.8s 3.75s ease-in-out infinite;
}

.vg-cerimonia .vg-aura::after {
    content: '';
    position: absolute;
    top: -14%;
    left: -18%;
    right: -18%;
    bottom: -14%;
    z-index: 3;
    border-radius: 40%;
    background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0));
    opacity: 0;
    animation: vg-lampo 0.6s 3.17s ease-out both;
    pointer-events: none;
}

@keyframes vg-lampo {
    0% { opacity: 0; transform: scale(0.7); }
    25% { opacity: 0.95; }
    100% { opacity: 0; transform: scale(1.25); }
}

.vg-fine-rarita {
    margin-top: 8px;
    animation: cer-timbro 0.45s 3.3s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.vg-cerimonia .vg-fumetto {
    animation-delay: 3.6s;
}

/* finite le righe il piede resta alto uguale, senza Avanti */
.vg-fine .vg-piede {
    min-height: 38px;
}

.vg-fine .vg-piede .piccolo {
    margin-left: auto;
}

.vg-cerimonia .vg-fila {
    animation-delay: 0.45s;
}

/* «Vai in sala» sobbalza mentre le carte battute ci entrano */
.vg-cerimonia .vg-fila .grande {
    animation: vg-sobbalza 0.22s 1.8s ease-in-out 4;
}

@keyframes vg-sobbalza {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 18px rgba(77, 134, 244, 0.9); }
}

/* Le carte battute: arrivano attorno alla carta del nonno, la riconoscono con
   un inchino, e volano in sala. Posizioni e ritardi li mette la scena in
   --x0/--y0 (attorno), --x1/--y1 (il pulsante), --d0, --d1. */
.vg-battuta {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translate(var(--x1), var(--y1)) translate(-50%, -50%) scale(0.25);
    animation: vg-attorno 0.45s var(--d0) cubic-bezier(0.2, 1.5, 0.4, 1) both, vg-in-sala 0.5s var(--d1) cubic-bezier(0.55, 0, 0.8, 0.45) forwards;
}

@keyframes vg-attorno {
    0% { opacity: 0; transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) rotate(var(--r0)) scale(0.3); }
    70% { opacity: 1; transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) rotate(var(--r0)) scale(1.05); }
    85% { opacity: 1; transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) rotate(var(--r0)) scale(0.9) translateY(4px); }
    100% { opacity: 1; transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) rotate(var(--r0)) scale(1); }
}

@keyframes vg-in-sala {
    0% { opacity: 1; transform: translate(var(--x0), var(--y0)) translate(-50%, -50%) rotate(var(--r0)) scale(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x1), var(--y1)) translate(-50%, -50%) rotate(0deg) scale(0.25); }
}

.vg-battuta .carta {
    --cw: var(--vg-bw, 40px);
    --ch: calc(var(--vg-bw, 40px) * 1.42);
    --raggio: calc(var(--vg-bw, 40px) * 0.08);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.35);
}

.vg-battuta .carta .valore {
    top: 1px;
    left: 3px;
}

.vg-battuta .carta .valore.giu {
    top: auto;
    left: auto;
    right: 3px;
    bottom: 1px;
}

.vg-battuta .carta .semino {
    display: none;
}

@media (max-height: 640px) {
    .vg-scena p.vg-titolo-grande {
        font-size: 22px;
    }

    .vg-scena p.vg-sbloccato {
        font-size: 26px;
    }

    .vg-scena p.vg-sotto {
        font-size: 14px;
    }

    /* le due file della mano si mangiano la carta grande: piu' piccole */
    .vg-mano {
        padding: 8px 0 8px;
    }

    .vg-scegli {
        --cw: min(calc(var(--vg-posto) - 34px), 34px);
    }

    .vg-fila-carte + .vg-fila-carte {
        margin-top: 17px;
    }

    .vg-scena p.vg-scheda-popolo {
        font-size: 19px;
    }

    .vg-scheda {
        margin-top: 12px;
    }

    .vg-scena p.vg-detto {
        font-size: 17px;
    }

    .vg-fumetto.vg-dice {
        min-height: 80px;
    }

    .vg-racconto .vg-palco, .vg-fine .vg-palco {
        min-height: calc(var(--vg-cw) * 1.42 + 30px);
    }

    .vg-apertura p.vg-narratore-riga {
        margin-bottom: 13px;
    }

    .vg-scena p.vg-invito {
        font-size: 16px;
    }
}