/* Il viaggio: la sfida e com'e' andata, lo spot, la lezione, la voce
   dell'avversario e la carta che consiglia. */

/* --- Il viaggio: la sfida e com'e' andata (viaggio-sfida.js) ------------- */

/* La carta grande lascia accanto a se' una colonna di almeno 150 px per
   quale avversario e', anche a 320 px */
.vg-scena.cm-sfida {
    --vg-cw: min(100vw - 226px, 25vh, 180px);
    --vg-cw: min(100vw - 226px, 25dvh, 180px);
}

/* In cima, una riga per cosa: indietro e il dojo, poi quale dei sette. Il
   dojo sta in mezzo: a destra un posto vuoto largo quanto il tasto. */
.cm-sfida-testa {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: premio-sotto 0.35s ease both;
}

.cm-sfida-riga {
    display: flex;
    align-items: center;
    width: 100%;
}

.cm-indietro-posto {
    flex: none;
    width: 40px;
}

.cm-sfida-dojo {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 6px;
}

.cm-sfida-dojo .cm-porta-seme {
    width: 34px;
    height: 34px;
    margin-right: 9px;
}

.vg-scena p.cm-sfida-titolo {
    min-width: 0;
    font-size: 21px;
    line-height: 1.12;
    color: #ffc857;
    text-align: left;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}

.vg-scena p.cm-sfida-quale {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.15;
    opacity: 0.85;
}

.cm-sfida .vg-corpo {
    justify-content: center;
    animation: scossa 0.32s 0.72s ease both;
}

/* Le due fasce del VS: in alto l'avversario sulla rossa, che entra da destra
   con la carta a destra, come nel VS della sala; in basso chi gioca sulla
   blu, da sinistra. La fascia colorata e' piu' bassa della carta, che ne
   esce sopra e sotto; storta, sborda di 60 px per lato, e tagliata qui, ai
   bordi dello schermo, non fa scorrere la scena di lato. Va da bordo a bordo
   anche dove la scena e' una colonna in mezzo, e quello che porta resta
   nella colonna, 2 px oltre il suo margine. */
.cm-lato {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50% + 2px);
    overflow-x: clip;
    animation: vs-da-sinistra 0.45s 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.cm-lato::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    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%);
}

.cm-lato.cm-suo {
    margin-top: clamp(0px, 8dvh - 46px, 30px);
    flex-direction: row-reverse;
    text-align: right;
    animation-name: vs-da-destra;
    animation-delay: 0s;
}

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

/* il maestro: la fascia ha l'orlo d'oro */
.cm-lato.cm-suo.cm-maestro::before {
    border-top: 4px solid #ffd34d;
    border-bottom: 4px solid #ffd34d;
    box-shadow: 0 0 18px rgba(255, 211, 77, 0.45), 0 10px 28px rgba(0, 0, 0, 0.5);
}

