/* Server supporters — customizable name colour + effect (cosmetic; staff rainbow still wins). */

.username-supporter,
a.username-supporter,
a.username-supporter:link,
a.username-supporter:visited,
.member-card-name.username-supporter,
a.member-card-name.username-supporter,
.member-card-name .username-supporter,
.drawer-lb-username.username-supporter,
.drawer-lb-username .username-supporter,
.drawer-lb-trainer-link.username-supporter,
.drawer-lb-owner-link.username-supporter,
.lb-username.username-supporter,
.lb-username .username-supporter,
.lb-td-owner .username-supporter,
.forum-user-link .username-supporter,
.forum-author-name .username-supporter,
.map-popup-user-cell .username-supporter,
.dashboard-side-title .username-supporter,
.battle-member-search-results .username-supporter,
.tb-section-header .username-supporter,
.pd-meta-grid .username-supporter,
.catch-success-ot .username-supporter,
.trainer-profile-link .username-supporter {

    --supporter-solid: #b45309;
    --supporter-mid: #d97706;
    --supporter-hi: #fbbf24;
    --supporter-hi2: #fde68a;
    --supporter-lo: #92400e;
    --supporter-sparkle-a: #fde68a;
    --supporter-sparkle-b: #fbbf24;
    --supporter-sparkle-c: #f59e0b;
    --supporter-sparkle-d: #fcd34d;
    --supporter-sparkle-e: #eab308;
    --supporter-rim: rgba(120, 53, 15, 0.55);
    --supporter-rim-hi: rgba(253, 230, 138, 0.4);
    --supporter-glow: rgba(251, 191, 36, 0.55);

    position: relative;
    display: inline-block;
    font-weight: 700;
    color: var(--supporter-solid) !important;
    background-image: linear-gradient(
        105deg,
        var(--supporter-lo) 0%,
        var(--supporter-solid) 18%,
        var(--supporter-mid) 36%,
        var(--supporter-hi) 52%,
        var(--supporter-hi2) 62%,
        var(--supporter-mid) 78%,
        var(--supporter-solid) 100%
    );
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: username-supporter-shimmer 4.6s ease-in-out infinite;
    text-decoration-color: rgba(180, 83, 9, 0.45);
    filter:
        drop-shadow(0 0 0.35px var(--supporter-rim))
        drop-shadow(0 0.5px 0.5px var(--supporter-rim-hi));
    vertical-align: baseline;
    line-height: inherit;
}

/* —— Colour presets (override CSS variables) —— */

.username-supporter--gold {
    --supporter-solid: #b45309;
    --supporter-mid: #d97706;
    --supporter-hi: #fbbf24;
    --supporter-hi2: #fde68a;
    --supporter-lo: #92400e;
    --supporter-sparkle-a: #fde68a;
    --supporter-sparkle-b: #fbbf24;
    --supporter-sparkle-c: #f59e0b;
    --supporter-sparkle-d: #fcd34d;
    --supporter-sparkle-e: #eab308;
    --supporter-rim: rgba(120, 53, 15, 0.55);
    --supporter-rim-hi: rgba(253, 230, 138, 0.4);
    --supporter-glow: rgba(251, 191, 36, 0.55);
}

.username-supporter--amber {
    --supporter-solid: #c2410c;
    --supporter-mid: #ea580c;
    --supporter-hi: #fb923c;
    --supporter-hi2: #ffedd5;
    --supporter-lo: #9a3412;
    --supporter-sparkle-a: #ffedd5;
    --supporter-sparkle-b: #fdba74;
    --supporter-sparkle-c: #f97316;
    --supporter-sparkle-d: #fed7aa;
    --supporter-sparkle-e: #ea580c;
    --supporter-rim: rgba(154, 52, 18, 0.55);
    --supporter-rim-hi: rgba(255, 237, 213, 0.4);
    --supporter-glow: rgba(249, 115, 22, 0.5);
}

.username-supporter--rose {
    --supporter-solid: #be123c;
    --supporter-mid: #e11d48;
    --supporter-hi: #fb7185;
    --supporter-hi2: #ffe4e6;
    --supporter-lo: #9f1239;
    --supporter-sparkle-a: #ffe4e6;
    --supporter-sparkle-b: #fda4af;
    --supporter-sparkle-c: #f43f5e;
    --supporter-sparkle-d: #fecdd3;
    --supporter-sparkle-e: #e11d48;
    --supporter-rim: rgba(159, 18, 57, 0.5);
    --supporter-rim-hi: rgba(255, 228, 230, 0.4);
    --supporter-glow: rgba(244, 63, 94, 0.45);
}

