/* HABLUXE CMS VISUAL SYSTEM V2 - PLAYER HQ EFFECTS PARITY 20260809
   Loads AFTER page-specific CSS. Visual-only shared effects layer.
   Player HQ canonical page is explicitly excluded.
*/

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) {
    --hbx-cms2-bg0: #040812;
    --hbx-cms2-bg1: #071120;
    --hbx-cms2-panel: rgba(7, 14, 31, .94);
    --hbx-cms2-text: #f2f8ff;
    --hbx-cms2-muted: #9bb0c8;
    --hbx-cms2-cyan: #24dcff;
    --hbx-cms2-blue: #4b8fff;
    --hbx-cms2-violet: #a764ff;
    --hbx-cms2-gold: #ffbd3d;
    --hbx-cms2-green: #40e5a0;
    color-scheme: dark;
}

/* =========================================================
   GLOBAL ATMOSPHERE
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body.site-bg,
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) #app,
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) main.site-bg {
    background:
        radial-gradient(circle at 13% -8%, rgba(22, 171, 255, .15), transparent 31%),
        radial-gradient(circle at 88% 16%, rgba(151, 72, 255, .13), transparent 31%),
        linear-gradient(180deg, #081321, #050914 44%, #040711) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner {
    position: relative;
    isolation: isolate;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -24px -36px;
    pointer-events: none;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 18%, rgba(34, 202, 255, .07), transparent 29%),
        radial-gradient(circle at 79% 21%, rgba(161, 93, 255, .06), transparent 30%),
        linear-gradient(118deg, transparent 0 60%, rgba(87, 130, 255, .025) 62%, transparent 64%);
    background-size: auto, auto, 245% 100%;
    animation: hbx-cms2-canvas-flow 13s linear infinite;
}

/* =========================================================
   NAV / SHARED CHROME
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-navigation-shell {
    position: relative;
    isolation: isolate;
    border-top: 1px solid rgba(255,255,255,.025) !important;
    border-bottom: 1px solid rgba(61, 165, 255, .28) !important;
    background:
        linear-gradient(180deg, rgba(10, 21, 43, .99), rgba(6, 13, 30, .99)) !important;
    box-shadow:
        0 12px 34px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 24px rgba(46, 137, 255, .055) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-navigation-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    opacity: .92;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(36,220,255,.28) 12%,
            #24dcff 31%,
            #6f8cff 50%,
            #a764ff 68%,
            rgba(78,145,255,.78) 83%,
            transparent 100%);
    background-size: 235% 100%;
    box-shadow:
        0 0 11px rgba(36,220,255,.72),
        0 0 24px rgba(122,93,255,.28);
    animation: hbx-cms2-nav-flow 7s linear infinite;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-utility-bar {
    border-color: rgba(78, 153, 238, .22) !important;
    background:
        linear-gradient(180deg, rgba(10,19,39,.97), rgba(6,13,29,.97)) !important;
    box-shadow:
        inset 0 -1px 0 rgba(43, 171, 255, .09),
        0 8px 24px rgba(0,0,0,.20) !important;
}

/* =========================================================
   COMMON PAGE-SURFACE EFFECTS
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(
    article,
    section,
    .card,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-hero"],
    [class*="-hero "]
) {
    position: relative;
    border-color: rgba(82, 151, 224, .27) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -24px 44px rgba(0, 16, 38, .055),
        0 12px 30px rgba(0,0,0,.18),
        0 0 22px rgba(38, 138, 255, .045) !important;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(
    article,
    .card,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "]
):hover {
    transform: translateY(-1px);
    border-color: rgba(61, 202, 255, .43) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 14px 34px rgba(0,0,0,.23),
        0 0 24px rgba(42, 179, 255, .09) !important;
}

/* =========================================================
   VERIFIED PAGE FAMILIES
   ========================================================= */

/* RULES — cyan + safety red */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.rules-content) .rules-content {
    position: relative;
    isolation: isolate;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.rules-content)
