/* =========================================================
   DATA BOARD — CLASSEMENT GÉNÉRAL UNIQUEMENT
========================================================= */

.ranking-v2-board.cdv-data-board {

    position: relative;

    --board-progress: 0%;

    scroll-margin-top: 90px;
}


/* =========================================================
   PROGRESSION DE LECTURE
========================================================= */

.cdv-board-progress {

    position: sticky;

    top: 0;

    z-index: 105;

    width: 100%;
    height: 2px;

    overflow: hidden;

    margin-bottom: 14px;

    border-radius: 999px;

    pointer-events: none;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );
}


.cdv-board-progress-fill {

    width:
        var(--board-progress);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,

            #745fff,

            #65d7ff,

            #ddc078
        );

    box-shadow:
        0 0 13px
        rgba(
            101,
            215,
            255,
            .34
        );

    transition:
        width .08s linear;
}


/* =========================================================
   EN-TÊTE DE SECTION
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-board-head {

    position: relative;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        rgba(
            154,
            137,
            211,
            .10
        );
}


.ranking-v2-board.cdv-data-board
.ranking-v2-board-head::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width:
        clamp(
            90px,
            14vw,
            175px
        );

    height: 1px;

    background:
        linear-gradient(
            90deg,

            #745fff,

            #65d7ff,

            transparent
        );

    box-shadow:
        0 0 13px
        rgba(
            101,
            215,
            255,
            .18
        );
}


.ranking-v2-board.cdv-data-board
.ranking-v2-live-count {

    display: flex;

    align-items: center;

    gap: 7px;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-live-count::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #59e5a8;

    box-shadow:
        0 0 10px
        rgba(
            89,
            229,
            168,
            .55
        );

    animation:
        cdvBoardLive
        2.2s
        ease-in-out
        infinite;
}


@keyframes cdvBoardLive {

    0%,
    100% {

        opacity: .48;
    }

    50% {

        opacity: 1;
    }
}


/* =========================================================
   RECHERCHE
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-search {

    position: relative;

    padding-left: 44px;

    border-color:
        rgba(
            136,
            113,
            226,
            .14
        );

    background:

        linear-gradient(
            145deg,

            rgba(
                14,
                16,
                34,
                .75
            ),

            rgba(
                6,
                8,
                21,
                .78
            )
        );
}


.cdv-search-shell {

    position: relative;
}


.cdv-search-shell::before {

    content: "";

    position: absolute;

    left: 17px;
    top: 50%;

    z-index: 3;

    width: 13px;
    height: 13px;

    pointer-events: none;

    border:
        1px solid
        rgba(
            151,
            132,
            231,
            .55
        );

    border-radius: 50%;

    transform:
        translateY(-57%);
}


.cdv-search-shell::after {

    content: "";

    position: absolute;

    left: 29px;
    top: 29px;

    z-index: 3;

    width: 6px;
    height: 1px;

    pointer-events: none;

    background:
        rgba(
            151,
            132,
            231,
            .55
        );

    transform:
        rotate(45deg);
}


/* =========================================================
   FILTRES AVEC CURSEUR LUMINEUX
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-filters {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


.cdv-filter-indicator {

    position: absolute;

    left: 5px;
    top: 5px;

    z-index: 0;

    width: 0;
    height: 36px;

    border:
        1px solid
        rgba(
            121,
            102,
            255,
            .17
        );

    border-radius: 9px;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,

            rgba(
                116,
                95,
                255,
                .19
            ),

            rgba(
                101,
                215,
                255,
                .075
            )
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .035
        ),

        0 0 19px
        rgba(
            116,
            95,
            255,
            .09
        );

    transition:

        transform
        .34s
        cubic-bezier(
            .2,
            .75,
            .2,
            1
        ),

        width
        .34s
        cubic-bezier(
            .2,
            .75,
            .2,
            1
        );
}


.ranking-v2-board.cdv-data-board
.ranking-v2-filter {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 6px;

    background:
        transparent !important;
}


.cdv-filter-count {

    min-width: 16px;
    height: 16px;

    display: inline-grid;

    place-items: center;

    padding:
        0 4px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );

    border-radius: 999px;

    color:
        rgba(
            231,
            226,
            241,
            .42
        );

    background:
        rgba(
            4,
            6,
            17,
            .32
        );

    font-size: 6px;
}


/* =========================================================
   TABLEAU — CADRE PRINCIPAL
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-table {

    position: relative;

    overflow: visible;

    isolation: isolate;

    border-color:
        rgba(
            137,
            117,
            214,
            .13
        );

    background:

        radial-gradient(
            800px circle
            at
            50% -20%,

            rgba(
                113,
                90,
                255,
                .065
            ),

            transparent 65%
        ),

        linear-gradient(
            145deg,

            rgba(
                13,
                15,
                32,
                .88
            ),

            rgba(
                6,
                8,
                21,
                .91
            )
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .035
        ),

        0 30px 72px
        rgba(
            0,
            0,
            0,
            .30
        );
}


/* Coins futuristes du tableau. */

