/* =========================================================
   1. DESIGN SYSTEM
========================================================= */

:root {
    --cdv-ux-nav-height: 68px;

    --cdv-ux-surface:
        rgba(
            8,
            10,
            29,
            .88
        );

    --cdv-ux-surface-soft:
        rgba(
            13,
            15,
            38,
            .76
        );

    --cdv-ux-surface-strong:
        rgba(
            6,
            8,
            24,
            .95
        );

    --cdv-ux-border:
        rgba(
            157,
            143,
            255,
            .13
        );

    --cdv-ux-border-hover:
        rgba(
            143,
            177,
            255,
            .27
        );

    --cdv-ux-text:
        #f7f6ff;

    --cdv-ux-muted:
        rgba(
            210,
            207,
            229,
            .60
        );

    --cdv-ux-subtle:
        rgba(
            199,
            195,
            220,
            .43
        );

    --cdv-ux-purple:
        #927dff;

    --cdv-ux-cyan:
        #65d9ff;

    --cdv-ux-green:
        #58e8b1;

    --cdv-ux-radius-large:
        22px;

    --cdv-ux-radius:
        17px;

    --cdv-ux-radius-small:
        12px;

    --cdv-ux-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            .22
        );

    --cdv-ux-shadow-hover:
        0 22px 54px
        rgba(
            0,
            0,
            0,
            .28
        );

    --cdv-ux-content-width:
        1360px;
}


/* =========================================================
   2. BASE GLOBALE
========================================================= */

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    max-width: 100%;
    overflow-x: clip;

    color:
        var(--cdv-ux-text);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}

body.cdv-page-paused *,
body.cdv-page-paused *::before,
body.cdv-page-paused *::after {
    animation-play-state:
        paused !important;
}

body.cdv-ux-polished
main {
    position: relative;
    z-index: 2;
}

body.cdv-ux-polished
img {
    max-width: 100%;
}

body.cdv-ux-polished
button,
body.cdv-ux-polished
a,
body.cdv-ux-polished
input,
body.cdv-ux-polished
select {
    -webkit-tap-highlight-color:
        transparent;
}

body.cdv-ux-polished
a:focus-visible,
body.cdv-ux-polished
button:focus-visible,
body.cdv-ux-polished
input:focus-visible,
body.cdv-ux-polished
select:focus-visible {
    outline:
        2px solid
        rgba(
            103,
            215,
            255,
            .86
        ) !important;

    outline-offset:
        3px !important;
}


/* =========================================================
   3. NAVIGATION
========================================================= */

body.cdv-ux-polished
.cdv-global-header {
    --nav-accent:
        #8974ff;

    --nav-cyan:
        #67d7ff;

    top:
        13px !important;

    width:
        min(
            1450px,
            calc(100% - 30px)
        ) !important;

    height:
        var(
            --cdv-ux-nav-height
        ) !important;

    padding:
        0 17px 0 20px !important;

    border:
        1px solid
        rgba(
            154,
            142,
            255,
            .15
        ) !important;

    border-radius:
        19px !important;

    background:
        linear-gradient(
            112deg,
            rgba(
                6,
                8,
                27,
                .89
            ),
            rgba(
                9,
                11,
                31,
                .82
            )
            52%,
            rgba(
                5,
                15,
                31,
                .85
            )
        ) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        0 14px 44px
        rgba(
            0,
            0,
            0,
            .20
        ) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(125%) !important;

    backdrop-filter:
        blur(22px)
        saturate(125%) !important;

    transition:
        top .30s ease,
        height .30s ease,
        width .30s ease,
        background .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        transform .30s ease !important;
}

body.cdv-ux-polished
.cdv-global-header::before {
    opacity:
        .19 !important;
}

body.cdv-ux-polished
.cdv-global-header::after {
    opacity:
        .38 !important;
}

