/* Le Regole a parti, a fisarmonica (regole-vista.js). Il testo e le parti che
   si aprono sono quelli del blocco «Regole, privacy e novita'» di
   stile-analisi.css, comuni con la Privacy; qui le icone dei titoli, i disegni
   con le carte del tavolo e le righe coi distintivi. Le carte prendono la
   misura dal loro posto (--cw), non dal tavolo. */

#regole h2 {
    text-align: center;
}

/* --- Le icone dei titoli ------------------------------------------------- */

#regole .parte-icona {
    --cw: 26px;
    --ch: 37px;
}

.parte-icona .carta.dorso {
    border-width: 2px;
}

.parte-icona .per-distintivo {
    font-size: 15px;
}

.regole-cronometro {
    width: 32px;
    height: 32px;
}

/* --- I disegni ---------------------------------------------------------- */

.regole-disegno {
    display: flex;
    justify-content: center;
    margin: 6px 0 16px;
    --cw: 44px;
    --ch: 63px;
}

.carta.regole-oro {
    box-shadow: 0 0 0 3px var(--oro), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carta.regole-verde {
    box-shadow: 0 0 0 2px var(--verde), 0 0 8px var(--verde);
}

.regole-mazzetto {
    position: relative;
    width: calc(var(--cw) + 16px);
    height: calc(var(--ch) + 16px);
}

.regole-mazzetto .carta {
    position: absolute;
}

/* le carte del ventaglio si spartiscono la larghezza: --k va da 0 a 1 */
.regole-ventaglio {
    position: relative;
    width: 100%;
    max-width: 330px;
    height: var(--ch);
}

.regole-ventaglio .carta {
    position: absolute;
    top: 0;
    left: calc((100% - var(--cw)) * var(--k));
}

.regole-giocata {
    display: flex;
    align-items: flex-start;
}

.regole-colonna {
    position: relative;
    width: var(--cw);
    height: calc(var(--ch) + 48px);
    margin-right: 28px;
}

.regole-colonna .carta {
    position: absolute;
    left: 0;
}

/* le due carte in mano, all'altezza del 9 in cima alla colonna */
.regole-scelta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 48px 10px 0;
}

.regole-scelta.prosegue .carta {
    box-shadow: 0 0 0 3px var(--verde), 0 0 14px var(--verde);
}

.regole-scelta.stoppa .carta {
    box-shadow: 0 0 0 3px var(--ambra), 0 0 14px var(--ambra);
}

.regole-scelta-nome {
    margin-top: 9px;
    font-size: 15px;
}

.prosegue .regole-scelta-nome {
    color: var(--verde);
}

.stoppa .regole-scelta-nome {
    color: var(--ambra);
}

/* --- Le righe coi distintivi -------------------------------------------- */

/* i distintivi larghi uguali, cosi' le parole accanto stanno in colonna; quelle
   del Sabato vengono dalla sua schermata e si rimettono alla misura delle altre */
.regole-righe {
    margin: 4px 0 14px;
}

.regole-riga,
#regole .sabato-oggi-regola {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.25;
    color: var(--fg);
}

.regole-riga .per-distintivo,
#regole .sabato-oggi-regola .per-distintivo,
#regole .sabato-oggi-premi {
    flex: 0 0 auto;
    justify-content: center;
    box-sizing: border-box;
    min-width: 104px;
    margin-right: 10px;
    font-size: 17px;
}

#regole .sabato-oggi-regola .per-distintivo {
    padding: 1px 10px 1px 5px;
}

#regole .sabato-oggi-regola.sabato-oggi-perdi {
    padding-left: 114px;
}

#regole .sabato-oggi-premi .fine-figura svg {
    width: 28px;
    height: 28px;
}

/* la pastiglia delle regole di sempre: il disegno di quelle degli eventi,
   coi colori del panno */
.per-distintivo.per-regole {
    --fuoco-su: #6a9a89;
    --fuoco-mezzo: #3d6a5b;
    --fuoco-giu: #22443a;
    --bagliore: rgba(0, 0, 0, 0);
    --bagliore-r: 0px;
    text-shadow: 0 1px 2px rgba(0, 20, 10, 0.6);
}

/* --- Gli eventi ---------------------------------------------------------- */

.regole-evento {
    margin: 0 0 22px;
}

#regole .regole-evento-testa {
    display: flex;
    align-items: center;
    margin: 4px 0 10px;
    font-size: 22px;
    line-height: 1.1;
}

.regole-evento-segno {
    flex: 0 0 52px;
    display: flex;
    justify-content: center;
    margin-right: 10px;
    --cw: 32px;
    --ch: 46px;
}

.regole-evento-nome {
    display: flex;
    flex-direction: column;
}

.regole-evento-giorno {
    margin-top: 2px;
    font-size: 14px;
    opacity: 0.7;
}