:root {
    --records-bg: #04050a;
    --records-panel: rgba(12, 12, 18, .78);
    --records-line: rgba(255, 255, 255, .08);
    --records-line-strong: rgba(255, 214, 128, .22);
    --records-muted: rgba(235, 233, 247, .56);
    --records-soft: rgba(235, 233, 247, .32);
    --records-text: #f7f4fb;
    --records-violet: #9b72ff;
    --records-cyan: #79dfff;
    --records-gold: #e7c98a;
    --records-gold-2: #f4dfab;
    --records-red: #ff6685;
    --records-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

html {
    background: var(--records-bg);
}

body.records-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--records-text);
    background:
        radial-gradient(circle at 50% -12%, rgba(188, 141, 47, .14), transparent 30%),
        radial-gradient(circle at 50% 0%, rgba(102, 69, 176, .16), transparent 42%),
        linear-gradient(180deg, #05060b 0%, #060811 45%, #05050a 100%);
}

.records-page *,
.records-page *::before,
.records-page *::after {
    box-sizing: border-box;
}

.records-shell {
    width: min(1680px, calc(100% - 72px));
    margin: 0 auto;
    padding-bottom: 90px;
}

.records-hero {
    position: relative;
    min-height: 520px;
    padding: 180px 0 80px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
    isolation: isolate;
}

.records-leds,
.records-led,
.records-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.records-led {
    top: -25%;
    bottom: auto;
    width: 32vw;
    height: 140%;
    opacity: .30;
    filter: blur(28px);
    mix-blend-mode: screen;
    background:
        linear-gradient(
            180deg,
            rgba(255, 224, 155, .28) 0%,
            rgba(255, 201, 111, .12) 18%,
            rgba(255, 195, 86, 0) 68%
        );
    transform-origin: top center;
}

.records-led.beam-left {
    left: 6%;
    transform: rotate(8deg);
    animation: recordsSweepLeft 12s ease-in-out infinite;
}

.records-led.beam-center {
    left: 36%;
    width: 26vw;
    opacity: .22;
    transform: rotate(0deg);
    animation: recordsSweepCenter 10s ease-in-out infinite;
}

.records-led.beam-right {
    right: 4%;
    left: auto;
    transform: rotate(-9deg);
    animation: recordsSweepRight 14s ease-in-out infinite;
}

.records-ambient {
    inset: auto auto 4% auto;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    filter: blur(75px);
    opacity: .34;
}

.records-ambient.ambient-a {
    left: -4%;
    background:
        radial-gradient(circle, rgba(92, 58, 205, .26), transparent 70%);
    animation: floatAmbient 11s ease-in-out infinite;
}

.records-ambient.ambient-b {
    right: -6%;
    left: auto;
    background:
        radial-gradient(circle, rgba(255, 200, 92, .18), transparent 70%);
    animation: floatAmbient 14s ease-in-out infinite reverse;
}

.records-kicker,
.records-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .28em;
    font-weight: 800;
    color: rgba(232, 220, 194, .74);
}

.records-kicker::before,
.records-section-kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    background: currentColor;
}

.records-hero h1 {
    max-width: 1320px;
    margin: 18px 0 0;
    line-height: .84;
    text-transform: uppercase;
}

.records-title-main,
.records-title-gold {
    display: block;
    font-size: clamp(74px, 9.4vw, 178px);
    letter-spacing: -.078em;
    font-weight: 950;
}

.records-title-main {
    color: #f6f4fb;
    text-shadow:
        0 0 22px rgba(255, 255, 255, .03),
        0 8px 35px rgba(0, 0, 0, .28);
}

.records-title-gold {
    margin-left: .42em;
    background:
        linear-gradient(
            90deg,
            #8f6a1a 0%,
            #f1db9f 18%,
            #fff2c3 31%,
            #b88426 48%,
            #f1db9f 65%,
            #fff1bc 78%,
            #8f6a1a 100%
        );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(231, 201, 138, .10));
    animation: goldShimmer 8s linear infinite;
}

.records-meta-vault {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: min(1180px, 100%);
    margin-top: 44px;
}

.records-meta-card,
.record-card,
.legacy-card,
.honour-card,
.momentum-card,
.role-card {
    --accent: var(--records-gold);
    position: relative;
    overflow: hidden;
    color: var(--records-text);
    text-decoration: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .04) 0%,
            rgba(255, 255, 255, .018) 100%
        ),
        rgba(8, 10, 18, .78);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: var(--records-shadow);
    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        background .24s ease;
}

.records-meta-card::before,
.record-card::before,
.legacy-card::before,
.honour-card::before,
.momentum-card::before,
.role-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .9;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .03),
            rgba(255, 255, 255, 0)
        );
}

