/* =========================================================
   HALL OF FAME V2
========================================================= */

.hof-v2 {

    width:
        min(
            1320px,
            calc(100% - 48px)
        );

    margin:
        44px auto
        110px;

    --hof-gold:
        241, 193, 96;

    --hof-violet:
        145, 105, 255;

    --hof-blue:
        84, 211, 255;

    --hof-silver:
        194, 210, 228;

    --hof-bronze:
        204, 122, 76;
}


/* =========================================================
   HERO DU CHAMPION
========================================================= */

.hof-champion {

    position: relative;

    min-height: 460px;

    display: grid;

    grid-template-columns:
        minmax(
            310px,
            .85fr
        )
        minmax(
            0,
            1.35fr
        );

    align-items: center;

    gap: 60px;

    overflow: hidden;

    padding:
        50px 62px;

    border:
        1px solid
        rgba(
            var(--hof-gold),
            .18
        );

    border-radius: 30px;

    background:

        radial-gradient(
            560px circle
            at
            22% 55%,

            rgba(
                var(--hof-gold),
                .12
            ),

            transparent 67%
        ),

        radial-gradient(
            650px circle
            at
            88% 100%,

            rgba(
                var(--hof-violet),
                .14
            ),

            transparent 69%
        ),

        linear-gradient(
            125deg,

            rgba(
                17,
                17,
                33,
                .95
            ),

            rgba(
                7,
                8,
                21,
                .97
            )
        );

    box-shadow:

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

        0 40px 90px
        rgba(
            0,
            0,
            0,
            .36
        ),

        0 0 65px
        rgba(
            var(--hof-gold),
            .055
        );

    --hof-pointer-x: 50%;
    --hof-pointer-y: 50%;
}


/* Halo suivant la souris. */

.hof-champion::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            470px circle
            at
            var(--hof-pointer-x)
            var(--hof-pointer-y),

            rgba(
                var(--hof-gold),
                .095
            ),

            transparent 64%
        );
}


/* Grand texte décoratif. */

.hof-champion::after {

    content: "LEGEND";

    position: absolute;

    right: -25px;
    bottom: -27px;

    z-index: 0;

    color:
        transparent;

    font-size:
        clamp(
            115px,
            14vw,
            210px
        );

    font-weight: 1000;
    line-height: .8;
    letter-spacing: -.09em;

    -webkit-text-stroke:
        1px
        rgba(
            var(--hof-gold),
            .045
        );

    pointer-events: none;
}


.hof-champion-visual,
.hof-champion-copy {

    position: relative;

    z-index: 5;
}


/* =========================================================
   PORTRAIT DU CHAMPION
========================================================= */

.hof-champion-visual {

    min-height: 330px;

    display: grid;

    place-items: center;
}


.hof-champion-orbit {

    position: relative;

    width: 270px;
    height: 270px;

    display: grid;

    place-items: center;
}


.hof-champion-orbit::before,
.hof-champion-orbit::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.hof-champion-orbit::before {

    inset: 0;

    border:
        1px solid
        rgba(
            var(--hof-gold),
            .20
        );

    box-shadow:
        inset
        0 0 35px
        rgba(
            var(--hof-gold),
            .035
        );

    animation:
        hofOrbitOne
        14s
        linear
        infinite;
}


.hof-champion-orbit::after {

    inset: 23px;

    border:

        1px dashed
        rgba(
            var(--hof-violet),
            .21
        );

    animation:
        hofOrbitTwo
        11s
        linear
        infinite reverse;
}


@keyframes hofOrbitOne {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes hofOrbitTwo {

    to {
        transform:
            rotate(360deg);
    }

}


.hof-champion-avatar {

    position: relative;

    z-index: 4;

    width: 174px;
    height: 174px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(
            var(--hof-gold),
            .42
        );

    border-radius: 45px;

    color:
        rgb(
            var(--hof-gold)
        );

    background:
        linear-gradient(
            145deg,

            rgba(
                var(--hof-gold),
                .14
            ),

            rgba(
                8,
                9,
                21,
                .95
            )
        );

    box-shadow:

        0 0 0 8px
        rgba(
            var(--hof-gold),
            .035
        ),

        0 30px 60px
        rgba(
            0,
            0,
            0,
            .47
        ),

        0 0 48px
        rgba(
            var(--hof-gold),
            .14
        );
}


.hof-champion-avatar::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                .15
            ),

            transparent 34%
        );
}