.cm-suo .vg-palco {
    flex: none;
    width: calc(var(--vg-cw) + 28px);
    height: calc(var(--vg-cw) * 1.42 + 40px);
    max-width: 60%;
    /* la carta entra da destra dietro la fascia, poi rimbalza al suo posto */
    animation: cm-carta-entra 0.75s 0.12s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes cm-carta-entra {
    0% { opacity: 0; transform: translateX(70%) rotate(14deg) scale(0.7); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

/* i raggi solo dietro il maestro, piu' larghi della carta: la fascia li
   taglia ai bordi dello schermo */
.cm-suo:not(.cm-maestro) .vg-raggi {
    display: none;
}

.cm-suo.cm-maestro .vg-raggi {
    top: -24px;
    bottom: -24px;
    left: -70px;
    right: -70px;
}

.cm-suo.cm-maestro .vg-raggi::before {
    background-image: repeating-conic-gradient(rgba(255, 214, 120, 0.45) 0deg 8deg, rgba(255, 214, 120, 0) 8deg 22.5deg);
}

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

/* sopra l'alone della carta, che sale sulla fine della scritta e la velava */
.cm-suo .cm-chi {
    position: relative;
    z-index: 1;
    margin-right: 10px;
}

/* Il nome sta sulla targa: quale avversario e' diventa il titolo della fascia */
.vg-scena p.cm-quanti {
    --contorno: #000000;
    font-size: 21px;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
    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 0.1em 0.14em rgba(0, 0, 0, 0.45);
}

.vg-scena p.cm-quanti.cm-oro-scritta {
    color: #ffd34d;
}

/* La frase dell'avversario, nel fumetto con la punta verso la sua carta */
.cm-sfida .vg-fumetto {
    margin-top: 6px;
    animation-delay: 0.8s;
}

.cm-sfida .vg-fumetto::before {
    left: auto;
    right: calc(var(--vg-cw) / 2 + 5px);
    margin-left: 0;
}

.vg-scena.cm-sfida p.vg-riga {
    font-size: 17px;
    line-height: 1.22;
    color: #1c1c1e;
}

.cm-sfida .ingresso-vs {
    margin: 8px 0 -4px;
    font-size: clamp(38px, 7dvh, 62px);
}

/* text-align: la scena centra tutto, qui si legge da sinistra */
.cm-lato.cm-mio {
    margin-bottom: clamp(0px, 8dvh - 46px, 30px);
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
}

.cm-lato.cm-mio::before {
    top: 6px;
    bottom: 6px;
}

/* la propria carta e la sua targa: la misura sta sul contenitore, perche'
   la targa la legga */
.cm-mio .vg-con-targa {
    --cw: clamp(40px, 8.5dvh, 68px);
    flex: none;
    margin: 0 14px 0 4px;
}

/* la targa esce dalla carta di 14 px per lato al massimo, e la carta sta a
   22 px dal bordo: un nome piu' largo va a capo invece di uscire dallo
   schermo */
.cm-mio .vg-targa {
    max-width: calc(var(--cw) + 28px);
    white-space: normal;
}

.cm-mio .carta {
    --ch: calc(var(--cw) * 1.42);
    --raggio: calc(var(--cw) * 0.08);
    transform: rotate(-4deg);
    box-shadow: 0 0 0 2px #fff3b8, 0 6px 10px rgba(0, 0, 0, 0.5);
}

.cm-sfida .vg-fila {
    padding-top: 12px;
}

/* Il nastro della fine partita del gioco (#fine-testo, che va per id):
   verde per chi vince, rosso per chi perde, grigio nella patta, su una riga
   sola */
.vg-scena p.cm-nastro {
    --contorno: #000000;
    box-sizing: border-box;
    max-width: 100%;
    height: 64px;
    margin: 4px 0 6px;
    padding: 0 4px;
    overflow: hidden;
    border-style: solid;
    border-width: 0 58px;
    border-image-slice: 0 128 fill;
    border-image-width: 0 58px;
    border-image-repeat: stretch;
    color: #fff;
    font-size: 38px;
    line-height: 54px;
    white-space: nowrap;
    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);
    animation: nastro-apre 0.45s 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

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

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

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

/* Una partita finita in stallo: sotto il nastro le righe del cartello della
   rete, una per informazione, che dicono perche' e' andata cosi' */
.vg-scena .cm-stallo {
    margin: 0 0 10px;
    text-align: center;
}

.vg-scena .cm-stallo p {
    margin: 2px 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
    opacity: 0.85;
}

/* Vinta: la carta battuta diventa grigia e vola via in alto a destra,
   verso la sala; dove stava resta il posto vuoto, e due scie la seguono.
   Si ferma a meta' volo: e' il momento che deve far capire. */
.vg-palco.cm-volo {
    animation-delay: 0.15s;
}

.cm-volo .cm-vola {
    position: relative;
    z-index: 2;
    animation: cm-vola 0.75s 1.5s cubic-bezier(0.45, 0, 0.6, 1) both;
}

@keyframes cm-vola {
    0% { transform: none; }
    100% { transform: translate(calc(var(--vg-cw) * 0.6), calc(var(--vg-cw) * -0.34)) rotate(16deg) scale(0.56); }
}

.cm-volo .cm-vola .carta {
    animation: cm-grigia 0.45s 1s ease both;
}

@keyframes cm-grigia {
    0% { filter: none; }
    100% { filter: grayscale(1) brightness(0.85); }
}

/* l'alone della leggendaria si spegne col colore */
.cm-volo .cm-vola .vg-aura::before {
    animation: cm-spegni 0.45s 1s ease both;
}

@keyframes cm-spegni {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

.cm-posto, .cm-scia {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--vg-cw);
    height: calc(var(--vg-cw) * 1.42);
    margin: calc(var(--vg-cw) * -0.71) 0 0 calc(var(--vg-cw) * -0.5);
    pointer-events: none;
}

.cm-posto {
    box-sizing: border-box;
    border: 3px dashed rgba(255, 255, 255, 0.35);
    border-radius: calc(var(--vg-cw) * 0.075);
    transform: rotate(-4deg);
    animation: cm-appare 0.3s 1.6s ease both;
}

.cm-scia .carta {
    filter: grayscale(1) brightness(0.85);
    box-shadow: none;
}

.cm-scia-1 {
    transform: translate(calc(var(--vg-cw) * 0.2), calc(var(--vg-cw) * -0.11)) rotate(5deg) scale(0.85);
    animation: cm-scia-1 0.35s 1.75s ease both;
}

.cm-scia-2 {
    transform: translate(calc(var(--vg-cw) * 0.4), calc(var(--vg-cw) * -0.23)) rotate(10deg) scale(0.7);
    animation: cm-scia-2 0.35s 1.9s ease both;
}

@keyframes cm-appare {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes cm-scia-1 {
    0% { opacity: 0; }
    100% { opacity: 0.14; }
}

@keyframes cm-scia-2 {
    0% { opacity: 0; }
    100% { opacity: 0.28; }
}

/* il fumetto della resa sta sotto la carta: la punta in mezzo */
.cm-vinta .vg-fumetto {
    margin-top: 2px;
    animation-delay: 0.6s;
}

.cm-vinta .vg-fumetto::before {
    left: 50%;
    right: auto;
    margin-left: -11px;
}

.vg-scena.cm-vinta p.vg-riga {
    font-size: 18px;
}

/* Persa: il cuore del Sudden death (style.css, la vita persa) arriva sopra la
   scena col -1, si crepa e vola nel cuore grigio della fila delle vite, che
   batte quando lo riceve. Nella scena non ha un posto suo. */
.cm-volo-cuore {
    position: fixed;
    z-index: 40;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cm-volo-cuore.cm-vola {
    transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0);
}

.cuore-spezzato.cm-spezzato {
    position: absolute;
    left: 0;
    top: 0;
}

.cm-vola .cuore-spezzato.cm-spezzato .cuore-meno {
    opacity: 0;
    transition: opacity 0.15s;
}

.cm-restano .cm-arrivato {
    animation: cm-arrivato 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes cm-arrivato {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.cuore-spezzato.cm-spezzato .meta {
    top: -64px;
    left: -64px;
    width: 128px;
    height: 128px;
}

.cuore-spezzato.cm-spezzato .sinistra {
    animation: cm-crepa-sx 0.5s 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.cuore-spezzato.cm-spezzato .destra {
    animation: cm-crepa-dx 0.5s 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes cm-crepa-sx {
    0% { transform: none; }
    100% { transform: translate(-9px, 5px) rotate(-11deg); }
}

@keyframes cm-crepa-dx {
    0% { transform: none; }
    100% { transform: translate(9px, 7px) rotate(12deg); }
}

.cuore-spezzato.cm-spezzato .cuore-meno {
    top: -108px;
    font-size: 46px;
    animation: cm-meno 0.6s 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes cm-meno {
    0% { opacity: 0; transform: scale(0.4); }
    100% { opacity: 1; transform: scale(1); }
}

.cm-restano {
    margin: 2px 0 6px;
}

.cm-restano .cuore {
    margin: 0 3px;
}

.cm-persa .cm-lato.cm-suo, .cm-patta .cm-lato.cm-suo {
    margin-top: 4px;
}

/* Senza vite: i tre cuori vuoti, e quanto manca a quando tornano */
.cm-vuoti {
    margin: 4px 0 10px;
}

.cm-vuoti .cuore {
    margin: 0 4px;
}

.vg-scena p.cm-zero-titolo {
    --contorno: #000000;
    max-width: 330px;
    font-size: 32px;
    line-height: 1.08;
    color: #fff;
    text-wrap: balance;
    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 0.1em 0.14em rgba(0, 0, 0, 0.45);
    animation: cer-timbro 0.5s 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.cm-attesa {
    margin-top: 22px;
    padding: 10px 26px 12px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0 1.5px rgba(255, 200, 87, 0.45) inset;
    animation: premio-sotto 0.4s 0.9s ease both;
}

.vg-scena p.cm-attesa-riga {
    font-size: 16px;
    line-height: 1.15;
    opacity: 0.85;
}

.vg-scena p.cm-orologio {
    margin-top: 2px;
    font-size: 44px;
    line-height: 1.05;
    color: #ffc857;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

.vg-scena p.cm-nota {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.2;
    opacity: 0.85;
}

/* Con altro da fare l'orologio sta in una riga sotto il titolo, senza
   riquadro: il posto serve alle rivincite e ai pulsanti */
.cm-attesa.cm-attesa-riga-sola {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 6px;
    padding: 0;
    background: none;
    box-shadow: none;
}

.cm-attesa-riga-sola p.cm-attesa-riga {
    margin-right: 8px;
}

.vg-scena .cm-attesa-riga-sola p.cm-orologio {
    margin-top: 0;
    font-size: 22px;
}

/* Le rivincite: l'ultimo fante, l'ultima donna e l'ultimo re battuti, coi
   cuori che ridanno sotto */
.cm-rivincite {
    margin-top: 20px;
    animation: premio-sotto 0.4s 0.9s ease both;
}

.vg-scena p.cm-rivincite-titolo {
    margin-bottom: 8px;
    font-size: 19px;
    color: #ffc857;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.cm-rivincite-carte {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.cm-rivincita {
    --cw: clamp(46px, 8.5dvh, 62px);
    --ch: calc(var(--cw) * 1.42);
    --raggio: calc(var(--cw) * 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 8px 6px;
    border: 0;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 1.5px rgba(255, 200, 87, 0.5) inset;
    color: inherit;
    cursor: pointer;
}

.cm-rivincita:active {
    transform: scale(0.95);
}

.cm-rivincita .carta {
    box-shadow: 0 0 0 2px #fff3b8, 0 4px 8px rgba(0, 0, 0, 0.5);
}

.cm-rivincita .cuori {
    margin-top: 7px;
    line-height: 0;
}

/* In una rivincita, sulla fascia blu, i cuori in palio col + davanti */
.cm-posta {
    display: inline-flex;
    align-items: center;
}

.cm-posta-piu {
    margin-right: 6px;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.cm-posta .cuore {
    margin: 0 2px;
}

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

    .cm-sfida-dojo .cm-porta-seme {
        width: 28px;
        height: 28px;
    }

    .vg-scena p.cm-sfida-quale {
        margin-top: 2px;
        font-size: 13px;
    }

    .vg-scena p.cm-quanti {
        font-size: 18px;
    }

    .vg-scena.cm-sfida p.vg-riga {
        font-size: 14px;
    }

    .cm-sfida .vg-fumetto {
        padding: 8px 12px 7px;
    }

    .cm-sfida .ingresso-vs {
        margin: 0 0 -6px;
    }

    .cm-mio .vg-con-targa {
        margin-right: 12px;
    }

    .cm-lato.cm-mio {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .vg-scena p.cm-nastro {
        height: 54px;
        margin: 0 0 2px;
        border-width: 0 48px;
        border-image-width: 0 48px;
        font-size: 30px;
        line-height: 46px;
    }

    .vg-scena.cm-vinta p.vg-riga {
        font-size: 15px;
    }

    .cuore-spezzato.cm-spezzato .meta {
        top: -46px;
        left: -46px;
        width: 92px;
        height: 92px;
    }

    .cuore-spezzato.cm-spezzato .cuore-meno {
        top: -80px;
        font-size: 34px;
    }

    .vg-scena p.cm-zero-titolo {
        font-size: 26px;
    }

    .cm-attesa {
        margin-top: 12px;
        padding: 8px 22px 9px;
    }

    .vg-scena p.cm-orologio {
        font-size: 36px;
    }
}

/* --- Lo spot (viaggio-spot.js) -------------------------------------------- */

/* Dieci secondi di pubblicita' nostra, sul fondo dei pannelli del gioco: il
   cerchio del tempo in alto a destra, in mezzo il disegno e quello che dice,
   sotto la fila delle vite. Le classi cominciano con sp-: la scena porta anche
   quella del suo spot, sp-gioco, sp-idea, sp-eroe o sp-sala. */
.vg-scena.sp-spot {
    --sp-cw: min(26vw, 16dvh, 116px);
    background-color: var(--sopra);
    background-image: var(--sopra-luce);
}

.sp-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.sp-cerchio {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    transition: opacity 0.3s, scale 0.3s;
}

.sp-cerchio svg {
    display: block;
    width: 100%;
    height: 100%;
    rotate: -90deg;
}

.sp-fondo {
    fill: rgba(0, 0, 0, 0.35);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 4;
}

.sp-arco {
    fill: none;
    stroke: #ffc857;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
}

.sp-secondi {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.sp-cerchio.sp-finito {
    opacity: 0;
    scale: 0.6;
}

/* Il disegno entra, poi galleggia piano: lo spot resta vivo anche quando non
   succede niente */
.sp-disegno {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: calc(var(--sp-cw) * 1.42 + 26px);
    margin-bottom: 20px;
    animation: sp-galleggia 3.2s 1.2s ease-in-out infinite;
}

@keyframes sp-galleggia {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

.sp-posto {
    --cw: var(--sp-cw);
    --ch: calc(var(--cw) * 1.42);
    --raggio: calc(var(--cw) * 0.08);
    animation: sp-spunta 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.sp-posto .carta {
    box-shadow: 0 0 0 2px #fff3b8, 0 8px 16px rgba(0, 0, 0, 0.5);
}

@keyframes sp-spunta {
    0% { opacity: 0; scale: 0.6; }
    100% { opacity: 1; scale: 1; }
}

/* A meta' dello spot la carta si gira: si stringe fino a sparire, e dall'altra
   parte si apre la seconda faccia, che fino allora non si vedeva */
.sp-gira {
    position: relative;
    width: var(--cw);
    height: var(--ch);
}

.sp-faccia {
    position: absolute;
    left: 0;
    top: 0;
}

.sp-gira .sp-a {
    animation: sp-chiude 0.22s ease-in both;
    animation-delay: calc(4.5s + var(--i, 0) * 0.15s);
}

.sp-gira .sp-b {
    animation: sp-apre 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(4.72s + var(--i, 0) * 0.15s);
}

@keyframes sp-chiude {
    0% { scale: 1 1; }
    100% { scale: 0 1; }
}

@keyframes sp-apre {
    0% { scale: 0 1; }
    100% { scale: 1 1; }
}

/* Il gioco: le tre leggendarie a ventaglio, come sul pulsante del menu */
.sp-ventaglio {
    position: absolute;
    left: calc(50% - var(--sp-cw) / 2);
    bottom: 6px;
    transform-origin: 50% 170%;
    rotate: calc((var(--i) - 1) * 16deg);
    animation-delay: calc(0.15s + var(--i) * 0.12s);
}

.sp-ventaglio:nth-child(2) {
    z-index: 1;
}

/* L'idea: la propria carta e quella vuota col +, il posto dell'idea da fare,
   che a meta' si gira ed e' una carta vera */
.sp-idea .sp-disegno {
    gap: 18px;
    align-items: center;
}

.sp-mia {
    rotate: -7deg;
}

.sp-idea-carta {
    rotate: 7deg;
    animation-delay: 0.25s;
}

.porta-amico-vuota.sp-vuota {
    width: var(--sp-cw);
    height: calc(var(--sp-cw) * 1.42);
    margin-left: 0;
    border-radius: calc(var(--sp-cw) * 0.08);
    font-size: calc(var(--sp-cw) * 0.6);
    rotate: none;
}

.sp-idea-carta .carta {
    box-shadow: 0 0 0 2px #ffd34d, 0 0 26px rgba(255, 211, 77, 0.75), 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Da zero a hero: la propria carta consumata; un lampo ci passa sopra, e
   sotto c'e' la stessa leggendaria che si accende */
.sp-prima, .sp-dopo, .sp-luce {
    position: absolute;
    left: calc(50% - var(--sp-cw) / 2);
    bottom: 13px;
}

.sp-posto.sp-dopo {
    animation: sp-diventa 1.2s 4.6s ease both;
}

.sp-luce {
    z-index: 2;
    width: var(--sp-cw);
    height: calc(var(--sp-cw) * 1.42);
    overflow: hidden;
    border-radius: calc(var(--sp-cw) * 0.08);
    pointer-events: none;
}

.sp-luce::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -70%;
    width: 45%;
    height: 140%;
    rotate: 18deg;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
    animation: sp-lampo 0.8s 3.9s ease-in-out both;
}

@keyframes sp-lampo {
    0% { translate: 0 0; }
    100% { translate: 420% 0; }
}

.sp-dopo .carta {
    box-shadow: 0 0 0 2px #ffd34d, 0 0 26px rgba(255, 211, 77, 0.75), 0 8px 16px rgba(0, 0, 0, 0.5);
}

@keyframes sp-diventa {
    0% { opacity: 0; scale: 0.92; filter: brightness(2.2); }
    55% { opacity: 1; filter: brightness(1.6); }
    100% { opacity: 1; scale: 1; filter: none; }
}

/* La sala: i tre bauli, quello della settimana in mezzo e piu' grande, che a
   meta' si aprono uno dopo l'altro */
.sp-sala .sp-disegno {
    gap: 4px;
}

.sp-baule {
    position: relative;
    display: block;
    width: calc(var(--sp-cw) * 0.8);
    animation: sp-spunta 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.12s);
}

.sp-baule:nth-child(2) {
    width: calc(var(--sp-cw) * 1.05);
}

.sp-baule img {
    display: block;
    width: 100%;
    height: auto;
}

.sp-baule .sp-aperto {
    position: absolute;
    left: 0;
    bottom: 0;
    animation: sp-si-apre 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    animation-delay: calc(3.6s + var(--i) * 1.2s);
}

.sp-baule .sp-chiuso {
    animation: sp-sparisce 0.1s both;
    animation-delay: calc(3.6s + var(--i) * 1.2s);
}

@keyframes sp-si-apre {
    0% { opacity: 0; scale: 0.8; }
    1% { opacity: 1; }
    100% { opacity: 1; scale: 1; }
}

@keyframes sp-sparisce {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Verso la fine il pulsante si fa notare, due volte */
.sp-chiama {
    animation: sp-chiama 0.55s 8s ease-in-out 2;
}

@keyframes sp-chiama {
    0%, 100% { scale: 1; }
    50% { scale: 1.06; }
}

.vg-scena p.sp-titolo {
    max-width: 340px;
    font-size: 28px;
    line-height: 1.14;
    text-wrap: balance;
    animation: premio-sotto 0.4s 0.4s ease both;
}

.vg-scena p.sp-riga {
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.25;
    opacity: 0.9;
    animation: premio-sotto 0.4s 0.55s ease both;
}

.vg-scena p.sp-firma {
    margin-top: 12px;
    color: #ffc857;
    font-size: 15px;
    letter-spacing: 0.04em;
    animation: premio-sotto 0.4s 0.65s ease both;
}

.sp-vite {
    margin-top: 22px;
}

.sp-vite .cuore {
    margin: 0 3px;
}

.sp-vite .sp-arrivato {
    animation: cm-arrivato 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* il pulsante del sito e' un collegamento vero, vestito da pulsante */
a.sp-sito {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

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

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

    .sp-disegno {
        margin-bottom: 12px;
    }
}

/* --- La lezione (tutorial.js) --------------------------------------------- */

/* Mentre il personaggio parla il banco dell'avversario resta vuoto: nella
   lezione il bot non muove, e dietro il cartello se ne leggeva meta'. La
   barra in fondo tace, perche' ripeteva la mossa con un'altra voce; resta
   il Menu. */
#tavolo.lezione-parla #avversario > * {
    visibility: hidden;
}

#tavolo.lezione-parla #stato {
    visibility: hidden;
}

/* Il cartello prende la fascia dell'avversario, alta quanto la fa tavolo.js
   (--lezione-fascia la misura tutorial.js), e ci sta in mezzo. Se non ci sta
   scende sul centro invece di uscire in alto: il margine automatico non va
   sotto zero, justify-content si'. */
#lezione {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    left: 8px;
    right: 8px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: var(--lezione-fascia, 0px);
    padding: 6px 0;
    text-align: left;
}

/* la mossa sbagliata: trema come il cartello della mano del giorno */
#lezione.scuote {
    animation: scossa 0.4s ease;
}

#lezione-dentro {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: auto;
}

/* la carta di chi parla, storta e accesa del suo popolo, come nella guida
   della sala */
#lezione-chi {
    --cw: 78px;
    --ch: 111px;
    --raggio: 7px;
    flex: 0 0 auto;
    margin: 0 16px 0 8px;
    transform: rotate(-7deg);
}

.lezione-carta, .voce-carta {
    animation: viaggio-galleggia 4s ease-in-out infinite;
}

.lezione-carta .carta, .voce-carta .carta {
    box-shadow: 0 0 0 3px var(--popolo-luce), 0 0 22px var(--popolo-luce), 0 10px 18px rgba(0, 0, 0, 0.6);
}

/* Il nome di chi parla sta sulla targa, a cavallo del bordo basso della
   carta come nella guida della sala: si gira e galleggia con lei. Un nome piu'
   largo della carta ne esce dai due lati, fra il bordo dello schermo e il
   fumetto: se non ci sta va a capo. */
#lezione-chi .vg-targa {
    max-width: calc(var(--cw) + 22px);
    font-size: 11px;
    white-space: normal;
}

/* il fumetto e' quello della guida in sala, con la punta verso la carta */
#lezione-fumetto {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 13px;
    border-radius: 18px;
    background: #fdfdfb;
    color: #1c1c1e;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

#lezione-fumetto.arriva {
    animation: premio-sotto 0.35s ease both;
}

#lezione-fumetto::before {
    content: '';
    position: absolute;
    top: calc(50% - 10px);
    left: -11px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #fdfdfb;
}

#lezione-titolo {
    margin: 0 0 3px;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.15;
}

/* una riga per informazione, col filo in mezzo come in sala; a ogni passo
   arrivano una dopo l'altra */
.lezione-riga {
    margin: 0;
    padding: 3px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #34343a;
    font-size: 15px;
    line-height: 1.25;
    text-wrap: pretty;
    animation: premio-sotto 0.3s ease both;
    animation-delay: calc(var(--i) * 0.07s);
}

.lezione-riga:first-child {
    border-top: 0;
}

/* l'ultima riga e' la mossa da fare, nel colore di chi parla; dopo un errore
   e' l'aiuto, segnato dalla barra a sinistra */
.lezione-riga.lezione-azione {
    color: var(--popolo);
}

.lezione-riga.lezione-aiuto {
    padding-left: 8px;
    box-shadow: inset 3px 0 0 var(--popolo);
}

/* a che passo si e', in fondo a sinistra, e «Avanti» a destra, come nel
   piede della guida della sala */
#lezione-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

#lezione-pallini {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

#lezione-pallini i {
    width: 7px;
    height: 7px;
    margin: 2px 4px 2px 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.16);
}

#lezione-pallini i.fatto {
    background: var(--popolo);
    opacity: 0.45;
}

#lezione-pallini i.acceso {
    width: 16px;
    background: var(--popolo);
}

/* «Avanti» in fondo a destra, dove il pollice lo cerca dopo aver letto */
#lezione-avanti {
    flex: 0 0 auto;
    margin: 1px 0 0 8px;
    min-height: 40px;
    animation: entra 0.25s ease;
}

/* Telefoni medi: la fascia dell'avversario e' alta poco piu' di 200 px */
@media (max-height: 760px) {
    #lezione-chi {
        --cw: 60px;
        --ch: 86px;
        --raggio: 5px;
        margin: 0 16px 0 6px;
    }

    #lezione-chi .vg-targa {
        max-width: calc(var(--cw) + 16px);
        padding: 1px 6px 2px;
    }

    #lezione-titolo {
        font-size: 17px;
    }

    .lezione-riga {
        font-size: 14px;
    }
}

