/* Level up animation styles */
        #headerXpWidget::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(193, 100, 249, 0.5) 0%, transparent 80%);
            border-radius: 8px;
            opacity: 0;
            z-index: -1;
            pointer-events: none;
            transform: scale(0.8);
        }

        #headerXpWidget.animate-levelup::before {
            animation: widgetGlow 1s ease-out forwards;
        }

        #headerXpWidget.animate-levelup {
            animation: widgetBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .level-text.pop {
            animation: textPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #c164f9;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            box-shadow: 0 0 8px #c164f9;
            z-index: 10;
        }

        @keyframes widgetGlow {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }

            20% {
                opacity: 1;
                transform: scale(1.1);
            }

            100% {
                opacity: 0;
                transform: scale(1);
            }
        }

        @keyframes widgetBounce {
            0% {
                transform: scale(1);
            }

            30% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes textPop {
            0% {
                transform: scale(1);
            }

            40% {
                transform: scale(1.4);
                color: #c164f9 !important;
                text-shadow: 0 0 15px rgba(193, 100, 249, 0.8);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes flySparkle {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }

            100% {
                transform: translate(var(--tx), var(--ty)) scale(0);
                opacity: 0;
            }
        }