/* I pannelli che si aprono dal menu e dalla sala: livelli, temi, l'invito e
   il premio, la carta dell'amico, Potresti conoscere, l'attesa di un
   avversario e la manutenzione. */

/* --- Il pannello dei livelli ---------------------------------------------- */

/* Le stesse placche della sala, che qui sono l'elenco degli avversari. Il filo
   a sinistra sale di temperatura col livello: l'ordine si vede prima di
   leggere i nomi. */
#livelli-lista {
    width: 100%;
    max-width: 380px;
    margin-bottom: 14px;
}

.livello {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    padding: 11px 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;
}

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

.livello[data-livello="novizio"]::before { background: var(--verde); }
.livello[data-livello="dispettoso"]::before { background: #8fbf3f; }
.livello[data-livello="rompiscatole"]::before { background: var(--ambra); }
.livello[data-livello="rompiballe"]::before { background: #d63b3b; }

.livello b {
    font-size: 17px;
}

.livello .conto {
    float: right;
    padding-left: 10px;
    font-size: 13px;
    font-style: normal;
    opacity: 0.6;
    white-space: nowrap;
}

.livello span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    opacity: 0.7;
}

/* Quello con cui si gioca adesso: lo stesso blu con cui la sala segna te */
.livello.scelto {
    background-color: #1d3f5e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 3px 10px rgba(0, 0, 0, 0.34);
}

.livello.premuto {
    opacity: 0.75;
}

/* Il gioco a due, staccato sotto i livelli: non e' un avversario e non tiene
   un conto, quindi il filo e' bianco, senza temperatura. Un'informazione per
   riga: come si gioca, e che non vale punti. */
.in-due {
    position: relative;
    display: block;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    margin: 14px 0 18px;
    padding: 11px 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;
}

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

.in-due b {
    font-size: 17px;
}

.in-due span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    opacity: 0.7;
}

.in-due.premuto {
    opacity: 0.75;
}

/* La Classic o la Rapida, sopra i livelli: due schede come quelle della
   stagione in sala, con la scelta in oro */
#modi {
    margin: -8px 0 12px;
}

#modi .piccolo {
    min-height: 36px;
    margin: 0 4px;
    padding: 0 20px;
}

#modo-nota {
    max-width: 340px;
    margin-bottom: 8px;
}

/* --- I temi --------------------------------------------------------------- */

/* Una tessera per tema, come i livelli, con la miniatura del suo tavolo: il
   fondo e un dorso. Quella in uso ha il bordo d'oro. Una festa che deve
   ancora venire e' chiusa: niente tocco, e i giorni in oro. */
#temi-lista {
    width: 100%;
    max-width: 380px;
    margin-bottom: 14px;
}

.tema-tessera {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    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;
}

.tema-tessera.in-uso {
    box-shadow:
        0 0 0 3px var(--oro),
        0 3px 10px rgba(0, 0, 0, 0.34);
}

.tema-tessera.premuto {
    opacity: 0.75;
}

.tema-mini {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin-right: 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.tema-mini i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 42px;
    margin: -21px 0 0 -15px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
}

.tema-mini-verde {
    background-color: #1d3a30;
    background-image: radial-gradient(ellipse at 50% 30%, #2b5646 0%, #204035 45%, #16291f 100%);
}

.tema-mini-verde i {
    background: #3a5b9c;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 3px, transparent 3px 7px);
    border: 2px solid #f2f2f4;
}

.tema-testo {
    display: block;
    min-width: 0;
}

.tema-testo b {
    display: block;
    font-size: 18px;
}

.tema-testo span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    opacity: 0.7;
}

.tema-tessera.chiusa .tema-testo span {
    color: var(--oro);
    opacity: 1;
}

/* Una festa col regalo finita, che non e' ancora tua: la miniatura spenta
   col lucchetto. Quella regalata ha i giorni in oro, come una medaglia. */
.tema-tessera.finita .tema-mini i {
    -webkit-filter: grayscale(0.8) brightness(0.55);
    filter: grayscale(0.8) brightness(0.55);
}

