/* La schermata della sala: amici, messaggi, il posto degli eventi, il Sabato
   di fuoco, Telegram e la classifica. */

/* --- Le schermate: analisi e sala ----------------------------------------- */

/* Analisi: l'elenco delle mosse giudicate sta in una schermata a se', e
   rivedere una posizione riapre il tavolo vero in sola lettura, con la barra
   di sotto al posto di quella di gioco. Cosi' non c'e' un secondo tavolo da
   tenere in piedi. */

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

#analisi {
    background: var(--bg);
}

.testata {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.testata .piccolo {
    margin-right: 12px;
}

#analisi-titolo, #online-nome {
    font-size: 17px;
    font-weight: bold;
}

#online-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 24px;
    text-align: center;
}

#online-corpo .grande, #online-corpo .piccolo {
    margin: 8px 4px;
}

#online-nick {
    max-width: 280px;
    text-align: center;
}

/* Gli amici in cima alla sala (online.js): una fascia a tutta larghezza sotto
   la testata, coi gettoni in fila che scorrono di lato, cosi' resta alta
   uguale con due amici o con venti. Il tondo e' la faccia della carta del
   giocatore; il bordo dice come sta coi colori di sempre della sala: verde chi
   c'e', ambra chi gioca, blu chi chiede l'amicizia. */
#online-amici {
    margin: -4px -16px 0;
    padding: 2px 0 6px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(224, 180, 76, 0.22);
}

#amici-dida {
    margin: 0;
    padding: 0 16px;
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.amici-liberi {
    color: var(--verde);
}

/* in alto c'e' posto per il «?» e l'aereo che escono dal tondo: lo
   scorrimento di lato taglia anche in verticale */
#amici-fila {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px 4px;
    scrollbar-width: none;
}

#amici-fila::-webkit-scrollbar {
    display: none;
}

.amico {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 66px;
    margin-right: 8px;
    cursor: pointer;
}

.amico-tondo {
    position: relative;
    display: block;
    width: 54px;
    height: 54px;
    box-sizing: border-box;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: #fdfdfb;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: #1c1c1e;
    -webkit-transition: -webkit-transform 0.1s ease;
    transition: transform 0.1s ease;
}

.amico.premuto .amico-tondo {
    transform: scale(0.93);
}

.amico-tondo.rossa {
    color: #c8202a;
}

.amico.libero .amico-tondo {
    border-color: var(--verde);
}

.amico.in-partita .amico-tondo {
    border-color: var(--ambra);
}

.amico.chiede .amico-tondo {
    border-color: var(--blu);
}

.amico.offline {
    opacity: 0.42;
}

.amico.offline .amico-tondo {
    filter: grayscale(1);
}

/* fuori, ma la sfida gliela porta il bot: spento meno degli altri */
.amico.lontano {
    opacity: 0.75;
}

.amico.lontano .amico-tondo {
    filter: none;
}

.amico-lettera {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}

.amico-seme {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 17px;
    height: 17px;
    margin-left: -8.5px;
    fill: currentColor;
}

.amico-segno {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    border-radius: 50%;
}

.amico-segno.chiede {
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: var(--blu);
    color: #fff;
    font: bold 14px/20px 'Lilita One', sans-serif;
    text-align: center;
}

.amico-segno.libero {
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    border: 2px solid #12261f;
    background: var(--verde);
}

.amico-segno.aereo {
    right: -6px;
    bottom: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #12261f;
    background: #2aa3df;
}

.amico-segno.aereo svg {
    margin-left: -1px;
    fill: #fff;
}

/* chi gioca si puo' guardare: l'occhio, nell'ambra di chi e' in partita */
.amico-segno.occhio {
    right: -6px;
    bottom: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #12261f;
    background: var(--ambra);
    color: #12261f;
}

.amico-maglia {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 1;
    line-height: 0;
}

.amico.nuovo .amico-tondo {
    border: 2px dashed rgba(224, 180, 76, 0.7);
    background: transparent;
    box-shadow: none;
    color: var(--oro);
    font-size: 30px;
    line-height: 48px;
    text-align: center;
}

