/* Le stagioni, la maglia d'oro e le medaglie. */

/* --- Stagioni, maglia e medaglie ------------------------------------------ */

/* La classifica in rete va a stagioni di un mese: in testa il mese, quanto
   manca e chi porta la maglia d'oro, poi il podio a gradini nei tre metalli
   con le medaglie col numero e sotto il resto. Ogni nome si tocca e apre il
   profilo. Maglia e medaglie sono SVG (medaglie.js), le medaglie con dentro le
   immagini del pacchetto, e stanno in riga col testo. */

.maglia, .medaglia-svg {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.maglia svg, .medaglia-svg svg {
    display: block;
    overflow: visible;
}

.maglia.accanto {
    margin: -3px 0 -3px 6px;
}

/* Chi porta la maglia ha il nome d'oro per tutto il mese, dovunque il nome stia
   da solo. Il colore e' quello di --oro, e il contorno nero dei nomi del VS
   resta. Nel cartello di fine l'oro e' di chi vince. */
.nome-oro,
#avversario.con-maglia .intestazione .nome {
    color: var(--oro);
}

.tocca {
    cursor: pointer;
}

.tocca.premuto {
    opacity: 0.7;
}

/* Al tavolo il nome dell'avversario si riscrive a ogni mossa: la maglia e' uno
   sfondo, in --maglia, che il nome si porta dietro */
#avversario.con-maglia .intestazione .nome::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    vertical-align: -3px;
    background-image: var(--maglia);
    background-size: contain;
    background-repeat: no-repeat;
}

/* Sotto «Gioca online»: a che punto sei nella stagione, o che e' finita */
#stagione-menu {
    max-width: 300px;
    margin: -4px 0 12px;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    opacity: 0.8;
}

#stagione-menu.finita {
    color: var(--oro);
    font-weight: bold;
    opacity: 1;
    animation: stagione-richiama 1.8s ease-in-out infinite;
}

@keyframes stagione-richiama {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Sotto la stagione l'evento della settimana che sta nel posto della sala,
   col suo segno e il suo colore */
#evento-menu {
    max-width: 300px;
    margin: -6px 0 12px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
}

#evento-menu.evento-sabato {
    color: #ffb27a;
}

#evento-menu.evento-sudden {
    color: #ff9aa2;
}

#evento-menu.evento-serata {
    color: #a9cbff;
}

#evento-menu > :first-child {
    margin-right: 5px;
    vertical-align: -4px;
}

/* Sotto ancora il canale: in fondo, sotto la firma, dal gioco non era
   entrato nessuno */
#canale {
    max-width: 300px;
    margin: -8px 0 8px;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    opacity: 0.8;
}

#online-profilo {
    margin-left: auto;
    margin-right: 0;
}

#online-maglia {
    margin: 4px 0 2px;
    font-size: 15px;
    font-weight: bold;
    color: var(--oro);
}

#online-maglia .maglia {
    margin-right: 8px;
}

.stagione-testa {
    max-width: 380px;
    margin: 0 auto;
}

