/* =========================================================
   THÈME DYNAMIQUE DU PROFIL
========================================================= */

.player-v2 {

    --player-accent:
        151, 119, 255;

    --player-accent-soft:
        88, 212, 255;

    --player-accent-text:
        #bcaaff;

    --player-accent-gold:
        242, 206, 130;

    position: relative;

    isolation: isolate;
}


/* FER */

.player-v2[data-rank-theme="iron"] {

    --player-accent:
        148, 145, 154;

    --player-accent-soft:
        191, 184, 178;

    --player-accent-text:
        #c3bdba;
}


/* BRONZE */

.player-v2[data-rank-theme="bronze"] {

    --player-accent:
        194, 124, 82;

    --player-accent-soft:
        232, 164, 105;

    --player-accent-text:
        #e0a16f;
}


/* ARGENT */

.player-v2[data-rank-theme="silver"] {

    --player-accent:
        161, 187, 205;

    --player-accent-soft:
        213, 228, 238;

    --player-accent-text:
        #bed4e2;
}


/* OR */

.player-v2[data-rank-theme="gold"] {

    --player-accent:
        235, 185, 82;

    --player-accent-soft:
        255, 218, 132;

    --player-accent-text:
        #f0c677;
}


/* PLATINE */

.player-v2[data-rank-theme="platinum"] {

    --player-accent:
        74, 200, 188;

    --player-accent-soft:
        108, 231, 219;

    --player-accent-text:
        #72dacd;
}


/* ÉMERAUDE */

.player-v2[data-rank-theme="emerald"] {

    --player-accent:
        55, 211, 151;

    --player-accent-soft:
        102, 242, 190;

    --player-accent-text:
        #62dfad;
}


/* DIAMANT */

.player-v2[data-rank-theme="diamond"] {

    --player-accent:
        96, 176, 255;

    --player-accent-soft:
        134, 221, 255;

    --player-accent-text:
        #82c6ff;
}


/* MASTER */

.player-v2[data-rank-theme="master"] {

    --player-accent:
        184, 97, 255;

    --player-accent-soft:
        255, 115, 214;

    --player-accent-text:
        #d99aff;
}


/* GRANDMASTER */

.player-v2[data-rank-theme="grandmaster"] {

    --player-accent:
        242, 76, 105;

    --player-accent-soft:
        255, 147, 101;

    --player-accent-text:
        #ff899b;
}


/* CHALLENGER */

.player-v2[data-rank-theme="challenger"] {

    --player-accent:
        79, 210, 255;

    --player-accent-soft:
        246, 202, 107;

    --player-accent-text:
        #7de2ff;
}


/* =========================================================
   HERO DU JOUEUR
========================================================= */

.player-v2-header {

    position: relative;

    width:
        min(
            920px,
            calc(100% - 24px)
        );

    min-height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    margin:
        0 auto 18px;

    padding:
        38px 34px;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .14
        );

    border-radius: 26px;

    background:

        radial-gradient(
            560px circle
            at
            50% 115%,

            rgba(
                var(--player-accent),
                .13
            ),

            transparent 66%
        ),

        linear-gradient(
            145deg,

            rgba(
                18,
                20,
                35,
                .76
            ),

            rgba(
                7,
                9,
                21,
                .74
            )
        );

    box-shadow:

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

        0 28px 70px
        rgba(
            0,
            0,
            0,
            .28
        ),

        0 0 55px
        rgba(
            var(--player-accent),
            .045
        );

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

    backdrop-filter:
        blur(14px);
}


.player-v2-header::before {

    content: "";

    position: absolute;

    left: 14%;
    right: 14%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                var(--player-accent),
                .78
            ),

            transparent
        );
}


.player-v2-header::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: 50%;
    top: 58%;

    pointer-events: none;

    border-radius: 50%;

    background:
        rgba(
            var(--player-accent),
            .065
        );

    filter:
        blur(55px);

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

    animation:
        cdvHeroAura
        7s
        ease-in-out
        infinite;
}


.player-v2-header > * {

    position: relative;

    z-index: 2;
}


.player-v2-kicker {

    color:
        rgba(
            var(--player-accent-soft),
            .62
        ) !important;

    letter-spacing:
        .28em !important;
}