:where(.rules-content, .rules-content article, .rules-content section, .rules-content [class*="card"], .rules-content [class*="panel"]) {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 12px 30px rgba(0,0,0,.17),
        0 0 24px rgba(28, 194, 255, .065) !important;
}

/* LEADERBOARD — gold + blue, clearly stronger than V1 */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.leaderboard-page) .leaderboard-page {
    position: relative;
    isolation: isolate;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.leaderboard-page) .leaderboard-page::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    pointer-events: none;
    border-radius: 20px;
    opacity: .75;
    background:
        radial-gradient(circle at 18% 13%, rgba(255, 190, 57, .11), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(36, 163, 255, .09), transparent 32%);
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.leaderboard-page)
.leaderboard-page :where(article, section, [class*="card"], [class*="panel"], [class*="hero"]) {
    border-color: rgba(190, 151, 64, .32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,244,202,.045),
        inset 0 0 32px rgba(255, 184, 49, .025),
        0 12px 30px rgba(0,0,0,.18),
        0 0 24px rgba(255, 184, 49, .055) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.leaderboard-page)
.leaderboard-page :where([class*="card"], [class*="panel"])::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: .34;
    background:
        linear-gradient(114deg, transparent 0 65%, rgba(255,205,99,.13) 68%, transparent 71%);
    background-size: 275% 100%;
    animation: hbx-cms2-card-streak 8s linear infinite;
}

/* ARTICLES / ABOUT / ONLINE / PHOTOS — cyan-blue community family */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.articles-page) .articles-page :where(article, section, [class*="card"], [class*="panel"], [class*="hero"]),
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.about-page) .about-page :where(article, section, [class*="card"], [class*="panel"], [class*="hero"]),
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.online-users-panel) :where(.online-users-panel, .online-users-panel [class*="card"], .online-users-panel [class*="panel"]),
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.photos-page) .photos-page :where(article, section, [class*="card"], [class*="panel"], [class*="hero"]) {
    border-color: rgba(43, 191, 255, .32) !important;
    box-shadow:
        inset 0 1px 0 rgba(219,249,255,.045),
        0 12px 30px rgba(0,0,0,.18),
        0 0 24px rgba(31, 186, 255, .07) !important;
}

/* PROFILE / SETTINGS family — violet-blue */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.public-profile-page) .public-profile-page :where(article, section, [class*="card"], [class*="panel"], [class*="hero"]) {
    border-color: rgba(157, 100, 255, .33) !important;
    box-shadow:
        inset 0 1px 0 rgba(242,224,255,.04),
        0 12px 30px rgba(0,0,0,.18),
        0 0 25px rgba(143, 86, 255, .075) !important;
}

/* RARE MANAGER / VALUES — gold-cyan */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.rare-manager-page) .rare-manager-page :where(article, section, [class*="card"], [class*="panel"], [class*="row"]) {
    border-color: rgba(233, 177, 56, .29) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,243,213,.035),
        0 10px 26px rgba(0,0,0,.17),
        0 0 21px rgba(255, 180, 47, .05) !important;
}

/* =========================================================
   GENERIC TOP-LEVEL CMS WRAPPERS
   Gives pages without a dedicated root visible parity too.
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner > .col-span-12 {
    position: relative;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner > .col-span-12::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -7px;
    pointer-events: none;
    border-radius: 18px;
    border: 1px solid rgba(70, 150, 230, .055);
    background:
        radial-gradient(circle at 16% 0%, rgba(36, 205, 255, .025), transparent 31%),
        radial-gradient(circle at 86% 18%, rgba(156, 91, 255, .022), transparent 30%);
}

/* =========================================================
   CONTROLS / BUTTONS / TABS
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(input, textarea, select) {
    color: var(--hbx-cms2-text) !important;
    border-color: rgba(91, 148, 218, .30) !important;
    background-color: rgba(3, 8, 20, .88) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 0 19px rgba(35, 104, 198, .035) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(input, textarea, select):focus {
    border-color: rgba(36, 212, 255, .62) !important;
    box-shadow:
        0 0 0 2px rgba(36, 212, 255, .075),
        0 0 18px rgba(36, 212, 255, .11),
        inset 0 0 19px rgba(35, 104, 198, .045) !important;
    outline: none !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(button, .button, [class*="button"], [class*="btn"]) {
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease,
        filter 140ms ease !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner
:where(button, .button, [class*="button"], [class*="btn"]):hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* =========================================================
   MOTION
   ========================================================= */