.amico-nome {
    max-width: 66px;
    margin-top: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: bold;
}

.amico-sotto {
    font-size: 10px;
    white-space: nowrap;
    opacity: 0.7;
}

.amico.libero .amico-sotto {
    color: var(--verde);
    opacity: 1;
}

.amico.in-partita .amico-sotto {
    color: var(--ambra);
    opacity: 1;
}

.amici-vuoto {
    align-self: center;
    margin: 0 0 22px 4px;
    font-size: 14px;
    opacity: 0.7;
}

/* Il pannello del «+» e quello del nome nuovo: il campo e la risposta della
   sala. L'id batte .sopra p, che farebbe la risposta grande come il titolo */
#aggiungi-nome, #nome-nuovo-campo {
    max-width: 300px;
    margin: 0 0 14px;
    text-align: center;
    font-size: 18px;
}

#aggiungi-esito, #nome-nuovo-esito {
    max-width: 300px;
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--ambra);
}

#aggiungi .nota, #nome-nuovo .nota {
    max-width: 300px;
    margin: 4px 0 18px;
}

.grosso {
    margin: 26px 0 8px;
    font-size: 25px;
    font-weight: bold;
}

/* Un titoletto di sezione con la riga d'oro sopra: separa la sala in blocchi
   senza mettere un pannello dentro un pannello */
.titoletto {
    position: relative;
    margin: 30px auto 10px;
    max-width: 380px;
    padding-top: 12px;
    border-top: 1px solid rgba(224, 180, 76, 0.28);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.spiega {
    margin: 4px auto 0;
    max-width: 340px;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.6;
}

#online-punti {
    margin: 14px 0 4px;
    font-size: 15px;
    opacity: 0.75;
}

#online-attesa {
    margin: 6px 0 0;
    font-size: 15px;
}

#online-errore {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--ambra);
}

/* I messaggi della sala (online.js) scendono da sotto la testata, sopra gli
   amici e sopra i pannelli, e dopo qualche secondo risalgono. La pillola scura
   col bordo e' quella del banner del tavolo, col fondo dei pannelli del tema;
   il bordo e' d'oro per quello che succede nel gioco e rosso per i guasti. */
#online-avviso {
    position: fixed;
    left: 50%;
    z-index: 40;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 11px 22px;
    border-radius: 26px;
    background: var(--sopra);
    box-shadow: 0 0 0 2px var(--oro), 0 10px 24px rgba(0, 0, 0, 0.55);
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
}

#online-avviso.guasto {
    box-shadow: 0 0 0 2px #d8453c, 0 10px 24px rgba(0, 0, 0, 0.55);
}

#online-avviso.scende {
    animation: avviso-scende 0.35s cubic-bezier(0.3, 1.5, 0.6, 1);
}

/* mentre risale non prende piu' tocchi: sono di quello che c'e' sotto */
#online-avviso.risale {
    animation: avviso-risale 0.25s ease-in forwards;
    pointer-events: none;
}