.player-v2-name {

    margin:
        11px 0 10px !important;

    font-size:
        clamp(
            48px,
            6vw,
            82px
        ) !important;

    color: transparent !important;

    background:
        linear-gradient(
            115deg,

            #ffffff 8%,

            #f5f2ff 35%,

            rgb(
                var(--player-accent-soft)
            )
            72%,

            rgb(
                var(--player-accent)
            )
            100%
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    text-shadow:
        0 20px 55px
        rgba(
            var(--player-accent),
            .14
        ) !important;
}


.player-v2-meta {

    min-height: 30px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .16
        );

    border-radius: 999px;

    background:
        rgba(
            8,
            11,
            27,
            .58
        );

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


.player-v2-meta strong {

    color:
        rgb(
            var(--player-accent-soft)
        ) !important;
}


@keyframes cdvHeroAura {

    0%,
    100% {

        opacity: .55;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(.92);
    }

    50% {

        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);
    }
}


/* =========================================================
   NAVIGATION INTERNE
========================================================= */

.cdv-profile-quick-nav {

    position: sticky;

    top: 14px;

    z-index: 80;

    width: max-content;
    max-width:
        calc(
            100% - 24px
        );

    display: flex;

    align-items: center;

    gap: 5px;

    margin:
        0 auto 22px;

    padding: 5px;

    overflow-x: auto;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .13
        );

    border-radius: 999px;

    background:
        rgba(
            8,
            10,
            24,
            .76
        );

    box-shadow:

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

        0 14px 35px
        rgba(
            0,
            0,
            0,
            .22
        );

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

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

    scrollbar-width: none;
}


.cdv-profile-quick-nav::-webkit-scrollbar {

    display: none;
}


.cdv-profile-nav-button {

    appearance: none;

    border: 0;

    padding:
        10px 14px;

    border-radius: 999px;

    color:
        rgba(
            232,
            228,
            244,
            .46
        );

    background: transparent;

    font-family: inherit;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;

    text-transform: uppercase;

    cursor: pointer;

    white-space: nowrap;

    transition:

        color .22s ease,

        background-color .22s ease,

        box-shadow .22s ease;
}


.cdv-profile-nav-button:hover,
.cdv-profile-nav-button:focus-visible,
.cdv-profile-nav-button.active {

    color: #ffffff;

    outline: none;

    background:
        rgba(
            var(--player-accent),
            .13
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(
            var(--player-accent),
            .12
        );
}


/* =========================================================
   CARTES SUPÉRIEURES LIÉES AU THÈME DU JOUEUR
========================================================= */

.cdv-profile-overview
>
.replay-metric-card {

    --cdv-accent:
        var(--player-accent) !important;
}


.cdv-summary-value.blue,
.cdv-summary-rank-lp,
.cdv-summary-teammate-count {

    color:
        rgb(
            var(--player-accent-soft)
        ) !important;
}


.cdv-summary-ratio-track .wins {

    background:
        linear-gradient(
            90deg,

            rgb(
                var(--player-accent)
            ),

            rgb(
                var(--player-accent-soft)
            )
        ) !important;
}


/* =========================================================
   SECTION REPLAY
========================================================= */

.profile-replay-dashboard {

    position: relative;

    scroll-margin-top: 90px;
}


.replay-dashboard-heading {

    position: relative;

    padding-bottom: 17px;

    border-bottom:
        1px solid
        rgba(
            var(--player-accent),
            .10
        );
}


.replay-dashboard-heading::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 92px;
    height: 1px;

    background:
        linear-gradient(
            90deg,

            rgba(
                var(--player-accent),
                .85
            ),

            transparent
        );
}


.replay-dashboard-count {

    border-color:
        rgba(
            var(--player-accent),
            .18
        ) !important;

    color:
        rgb(
            var(--player-accent-text)
        ) !important;

    background:
        rgba(
            var(--player-accent),
            .065
        ) !important;
}


/* =========================================================
   CARTES CHAMPIONS SIGNATURE
========================================================= */

.replay-champion-card {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 78px;

    border-color:
        rgba(
            var(--player-accent),
            .10
        ) !important;

    background:

        radial-gradient(
            180px circle
            at
            7% 50%,

            rgba(
                var(--player-accent),
                .09
            ),

            transparent 72%
        ),

        rgba(
            12,
            14,
            29,
            .56
        ) !important;

    transform: none !important;

    transition:

        border-color .25s ease,

        background-color .25s ease,

        box-shadow .25s ease !important;
}


