/* Il tavolo: le fasce, le colonne, la mano, la barra, la chat in rete e chi
   guarda, le carte e la carta di un personaggio, le animazioni e i pannelli
   che si aprono sopra. */

/* --- Tavolo --------------------------------------------------------------- */

#tavolo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    display: flex;
    flex-direction: column;
}

.banco {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

#avversario {
    background: var(--panel);
    padding-bottom: 6px;
}

.intestazione {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 12px 4px;
    font-size: 14px;
}

.intestazione .nome {
    font-weight: bold;
    font-size: 15px;
}

.intestazione .mano-conto {
    opacity: 0.8;
}

/* Le colonne stanno in mezzo alla riga, esattamente come i pilastri, e il
   mazzetto e' appoggiato di fianco fuori dal flusso: tenendolo in fila le
   colonne finivano spostate di mezzo mazzetto, in un verso in alto e
   nell'altro in basso, e su uno schermo largo si vedeva. */
.fila-banco {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
}

#proprio {
    padding-top: 8px;
}

/* Le colonne dei due banchi sono alte uguali, quanto dice tavolo.js: almeno
   otto carte leggibili, e sui telefoni alti tutto lo spazio che avanza. In
   pixel e non in percentuale, perche' la sovrapposizione delle carte le legge. */
.fila-banco, .colonne, .colonna {
    height: var(--colonna, calc(var(--ch) * 2.19));
}

/* il mazzetto: piu' grande, con la cornice d'oro e il conto in evidenza */
.mazzetto {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--cw) * 1.12);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#avversario .mazzetto {
    position: absolute;
    top: 0;
    right: 50%;
    margin-right: calc(var(--cw) * 2.3 + var(--stacco));
}

#proprio .mazzetto {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(var(--cw) * 2.3 + var(--stacco));
}

.mazzetto .carta {
    width: calc(var(--cw) * 1.12);
    height: calc(var(--ch) * 1.12);
    box-shadow: 0 0 0 3px var(--oro), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.mazzetto .carta.vuota {
    box-shadow: none;
    border-color: var(--oro);
}

.mazzetto .carta .valore {
    font-size: calc(var(--cw) * 0.34);
}

.mazzetto .conto {
    position: absolute;
    top: -10px;
    right: -10px;
    min-width: 26px;
    padding: 0 7px;
    border-radius: 13px;
    background: var(--oro);
    color: #1c1c1e;
    font-size: 14px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.mazzetto.finito .conto {
    background: var(--verde);
}

.mazzetto .etichetta {
    margin-top: 6px;
    color: var(--oro);
    opacity: 0.9;
}

/* I punti della partita stanno dall'altra parte delle colonne, nello spazio
   che il mazzetto lascia libero: decidono chi vince quando due passi di fila
   farebbero patta */
.punti-partita {
    position: absolute;
    top: 0;
    width: calc(var(--cw) * 1.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.punti-partita b {
    display: block;
    min-width: calc(var(--cw) * 0.9);
    padding: 3px 0;
    border-radius: var(--raggio);
    background: rgba(0, 0, 0, 0.24);
    color: var(--oro);
    font-size: calc(var(--cw) * 0.38);
    line-height: 1.25;
    text-align: center;
}

.punti-partita .etichetta {
    margin-top: 6px;
}

#avversario .punti-partita {
    left: 50%;
    margin-left: calc(var(--cw) * 2.3 + var(--stacco));
}

#proprio .punti-partita {
    right: 50%;
    margin-right: calc(var(--cw) * 2.3 + var(--stacco));
}

.colonne {
    flex: 0 1 calc(var(--cw) * 4.6);
    display: flex;
    justify-content: space-between;
}

.colonna {
    position: relative;
    width: var(--cw);
    border-radius: var(--raggio);
}

.colonna .carta {
    position: absolute;
    top: 0;
    left: 0;
}

#centro {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 8px 6px;
    background: rgba(0, 0, 0, 0.18);
}

.zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(var(--cw) * 0.05);
}

.zona .etichetta {
    margin-top: 5px;
}