.stagione-nome, .cer-mese {
    font-weight: bold;
    color: var(--oro);
    background-image: linear-gradient(#fbeec2, #e0b44c 55%, #b98c28);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stagione-nome {
    font-size: 25px;
}

.stagione-tempo {
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* gli ultimi tre giorni la maglia e' ancora in palio: si dice in ambra */
.stagione-tempo.ultimi {
    color: var(--ambra);
    opacity: 1;
}

.stagione-maglia {
    margin-top: 10px;
    font-size: 14px;
}

.stagione-maglia .maglia {
    margin-right: 8px;
}

.stagione-campione {
    font-weight: bold;
    color: var(--oro);
}

.stagione-schede {
    margin: 12px 0 2px;
}

#online-corpo .stagione-schede .piccolo {
    min-height: 34px;
    margin: 0 4px;
    padding: 0 16px;
    font-size: 14px;
}

.piccolo.scelta {
    background-color: rgba(224, 180, 76, 0.24);
    box-shadow:
        0 0 0 1px rgba(224, 180, 76, 0.7) inset,
        0 3px 8px rgba(0, 0, 0, 0.25);
    color: #f7e3a8;
}

.podio {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: 380px;
    margin: 18px auto 4px;
}

.gradino {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gradino .chi {
    max-width: 100%;
    margin: 6px 0;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gradino.io .chi {
    color: #a9c6ff;
}

.gradino .base {
    box-sizing: border-box;
    width: 100%;
    padding-top: 10px;
    border-radius: 12px 12px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -3px 0 rgba(0, 0, 0, 0.18) inset,
        0 6px 14px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.gradino.primo .base {
    height: 100px;
    background-image: linear-gradient(#f7e08f, #e0b44c 55%, #b98c28);
    color: #3b2a0a;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -3px 0 rgba(0, 0, 0, 0.18) inset,
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(224, 180, 76, 0.35);
}

.gradino.secondo .base {
    height: 80px;
    background-image: linear-gradient(#f4f6f7, #cfd4d8 55%, #9aa1a7);
    color: #262b30;
}

.gradino.terzo .base {
    height: 64px;
    background-image: linear-gradient(#f0c39a, #cd8f52 55%, #8e5a2c);
    color: #3a2210;
}

.gradino.vuoto .base {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.base .pt {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.base .pt-parola {
    font-size: 11px;
    opacity: 0.75;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* il podio sale una volta per ogni entrata in sala: prima il terzo, poi il
   secondo, per ultimo il primo */
.podio.sale .gradino {
    animation: podio-sale 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

.podio.sale .terzo { animation-delay: 0.05s; }
.podio.sale .secondo { animation-delay: 0.2s; }
.podio.sale .primo { animation-delay: 0.38s; }

@keyframes podio-sale {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Le medaglie col numero del pacchetto sono alte 108 px: piu' grandi di
   36 px su un iPhone si sgranerebbero, e il primo prende tutto quello che c'e' */
.medaglia-posto {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.medaglia-posto.mini {
    width: 24px;
    height: 24px;
}

.gradino.primo .medaglia-posto {
    width: 38px;
    height: 38px;
}

.gettone.oro, .cer-disco.oro {
    background-image: linear-gradient(#f7e08f, #e0b44c 55%, #b98c28);
    color: #3b2a0a;
}

.gettone.argento, .cer-disco.argento {
    background-image: linear-gradient(#f4f6f7, #cfd4d8 55%, #9aa1a7);
    color: #262b30;
}

.gettone.bronzo, .cer-disco.bronzo {
    background-image: linear-gradient(#f0c39a, #cd8f52 55%, #8e5a2c);
    color: #3a2210;
}

.stagione-spinta {
    max-width: 340px;
    margin: 12px auto 6px;
    font-size: 14px;
    color: #f7e3a8;
}

.riga-conto .nome-conto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riga-conto.fuori {
    margin-top: 14px;
}

.stagione-prima {
    margin: 24px 0 6px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.albo-stagione, .stagione-corpo .albo-podio {
    max-width: 380px;
    margin: 10px auto;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 3px 8px rgba(0, 0, 0, 0.28);
    text-align: left;
}

.albo-mese {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: bold;
}

.albo-riga, .cer-podio-riga {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-size: 15px;
    text-align: left;
}

.albo-riga .maglia.accanto, .cer-podio-riga .maglia.accanto {
    margin: 0 10px 0 0;
}

/* 24 piu' 6 come la maglia, 20 piu' 10: i nomi partono allo stesso punto */
.albo-riga .medaglia-posto, .cer-podio-riga .medaglia-posto {
    margin: -2px 6px -2px 0;
}

.albo-riga .nome-conto, .cer-podio-riga .nome-conto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.albo-riga .punti, .cer-podio-riga .punti {
    margin-left: 10px;
    font-size: 13px;
    opacity: 0.7;
    white-space: nowrap;
}

/* I coriandoli della fine della stagione: sopra i pannelli, dove quelli del
   tavolo non arrivano */
#festa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 35;
    pointer-events: none;
}

/* La fine della stagione: i blocchi entrano uno alla volta, e finche' non si
   vedono non si toccano, cosi' un tocco a vuoto non chiude la cerimonia */
#cerimonia {
    width: 100%;
    max-width: 380px;
}

.cer-blocco {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

.cer-blocco.cer-visto {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cer-titolo {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.65;
}

.cer-mese {
    margin: 2px 0 18px;
    font-size: 40px;
}

.cer-posto {
    margin-bottom: 6px;
}

.cer-disco {
    display: inline-block;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    line-height: 112px;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.55) inset,
        0 -5px 0 rgba(0, 0, 0, 0.2) inset,
        0 12px 30px rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cer-disco.semplice {
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
    color: var(--fg);
    text-shadow: none;
}

.cer-numero {
    font-size: 44px;
    font-weight: bold;
}

.cer-posto.cer-visto .cer-disco {
    animation: cer-timbro 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes cer-timbro {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

.cer-su {
    margin-top: 10px;
    font-size: 15px;
    opacity: 0.75;
}

.cer-assente .cer-su {
    margin: 4px 0 20px;
}

.cer-numeri {
    display: flex;
    justify-content: center;
    margin: 12px 0 20px;
}

.cer-numero-voce {
    margin: 0 14px;
}

.cer-cifra {
    font-size: 26px;
    font-weight: bold;
}

.cer-parola, .cer-etichetta {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cer-medaglie {
    margin-bottom: 20px;
}

.cer-etichetta {
    margin-bottom: 10px;
    font-size: 12px;
}

/* Fin dove e' arrivato sulla strada, con la strada in piccolo (strada.js) */
.cer-strada {
    max-width: 280px;
    margin: 0 auto 20px;
}

.cer-strada .strada-piccola {
    margin: 6px 0 4px;
}

.cer-strada .cer-etichetta {
    margin-bottom: 2px;
}

.cer-strada .cer-su {
    margin-top: 2px;
}

.cer-carte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Le medaglie si girano come carte: il dorso e' quello del tavolo */
.cer-carta {
    width: 76px;
    height: 106px;
    margin: 5px;
    perspective: 600px;
}

.cer-giro {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.cer-carta.girata .cer-giro {
    transform: rotateY(0deg);
}

.cer-retro, .cer-fronte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

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

/* La faccia bianca di una medaglia, la stessa qui e nel profilo (medaglie.js) */
.carta-medaglia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px 4px;
    border-radius: 8px;
    background: #fdfdfb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    color: #1c1c1e;
}

.carta-medaglia-nome {
    margin-top: 6px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
}

.cer-maglia {
    margin: 6px 0 14px;
}

/* la maglia scende dall'alto, con un alone d'oro che respira dietro */
.cer-maglia-disegno {
    position: relative;
    z-index: 0;
}

.cer-maglia-disegno::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(224, 180, 76, 0.45) 0%, rgba(224, 180, 76, 0) 62%);
    animation: cer-alone 2.4s ease-in-out infinite;
}

.cer-maglia.cer-visto .cer-maglia-disegno {
    animation: cer-scende 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes cer-scende {
    0% { opacity: 0; transform: translateY(-60px) rotate(-12deg) scale(0.6); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes cer-alone {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

.cer-maglia-sotto {
    margin-top: 10px;
    font-size: 15px;
    opacity: 0.8;
}

.cer-maglia-nome {
    margin-top: 4px;
    font-size: 28px;
    font-weight: bold;
    color: var(--oro);
}

.cer-maglia.tua .cer-maglia-nome {
    margin-top: 10px;
    font-size: 30px;
}

.cer-podio {
    max-width: 300px;
    margin: 0 auto 16px;
}

.cer-podio-riga .nome-conto {
    font-weight: bold;
}

.cer-poi-testo {
    margin: 4px 0 20px;
    font-size: 15px;
    line-height: 1.4;
    opacity: 0.8;
}

/* L'invito al canale, attaccato alla riga di prima: dice dove si rivede il
   podio, non e' un passo in piu' della cerimonia. L'opacita' sta sul testo e
   non sul blocco, che la usa per entrare */
.cer-canale-testo {
    margin: -14px 0 18px;
    font-size: 15px;
    opacity: 0.75;
}

/* Le medaglie prese in partita, tornando in sala: le carte della cerimonia,
   grandi come la medaglia toccata nel profilo. I raggi stanno fermi sullo
   schermo e non nel pannello, che deve poter scorrere: tre medaglie su un
   telefono basso, o girato, non ci stanno. */
#medaglie-nuove::before {
    position: fixed;
}

#medaglie-nuove.arriva #medaglie-nuove-titolo {
    animation: cer-timbro 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

#medaglie-nuove-carte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 6px 0 22px;
}

#medaglie-nuove .cer-carta {
    width: 168px;
    height: 220px;
    margin: 6px;
    perspective: 900px;
}

#medaglie-nuove-carte.piu .cer-carta {
    width: 140px;
    height: 196px;
    margin: 5px;
}

#medaglie-nuove.arriva .cer-carta {
    animation: premio-arriva 0.6s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

#medaglie-nuove .cer-retro, #medaglie-nuove .cer-fronte {
    border-radius: 14px;
}

#medaglie-nuove .cer-retro {
    border-width: 5px;
}

#medaglie-nuove .carta-medaglia {
    padding: 14px 10px;
}

#medaglie-nuove .carta-medaglia-nome {
    margin-top: 10px;
    font-size: 19px;
}

#medaglie-nuove .carta-medaglia-sotto {
    margin-top: 6px;
    font-size: 15px;
    text-wrap: balance;
}

/* in fila le medaglie stanno alla stessa altezza, anche se il perche' di una
   va a capo e quello dell'altra no */
#medaglie-nuove-carte.piu .carta-medaglia {
    justify-content: flex-start;
    padding-top: 22px;
}

#medaglie-nuove-carte.piu .carta-medaglia-nome {
    margin-top: 8px;
    font-size: 16px;
}

#medaglie-nuove-carte.piu .carta-medaglia-sotto {
    font-size: 13px;
}

/* sull'iPad c'e' posto: le carte crescono come il VS, e tre stanno in fila */
@media (min-width: 700px) and (min-height: 700px) {
    #medaglie-nuove-titolo {
        font-size: 50px;
    }

    #medaglie-nuove .cer-carta {
        width: 230px;
        height: 300px;
        margin: 9px;
    }

    #medaglie-nuove-carte.piu .cer-carta {
        width: 204px;
        height: 276px;
    }

    #medaglie-nuove .medaglia-svg svg {
        width: 150px;
        height: 150px;
    }

    #medaglie-nuove-carte.piu .medaglia-svg svg {
        width: 124px;
        height: 124px;
    }

    #medaglie-nuove .carta-medaglia-nome {
        font-size: 26px;
    }

    #medaglie-nuove .carta-medaglia-sotto {
        font-size: 19px;
    }

    #medaglie-nuove-carte.piu .carta-medaglia-nome {
        font-size: 22px;
    }

    #medaglie-nuove-carte.piu .carta-medaglia-sotto {
        font-size: 17px;
    }
}

/* Il profilo: la figurina, e nel proprio le ultime partite sotto. Parte
   dall'alto invece di stare in mezzo: girando la figurina cambia altezza, e
   centrata avrebbe saltato su e giu'. */
#scheda-dentro {
    width: 100%;
    max-width: 380px;
}

