/* La Blitz (blitz.js). Sta in fondo, dopo il Jolly Ranger: e' l'ultimo
   evento arrivato. */

/* --- Le due riserve al tavolo (partita.js) --------------------------------- */

/* Ognuna sotto la casella dei punti del suo banco, col cronometro del
   pacchetto. Accesa, in ambra, quella di chi ha il turno, che scende; l'altra
   ferma e piu' tenue. Negli ultimi dieci secondi rossa, come la barra. La
   casella dei punti e' fuori dal flusso, e l'orologio con lei: le fasce del
   tavolo restano alte com'erano (tavolo.js). La stessa pillola, piu' grande,
   e' l'orologio della Storm (stile-puzzle.css). */
.punti-partita .riserva,
#orologio {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 3px 9px 3px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    color: #f2e8dc;
    font-size: calc(var(--cw) * 0.3);
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0.75;
}

.punti-partita .riserva::before,
#orologio::before {
    content: "";
    width: calc(var(--cw) * 0.3);
    height: calc(var(--cw) * 0.3);
    margin-right: 4px;
    background: url(immagini/cronometro.png) center / contain no-repeat;
}

.punti-partita .riserva.accesa,
#orologio.accesa {
    color: var(--ambra);
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.punti-partita .riserva.stretta,
#orologio.stretta {
    color: #ff6b5a;
}

.punti-partita .riserva[hidden],
#orologio[hidden] {
    display: none;
}

/* La pillola dei secondi ripresi (animazioni.js, volaBonus): verde e col
   cronometro, perche' non si legga come i punti, che salgono in oro */
.bonus-tempo {
    position: fixed;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px 4px 5px;
    border-radius: 999px;
    background: #2f9e5b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.bonus-tempo::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 5px;
    background: url(immagini/cronometro.png) center / contain no-repeat;
}

/* --- L'evento (blitz-vista.js) ---------------------------------------------- */

/* Il colore della Blitz nelle variabili del posto, delle tessere e della riga
   del menu (stile-sala.css, #online-evento), e il suo segno */
.evento-blitz {
    --ev-su: #f2bd12;
    --ev-mezzo: #a87800;
    --ev-giu: #2e1f00;
    --ev-scuro: rgba(242, 189, 18, 0.16);
    --ev-bordo: rgba(255, 214, 80, 0.65);
    --ev-raggi: rgba(255, 245, 200, 0.12);
    --ev-chiaro: #fff3c4;
    --ev-titolo: linear-gradient(#ffffff 0%, #fff8d6 34%, #ffe066 66%, #f2b705 100%);
}

#evento-menu.evento-blitz {
    color: #ffd85a;
}

.blitz-segno {
    display: inline-block;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.blitz-segno.spento {
    filter: saturate(0.75) brightness(0.9);
}

/* il distintivo: la pastiglia col segno, come quelle del Sabato, del Sudden
   e del Jolly (per-distintivo) */
.per-blitz {
    --fuoco-su: #ffd84a;
    --fuoco-mezzo: #c99400;
    --fuoco-giu: #4a3200;
    --bagliore: rgba(255, 200, 40, 0.6);
    --bagliore-r: 10px;
}

.per-distintivo.per-blitz {
    padding: 1px 10px 1px 4px;
    text-shadow: 0 1px 2px rgba(40, 25, 0, 0.75);
}

.per-distintivo .blitz-icona {
    flex: 0 0 auto;
    margin-right: 4px;
}

/* Il VS del lunedi': la sera del suo colore coi raggi, il segno che cala
   come un colpo, il nome timbrato e la regola. E' il VS dell'evento
   (stile-ingresso.css, #ingresso.evento) coi colori della Blitz. */
#ingresso.blitz {
    --bg: #241800;
    --raggi: rgba(255, 220, 120, 0.16);
    --orlo: rgba(255, 200, 60, 0.5);
    --titolo: linear-gradient(#ffffff 0%, #fff8d6 34%, #ffe066 66%, #f2b705 100%);
    background-image: radial-gradient(ellipse at 50% 40%, #6b4a00 0%, #241800 55%, #0d0900 100%);
}

#ingresso.blitz::before {
    top: 30%;
}

#ingresso.blitz .evento-vs-segno .blitz-segno {
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 210, 60, 0.6));
    animation: blitz-cala 0.42s 0.15s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

@keyframes blitz-cala {
    0% { opacity: 0; transform: translateY(-160px) scale(1.5); }
    60% { opacity: 1; transform: translateY(8px) scale(0.92); }
    100% { opacity: 1; transform: none; }
}

#ingresso.blitz .evento-vs-titolo {
    text-transform: uppercase;
}

/* tre distintivi in fila: a 18 pixel su un telefono stretto non ci stanno,
   e sotto i 390 pixel il terzo va a capo */
#ingresso.blitz .evento-vs-regole {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 0 8px;
}

#ingresso.blitz .evento-vs-regole > .per-distintivo {
    margin: 0 3px;
    font-size: 14px;
}