.pila {
    position: relative;
    width: var(--cw);
    height: var(--ch);
}

.pila .conto {
    position: absolute;
    right: -8px;
    top: -8px;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

#pilastri {
    display: flex;
}

/* stesso passo delle colonne (1.2 carte), senno' le due file non si
   incolonnano */
.pilastro {
    position: relative;
    width: var(--cw);
    height: var(--ch);
    margin: 0 calc(var(--cw) * 0.1);
    border-radius: var(--raggio);
}

/* La mano prende lo spazio che resta e sta in basso, vicino ai pollici. Se la
   barra passa le tre righe che tavolo.js le tiene da parte, la fascia si
   stringe e perde la scritta sopra la mano, invece di spingere la barra fuori
   dallo schermo o di salire sulle colonne: si taglia solo in alto, perche' i
   bagliori delle carte scelte escono dagli altri lati. */
#mano-zona {
    flex: 1 1 auto;
    min-height: 0;
    clip-path: inset(0 -40px -40px -40px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px 6px;
}

/* Rivedendo una mossa dell'analisi la fascia della mano non cede niente: se
   la barra non ci sta deve uscire in fondo, perche' analisi-vista.js se ne
   accorga e tolga righe alla placca */
#tavolo:has(#barra.revisione) #mano-zona {
    min-height: auto;
}

#mano-etichetta {
    margin-bottom: 6px;
}

#mano {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: calc(var(--ch) + 14px);
}

#mano .carta {
    margin: 0 calc(var(--cw) * 0.06);
}

/* la barra dice cosa succede e cosa fare */
#barra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 6px 10px 8px;
    background: var(--panel);
}

#stato {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    text-align: center;
}

#stato-titolo {
    font-size: 16px;
    font-weight: bold;
}

#stato-testo {
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.82;
}

#passo {
    background: var(--ambra);
    color: #1c1c1e;
}

/* Il tempo per mossa in rete (gioca.js): quando parte il minuto il titolo
   della barra prende l'ambra, negli ultimi dieci secondi il rosso e batte.
   Il colpo lo da' partita.js a ogni secondo che cambia, insieme al tic: la
   scritta salta su in un decimo di secondo e torna giu' entro mezzo. */
#stato.tempo #stato-titolo {
    color: var(--ambra);
}

#stato.stretto #stato-titolo {
    color: #ff6b5a;
}

#stato-titolo.colpo {
    animation: tempo-colpo 0.5s linear;
}

@keyframes tempo-colpo {
    0% { transform: scale(1); animation-timing-function: ease-out; }
    18% { transform: scale(1.13); animation-timing-function: ease-in-out; }
    100% { transform: scale(1); }
}

/* I secondi dopo il nome, col cronometro del pacchetto davanti: e' uno sfondo,
   cosi' partita.js scrive solo testo e il titolo batte tutto insieme */
#stato-titolo .cronometro::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -4px 4px -3px 8px;
    vertical-align: middle;
    background: url(immagini/cronometro.png) center / contain no-repeat;
}

/* --- La chat in rete (chat.js) -------------------------------------------- */

/* Il tasto sta accanto a Menu. Dopo un fumetto riposa due secondi, e con
   l'avversario silenziato porta una riga di traverso. */
#chat-apri {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    margin-left: 6px;
    padding: 0;
}

#chat-apri svg {
    display: block;
    margin: 0 auto;
}

#chat-apri.riposa {
    opacity: 0.4;
}

#chat-apri.silenziato::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background: #ff6b5a;
    transform: rotate(-35deg);
}

/* Il fondo prende il tocco fuori dal pannello e lo chiude */
#chat-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 23;
}

/* Sopra la barra, dalla parte del tasto: le emoji in fila, le frasi due per
   riga, e in fondo Silenzia */
#chat {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
    z-index: 24;
    max-width: 420px;
    box-sizing: border-box;
    padding: 10px 10px 6px;
    border: 1px solid rgba(224, 180, 76, 0.4);
    border-radius: 16px;
    background-color: rgba(9, 24, 19, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    animation: entra 0.18s ease;
}