/* La X resta in alto mentre si scorre, ed e' l'unico pulsante per uscire,
   con l'indietro del telefono. Ha il posto dell'altoparlante nel menu, e il
   profilo comincia sotto di lei: un nome lungo su un telefono stretto ci
   finiva sotto. */
#scheda {
    padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
}

#scheda-x {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    z-index: 1;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border-radius: 22px;
}

#scheda-x svg {
    display: block;
    margin: 0 auto;
}

#scheda .titoletto {
    margin: 24px auto 10px;
    font-size: 13px;
}

.scheda-testa {
    display: flex;
    align-items: center;
    text-align: left;
}

/* L'immagine di un giocatore (carte.js). Le misure sono in em: profilo, VS e
   cartello di fine la vogliono di grandezze diverse e cambiano solo il
   font-size. */
.avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.82em;
    height: 4em;
    border-radius: 0.36em;
    background: #fdfdfb;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    color: #1c1c1e;
    font-size: 22px;
}

.avatar.rossa {
    color: #c8202a;
}

.avatar.con-maglia {
    box-shadow:
        0 0 0 3px var(--oro),
        0 0 22px rgba(224, 180, 76, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.45);
}

.avatar-iniziale {
    position: absolute;
    top: 0.23em;
    left: 0.32em;
    font-weight: bold;
    line-height: 1;
}

