/* =========================================================
   SUPPRESSION DU TEXTE PLAYER DASHBOARD V2
========================================================= */

.cdv-wide-hero-center
.player-v2-kicker {

    display: none !important;
}


/* =========================================================
   RANG SOLOQ : EMBLÈME À GAUCHE, TEXTE À DROITE
========================================================= */

.cdv-wide-rank {

    position: relative !important;

    width: 100% !important;
    min-height: 210px !important;

    display: grid !important;

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

    align-items: center !important;

    gap: 3px !important;

    padding: 0 !important;

    text-align: left !important;
}


/* L’emblème revient dans le flux normal. */

.cdv-wide-rank-emblem {

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 145px !important;
    height: 170px !important;

    display: grid !important;

    place-items: center !important;

    overflow: visible !important;

    opacity: 1 !important;

    transform: none !important;
}


/* Halo derrière l’emblème uniquement. */

.cdv-wide-rank-emblem::before {

    content: "";

    position: absolute !important;

    inset: 27% 20% !important;

    z-index: 0 !important;

    border-radius: 50% !important;

    opacity: .82 !important;

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

    filter:
        blur(27px) !important;
}


/*
L’image Riot contient beaucoup de transparence.
On la redimensionne sans la faire passer derrière le texte.
*/

.cdv-wide-rank-emblem img {

    position: relative !important;

    left: auto !important;
    top: auto !important;

    z-index: 2 !important;

    width: 145px !important;
    height: 145px !important;

    max-width: none !important;

    opacity: .78 !important;

    object-fit: contain !important;

    filter:

        saturate(1.18)

        drop-shadow(
            0 15px 28px
            rgba(
                0,
                0,
                0,
                .48
            )
        ) !important;

    transform:
        scale(1.42) !important;

    transform-origin:
        center center !important;
}


/* Texte du rang totalement séparé. */

.cdv-wide-rank-copy {

    position: relative !important;

    z-index: 4 !important;

    width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    padding-left: 8px !important;

    text-align: left !important;
}


.cdv-wide-rank-mode {

    color:
        rgba(
            232,
            226,
            242,
            .45
        ) !important;

    text-align: left !important;
}


.cdv-wide-rank-name {

    max-width: 100% !important;

    margin-top: 9px !important;

    color: #ffffff !important;

    font-size:
        clamp(
            22px,
            2vw,
            31px
        ) !important;

    line-height: .96 !important;

    text-align: left !important;

    text-shadow:

        0 3px 14px
        rgba(
            0,
            0,
            0,
            .90
        ),

        0 0 22px
        rgba(
            var(--player-accent),
            .15
        ) !important;
}


.cdv-wide-rank-lp {

    margin-top: 13px !important;

    align-self: flex-start !important;
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1050px) {

    .cdv-wide-rank {

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


    .cdv-wide-rank-emblem {

        width: 112px !important;
        height: 145px !important;
    }


    .cdv-wide-rank-emblem img {

        width: 115px !important;
        height: 115px !important;

        transform:
            scale(1.38) !important;
    }


    .cdv-wide-rank-name {

        font-size:
            clamp(
                19px,
                2vw,
                27px
            ) !important;
    }
}


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

@media (max-width: 790px) {

    .cdv-wide-rank {

        width:
            min(
                340px,
                100%
            ) !important;

        min-height: 180px !important;

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

        margin:
            0 auto !important;
    }


    .cdv-wide-rank-emblem {

        width: 135px !important;
        height: 155px !important;
    }


    .cdv-wide-rank-emblem img {

        width: 135px !important;
        height: 135px !important;
    }


    .cdv-wide-rank-copy {

        align-items: flex-start !important;

        text-align: left !important;
    }


    .cdv-wide-rank-name {

        text-align: left !important;
    }

}