/* =============================================
   CDV PLAYERS HOME GLASS V1
============================================= */

@keyframes cdvPlayerGlassReveal {
    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);

        filter:
            blur(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}

.player-card {
    isolation: isolate;

    min-height: 138px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding:
        22px 24px !important;

    border:
        1px solid
        rgba(255,255,255,.08) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,20,34,.72),
            rgba(7,9,18,.55)
        ) !important;

    -webkit-backdrop-filter:
        blur(18px)
        saturate(118%);

    backdrop-filter:
        blur(18px)
        saturate(118%);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018),
        0 15px 44px
        rgba(0,0,0,.13) !important;

    animation:
        cdvPlayerGlassReveal
        .58s
        cubic-bezier(.2,.72,.2,1)
        both;

    animation-delay:
        min(
            calc(var(--player-index) * 42ms),
            650ms
        );

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}


/* Halo violet de l’accueil. */

.player-card::before {
    content: "" !important;

    position: absolute !important;
    z-index: -1;

    width: 150px !important;
    height: 150px !important;

    inset:
        -92px
        -48px
        auto
        auto !important;

    border-radius: 50%;

    opacity: .88;

    background:
        rgba(115,91,255,.18) !important;

    filter:
        blur(38px);

    pointer-events: none;

    transition:
        opacity .28s ease,
        transform .35s ease;
}


/* Reflet très léger au passage de la souris. */

.player-card::after {
    content: "";

    position: absolute;
    z-index: 0;

    width: 45%;
    height: 190%;

    top: -45%;
    left: -70%;

    opacity: 0;

    transform:
        rotate(17deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            transparent
        );

    pointer-events: none;

    transition:
        left .62s ease,
        opacity .24s ease;
}

.player-card:hover {
    transform:
        translateY(-4px) !important;

    border-color:
        rgba(151,130,255,.35) !important;

    background:
        linear-gradient(
            145deg,
            rgba(22,23,43,.78),
            rgba(9,10,22,.63)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.028),
        0 24px 62px
        rgba(0,0,0,.23),
        0 0 46px
        rgba(104,78,224,.05) !important;
}

.player-card:hover::before {
    opacity: 1;

    transform:
        scale(1.14)
        translate(-6px, 6px);
}

.player-card:hover::after {
    left: 130%;
    opacity: 1;
}


/* Contenu toujours au-dessus du reflet. */

.player-card h3,
.player-card .mini-stats {
    position: relative;
    z-index: 2;
}

.player-card h3 {
    margin-bottom:
        17px !important;

    color: white;

    font-size:
        21px !important;

    font-weight: 800;

    letter-spacing:
        -.025em;
}


/* Statistiques plus proches des cartes accueil. */

.player-card .mini-stats {
    display: grid;

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

    justify-content: start;

    gap: 17px;

    color:
        rgba(255,255,255,.37);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .7px;
}

.player-card .mini-stats span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.player-card .mini-stats strong {
    color:
        rgba(255,255,255,.92);

    font-size:
        13px;

    letter-spacing:
        -.2px;
}


/* Barre de recherche assortie au verre. */

.search-box {
    border:
        1px solid
        rgba(255,255,255,.08) !important;

    background:
        linear-gradient(
            145deg,
            rgba(18,20,34,.64),
            rgba(7,9,18,.50)
        ) !important;

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

    backdrop-filter:
        blur(16px);

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

.search-box:focus {
    border-color:
        rgba(151,130,255,.35) !important;

    background:
        rgba(16,17,34,.78) !important;

    box-shadow:
        0 0 0 4px
        rgba(115,91,255,.055);
}


/* Mobile */

@media (max-width: 650px) {
    .player-card {
        min-height: 125px;
    }

    .player-card .mini-stats {
        gap: 13px;
    }
}


/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .player-card {
        animation: none !important;
    }

    .player-card,
    .player-card::before,
    .player-card::after {
        transition: none !important;
    }
}



/* =============================================
   CDV PLAYER CARD SOLOQ V1
============================================= */

.player-card {
    min-height:
        185px !important;
}

.player-soloq {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 48px;

    margin:
        -4px 0 16px;

    padding:
        7px 10px 7px 7px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.026),
            rgba(255,255,255,.010)
        );

    transition:
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.player-card:hover
.player-soloq {
    transform:
        translateY(-1px);

    border-color:
        rgba(151,130,255,.16);

    background:
        rgba(255,255,255,.032);
}