.avatar-seme {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.36em;
    height: 1.36em;
    margin: -0.36em 0 0 -0.68em;
    fill: currentColor;
}

.scheda-carta {
    margin-right: 14px;
    font-size: 19px;
}

.scheda-chi {
    min-width: 0;
}

.scheda-nome {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.15;
    word-break: break-word;
}

.scheda-dal {
    margin-top: 4px;
    font-size: 13px;
    opacity: 0.6;
}

/* La tessera piccola del tema sotto il nome (temi.js): la miniatura del suo
   tavolo e il nome. A chi non ce l'ha di suo e' un pulsante. */
.tema-cartellino {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 12px 3px 3px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.24);
    box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.4) inset;
    color: #ffe2a8;
    font-size: 13px;
    white-space: nowrap;
}

.tema-cartellino .tema-mini {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 13px;
}

.tema-cartellino .tema-mini i {
    width: 12px;
    height: 17px;
    margin: -8.5px 0 0 -6px;
    border-width: 1px;
    border-radius: 2px;
}

button.tema-cartellino.premuto {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

/* La propria carta si tocca per cambiare seme: lo dice la matita nell'angolo */
.avatar.cambia {
    cursor: pointer;
}

.scheda-matita {
    position: absolute;
    right: -0.36em;
    bottom: -0.36em;
    width: 1.18em;
    height: 1.18em;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.scheda-matita circle {
    fill: var(--blu);
}

.scheda-matita path {
    fill: #fff;
}

/* Il proprio nome, finche' lo si puo' cambiare: la stessa matita, accanto */
.scheda-nome.cambia {
    cursor: pointer;
}

.scheda-nome .scheda-matita {
    position: relative;
    right: auto;
    bottom: auto;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.3em;
    vertical-align: -0.08em;
}

/* I semi sopra il profilo, in quattro colonne: il seme di sempre e sotto i
   semi a tema che ne prendono il posto. In una fila sola, centrata, dal
   secondo seme a tema la fila usciva dallo schermo da tutte e due le parti, e
   quello uscito a sinistra non si raggiungeva. Quello di adesso si alza col
   bordo blu, come una carta scelta al tavolo */
#semi-carte {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 12px 0 34px;
}

.semi-colonna {
    display: flex;
    flex-direction: column;
}

/* lo spazio tiene la carta alzata, con l'alone, fuori da quella di sopra */
.semi-colonna .semi-carta + .semi-carta {
    margin-top: 22px;
}

.avatar.semi-carta {
    margin: 0 7px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.12s ease, box-shadow 0.12s ease;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.avatar.semi-carta.scelto {
    box-shadow: 0 0 0 3px var(--blu), 0 0 14px var(--blu);
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

/* sotto i 360 px quattro carte da 22 px non ci stanno affiancate, e sotto i
   300 (il Fold chiuso) nemmeno quelle da 18 */
@media (max-width: 359px) {
    .avatar.semi-carta {
        margin: 0 5px;
        font-size: 18px;
    }
}

@media (max-width: 299px) {
    .avatar.semi-carta {
        margin: 0 4px;
        font-size: 16px;
    }
}