.tema-tessera.finita .tema-mini::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") 50% 50% / 30px 30px no-repeat;
}

.tema-tessera.tua .tema-testo span {
    color: var(--oro);
    opacity: 1;
}

/* L'invito sotto le tessere, finche' resta un tema da regalare */
#temi-regalo {
    width: 100%;
    max-width: 380px;
    margin-bottom: 8px;
}

#temi-regalo p {
    margin: 4px 0 14px;
    font-size: 16px;
    line-height: 1.35;
}

.pacco {
    margin: -4px 8px 0 0;
    vertical-align: middle;
    fill: currentColor;
}

/* Il pacco sul tasto del menu, su quelli degli eventi e su quello della carta
   dell'amico: c'e' un tema da regalare a chi manda il gioco */
#condividi.con-regalo, #sabato-oggi-chiama.con-regalo, #sudden-oggi-chiama.con-regalo, #jolly-oggi-chiama.con-regalo, #porta-amico-manda.con-regalo {
    position: relative;
}

#condividi.con-regalo::after, #sabato-oggi-chiama.con-regalo::after, #sudden-oggi-chiama.con-regalo::after, #jolly-oggi-chiama.con-regalo::after,
#porta-amico-manda.con-regalo::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffc857 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b1405'%3E%3Cpath d='M3 8.5h8V12H3zM13 8.5h8V12h-8zM4.5 13H11v8H6a1.5 1.5 0 0 1-1.5-1.5zM13 13h6.5v6.5A1.5 1.5 0 0 1 18 21h-5zM12 8.2C10.9 5.6 8 4.3 6.8 5.6 5.7 6.8 7.2 8.4 12 8.2zM12 8.2c1.1-2.6 4-3.9 5.2-2.6 1.1 1.2-.4 2.8-5.2 2.6z'/%3E%3C/svg%3E") 50% 45% / 17px 17px no-repeat;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
    animation: pulsa 1.6s ease-in-out infinite;
}

/* --- L'invito e il premio ------------------------------------------------- */

/* La miniatura del tema, in grande: la tovaglia e il dorso, con la cornice
   d'oro e l'alone che respira dietro, quello della maglia d'oro */
.premio-posto {
    position: relative;
    z-index: 0;
    margin: 6px 0 22px;
}

.premio-posto::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -45%;
    width: 190%;
    height: 190%;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(255, 200, 87, 0.5) 0%, rgba(255, 200, 87, 0) 62%);
    animation: cer-alone 2.4s ease-in-out infinite;
}

.premio-tessera {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow:
        0 0 0 4px #ffc857,
        0 0 0 7px rgba(0, 0, 0, 0.35),
        0 18px 40px rgba(0, 0, 0, 0.55);
}

.premio-tessera i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 110px;
    margin: -55px 0 0 -39px;
    box-sizing: border-box;
    border-radius: 9px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    transform: rotate(-8deg);
}

#invito-nome, #premio-titolo, #medaglie-nuove-titolo {
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 1.1;
    color: #ffc857;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 200, 87, 0.35);
}

#invito-testo, #premio-testo {
    max-width: 320px;
    margin-bottom: 22px;
    font-size: 21px;
    line-height: 1.3;
}

#invito-nota, #premio-nota {
    max-width: 300px;
    margin-bottom: 14px;
}

#invito .premio-tessera {
    animation: cer-scende 0.8s 0.1s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* il tasto che fa il regalo respira, come quelli da toccare in Clash Royale */
#invito-manda, #sabato-oggi-chiama, #porta-amico-manda {
    animation: pulsa 1.6s 1s ease-in-out infinite;
}

/* --- La carta dell'amico (amico-vista.js) ---------------------------------- */

/* Dopo una vittoria: la propria carta del cartello, d'oro come chi vince, e
   una vuota col +, il posto dell'amico, aperte a ventaglio sull'alone. Alte
   uguali: la vuota ha il font-size doppio e le misure a meta'. Il testo va a
   capo dopo i due punti, in italiano e in spagnolo. */
#porta-amico-titolo {
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 1.1;
    color: #ffc857;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 200, 87, 0.35);
}