body.cdv-ux-polished
.cdv-global-header.is-scrolled {
    top:
        8px !important;

    height:
        62px !important;

    width:
        min(
            1360px,
            calc(100% - 24px)
        ) !important;

    border-color:
        rgba(
            137,
            151,
            255,
            .20
        ) !important;

    box-shadow:
        0 12px 38px
        rgba(
            0,
            0,
            0,
            .27
        ) !important;
}

body.cdv-ux-polished
.cdv-global-brand {
    gap:
        11px !important;
}

body.cdv-ux-polished
.cdv-global-brand-mark {
    width:
        31px !important;

    height:
        31px !important;

    flex-basis:
        31px !important;
}

body.cdv-ux-polished
.cdv-global-brand-name {
    font-size:
        13px !important;

    letter-spacing:
        .14em !important;
}

body.cdv-ux-polished
.cdv-global-brand-subtitle {
    display:
        none !important;
}

body.cdv-ux-polished
.cdv-global-menu {
    gap:
        3px !important;

    padding:
        4px !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .038
        ) !important;

    border-radius:
        13px !important;

    background:
        rgba(
            2,
            4,
            18,
            .22
        ) !important;

    box-shadow:
        none !important;
}

body.cdv-ux-polished
.cdv-global-link {
    min-height:
        36px !important;

    padding:
        0 12px !important;

    border-radius:
        9px !important;

    font-size:
        8px !important;

    letter-spacing:
        .10em !important;
}

body.cdv-ux-polished
.cdv-global-link:hover {
    transform:
        none !important;
}

body.cdv-ux-polished
.cdv-global-link.active {
    border-color:
        rgba(
            139,
            125,
            255,
            .20
        ) !important;

    background:
        linear-gradient(
            135deg,
            rgba(
                118,
                91,
                255,
                .16
            ),
            rgba(
                70,
                180,
                255,
                .065
            )
        ) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ) !important;
}

body.cdv-ux-polished
.cdv-global-status {
    min-height:
        36px !important;

    padding:
        8px 11px !important;

    border-color:
        rgba(
            88,
            228,
            176,
            .09
        ) !important;

    background:
        rgba(
            4,
            17,
            27,
            .20
        ) !important;
}


/* =========================================================
   4. ESPACE SOUS LA NAVIGATION
========================================================= */

body.cdv-ux-polished:not(.cdv-page-home)
main {
    padding-top:
        calc(
            var(
                --cdv-ux-nav-height
            )
            + 43px
        ) !important;
}

body.cdv-ux-polished:not(.cdv-page-home)
main > :first-child {
    margin-top:
        0 !important;
}


/* =========================================================
   5. TYPOGRAPHIE ET LISIBILITÉ
========================================================= */

body.cdv-ux-polished
:where(
    .eyebrow,
    .pv-title,
    .replay-metric-label,
    .replay-panel-title,
    .hof-label,
    .news-kicker,
    .newsroom-kicker,
    .custom-card-kicker,
    .custom-label,
    .ranking-v2-head,
    .section-kicker,
    .stat-label,
    .player-card-label
) {
    min-height:
        auto;

    color:
        var(
            --cdv-ux-subtle
        );

    font-size:
        max(
            9px,
            .58rem
        );

    line-height:
        1.35;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}

body.cdv-ux-polished
:where(
    .subtitle,
    .ranking-hero-sub,
    .news-description,
    .hof-detail,
    .pv-description,
    .replay-metric-detail,
    .player-card-subtitle
) {
    color:
        var(
            --cdv-ux-muted
        ) !important;

    line-height:
        1.62 !important;
}

