/* CDV CHOSEN ONE BG V1 START */

/* =========================================================
   COUCHES ET PROFONDEUR DE LA VIGNETTE
========================================================= */

.world-champion-card {

    position:
        relative !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    background:

        linear-gradient(
            145deg,
            rgba(7, 8, 22, .93),
            rgba(15, 8, 20, .94)
        ) !important;

}


/*
Le fond Faker reste derrière absolument tout le contenu.
*/

.world-champion-faker-background {

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    overflow:
        hidden;

    border-radius:
        inherit;

    pointer-events:
        none;

}


/* =========================================================
   IMAGE THE CHOSEN ONE
========================================================= */

.world-champion-faker-image {

    position:
        absolute;

    inset:
        -8%;

    background-image:
        url("/static/chosen_one_faker.webp");

    background-repeat:
        no-repeat;

    background-position:
        center 46%;

    background-size:
        cover;

    opacity:
        .30;

    filter:

        saturate(1.08)
        contrast(1.08)
        brightness(.67);

    transform:
        scale(1.06);

    animation:
        cdvChosenBackgroundDrift
        16s
        ease-in-out
        infinite alternate;

}


/*
Le rouge est renforcé uniquement sur les côtés et en bas,
afin de préserver la lisibilité du trophée et du pseudo.
*/

.world-champion-faker-red-glow {

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at 50% 76%,
            rgba(184, 13, 46, .26),
            transparent 41%
        ),

        radial-gradient(
            circle at 10% 45%,
            rgba(142, 7, 38, .18),
            transparent 38%
        ),

        radial-gradient(
            circle at 91% 46%,
            rgba(170, 10, 42, .16),
            transparent 38%
        );

    mix-blend-mode:
        screen;

    opacity:
        .85;

    animation:
        cdvChosenRedPulse
        6.5s
        ease-in-out
        infinite;

}


/*
Voile central : il garantit que Sawad, ses statistiques
et le trophée restent parfaitement lisibles.
*/

.world-champion-faker-vignette {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            rgba(6, 8, 24, .30) 0%,
            rgba(6, 7, 22, .48) 36%,
            rgba(7, 7, 20, .72) 100%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(9, 8, 25, .22),
            rgba(5, 6, 18, .64) 85%
        );

}


/* =========================================================
   CONTENU AU-DESSUS DU FOND
========================================================= */

.world-champion-honor-inner {

    position:
        relative !important;

    z-index:
        6 !important;

}

.world-champion-card
.world-champion-trophy {

    z-index:
        15 !important;

}

.world-honor-particles {

    z-index:
        5 !important;

}


/* =========================================================
   SUPPRESSION VISUELLE DE HALL OF CHAMPION
========================================================= */

/*
Le premier emplacement du bandeau reste présent pour ne pas
décaler le RANG 01, mais il ne contient plus aucun texte.
*/

.world-champion-card-top {

    position:
        relative;

    z-index:
        8;

    min-height:
        20px;

}


/* =========================================================
   RANG 01 PLUS IMPORTANT
========================================================= */

.world-champion-rank-highlight {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        25px;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(255, 207, 100, .25);

    border-radius:
        999px;

    color:
        #ffd86e;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    background:
        linear-gradient(
            135deg,
            rgba(255, 205, 100, .13),
            rgba(255, 177, 61, .035)
        );

    box-shadow:

        0 0 18px
        rgba(255, 189, 73, .10),

        inset 0 1px 0
        rgba(255, 239, 195, .10);

    text-shadow:
        0 0 14px
        rgba(255, 198, 87, .28);

    animation:
        cdvChosenRankGlow
        3.8s
        ease-in-out
        infinite;

}


/* =========================================================
   THE CHOSEN ONE
========================================================= */

.world-champion-title-label {

    color:
        #f2c766 !important;

    font-size:
        10px !important;

    font-weight:
        950 !important;

    letter-spacing:
        .21em !important;

    text-transform:
        uppercase !important;

    text-shadow:

        0 0 12px
        rgba(255, 194, 85, .22),

        0 0 25px
        rgba(159, 42, 71, .18);

}


/* Trait lumineux sous le titre. */

.world-champion-title-label::after {

    content:
        "";

    display:
        block;

    width:
        42px;

    height:
        1px;

    margin-top:
        7px;

    background:
        linear-gradient(
            90deg,
            #f3c55e,
            rgba(199, 45, 82, .58),
            transparent
        );

    box-shadow:
        0 0 8px
        rgba(245, 191, 83, .28);

}


/* =========================================================
   BORDURE ROUGE ET OR SUBTILE
========================================================= */

.world-champion-card::after {

    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        20 !important;

    inset:
        0 !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        inherit !important;

    background:

        linear-gradient(
            145deg,
            rgba(255, 217, 124, .26),
            rgba(169, 31, 68, .17) 42%,
            rgba(112, 112, 255, .15) 72%,
            rgba(255, 195, 89, .21)
        )
        border-box !important;

    -webkit-mask:

        linear-gradient(#fff 0 0)
        padding-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:
        xor;

    mask-composite:
        exclude;

    pointer-events:
        none;

    opacity:
        .77;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cdvChosenBackgroundDrift {

    0% {

        transform:
            scale(1.06)
            translate3d(-1.2%, -1%, 0);

    }

    50% {

        transform:
            scale(1.105)
            translate3d(.5%, 1%, 0);

    }

    100% {

        transform:
            scale(1.075)
            translate3d(1.2%, -.4%, 0);

    }

}

@keyframes cdvChosenRedPulse {

    0%,
    100% {

        opacity:
            .57;

    }

    50% {

        opacity:
            .94;

    }

}

@keyframes cdvChosenRankGlow {

    0%,
    100% {

        border-color:
            rgba(255, 207, 100, .20);

        box-shadow:

            0 0 12px
            rgba(255, 189, 73, .06),

            inset 0 1px 0
            rgba(255, 239, 195, .08);

    }

    50% {

        border-color:
            rgba(255, 214, 118, .43);

        box-shadow:

            0 0 23px
            rgba(255, 189, 73, .18),

            inset 0 1px 0
            rgba(255, 239, 195, .17);

    }

}


/* =========================================================
   HOVER
========================================================= */

.world-champion-card:hover
.world-champion-faker-image {

    opacity:
        .38;

    filter:

        saturate(1.18)
        contrast(1.10)
        brightness(.72);

}


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

@media (max-width: 760px) {

    .world-champion-faker-image {

        background-position:
            center 45%;

        opacity:
            .25;

    }

    .world-champion-rank-highlight {

        min-height:
            23px;

        padding:
            4px 8px;

        font-size:
            9px;

    }

    .world-champion-title-label {

        font-size:
            8px !important;

        letter-spacing:
            .16em !important;

    }

}


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

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

    .world-champion-faker-image,
    .world-champion-faker-red-glow,
    .world-champion-rank-highlight {

        animation:
            none !important;

    }

}

/* CDV CHOSEN ONE BG V1 END */