/* Extracted from discord/leaderboard.php for CSP compliance. */
body {
            background: #0a0a0f;
            overflow-x: hidden;
        }

        [data-reveal] {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }

        [data-reveal].visible {
            opacity: 1;
            transform: translateY(0);
        }

        .glow-card {
            background: rgba(11, 11, 22, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            position: relative;
            overflow: hidden;
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
        }

        .glow-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(88, 101, 242, .07), transparent);
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
        }

        .glow-card:hover::before { opacity: 1; }

        .glow-card:hover {
            transform: translateY(-6px);
            border-color: rgba(88, 101, 242, .22);
            box-shadow: 0 24px 64px -16px rgba(88, 101, 242, .22), 0 4px 24px -8px rgba(0, 0, 0, .7);
        }

        .glow-card[data-glow="purple"]:hover {
            border-color: rgba(168, 85, 247, .22);
            box-shadow: 0 24px 64px -16px rgba(168, 85, 247, .22), 0 4px 24px -8px rgba(0, 0, 0, .7);
        }
        .glow-card[data-glow="purple"]::before {
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(168, 85, 247, .07), transparent);
        }
        .glow-card[data-reveal]:not(.visible) {
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }

        .shine-btn {
            position: relative;
            overflow: hidden;
        }

        .shine-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
            transform: skewX(-20deg);
            transition: left .55s cubic-bezier(.4, 0, .2, 1);
        }

        .shine-btn:hover::after { left: 160%; }

        .btn-phi {
            background: linear-gradient(135deg, #a855f7, #ec4899);
            box-shadow: 0 0 34px rgba(168, 85, 247, .38), 0 8px 24px rgba(0, 0, 0, .45);
        }

        .text-gd-indigo {
            background: linear-gradient(135deg, #8b9fff 0%, #5865F2 45%, #818cf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 16px;
            background: rgba(88, 101, 242, .1);
            border-radius: 99px;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #8b9fff;
        }

        .glow-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(88, 101, 242, .35), rgba(225, 29, 72, .15), transparent);
        }

        .dot-grid {
            background-image: radial-gradient(circle, rgba(88, 101, 242, .08) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        .dot-grid-vignette {
            background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent, #0a0a0f 80%);
        }

        .h2-section {
            font-size: clamp(2.2rem, 5vw, 4rem);
        }

        .xp-fill {
            background: linear-gradient(90deg, #5865F2, #818cf8);
            transition: width 1s cubic-bezier(.16, 1, .3, 1);
        }

        .xp-fill-gold {
            background: linear-gradient(90deg, #f59e0b, #f97316);
            transition: width 1s cubic-bezier(.16, 1, .3, 1);
        }

        .text-gd-yellow {
            background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #f97316 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 28px rgba(245, 158, 11, .4));
        }

        .podium-card {
            background: rgba(7, 7, 18, 0.92);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(32px);
            -webkit-backdrop-filter: blur(32px);
        }
        .podium-card-gold {
            border: 1.5px solid rgba(234, 179, 8, .52);
            box-shadow:
                0 0 0 1px rgba(234, 179, 8, .08),
                0 0 60px rgba(234, 179, 8, .3),
                0 32px 80px -12px rgba(0, 0, 0, .9),
                inset 0 1px 0 rgba(255, 255, 255, .07);
        }
        .podium-card-gold::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(234, 179, 8, .13), transparent);
            pointer-events: none;
        }
        .podium-card-silver {
            border: 1.5px solid rgba(88, 101, 242, .48);
            box-shadow:
                0 0 0 1px rgba(88, 101, 242, .07),
                0 0 44px rgba(88, 101, 242, .25),
                0 24px 60px -12px rgba(0, 0, 0, .9),
                inset 0 1px 0 rgba(255, 255, 255, .06);
        }
        .podium-card-silver::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(88, 101, 242, .1), transparent);
            pointer-events: none;
        }
        .podium-card-bronze {
            border: 1.5px solid rgba(249, 115, 22, .42);
            box-shadow:
                0 0 0 1px rgba(249, 115, 22, .07),
                0 0 40px rgba(249, 115, 22, .2),
                0 24px 60px -12px rgba(0, 0, 0, .9),
                inset 0 1px 0 rgba(255, 255, 255, .06);
        }
        .podium-card-bronze::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(249, 115, 22, .09), transparent);
            pointer-events: none;
        }

        .podium-card-gold::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 55%;
            background: linear-gradient(to bottom, transparent 0%, rgba(234, 179, 8, .18) 100%);
            pointer-events: none;
            z-index: 0;
        }
        .podium-card-silver::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 55%;
            background: linear-gradient(to bottom, transparent 0%, rgba(88, 101, 242, .18) 100%);
            pointer-events: none;
            z-index: 0;
        }
        .podium-card-bronze::after {
            content: "";
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 55%;
            background: linear-gradient(to bottom, transparent 0%, rgba(249, 115, 22, .18) 100%);
            pointer-events: none;
            z-index: 0;
        }

        @keyframes pp-rise {
            0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
            14%  { opacity: var(--pk, .65); }
            78%  { opacity: calc(var(--pk, .65) * 0.45); }
            100% { transform: translateY(-200px) translateX(var(--drift, 0px)) scale(0.1); opacity: 0; }
        }
        .podium-card { z-index: 2; }
        .podium-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            overflow: visible;
        }
        .pp {
            position: absolute;
            bottom: 10px;
            border-radius: 50%;
            animation-name: pp-rise;
            animation-duration: var(--dur, 2.5s);
            animation-timing-function: ease-in;
            animation-delay: var(--delay, 0s);
            animation-iteration-count: infinite;
            opacity: 0;
            width: var(--s, 5px);
            height: var(--s, 5px);
            left: var(--x, 50%);
            background: var(--c, rgba(234,179,8,.9));
            filter: blur(var(--b, 2px));
        }

        .glow-card[data-glow="bronze"]::before {
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(88, 101, 242, .07), transparent);
        }