/* =========================================
   CUSTOM DU VERSE — RIVALRIES V1
   ========================================= */

.cdv-rivals {

    width:
        min(
            1500px,
            calc(100% - 56px)
        );

    margin:
        34px auto 38px;

    position:
        relative;
}


.cdv-rivals-head {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        24px;

    margin-bottom:
        18px;
}


.cdv-rivals-kicker {

    display:
        block;

    margin-bottom:
        6px;

    color:
        rgba(213, 185, 126, .66);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .23em;
}


.cdv-rivals h2 {

    margin:
        0;

    color:
        #f5f2ec;

    font-size:
        clamp(
            26px,
            3vw,
            43px
        );

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


.cdv-rivals-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(225, 218, 231, .39);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


.cdv-rivals-meta i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgba(219, 190, 127, .5);
}


/* FEATURED */

.cdv-rivals-featured {

    display:
        grid;

    grid-template-columns:
        1.12fr 1fr 1fr;

    gap:
        12px;

    margin-bottom:
        14px;
}


.cdv-rival-card {

    min-height:
        220px;

    padding:
        19px 20px 17px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    text-decoration:
        none !important;

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

    border-radius:
        17px;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(129, 98, 202, .075),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(17, 15, 26, .97),
            rgba(7, 7, 13, .98)
        );

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

        0 22px 44px
        rgba(0,0,0,.16);

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


.cdv-rival-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(221, 192, 130, .22);

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


.cdv-rival-card::before {

    content:
        "";

    position:
        absolute;

    width:
        160px;

    height:
        160px;

    right:
        -58px;

    top:
        -67px;

    border-radius:
        50%;

    background:
        rgba(126, 89, 205, .06);

    filter:
        blur(1px);

    pointer-events:
        none;
}


.cdv-rival-card--main {

    border-color:
        rgba(222, 190, 120, .17);

    background:
        radial-gradient(
            circle at 0 0,
            rgba(226, 194, 125, .105),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(19, 17, 24, .98),
            rgba(7, 7, 13, .98)
        );
}


.cdv-rival-card--nemesis::before {

    background:
        rgba(160, 77, 128, .075);
}


.cdv-rival-card--victim::before {

    background:
        rgba(90, 166, 154, .055);
}


.cdv-rival-card-label {

    position:
        relative;

    z-index:
        2;

    color:
        rgba(219, 193, 139, .72);

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .17em;
}


.cdv-rival-card-player {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        18px;
}


.cdv-rival-avatar {

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    overflow:
        hidden;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    border:
        1px solid
        rgba(224, 197, 138, .27);

    background:
        linear-gradient(
            145deg,
            rgba(226,197,135,.12),
            rgba(103,74,160,.12)
        );

    box-shadow:
        0 0 0 3px
        rgba(7, 7, 13, .8),

        0 0 19px
        rgba(202, 172, 111, .09);

    color:
        #eee5d4;

    font-size:
        16px;

    font-weight:
        950;
}


.cdv-rival-avatar img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.cdv-rival-card-player strong {

    display:
        block;

    overflow:
        hidden;

    max-width:
        220px;

    color:
        #f4f1eb;

    font-size:
        18px;

    font-weight:
        950;

    letter-spacing:
        -.025em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.cdv-rival-card-player small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(224, 219, 230, .42);

    font-size:
        10px;

    font-weight:
        750;
}


.cdv-rival-card-score {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        auto;

    padding-top:
        22px;
}


.cdv-rival-card-score strong {

    color:
        #f4f0e7;

    font-size:
        clamp(
            32px,
            3.4vw,
            48px
        );

    line-height:
        .9;

    letter-spacing:
        -.06em;
}


.cdv-rival-card-score span {

    color:
        rgba(218, 191, 134, .35);

    font-size:
        20px;
}


.cdv-rival-card-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        16px;

    padding-top:
        13px;

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

    color:
        rgba(223, 216, 229, .47);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .09em;
}


.cdv-rival-edge {

    color:
        rgba(221, 193, 133, .77);
}


/* H2H TABLE */

.cdv-h2h {

    overflow:
        hidden;

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

    border-radius:
        16px;

    background:
        rgba(8, 8, 14, .73);

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


.cdv-h2h-head,
.cdv-h2h-row {

    display:
        grid;

    grid-template-columns:
        minmax(220px, 1.8fr)
        .55fr
        .7fr
        .6fr
        1fr;

    align-items:
        center;

    gap:
        14px;
}


.cdv-h2h-head {

    min-height:
        45px;

    padding:
        0 18px;

    color:
        rgba(215, 205, 222, .34);

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .13em;

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

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


.cdv-h2h-row {

    min-height:
        66px;

    padding:
        8px 18px;

    text-decoration:
        none !important;

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

    transition:
        background .18s ease,
        transform .18s ease;
}


.cdv-h2h-row:last-child {

    border-bottom:
        0;
}


.cdv-h2h-row:hover {

    background:
        linear-gradient(
            90deg,
            rgba(212, 182, 120, .045),
            rgba(126, 95, 191, .025),
            transparent
        );
}


.cdv-h2h-player {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.cdv-rival-avatar--small {

    width:
        34px;

    height:
        34px;

    flex-basis:
        34px;

    font-size:
        12px;
}


.cdv-h2h-player strong {

    overflow:
        hidden;

    color:
        #f0ede7;

    font-size:
        12px;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.cdv-h2h-games,
.cdv-h2h-wr {

    color:
        rgba(232, 226, 238, .62);

    font-size:
        11px;

    font-weight:
        850;
}


.cdv-h2h-score {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        rgba(231, 225, 236, .82);

    font-size:
        12px;
}


.cdv-h2h-score b {

    font-weight:
        950;
}


.cdv-h2h-score i {

    color:
        rgba(210, 183, 126, .33);

    font-style:
        normal;
}


.cdv-h2h-form {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;
}


.cdv-form-dot {

    width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        6px;

    font-size:
        8px;

    font-style:
        normal;

    font-weight:
        950;

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


.cdv-form-dot--w {

    color:
        rgba(202, 239, 216, .88);

    background:
        rgba(83, 156, 109, .10);

    border-color:
        rgba(105, 181, 132, .16);
}


.cdv-form-dot--l {

    color:
        rgba(231, 188, 190, .78);

    background:
        rgba(159, 72, 84, .09);

    border-color:
        rgba(180, 93, 103, .13);
}


@media (
    max-width: 900px
) {

    .cdv-rivals {

        width:
            calc(100% - 28px);
    }

    .cdv-rivals-featured {

        grid-template-columns:
            1fr;
    }

    .cdv-rival-card {

        min-height:
            190px;
    }

}


@media (
    max-width: 680px
) {

    .cdv-rivals-head {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .cdv-h2h {

        overflow-x:
            auto;
    }

    .cdv-h2h-head,
    .cdv-h2h-row {

        min-width:
            670px;
    }

}


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

    .cdv-rival-card {

        transition:
            none !important;
    }
}