.hof-champion-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.hof-champion-avatar span {

    font-size: 56px;
    font-weight: 950;
}


.hof-champion-crown {

    position: absolute;

    right: 25px;
    top: 17px;

    z-index: 7;

    width: 47px;
    height: 47px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--hof-gold),
            .35
        );

    border-radius: 16px;

    color:
        rgb(
            var(--hof-gold)
        );

    background:
        rgba(
            13,
            12,
            23,
            .94
        );

    box-shadow:
        0 0 30px
        rgba(
            var(--hof-gold),
            .16
        );

    font-size: 20px;

    animation:
        hofCrownPulse
        3.4s
        ease-in-out
        infinite;
}


@keyframes hofCrownPulse {

    0%,
    100% {

        filter:
            brightness(.85);
    }

    50% {

        filter:
            brightness(1.35);
    }

}


/* =========================================================
   IDENTITÉ DU CHAMPION
========================================================= */

.hof-champion-eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(
            var(--hof-gold),
            .73
        );

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .21em;

    text-transform: uppercase;
}


.hof-champion-eyebrow::before {

    content: "";

    width: 37px;
    height: 1px;

    background:
        linear-gradient(
            90deg,

            rgb(
                var(--hof-gold)
            ),

            transparent
        );

    box-shadow:
        0 0 12px
        rgba(
            var(--hof-gold),
            .25
        );
}


.hof-champion-title {

    margin:
        13px 0 0;

    color:
        rgba(
            226,
            219,
            238,
            .46
        );

    font-size: 12px;
    font-weight: 850;
    letter-spacing: .10em;

    text-transform: uppercase;
}


.hof-champion-name {

    margin:
        8px 0 16px;

    overflow: hidden;

    color: transparent;

    font-size:
        clamp(
            60px,
            7vw,
            102px
        );

    font-weight: 1000;
    line-height: .88;
    letter-spacing: -.07em;

    background:
        linear-gradient(
            108deg,

            #ffffff 4%,

            #f0dfb0 39%,

            #d99d40 68%,

            #efe4ff 100%
        );

    background-size:
        220% 100%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    text-overflow: ellipsis;
    white-space: nowrap;

    animation:
        hofChampionTitle
        6s
        ease-in-out
        infinite;
}


@keyframes hofChampionTitle {

    0%,
    100% {

        background-position:
            0% 50%;
    }

    50% {

        background-position:
            100% 50%;
    }

}


.hof-champion-description {

    max-width: 600px;

    color:
        rgba(
            220,
            214,
            232,
            .45
        );

    font-size: 13px;
    line-height: 1.75;
}


.hof-champion-stats {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;

    margin-top: 27px;
}


.hof-champion-stat {

    min-height: 82px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        14px;

    border:
        1px solid
        rgba(
            var(--hof-gold),
            .10
        );

    border-radius: 14px;

    background:
        rgba(
            7,
            8,
            20,
            .50
        );

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


.hof-champion-stat strong {

    color: #ffffff;

    font-size: 23px;
    font-weight: 950;
    line-height: 1;
}


.hof-champion-stat span {

    margin-top: 8px;

    color:
        rgba(
            221,
            214,
            233,
            .34
        );

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

    text-transform: uppercase;
}


/* =========================================================
   PARTICULES
========================================================= */

.hof-particles {

    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

    pointer-events: none;
}


.hof-particle {

    position: absolute;

    left:
        var(--x);

    bottom: -10px;

    width:
        var(--size);

    height:
        var(--size);

    border-radius: 50%;

    opacity: 0;

    background:
        rgba(
            var(--hof-gold),
            .85
        );

    box-shadow:
        0 0 10px
        rgba(
            var(--hof-gold),
            .52
        );

    animation:
        hofParticleRise
        var(--duration)
        linear
        var(--delay)
        infinite;
}


@keyframes hofParticleRise {

    0% {

        bottom: -10px;

        opacity: 0;
    }

    15% {

        opacity: .65;
    }

    70% {

        opacity: .20;
    }

    100% {

        bottom: 110%;

        opacity: 0;

        transform:
            translateX(
                var(--drift)
            );
    }

}


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

.hof-section-head {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin:
        62px 0 18px;
}


.hof-section-kicker {

    color:
        rgba(
            219,
            212,
            231,
            .34
        );

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

    text-transform: uppercase;
}


.hof-section-head h2 {

    margin:
        7px 0 0;

    color: #ffffff;

    font-size: 31px;
    font-weight: 950;
    letter-spacing: -.035em;
}


.hof-section-count {

    color:
        rgba(
            220,
            213,
            232,
            .32
        );

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .13em;

    text-transform: uppercase;
}


/* =========================================================
   CARTES DES RECORDS
========================================================= */

.hof-record-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 16px;
}