#chat-emoji, #chat-frasi {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.chat-emoji {
    width: 16%;
    height: 50px;
    border-radius: 12px;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
}

.chat-frase {
    width: 49%;
    min-height: 40px;
    margin-top: 6px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 15px;
    font-weight: bold;
}

.chat-emoji.premuto, .chat-frase.premuto {
    background-color: rgba(255, 255, 255, 0.22);
}

#chat-silenzia {
    display: block;
    margin: 8px auto 0;
    padding: 6px 12px;
    font-size: 13px;
    text-decoration: underline;
    opacity: 0.75;
}

/* I fumetti, in mezzo: quello dell'avversario sotto la sua intestazione, sopra
   le sue colonne e non sul mazzetto; il proprio sopra la mano, che nel suo
   turno serve scoperta. Entrano con un colpo e se ne vanno da soli. */
.fumetto {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 22;
    text-align: center;
    pointer-events: none;
}

.fumetto span {
    position: relative;
    display: inline-block;
    max-width: 80%;
    padding: 8px 14px;
    border-radius: 16px;
    background: #fdfdfb;
    color: #1c1c1e;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    font-size: 17px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
}

.fumetto.emoji span {
    padding: 2px 10px;
    font-size: 40px;
    line-height: 1.15;
}

/* Le emoji disegnate da un tema (temi.js), grandi come quelle del carattere */
.chat-emoji .fumetto-disegno {
    width: 36px;
    height: 36px;
    vertical-align: middle;
}

.fumetto.emoji .fumetto-disegno {
    display: block;
    width: 46px;
    height: 46px;
}

.fumetto span::after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
}

#fumetto-suo {
    top: calc(env(safe-area-inset-top, 0px) + 36px);
}

#fumetto-suo span {
    transform-origin: 50% 0;
}

#fumetto-suo span::after {
    top: -15px;
    border-bottom-color: #fdfdfb;
}

#fumetto-mio {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ch) + 124px);
}

#fumetto-mio span {
    transform-origin: 50% 100%;
}

#fumetto-mio span::after {
    bottom: -15px;
    border-top-color: #fdfdfb;
}

.fumetto.visibile span {
    animation: fumetto 2.6s ease forwards;
}

@keyframes fumetto {
    0% { opacity: 0; transform: scale(0.5); }
    10% { opacity: 1; transform: scale(1.08); }
    16% { transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.96); }
}

/* --- Chi guarda (tribuna.js) ---------------------------------------------- */

/* Sotto i punti di ogni parte, quanti guardano da li': blu in basso e rosso
   in alto, come le fasce del VS. Le emoji escono dal numero e scendono nel
   panno, dove non coprono carte ne' fumetti. */
.tribuna {
    position: relative;
    margin-top: 6px;
}

.tribuna-numero {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 22px;
    padding: 0 8px 0 6px;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-radius: 11px;
    color: #fff;
    font-size: clamp(13px, calc(var(--cw) * 0.27), 18px);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.tribuna-numero[hidden] {
    display: none;
}

.tribuna-numero svg {
    margin-right: 4px;
}

#proprio .tribuna-numero {
    background-image: linear-gradient(180deg, #4d88f3, #1f4fbf);
    box-shadow: 0 2px 0 #163a8e, 0 4px 10px rgba(0, 0, 0, 0.45);
}

#avversario .tribuna-numero {
    background-image: linear-gradient(180deg, #ec5a64, #b0242f);
    box-shadow: 0 2px 0 #7e1621, 0 4px 10px rgba(0, 0, 0, 0.45);
}

.tifo {
    position: absolute;
    top: 11px;
    left: 50%;
    z-index: 21;
    font-size: clamp(22px, calc(var(--cw) * 0.46), 34px);
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    animation: tifo 2s ease-out forwards;
}

.tifo img {
    display: block;
    width: 1.1em;
    height: 1.1em;
}

/* lo spostamento di lato comincia subito: due emoji partite insieme non
   restano una sull'altra */
@keyframes tifo {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    12% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px) * 0.35), 6px) scale(1.15); }
    20% { transform: translate(calc(-50% + var(--x, 0px) * 0.45), 14px) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), 84px) scale(0.9); }
}