body.cdv-ux-polished
:where(
    .gradient,
    .ranking-hero-title span
) {
    background:
        linear-gradient(
            92deg,
            #ffffff,
            #cfc5ff
            55%,
            #78ceff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* =========================================================
   6. CARTES ET SURFACES
========================================================= */

body.cdv-ux-polished
:where(
    .player-card,
    .custom-card,
    .custom-game-card,
    .hof-card,
    .pv-card,
    .replay-metric-card,
    .replay-panel,
    .dashboard-card,
    .news-card,
    .showmatch-tile,
    .match-history-card,
    .home-showmatch-card,
    .custom-detail-team
) {
    border:
        1px solid
        var(
            --cdv-ux-border
        ) !important;

    border-radius:
        var(
            --cdv-ux-radius
        ) !important;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .025
        ),

        var(
            --cdv-ux-shadow
        ) !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease,
        transform .25s ease !important;
}

@media (
    hover: hover
)
and (
    pointer: fine
) {

    body.cdv-ux-polished
    :where(
        .player-card,
        .custom-card,
        .custom-game-card,
        .hof-card,
        .pv-card,
        .replay-metric-card,
        .news-card,
        .showmatch-tile,
        .match-history-card
    ):hover {
        border-color:
            var(
                --cdv-ux-border-hover
            ) !important;

        box-shadow:
            inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                .045
            ),

            var(
                --cdv-ux-shadow-hover
            ) !important;

        transform:
            translateY(
                -2px
            ) !important;
    }
}

body.cdv-ux-polished
:where(
    .player-card,
    .custom-card,
    .custom-game-card,
    .hof-card,
    .pv-card,
    .news-card,
    .showmatch-tile
)::before {
    opacity:
        .50 !important;
}

body.cdv-ux-polished
:where(
    .player-card,
    .custom-card,
    .custom-game-card,
    .hof-card,
    .pv-card,
    .news-card,
    .showmatch-tile
)::after {
    opacity:
        .28 !important;
}


/* =========================================================
   7. CHAMPS, RECHERCHES ET FILTRES
========================================================= */

body.cdv-ux-polished
:where(
    input[type="text"],
    input[type="search"],
    .ranking-v2-search,
    .player-search,
    .custom-search
) {
    min-height:
        48px !important;

    border:
        1px solid
        rgba(
            151,
            139,
            255,
            .13
        ) !important;

    border-radius:
        13px !important;

    background:
        rgba(
            4,
            6,
            22,
            .68
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .018
        ) !important;
}

body.cdv-ux-polished
:where(
    input[type="text"],
    input[type="search"]
)::placeholder {
    color:
        rgba(
            200,
            196,
            218,
            .35
        ) !important;
}

body.cdv-ux-polished
:where(
    button,
    .filter-button,
    .ranking-filter,
    .news-filter
) {
    min-height:
        40px;
}


/* =========================================================
   8. PAGE CLASSEMENT
========================================================= */

body.cdv-page-ranking
.ranking-v2 {
    width:
        min(
            1180px,
            calc(
                100% - 30px
            )
        ) !important;
}

body.cdv-page-ranking
.ranking-v2-row {
    border-color:
        rgba(
            145,
            133,
            238,
            .105
        ) !important;
}

body.cdv-page-ranking
.ranking-v2-row:hover {
    background-color:
        rgba(
            110,
            101,
            255,
            .025
        ) !important;
}

body.cdv-page-ranking
:where(
    .ranking-v2-filters,
    .ranking-v2-scoring,
    .ranking-scoring,
    .cdv-ranking-scoring
) {
    margin-bottom:
        18px !important;
}


/* =========================================================
   9. PAGE CUSTOMS
========================================================= */

