/* ------------------------------------------------------------- */
/* VARIABILI GLOBALI PER GLI EFFETTI XP */
/* ------------------------------------------------------------- */
:root {
    /* Colori base dall'ambientazione neon/scura */
    --xp-pulse-color: var(--neon-accent-color, #00ffff); /* Colore per l'effetto XP */
    --xp-text-color: #00ff00; /* Verde brillante per il testo guadagnato */
    --main-bg-color: #121212; /* Sfondo scuro per il Glitch */
}

/* ============================================================= */
/* EFFETTO 1: PULSAZIONE NEON (Per la barra XP o il box totale) */
/* ============================================================= */

/* Keyframes per la pulsazione (illuminazione e leggero ingrandimento) */
@keyframes xp-pulse {
    0%, 100% {
        /* Stato normale/finale: ombra leggera (assumiamo un box-shadow predefinito o nullo) */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        transform: scale(1);
        opacity: 1;
    }

    50% {
        /* Stato di picco: ombra neon intensa e leggera espansione */
        box-shadow: 0 0 10px var(--xp-pulse-color), 0 0 20px var(--xp-pulse-color), 0 0 40px var(--xp-pulse-color);
        transform: scale(1.03); /* Lieve ingrandimento */
        opacity: 1;
    }
}

/* Classe da applicare all'elemento XP */
.xp-gain-pulse {
    animation: xp-pulse 0.6s ease-out 2; /* 0.6 secondi di durata, 2 ripetizioni */
    transition: box-shadow 0.3s, transform 0.3s;
}

/* ============================================================= */
/* EFFETTO 2: NUMERI VOLANTI (+XP) */
/* ============================================================= */

/* Keyframes per far volare il testo verso l'alto e svanire */
@keyframes flying-xp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.8); /* Sale di 80px e rimpicciolisce */
    }
}

/* Classe da applicare all'elemento che contiene "+50 XP" */
.flying-xp-text {
    position: absolute; /* Necessario per il movimento libero */
    top: 50%; /* Posizionato sopra il punto di guadagno (es. il giocatore) */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--xp-text-color);
    text-shadow: 0 0 5px var(--xp-text-color);
    pointer-events: none; /* Ignora il mouse */
    z-index: 100;
    /* Applicazione dell'animazione: 1.5s per salire e svanire, una sola volta */
    animation: flying-xp 1.5s ease-out forwards;
}


/* ============================================================= */
/* EFFETTO 3: GLITCH DIGITALE (Per il numero di XP) */
/* ============================================================= */

/* Keyframes che simulano un rapido sfarfallio e shift RGB */
@keyframes digital-glitch {
    0% {
        text-shadow: 2px 0 0 red, -2px 0 0 blue;
        transform: translateX(0);
    }

    15% {
        text-shadow: -2px -2px 0 var(--xp-text-color), 2px 2px 0 var(--xp-pulse-color);
        transform: translateX(-2px);
    }

    30% {
        text-shadow: none;
        transform: translateX(2px);
    }

    45% {
        text-shadow: -1px 1px 0 red, 1px -1px 0 blue;
        transform: translateX(-1px);
    }

    60% {
        text-shadow: 1px 0 0 var(--xp-pulse-color), -1px 0 0 var(--xp-text-color);
        transform: translateX(1px);
    }

    75% {
        text-shadow: none;
        transform: translateX(-1px);
    }

    100% {
        text-shadow: none;
        transform: translateX(0);
    }
}

/* Classe da applicare al testo del numero totale di XP */
.xp-digital-glitch {
    animation: digital-glitch 0.4s steps(5, end) 1; /* Animazione veloce di 0.4s, eseguita una sola volta */
}

/* ------------------------------------------------------------- */
/* OLD STYLES FOR STARRY BACKGROUND (Mantenuti per contesto) */
/* ------------------------------------------------------------- */
.starry-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d1117; /* Sfondo molto scuro */
    overflow: hidden;
    z-index: -1;
}

.stars {
    position: absolute;
    width: var(--star-size);
    height: var(--star-size);
    background: transparent;
    box-shadow: 10px 20px var(--star-color), 30px 40px var(--star-color), 50px 10px var(--star-color), 70px 60px var(--star-color), 90px 30px var(--star-color);
    animation: move-stars var(--star-duration) linear infinite;
}

@keyframes move-stars {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200vh);
    }
}