#porta-amico-carte {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 26px;
}

#porta-amico-carte::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -30%;
    z-index: -1;
    width: 160%;
    height: 190%;
    background-image: radial-gradient(circle, rgba(255, 200, 87, 0.45) 0%, rgba(255, 200, 87, 0) 62%);
    animation: cer-alone 2.4s ease-in-out infinite;
}

#porta-amico-carte .avatar {
    font-size: 30px;
    rotate: -7deg;
    box-shadow:
        0 0 0 3px var(--oro),
        0 0 24px rgba(224, 180, 76, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.45);
}

.porta-amico-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.41em;
    height: 2em;
    margin-left: 0.3em;
    box-sizing: border-box;
    border: 3px dashed rgba(253, 253, 251, 0.75);
    border-radius: 0.18em;
    background: rgba(253, 253, 251, 0.1);
    color: #fdfdfb;
    font-size: 60px;
    line-height: 1;
    rotate: 7deg;
}

.porta-amico-vuota span {
    display: inline-block;
    animation: pulsa 1.6s 0.8s ease-in-out infinite;
}

#porta-amico-testo {
    max-width: 240px;
    margin-bottom: 22px;
    font-size: 19px;
    line-height: 1.35;
}

#porta-amico-regalo {
    max-width: 320px;
    margin: -12px 0 22px;
    font-size: 15px;
    line-height: 1.35;
    color: #ffc857;
    text-wrap: balance;
}

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

#porta-amico.arriva #porta-amico-carte {
    animation: premio-arriva 0.6s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* sull'iPad c'e' posto */
@media (min-width: 700px) and (min-height: 700px) {
    #porta-amico-titolo {
        font-size: 46px;
    }

    #porta-amico-carte .avatar {
        font-size: 38px;
    }

    .porta-amico-vuota {
        font-size: 76px;
    }

    #porta-amico-testo {
        max-width: 420px;
        font-size: 22px;
    }

    #porta-amico-regalo {
        max-width: 400px;
        font-size: 17px;
    }
}

/* --- Potresti conoscere (conoscere-vista.js) -------------------------------- */

/* Uno o due amici degli amici, una figurina per uno: la carta col bordo d'oro
   come nella carta dell'amico, il nome, gli amici in comune e «Aggiungi»
   sotto. Due stanno affiancate e aperte a ventaglio, una sola sta dritta in
   mezzo. Chi ha mandato il link ha la figurina d'oro. Gli amici in comune
   hanno sempre il posto di due righe, cosi' i tasti stanno alla stessa
   altezza. */
#conoscere-titolo {
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 1.1;
    color: #ffc857;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 200, 87, 0.35);
}

#conoscere-lista {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 360px;
    margin-bottom: 22px;
}

.conoscere-chi {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 46%;
    max-width: 168px;
    box-sizing: border-box;
    margin: 6px 2%;
    padding: 16px 10px 12px;
    border: 2px solid rgba(47, 111, 237, 0.7);
    border-radius: 18px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(47, 111, 237, 0.28), rgba(47, 111, 237, 0) 70%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 3px 8px rgba(0, 0, 0, 0.28);
    rotate: -3deg;
}

.conoscere-chi + .conoscere-chi {
    rotate: 3deg;
}

#conoscere.uno .conoscere-chi {
    rotate: 0deg;
}

.conoscere-chi.invito {
    border-color: var(--oro);
    background-image: linear-gradient(rgba(255, 200, 87, 0.28), rgba(255, 200, 87, 0) 70%);
}

.conoscere-chi .avatar {
    margin-bottom: 10px;
    font-size: 26px;
    box-shadow:
        0 0 0 3px var(--oro),
        0 0 18px rgba(224, 180, 76, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.45);
}

.conoscere-testo {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 12px;
}