@keyframes avviso-scende {
    0% { opacity: 0; transform: translate(-50%, -18px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes avviso-risale {
    100% { opacity: 0; transform: translate(-50%, -18px); }
}

/* Il posto degli eventi della settimana (eventi-vista.js), sotto i bauli:
   uno alla volta, sempre lo stesso riquadro e grande uguale, che l'evento
   veste coi suoi colori, come gli eventi di Clash Royale. Acceso nel giorno
   dell'evento, coi raggi che girano dietro al segno; quello che deve venire
   ha gli stessi colori su un fondo scuro, col bordo. I colori li mette la
   classe dell'evento, che vale anche per le tessere della settimana e per
   la riga del menu: --ev-su, --ev-mezzo e --ev-giu il fondo acceso,
   --ev-scuro e --ev-bordo quello spento, --ev-raggi, --ev-chiaro le scritte
   piccole e --ev-titolo il nome. */
.evento-serata {
    --ev-su: #3a7df0;
    --ev-mezzo: #2f6fed;
    --ev-giu: #1b4fb8;
    --ev-scuro: rgba(47, 111, 237, 0.18);
    --ev-bordo: rgba(120, 170, 255, 0.65);
    --ev-raggi: rgba(210, 230, 255, 0.11);
    --ev-chiaro: #fbeec2;
    --ev-titolo: linear-gradient(#ffffff 0%, #eef5ff 34%, #a9cbff 66%, #4c8cf0 100%);
}

.evento-sudden {
    --ev-su: #d4253a;
    --ev-mezzo: #8e1622;
    --ev-giu: #2c0509;
    --ev-scuro: rgba(181, 31, 44, 0.18);
    --ev-bordo: rgba(230, 70, 80, 0.65);
    --ev-raggi: rgba(255, 200, 200, 0.1);
    --ev-chiaro: #ffd8cf;
    --ev-titolo: linear-gradient(#ffffff 0%, #ffe3e3 34%, #ff7a7a 66%, #d4102e 100%);
}

.evento-sabato {
    --ev-su: #ff9a3c;
    --ev-mezzo: #f0612e;
    --ev-giu: #b8321a;
    --ev-scuro: rgba(240, 97, 46, 0.18);
    --ev-bordo: rgba(255, 140, 70, 0.65);
    --ev-raggi: rgba(255, 236, 200, 0.13);
    --ev-chiaro: #fff1c9;
    --ev-titolo: linear-gradient(#fff3c4 0%, #ffd060 40%, #ff9a2e 75%, #e2561c 100%);
}

#online-evento {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 340px;
    min-height: 238px;
    margin: 14px auto 4px;
    padding: 10px 14px 9px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    text-align: left;
    color: #ffffff;
}

#online-evento.acceso {
    background-color: var(--ev-mezzo);
    background-image: linear-gradient(155deg, var(--ev-su) 0%, var(--ev-mezzo) 45%, var(--ev-giu) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 6px 14px rgba(0, 0, 0, 0.35);
}

/* spento: gli stessi colori con la luce bassa */
#online-evento.spento {
    background-color: var(--ev-giu);
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        linear-gradient(155deg, var(--ev-su) 0%, var(--ev-mezzo) 45%, var(--ev-giu) 100%);
    box-shadow:
        0 0 0 1.5px var(--ev-bordo) inset,
        0 6px 14px rgba(0, 0, 0, 0.3);
}

#online-evento.acceso::before {
    content: '';
    position: absolute;
    top: 64px;
    left: 40px;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    background-image: repeating-conic-gradient(var(--ev-raggi) 0deg 8deg, transparent 8deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, transparent 100%);
    animation: premio-gira 24s linear infinite;
    pointer-events: none;
}

#online-evento > * {
    position: relative;
}

.evento-testa {
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 22px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ev-chiaro);
}

/* il pallino verde della serata in corso: un anello che si allarga e sparisce */
.evento-vivo {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--verde);
}

.evento-vivo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--verde);
    animation: evento-vivo 1.6s ease-out infinite;
}

@keyframes evento-vivo {
    from { transform: scale(1); opacity: 0.6; }
    to { transform: scale(2.6); opacity: 0; }
}

.evento-conto {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.evento-cronometro {
    margin-right: 4px;
}

.evento-fra {
    margin-left: 5px;
    font-size: 17px;
    color: #ffffff;
    letter-spacing: 0.02em;
}

/* una casella per cifra (eventi-vista.js), larga quanto lo 0 */
.evento-fra .cifra {
    display: inline-block;
    width: 0.64em;
    text-align: center;
}

.evento-capo {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.evento-segno {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 50px;
    margin-right: 8px;
}

.evento-segno > * {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

/* z-index: il contorno sta dietro alla scritta, ma davanti al fondo */
.evento-nome {
    position: relative;
    z-index: 0;
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.15;
    white-space: nowrap;
    text-transform: uppercase;
}

/* il colore ritagliato sulla scritta, il contorno nella copia dietro */
.evento-nome span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: var(--ev-titolo);
    -webkit-background-clip: text;
    background-clip: text;
}

.evento-nome span::before {
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #000000;
}

.evento-cosa {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    margin: 6px 0 2px;
}

.evento-distintivi {
    display: flex;
    flex-wrap: wrap;
}

.evento-distintivi .per-distintivo {
    margin: 0 6px 4px 0;
    font-size: 13px;
}

/* l'orario della serata, sul blu del suo riquadro */
.per-serata {
    --fuoco-su: #a9cbff;
    --fuoco-mezzo: #3a7df0;
    --fuoco-giu: #173f9e;
    --bagliore: rgba(90, 160, 255, 0.6);
    --bagliore-r: 8px;
}

.per-distintivo.per-serata {
    padding: 1px 10px 1px 5px;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0, 20, 70, 0.7);
}

#online-evento .gradini {
    font-size: 15px;
}