/* Telefoni medi e stretti, i 360x640 di Android: le righe vanno a capo piu'
   spesso, e in spagnolo, con l'aiuto su due righe, il fumetto scendeva di
   venti px sui bollini del mazzo e dei chiusi. Il carattere dei telefoni
   bassi a questa larghezza rimette quasi ogni riga su una. */
@media (max-height: 760px) and (max-width: 374px) {
    #lezione-titolo {
        font-size: 16px;
    }

    .lezione-riga {
        padding: 2px 0;
        font-size: 13px;
        line-height: 1.2;
    }
}

/* Telefoni bassi: la fascia e' di 160 px e sotto ci sono i pilastri da
   toccare; tutto si stringe perche' il cartello non ci scenda sopra */
@media (max-height: 620px) {
    #lezione {
        left: 6px;
        right: 6px;
        padding: 4px 0;
    }

    /* piu' in la' dal bordo, perche' la targa di «Montezuma» ci stia */
    #lezione-chi {
        --cw: 44px;
        --ch: 63px;
        --raggio: 4px;
        margin: 0 15px 0 9px;
    }

    .lezione-carta .carta {
        box-shadow: 0 0 0 2px var(--popolo-luce), 0 0 14px var(--popolo-luce), 0 6px 12px rgba(0, 0, 0, 0.6);
    }

    #lezione-fumetto {
        padding: 6px 10px;
        border-radius: 14px;
    }

    #lezione-chi .vg-targa {
        max-width: calc(var(--cw) + 20px);
        padding: 1px 4px 2px;
        border-width: 1.5px;
        font-size: 10px;
    }

    #lezione-titolo {
        margin-bottom: 1px;
        font-size: 16px;
    }

    .lezione-riga {
        padding: 2px 0;
        font-size: 13px;
        line-height: 1.2;
    }

    #lezione-avanti {
        min-height: 34px;
        margin-top: 4px;
        padding: 0 14px;
        font-size: 14px;
    }
}

