/* =============================================
   CUSTOM DU VERSE
   PLAYER PROFILE — RECORD BADGES V1
   ============================================= */

.cdv-record-achievements {

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

    margin:
        28px auto 36px;

    padding:
        24px 26px 27px;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(228, 197, 128, .16);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(235, 200, 121, .075),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(15, 14, 22, .96),
            rgba(7, 7, 13, .96)
        );

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

        0 24px 60px
        rgba(0,0,0,.20);
}


.cdv-record-achievements::before {

    content: "";

    position:
        absolute;

    inset:
        0 auto 0 -20%;

    width:
        32%;

    pointer-events:
        none;

    transform:
        skewX(-17deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 232, 172, .045),
            transparent
        );

    animation:
        cdvRecordPanelSweep
        8s
        ease-in-out
        infinite;
}


.cdv-record-achievements-head {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        20px;
}


.cdv-record-achievements-kicker {

    display:
        block;

    margin-bottom:
        5px;

    color:
        rgba(227, 198, 135, .72);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.cdv-record-achievements h2 {

    margin:
        0;

    color:
        #f5f1ea;

    font-size:
        clamp(
            20px,
            2vw,
            29px
        );

    line-height:
        1;

    letter-spacing:
        -.035em;
}


.cdv-record-achievements-count {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(231, 201, 138, .18);

    border-radius:
        999px;

    background:
        rgba(231, 201, 138, .035);

    color:
        rgba(235, 213, 166, .65);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .14em;
}


.cdv-record-achievements-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap:
        10px;
}


.cdv-record-achievement {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        14px 15px;

    position:
        relative;

    overflow:
        hidden;

    text-decoration:
        none !important;

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

    border-radius:
        13px;

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

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


.cdv-record-achievement:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(231, 201, 138, .25);

    background:
        rgba(231, 201, 138, .035);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.18);
}


.cdv-record-achievement-medal {

    width:
        39px;

    height:
        39px;

    flex:
        0 0 39px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    border:
        1px solid
        rgba(231, 201, 138, .26);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.11),
            transparent 34%
        ),
        rgba(231,201,138,.045);

    color:
        #ead39e;

    font-size:
        17px;

    box-shadow:
        0 0 18px
        rgba(231,201,138,.07);
}


.cdv-record-achievement-copy {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.cdv-record-achievement-copy strong {

    overflow:
        hidden;

    color:
        #f6f2ea;

    font-size:
        11px;

    font-weight:
        950;

    letter-spacing:
        .065em;

    line-height:
        1.15;

    text-overflow:
        ellipsis;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


.cdv-record-achievement-copy small {

    color:
        rgba(225, 220, 233, .48);

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;
}


/* GOLD */

.cdv-record-achievement--gold
.cdv-record-achievement-medal {

    color:
        #f3d98d;

    border-color:
        rgba(243,217,141,.31);

    box-shadow:
        0 0 20px
        rgba(243,217,141,.10);
}


/* ROYAL — MVP / ACE / STREAK */

.cdv-record-achievement--royal {

    background:
        linear-gradient(
            120deg,
            rgba(216,177,90,.07),
            rgba(255,255,255,.012)
        );
}

.cdv-record-achievement--royal
.cdv-record-achievement-medal {

    color:
        #ffe3a0;

    border-color:
        rgba(255,227,160,.38);

    box-shadow:
        0 0 22px
        rgba(255,211,114,.14);
}


/* ALL-TIME */

.cdv-record-achievement--platinum
.cdv-record-achievement-medal {

    color:
        #e5ddff;

    border-color:
        rgba(205,190,255,.28);

    box-shadow:
        0 0 20px
        rgba(170,142,255,.10);
}


/* ROLE */

.cdv-record-achievement--role
.cdv-record-achievement-medal {

    color:
        #d4c5ff;

    border-color:
        rgba(165,136,255,.26);
}


/* SECONDARY */

.cdv-record-achievement--violet
.cdv-record-achievement-medal {

    color:
        #c6b5f6;

    border-color:
        rgba(161,126,240,.24);
}


/* RECORD MORTS — volontairement plus sobre */

.cdv-record-achievement--danger {

    opacity:
        .83;
}

.cdv-record-achievement--danger
.cdv-record-achievement-medal {

    color:
        #c99e99;

    border-color:
        rgba(189,111,105,.18);

    box-shadow:
        none;
}


@keyframes cdvRecordPanelSweep {

    0%,
    75% {

        transform:
            translateX(-160%)
            skewX(-17deg);

        opacity:
            0;
    }

    82% {

        opacity:
            1;
    }

    94% {

        transform:
            translateX(440%)
            skewX(-17deg);

        opacity:
            .65;
    }

    100% {

        transform:
            translateX(440%)
            skewX(-17deg);

        opacity:
            0;
    }
}


@media (max-width: 700px) {

    .cdv-record-achievements {

        width:
            calc(100% - 28px);

        padding:
            20px 16px 18px;
    }

    .cdv-record-achievements-head {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }

    .cdv-record-achievements-grid {

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


@media (max-width: 480px) {

    .cdv-record-achievements-grid {

        grid-template-columns:
            1fr;
    }
}


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

    .cdv-record-achievements::before {

        animation:
            none !important;
    }
}