.player-soloq-emblem {
    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0,0,0,.24)
        );

    transition:
        transform .25s ease,
        filter .25s ease;
}

.player-card:hover
.player-soloq-emblem {
    transform:
        scale(1.055);

    filter:
        drop-shadow(
            0 7px 13px
            rgba(0,0,0,.28)
        )
        brightness(1.06);
}

.player-soloq-emblem.unranked {
    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        10px;

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

    color:
        rgba(255,255,255,.25);

    font-size:
        12px;

    filter:
        none;
}

.player-soloq-copy {
    min-width: 0;
}

.player-soloq-label {
    margin-bottom:
        4px;

    color:
        rgba(255,255,255,.30);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1.2px;
}

.player-soloq-rank {
    color:
        rgba(239,236,255,.92);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .35px;

    white-space:
        nowrap;
}

.player-soloq-rank span {
    margin-left:
        5px;

    color:
        rgba(255,255,255,.40);

    font-size:
        8px;

    font-weight:
        800;
}

.player-soloq-rank.unranked {
    color:
        rgba(255,255,255,.36);
}


/* Couleurs discrètes selon le tier. */

.player-soloq[data-tier="iron"] {
    border-color:
        rgba(145,100,79,.14);
}

.player-soloq[data-tier="bronze"] {
    border-color:
        rgba(193,121,71,.16);
}

.player-soloq[data-tier="silver"] {
    border-color:
        rgba(182,202,221,.15);
}

.player-soloq[data-tier="gold"] {
    border-color:
        rgba(241,190,75,.17);
}

.player-soloq[data-tier="platinum"] {
    border-color:
        rgba(86,210,181,.17);
}

.player-soloq[data-tier="emerald"] {
    border-color:
        rgba(63,222,148,.18);
}

.player-soloq[data-tier="diamond"] {
    border-color:
        rgba(114,154,255,.19);
}

.player-soloq[data-tier="master"],
.player-soloq[data-tier="grandmaster"],
.player-soloq[data-tier="challenger"] {
    border-color:
        rgba(183,117,255,.22);

    background:
        linear-gradient(
            135deg,
            rgba(128,84,255,.065),
            rgba(255,255,255,.012)
        );
}


/* Mobile */

@media (max-width: 650px) {
    .player-card {
        min-height:
            180px !important;
    }
}



/* CDV RANK EMBLEM VISIBLE SIZE FIX */

.player-soloq
img.player-soloq-emblem {
    width:
        48px !important;

    height:
        48px !important;

    flex-basis:
        48px !important;

    margin:
        0 5px;

    transform:
        scale(2.20) !important;

    transform-origin:
        center;

    object-fit:
        contain !important;
}

.player-card:hover
.player-soloq
img.player-soloq-emblem {
    transform:
        scale(2.32) !important;
}

.player-soloq-emblem.unranked {
    transform:
        none !important;
}



/* CDV RANK EMBLEM XL FINAL */

.player-soloq {
    overflow:
        visible !important;

    padding-left:
        13px !important;
}

.player-soloq
img.player-soloq-emblem {
    position:
        relative;

    z-index:
        3;

    width:
        52px !important;

    height:
        52px !important;

    flex:
        0 0 52px !important;

    margin:
        0 10px 0 5px !important;

    transform:
        scale(3.75) !important;

    transform-origin:
        center center;

    object-fit:
        contain !important;
}

.player-card:hover
.player-soloq
img.player-soloq-emblem {
    transform:
        scale(3.90) !important;
}

.player-soloq-copy {
    position:
        relative;

    z-index:
        5;
}




/* CDV PLAYERS CINEMATIC HERO START */

.players-cinematic-hero {
    position:
        relative;

    isolation:
        isolate;

    width:
        min(
            1420px,
            calc(100% - 38px)
        );

    min-height:
        500px;

    margin:
        42px auto
        46px;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, .88fr);

    align-items:
        stretch;

    border:
        1px solid
        rgba(144, 132, 255, .17);

    border-radius:
        30px;

    background:
        linear-gradient(
            105deg,
            rgba(5, 8, 25, .97) 0%,
            rgba(8, 10, 30, .90) 45%,
            rgba(8, 19, 38, .80) 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .045),

        0 38px 100px
        rgba(0, 0, 0, .36);
}