/* --- Carte ---------------------------------------------------------------- */

/* le carte, anche quella di un giocatore (.avatar) e il suo gettone fra gli
   amici, restano col carattere di sistema: sono carte da gioco, non scritte */
.carta, .avatar, .amico-lettera {
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.carta {
    position: relative;
    box-sizing: border-box;
    width: var(--cw);
    height: var(--ch);
    border-radius: var(--raggio);
    background: #fdfdfb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #1c1c1e;
}

.carta.rossa {
    color: #c8202a;
}

.carta .valore {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: calc(var(--cw) * 0.3);
    font-weight: bold;
    line-height: 1;
}

.carta .valore.giu {
    top: auto;
    left: auto;
    right: 5px;
    bottom: 3px;
    transform: rotate(180deg);
}

.carta .seme {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 46%;
    margin: -23% 0 0 -23%;
    fill: currentColor;
}

/* una carta sotto un'altra: un bordo scuro che spunta */
.carta.impilata {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 2px 2px 0 0 #b9b9b4, 3px 3px 2px rgba(0, 0, 0, 0.4);
}

.mazzetto .carta.impilata {
    box-shadow: 0 0 0 3px var(--oro), 3px 3px 0 0 #b9b9b4, 4px 4px 3px rgba(0, 0, 0, 0.5);
}

.carta.dorso {
    background: #3a5b9c;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 4px, transparent 4px 10px);
    border: 3px solid #f2f2f4;
}

.carta.dorso.accantonata {
    background-color: #6b4c8a;
}

.carta.vuota {
    background: none;
    border: 2px dashed rgba(255, 255, 255, 0.28);
    box-shadow: none;
}

/* Le figure dei semi a tema (carte.js): il disegno sul fondo del popolo, la
   cornice iridescente, e il seme sotto la lettera. Senza isolation valore e
   semino di una figura in colonna passano sopra la carta che la copre */
.carta.figura {
    isolation: isolate;
}

.carta.figura .figura-disegno {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}

.carta.figura .valore {
    z-index: 1;
}

.carta.figura .semino {
    position: absolute;
    z-index: 1;
    top: calc(3px + var(--cw) * 0.31);
    left: 5px;
    width: calc(var(--cw) * 0.2);
    height: calc(var(--cw) * 0.2);
    fill: currentColor;
}

.carta.figura .semino.giu {
    top: auto;
    left: auto;
    bottom: calc(3px + var(--cw) * 0.31);
    right: 5px;
    transform: rotate(180deg);
}

/* In colonna l'indice sta a filo del bordo: di una carta coperta si vede solo
   lui, e piu' sta in alto piu' il passo si puo' stringere prima di coprirlo
   (PASSO_MIN in tavolo.js) */
.colonna .carta .valore:not(.giu) {
    top: 1px;
}

.colonna .carta.figura .semino:not(.giu) {
    top: calc(1px + var(--cw) * 0.31);
}

/* le carte piu' vecchie di una colonna troppo lunga, strette in cima: se ne
   vede il bordo, come di un mazzo, e non i pezzi dell'indice */
.colonna .carta.stretta .valore {
    visibility: hidden;
}

/* la coda scelta resta al suo posto, col bagliore: alzandosi coprirebbe
   meta' dell'indice della carta sotto, al passo minimo */
.colonna .carta.scelta {
    transform: none;
}

.carta.figura::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--raggio);
    padding: calc(var(--cw) * 0.045);
    background: linear-gradient(135deg, #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-composite: exclude;
    pointer-events: none;
}