.conoscere-nome {
    overflow: hidden;
    font-size: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conoscere-perche {
    min-height: 2.5em;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.25;
    opacity: 0.75;
}

.conoscere-perche.no {
    color: #ff9ea6;
    opacity: 1;
}

.conoscere-aggiungi {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 22px;
    font-size: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -2px 0 rgba(0, 0, 0, 0.16) inset,
        0 4px 10px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.conoscere-aggiungi.fatto {
    background-color: rgba(255, 255, 255, 0.12);
    background-image: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-shadow: none;
}

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

#conoscere.arriva #conoscere-lista {
    animation: premio-arriva 0.6s 0.1s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

/* sull'iPad c'e' posto */
@media (min-width: 700px) and (min-height: 700px) {
    #conoscere-titolo {
        font-size: 46px;
    }

    #conoscere-lista {
        max-width: 440px;
    }

    .conoscere-chi .avatar {
        font-size: 32px;
    }
}

/* Il Sabato di fuoco aprendo il gioco (evento.js): la brace al posto del
   panno, la fiamma grande che respira, le faville che salgono e la regola in
   righe, un distintivo per moltiplicatore. Il fondo e' scuro perche' sopra ci
   stanno l'oro e il blu dei tasti; --bg colora la barra del telefono. */
#sabato-oggi {
    --bg: #2b0d06;
    overflow: hidden;
    background-color: #2b0d06;
    background-image:
        radial-gradient(ellipse 75% 42% at 50% 28%, rgba(255, 128, 40, 0.5) 0%, rgba(214, 70, 24, 0.2) 50%, rgba(214, 70, 24, 0) 100%),
        linear-gradient(180deg, #4b1509 0%, #2b0d06 55%, #170603 100%);
}

/* Le faville sono punti di luce in tre fondi che si ripetono: tutti alti
   240px, cosi' salendo di 240px il giro si chiude senza salto. Sale
   l'elemento intero, che non si ridipinge. */
#sabato-oggi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 240px);
    background-image:
        radial-gradient(circle, rgba(255, 206, 110, 0.9) 0, rgba(255, 140, 40, 0) 2.5px),
        radial-gradient(circle, rgba(255, 170, 70, 0.75) 0, rgba(255, 120, 30, 0) 2px),
        radial-gradient(circle, rgba(255, 224, 150, 0.6) 0, rgba(255, 150, 50, 0) 1.6px);
    background-size: 170px 240px, 113px 240px, 71px 240px;
    background-position: 22px 40px, 78px 150px, 31px 95px;
    animation: sabato-faville 7s linear infinite;
    pointer-events: none;
}

@keyframes sabato-faville {
    from { transform: translateY(0); }
    to { transform: translateY(-240px); }
}

#invito-quando, #sabato-oggi-quando {
    margin-bottom: 22px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.45);
    color: #ffc857;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#sabato-oggi-quando {
    margin-bottom: 14px;
    box-shadow: 0 0 0 1px rgba(255, 150, 70, 0.6);
    color: #ffb36b;
}

#sabato-oggi-fiamma {
    position: relative;
    z-index: 0;
    margin-bottom: 4px;
    transform-origin: 50% 100%;
    animation: sabato-fiamma 1.7s ease-in-out infinite;
}

#sabato-oggi-fiamma::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -90%;
    z-index: -1;
    width: 280%;
    height: 180%;
    background-image: radial-gradient(circle, rgba(255, 170, 60, 0.55) 0%, rgba(255, 110, 30, 0.18) 40%, rgba(255, 110, 30, 0) 68%);
}

#sabato-oggi-fiamma .fiamma {
    display: block;
}

@keyframes sabato-fiamma {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.04, 0.95); }
    60% { transform: scale(0.97, 1.06); }
}

#sabato-oggi-titolo {
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.05;
    white-space: nowrap;
}

/* l'oro ritagliato sulla scritta e il contorno in una copia dietro, come il
   titolo della copertina; la copia la scrive evento.js, gia' tradotta */
#sabato-oggi-titolo span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(#fff3c4 0%, #ffd060 40%, #ff9a2e 75%, #e2561c 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

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

/* la regola: i distintivi larghi uguali, cosi' le parole accanto stanno in
   colonna */
#sabato-oggi-regole {
    width: 100%;
    max-width: 310px;
    margin-bottom: 12px;
}