.replay-champion-card::after {

    content: "";

    position: absolute;

    left: 0;
    top: 18%;
    bottom: 18%;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,

            transparent,

            rgb(
                var(--player-accent)
            ),

            transparent
        );

    opacity: .32;

    transition:
        opacity .25s ease;
}


.replay-champion-card:hover {

    transform: none !important;

    border-color:
        rgba(
            var(--player-accent),
            .22
        ) !important;

    box-shadow:
        0 16px 34px
        rgba(
            0,
            0,
            0,
            .21
        ) !important;
}


.replay-champion-card:hover::after {

    opacity: .9;
}


.replay-champion-card img {

    border-radius: 11px;

    box-shadow:

        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .08
        ),

        0 8px 20px
        rgba(
            0,
            0,
            0,
            .32
        );
}


.replay-champion-name {

    font-size: 14px !important;
    letter-spacing: -.015em;
}


.replay-champion-wr {

    color:
        rgb(
            var(--player-accent-text)
        ) !important;
}


/* Premier champion réellement mis en avant. */

.replay-champion-card:first-child {

    min-height: 91px;

    border-color:
        rgba(
            var(--player-accent),
            .18
        ) !important;

    background:

        radial-gradient(
            220px circle
            at
            5% 50%,

            rgba(
                var(--player-accent),
                .15
            ),

            transparent 72%
        ),

        rgba(
            12,
            14,
            29,
            .64
        ) !important;
}


.replay-champion-card:first-child
.replay-champion-name::after {

    content: "SIGNATURE";

    display: inline-flex;

    margin-left: 8px;

    padding:
        4px 6px;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .16
        );

    border-radius: 999px;

    color:
        rgb(
            var(--player-accent-text)
        );

    background:
        rgba(
            var(--player-accent),
            .07
        );

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

    vertical-align: middle;
}


/* =========================================================
   DERNIÈRES PERFORMANCES
========================================================= */

.replay-recent-row {

    position: relative;

    overflow: hidden;

    border-color:
        rgba(
            var(--player-accent),
            .085
        ) !important;

    background:
        rgba(
            10,
            12,
            27,
            .54
        ) !important;

    transform: none !important;

    transition:

        border-color .23s ease,

        background-color .23s ease,

        box-shadow .23s ease !important;
}


.replay-recent-row::before {

    content: "";

    position: absolute;

    left: 0;
    top: 16%;
    bottom: 16%;

    width: 2px;

    border-radius: 999px;

    background:
        rgba(
            var(--player-accent),
            .30
        );

    transition:

        top .23s ease,

        bottom .23s ease,

        background-color .23s ease;
}


.replay-recent-row:hover {

    transform: none !important;

    border-color:
        rgba(
            var(--player-accent),
            .20
        ) !important;

    background:
        rgba(
            var(--player-accent),
            .045
        ) !important;

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            .18
        ) !important;
}


.replay-recent-row:hover::before {

    top: 8%;
    bottom: 8%;

    background:
        rgb(
            var(--player-accent)
        );
}


/* =========================================================
   RESPONSIVE PAR CONTENEUR
========================================================= */

.cdv-profile-overview,
.profile-replay-dashboard {

    container-type:
        inline-size;
}


@container (max-width: 760px) {

    .replay-recent-row {

        grid-template-columns:
            minmax(
                120px,
                1.4fr
            )
            repeat(
                2,
                minmax(
                    60px,
                    .7fr
                )
            ) !important;
    }


    .replay-recent-stat:last-child {

        display: none;
    }
}


@container (max-width: 520px) {

    .replay-recent-row {

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


    .replay-recent-stat {

        display: none;
    }
}


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

@media (max-width: 700px) {

    .player-v2-header {

        min-height: 175px;

        padding:
            28px 18px;

        border-radius: 20px;
    }


    .player-v2-name {

        font-size:
            clamp(
                42px,
                15vw,
                62px
            ) !important;
    }


    .cdv-profile-quick-nav {

        top: 8px;

        justify-content: flex-start;
    }


    .replay-champion-card:first-child {

        min-height: 82px;
    }
}


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

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

    .player-v2-header::after {

        animation: none !important;
    }


    html {

        scroll-behavior: auto !important;
    }
}