/* sull'arancio del riquadro i gradini saliti sono d'oro, e quelli da salire
   scuri: arancio su arancio non si vedevano */
#online-evento .gradino-barra {
    background: rgba(90, 20, 0, 0.28);
}

#online-evento .gradino.salito .gradino-barra {
    background-image: linear-gradient(180deg, #fffbe6 0%, #ffe17a 45%, #f7b733 100%);
    box-shadow: 0 0 var(--bagliore-r) rgba(255, 240, 180, 0.7);
}

#online-evento .miccia.del-giorno {
    margin: 6px 12px 2px 2px;
}

.evento-riga {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
}

/* sul colore del riquadro il distintivo ha il bordo chiaro, se no si perde */
.evento-riga .per-distintivo {
    margin-left: 2px;
    box-shadow: 0 0 0 2px rgba(255, 241, 201, 0.85), 0 0 var(--bagliore-r) var(--bagliore);
}

/* La settimana in fila: accesa la tessera dell'evento nel posto, le altre
   coi loro colori, piu' quiete. Si toccano (eventi-vista.js). */
.evento-settimana {
    display: flex;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.evento-tessera {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 3px 4px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--ev-chiaro);
    background: var(--ev-scuro);
    box-shadow: 0 0 0 1px var(--ev-bordo) inset;
    position: relative;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.1s ease;
    transition: transform 0.1s ease;
}

/* alte 24 px sono poche per un dito: il tocco prende anche il margine
   intorno, fino alla riga sopra e quasi al canale sotto */
.evento-tessera::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -3px;
    bottom: -5px;
    left: -3px;
}

.evento-tessera.premuto {
    transform: scale(0.93);
}

.evento-tessera:last-child {
    margin-right: 0;
}

.evento-tessera > :first-child {
    margin-right: 4px;
}

.evento-tessera.qui {
    color: #ffffff;
    background-image: linear-gradient(155deg, var(--ev-su) 0%, var(--ev-giu) 100%);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.evento-canale {
    margin: 6px 0 0;
    font-size: 13px;
}

.evento-canale a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.92;
}

.evento-canale .megafono {
    margin-right: 6px;
}

@media (max-width: 359px) {
    .evento-nome {
        font-size: 21px;
    }
}

/* La fiamma del Sabato di fuoco (sabato-vista.js) e' disegnata: il 🔥 e' dei
   giorni di fila della mano del giorno. */
.fiamma {
    flex: none;
    vertical-align: -3px;
}

/* Piu' sale il moltiplicatore piu' il fuoco e' acceso: ogni gradino del
   Sabato di fuoco ha i suoi colori e il suo bagliore, da ×2 arancio a ×5
   bianco d'oro che pulsa, sulle barre, sui distintivi e negli scoppi */
.per-2 {
    --fuoco-su: #ffd34d;
    --fuoco-mezzo: #ff8a2a;
    --fuoco-giu: #e2461c;
    --bagliore: rgba(255, 166, 60, 0.5);
    --bagliore-r: 6px;
}

.per-3 {
    --fuoco-su: #ffc23a;
    --fuoco-mezzo: #ff6420;
    --fuoco-giu: #cf2f17;
    --bagliore: rgba(255, 120, 40, 0.65);
    --bagliore-r: 10px;
}