.records-meta-card::after,
.record-card::after,
.legacy-card::after,
.honour-card::after,
.momentum-card::after,
.role-card::after {
    content: "";
    position: absolute;
    top: -18%;
    left: -32%;
    width: 42%;
    height: 160%;
    opacity: 0;
    pointer-events: none;
    transform: rotate(20deg) translateX(0);
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 237, 194, .16) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    transition: opacity .24s ease, transform .75s ease;
}

.records-meta-card:hover,
.record-card:hover,
.legacy-card:hover,
.honour-card:hover,
.momentum-card:hover,
.role-card:hover {
    transform: translateY(-4px);
    border-color: var(--records-line-strong);
    box-shadow:
        0 22px 66px rgba(0, 0, 0, .40),
        0 0 0 1px rgba(244, 223, 171, .05);
}

.records-meta-card:hover::after,
.record-card:hover::after,
.legacy-card:hover::after,
.honour-card:hover::after,
.momentum-card:hover::after,
.role-card:hover::after {
    opacity: 1;
    transform: rotate(20deg) translateX(430%);
}

.records-meta-card {
    min-height: 132px;
    padding: 22px 22px 20px;
}

.records-meta-card strong {
    display: block;
    margin-top: 12px;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.05em;
}

.records-meta-label {
    display: block;
    color: rgba(237, 222, 180, .90);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.records-meta-card small {
    display: block;
    margin-top: 10px;
    color: var(--records-soft);
    font-size: 11px;
}

.records-section {
    padding: 92px 0 18px;
}

.records-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 32px;
}

.records-section-head h2 {
    margin: 12px 0 0;
    font-size: clamp(34px, 4vw, 62px);
    line-height: .98;
    letter-spacing: -.05em;
}

.records-section-head p {
    justify-self: end;
    max-width: 420px;
    margin: 0;
    color: var(--records-muted);
    line-height: 1.7;
    font-size: 14px;
    text-align: right;
}

.records-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.legacy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.honours-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.momentum-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.role-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.accent-violet { --accent: var(--records-violet); }
.accent-cyan { --accent: var(--records-cyan); }
.accent-gold { --accent: var(--records-gold); }
.accent-red { --accent: var(--records-red); }

.record-card,
.legacy-card,
.honour-card,
.momentum-card,
.role-card {
    border-color: rgba(255, 255, 255, .08);
}

.record-card {
    min-height: 300px;
    padding: 24px;
}

.record-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.record-match,
.role-games {
    color: rgba(236, 231, 250, .32);
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 800;
}

.record-eyebrow,
.legacy-eyebrow,
.honour-eyebrow,
.momentum-copy > span,
.role-name {
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .20em;
    font-weight: 900;
}

.record-eyebrow {
    margin-top: 46px;
}

.record-title,
.honour-card h3,
.momentum-card h3 {
    margin-top: 8px;
    color: rgba(240, 236, 251, .62);
    font-size: 13px;
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
}

.record-value,
.legacy-value,
.honour-card strong,
.momentum-card strong,
.role-wr {
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.06em;
    white-space: nowrap;
}

.record-value {
    margin-top: 16px;
    font-size: clamp(44px, 3.8vw, 72px);
}