.players-cinematic-hero::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(81, 158, 255, .19),
            transparent 23%
        ),

        radial-gradient(
            circle at 89% 85%,
            rgba(129, 78, 255, .17),
            transparent 29%
        ),

        linear-gradient(
            90deg,
            transparent 48%,
            rgba(255, 255, 255, .025)
        );

    pointer-events:
        none;
}

.players-cinematic-hero::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128, 103, 255, .82),
            rgba(98, 216, 255, .82),
            transparent
        );

    opacity:
        .65;
}

.cinematic-hero-grid {
    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    opacity:
        .14;

    background-image:
        linear-gradient(
            rgba(119, 137, 218, .16)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(119, 137, 218, .13)
            1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 78%
        );

    mask-image:
        linear-gradient(
            90deg,
            black,
            transparent 78%
        );
}

.players-cinematic-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        clamp(40px, 6vw, 86px);
}

.cinematic-system-line {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        23px;

    color:
        rgba(192, 186, 222, .53);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .25em;
}

.cinematic-live-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #61e7bc;

    box-shadow:
        0 0 16px
        rgba(97, 231, 188, .70);
}

.players-cinematic-title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            70px,
            8.8vw,
            142px
        );

    font-weight:
        950;

    letter-spacing:
        -.075em;

    line-height:
        .76;

    text-transform:
        uppercase;
}

.players-cinematic-title span {
    display:
        block;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #ffffff 4%,
            #c7bcff 51%,
            #79ccff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;
}

.cinematic-hero-footer {
    max-width:
        670px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        50px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);
}

.cinematic-hero-index {
    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;
}

.cinematic-hero-index strong {
    color:
        white;

    font-size:
        34px;

    line-height:
        1;

    font-weight:
        950;
}

.cinematic-hero-index span {
    color:
        rgba(213, 208, 234, .40);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .20em;
}

.cinematic-hero-instruction {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(211, 207, 231, .38);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .16em;
}

.cinematic-hero-instruction span {
    width:
        30px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            #8870ff,
            #67d5ff
        );
}

.players-cinematic-visual {
    position:
        relative;

    min-height:
        500px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-left:
        1px solid
        rgba(255, 255, 255, .055);

    background:
        radial-gradient(
            circle at center,
            rgba(45, 91, 177, .20),
            transparent 43%
        ),

        linear-gradient(
            145deg,
            rgba(27, 22, 69, .34),
            rgba(5, 14, 31, .18)
        );
}

.players-cinematic-visual::before {
    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border:
        1px solid
        rgba(120, 186, 255, .12);

    border-radius:
        50%;

    box-shadow:
        inset 0 0 55px
        rgba(107, 91, 255, .05);

    animation:
        cdvCinematicOrbit
        16s linear
        infinite;
}

.players-cinematic-visual::after {
    content:
        "";

    position:
        absolute;

    width:
        310px;

    height:
        310px;

    border:
        1px dashed
        rgba(162, 131, 255, .14);

    border-radius:
        50%;

    animation:
        cdvCinematicOrbitReverse
        22s linear
        infinite;
}

.cinematic-trophy-aura {
    position:
        absolute;

    width:
        270px;

    height:
        340px;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(105, 193, 255, .23),
            rgba(117, 76, 255, .10) 44%,
            transparent 72%
        );

    filter:
        blur(24px);

    animation:
        cdvTrophyAura
        4.8s ease-in-out
        infinite;
}

.cinematic-trophy {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            310px,
            70%
        );

    max-height:
        390px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 18px
            rgba(105, 187, 255, .25)
        )
        drop-shadow(
            0 34px 36px
            rgba(16, 13, 58, .42)
        );

    animation:
        cdvTrophyFloat
        5s ease-in-out
        infinite;
}

.cinematic-visual-caption {
    position:
        absolute;

    z-index:
        4;

    left:
        35px;

    right:
        35px;

    bottom:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        rgba(214, 210, 234, .34);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .16em;
}

.cinematic-visual-caption strong {
    color:
        #65e2bb;

    font-size:
        8px;

    text-shadow:
        0 0 15px
        rgba(101, 226, 187, .32);
}

.cinematic-hero-orbit {
    position:
        absolute;

    z-index:
        4;

    top:
        27px;

    right:
        29px;

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        rgba(120, 192, 255, .18);

    border-radius:
        50%;

    animation:
        cdvCinematicOrbit
        9s linear
        infinite;
}

.cinematic-hero-orbit span {
    position:
        absolute;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #75dfff;

    box-shadow:
        0 0 9px
        #75dfff;
}