.carta.popolo-sakura {
    background: radial-gradient(circle at 50% 31%, rgba(208, 48, 46, 0.18) 0 25%, transparent 26%),
        radial-gradient(ellipse at 50% 40%, #fffaf5 0%, #fdeee6 45%, #f4c9bb 100%);
}

.carta.popolo-cavallo {
    background: radial-gradient(ellipse at 50% 40%, #fbfcff 0%, #e9effc 45%, #c4d2f0 100%);
}

.carta.popolo-aquila {
    background: radial-gradient(ellipse at 50% 40%, #fffdf6 0%, #fbf0d6 45%, #ecd196 100%);
}

.carta.popolo-nave {
    background: radial-gradient(ellipse at 50% 40%, #fbfdfb 0%, #e5f1e7 45%, #bcd8c3 100%);
}

.carta.popolo-torre {
    background: radial-gradient(ellipse at 50% 40%, #fdfbff 0%, #eee5fb 45%, #cdb6ef 100%);
}

.carta.popolo-sole {
    background: radial-gradient(circle at 50% 31%, rgba(239, 189, 58, 0.28) 0 25%, transparent 26%),
        radial-gradient(ellipse at 50% 40%, #fbfffd 0%, #e2f6f1 45%, #a9ddd2 100%);
}

.carta.popolo-luna {
    background: radial-gradient(ellipse at 50% 40%, #f8f7fd 0%, #e2def4 45%, #b5addb 100%);
}

.carta.popolo-stella {
    background: radial-gradient(ellipse at 50% 40%, #fffaf2 0%, #f8e6cc 45%, #e8be8a 100%);
}

/* sorgenti e bersagli */
.carta.giocabile {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mazzetto .carta.giocabile {
    box-shadow: 0 0 0 3px var(--oro), 0 0 14px var(--oro);
    animation: pulsa 1.2s ease-in-out infinite;
}

.carta.scelta {
    box-shadow: 0 0 0 3px var(--blu), 0 0 12px var(--blu);
    transform: translateY(-6px);
}

#mano .carta.scelta {
    transform: translateY(-12px);
}

.pilastro.bersaglio .carta, .colonna.bersaglio .carta:last-child, .colonna.bersaglio .carta.vuota {
    box-shadow: 0 0 0 3px var(--verde), 0 0 14px var(--verde);
}

.colonna.rompe .carta:last-child {
    box-shadow: 0 0 0 3px var(--ambra), 0 0 14px var(--ambra);
}

/* La colonna prende il tocco per tutta la sua altezza, e da bersaglio si
   accende tutta: con la sola carta in cima accesa il fondo sembrava panno, e
   chi lo toccava per ripensarci si trovava la carta posata, spesso stoppando.
   Ombra e sfondo, non bordo: il bordo cambierebbe l'altezza su cui impila()
   stringe le carte. */
.colonna.bersaglio {
    background-color: rgba(46, 204, 64, 0.16);
    box-shadow: 0 0 0 2px rgba(46, 204, 64, 0.75);
}

.colonna.rompe {
    background-color: rgba(244, 167, 46, 0.16);
    box-shadow: 0 0 0 2px rgba(244, 167, 46, 0.75);
}

/* il segno di stop sulla colonna che chiuderebbe il turno */
.colonna.rompe::after {
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ambra);
    box-shadow: 0 0 0 2px var(--bg);
    z-index: 1;
}

.carta.premuto {
    opacity: 0.85;
}

/* la carta vera resta nascosta finche' il suo clone non arriva */
.carta.in-volo {
    visibility: hidden;
}

#tavolo.turno-bot #mano .carta,
#tavolo.turno-bot #proprio .carta,
#tavolo.turno-bot .pilastro {
    pointer-events: none;
}

/* --- La carta di un personaggio (targa.js) -------------------------------- */

/* Il colore del popolo, per la targa, l'alone e chi parla nel fumetto: quello
   del fondo delle sue figure, scurito per la scritta bianca */
.vg-popolo-sakura { --popolo: #c8323a; --popolo-luce: #ffb3b8; }
.vg-popolo-stella { --popolo: #b4651c; --popolo-luce: #ffd08f; }
.vg-popolo-aquila { --popolo: #a87516; --popolo-luce: #ffe08a; }
.vg-popolo-sole { --popolo: #138272; --popolo-luce: #8ff0dc; }
.vg-popolo-cavallo { --popolo: #2f5bb5; --popolo-luce: #a9c4ff; }
.vg-popolo-torre { --popolo: #7046c2; --popolo-luce: #d2b8ff; }
.vg-popolo-nave { --popolo: #2a7a4b; --popolo-luce: #a6e8bf; }
.vg-popolo-luna { --popolo: #6b4cc4; --popolo-luce: #c9b8ff; }

/* Il nome sul bordo basso della carta, nella pastiglia del colore del popolo,
   a cavallo del bordo. Sta in un contenitore grande quanto la carta e non
   dentro la carta, perche' la carta consumata taglia quello che ne esce, e
   prende il --cw del contenitore. Su una riga sta meta' sulla carta e meta'
   fuori; dove una scena la lascia andare a capo, la seconda riga deve scendere
   e non salire sulla figura: per questo l'altezza si toglie in em dal top, e
   non con un translate. */
.vg-con-targa {
    position: relative;
    display: block;
    width: max-content;
}

.vg-targa {
    --vg-su: calc(0.55em + 5.5px);
    position: absolute;
    left: 50%;
    top: calc(100% - var(--vg-su));
    z-index: 4;
    box-sizing: border-box;
    width: max-content;
    padding: 3px 12px 4px;
    border: 2px solid #fff;
    border-radius: 13px;
    transform: translateX(-50%);
    background: var(--popolo, #6b4cc4);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: clamp(13px, calc(var(--cw) * 0.095), 17px);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    text-wrap: balance;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* su una carta da 60 a 100 px, come quella della guida della sala */
.vg-targa.vg-targa-media {
    --vg-su: calc(0.55em + 4.5px);
    padding: 2px 9px 3px;
    border-radius: 11px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.45);
    font-size: clamp(11px, calc(var(--cw) * 0.16), 13px);
}

/* su una carta da 30 a 50 px, come le soste della mappa */
.vg-targa.vg-targa-piccola {
    --vg-su: calc(0.55em + 3px);
    padding: 1px 6px 2px;
    border-width: 1.5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    font-size: clamp(10px, calc(var(--cw) * 0.25), 11px);
}

/* La carta del nonno, consumata da mille partite: niente cornice iridescente
   (la regola sta dopo quella della figura apposta), angoli smussati e ognuno
   un po' diverso, tinta seppia, bordi scuriti, due graffi e una piega. Sta
   sulla carta stessa, figura o dorso, cosi' la porta dovunque vada: basta la
   classe. L'iridescenza torna alla fine del viaggio, ed e' il premio. */
.carta.vg-consumata {
    overflow: hidden;
    border-radius: 16% 11% 15% 10% / 11% 8% 10% 7%;
    filter: sepia(0.62) saturate(0.78) brightness(0.96) contrast(0.95);
}

/* il blu del dorso, tutto seppia, diventerebbe grigio: sbiadito e basta */
.carta.dorso.vg-consumata {
    filter: sepia(0.38) saturate(0.85) brightness(0.95);
}

.carta.vg-consumata::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0;
    border-radius: inherit;
    -webkit-mask: none;
    mask: none;
    background:
        linear-gradient(104deg, transparent 61%, rgba(255, 249, 232, 0.45) 61.6%, rgba(96, 62, 22, 0.22) 62.4%, transparent 63.2%),
        radial-gradient(circle at 18% 86%, rgba(255, 249, 232, 0.6) 0 1.2%, transparent 1.7%),
        radial-gradient(circle at 76% 18%, rgba(255, 249, 232, 0.55) 0 0.9%, transparent 1.4%),
        radial-gradient(circle at 61% 74%, rgba(96, 62, 22, 0.28) 0 1%, transparent 1.5%),
        radial-gradient(ellipse at 0 0, rgba(110, 72, 26, 0.45), transparent 15%),
        radial-gradient(ellipse at 100% 0, rgba(110, 72, 26, 0.32), transparent 12%),
        radial-gradient(ellipse at 100% 100%, rgba(110, 72, 26, 0.45), transparent 15%),
        radial-gradient(ellipse at 0 100%, rgba(110, 72, 26, 0.3), transparent 12%);
    box-shadow: inset 0 0 0 1px rgba(96, 62, 22, 0.35), inset 0 0 calc(var(--cw) * 0.09) rgba(110, 72, 26, 0.55);
    pointer-events: none;
}

/* --- Animazioni: cloni, lampi, coriandoli, banner ------------------------- */

#strato {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.clone {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

/* la figura che chiude un pilastro: grande sopra di lui, col suo alone */
.clone.alzata {
    box-shadow: 0 0 0 1px rgba(255, 214, 120, 0.9), 0 0 16px 5px rgba(255, 200, 87, 0.65), 0 8px 16px rgba(0, 0, 0, 0.5);
}

.lampo {
    box-sizing: border-box;
    border-radius: var(--raggio);
    border: 4px solid var(--oro);
    box-shadow: 0 0 18px var(--oro);
    animation: lampo 0.8s ease-out forwards;
}

.coriandolo {
    position: fixed;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    z-index: 21;
    animation: coriandolo 1.1s ease-in forwards;
}

.batte {
    animation: batte 0.45s ease;
}

/* +10 e +5 che salgono da un pilastro (animazioni.js). Il nome e' lungo
   apposta: con un .sale e basta prendeva anche il podio della classifica, che
   per la sua salita porta la classe sale, e lo faceva volare via. */
.punti-sale {
    position: fixed;
    z-index: 21;
    color: var(--oro);
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: punti-sale 1.3s ease-out forwards;
}

@keyframes punti-sale {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    15% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
    30% { transform: translate(-50%, -90%) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}

#banner {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 15;
    box-sizing: border-box;
    max-width: 90%;
    padding: 14px 30px;
    border-radius: 40px;
    background: rgba(14, 30, 25, 0.94);
    box-shadow: 0 0 0 2px var(--oro), 0 10px 30px rgba(0, 0, 0, 0.5);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
}

#banner.visibile {
    animation: banner 1.6s ease forwards;
}

@keyframes lampo {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}

@keyframes coriandolo {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    35% { transform: translate(calc(var(--dx) * 0.4), -70px) rotate(200deg); opacity: 1; }
    100% { transform: translate(var(--dx), 170px) rotate(560deg); opacity: 0; }
}

@keyframes batte {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@keyframes pulsa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes banner {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    25% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* --- Pannelli sovrapposti ------------------------------------------------- */

/* I pannelli sopra il tavolo. Come il menu, si centrano quando ci stanno e
   scorrono quando non ci stanno: la schermata di fine partita ha fino a tre
   righe di testo e tre pulsanti, e su un telefono piccolo si accavallavano. */
.sopra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    box-sizing: border-box;
    padding: 28px 24px;
    background-color: var(--sopra);
    background-image: var(--sopra-luce);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

.sopra > * {
    flex: 0 0 auto;
}

.sopra .grande {
    width: 100%;
    max-width: 300px;
    margin-bottom: 12px;
}

.sopra .piccolo {
    margin-bottom: 6px;
}

/* dopo i pulsanti, senno' il loro margine vince e il pannello si appoggia in
   fondo invece di stare in mezzo */
.sopra > :first-child {
    margin-top: auto;
}

.sopra > :last-child {
    margin-bottom: auto;
}

.sopra p {
    margin: 0 0 20px;
    font-size: 22px;
}

.sopra p.nota {
    font-size: 15px;
    opacity: 0.7;
}

#fine-testo {
    font-size: 32px;
    font-weight: bold;
}

/* la patta dice a chi vanno i suoi due punti una riga per uno (rigaPatta) */
#fine-dettaglio {
    opacity: 0.8;
    font-size: 17px;
    white-space: pre-line;
}

/* a chi perde a zero, che sotto non scende, e sotto il posto (testoPunti) */
#fine-punti {
    white-space: pre-line;
}

#fine-menu {
    margin-top: 14px;
}