/* Bassi e stretti, 320x568: nei passi 6 e 7 in spagnolo, con l'aiuto su due
   righe, il fumetto copriva i bollini e toccava i pilastri. Il carattere
   resta quello, si stringe l'aria intorno alle righe. */
@media (max-height: 620px) and (max-width: 359px) {
    #lezione {
        padding: 2px 0;
    }

    #lezione-fumetto {
        padding: 5px 9px;
    }

    #lezione-titolo {
        margin-bottom: 0;
        line-height: 1.08;
    }

    .lezione-riga {
        padding: 1px 0;
        line-height: 1.12;
    }

    #lezione-piede {
        margin-top: 3px;
    }
}

/* --- La voce dell'avversario nel viaggio (viaggio-voce-vista.js) ---------- */

/* Sopra il suo banco, a destra: il mazzetto, a sinistra, resta in vista. Non
   prende i tocchi, e la chat ci passa sopra. */
#voce {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 26px);
    left: 8px;
    right: 8px;
    z-index: 21;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    pointer-events: none;
}

/* la carta storta come nella lezione, ma dall'altra parte */
#voce-chi {
    --cw: 54px;
    --ch: 77px;
    --raggio: 5px;
    flex: 0 0 auto;
    margin: 0 6px 0 16px;
    transform: rotate(7deg);
}