.per-4 {
    --fuoco-su: #ffb02e;
    --fuoco-mezzo: #ff3d1f;
    --fuoco-giu: #b0101e;
    --bagliore: rgba(255, 70, 40, 0.8);
    --bagliore-r: 15px;
}

.per-5 {
    --fuoco-su: #fffbe0;
    --fuoco-mezzo: #ffc61a;
    --fuoco-giu: #ff5200;
    --bagliore: rgba(255, 214, 90, 0.95);
    --bagliore-r: 22px;
}

/* Il moltiplicatore come distintivo (sabato-vista.js): la fiamma chiara e
   «×3» sulla pastiglia del suo gradino */
.per-distintivo {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1px 9px 1px 5px;
    border-radius: 999px;
    background-image: linear-gradient(180deg, var(--fuoco-su) 0%, var(--fuoco-mezzo) 50%, var(--fuoco-giu) 100%);
    box-shadow: 0 0 var(--bagliore-r) var(--bagliore), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: #fff;
    font-weight: bold;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(90, 15, 0, 0.6);
    white-space: nowrap;
    vertical-align: middle;
}

.per-distintivo .fiamma {
    margin-right: 3px;
}

/* la fiamma sulla pastiglia arancio: chiara, se no sparisce */
.per-distintivo .fiamma path:first-child {
    fill: #fff3d6;
}

.per-distintivo .fiamma path:last-child {
    fill: #ffb21f;
}

/* sul bianco d'oro di ×5 il testo e' scuro, e il distintivo pulsa */
.per-distintivo.per-5 {
    color: #6a2000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: brace 1.1s ease-in-out infinite alternate;
}

.per-distintivo.per-5 .fiamma path:first-child {
    fill: #ff5200;
}

@keyframes brace {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* I quattro gradini, uno piu' alto dell'altro, con sotto per quanto
   moltiplicano: accesi coi colori del loro gradino quelli saliti, quello
   appena salito che si accende col colpo */
.gradini {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 16em;
}

.gradino {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 14%;
}

.gradino-barra {
    display: block;
    width: 100%;
    border-radius: 4px 4px 2px 2px;
    background: rgba(255, 255, 255, 0.22);
}

.gradino.salito .gradino-barra {
    background-image: linear-gradient(180deg, var(--fuoco-su) 0%, var(--fuoco-mezzo) 55%, var(--fuoco-giu) 100%);
    box-shadow: 0 0 var(--bagliore-r) var(--bagliore);
}

/* chi perde: i gradini che aveva partono accesi e si spengono dall'alto,
   uno dopo l'altro, quando il cartello si e' aperto (--spento-dopo, da
   gradini in sabato-vista.js) */
.gradino.perso .gradino-barra {
    position: relative;
}

.gradino.perso .gradino-barra::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background-image: linear-gradient(180deg, var(--fuoco-su) 0%, var(--fuoco-mezzo) 55%, var(--fuoco-giu) 100%);
    box-shadow: 0 0 var(--bagliore-r) var(--bagliore);
    animation: gradino-spento 0.3s var(--spento-dopo, 1.1s) ease-in both;
}