.cdv-board-corner {

    position: absolute;

    z-index: 20;

    width: 24px;
    height: 24px;

    pointer-events: none;
}


.cdv-board-corner::before,
.cdv-board-corner::after {

    content: "";

    position: absolute;

    background:
        rgba(
            101,
            215,
            255,
            .42
        );

    box-shadow:
        0 0 9px
        rgba(
            101,
            215,
            255,
            .13
        );
}


.cdv-board-corner::before {

    width: 17px;
    height: 1px;
}


.cdv-board-corner::after {

    width: 1px;
    height: 17px;
}


.cdv-board-corner.top-left {

    left: 10px;
    top: 10px;
}


.cdv-board-corner.top-right {

    right: 10px;
    top: 10px;

    transform:
        rotate(90deg);
}


.cdv-board-corner.bottom-right {

    right: 10px;
    bottom: 10px;

    transform:
        rotate(180deg);
}


.cdv-board-corner.bottom-left {

    left: 10px;
    bottom: 10px;

    transform:
        rotate(270deg);
}


/* =========================================================
   EN-TÊTE STICKY
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-row.header {

    position: sticky;

    top: 0;

    z-index: 40;

    overflow: hidden;

    border-radius:
        20px 20px 0 0;

    background:
        rgba(
            8,
            10,
            25,
            .91
        );

    box-shadow:
        0 12px 25px
        rgba(
            0,
            0,
            0,
            .19
        );

    -webkit-backdrop-filter:
        blur(16px)
        saturate(125%);

    backdrop-filter:
        blur(16px)
        saturate(125%);
}


.ranking-v2-board.cdv-data-board
.ranking-v2-row.header::after {

    content: "";

    position: absolute;

    left: -35%;
    bottom: 0;

    width: 30%;
    height: 1px;

    background:
        linear-gradient(
            90deg,

            transparent,

            #65d7ff,

            #8069ff,

            transparent
        );

    box-shadow:
        0 0 10px
        rgba(
            101,
            215,
            255,
            .22
        );

    animation:
        cdvBoardHeaderScan
        6.5s
        ease-in-out
        infinite;
}


@keyframes cdvBoardHeaderScan {

    0%,
    15% {

        left: -35%;

        opacity: 0;
    }

    25% {

        opacity: 1;
    }

    60% {

        left: 115%;

        opacity: 0;
    }

    100% {

        left: 115%;

        opacity: 0;
    }
}


/* =========================================================
   LIGNES INTERACTIVES
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-player-row {

    --row-pointer-x: 50%;
    --row-accent-rgb:
        122, 100, 255;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            300px circle
            at
            var(--row-pointer-x)
            50%,

            rgba(
                var(--row-accent-rgb),
                .075
            ),

            transparent 72%
        );

    transition:

        background-color .23s ease,

        box-shadow .23s ease;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row::after {

    content: "";

    position: absolute;

    left:
        var(--row-pointer-x);

    top: 50%;

    width: 230px;
    height: 130px;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,

            rgba(
                var(--row-accent-rgb),
                .10
            ),

            transparent 70%
        );

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        opacity .22s ease;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row:hover::after {

    opacity: 1;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row
>
* {

    position: relative;

    z-index: 3;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row.cdv-undefeated {

    --row-accent-rgb:
        85, 224, 169;
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row.cdv-has-mvp {

    box-shadow:
        inset
        2px 0 0
        rgba(
            242,
            206,
            130,
            .34
        );
}


.ranking-v2-board.cdv-data-board
.ranking-v2-player-row.cdv-has-mvp
.ranking-v2-number.mvp {

    text-shadow:
        0 0 15px
        rgba(
            242,
            206,
            130,
            .22
        );
}


/* Badge invaincu discret. */

