/* Puzzle: la casa con le vite e le tessere, l'attesa a vite finite e com'e'
   andato un puzzle del Mix. Le scene sono .vg-scena come quelle del viaggio
   (stile-viaggio.css), coi suoi pezzi; le classi cominciano con pz-. Il
   pulsante del menu e le tessere stanno in stile-menu.css, accanto al
   cartello del puzzle del giorno. Qui anche la scena di Streak e Storm, con
   la classifica fatta delle righe della sala (.riga-conto), e il tavolo dei
   puzzle, senza il banco dell'avversario e con l'orologio della Storm. */

#puzzle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* In cima il tasto per tornare e, dall'altra parte, le vite */
.pz-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 520px;
    min-height: 44px;
}

.pz-vite {
    padding: 4px 10px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.25);
}

.pz-corpo {
    max-width: 360px;
}

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

.vg-scena p.pz-attesa {
    margin-bottom: 14px;
    font-size: 16px;
    opacity: 0.85;
}

.pz-tessera {
    width: 100%;
    min-height: 74px;
    margin-bottom: 14px;
    padding: 8px 56px;
    white-space: normal;
}

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

/* --- Com'e' andato un puzzle del Mix ------------------------------------- */

#mix-fine-passo {
    margin-bottom: 8px;
    color: var(--oro);
    font-size: 12px;
}

#mix-fine-testo {
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: bold;
}

#mix-quadri {
    margin-bottom: 14px;
    font-size: 30px;
    letter-spacing: 3px;
}

/* con gli obiettivi, sotto le carte uno per riga */
#mix-fine-dettaglio {
    font-size: 17px;
    opacity: 0.85;
    white-space: pre-line;
}

/* Quanto e' cambiato il punteggio, grande, e sotto il punteggio: una cosa
   per riga */
#mix-cambio {
    margin: 4px 0 0;
    font-size: 40px;
    line-height: 1;
    animation: cer-timbro 0.5s 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

#mix-cambio.pz-sale {
    color: #7ee08a;
}

#mix-cambio.pz-scende {
    color: #ff8a7a;
}

#mix-punteggio {
    color: var(--oro);
    font-size: 18px;
}

#mix-vite {
    margin: 4px 0 16px;
}

/* --- La scena di Streak e Storm ------------------------------------------ */

/* Com'e' andata l'ultima partita, in cima: il numero grande, una cosa per
   riga */
.pz-esito {
    margin-bottom: 14px;
}

.vg-scena p.pz-esito-titolo {
    font-size: 20px;
    opacity: 0.85;
}

.vg-scena p.pz-esito-quanti {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.1;
    animation: cer-timbro 0.5s 0.2s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.vg-scena p.pz-esito-record {
    color: var(--oro);
    font-size: 20px;
    font-weight: bold;
}

.pz-record p {
    font-size: 17px;
}

.pz-gioca {
    margin: 14px 0 18px;
}

/* La classifica, i primi dieci: le righe sono quelle della sala */
.pz-classifica {
    width: 100%;
}

.vg-scena p.pz-classifica-titolo {
    margin-bottom: 6px;
    color: var(--oro);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.pz-classifica .riga-conto {
    text-align: left;
}

.pz-entra {
    white-space: normal;
}

/* --- Il tavolo dei puzzle -------------------------------------------------- */

/* Il banco dell'avversario non si vede, come nella lezione: la fascia resta
   alta com'era, col cartello #guida in cima (partita.js) */
#tavolo.senza-avversario #avversario > * {
    visibility: hidden;
}

/* Quando il puzzle chiede di non lasciargli la carta in cima, il suo
   mazzetto si vede: e' l'unica sua carta che conta. Sta in fondo alla
   fascia, perche' in cima c'e' il cartello con gli obiettivi */
#tavolo.senza-avversario.sua-cima #avversario .mazzetto {
    top: auto;
    bottom: 8px;
    visibility: visible;
}

/* Gli obiettivi stanno nel cartello uno per riga */
#tavolo.senza-avversario #guida-testo {
    white-space: pre-line;
}

/* L'orologio della Storm e' la pillola della riserva della Blitz
   (stile-blitz.css) a 2,6 volte, perche' li' e' la cosa che conta di piu':
   39 px su un telefono da 390, 37 su uno da 375x667, dove fra il cartello e
   i pilastri ci sta ancora. Sta sopra la fila di pesca, pilastri e chiusi,
   nella fascia vuota, e non prende tocchi: il bersaglio restano i pilastri. */
#tavolo.senza-avversario #centro {
    position: relative;
}

#orologio {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin: 0 0 12px;
    padding: 8px 23px 8px 10px;
    font-size: calc(var(--cw) * 0.78);
    transform: translateX(-50%);
    pointer-events: none;
}

#orologio::before {
    width: calc(var(--cw) * 0.78);
    height: calc(var(--cw) * 0.78);
    margin-right: 10px;
}

/* Il puzzle perso manda nell'orologio la pillola dei secondi, rossa invece
   che verde: sono dieci in meno. */
.bonus-tempo.multa {
    background: #c8412f;
}

/* --- La carta che chiede di salvare i progressi -------------------------- */

#pz-salva-titolo {
    margin-bottom: 10px;
}

#pz-salva-riga {
    margin-bottom: 18px;
    font-size: 17px;
    opacity: 0.9;
}

/* Il tasto e' quello della carta di sicuro.js, che pulsa */
#pz-salva-si {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulsa 1.6s 1s ease-in-out infinite;
}

#pz-salva-si svg {
    margin-right: 10px;
    fill: currentColor;
}

/* --- Nel profilo (profilo.js) --------------------------------------------- */

/* La riga del Mix, sotto la strada e fatta come lei */
.figurina-puzzle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
}

.figurina-puzzle-nome {
    margin-right: 8px;
    color: #f7e3a8;
}