.record-holder {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.record-holder strong,
.record-holder small {
    display: block;
}

.record-holder strong {
    font-size: 20px;
    letter-spacing: -.03em;
    font-weight: 900;
}

.record-holder small {
    margin-top: 5px;
    color: rgba(236, 230, 252, .42);
    font-size: 12px;
}

.legacy-card {
    min-height: 235px;
    padding: 26px 24px;
}

.legacy-title {
    display: block;
    margin-top: 10px;
    color: rgba(240, 236, 251, .62);
    font-size: 13px;
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
}

.legacy-value {
    display: block;
    margin-top: 20px;
    font-size: clamp(52px, 4vw, 78px);
}

.legacy-name {
    display: block;
    margin-top: 22px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.legacy-card small {
    display: block;
    margin-top: 5px;
    color: rgba(233, 228, 248, .38);
    font-size: 12px;
}

.honour-card {
    min-height: 218px;
    padding: 28px;
    display: block;
}

.honour-card strong {
    display: block;
    margin-top: 14px;
    font-size: 74px;
}

.honour-card p {
    margin: 14px 0 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.momentum-card {
    min-height: 252px;
    padding: 26px;
}

.momentum-copy {
    margin-top: 4px;
}

.momentum-card strong {
    display: block;
    margin-top: 14px;
    font-size: clamp(54px, 4vw, 80px);
}

.momentum-card p {
    margin: 12px 0 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.momentum-card small {
    display: block;
    margin-top: 7px;
    color: rgba(234, 229, 248, .42);
    font-size: 12px;
}

.duo-names a {
    color: inherit;
    text-decoration: none;
}

.duo-names a:hover {
    color: var(--accent);
}

.duo-names b {
    padding: 0 6px;
    color: #ff7f9d;
}

.role-card {
    min-height: 250px;
    padding: 24px;
    --accent: var(--records-violet);
}

.role-top,
.role-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.role-player {
    display: block;
    margin-top: 52px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.role-wr {
    margin-top: 12px;
    font-size: clamp(44px, 3vw, 72px);
}

.role-bottom {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    color: rgba(232, 227, 248, .40);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.champion-table {
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(8, 8, 14, .72);
    box-shadow: var(--records-shadow);
}

.champion-row {
    display: grid;
    grid-template-columns:
        70px
        minmax(160px, 1.25fr)
        minmax(160px, 1fr)
        110px
        110px;
    gap: 18px;
    align-items: center;
    min-height: 70px;
    padding: 0 26px;
    color: rgba(238, 234, 249, .72);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: background .2s ease, color .2s ease;
}

.champion-row:last-child {
    border-bottom: 0;
}

.champion-head {
    min-height: 52px;
    color: rgba(232, 226, 246, .30);
    font-size: 9px;
    letter-spacing: .15em;
    font-weight: 900;
}

.champion-row:not(.champion-head):hover {
    color: white;
    background: rgba(231, 201, 138, .05);
}

.champion-rank {
    color: rgba(231, 225, 246, .25);
    font-size: 11px;
    letter-spacing: .1em;
}

.champion-wr {
    color: var(--records-gold);
    font-weight: 900;
}

.records-footer {
    margin-top: 98px;
    padding: 34px 0;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(234, 229, 247, .28);
    font-size: 10px;
    letter-spacing: .18em;
}

.records-footer strong {
    color: rgba(234, 229, 247, .54);
}

[data-record-card] {
    opacity: 0;
    transform: translateY(16px);
}

[data-record-card].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.2,.7,.2,1),
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

@keyframes goldShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@keyframes recordsSweepLeft {
    0%, 100% { transform: rotate(8deg) translateX(0); opacity: .22; }
    50%      { transform: rotate(4deg) translateX(5%); opacity: .34; }
}

@keyframes recordsSweepCenter {
    0%, 100% { transform: rotate(0deg) translateX(0); opacity: .18; }
    50%      { transform: rotate(-2deg) translateX(-4%); opacity: .30; }
}

@keyframes recordsSweepRight {
    0%, 100% { transform: rotate(-9deg) translateX(0); opacity: .20; }
    50%      { transform: rotate(-4deg) translateX(-4%); opacity: .33; }
}

@keyframes floatAmbient {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50%      { transform: translate3d(0,-14px,0) scale(1.05); }
}

@media (max-width: 1380px) {
    .records-shell {
        width: min(100% - 42px, 1680px);
    }

    .records-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .momentum-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .role-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .records-meta-vault,
    .legacy-grid,
    .honours-grid,
    .records-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .records-section-head {
        grid-template-columns: 1fr;
    }

    .records-section-head p {
        justify-self: start;
        text-align: left;
        max-width: none;
    }

    .role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .records-shell {
        width: min(100% - 24px, 1680px);
    }

    .records-hero {
        min-height: 470px;
        padding-top: 150px;
    }

    .records-title-main,
    .records-title-gold {
        font-size: clamp(58px, 18vw, 92px);
    }

    .records-title-gold {
        margin-left: .12em;
    }

    .records-meta-vault,
    .records-grid,
    .legacy-grid,
    .honours-grid,
    .momentum-grid,
    .role-grid {
        grid-template-columns: 1fr;
    }

    .record-card,
    .legacy-card,
    .honour-card,
    .momentum-card,
    .role-card {
        min-height: auto;
    }

    .record-card {
        min-height: 280px;
    }

    .legacy-card {
        min-height: 220px;
    }

    .champion-row {
        grid-template-columns:
            38px
            minmax(110px, 1fr)
            minmax(90px, 1fr)
            60px;
        gap: 8px;
        padding: 0 12px;
    }

    .champion-row > :nth-child(4),
    .champion-head > :nth-child(4) {
        display: none;
    }

    .records-footer {
        display: block;
        line-height: 2;
    }

    .records-footer strong {
        display: block;
        margin-top: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .records-led,
    .records-ambient,
    .records-title-gold {
        animation: none !important;
    }

    [data-record-card] {
        opacity: 1;
        transform: none;
    }

    [data-record-card].is-visible {
        transition: none;
    }
}

/* CDV RECORDS HERO COMPACT V3 START */

.records-meta-vault,
.records-meta-card {
    display: none !important;
}

.records-hero {
    min-height: 430px !important;
    padding-top: 155px !important;
    padding-bottom: 54px !important;
}

.records-hero h1 {
    margin-bottom: 0 !important;
}

.records-title-main,
.records-title-gold {
    font-size: clamp(74px, 9vw, 168px);
}

@media (max-width: 760px) {
    .records-hero {
        min-height: 390px !important;
        padding-top: 138px !important;
        padding-bottom: 44px !important;
    }
}

/* CDV RECORDS HERO COMPACT V3 END */

/* CDV RECORDS WIDE LAYOUT V4 START */

/* Utilise enfin vraiment les côtés de l'écran. */
.records-shell {
    width: calc(100vw - 72px) !important;
    max-width: 1760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.records-section,
.records-hero {
    width: 100% !important;
    max-width: none !important;
}

/* 4 grandes cartes desktop, mais sans écraser les valeurs. */
.records-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.record-card {
    min-width: 0 !important;
    min-height: 310px !important;
    padding: 26px !important;
}

/* Empêche 81 235 / 29 198 de sortir de la vignette. */
.record-value {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(44px, 3.55vw, 68px) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* Valeurs très longues : légère réduction ciblée via :has(). */
.record-card:has(.record-value) .record-value {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Noms/stat secondaires nettement plus lisibles. */
.record-holder {
    left: 26px !important;
    right: 26px !important;
    bottom: 24px !important;
}

.record-holder strong {
    font-size: 21px !important;
    line-height: 1.05 !important;
}

.record-holder small {
    margin-top: 6px !important;
    font-size: 12px !important;
    opacity: .88;
}

/* Plus de profondeur / vitrine sans réintroduire d'icônes. */
.record-card {
    background:
        linear-gradient(
            180deg,
            rgba(255, 241, 199, .025) 0%,
            rgba(255, 255, 255, .018) 28%,
            rgba(6, 7, 13, .90) 100%
        ) !important;
}

.record-card:hover {
    border-color: rgba(235, 203, 129, .34) !important;
    box-shadow:
        0 22px 70px rgba(0, 0, 0, .46),
        0 0 28px rgba(228, 188, 95, .065) !important;
}

@media (min-width: 1500px) {
    .record-value {
        font-size: clamp(52px, 3.7vw, 76px) !important;
    }
}

@media (max-width: 1280px) {
    .records-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .record-value {
        font-size: clamp(46px, 5vw, 68px) !important;
    }
}

@media (max-width: 900px) {
    .records-shell {
        width: calc(100vw - 32px) !important;
    }

    .records-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .records-shell {
        width: calc(100vw - 22px) !important;
    }

    .records-grid {
        grid-template-columns: 1fr !important;
    }

    .record-value {
        font-size: clamp(48px, 15vw, 72px) !important;
    }
}

/* CDV RECORDS WIDE LAYOUT V4 END */

/* CDV RECORDS CLEANUP / PLAYER EMPHASIS V5 START */

/* Supprime tous les textes explicatifs des headers. */
.records-section-head {
    grid-template-columns: 1fr !important;
    align-items: end !important;
    margin-bottom: 28px !important;
}

.records-section-head p {
    display: none !important;
}

/* Mise en valeur des pseudos sur toutes les cartes. */
.record-holder strong,
.legacy-name,
.honour-card p,
.momentum-card p,
.role-player,
.champion-row strong {
    position: relative;
    display: inline-block;
    color: #ffffff !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
    text-shadow:
        0 0 16px rgba(255, 230, 165, .10),
        0 2px 18px rgba(0, 0, 0, .40);
    animation: cdvPlayerGlow 4.8s ease-in-out infinite;
}

.record-holder strong::after,
.legacy-name::after,
.honour-card p::after,
.momentum-card p::after,
.role-player::after,
.champion-row strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 56px;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 243, 209, .98) 0%,
            rgba(231, 201, 138, .85) 55%,
            rgba(231, 201, 138, 0) 100%
        );
    box-shadow:
        0 0 18px rgba(231, 201, 138, .26),
        0 0 3px rgba(255, 255, 255, .18);
    opacity: .95;
}

.record-holder strong:hover,
.legacy-name:hover,
.honour-card p:hover,
.momentum-card p:hover,
.role-player:hover,
.champion-row strong:hover {
    color: #fff4d0 !important;
}

/* Ajustements taille/padding des pseudos */
.record-holder strong {
    font-size: 22px !important;
    line-height: 1.06 !important;
}

.legacy-name {
    font-size: 24px !important;
    margin-top: 20px !important;
}

.honour-card p,
.momentum-card p {
    font-size: 24px !important;
    line-height: 1.08 !important;
}

.role-player {
    margin-top: 46px !important;
    font-size: 22px !important;
}

/* KDA enfin lisible dans les Cinq Trônes */
.role-card {
    min-height: 270px !important;
}

.role-bottom {
    left: 24px !important;
    right: 24px !important;
    bottom: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    justify-content: start !important;
}

.role-bottom span:first-child {
    color: rgba(239, 234, 249, .58) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    line-height: 1.2 !important;
}

.role-kda {
    width: max-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(231, 201, 138, .24);
    background:
        linear-gradient(
            180deg,
            rgba(255, 240, 200, .08),
            rgba(231, 201, 138, .03)
        ),
        rgba(10, 10, 16, .72);
    color: #f4dfab !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 0 16px rgba(231, 201, 138, .10);
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Rendre aussi les détails secondaires un peu plus lisibles. */
.record-holder small,
.legacy-card small,
.momentum-card small,
.role-bottom span:first-child {
    opacity: .95 !important;
}

@keyframes cdvPlayerGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 0 rgba(231, 201, 138, 0))
            drop-shadow(0 0 0 rgba(231, 201, 138, 0));
    }
    50% {
        filter:
            drop-shadow(0 0 8px rgba(231, 201, 138, .18))
            drop-shadow(0 0 18px rgba(231, 201, 138, .08));
    }
}

@media (max-width: 900px) {
    .records-section-head {
        margin-bottom: 24px !important;
    }

    .honour-card p,
    .momentum-card p,
    .legacy-name,
    .record-holder strong,
    .role-player {
        font-size: 20px !important;
    }

    .role-kda {
        font-size: 11px !important;
        letter-spacing: .10em !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-holder strong,
    .legacy-name,
    .honour-card p,
    .momentum-card p,
    .role-player,
    .champion-row strong {
        animation: none !important;
    }
}

/* CDV RECORDS CLEANUP / PLAYER EMPHASIS V5 END */

/* CDV RECORD HOLDER GLOW V6 START */

/* Stoppe l'animation globale permanente de V5 pour la remplacer
   par un reflet plus subtil façon vitrine/trophée. */
.record-holder strong,
.legacy-name,
.honour-card p,
.momentum-card p,
.role-player,
.champion-row strong {
    animation: none !important;
    position: relative !important;
    display: inline-block !important;
    isolation: isolate;
}

.record-holder strong::before,
.legacy-name::before,
.honour-card p::before,
.momentum-card p::before,
.role-player::before,
.champion-row strong::before {
    content: "";
    position: absolute;
    top: -0.18em;
    bottom: -0.12em;
    left: -0.32em;
    width: 34%;
    min-width: 42px;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transform: translateX(-190%) skewX(-18deg);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 243, 210, 0.00) 15%,
        rgba(255, 242, 201, 0.16) 35%,
        rgba(255, 248, 226, 0.40) 49%,
        rgba(231, 201, 138, 0.26) 58%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(7px);
    mix-blend-mode: screen;
    animation: cdvRecordHolderSweep 6.25s cubic-bezier(.25,.1,.25,1) infinite;
}

.record-holder strong::after,
.legacy-name::after,
.honour-card p::after,
.momentum-card p::after,
.role-player::after,
.champion-row strong::after {
    width: 70px !important;
    height: 2px !important;
    opacity: .92 !important;
}

/* Un peu plus de présence sur les gros détenteurs de records. */
.record-holder strong,
.legacy-name,
.honour-card p,
.momentum-card p,
.role-player {
    text-shadow:
        0 0 14px rgba(255, 230, 165, .08),
        0 3px 18px rgba(0, 0, 0, .44) !important;
}

.record-holder strong:hover,
.legacy-name:hover,
.honour-card p:hover,
.momentum-card p:hover,
.role-player:hover,
.champion-row strong:hover {
    color: #fff5d8 !important;
}

/* Décale légèrement les séquences pour éviter l'effet synchro cheap. */
.records-grid > *:nth-child(4n+1) .record-holder strong::before,
.legacy-grid > *:nth-child(3n+1) .legacy-name::before,
.honours-grid > *:nth-child(3n+1) p::before,
.momentum-grid > *:nth-child(4n+1) p::before,
.role-grid > *:nth-child(5n+1) .role-player::before,
.champion-table .champion-row:nth-child(4n+1) strong::before {
    animation-delay: 0s;
}

.records-grid > *:nth-child(4n+2) .record-holder strong::before,
.legacy-grid > *:nth-child(3n+2) .legacy-name::before,
.honours-grid > *:nth-child(3n+2) p::before,
.momentum-grid > *:nth-child(4n+2) p::before,
.role-grid > *:nth-child(5n+2) .role-player::before,
.champion-table .champion-row:nth-child(4n+2) strong::before {
    animation-delay: 1.2s;
}

.records-grid > *:nth-child(4n+3) .record-holder strong::before,
.legacy-grid > *:nth-child(3n+3) .legacy-name::before,
.honours-grid > *:nth-child(3n+3) p::before,
.momentum-grid > *:nth-child(4n+3) p::before,
.role-grid > *:nth-child(5n+3) .role-player::before,
.champion-table .champion-row:nth-child(4n+3) strong::before {
    animation-delay: 2.45s;
}

.records-grid > *:nth-child(4n+4) .record-holder strong::before,
.momentum-grid > *:nth-child(4n+4) p::before,
.role-grid > *:nth-child(5n+4) .role-player::before,
.champion-table .champion-row:nth-child(4n+4) strong::before {
    animation-delay: 3.35s;
}

.role-grid > *:nth-child(5n+5) .role-player::before {
    animation-delay: 4.1s;
}

/* KDA encore un peu plus lisible / premium. */
.role-kda {
    font-size: 12px !important;
    letter-spacing: .12em !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 18px rgba(231, 201, 138, .12),
        0 8px 18px rgba(0,0,0,.20) !important;
}

@keyframes cdvRecordHolderSweep {
    0% {
        opacity: 0;
        transform: translateX(-190%) skewX(-18deg);
    }
    7% {
        opacity: .95;
    }
    18% {
        opacity: .72;
        transform: translateX(255%) skewX(-18deg);
    }
    19%, 100% {
        opacity: 0;
        transform: translateX(265%) skewX(-18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-holder strong::before,
    .legacy-name::before,
    .honour-card p::before,
    .momentum-card p::before,
    .role-player::before,
    .champion-row strong::before {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* CDV RECORD HOLDER GLOW V6 END */

/* CDV RECORDS ICONS / LEGACY CLEANUP V7 START */

:root {
    --cdv-person-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.4' fill='%23fff2c6'/%3E%3Cpath d='M5.2 18.2c0-3.2 2.84-5.45 6.8-5.45s6.8 2.25 6.8 5.45' stroke='%23e7c98a' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 1) Icônes de personne dans les pseudos des vignettes / cartes records */
.record-holder strong,
.role-player,
.honour-card p,
.momentum-card p,
.legacy-name {
    padding-left: 34px !important;
}

.record-holder strong::before,
.role-player::before,
.honour-card p::before,
.momentum-card p::before,
.legacy-name::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    transform: translateY(-54%) !important;
    border-radius: 999px !important;
    opacity: .97 !important;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        linear-gradient(180deg, rgba(255,246,219,.12), rgba(231,201,138,.03)),
        rgba(10,10,18,.72) !important;
    border: 1px solid rgba(231,201,138,.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 14px rgba(231,201,138,.11) !important;
    background-image: var(--cdv-person-icon) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    z-index: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    animation: cdvPersonIconPulse 6.8s ease-in-out infinite !important;
}

/* 2) Le reflet doré reste sur les cartes/vignettes, mais pas sur Champion Legacy.
   Le tableau avait un effet flou désagréable. */
.champion-row strong {
    padding-left: 0 !important;
}

.champion-row strong::before {
    content: none !important;
    animation: none !important;
}

.champion-row strong::after {
    width: 56px !important;
    opacity: .86 !important;
}

/* 3) On garde le sweep premium seulement sur les vrais détenteurs de cartes. */
.record-holder strong::after,
.role-player::after,
.honour-card p::after,
.momentum-card p::after,
.legacy-name::after {
    width: 74px !important;
}

/* 4) Champion Legacy plus propre et lisible. */
.champion-table .champion-row:hover {
    background: linear-gradient(90deg, rgba(255,240,200,.035), rgba(255,255,255,0)) !important;
}

.champion-row strong {
    text-shadow:
        0 0 10px rgba(255,230,165,.05),
        0 2px 12px rgba(0,0,0,.26) !important;
}

/* 5) Un léger pulse sur l'icône, pas sur le texte entier. */
@keyframes cdvPersonIconPulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 0 10px rgba(231,201,138,.07);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 0 18px rgba(231,201,138,.16);
    }
}

@media (max-width: 900px) {
    .record-holder strong,
    .role-player,
    .honour-card p,
    .momentum-card p,
    .legacy-name {
        padding-left: 30px !important;
    }

    .record-holder strong::before,
    .role-player::before,
    .honour-card p::before,
    .momentum-card p::before,
    .legacy-name::before {
        width: 20px !important;
        height: 20px !important;
        background-size: 14px 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-holder strong::before,
    .role-player::before,
    .honour-card p::before,
    .momentum-card p::before,
    .legacy-name::before {
        animation: none !important;
    }
}

/* CDV RECORDS ICONS / LEGACY CLEANUP V7 END */

/* ==================================================
   CDV RECORDS V8
   PLAYER ICONS + CHAMPION LEGACY CLEANUP
   ================================================== */

:root {
    --cdv-person-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.3' fill='%23fff0bd'/%3E%3Cpath d='M5.3 18.4c0-3.25 2.8-5.45 6.7-5.45s6.7 2.2 6.7 5.45' stroke='%23e7c98a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --------------------------------
   ICONES JOUEURS
   -------------------------------- */

.record-holder strong,
.role-player,
.honour-card p,
.momentum-card p,
.legacy-name {
    padding-left: 32px !important;
}

.record-holder strong::before,
.role-player::before,
.honour-card p::before,
.momentum-card p::before,
.legacy-name::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 50% !important;

    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;

    transform: translateY(-53%) !important;

    border-radius: 50% !important;

    border:
        1px solid
        rgba(231, 201, 138, .30) !important;

    background-color:
        rgba(11, 11, 18, .84) !important;

    background-image:
        var(--cdv-person-icon) !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        15px 15px !important;

    filter: none !important;
    mix-blend-mode: normal !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 11px rgba(231,201,138,.10) !important;

    animation:
        cdvPersonPulseV8
        6.5s
        ease-in-out
        infinite !important;
}

/* --------------------------------
   CHAMPION LEGACY
   Plus AUCUN gros halo traversant
   -------------------------------- */

.champion-row strong {
    padding-left: 0 !important;

    filter: none !important;
    animation: none !important;

    text-shadow:
        0 0 6px rgba(255,230,165,.035),
        0 2px 10px rgba(0,0,0,.26) !important;
}

.champion-row strong::before {
    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    opacity: 0 !important;

    filter: none !important;
    animation: none !important;
}

.champion-row strong::after {
    width: 52px !important;
    height: 1px !important;

    opacity: .75 !important;

    background:
        linear-gradient(
            90deg,
            rgba(244,223,171,.92),
            rgba(231,201,138,.30),
            transparent
        ) !important;

    box-shadow:
        0 0 7px rgba(231,201,138,.09) !important;
}

/* Supprime aussi tout pseudo-reflet de ligne */
.champion-table .champion-row::before,
.champion-table .champion-row::after {
    filter: none !important;
    animation: none !important;
}

.champion-table .champion-row:hover {
    background:
        linear-gradient(
            90deg,
            rgba(231,201,138,.035),
            rgba(255,255,255,0)
        ) !important;
}

/* --------------------------------
   SOULIGNEMENT PSEUDOS
   -------------------------------- */

.record-holder strong::after,
.role-player::after,
.honour-card p::after,
.momentum-card p::after,
.legacy-name::after {
    width: 64px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,240,195,.95),
            rgba(231,201,138,.42),
            transparent
        ) !important;

    box-shadow:
        0 0 9px rgba(231,201,138,.11) !important;

    opacity: .88 !important;
}

/* --------------------------------
   KDA
   -------------------------------- */

.role-kda {
    color: #f6dfa2 !important;

    border:
        1px solid
        rgba(231,201,138,.28) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,239,193,.06),
            rgba(231,201,138,.02)
        ),
        rgba(9,9,15,.72) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 13px rgba(231,201,138,.08) !important;
}

/* Animation seulement sur l'icône */
@keyframes cdvPersonPulseV8 {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.05),
            0 0 8px rgba(231,201,138,.06);
    }

    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 0 15px rgba(231,201,138,.15);
    }
}

@media (max-width: 900px) {

    .record-holder strong,
    .role-player,
    .honour-card p,
    .momentum-card p,
    .legacy-name {
        padding-left: 29px !important;
    }

    .record-holder strong::before,
    .role-player::before,
    .honour-card p::before,
    .momentum-card p::before,
    .legacy-name::before {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;

        background-size:
            13px 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .record-holder strong::before,
    .role-player::before,
    .honour-card p::before,
    .momentum-card p::before,
    .legacy-name::before {
        animation: none !important;
    }
}

/* ===== FIN CDV RECORDS V8 ===== */


/* ===== CDV RECORDS V9 — DISCORD AVATARS ===== */

/* On supprime l'ancienne icône générique */
.record-holder strong,
.role-player,
.honour-card p,
.momentum-card p,
.legacy-name,
.champion-row strong {
    padding-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.record-holder strong::before,
.role-player::before,
.honour-card p::before,
.momentum-card p::before,
.legacy-name::before,
.champion-row strong::before {
    content: none !important;
    display: none !important;
    animation: none !important;
    filter: none !important;
}

/* Avatar Discord */
.cdv-inline-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(231, 201, 138, .34);
    background: rgba(12, 12, 18, .84);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 14px rgba(231,201,138,.12);
}

/* Un peu plus gros dans les cartes records */
.record-holder .cdv-inline-avatar,
.role-player .cdv-inline-avatar,
.honour-card .cdv-inline-avatar,
.momentum-card .cdv-inline-avatar,
.legacy-name .cdv-inline-avatar {
    width: 26px;
    height: 26px;
    min-width: 26px;
}

/* Champion Legacy : on nettoie totalement l'effet flou moche */
.champion-row strong {
    filter: none !important;
    text-shadow:
        0 0 6px rgba(255,230,165,.03),
        0 2px 10px rgba(0,0,0,.26) !important;
}

.champion-row strong::after {
    width: 54px !important;
    opacity: .78 !important;
    box-shadow: 0 0 7px rgba(231,201,138,.08) !important;
}

.champion-table .champion-row::before,
.champion-table .champion-row::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    filter: none !important;
}

.champion-table .champion-row:hover {
    background:
        linear-gradient(
            90deg,
            rgba(231,201,138,.03),
            rgba(255,255,255,0)
        ) !important;
}

@media (max-width: 900px) {
    .cdv-inline-avatar {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .record-holder .cdv-inline-avatar,
    .role-player .cdv-inline-avatar,
    .honour-card .cdv-inline-avatar,
    .momentum-card .cdv-inline-avatar,
    .legacy-name .cdv-inline-avatar {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
}

/* ===== FIN CDV RECORDS V9 ===== */

/* ========================================
   CDV RECORDS — DISCORD AVATAR V10
   ======================================== */

[data-discord-user-id]::before {

    content: none !important;
    display: none !important;

    animation: none !important;

    opacity: 0 !important;

    filter: none !important;
}

.record-holder strong,
.legacy-name,
.honour-card p,
.momentum-card p,
.role-player,
.champion-row strong,
.duo-names a {

    padding-left: 0 !important;
}

.cdv-has-discord-avatar {

    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;
}

.cdv-discord-avatar {

    width: 26px;
    height: 26px;

    min-width: 26px;

    flex: 0 0 26px;

    border-radius: 50%;

    object-fit: cover;

    background:
        rgba(8, 8, 14, .94);

    border:
        1px solid
        rgba(231, 201, 138, .38);

    box-shadow:
        0 0 0 2px
        rgba(6, 6, 11, .78),

        0 0 14px
        rgba(231, 201, 138, .13);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.record-holder .cdv-discord-avatar,
.legacy-name .cdv-discord-avatar,
.honour-card .cdv-discord-avatar,
.momentum-card .cdv-discord-avatar,
.role-player .cdv-discord-avatar {

    width: 30px;
    height: 30px;

    min-width: 30px;

    flex-basis: 30px;
}

.cdv-has-discord-avatar:hover
> .cdv-discord-avatar {

    transform:
        scale(1.07);

    border-color:
        rgba(255, 227, 157, .64);

    box-shadow:
        0 0 0 2px
        rgba(6, 6, 11, .82),

        0 0 20px
        rgba(231, 201, 138, .21);
}


/* CHAMPION LEGACY :
   suppression du vieux blur/sweep */

.champion-row strong {

    filter: none !important;

    animation: none !important;

    text-shadow:
        0 0 5px
        rgba(255, 230, 165, .025),

        0 2px 9px
        rgba(0, 0, 0, .24)
        !important;
}

.champion-row strong::before {

    content: none !important;

    display: none !important;
}

.champion-row strong::after {

    width: 52px !important;

    height: 1px !important;

    opacity: .72 !important;

    box-shadow:
        0 0 6px
        rgba(231, 201, 138, .07)
        !important;
}

.champion-table
.champion-row::before,

.champion-table
.champion-row::after {

    animation:
        none !important;

    filter:
        none !important;
}


/* DUOS */

.duo-names a.cdv-has-discord-avatar {

    gap: 7px !important;
}

.duo-names .cdv-discord-avatar {

    width: 22px;
    height: 22px;

    min-width: 22px;

    flex-basis: 22px;
}


@media (max-width: 900px) {

    .cdv-discord-avatar {

        width: 23px;
        height: 23px;

        min-width: 23px;

        flex-basis: 23px;
    }

    .record-holder
    .cdv-discord-avatar,

    .legacy-name
    .cdv-discord-avatar,

    .honour-card
    .cdv-discord-avatar,

    .momentum-card
    .cdv-discord-avatar,

    .role-player
    .cdv-discord-avatar {

        width: 26px;
        height: 26px;

        min-width: 26px;

        flex-basis: 26px;
    }
}

/* ===== FIN V10 ===== */