#ingresso.blitz .ingresso-lato::before {
    box-shadow: 0 0 0 2px rgba(255, 210, 80, 0.5), 0 0 26px rgba(255, 190, 40, 0.45), 0 10px 28px rgba(0, 0, 0, 0.5);
}

@media (max-height: 720px) {
    #ingresso.blitz .evento-vs-segno .blitz-segno {
        width: 76px;
        height: 76px;
    }
}

@media (max-height: 660px) {
    #ingresso.blitz .evento-vs-segno .blitz-segno {
        width: 50px;
        height: 50px;
    }
}

@media (max-height: 600px) {
    #ingresso.blitz .evento-vs-regole {
        display: none;
    }
}

/* Aprendo il gioco il lunedi' (evento.js): la sera del suo colore coi raggi,
   il segno che pulsa, il nome col contorno e la regola in tre righe; --bg
   colora la barra del telefono */
#blitz-oggi {
    --bg: #1c1300;
    overflow: hidden;
    background-color: #1c1300;
    background-image: radial-gradient(ellipse 80% 45% at 50% 30%, rgba(255, 200, 40, 0.38) 0%, rgba(160, 110, 0, 0.18) 50%, rgba(160, 110, 0, 0) 100%),
        linear-gradient(180deg, #4a3300 0%, #1c1300 55%, #0b0700 100%);
}

#blitz-oggi::before {
    content: '';
    position: absolute;
    top: 28%;
    left: 50%;
    z-index: -1;
    width: 1100px;
    height: 1100px;
    margin: -550px 0 0 -550px;
    background-image: repeating-conic-gradient(rgba(255, 220, 120, 0.15) 0deg 9deg, rgba(255, 220, 120, 0) 9deg 22.5deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, #000 25%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, #000 25%, transparent 100%);
    animation: premio-gira 22s linear infinite;
    pointer-events: none;
}

#blitz-oggi-quando {
    margin-bottom: 10px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 210, 80, 0.6);
    color: #ffd85a;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#blitz-oggi-segno .blitz-segno {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 28px rgba(255, 210, 60, 0.55));
    animation: blitz-pulsa 1.4s ease-in-out infinite;
}

@keyframes blitz-pulsa {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.08) rotate(-3deg); }
    24% { transform: scale(1); }
}

#blitz-oggi-titolo {
    margin: 6px 0 14px;
    font-size: 46px;
    font-weight: bold;
    line-height: 1.05;
    white-space: nowrap;
    text-transform: uppercase;
}

/* il nome col contorno nero: una copia dietro la scritta, scritta da chi la
   disegna (data-t), come nella schermata del Jolly Ranger */
#blitz-oggi-titolo span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(#ffffff 0%, #fff8d6 34%, #ffe066 66%, #f2b705 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

#blitz-oggi-titolo span::before {
    --contorno: #000000;
    content: attr(data-t);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #000000;
    text-shadow:
        -0.055em 0 0 var(--contorno), -0.051em -0.021em 0 var(--contorno),
        -0.039em -0.039em 0 var(--contorno), -0.021em -0.051em 0 var(--contorno),
        0 -0.055em 0 var(--contorno), 0.021em -0.051em 0 var(--contorno),
        0.039em -0.039em 0 var(--contorno), 0.051em -0.021em 0 var(--contorno),
        0.055em 0 0 var(--contorno), 0.055em 0.08em 0 var(--contorno),
        0.051em 0.101em 0 var(--contorno), 0.039em 0.119em 0 var(--contorno),
        0.021em 0.131em 0 var(--contorno), 0 0.135em 0 var(--contorno),
        -0.021em 0.131em 0 var(--contorno), -0.039em 0.119em 0 var(--contorno),
        -0.051em 0.101em 0 var(--contorno), -0.055em 0.08em 0 var(--contorno),
        0.055em 0.04em 0 var(--contorno), -0.055em 0.04em 0 var(--contorno),
        0 0.16em 0.2em rgba(0, 0, 0, 0.5);
}

#blitz-oggi-regole {
    width: 100%;
    max-width: 300px;
    margin-bottom: 14px;
}

.blitz-oggi-regola {
    display: flex;
    align-items: center;
    margin: 0 0 9px;
    font-size: 17px;
    font-weight: bold;
    color: #fff3c4;
    text-align: left;
}

.blitz-oggi-regola .per-distintivo {
    flex: 0 0 auto;
    min-width: 116px;
    margin-right: 10px;
    font-size: 18px;
}

#blitz-oggi-testo {
    max-width: 300px;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.4;
    color: #fff0c8;
}

#blitz-oggi-chiama {
    animation: pulsa 1.6s 1s ease-in-out infinite;
}

@media (max-height: 700px) {
    #blitz-oggi-segno .blitz-segno {
        width: 96px;
        height: 96px;
    }

    #blitz-oggi-titolo {
        font-size: 36px;
    }
}