/* L'elenco dell'analisi, le regole, la privacy, le novita' e i link del gioco. */

/* --- L'elenco dell'analisi ------------------------------------------------ */

#analisi-avanti {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

#analisi-barra {
    flex: 1 1 auto;
    height: 6px;
    margin-right: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

#analisi-barra i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--blu);
    -webkit-transition: width 0.2s linear;
    transition: width 0.2s linear;
}

#analisi-elenco {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 20px;
}

#analisi-somma {
    padding: 12px 0 4px;
}

#analisi-somma b {
    font-size: 30px;
}

/* Accanto al numero, non sotto: cosi' si leggono insieme */
#analisi-verdetto {
    margin-left: 10px;
    font-size: 17px;
    opacity: 0.8;
}

#analisi-somma p {
    margin: 6px 0 0;
    font-size: 14px;
    opacity: 0.7;
}

.an-conteggio {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 6px;
}

.an-conteggio span {
    margin: 3px 14px 3px 0;
    font-size: 14px;
}

.an-turno {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    opacity: 0.6;
}

.an-mossa {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
    padding: 9px 10px;
    border-radius: var(--raggio);
    background: var(--panel);
    text-align: left;
    font-size: 15px;
}

.an-mossa.premuto {
    opacity: 0.7;
}

.an-mossa .perdita {
    float: right;
    margin-left: 10px;
    font-size: 13px;
    opacity: 0.65;
}

/* Il colore del giudizio sta sul contenitore, e se lo prendono il pallino, la
   tacca nella striscia e il filo della carta: i sei colori si scrivono una
   volta sola invece di tre. */
.g-geniale { --g: #56c8f0; }
.g-ottima { --g: var(--verde); }
.g-buona { --g: #8fbf3f; }
.g-imprecisione { --g: var(--ambra); }
.g-errore { --g: #e8703a; }
.g-grave { --g: #d63b3b; }

.pallino {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--g, var(--verde));
}

/* La striscia della partita: una tacca per mossa giudicata, in ordine. Da
   lontano si vede dov'e' il rosso, che e' l'unica cosa che si cerca aprendo
   un'analisi. Alta abbastanza da prenderla col dito. */
.an-striscia {
    display: flex;
    height: 24px;
    margin: 14px 0 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

/* Le tacche si dividono la larghezza in parti uguali, senza stacco: una
   partita lunga sono piu' di cento mosse, e con un margine per tacca la coda
   della partita finiva fuori dalla striscia. Quelle vicine dello stesso colore
   si fondono in una fascia, che e' poi come si legge. */
.an-striscia i {
    flex: 1 1 0%;
    background: var(--g, var(--verde));
}

.an-striscia i.premuto {
    opacity: 0.6;
}

.an-titolo {
    margin: 20px 0 8px;
}

.an-titolo b {
    display: block;
    font-size: 17px;
}

.an-titolo span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    opacity: 0.6;
}

/* Le mosse da rivedere sono placche come le righe della sala, non voci di un
   elenco: ognuna e' un discorso di quattro righe, e il filo a sinistra dice
   quanto e' costata. */
.an-carta {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 10px 14px 12px 18px;
    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;
    overflow: hidden;
}

.an-carta::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--g, var(--verde));
}

.an-carta.premuto {
    opacity: 0.75;
}

.an-testa {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

.an-testa b {
    font-size: 16px;
    color: var(--g, var(--fg));
}

.an-testa span {
    margin-left: auto;
    padding-left: 10px;
    font-size: 13px;
    opacity: 0.55;
    white-space: nowrap;
}

.an-carta p {
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 1.35;
}

.an-carta .an-meglio {
    color: var(--oro);
}

.an-carta .an-perche {
    opacity: 0.8;
}

/* La regola generale e' l'unica riga che serve anche la prossima partita:
   staccata, e detta una volta sola in tutta la schermata. */
.an-carta .an-regola {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-style: italic;
    opacity: 0.75;
}

.an-vincevi {
    color: var(--oro);
}

.an-tutte {
    display: block;
    margin: 22px auto 0;
}

/* In revisione la barra si divide in due righe: sopra, a tutta larghezza, la
   placca della mossa col filo del giudizio, come nell'elenco; sotto i comandi,
   al posto di Menu e Passo. Stava tutto in una riga, e sul telefono stretto il
   giudizio restava largo una parola e la spiegazione usciva dallo schermo. Il
   posto della riga in piu' lo fa il tavolo (main.js). */
#barra.revisione {
    flex-wrap: wrap;
    padding-top: 8px;
}

#barra.revisione #stato {
    order: -1;
    flex: 1 1 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 7px 12px 9px 16px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    text-align: left;
    overflow: hidden;
}

#barra.revisione #stato::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--g, var(--verde));
}

#barra.revisione #stato.premuto:has(#stato-perche:not([hidden])) {
    opacity: 0.75;
}

#barra.revisione #stato-titolo {
    display: block;
    margin-bottom: 2px;
    padding-right: 92px;
    color: var(--g, var(--fg));
}

/* Le righe si contano (analisi-vista.js): dove non ci stanno tutte, la riga
   che resta finisce coi puntini */
#barra.revisione #stato-testo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.32;
    opacity: 0.9;
}

/* Il segno che la placca si tocca, accanto al giudizio: in coda al testo una
   riga lunga lo mandava a capo, e una placca accorciata lo perdeva */
#stato-perche {
    position: absolute;
    top: 7px;
    right: 10px;
    padding: 1px 9px 2px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 13px;
    font-style: normal;
    white-space: nowrap;
}

/* Elenco a sinistra, Variante a destra e le frecce in mezzo: una freccia
   spenta tiene il posto, e il contatore non si sposta */
#barra-analisi {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

