/* =========================================================
   CLASSEMENT MOBILE — CARTE À QUATRE COLONNES
========================================================= */

@media (max-width: 760px) {

    html,
    body.cdv-ranking-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    body.cdv-ranking-page
    main.ranking-v2 {
        width: calc(100% - 18px) !important;
        max-width: calc(100% - 18px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.cdv-ranking-page
    .ranking-v2-table-wrap,
    body.cdv-ranking-page
    .ranking-v2-table,
    body.cdv-ranking-page
    .ranking-table-shell,
    body.cdv-ranking-page
    .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        overflow: visible !important;
    }

    /*
       MOBILE :

       1 — Rang
       2 — Joueur + mouvement
       8 — Points
       9 — ACE
    */

    body.cdv-ranking-page
    .ranking-v2-head,
    body.cdv-ranking-page
    .ranking-v2-row {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: grid !important;

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

        column-gap: 7px !important;

        align-items: center !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 13px !important;
        padding-right: 13px !important;

        transform: none !important;
    }

    /*
       Cache :
       Customs, W, L, Winrate et MVP.
    */

    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(3),
    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(4),
    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(5),
    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(6),
    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(7),

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(3),
    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(4),
    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(5),
    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(6),
    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(7) {
        display: none !important;
    }

    body.cdv-ranking-page
    .ranking-v2-head {
        min-height: 56px !important;

        border-radius: 18px 18px 0 0 !important;

        font-size: 7px !important;
        letter-spacing: .12em !important;
    }

    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(1)::after {
        content: "RANG";

        color:
            rgba(
                203,
                199,
                226,
                .42
            );
    }

    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(1) {
        color: transparent !important;
        font-size: 0 !important;
    }

    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(2) {
        overflow: visible !important;
    }

    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(8),
    body.cdv-ranking-page
    .ranking-v2-head > :nth-child(9) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;
        text-align: center !important;
    }

    /* =====================================================
       LIGNES / CARTES
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-row {
        position: relative !important;

        min-height: 92px !important;

        margin-bottom: 9px !important;

        border:
            1px solid
            rgba(
                154,
                140,
                255,
                .12
            ) !important;

        border-radius: 19px !important;

        background:
            linear-gradient(
                115deg,
                rgba(
                    12,
                    14,
                    37,
                    .96
                ),
                rgba(
                    15,
                    17,
                    43,
                    .91
                )
            ) !important;

        box-shadow:
            inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                .035
            ),
            0 12px 32px
            rgba(
                0,
                0,
                0,
                .14
            ) !important;

        overflow: hidden !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row::after {
        content: "";

        position: absolute;

        left: 0;
        top: 14px;
        bottom: 14px;

        width: 2px;

        border-radius: 0 3px 3px 0;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(
                    132,
                    112,
                    255,
                    .78
                ),
                transparent
            );

        pointer-events: none;
    }

    body.cdv-ranking-page
    .ranking-v2-row > * {
        box-sizing: border-box !important;

        min-width: 0 !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
    }

    /* =====================================================
       RANG
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(1) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        overflow: visible !important;

        font-size: 15px !important;
        font-weight: 900 !important;
        letter-spacing: -.03em !important;
    }

    /* =====================================================
       JOUEUR + MOUVEMENT
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(2) {
        display: grid !important;

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

        align-items: center !important;

        gap: 6px !important;

        overflow: visible !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row
    .player-link {
        display: block !important;

        min-width: 0 !important;
        max-width: 100% !important;

        overflow: hidden !important;

        color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 900 !important;
        letter-spacing: -.02em !important;

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

    body.cdv-ranking-page
    .cdv-rank-movement {
        min-width: 38px !important;
        max-width: 46px !important;
        height: 27px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 7px !important;

        border-radius: 999px !important;

        font-size: 8px !important;
        font-weight: 900 !important;

        white-space: nowrap !important;
    }

    body.cdv-ranking-page
    .cdv-rank-movement:not(.up):not(.down) {
        display: none !important;
    }

    /* =====================================================
       POINTS — LARGEUR GARANTIE
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8) {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

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

        padding: 0 !important;

        overflow: visible !important;

        text-align: center !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8) > *,
    body.cdv-ranking-page
    .ranking-v2-row
    .cdv-points-badge,
    body.cdv-ranking-page
    .ranking-v2-row
    .ranking-points {
        box-sizing: border-box !important;

        width: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;

        min-height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 7px !important;

        overflow: visible !important;

        border:
            1px solid
            rgba(
                126,
                105,
                255,
                .42
            ) !important;

        border-radius: 11px !important;

        background:
            linear-gradient(
                135deg,
                rgba(
                    96,
                    73,
                    210,
                    .30
                ),
                rgba(
                    66,
                    56,
                    151,
                    .20
                )
            ) !important;

        color: #ffffff !important;

        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .01em !important;

        text-align: center !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8)
    small,
    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8)
    span {
        flex: 0 0 auto !important;

        margin-left: 3px !important;

        color:
            rgba(
                218,
                211,
                247,
                .55
            ) !important;

        font-size: 7px !important;
    }

    /* =====================================================
       ACE
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(9) {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;

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

        padding: 0 !important;

        overflow: visible !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(9) > *,
    body.cdv-ranking-page
    .ranking-v2-row
    .cdv-ace-badge,
    body.cdv-ranking-page
    .ranking-v2-row
    .ranking-ace {
        box-sizing: border-box !important;

        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;

        min-height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 5px !important;

        overflow: hidden !important;

        border-radius: 999px !important;

        font-size: 8px !important;
        font-weight: 900 !important;
        letter-spacing: .06em !important;

        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* =====================================================
       BARÈME PLUS AÉRÉ
    ===================================================== */

    body.cdv-ranking-page
    .ranking-v2-scoring,
    body.cdv-ranking-page
    .ranking-scoring,
    body.cdv-ranking-page
    .cdv-ranking-scoring {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

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

        gap: 9px !important;

        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-scoring > *,
    body.cdv-ranking-page
    .ranking-scoring > *,
    body.cdv-ranking-page
    .cdv-ranking-scoring > * {
        width: 100% !important;
        min-width: 0 !important;

        justify-content: center !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        text-align: center !important;
    }
}

/* =========================================================
   IPHONE ÉTROIT
========================================================= */

@media (max-width: 390px) {

    body.cdv-ranking-page
    main.ranking-v2 {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
    }

    body.cdv-ranking-page
    .ranking-v2-head,
    body.cdv-ranking-page
    .ranking-v2-row {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            72px
            62px !important;

        column-gap: 5px !important;

        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8) {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(8) > *,
    body.cdv-ranking-page
    .ranking-v2-row
    .cdv-points-badge,
    body.cdv-ranking-page
    .ranking-v2-row
    .ranking-points {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;

        padding-left: 5px !important;
        padding-right: 5px !important;

        font-size: 9px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(9) {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row > :nth-child(9) > *,
    body.cdv-ranking-page
    .ranking-v2-row
    .cdv-ace-badge,
    body.cdv-ranking-page
    .ranking-v2-row
    .ranking-ace {
        width: 59px !important;
        min-width: 59px !important;
        max-width: 59px !important;

        font-size: 7px !important;
    }

    body.cdv-ranking-page
    .ranking-v2-row
    .player-link {
        font-size: 13px !important;
    }

    body.cdv-ranking-page
    .cdv-rank-movement {
        min-width: 34px !important;
        max-width: 40px !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}