.username-supporter--crimson {
    --supporter-solid: #991b1b;
    --supporter-mid: #dc2626;
    --supporter-hi: #f87171;
    --supporter-hi2: #fee2e2;
    --supporter-lo: #7f1d1d;
    --supporter-sparkle-a: #fee2e2;
    --supporter-sparkle-b: #fca5a5;
    --supporter-sparkle-c: #ef4444;
    --supporter-sparkle-d: #fecaca;
    --supporter-sparkle-e: #dc2626;
    --supporter-rim: rgba(127, 29, 29, 0.55);
    --supporter-rim-hi: rgba(254, 226, 226, 0.35);
    --supporter-glow: rgba(220, 38, 38, 0.45);
}

.username-supporter--emerald {
    --supporter-solid: #047857;
    --supporter-mid: #059669;
    --supporter-hi: #34d399;
    --supporter-hi2: #d1fae5;
    --supporter-lo: #065f46;
    --supporter-sparkle-a: #d1fae5;
    --supporter-sparkle-b: #6ee7b7;
    --supporter-sparkle-c: #10b981;
    --supporter-sparkle-d: #a7f3d0;
    --supporter-sparkle-e: #059669;
    --supporter-rim: rgba(6, 95, 70, 0.55);
    --supporter-rim-hi: rgba(209, 250, 229, 0.4);
    --supporter-glow: rgba(16, 185, 129, 0.45);
}

.username-supporter--sapphire {
    --supporter-solid: #1d4ed8;
    --supporter-mid: #2563eb;
    --supporter-hi: #60a5fa;
    --supporter-hi2: #dbeafe;
    --supporter-lo: #1e3a8a;
    --supporter-sparkle-a: #dbeafe;
    --supporter-sparkle-b: #93c5fd;
    --supporter-sparkle-c: #3b82f6;
    --supporter-sparkle-d: #bfdbfe;
    --supporter-sparkle-e: #2563eb;
    --supporter-rim: rgba(30, 58, 138, 0.5);
    --supporter-rim-hi: rgba(219, 234, 254, 0.4);
    --supporter-glow: rgba(59, 130, 246, 0.45);
}

.username-supporter--violet {
    --supporter-solid: #6b21a8;
    --supporter-mid: #7e22ce;
    --supporter-hi: #c084fc;
    --supporter-hi2: #f3e8ff;
    --supporter-lo: #581c87;
    --supporter-sparkle-a: #f3e8ff;
    --supporter-sparkle-b: #d8b4fe;
    --supporter-sparkle-c: #a855f7;
    --supporter-sparkle-d: #e9d5ff;
    --supporter-sparkle-e: #7e22ce;
    --supporter-rim: rgba(88, 28, 135, 0.5);
    --supporter-rim-hi: rgba(243, 232, 255, 0.4);
    --supporter-glow: rgba(168, 85, 247, 0.4);
}

.username-supporter--silver {
    --supporter-solid: #57534e;
    --supporter-mid: #78716c;
    --supporter-hi: #d6d3d1;
    --supporter-hi2: #fafaf9;
    --supporter-lo: #44403c;
    --supporter-sparkle-a: #fafaf9;
    --supporter-sparkle-b: #e7e5e4;
    --supporter-sparkle-c: #a8a29e;
    --supporter-sparkle-d: #f5f5f4;
    --supporter-sparkle-e: #78716c;
    --supporter-rim: rgba(68, 64, 60, 0.5);
    --supporter-rim-hi: rgba(250, 250, 249, 0.45);
    --supporter-glow: rgba(168, 162, 158, 0.5);
}

/* Warm glitter flecks — colour comes from CSS vars */
.username-supporter::before,
.username-supporter::after {
    content: "";
    position: absolute;
    inset: -3px -5px;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat;
}

.username-supporter::before {
    background-image:
        radial-gradient(circle, var(--supporter-sparkle-a) 0 1px, transparent 1.6px),
        radial-gradient(circle, var(--supporter-sparkle-b) 0 1px, transparent 1.5px),
        radial-gradient(circle, var(--supporter-sparkle-c) 0 0.8px, transparent 1.3px);
    background-size: 3px 3px, 3px 3px, 2.5px 2.5px;
    background-position:
        18% 22%,
        78% 14%,
        42% 78%;
    animation: username-supporter-sparkle-a 2.4s ease-in-out infinite;
}

