/**
 * Zac Asteroid — Classifica Globale Pubblica
 * Versione: 2.1.0
 *
 * [FIX] CSS Isolation: tutti i selettori scoped sotto .zac-glb-wrap
 */

/* Scoped reset */
.zac-glb-wrap,
.zac-glb-wrap *,
.zac-glb-wrap *::before,
.zac-glb-wrap *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.zac-glb-wrap {
    max-width: 500px;
    margin: 20px auto;
    font-family: var(--zac-font-primary, inherit);
    background: var(--zac-bg, #161616);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px;
    border-radius: var(--zac-border-radius, 0);
    border: var(--zac-border-width, 2px) solid var(--zac-border-color, var(--zac-primary));
    color: var(--zac-ui-text, #fff);
    line-height: 1.4;
}

.zac-glb-wrap .zac-glb-title {
    text-align: center;
    color: var(--zac-primary);
    font-family: var(--zac-font-primary, inherit);
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 calc(10px * var(--zac-neon, 1)) var(--zac-primary);
    margin: 0 0 20px 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    background: none;
}

.zac-glb-wrap .zac-glb-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* [PERF] I lampeggi animano solo l'opacita' (il browser la cambia senza
   ridisegnare): fino alla 2.0.8 animavano bordo, colore e ombra del testo di ogni
   riga, che si ridisegnavano a ogni fotogramma su ogni pagina con la classifica,
   anche fuori dallo schermo. Stesso aspetto: il bordo acceso e il punteggio nel
   colore d'accento sono due strati (::after) che compaiono e scompaiono. */
.zac-glb-wrap .zac-glb-list li {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.04);
    margin: 0 0 5px 0;
    border-radius: var(--zac-lb-item-radius, 8px);
    border: var(--zac-lb-item-border, 1px) solid var(--zac-accent-20, transparent);
    font-size: 13px;
    list-style: none;
    animation: zac-glb-list-pulse 2s infinite;
}

/* Il bordo acceso, sovrapposto esattamente a quello della riga */
.zac-glb-wrap .zac-glb-list li::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--zac-lb-item-border, 1px));
    right: calc(-1 * var(--zac-lb-item-border, 1px));
    bottom: calc(-1 * var(--zac-lb-item-border, 1px));
    left: calc(-1 * var(--zac-lb-item-border, 1px));
    border: var(--zac-lb-item-border, 1px) solid var(--zac-accent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: zac-glb-ring-pulse 2s infinite;
}

.zac-glb-wrap .zac-glb-list li span {
    display: inline-block;
    color: var(--zac-leader-name, var(--zac-ui-text, #fff));
}

.zac-glb-wrap .zac-glb-list li span.zac-glb-score {
    position: relative;
    font-weight: bold;
    color: var(--zac-primary);
    text-shadow: 0 0 calc(5px * var(--zac-neon, 1)) var(--zac-primary);
}

/* Lo stesso numero nel colore d'accento, sopra quello base (data-score lo scrive
   il PHP; "/ ''" lo nasconde ai lettori di schermo, che leggono gia' il numero) */
.zac-glb-wrap .zac-glb-list li span.zac-glb-score::after {
    content: attr(data-score);
    content: attr(data-score) / "";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--zac-accent);
    text-shadow: 0 0 calc(10px * var(--zac-neon, 1)) var(--zac-accent);
    opacity: 0;
    pointer-events: none;
    animation: zac-glb-score-pulse 1.5s infinite;
}

@keyframes zac-glb-list-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes zac-glb-ring-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

@keyframes zac-glb-score-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* A partita in corso (classe zac-playing sulla radice del documento: la mette il
   motore di gioco, e la toglie in pausa e a fine partita) i lampeggi si fermano
   comunque: nella stessa pagina il gioco ha la precedenza. Da ferma la classifica
   e' quella di prima: righe senza bordo, punteggio nel colore d'accento. */
html.zac-playing .zac-glb-wrap .zac-glb-list li,
html.zac-playing .zac-glb-wrap .zac-glb-list li::after,
html.zac-playing .zac-glb-wrap .zac-glb-list li span.zac-glb-score::after {
    animation: none;
}

html.zac-playing .zac-glb-wrap .zac-glb-list li {
    border-color: transparent;
}

html.zac-playing .zac-glb-wrap .zac-glb-list li span.zac-glb-score {
    color: var(--zac-accent);
    text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .zac-glb-wrap .zac-glb-list li,
    .zac-glb-wrap .zac-glb-list li::after,
    .zac-glb-wrap .zac-glb-list li span.zac-glb-score::after {
        animation: none;
    }

    .zac-glb-wrap .zac-glb-list li {
        border-color: transparent;
    }

    .zac-glb-wrap .zac-glb-list li span.zac-glb-score {
        color: var(--zac-accent);
        text-shadow: none;
    }
}