.sabato-oggi-regola {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    font-size: 18px;
    color: #ffeede;
    text-align: left;
}

.sabato-oggi-regola .per-distintivo {
    flex: 0 0 auto;
    justify-content: center;
    box-sizing: border-box;
    min-width: 86px;
    margin-right: 12px;
    padding: 2px 12px 2px 7px;
    font-size: 23px;
}

/* in fondo la medaglia e la figura della cima, larghe come un distintivo */
.sabato-oggi-premi {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 86px;
    margin-right: 12px;
}

.sabato-oggi-premi .medaglia-svg {
    margin-right: 2px;
}

.sabato-oggi-premi .fine-figura svg {
    width: 34px;
    height: 34px;
}

/* l'ultima riga non ha distintivo: parte dove partono le parole */
.sabato-oggi-regola.sabato-oggi-perdi {
    padding-left: 98px;
}

#sabato-oggi-nota {
    max-width: 300px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.4;
    color: #ffd9c0;
}

/* sui telefoni bassi, come l'iPhone SE, ci stanno anche i tasti */
@media (max-height: 700px) {
    #sabato-oggi-quando {
        margin-bottom: 6px;
    }

    #sabato-oggi-fiamma .fiamma {
        width: 48px;
        height: 64px;
    }

    #sabato-oggi-titolo {
        margin-bottom: 10px;
        font-size: 36px;
    }

    .sabato-oggi-regola {
        margin-bottom: 6px;
        font-size: 16px;
    }

    .sabato-oggi-regola .per-distintivo {
        font-size: 19px;
    }

    #sabato-oggi-nota {
        margin-bottom: 12px;
        font-size: 14px;
    }
}

/* e su quelli piu' piccoli ancora, come il primo iPhone SE */
@media (max-height: 600px) {
    #sabato-oggi-quando {
        margin-bottom: 4px;
    }

    #sabato-oggi-fiamma .fiamma {
        width: 39px;
        height: 52px;
    }

    #sabato-oggi-titolo {
        margin-bottom: 8px;
        font-size: 32px;
    }

    .sabato-oggi-regola {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .sabato-oggi-regola .per-distintivo {
        min-width: 76px;
        font-size: 17px;
    }

    .sabato-oggi-premi {
        min-width: 76px;
    }

    .sabato-oggi-premi .medaglia-svg svg {
        width: 32px;
        height: 32px;
    }

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

    #sabato-oggi-nota {
        margin-bottom: 8px;
        font-size: 13px;
    }
}

/* Il premio: raggi che girano dietro la tessera, la tessera che arriva
   rimbalzando, il titolo timbrato e poi il resto; gli stessi raggi stanno
   dietro la medaglia toccata nel profilo, le medaglie prese in partita e il
   conto messo al sicuro. I raggi sfumano nel trasparente prima del bordo del
   loro quadrato, che gira: col velo scuro dipinto dentro, su uno schermo
   largo il quadrato si vedeva storto sullo sfondo. */
#premio, #medaglia {
    overflow: hidden;
}

#premio::before, #medaglia::before, #medaglie-nuove::before, #al-sicuro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 1000px;
    height: 1000px;
    margin: -560px 0 0 -500px;
    background-image: repeating-conic-gradient(rgba(255, 214, 120, 0.2) 0deg 8deg, rgba(255, 214, 120, 0) 8deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, #000 30%, transparent 100%);
    animation: premio-gira 22s linear infinite;
    pointer-events: none;
}

#premio.arriva .premio-tessera {
    animation: premio-arriva 0.7s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

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

#premio.arriva #premio-testo,
#premio.arriva #premio-nota,
#premio.arriva #premio-ritira {
    animation: premio-sotto 0.4s 0.9s ease both;
}

/* la tessera ritirata vola nel logo, sopra a tutto */
.premio-vola {
    position: fixed;
    margin: 0;
    transition: transform 0.65s cubic-bezier(0.55, 0, 0.75, 0.4), opacity 0.65s ease-in;
}

@keyframes premio-gira {
    to { transform: rotate(360deg); }
}