#voce-chi .vg-targa {
    max-width: calc(var(--cw) + 22px);
    padding: 1px 5px 2px;
    font-size: 10px;
    white-space: normal;
}

#voce-frase {
    position: relative;
    flex: 0 1 auto;
    max-width: 250px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 16px;
    background: #fdfdfb;
    color: #1c1c1e;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    font-size: 16px;
    line-height: 1.22;
    text-wrap: pretty;
}

/* la punta verso la carta */
#voce-frase::after {
    content: '';
    position: absolute;
    top: calc(50% - 9px);
    right: -10px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 11px solid #fdfdfb;
}

/* entra la carta, poi il fumetto; se ne vanno insieme */
#voce.voce-entra #voce-chi {
    animation: voce-carta 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

#voce.voce-entra #voce-frase {
    animation: voce-fumetto 0.3s 0.15s ease both;
}

#voce.voce-esce {
    animation: voce-esce 0.25s ease forwards;
}

@keyframes voce-carta {
    0% { opacity: 0; transform: translateX(40px) rotate(18deg) scale(0.7); }
    100% { opacity: 1; transform: translateX(0) rotate(7deg) scale(1); }
}

@keyframes voce-fumetto {
    0% { opacity: 0; transform: scale(0.6); transform-origin: 100% 50%; }
    100% { opacity: 1; transform: scale(1); transform-origin: 100% 50%; }
}