.cdv-undefeated-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-left: 8px;

    padding:
        4px 6px;

    border:
        1px solid
        rgba(
            85,
            224,
            169,
            .15
        );

    border-radius: 999px;

    color:
        rgba(
            102,
            232,
            179,
            .72
        );

    background:
        rgba(
            85,
            224,
            169,
            .05
        );

    font-size: 6px;
    font-weight: 950;
    letter-spacing: .08em;

    vertical-align: middle;
}


.cdv-undefeated-badge::before {

    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #59e5a8;

    box-shadow:
        0 0 8px
        rgba(
            89,
            229,
            168,
            .42
        );
}


/* =========================================================
   JAUGES DE WINRATE
========================================================= */

.ranking-v2-board.cdv-data-board
.ranking-v2-wr-fill {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,

            #745fff,

            #65d7ff
        );
}


.ranking-v2-board.cdv-data-board
.ranking-v2-wr-fill::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,

            transparent,

            rgba(
                255,
                255,
                255,
                .28
            ),

            transparent
        );

    transform:
        translateX(-130%);

    animation:
        cdvWinrateShine
        4.8s
        ease-in-out
        infinite;
}


@keyframes cdvWinrateShine {

    0%,
    38% {

        transform:
            translateX(-130%);
    }

    63%,
    100% {

        transform:
            translateX(130%);
    }
}


/* =========================================================
   BOUTON RETOUR AU PODIUM
========================================================= */

.cdv-back-to-podium {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 120;

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            119,
            98,
            255,
            .22
        );

    border-radius: 15px;

    color: #ffffff;

    background:
        rgba(
            8,
            10,
            25,
            .78
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .04
        ),

        0 16px 34px
        rgba(
            0,
            0,
            0,
            .30
        ),

        0 0 24px
        rgba(
            119,
            98,
            255,
            .07
        );

    -webkit-backdrop-filter:
        blur(15px);

    backdrop-filter:
        blur(15px);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:

        opacity .25s ease,

        visibility .25s ease,

        transform .25s ease,

        border-color .25s ease;
}


.cdv-back-to-podium.visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.cdv-back-to-podium:hover {

    border-color:
        rgba(
            101,
            215,
            255,
            .34
        );
}


.cdv-back-to-podium::before {

    content: "↑";

    font-size: 19px;
    font-weight: 900;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .cdv-board-progress {

        top: 0;
    }


    .ranking-v2-board.cdv-data-board
    .ranking-v2-row.header {

        display: none;
    }


    .ranking-v2-board.cdv-data-board
    .ranking-v2-player-row {

        overflow: hidden;
    }


    .cdv-undefeated-badge {

        display: none;
    }


    .cdv-back-to-podium {

        right: 14px;
        bottom: 14px;

        width: 43px;
        height: 43px;

        border-radius: 13px;
    }


    .cdv-board-corner {

        display: none;
    }

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

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

    .ranking-v2-board.cdv-data-board
    .ranking-v2-live-count::before,

    .ranking-v2-board.cdv-data-board
    .ranking-v2-row.header::after,

    .ranking-v2-board.cdv-data-board
    .ranking-v2-wr-fill::after {

        animation: none !important;
    }


    .cdv-back-to-podium {

        transition: none !important;
    }

}