@keyframes premio-arriva {
    0% { opacity: 0; transform: scale(0.2) rotate(-25deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes premio-sotto {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- L'attesa di un avversario -------------------------------------------- */

/* I tre puntini mentre si aspetta un avversario */
#online-attesa i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--oro);
    -webkit-animation: puntini 1.2s ease-in-out infinite;
    animation: puntini 1.2s ease-in-out infinite;
}

#online-attesa i + i { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#online-attesa i + i + i { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

/* Un nome suo: due animazioni con lo stesso nome non si sommano, l'ultima
   sostituisce l'altra per intero, e pulsa e' quella della carta del mazzetto */
@-webkit-keyframes puntini {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes puntini {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* --- La manutenzione (manutenzione-vista.js) ------------------------------- */

/* La finestra, come quella di Clash Royale: l'officina blu notte con le
   strisce gialle e nere del cantiere sopra e sotto, gli ingranaggi che girano
   dietro al logo, il martello che ci batte sopra con la scintilla, e sotto
   la clessidra che si gira accanto ai minuti. Il fondo e' scuro per l'oro del
   titolo e del tasto; --bg colora la barra del telefono. */
#manutenzione {
    --bg: #0f1a2e;
    --cantiere: repeating-linear-gradient(-45deg, #ffc21a 0, #ffc21a 14px, #1b1b1b 14px, #1b1b1b 28px);
    overflow-x: hidden;
    padding-top: 44px;
    padding-bottom: 40px;
    background-color: #0f1a2e;
    background-image:
        var(--cantiere), var(--cantiere),
        radial-gradient(ellipse 80% 42% at 50% 34%, rgba(90, 150, 255, 0.34) 0%, rgba(40, 80, 170, 0.12) 55%, rgba(40, 80, 170, 0) 100%),
        linear-gradient(180deg, #1b2b4a 0%, #0f1a2e 60%, #0a1120 100%);
    background-size: 100% 16px, 100% 16px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 100%, 0 0, 0 0;
    background-repeat: no-repeat;
}

/* in mezzo allo schermo, ma su uno basso si scorre dall'inizio */
#manutenzione > :first-child {
    margin-top: auto;
}

#manutenzione > :last-child {
    margin-bottom: auto;
}

#manutenzione-titolo {
    margin: 0 0 4px;
    font-size: 44px;
    line-height: 1.05;
    white-space: nowrap;
}

/* l'oro ritagliato sulla scritta e il contorno in una copia dietro, come il
   titolo del Sabato; la copia la scrive manutenzione-vista.js, gia' tradotta */
#manutenzione-titolo span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(#fff3c4 0%, #ffd060 45%, #f0a020 80%, #c8780e 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

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

/* La scena: il logo in mezzo, gli ingranaggi dietro in alto a destra e il
   martello a sinistra, che batte sull'angolo del logo. Il colpo, la scintilla
   e il logo che sobbalza hanno la stessa durata, cosi' restano insieme. */
#manutenzione-scena {
    position: relative;
    width: 250px;
    height: 196px;
    margin: 0 0 8px;
}

.manutenzione-ingranaggi {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 140px;
    height: 140px;
    animation: manutenzione-gira 16s linear infinite;
}

.manutenzione-logo {
    position: absolute;
    top: 52px;
    left: 61px;
    width: 128px;
    height: 128px;
    border-radius: 25%;
    box-shadow: 0 0 0 4px #000000, 0 12px 26px rgba(0, 0, 0, 0.55);
    animation: manutenzione-sobbalza 1.4s linear infinite;
}

.manutenzione-martello {
    position: absolute;
    top: 30px;
    left: -6px;
    width: 104px;
    height: 104px;
    transform-origin: 18% 86%;
    animation: manutenzione-batte 1.4s ease-in infinite;
}

#manutenzione-scena::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 58px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 246, 200, 0.95) 0%, rgba(255, 206, 70, 0.65) 32%, rgba(255, 160, 30, 0) 70%);
    opacity: 0;
    animation: manutenzione-scintilla 1.4s ease-out infinite;
}

@keyframes manutenzione-gira {
    to { transform: rotate(360deg); }
}

/* il martello e' girato nel file, con la testa a destra: dall'alto cade sul
   logo, rimbalza un poco e torna su */
@keyframes manutenzione-batte {
    0%, 52% { transform: rotate(-34deg); }
    66% { transform: rotate(8deg); }
    74% { transform: rotate(-2deg); }
    100% { transform: rotate(-34deg); }
}

@keyframes manutenzione-scintilla {
    0%, 64% { opacity: 0; transform: scale(0.3); }
    68% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

@keyframes manutenzione-sobbalza {
    0%, 64% { transform: none; }
    68% { transform: translate(3px, 2px) rotate(2deg); }
    78% { transform: none; }
}

/* I minuti: la clessidra che si gira ogni quattro secondi e il conto, col
   contorno nero come le scritte grandi. Senza minuti, a zero partite o con
   la stima passata, la frase da sola prende il loro posto. */
#manutenzione-conto {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    padding: 8px 26px 8px 12px;
    border-radius: 44px;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: 0 0 0 2px rgba(255, 194, 26, 0.6);
}

#manutenzione-conto img {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    margin-right: 10px;
    animation: manutenzione-clessidra 4s ease-in-out infinite;
}