.hof-record-card {

    position: relative;

    min-height: 280px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    padding:
        27px;

    border:
        1px solid
        rgba(
            var(--record-color),
            .14
        );

    border-radius: 22px;

    color: inherit;
    text-decoration: none;

    background:

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

            rgba(
                var(--record-color),
                .11
            ),

            transparent 70%
        ),

        linear-gradient(
            145deg,

            rgba(
                16,
                17,
                34,
                .90
            ),

            rgba(
                7,
                9,
                22,
                .92
            )
        );

    box-shadow:

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

        0 25px 55px
        rgba(
            0,
            0,
            0,
            .25
        );

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


.hof-record-card.wins {

    --record-color:
        var(--hof-gold);
}


.hof-record-card.mvp {

    --record-color:
        var(--hof-violet);
}


.hof-record-card.winrate {

    --record-color:
        var(--hof-blue);
}


.hof-record-card:hover {

    border-color:
        rgba(
            var(--record-color),
            .29
        );

    box-shadow:

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

        0 30px 65px
        rgba(
            0,
            0,
            0,
            .31
        ),

        0 0 35px
        rgba(
            var(--record-color),
            .065
        );
}


.hof-record-label {

    color:
        rgba(
            var(--record-color),
            .75
        );

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .15em;

    text-transform: uppercase;
}


.hof-record-value {

    margin-top: 22px;

    color: #ffffff;

    font-size:
        clamp(
            50px,
            5vw,
            72px
        );

    font-weight: 1000;
    line-height: .9;
    letter-spacing: -.06em;
}


.hof-record-player {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;

    padding-top: 27px;
}


.hof-record-avatar {

    width: 51px;
    height: 51px;

    flex: 0 0 51px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(
            var(--record-color),
            .27
        );

    border-radius: 15px;

    color:
        rgb(
            var(--record-color)
        );

    background:
        rgba(
            var(--record-color),
            .07
        );

    font-size: 18px;
    font-weight: 950;
}


.hof-record-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.hof-record-name {

    color: #ffffff;

    font-size: 16px;
    font-weight: 950;
}


.hof-record-detail {

    margin-top: 5px;

    color:
        rgba(
            220,
            213,
            232,
            .35
        );

    font-size: 8px;
    font-weight: 800;
}


.hof-record-card.locked {

    --record-color:
        150, 143, 170;

    opacity: .68;
}


/* =========================================================
   PALMARÈS
========================================================= */

.hof-leaderboards {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 16px;
}


.hof-board {

    overflow: hidden;

    border:
        1px solid
        rgba(
            153,
            136,
            207,
            .11
        );

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,

            rgba(
                15,
                17,
                33,
                .84
            ),

            rgba(
                7,
                9,
                22,
                .88
            )
        );

    box-shadow:
        0 25px 55px
        rgba(
            0,
            0,
            0,
            .24
        );
}


.hof-board-head {

    display: flex;

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

    min-height: 68px;

    padding:
        0 21px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .045
        );
}


.hof-board-head strong {

    color: #ffffff;

    font-size: 14px;
    font-weight: 950;
}


.hof-board-head span {

    color:
        rgba(
            221,
            214,
            232,
            .34
        );

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .10em;

    text-transform: uppercase;
}


.hof-board-row {

    position: relative;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        39px
        43px
        minmax(
            0,
            1fr
        )
        auto;

    align-items: center;

    gap: 10px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .04
        );

    transition:
        background-color .22s ease;
}


.hof-board-row:last-child {

    border-bottom: 0;
}


.hof-board-row:hover {

    background:
        rgba(
            132,
            105,
            255,
            .045
        );
}


