/* Sets · challenge-popup.css
   De opstartmelding voor een nieuwe weekuitdaging. Zie js/challenge-popup.js
   voor wanneer hij verschijnt.

   De modal zelf (achtergrond, kaart, knoppen, eyebrow) leunt op
   .legal-consent-* uit styles.css — dezelfde chrome als de juridische en
   marketingprompt. Hier staat alleen wat deze kaart eigen maakt. */

body.challenge-popup-open {
    overflow: hidden;
}

.challenge-popup-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--sets-accent) 22%, transparent), transparent 70%), #18181b;
}

.challenge-popup-logo .lucide-asset-icon {
    width: 26px;
    height: 26px;
    color: var(--sets-accent-text);
}

.challenge-popup-intro {
    margin: 10px 0 0;
    color: #a1a1aa;
    font-size: 13px;
    line-height: 1.55;
}

/* Dezelfde regel als op de uitdagingskaart zelf (.social-challenge-rule),
   hier in een iets rustiger kader zodat hij niet als waarschuwing leest. */
.challenge-popup-rule {
    padding: 13px 14px;
    border: 1px solid #27272a;
    border-radius: 16px;
    background: rgba(24, 24, 27, 0.62);
    color: #a1a1aa;
    font-size: 12px;
    line-height: 1.5;
}

html:not(.dark) .challenge-popup-logo {
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--sets-accent) 26%, transparent), transparent 70%), #f2f2f7;
}

html:not(.dark) .challenge-popup-intro {
    color: #636366;
}

html:not(.dark) .challenge-popup-rule {
    border-color: #e5e5ea;
    background: #f2f2f7;
    color: #3a3a3c;
}