:root {
    --challenge-bg:
        #09080b;

    --challenge-panel:
        rgba(19,16,23,.90);

    --challenge-border:
        rgba(255,255,255,.09);

    --challenge-purple:
        #b04bff;

    --challenge-pink:
        #ec59cb;

    --challenge-green:
        #68e3a0;

    --challenge-muted:
        #a89fac;
}


.challenge-main {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 78px 0 100px;
}


.challenge-hero {
    padding:
        48px 0 42px;
}


.challenge-kicker,
.challenge-section-head span {
    color:
        #c57aff;

    font-size:
        .72rem;

    font-weight:
        950;

    letter-spacing:
        .18em;
}


.challenge-hero h1 {
    max-width:
        800px;

    margin:
        10px 0 14px;

    font-size:
        clamp(2.5rem, 7vw, 5.6rem);

    line-height:
        .95;

    letter-spacing:
        -.055em;
}


.challenge-hero h1 span {
    color:
        var(--challenge-purple);
}


.challenge-hero > p {
    max-width:
        650px;

    color:
        var(--challenge-muted);

    font-size:
        1.03rem;

    line-height:
        1.65;
}


.challenge-reset-row {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

    margin-top:
        30px;
}


.challenge-reset-card {
    padding:
        15px 17px;

    border:
        1px solid
        var(--challenge-border);

    border-radius:
        14px;

    background:
        var(--challenge-panel);
}


.challenge-reset-card span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #837988;

    font-size:
        .66rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.challenge-reset-card strong {
    font-size:
        .88rem;
}


.challenge-section-head {
    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        32px 0 18px;
}


.challenge-section-head h2 {
    margin:
        5px 0 0;

    font-size:
        clamp(1.7rem, 4vw, 2.5rem);
}


.challenge-section-head > strong {
    color:
        #d8b4fe;

    font-size:
        .86rem;
}


.weekly-head {
    margin-top:
        56px;
}


.challenge-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        15px;
}


.challenge-card {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        245px;

    padding:
        20px;

    border:
        1px solid
        var(--challenge-border);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(25,20,30,.97),
            rgba(12,10,14,.97)
        );
}


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

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -70px;

    top:
        -80px;

    border-radius:
        999px;

    background:
        rgba(176,75,255,.16);

    filter:
        blur(15px);
}


.challenge-card.is-complete {
    border-color:
        rgba(104,227,160,.35);
}


.challenge-card.is-claimed {
    opacity:
        .72;
}


.challenge-card-type {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #a89fac;

    font-size:
        .69rem;

    font-weight:
        950;

    letter-spacing:
        .12em;
}


.challenge-xp {
    color:
        #d8b4fe;
}


.challenge-card h3 {
    margin:
        28px 0 8px;

    font-size:
        1.25rem;
}


.challenge-card p {
    min-height:
        44px;

    margin:
        0;

    color:
        var(--challenge-muted);

    line-height:
        1.5;

    font-size:
        .88rem;
}


.challenge-progress-copy {
    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        26px;

    font-size:
        .75rem;

    font-weight:
        900;
}


.challenge-progress {
    overflow:
        hidden;

    height:
        8px;

    margin-top:
        8px;

    border-radius:
        999px;

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


.challenge-progress > div {
    height:
        100%;

    width:
        0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--challenge-purple),
            var(--challenge-pink)
        );
}


.challenge-card.is-complete
.challenge-progress > div {
    background:
        var(--challenge-green);
}


.challenge-claim {
    width:
        100%;

    min-height:
        42px;

    margin-top:
        17px;

    border:
        1px solid
        rgba(176,75,255,.35);

    border-radius:
        11px;

    background:
        rgba(176,75,255,.12);

    color:
        white;

    font:
        inherit;

    font-size:
        .76rem;

    font-weight:
        950;

    cursor:
        pointer;
}


.challenge-claim:hover:not(:disabled) {
    background:
        rgba(176,75,255,.22);
}


.challenge-claim:disabled {
    cursor:
        default;

    border-color:
        rgba(255,255,255,.08);

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

    color:
        #746d79;
}


.challenge-weekly-bonus {
    margin-top:
        18px;

    padding:
        22px;

    border:
        1px solid
        rgba(176,75,255,.28);

    border-radius:
        18px;

    background:
        linear-gradient(
            120deg,
            rgba(176,75,255,.10),
            rgba(236,89,203,.045),
            rgba(15,12,18,.96)
        );
}


.challenge-weekly-bonus
.challenge-card {
    min-height:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;
}


.challenge-weekly-bonus
.challenge-card::after {
    display:
        none;
}


.challenge-login {
    padding:
        28px;

    border:
        1px solid
        var(--challenge-border);

    border-radius:
        18px;

    background:
        var(--challenge-panel);
}


.challenge-login p {
    color:
        var(--challenge-muted);
}


.challenge-login a {
    color:
        #c57aff;

    font-weight:
        900;

    text-decoration:
        none;
}


.challenge-toast {
    position:
        fixed;

    z-index:
        9999;

    right:
        22px;

    bottom:
        22px;

    max-width:
        340px;

    padding:
        15px 18px;

    border:
        1px solid
        rgba(176,75,255,.3);

    border-radius:
        13px;

    background:
        rgba(16,12,20,.98);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.45);

    font-size:
        .84rem;

    font-weight:
        850;
}


.challenge-toast[hidden],
.challenge-login[hidden],
#challengeApp[hidden] {
    display:
        none !important;
}


@media (max-width: 900px) {

    .challenge-grid {
        grid-template-columns:
            1fr;
    }

    .challenge-reset-row {
        grid-template-columns:
            1fr;
    }

    .challenge-card {
        min-height:
            0;
    }
}


@media (max-width: 600px) {

    .challenge-main {
        width:
            min(100% - 24px, 1180px);

        padding-top:
            44px;
    }

    .challenge-hero {
        padding-top:
            30px;
    }

    .challenge-section-head {
        align-items:
            start;
    }
}