@keyframes manutenzione-clessidra {
    0%, 82% { transform: rotate(0); }
    100% { transform: rotate(180deg); }
}

.sopra #manutenzione-conto p {
    margin: 0;
    text-align: left;
}

#manutenzione-fra {
    display: block;
    font-size: 16px;
    color: #cfe0ff;
}

#manutenzione-tempo {
    display: block;
    font-size: 42px;
    line-height: 1.1;
}

#manutenzione-conto.senza-minuti #manutenzione-fra {
    max-width: 210px;
    font-size: 20px;
    line-height: 1.25;
    color: #ffffff;
}

.sopra p.manutenzione-riga {
    max-width: 300px;
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.35;
    color: #e4ecff;
}

#manutenzione-ok {
    margin-top: 16px;
}

/* In sala, al posto di «Cerca un avversario», i minuti sul nastro del
   cantiere, con la clessidra: toccati riaprono la finestra */
#online-fermo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 330px;
    padding: 6px 26px 6px 14px;
    white-space: normal;
    text-align: left;
    line-height: 1.2;
    border: 3px solid transparent;
    background:
        linear-gradient(#1b2b4a, #0f1a2e) padding-box,
        repeating-linear-gradient(-45deg, #ffc21a 0, #ffc21a 8px, #1b1b1b 8px, #1b1b1b 16px) border-box;
    color: #ffffff;
}

#online-fermo img {
    width: 34px;
    height: 34px;
    margin-right: 10px;
}

/* Al tavolo, in cima, la striscia di chi gioca mentre la sala aspetta: un
   nastro del cantiere a tutta larghezza sopra il banco dell'avversario. Sta
   in fila e non sopra, perche' sopra copriva il nome e le carte in mano
   dell'altro: il tavolo le fa posto (main.js), e sui telefoni alti la paga
   lo spazio che avanza alle colonne. */
#striscia-manutenzione {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;
    padding: 0 22px;
    background:
        repeating-linear-gradient(-45deg, #ffc21a 0, #ffc21a 7px, #1b1b1b 7px, #1b1b1b 14px) left / 14px 100% no-repeat,
        repeating-linear-gradient(-45deg, #ffc21a 0, #ffc21a 7px, #1b1b1b 7px, #1b1b1b 14px) right / 14px 100% no-repeat,
        #0f1a2e;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
}

#striscia-manutenzione img {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    animation: manutenzione-gira 8s linear infinite;
}

#striscia-manutenzione span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* sui telefoni bassi, come l'iPhone SE, ci sta anche il tasto */
@media (max-height: 700px) {
    #manutenzione {
        padding-top: 30px;
    }

    #manutenzione-titolo {
        font-size: 36px;
    }

    #manutenzione-scena {
        transform: scale(0.8);
        margin: -18px 0 -14px;
    }
}