.cinematic-hero-orbit span:nth-child(1) {
    top:
        -2px;

    left:
        20px;
}

.cinematic-hero-orbit span:nth-child(2) {
    right:
        1px;

    bottom:
        7px;
}

.cinematic-hero-orbit span:nth-child(3) {
    left:
        0;

    bottom:
        9px;
}

@keyframes cdvTrophyFloat {
    0%,
    100% {
        transform:
            translateY(6px)
            rotate(-.3deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(.3deg);
    }
}

@keyframes cdvTrophyAura {
    0%,
    100% {
        opacity:
            .54;

        transform:
            scale(.94);
    }

    50% {
        opacity:
            .92;

        transform:
            scale(1.08);
    }
}

@keyframes cdvCinematicOrbit {
    to {
        transform:
            rotate(360deg);
    }
}

@keyframes cdvCinematicOrbitReverse {
    to {
        transform:
            rotate(-360deg);
    }
}

@media (max-width: 900px) {
    .players-cinematic-hero {
        grid-template-columns:
            1fr;

        min-height:
            auto;
    }

    .players-cinematic-copy {
        padding:
            52px 34px
            39px;
    }

    .players-cinematic-title {
        font-size:
            clamp(
                62px,
                17vw,
                104px
            );
    }

    .players-cinematic-visual {
        min-height:
            360px;

        border-top:
            1px solid
            rgba(255, 255, 255, .055);

        border-left:
            0;
    }
}

@media (max-width: 560px) {
    .players-cinematic-hero {
        width:
            calc(100% - 20px);

        margin-top:
            24px;

        border-radius:
            22px;
    }

    .players-cinematic-copy {
        padding:
            40px 22px
            32px;
    }

    .cinematic-hero-footer {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-top:
            35px;
    }

    .cinematic-hero-instruction {
        display:
            none;
    }

    .players-cinematic-visual {
        min-height:
            310px;
    }

    .cinematic-trophy {
        width:
            190px;
    }

    .players-cinematic-visual::before {
        width:
            280px;

        height:
            280px;
    }

    .players-cinematic-visual::after {
        width:
            210px;

        height:
            210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .players-cinematic-hero *,
    .customs-cinematic-hero * {
        animation:
            none !important;
    }
}


/* CDV PRECISE HERO FIX START */

.players-cinematic-copy {
    min-width:
        0;

    overflow:
        visible;
}

.players-cinematic-title {
    width:
        100%;

    max-width:
        100%;

    overflow:
        visible;

    font-size:
        clamp(
            58px,
            5.35vw,
            86px
        ) !important;

    line-height:
        .88 !important;

    letter-spacing:
        -.055em !important;
}

.players-cinematic-title,
.players-cinematic-title span {
    white-space:
        nowrap !important;
}

.players-cinematic-title span {
    width:
        max-content;

    max-width:
        100%;

    padding-right:
        .075em;
}

@media (max-width: 1150px) {
    .players-cinematic-title {
        font-size:
            clamp(
                54px,
                6.4vw,
                74px
            ) !important;
    }
}

@media (max-width: 900px) {
    .players-cinematic-title {
        font-size:
            clamp(
                58px,
                15vw,
                92px
            ) !important;
    }
}

@media (max-width: 560px) {
    .players-cinematic-title {
        font-size:
            clamp(
                46px,
                14vw,
                66px
            ) !important;
    }
}

/* CDV PRECISE HERO FIX END */


/* CDV PLAYERS CINEMATIC HERO END */




/* CDV PLAYERS CLEANUP V2 START */

.players-cinematic-title {
    width:
        max-content !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    overflow:
        visible !important;

    color:
        transparent !important;

    font-size:
        clamp(
            52px,
            4.85vw,
            76px
        ) !important;

    font-weight:
        900 !important;

    line-height:
        .90 !important;

    letter-spacing:
        -.06em !important;

    white-space:
        nowrap !important;

    background:
        linear-gradient(
            112deg,
            #ffffff 3%,
            #e9e5ff 45%,
            #b5a0ff 73%,
            #75d5ff 100%
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    text-shadow:
        0 15px 48px
        rgba(
            104,
            84,
            255,
            .16
        ) !important;
}

@media (max-width: 760px) {

    .players-cinematic-title {
        font-size:
            clamp(
                42px,
                14vw,
                62px
            ) !important;

        letter-spacing:
            -.05em !important;
    }

}

/* CDV PLAYERS CLEANUP V2 END */