@keyframes hbx-cms2-nav-flow {
    from { background-position: 155% 0; }
    to { background-position: -120% 0; }
}

@keyframes hbx-cms2-canvas-flow {
    from { background-position: 0 0, 0 0, 145% 0; }
    to { background-position: 0 0, 0 0, -120% 0; }
}

@keyframes hbx-cms2-card-streak {
    from { background-position: 150% 0; }
    to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-navigation-shell::after,
    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner::before,
    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) body:has(.leaderboard-page)
    .leaderboard-page :where([class*="card"], [class*="panel"])::after {
        animation: none !important;
    }

    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page) .site-content-inner * {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   HABLUXE LEADERBOARD EFFECTS PARITY V3 20260809
   Exact audited selectors. Targeted Player HQ-style finishing pass.
   ========================================================= */

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-page {
    --hbx-lb-cyan: #28ddff;
    --hbx-lb-blue: #5b8fff;
    --hbx-lb-gold: #ffc34b;
    --hbx-lb-violet: #a66cff;
    --hbx-lb-pink: #ff66ba;
    --hbx-lb-orange: #ff994a;
    --hbx-lb-red: #ff6578;
}

/* HERO — stronger framing and moving edge light */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hero {
    border-color: rgba(255, 193, 71, .58) !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(49, 170, 255, .16), transparent 34%),
        radial-gradient(circle at 84% 24%, rgba(255, 191, 69, .12), transparent 34%),
        linear-gradient(135deg, rgba(8, 25, 50, .98), rgba(6, 18, 37, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 0 46px rgba(45, 143, 255, .045),
        0 16px 38px rgba(0,0,0,.24),
        0 0 30px rgba(255, 189, 61, .11),
        0 0 28px rgba(37, 182, 255, .075) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(40, 221, 255, .92),
            rgba(88, 144, 255, .92),
            rgba(255, 195, 75, .95),
            transparent);
    background-size: 230% 100%;
    box-shadow:
        0 0 12px rgba(40, 221, 255, .7),
        0 0 22px rgba(255, 195, 75, .28);
    animation: hbx-lb-v3-edge-flow 6.2s linear infinite;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hero__stats > div {
    border-color: rgba(85, 171, 240, .38) !important;
    background:
        radial-gradient(circle at 14% 50%, rgba(50, 185, 255, .10), transparent 34%),
        rgba(5, 20, 37, .66) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 14px rgba(45, 163, 255, .06) !important;
}

/* HALL + RANKINGS outer sections */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) :where(.leaderboard-hall, .leaderboard-rankings) {
    border-color: rgba(78, 169, 230, .42) !important;
    background:
        radial-gradient(circle at 13% -12%, rgba(39, 191, 255, .10), transparent 31%),
        radial-gradient(circle at 87% 108%, rgba(160, 100, 255, .07), transparent 34%),
        linear-gradient(145deg, rgba(20, 40, 57, .98), rgba(10, 23, 38, .99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 14px 34px rgba(0,0,0,.20),
        0 0 27px rgba(37, 178, 255, .075) !important;
}

/* TOP 3 PODIUM */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card {
    overflow: hidden;
    border-color: rgba(91, 153, 211, .42) !important;
    background:
        radial-gradient(circle at 50% -2%, rgba(92, 163, 255, .13), transparent 45%),
        linear-gradient(180deg, rgba(17, 36, 56, .96), rgba(7, 18, 32, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -28px 45px rgba(0, 8, 20, .14),
        0 12px 28px rgba(0,0,0,.20),
        0 0 20px rgba(73, 157, 255, .07) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: .66;
    background:
        linear-gradient(112deg, transparent 0 57%, rgba(130, 197, 255, .18) 61%, transparent 65%),
        linear-gradient(112deg, transparent 0 77%, rgba(255, 208, 109, .13) 80%, transparent 83%);
    background-size: 245% 100%, 310% 100%;
    animation: hbx-lb-v3-card-streak 6.8s linear infinite;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card--gold {
    border-color: rgba(255, 195, 68, .82) !important;
    background:
        radial-gradient(circle at 50% 6%, rgba(255, 194, 66, .24), transparent 48%),
        linear-gradient(180deg, rgba(47, 42, 32, .96), rgba(12, 23, 36, .98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,244,205,.08),
        inset 0 0 38px rgba(255, 184, 48, .045),
        0 15px 34px rgba(0,0,0,.24),
        0 0 28px rgba(255, 186, 53, .16) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card--silver {
    border-color: rgba(181, 211, 235, .58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 12px 29px rgba(0,0,0,.21),
        0 0 22px rgba(169, 211, 241, .10) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card--bronze {
    border-color: rgba(240, 145, 67, .62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,228,205,.06),
        0 12px 29px rgba(0,0,0,.21),
        0 0 22px rgba(239, 133, 57, .11) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card img {
    filter:
        drop-shadow(0 6px 7px rgba(0,0,0,.44))
        drop-shadow(0 0 9px rgba(78, 156, 255, .10));
    transition: transform 160ms ease, filter 160ms ease;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-podium-card:hover img {
    transform: translateY(-2px) scale(1.025);
}

/* HALL OF FAME cards — use audited --hall-accent */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hall-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--hall-accent) 44%, #304a5d) !important;
    background:
        radial-gradient(circle at 50% 3%, color-mix(in srgb, var(--hall-accent) 13%, transparent), transparent 46%),
        linear-gradient(180deg, rgba(11, 29, 45, .91), rgba(5, 18, 31, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 9px 23px rgba(0,0,0,.18),
        0 0 19px color-mix(in srgb, var(--hall-accent) 9%, transparent) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hall-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: .52;
    background:
        linear-gradient(114deg, transparent 0 67%, color-mix(in srgb, var(--hall-accent) 25%, transparent) 70%, transparent 73%);
    background-size: 280% 100%;
    animation: hbx-lb-v3-card-streak 8.1s linear infinite;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-hall-card:hover {
    transform: translateY(-3px);
    border-color: var(--hall-accent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 12px 27px rgba(0,0,0,.22),
        0 0 24px color-mix(in srgb, var(--hall-accent) 18%, transparent) !important;
}

/* CATEGORY NAV + TABS */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) :where(.leaderboard-category-nav a, .leaderboard-tab) {
    position: relative;
    overflow: hidden;
    border-color: rgba(77, 150, 214, .36) !important;
    background:
        linear-gradient(180deg, rgba(13, 34, 51, .92), rgba(6, 21, 35, .96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 6px 16px rgba(0,0,0,.12) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) :where(.leaderboard-category-nav a, .leaderboard-tab):hover {
    transform: translateY(-1px);
    border-color: rgba(48, 211, 255, .64) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 18px rgba(0,0,0,.16),
        0 0 17px rgba(37, 198, 255, .10) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-tab--active {
    border-color: rgba(40, 219, 255, .82) !important;
    background:
        radial-gradient(circle at 50% 120%, rgba(43, 203, 255, .19), transparent 48%),
        linear-gradient(180deg, rgba(30, 91, 122, .72), rgba(8, 28, 44, .97)) !important;
    box-shadow:
        inset 0 1px 0 rgba(223,251,255,.065),
        0 0 19px rgba(36, 211, 255, .15) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-tab--active::after {
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #28ddff, #6f8cff, transparent);
    box-shadow: 0 0 8px rgba(40, 221, 255, .75);
}

/* RANKING BOARDS — use audited --board-accent */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-board {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--board-accent) 42%, #304a5d) !important;
    background:
        radial-gradient(circle at 12% -5%, color-mix(in srgb, var(--board-accent) 11%, transparent), transparent 38%),
        linear-gradient(180deg, rgba(12, 31, 47, .98), rgba(6, 20, 34, .99)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 12px 28px rgba(0,0,0,.18),
        0 0 21px color-mix(in srgb, var(--board-accent) 8%, transparent) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-board::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: .47;
    background:
        linear-gradient(114deg, transparent 0 68%, color-mix(in srgb, var(--board-accent) 23%, transparent) 71%, transparent 74%);
    background-size: 290% 100%;
    animation: hbx-lb-v3-card-streak 8.4s linear infinite;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-board__champion {
    border-bottom-color: color-mix(in srgb, var(--board-accent) 27%, #304a5d) !important;
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--board-accent) 12%, transparent), transparent 34%),
        linear-gradient(90deg, rgba(12, 39, 57, .74), rgba(7, 22, 37, .84)) !important;
    box-shadow: inset 0 0 28px color-mix(in srgb, var(--board-accent) 3%, transparent);
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-board__champion:hover {
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--board-accent) 20%, transparent), transparent 36%),
        linear-gradient(90deg, rgba(21, 55, 72, .88), rgba(8, 27, 43, .92)) !important;
    box-shadow:
        inset 3px 0 0 var(--board-accent),
        0 0 20px color-mix(in srgb, var(--board-accent) 10%, transparent) !important;
}

/* Exact audited legacy/list rows */
html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) :where(.leaderboard-board__row, .leaderboard-ranking-row) {
    position: relative;
    border-color: rgba(70, 133, 189, .18) !important;
    background:
        linear-gradient(90deg, rgba(23, 57, 79, .08), transparent 70%) !important;
    transition:
        transform 140ms ease,
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) :where(.leaderboard-board__row, .leaderboard-ranking-row):hover {
    transform: translateX(2px);
    border-color: rgba(49, 190, 240, .30) !important;
    background:
        linear-gradient(90deg, rgba(32, 124, 165, .16), rgba(23, 56, 82, .06) 72%, transparent) !important;
    box-shadow:
        inset 2px 0 0 rgba(42, 208, 255, .48),
        0 0 15px rgba(36, 188, 255, .055) !important;
}

html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
body:has(.leaderboard-page) .leaderboard-ranking-row--winner {
    border-color: rgba(255, 192, 66, .48) !important;
    background:
        radial-gradient(circle at 8% 50%, rgba(255, 188, 55, .13), transparent 31%),
        linear-gradient(90deg, rgba(91, 66, 19, .12), rgba(13, 30, 45, .80)) !important;
    box-shadow:
        inset 3px 0 0 rgba(255, 191, 63, .70),
        0 0 18px rgba(255, 184, 47, .08) !important;
}

@keyframes hbx-lb-v3-edge-flow {
    from { background-position: 150% 0; }
    to { background-position: -120% 0; }
}

@keyframes hbx-lb-v3-card-streak {
    from { background-position: 155% 0, 175% 0; }
    to { background-position: -125% 0, -115% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
    body:has(.leaderboard-page) .leaderboard-hero::after,

    html.hbx-cms-visual-system-v2:not(.hbx-player-hq-canonical-page)
    body:has(.leaderboard-page) :where(
        .leaderboard-podium-card,
        .leaderboard-hall-card,
        .leaderboard-board
    )::after {
        animation: none !important;
    }
}