@keyframes voce-esce {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Telefoni bassi: la fascia e' di 160 px */
@media (max-height: 620px) {
    #voce-chi {
        --cw: 44px;
        --ch: 63px;
        --raggio: 4px;
        margin-left: 14px;
    }

    #voce-frase {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* --- La carta che consiglia nel viaggio (viaggio-aiuto-vista.js) ----------- */

/* A sinistra, appena sopra la mano, nello spazio che le colonne lasciano sotto
   i punti: non tocca ne' le colonne ne' la mano ne' Menu. --aiuto-sotto e'
   quanto c'e' dal fondo del tavolo alla cima della mano, --aiuto-sinistra
   dove comincia per stare accanto alle colonne, e li rimisura la vista. La
   carta prende i tocchi, il fumetto no. */
#aiuto {
    position: absolute;
    left: var(--aiuto-sinistra, 12px);
    bottom: calc(var(--aiuto-sotto, 160px) + 6px);
    z-index: 21;
    pointer-events: none;
}

#aiuto-carta {
    --cw: 44px;
    --ch: 63px;
    --raggio: 5px;
    position: relative;
    display: block;
    pointer-events: auto;
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
    touch-action: manipulation;
}

#aiuto-chi .vg-targa {
    max-width: calc(var(--cw) + 20px);
    white-space: normal;
}