body.cdv-page-customs
main {
    width:
        min(
            1380px,
            calc(
                100% - 30px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}

body.cdv-page-customs
main > section:first-of-type {
    border-radius:
        var(
            --cdv-ux-radius-large
        ) !important;
}

body.cdv-page-customs
:where(
    .custom-card,
    .custom-game-card
) {
    min-height:
        100%;
}

body.cdv-page-customs
:where(
    .custom-card,
    .custom-game-card
)
.player-link {
    max-width:
        100%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   10. PAGE JOUEURS
========================================================= */

body.cdv-page-players
main {
    width:
        min(
            1380px,
            calc(
                100% - 30px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}

body.cdv-page-players
.player-card {
    height:
        100%;
}

body.cdv-page-players
.player-card
.player-link,
body.cdv-page-players
.player-card-name {
    max-width:
        100%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

body.cdv-page-players
.player-card
img {
    object-fit:
        cover;
}


/* =========================================================
   11. PROFILS JOUEURS
========================================================= */

body.cdv-page-profile
.player-v2 {
    width:
        min(
            1280px,
            calc(
                100% - 30px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}

body.cdv-page-profile
.pv-card {
    background:
        linear-gradient(
            145deg,
            rgba(
                18,
                19,
                34,
                .89
            ),
            rgba(
                7,
                9,
                22,
                .91
            )
        ) !important;
}

body.cdv-page-profile
:where(
    .pv-rank-emblem,
    .pv18-rank-emblem,
    img[src*="emblem-"]
) {
    object-fit:
        contain !important;
}

body.cdv-page-profile
:where(
    .player-v2-tabs,
    .profile-tabs
) {
    border-color:
        rgba(
            151,
            137,
            255,
            .13
        ) !important;

    background:
        rgba(
            6,
            8,
            25,
            .78
        ) !important;
}

body.cdv-page-profile
.profile-replay-dashboard {
    margin-top:
        34px !important;
}


/* =========================================================
   12. ACTUALITÉS
========================================================= */

body.cdv-page-news
main {
    width:
        min(
            1380px,
            calc(
                100% - 30px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}

body.cdv-page-news
:where(
    .news-poster,
    .news-champion-poster,
    .showmatch-tile img
) {
    object-fit:
        cover !important;

    transition:
        filter .35s ease,
        transform .45s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ) !important;
}

@media (
    hover: hover
)
and (
    pointer: fine
) {

    body.cdv-page-news
    .showmatch-tile:hover
    img {
        transform:
            scale(
                1.018
            ) !important;

        filter:
            saturate(
                1.06
            )
            contrast(
                1.025
            ) !important;
    }
}


/* =========================================================
   13. HALL OF FAME
========================================================= */

body.cdv-page-hof
main {
    width:
        min(
            1320px,
            calc(
                100% - 30px
            )
        ) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}

body.cdv-page-hof
.hof-card {
    overflow:
        hidden;
}

body.cdv-page-hof
.hof-card:nth-child(1) {
    --cdv-hof-color:
        240,
        194,
        94;
}

body.cdv-page-hof
.hof-card:nth-child(2) {
    --cdv-hof-color:
        152,
        119,
        255;
}

body.cdv-page-hof
.hof-card:nth-child(3) {
    --cdv-hof-color:
        91,
        210,
        255;
}

body.cdv-page-hof
.hof-card {
    border-color:
        rgba(
            var(
                --cdv-hof-color,
                150,
                133,
                255
            ),
            .18
        ) !important;
}


/* =========================================================
   14. RÉVÉLATION AU SCROLL
========================================================= */

body.cdv-ux-ready
.cdv-ux-reveal {
    opacity:
        0;

    transform:
        translateY(
            14px
        );

    transition:
        opacity .62s ease,
        transform .62s
        cubic-bezier(
            .2,
            .75,
            .2,
            1
        );
}

body.cdv-ux-ready
.cdv-ux-reveal.cdv-ux-visible {
    opacity:
        1;

    transform:
        none;
}


/* =========================================================
   15. TABLETTE
========================================================= */

@media (max-width: 1080px) {

    :root {
        --cdv-ux-nav-height:
            64px;
    }

    body.cdv-ux-polished
    .cdv-global-header {
        width:
            calc(
                100% - 22px
            ) !important;

        height:
            64px !important;
    }

    body.cdv-ux-polished
    .cdv-global-link {
        padding:
            0 8px !important;

        font-size:
            7px !important;
    }

    body.cdv-ux-polished
    .cdv-global-status-copy {
        display:
            none !important;
    }
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 860px) {

    :root {
        --cdv-ux-nav-height:
            62px;
    }

    body.cdv-ux-polished
    .cdv-global-header {
        top:
            max(
                8px,
                env(
                    safe-area-inset-top
                )
            ) !important;

        width:
            calc(
                100% - 16px
            ) !important;

        height:
            62px !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto !important;

        padding:
            0 9px 0 13px !important;

        border-radius:
            16px !important;
    }

    body.cdv-ux-polished
    .cdv-global-brand {
        gap:
            9px !important;
    }

    body.cdv-ux-polished
    .cdv-global-brand-mark {
        width:
            29px !important;

        height:
            29px !important;

        flex-basis:
            29px !important;
    }

    body.cdv-ux-polished
    .cdv-global-brand-name {
        max-width:
            220px;

        font-size:
            12px !important;

        letter-spacing:
            .12em !important;
    }

    body.cdv-ux-polished
    .cdv-global-toggle {
        width:
            42px !important;

        height:
            42px !important;

        border-radius:
            12px !important;
    }

    body.cdv-ux-polished
    .cdv-global-menu {
        top:
            calc(
                100% + 8px
            ) !important;

        left:
            0 !important;

        right:
            0 !important;

        max-height:
            calc(
                100vh - 92px
            );

        padding:
            8px !important;

        overflow-y:
            auto;

        border-radius:
            15px !important;

        background:
            rgba(
                5,
                7,
                23,
                .97
            ) !important;

        box-shadow:
            0 19px 48px
            rgba(
                0,
                0,
                0,
                .40
            ) !important;
    }

    body.cdv-ux-polished
    .cdv-global-link {
        min-height:
            44px !important;

        font-size:
            8px !important;
    }

    body.cdv-ux-polished:not(.cdv-page-home)
    main {
        padding-top:
            calc(
                var(
                    --cdv-ux-nav-height
                )
                + 28px
                + env(
                    safe-area-inset-top
                )
            ) !important;
    }

    body.cdv-page-news
    main,
    body.cdv-page-hof
    main,
    body.cdv-page-customs
    main,
    body.cdv-page-players
    main,
    body.cdv-page-profile
    .player-v2 {
        width:
            calc(
                100% - 18px
            ) !important;

        max-width:
            calc(
                100% - 18px
            ) !important;
    }

    body.cdv-ux-polished
    :where(
        .eyebrow,
        .pv-title,
        .replay-metric-label,
        .replay-panel-title,
        .hof-label,
        .news-kicker,
        .newsroom-kicker,
        .custom-card-kicker,
        .custom-label,
        .section-kicker,
        .stat-label,
        .player-card-label
    ) {
        font-size:
            10px !important;

        letter-spacing:
            .10em !important;
    }

    body.cdv-page-customs
    :where(
        .custom-grid,
        .customs-grid
    ),
    body.cdv-page-players
    :where(
        .player-grid,
        .players-grid
    ) {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }

    body.cdv-page-customs
    :where(
        .custom-card,
        .custom-game-card
    ),
    body.cdv-page-players
    .player-card {
        min-width:
            0 !important;

        max-width:
            100% !important;
    }

    body.cdv-page-profile
    .pv-card {
        transform:
            none !important;
    }

    body.cdv-page-news
    :where(
        .showmatch-grid-manual,
        .news-grid
    ) {
        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;
    }
}


/* =========================================================
   17. PETITS MOBILES
========================================================= */

@media (max-width: 420px) {

    body.cdv-ux-polished
    .cdv-global-brand-name {
        max-width:
            190px;

        font-size:
            11px !important;
    }

    body.cdv-ux-polished
    :where(
        input[type="text"],
        input[type="search"]
    ) {
        font-size:
            16px !important;
    }
}


/* =========================================================
   18. RÉDUCTION DES ANIMATIONS
========================================================= */

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

    html {
        scroll-behavior:
            auto !important;
    }

    body.cdv-ux-polished *,
    body.cdv-ux-polished *::before,
    body.cdv-ux-polished *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    body.cdv-ux-ready
    .cdv-ux-reveal {
        opacity:
            1 !important;

        transform:
            none !important;
    }
}