#barra-analisi .piccolo {
    padding: 8px 10px;
    font-size: 14px;
}

#an-elenco {
    justify-self: start;
}

#an-variante {
    justify-self: end;
}

#an-frecce {
    display: flex;
    align-items: center;
}

#an-prima, #an-dopo {
    min-width: 34px;
    text-align: center;
}

#an-frecce .spenta {
    visibility: hidden;
}

#an-quale {
    margin: 0 4px;
    font-size: 12px;
    opacity: 0.7;
}

/* Il perche' intero della mossa rivista: la placca sopra il tavolo velato,
   che dietro si vede ancora */
#an-perche {
    background-color: rgba(4, 12, 9, 0.5);
    background-image: none;
}

#an-perche .an-carta {
    max-width: 440px;
    margin-bottom: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 12px 30px rgba(0, 0, 0, 0.55);
}

/* il pulsante trasparente lasciava vedere le carte dietro, e si leggeva male */
#an-perche-chiudi {
    background-color: var(--panel);
}

/* --- Regole, privacy e novita' -------------------------------------------- */

#regole > :first-child,
#regole > :last-child,
#privacy > :first-child,
#privacy > :last-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* Regole e Privacy scorrono dall'alto, allineate a sinistra, con le parti
   che si aprono (fisarmonica.js) */
#regole,
#privacy {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
    text-align: left;
}

#regole .testo,
#privacy .testo,
#novita .testo {
    max-width: 560px;
    font-size: 17px;
    line-height: 1.45;
}

#regole .testo,
#privacy .testo {
    width: 100%;
}

#regole h2,
#privacy h2,
#novita h2 {
    margin: 0 0 12px;
}

#privacy h2 {
    text-align: center;
}

/* --- Le parti ------------------------------------------------------------ */

.parte {
    margin: 0 0 8px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.parte.aperta {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(242, 210, 126, 0.35);
}

.parte-titolo {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding: 6px 16px 6px 6px;
    font-size: 20px;
    color: #f2d27e;
    text-align: left;
}

/* la freccia: in giu' da chiusa, in su da aperta */
.parte-titolo::after {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border: solid #f2d27e;
    border-width: 0 3px 3px 0;
    transform: translateY(-3px) rotate(45deg);
}

.aperta .parte-titolo::after {
    transform: translateY(3px) rotate(-135deg);
}

.parte-icona {
    flex: 0 0 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
}

.parte-icona img {
    width: 36px;
    height: 36px;
}

.parte-corpo {
    display: none;
    padding: 2px 14px 4px;
}

.aperta .parte-corpo {
    display: block;
}

/* --- La privacy ---------------------------------------------------------- */

/* Il riassunto non si chiude: ha la spunta del conteggio, che deve trovarsi
   in un tocco, e a chi scrivere */
.privacy-breve {
    margin: 0 0 16px;
    padding: 12px 16px 4px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0 1px rgba(242, 210, 126, 0.35);
}

#privacy p.privacy-breve-titolo {
    margin: 0 0 8px;
    font-size: 20px;
    color: #f2d27e;
}

/* una cosa per riga, col pallino d'oro al posto di quello del browser */
.privacy-elenco {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.privacy-elenco li {
    position: relative;
    margin: 0 0 7px;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.35;
}

.privacy-elenco li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f2d27e;
}

.privacy-breve .privacy-elenco li {
    font-size: 17px;
}

/* i gruppi dentro una parte: sul dispositivo, cosa vedono gli altri */
#privacy p.privacy-gruppo {
    margin: 16px 0 6px;
    font-size: 15px;
    font-weight: bold;
    color: #f2d27e;
}

#privacy p.privacy-gruppo:first-child {
    margin-top: 4px;
}

#privacy p.privacy-firma {
    margin: 18px 0 0;
}

#regole p,
#privacy p,
#novita p {
    margin: 0 0 12px;
    font-size: 17px;
}

/* Le novita' hanno il testo delle regole, ma stanno in mezzo allo schermo
   come gli altri pannelli: sono poche righe */
#novita .testo {
    width: 100%;
    margin-bottom: 12px;
    text-align: left;
}

/* La spunta del conteggio: una riga sola, non un campo come i nomi. La
   stessa, in fondo al proprio profilo, rifiuta le richieste di amicizia. */
#privacy .spunta {
    margin: 14px 0 6px;
}

#privacy .privacy-breve .spunta {
    margin: -4px 0 12px 18px;
}

.spunta label {
    display: flex;
    align-items: center;
}

.spunta input {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 0;
    flex-shrink: 0;
}

/* --- I link del gioco ----------------------------------------------------- */

/* I link del gioco: le mance, il canale e la firma. Senza una regola
   erediterebbero il blu del browser sul panno verde, che non si legge. */
#mance, #firma {
    margin: 16px 0 0;
    font-size: 14px;
    opacity: 0.65;
}

#mance a, #canale a, #firma a, #fine-canale a, .cer-canale a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A fine partita l'invito al canale e' una riga sotto i pulsanti, non un
   pulsante in piu' */
#fine-canale {
    margin-top: 12px;
}

#fine.senza-canale #fine-menu {
    margin-bottom: auto;
}

#canale a, #fine-canale a, .cer-canale a {
    display: inline-block;
    padding: 6px 4px;
}

/* Il megafono del pacchetto in testa a ogni invito al canale. L'aereo di
   Telegram resta dove vuol dire il bot. */
.megafono {
    width: 22px;
    height: 22px;
    margin: -4px 5px -3px 0;
    vertical-align: middle;
}

/* La firma e' una riga sola, ma il dito deve avere dove posarsi */
#firma {
    margin-top: 10px;
    font-size: 13px;
}

#firma a {
    display: inline-block;
    padding: 8px 6px;
}