#xenex-stat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.824);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none; /* <-- default: disabled */
    transition: opacity 0.4s ease, pointer-events 0s linear 0.4s; /* delays re-enabling pointer-events */
}



#xenex-stat-overlay img {
    margin-top: 10px;
    width: 50px;
    position: relative;
    z-index: 1;
    filter: grayscale(70%) contrast(1.2) brightness(1.1) drop-shadow(0 0 6px rgba(255, 106, 0, 0.3));
    transition: filter 0.3s ease;
}

/* Add hover effect to subtly re-color */
#xenex-stat-overlay img:hover {
    filter: grayscale(0%) contrast(1.3) brightness(1.2) drop-shadow(0 0 12px rgba(255, 106, 0, 0.5));
}

/* Use a wrapper div for the glow mask effect */
.xenex-img-wrapper {
    position: relative;
    display: inline-block;
}

.xenex-img-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.4) 0%, transparent 80%);
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
}


#xen-count {
    font-family: 'Cyberway', 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: 15px;
    color: linear-gradient(145deg, #f9c56c, #8f5b22 30%, #4e2a06 60%, #ffe39f);
    --glow: 0px 0px 6px rgba(255, 199, 112, 0.4);
    text-shadow:
        0 0 0 #ffffff,
        0px 1px 0 #3a1d00,
        1px 2px 1px #5c2c06,
        -1px -1px 1px #ffd18a,
        0px 0px 6px rgba(255, 199, 112, 0.4),
        var(--glow);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;

    transform: scale(1.09);
    animation: countPop 1.2s ease-out;
}


#slice-mask {
    position: absolute;
    margin-bottom: 0;
    top: 50%;
    left: 50%;
    width: 210px;
    height: 3px;
    background: linear-gradient(to right, #ff6a00, #ffcc00, #ff6a00);
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: center;
    opacity: 1;
    border-radius: 50px;
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.8);
    z-index: 1;
}





#xen-label {
    font-family: 'Cinzel Decorative', serif;
    font-size: 3rem;
    background: linear-gradient(145deg, #f9c56c, #8f5b22 30%, #4e2a06 60%, #ffe39f);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    letter-spacing: 2px;
    --glow: 0px 0px 6px rgba(255, 199, 112, 0.4);

    text-shadow:
        0 0 0 #000,
        0px 1px 0 #3a1d00,
        1px 2px 1px #5c2c06,
        -1px -1px 1px #ffd18a,
        0px 0px 6px rgba(255, 199, 112, 0.4),
        1px 0 #8f5b22,
        -1px 0 #8f5b22,
        0 1px #8f5b22,
        0 -1px #8f5b22,
        var(--glow);
    margin-top: 5px;
    opacity: 0;
    transform: scale(1.2) rotateX(-90deg);
    /* text-transform: uppercase; */
}

#xen-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -65%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(95, 0, 196, 0.6), transparent);
    transform: skewX(-20deg);
    opacity: 0.7;
    filter: blur(2px);
}


#xen-label-wrapper {
    position: relative;
    display: inline-block;
    animation: glitchBurst 1s linear infinite;
    animation-delay: 2s;
    /* So it's not flickering too early */
}



@keyframes glitchBurst {

    0%,
    100% {
        transform: none;
    }

    10% {
        transform: translate(1px, -1px) skewX(5deg);
    }

    20% {
        transform: translate(-1px, 1px) skewX(-5deg);
    }

    80% {
        transform: translate(1px, 2px) skewX(4deg);
    }

    90% {
        transform: none;
    }
}



@media (max-width: 768px) {
  #xenex-stat-overlay img {
    width: 36px;
    margin-top: 8px;
  }

  .xenex-img-wrapper::after {
    width: 70px;
    height: 70px;
  }

  #xen-count {
    font-size: 2.2rem;
    letter-spacing: 8px;
    transform: scale(1.04);
  }

  #slice-mask {
    width: 140px;
    height: 2px;
  }

  #xen-label {
    font-size: 1.8rem;
    letter-spacing: 1px;
    transform: scale(1.1) rotateX(-90deg);
  }

  #xen-label::before {
    left: -50%;
    width: 60%;
  }
}