/* quando parla si alza un poco, e mentre pensa il consiglio pulsa */
#aiuto.parla #aiuto-carta {
    -webkit-transform: rotate(-3deg) translateY(-6px) scale(1.12);
    transform: rotate(-3deg) translateY(-6px) scale(1.12);
}

#aiuto.pensa #aiuto-carta {
    animation: aiuto-pensa 0.7s ease-in-out infinite alternate;
}

@keyframes aiuto-pensa {
    from { opacity: 1; }
    to { opacity: 0.55; }
}

/* il bollino coi consigli che restano, grigio quando sono finiti */
#aiuto-quanti {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 5;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: var(--oro);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #1c1c1e;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

#aiuto-quanti.finiti {
    background: #8a8f8c;
    color: #fff;
}

/* il fumetto si apre verso destra, nella fascia sopra la mano, coi piedi alla
   stessa altezza della carta e la punta verso di lei */
#aiuto-frase {
    position: absolute;
    left: calc(100% + 12px);
    bottom: 2px;
    width: max-content;
    max-width: min(260px, calc(100vw - 84px));
    margin: 0;
    padding: 8px 12px;
    border-radius: 16px;
    background: #fdfdfb;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    color: #1c1c1e;
    font-size: 16px;
    line-height: 1.22;
    text-wrap: pretty;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    animation: aiuto-fumetto 0.3s ease both;
}