.username-supporter::after {
    background-image:
        radial-gradient(circle, var(--supporter-sparkle-d) 0 0.9px, transparent 1.4px),
        radial-gradient(circle, var(--supporter-sparkle-e) 0 0.8px, transparent 1.3px);
    background-size: 2.5px 2.5px, 2.5px 2.5px;
    background-position:
        62% 8%,
        12% 58%;
    animation: username-supporter-sparkle-b 2.8s ease-in-out infinite;
}

/* —— Effect presets —— */

.username-supporter--none {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--supporter-solid) !important;
    color: var(--supporter-solid) !important;
    animation: none !important;
    filter:
        drop-shadow(0 0 0.35px var(--supporter-rim))
        drop-shadow(0 0.5px 0.5px var(--supporter-rim-hi));
}

.username-supporter--none::before,
.username-supporter--none::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.username-supporter--shimmer {
    /* Default shimmer look — inherits base gradient clip + sparkles */
}

.username-supporter--soft-sparkle {
    /* Same shimmer clip; quieter flecks */
}

.username-supporter--soft-sparkle::before,
.username-supporter--soft-sparkle::after {
    opacity: 0.42;
    transform: scale(0.92);
}

.username-supporter--soft-sparkle::before {
    animation-duration: 3.6s;
}

.username-supporter--soft-sparkle::after {
    animation-duration: 4.2s;
}

.username-supporter--glow {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--supporter-solid) !important;
    color: var(--supporter-solid) !important;
    animation: none !important;
    filter:
        drop-shadow(0 0 2px var(--supporter-glow))
        drop-shadow(0 0 5px var(--supporter-glow))
        drop-shadow(0 0 0.35px var(--supporter-rim));
    text-shadow: 0 0 8px var(--supporter-glow);
}

.username-supporter--glow::before,
.username-supporter--glow::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Compact / dark-panel contexts: no glitter flecks (read as noise on maroon) */
.member-card-name .username-supporter::before,
.member-card-name .username-supporter::after,
.member-card-name.username-supporter::before,
.member-card-name.username-supporter::after,
.drawer-lb-name-wrap .username-supporter::before,
.drawer-lb-name-wrap .username-supporter::after,
.supporter-name-wrap .username-supporter::before,
.supporter-name-wrap .username-supporter::after,
.drawer-lb-username.username-supporter::before,
.drawer-lb-username.username-supporter::after,
.drawer-lb-username .username-supporter::before,
.drawer-lb-username .username-supporter::after,
.drawer-lb-trainer-link.username-supporter::before,
.drawer-lb-trainer-link.username-supporter::after,
.drawer-lb-owner-link.username-supporter::before,
.drawer-lb-owner-link.username-supporter::after,
.lb-username .username-supporter::before,
.lb-username .username-supporter::after,
.lb-username.username-supporter::before,
.lb-username.username-supporter::after,
.drawer-prof-hero .username-supporter::before,
.drawer-prof-hero .username-supporter::after {

    content: none;
    display: none;
}

a.username-supporter:hover,
a.username-supporter:focus,
a.member-card-name.username-supporter:hover,
a.member-card-name.username-supporter:focus,
.member-card-name:hover .username-supporter,
.member-card-name:focus .username-supporter,
a.drawer-lb-username.username-supporter:hover,
a.drawer-lb-username:hover .username-supporter,
a.drawer-lb-trainer-link.username-supporter:hover,
a.drawer-lb-owner-link.username-supporter:hover,
a.lb-username.username-supporter:hover,
a.lb-username:hover .username-supporter,
a.trainer-profile-link:hover .username-supporter {

    filter:
        drop-shadow(0 0 0.35px var(--supporter-rim))
        drop-shadow(0 0.5px 0.5px var(--supporter-rim-hi))
        brightness(1.08);
}

a.username-supporter--glow:hover,
a.username-supporter--glow:focus,
.member-card-name:hover .username-supporter--glow,
a.drawer-lb-username:hover .username-supporter--glow {
    filter:
        drop-shadow(0 0 3px var(--supporter-glow))
        drop-shadow(0 0 7px var(--supporter-glow))
        drop-shadow(0 0 0.35px var(--supporter-rim))
        brightness(1.06);
}

@keyframes username-supporter-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes username-supporter-sparkle-a {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }
    45% {
        opacity: 0.85;
        transform: scale(1.03);
    }
    75% {
        opacity: 0.4;
        transform: scale(0.98);
    }
}