.hof-board-rank {

    color:
        rgba(
            225,
            219,
            236,
            .37
        );

    font-size: 12px;
    font-weight: 950;
}


.hof-board-row:first-child
.hof-board-rank {

    color:
        rgb(
            var(--hof-gold)
        );
}


.hof-board-avatar {

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 12px;

    color:
        rgba(
            224,
            216,
            238,
            .55
        );

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    font-size: 13px;
    font-weight: 950;
}


.hof-board-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hof-board-name {

    overflow: hidden;

    color:
        rgba(
            245,
            242,
            250,
            .88
        );

    font-size: 12px;
    font-weight: 900;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.hof-board-score {

    color:
        rgba(
            239,
            234,
            246,
            .70
        );

    font-size: 11px;
    font-weight: 950;
}


/* =========================================================
   CHRONOLOGIE DES MVP
========================================================= */

.hof-timeline {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;

    padding-top: 28px;
}


.hof-timeline::before {

    content: "";

    position: absolute;

    left: 5%;
    right: 5%;
    top: 9px;

    height: 1px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                var(--hof-violet),
                .36
            ),

            rgba(
                var(--hof-gold),
                .35
            ),

            transparent
        );
}


.hof-timeline-card {

    position: relative;

    min-width: 0;

    padding:
        18px 13px;

    border:
        1px solid
        rgba(
            153,
            134,
            217,
            .10
        );

    border-radius: 16px;

    color: inherit;
    text-align: center;
    text-decoration: none;

    background:
        rgba(
            9,
            11,
            26,
            .72
        );
}


.hof-timeline-card::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -23px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgb(
            var(--hof-violet)
        );

    box-shadow:
        0 0 11px
        rgba(
            var(--hof-violet),
            .46
        );

    transform:
        translateX(-50%);
}


.hof-timeline-avatar {

    width: 49px;
    height: 49px;

    display: grid;

    place-items: center;

    overflow: hidden;

    margin:
        0 auto 11px;

    border-radius: 15px;

    color:
        rgb(
            var(--hof-gold)
        );

    background:
        rgba(
            var(--hof-gold),
            .06
        );

    font-size: 17px;
    font-weight: 950;
}


.hof-timeline-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hof-timeline-name {

    overflow: hidden;

    color: #ffffff;

    font-size: 11px;
    font-weight: 950;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.hof-timeline-match {

    margin-top: 6px;

    color:
        rgba(
            220,
            213,
            232,
            .34
        );

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .hof-champion {

        grid-template-columns:
            280px
            minmax(
                0,
                1fr
            );

        gap: 35px;

        padding:
            43px 39px;
    }


    .hof-champion-orbit {

        width: 235px;
        height: 235px;
    }


    .hof-champion-avatar {

        width: 150px;
        height: 150px;

        border-radius: 39px;
    }


    .hof-leaderboards {

        grid-template-columns: 1fr;
    }


    .hof-timeline {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        row-gap: 30px;
    }


    .hof-timeline::before {

        display: none;
    }


    .hof-timeline-card::before {

        display: none;
    }

}


@media (max-width: 760px) {

    .hof-v2 {

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

        margin-top: 24px;
    }


    .hof-champion {

        min-height: auto;

        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            34px 23px;

        text-align: center;
    }


    .hof-champion-visual {

        min-height: 245px;
    }


    .hof-champion-copy {

        display: flex;

        flex-direction: column;

        align-items: center;
    }


    .hof-champion-eyebrow {

        justify-content: center;
    }


    .hof-champion-name {

        max-width: 100%;

        font-size:
            clamp(
                46px,
                15vw,
                74px
            );
    }


    .hof-champion-stats {

        width: 100%;

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


    .hof-record-grid {

        grid-template-columns: 1fr;
    }


    .hof-record-card {

        min-height: 235px;
    }


    .hof-section-head {

        align-items: flex-start;

        flex-direction: column;
    }


    .hof-timeline {

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

}


@media (max-width: 460px) {

    .hof-timeline {

        grid-template-columns: 1fr;
    }

}


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

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

    .hof-champion-orbit::before,
    .hof-champion-orbit::after,
    .hof-champion-crown,
    .hof-champion-name,
    .hof-particle {

        animation: none !important;
    }


    .hof-particles {

        display: none;
    }

}