#aiuto-frase::after {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 14px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 11px solid #fdfdfb;
}

#aiuto-frase.aiuto-esce {
    animation: voce-esce 0.25s ease forwards;
}

@keyframes aiuto-fumetto {
    0% { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}

/* La mossa consigliata: la carta e il posto dove va, d'oro, che pulsano piano.
   La carta scelta resta blu, e fra i bersagli verdi o ambra quello consigliato
   resta d'oro. */
#tavolo .carta.consigliata:not(.scelta),
#tavolo .pilastro.consigliata .carta,
#tavolo .colonna.consigliata .carta:last-child,
#tavolo .colonna.consigliata .carta.vuota,
#passo.consigliata {
    box-shadow: 0 0 0 3px #ffd75e, 0 0 16px 4px rgba(255, 215, 94, 0.8);
    animation: consigliata 1.1s ease-in-out infinite alternate;
}

#tavolo .colonna.consigliata {
    background-color: rgba(255, 215, 94, 0.14);
    box-shadow: 0 0 0 2px rgba(255, 215, 94, 0.8);
}

@keyframes consigliata {
    from { filter: brightness(1); }
    to { filter: brightness(1.15); }
}

/* l'interruttore nel Menu al tavolo: il nome della carta va a capo */
.regola.aiuto .regola-nome {
    flex: 1 1 auto;
    white-space: normal;
    line-height: 1.1;
}

.regola.aiuto .regola-nome svg {
    color: var(--oro);
}

/* Telefoni bassi, come la voce dell'avversario */
@media (max-height: 620px) {
    #aiuto-carta {
        --cw: 40px;
        --ch: 57px;
        --raggio: 4px;
    }

    #aiuto-frase {
        padding: 6px 10px;
        font-size: 14px;
    }
}