@keyframes username-supporter-sparkle-b {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
    30% {
        opacity: 0.25;
        transform: scale(0.97);
    }
    60% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

/*
 * Cherish Ball mark — PNG from site images/ui (full-red sphere, black side wings,
 * red center button with black ring; not a standard Poké Ball).
 */
.supporter-badge {
    --supporter-badge-fg: #5c3d0a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28em;
    margin-left: 0.35em;
    padding: 0.12em 0.45em 0.12em 0.32em;
    border: 1px solid #8a6420;
    border-radius: 3px;
    background: linear-gradient(180deg, #fff8e7 0%, #e8c96a 55%, #d4a84b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.12);
    color: var(--supporter-badge-fg) !important;
    -webkit-text-fill-color: var(--supporter-badge-fg) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    /* Kill parent gold-name inheritance (transparent fill / clipped gradient) */
    filter: none !important;
    animation: none !important;
    text-decoration: none !important;
    position: relative;
    z-index: 2;
}

.supporter-badge::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: url("../../images/ui/cherish-ball.png") center / contain no-repeat;
}

.supporter-badge-label {
    display: inline;
    color: inherit;
    -webkit-text-fill-color: inherit;
    white-space: nowrap;
}

/* Slightly smaller chip for lists / leaderboards — still shows icon + SUPPORTER on one line */
.supporter-badge--compact {
    margin-left: 0.22em;
    padding: 0.08em 0.36em 0.08em 0.26em;
    gap: 0.22em;
    font-size: 0.6em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    max-width: none;
    line-height: 1.15;
    flex-shrink: 0;
}

.supporter-badge--compact .supporter-badge-label {
    display: inline;
    white-space: nowrap;
}

.supporter-badge--compact::before {
    width: 12px;
    height: 12px;
}

/* Name + badge sit side-by-side; badge is a sibling, never absolute over the name */
.supporter-name-wrap,
.drawer-lb-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}

.supporter-name-wrap .supporter-badge,
.drawer-lb-name-wrap .supporter-badge,
.member-card-name .supporter-badge {
    margin-left: 0;
}

.drawer-lb-name-wrap .drawer-lb-username {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep ellipsis on the link when unstyled; styled names clip via the wrap instead. */
.drawer-lb-name-wrap:has(.username-supporter) .drawer-lb-username,
.drawer-lb-name-wrap:has(.username-staff) .drawer-lb-username {
    overflow: visible;
    text-overflow: unset;
}

.drawer-lb-name-wrap:has(.username-supporter),
.drawer-lb-name-wrap:has(.username-staff) {
    overflow: hidden;
    max-width: 100%;
}

.drawer-lb-name-wrap:has(.supporter-badge) .drawer-lb-username {
    max-width: 100px;
}

/* Owner column: truncate name only; leave room for the badge pill */
.drawer-lb-td-owner .drawer-lb-name-wrap {
    max-width: none;
}

.drawer-lb-td-owner .drawer-lb-name-wrap .drawer-lb-username {
    max-width: 72px;
}

.member-card-name {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35em;
    max-width: 100%;
    min-width: 0;
}

.member-card-name .supporter-name-wrap {
    max-width: 100%;
    min-width: 0;
    /* Truncate the wrap — overflow:hidden on the gradient name breaks background-clip:text. */
    overflow: hidden;
}

.member-card-name .username-supporter,
.member-card-name .supporter-name-wrap .username-supporter {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.profile-title-name {
    display: inline;
}

.profile-title .supporter-badge {
    margin-left: 0.45em;
    font-size: 0.55em;
    vertical-align: 0.15em;
}

.support-preview-name .supporter-name-wrap,
.support-preview-profile .supporter-name-wrap {
    gap: 0.4em;
}

/* Staff rainbow already identifies admins — never stack supporter chrome on it. */
.username-staff .supporter-badge,
.username-staff + .supporter-badge {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .username-supporter,
    a.username-supporter,
    a.username-supporter:link,
    a.username-supporter:visited,
    .member-card-name.username-supporter,
    a.member-card-name.username-supporter,
    .member-card-name .username-supporter,
    .drawer-lb-username.username-supporter,
    .drawer-lb-username .username-supporter,
    .drawer-lb-trainer-link.username-supporter,
    .drawer-lb-owner-link.username-supporter,
    .lb-username.username-supporter,
    .lb-username .username-supporter,
    .trainer-profile-link .username-supporter {
        animation: none;
        background-position: 40% 50%;
        filter:
            drop-shadow(0 0 0.35px var(--supporter-rim))
            drop-shadow(0 0.5px 0.5px var(--supporter-rim-hi));
    }

    .username-supporter--glow,
    a.username-supporter--glow {
        filter:
            drop-shadow(0 0 2px var(--supporter-glow))
            drop-shadow(0 0 0.35px var(--supporter-rim));
    }

    .username-supporter::before,
    .username-supporter::after {
        animation: none;
        opacity: 0.45;
        transform: none;
    }
}