@keyframes gradino-spento {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.gradino.nuovo .gradino-barra {
    transform-origin: 50% 100%;
    animation: gradino-acceso 0.55s 1.1s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.gradino-quanto {
    margin-top: 3px;
    font-size: 0.75em;
    opacity: 0.65;
}

.gradino.salito .gradino-quanto {
    font-weight: bold;
    opacity: 1;
}

/* sopra i primi gradini, che sono i piu' bassi: li' c'e' posto */
.gradini-cima {
    position: absolute;
    top: 0;
    left: 26%;
    padding: 2px 12px;
    border-radius: 10px;
    background: var(--oro);
    color: #2a1d05;
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap;
    transform: translateX(-50%) rotate(-6deg);
    animation: cima-timbro 0.5s 1.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes gradino-acceso {
    0% { opacity: 0.3; transform: scaleY(0.2); filter: brightness(2.2); }
    60% { opacity: 1; transform: scaleY(1.18); filter: brightness(1.6); }
    100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}

@keyframes cima-timbro {
    0% { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(2.6); }
    100% { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); }
}

/* Telegram (telegram.js): il riquadro col link al bot e le cifre da
   scrivergli, sotto il nickname e nel proprio profilo. Blu come la serata
   nel posto degli eventi, che porta anche lei su Telegram. Le cifre grandi e larghe, perche' si
   leggono su uno schermo e si scrivono su un altro. I paragrafi portano la p
   nel selettore: nel profilo vincerebbe .sopra p. */
.telegram-riquadro {
    max-width: 300px;
    margin: 14px auto 4px;
    padding: 14px 16px 12px;
    box-sizing: border-box;
    border-radius: 16px;
    color: #fff;
    background-color: var(--blu);
    background-image: linear-gradient(155deg, #3a7df0 0%, #2f6fed 45%, #1b4fb8 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 14px rgba(0, 0, 0, 0.35);
}

/* un link che fa da pulsante: il testo in mezzo come in un <button> */
a.piccolo, a.grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.piccolo svg {
    margin-right: 8px;
    vertical-align: -3px;
    fill: currentColor;
}

p.telegram-oppure {
    margin: 12px 0 2px;
    font-size: 14px;
    line-height: 1.4;
}

p.telegram-cifre {
    margin: 0;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.08em;
    color: #fbeec2;
    font-variant-numeric: tabular-nums;
}

p.telegram-sotto {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.85;
}

/* sotto «Entra», non accanto */
#online-corpo #online-telegram, #online-corpo #online-nuovo-annulla {
    display: block;
    margin: 14px auto 0;
}

#online-ingresso-attesa {
    margin: 12px 0 0;
    font-size: 15px;
}

#online-preso {
    max-width: 320px;
    margin: 12px auto 0;
}

#online-preso-testo {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.4;
}

.scheda-telegram {
    margin-bottom: 8px;
}

.scheda-telegram .piccolo {
    margin: 0 4px 6px;
}

/* Le righe della classifica sono placche come i pulsanti, ma appoggiate: luce
   sopra, ombra corta sotto. Il bordo a sinistra diventa blu sulla propria. */
.riga-conto {
    position: relative;
    display: flex;
    align-items: center;
    margin: 6px auto;
    max-width: 380px;
    padding: 11px 14px 11px 16px;
    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;
    font-size: 16px;
    overflow: hidden;
}

.riga-conto::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.14);
}

.riga-conto.io {
    background-color: #1d3f5e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 3px 10px rgba(0, 0, 0, 0.34);
}

.riga-conto.io::before {
    background: var(--blu);
}

/* Il numero del posto, dal quarto in giu': i primi tre stanno sul podio */
.riga-conto .posto {
    width: 30px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: bold;
    opacity: 0.5;
}

.riga-conto .punti {
    margin-left: auto;
    padding-left: 10px;
    font-size: 14px;
    opacity: 0.75;
    white-space: nowrap;
}

.riga-conto .freccia {
    margin-left: auto;
    flex: 0 0 auto;
}

.riga-conto .freccia + .punti {
    margin-left: 0;
    padding-left: 6px;
}

/* I posti guadagnati o persi in 24 ore: verde chi sale, rosso chi scende,
   d'oro chi in classifica non c'era */
.freccia {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px 2px 5px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
}

.freccia::before {
    content: '';
    margin-right: 3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.freccia-su {
    color: #7be38f;
    background: rgba(64, 196, 99, 0.16);
}

.freccia-su::before {
    border-bottom: 7px solid currentColor;
}

.freccia-giu {
    color: #ff8a80;
    background: rgba(229, 83, 75, 0.16);
}

.freccia-giu::before {
    border-top: 7px solid currentColor;
}

.freccia-nuovo {
    padding: 2px 4px;
    color: #f7e3a8;
    background: rgba(247, 227, 168, 0.14);
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.freccia-nuovo::before {
    display: none;
}