.daily-challenge-section {
    position: relative;
}

/* Cabeçalho da seção - respeita light/dark via tokens */
.daily-challenge-title {
    color: var(--bs-heading-color);
}

.daily-challenge-subtitle {
    color: var(--bs-secondary-color);
}

/* ----------------------------
   STATUS PILLS
----------------------------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.status-pill .status-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.status-pill-today {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.status-pill-today .status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .35);
}

.status-pill-past {
    background: rgba(148, 163, 184, .16);
    color: var(--bs-gray-700);
}

/* ----------------------------
   CARD ATUAL
----------------------------- */
.current-challenge {
    position: relative;
    overflow: hidden;
    color: white;

    /* BASE */
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.20), transparent 60%),
        linear-gradient(135deg, #5983 0%, #6e43d4 55%, #4beb 100%);

    box-shadow: 0 20px 45px rgba(15,23,42,0.55);
    border: none;
    outline: 1px solid rgba(255,255,255,0.15);

    transition: transform 0.3s ease, 
                box-shadow 0.3s ease, 
                filter 0.3s ease;
}

.current-challenge:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 26px 60px rgba(15,23,42,0.75);
    filter: brightness(1.03);
}

/* MANCHAS DO GRADIENT (igual imagem) */
.current-challenge::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: 0;

    background:
        radial-gradient(55% 45% at 20% 85%, #4beb 0%, transparent 62%),
        radial-gradient(45% 40% at 28% 30%, #acde 0%, transparent 60%),
        radial-gradient(40% 40% at 55% 45%, #72be 0%, transparent 62%),
        radial-gradient(45% 45% at 88% 18%, #6e43d4 0%, transparent 60%),
        radial-gradient(40% 40% at 92% 70%, #5983 0%, transparent 65%);

    filter: blur(42px);
    transform: scale(1.1);
    pointer-events: none;
}

/* garante que o conteúdo fique acima */
.current-challenge > * {
    position: relative;
    z-index: 1;
}

/* Footer do card atual */
.current-challenge .daily-card-footer {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    border: 0 !important;
    margin-top: 0;
}


/* ===============================
   CTA JOGAR DESAFIO (AMARELO PREMIUM)
   =============================== */

.btn-play-today {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        145deg,
        #FFD24A 0%,
        #FFA312 65%,
        #FF7414 100%
    ) !important;

    color: #1f2937 !important; /* texto escuro elegante */
    border: none;
    border-radius: 16px;

    box-shadow:
        0 12px 30px rgba(255, 178, 36, 0.45),
        inset 0 0 0 1px rgba(255,255,255,0.45);

    transition: all 0.3s ease;
}

/* ícone sempre escuro */
.btn-play-today i {
    color: #1f2937;
}

/* brilho interno */
.btn-play-today::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,0.55),
            transparent 60%
        );

    filter: blur(24px);
    pointer-events: none;
}

/* garante conteúdo acima */
.btn-play-today > * {
    position: relative;
    z-index: 1;
}

/* hover */
.btn-play-today:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 18px 40px rgba(255, 178, 36, 0.6),
        inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* active */
.btn-play-today:active {
    transform: scale(0.98);
}

/* ----------------------------
   CARDS PASSADOS
----------------------------- */
.past-challenge {
    background: var(--bs-gray-200);
    border: none !important;
    box-shadow: 0 8px 18px rgba(15,23,42,0.10);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
    position: relative;
    opacity: 0.9;
}

.past-challenge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15,23,42,0.15);
}

/* Deixa o "clima" de desabilitado, mas ainda clicável */
.past-challenge .daily-card-content,
.past-challenge .daily-card-footer {
    opacity: 0.85;
}

/* Ribbon de encerrado */
.ended-ribbon {
    position: absolute;
    top: 14px;
    right: -54px;
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,64,175,0.95));
    color: #e5e7eb;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding: .35rem 3.5rem;
    transform: rotate(45deg);
    z-index: 3;
    pointer-events: none;
}

/* Títulos e textos dos passados */
.past-challenge .daily-title {
    color: var(--bs-gray-900);
}

.past-challenge .daily-description {
    color: var(--bs-gray-600);
}

/* Botão dos passados: estilo mais "fantasma", mas legível */
.past-challenge .past-cta {
    border-radius: 999px;
    border-width: 1px;
    border-style: dashed;
    background: transparent;
    color: var(--bs-primary-text-emphasis);
    border-color: rgba(var(--bs-primary-rgb), 0.75);
}

/* Hover no light */
.past-challenge .past-cta:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* DARK MODE: garante contraste bom */
[data-bs-theme="dark"] .past-challenge .past-cta {
    color: #f9fafb; /* quase branco */
    border-color: rgba(148, 163, 184, 0.85); /* cinza claro */
    background-color: rgba(15, 23, 42, 0.65); /* leve fundo escuro */
}

[data-bs-theme="dark"] .past-challenge .past-cta:hover {
    background-color: rgba(15, 23, 42, 0.9);
}

.badge-daily-highlight {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        145deg,
        #FFD24A 0%,
        #FFA312 65%,
        #FF7414 100%
    );

    color: #1f2937; /* texto escuro elegante */
    border-radius: 12px;

    box-shadow:
        0 6px 16px rgba(255, 178, 36, 0.45),
        inset 0 0 0 1px rgba(255,255,255,0.45);

    letter-spacing: 0.3px;
}

/* ícone coroa */
.badge-daily-highlight i {
    color: #1f2937;
}

/* brilho suave */
.badge-daily-highlight::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;

    background: radial-gradient(
        circle at top left,
        rgba(255,255,255,0.55),
        transparent 60%
    );

    filter: blur(18px);
    pointer-events: none;
}

/* conteúdo acima */
.badge-daily-highlight > * {
    position: relative;
    z-index: 1;
}

/* Badge de data */
.date-badge {
    background: rgba(0,0,0,0.45);
    color: #fff;
    backdrop-filter: blur(3px);
    padding: .35rem .8rem;
    border-radius: .65rem;
    font-size: .75rem;
    font-weight: 600;
}

/* Container da imagem */
.daily-challenge-image {
    position: relative;
    transition: all 0.3s ease;
}

.daily-challenge-image img {
    transition: transform 0.3s ease;
}

.daily-challenge-card:hover .daily-challenge-image img {
    transform: scale(1.03);
}

/* Imagem dessaturada para desafios passados */
.image-desaturated {
    filter: grayscale(0.8) brightness(0.8);
    transition: filter .3s ease;
}

.past-challenge:hover .image-desaturated {
    filter: grayscale(0.5) brightness(0.9);
}

.daily-card-content {
    position: relative;
    z-index: 2;
}

/* Footer dos cards passados */
.past-challenge .daily-card-footer {
    background: var(--bs-gray-300);
    border: 0 !important;
    padding: .55rem .75rem;
}

.past-challenge .daily-card-footer small {
    color: var(--bs-gray-600);
}

/* Títulos e textos gerais */
.daily-title {
    line-height: 1.3;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.daily-description {
    line-height: 1.5;
}

/* Botões */
.daily-actions .btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.daily-actions .btn:hover {
    transform: translateY(-2px);
}

/* Animação de pulso no botão do desafio atual */
.pulse-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 999px;
    background: rgba(var(--bs-warning-rgb), 0.3);
    animation: pulse 2s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
    }
}

/* Badges com z-index mais alto */
.position-absolute.z-3 {
    z-index: 3 !important;
}

/* Utilitários de cinza */
.bg-gray-100 { background-color: #f1f5f9 !important; }
.bg-gray-200 { background-color: #e2e8f0 !important; }
.bg-gray-500 { background-color: #64748b !important; }

/* Responsividade */
@media (max-width: 768px) {
    .daily-challenge-card {
        margin: 0 auto;
        max-width: 400px;
    }
    
    .daily-challenge-image {
        height: 180px !important;
    }
    
    .daily-card-content {
        padding: 1.5rem !important;
    }
    
    .daily-title {
        font-size: 1.4rem !important;
        min-height: 3rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .ended-ribbon {
        top: 10px;
        right: -48px;
        font-size: .6rem;
        padding: .3rem 3rem;
    }
}

@media (max-width: 576px) {
    .col-12.col-md-4.col-lg-4 {
        padding: 0 0.5rem;
    }
    
    .daily-challenge-image {
        height: 160px !important;
    }
    
    .daily-card-content {
        padding: 1.25rem !important;
    }
    
    .daily-title {
        font-size: 1.3rem !important;
        min-height: 2.8rem;
    }
}

/* ----------------------------
   MODO ESCURO
----------------------------- */
[data-bs-theme="dark"] .current-challenge {
    background: radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 60%),
                linear-gradient(135deg, var(--bs-primary) 0%, #8B5CF6 50%, var(--bs-info) 100%);
    box-shadow: 0 22px 50px rgba(0,0,0,0.85);
}

[data-bs-theme="dark"] .current-challenge .daily-card-footer {
    background: rgba(0,0,0,0.55) !important;
}

[data-bs-theme="dark"] .past-challenge {
    background: var(--bs-gray-900) !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.65);
}

[data-bs-theme="dark"] .past-challenge .daily-title {
    color: var(--bs-light) !important;
}

[data-bs-theme="dark"] .past-challenge .daily-description {
    color: var(--bs-gray-400) !important;
}

[data-bs-theme="dark"] .past-challenge .daily-card-footer {
    background: var(--bs-gray-800) !important;
}

[data-bs-theme="dark"] .past-challenge .daily-card-footer small {
    color: var(--bs-gray-400) !important;
}

/* Deixa um pouco menos "apagado" no dark pra não sumir demais */
[data-bs-theme="dark"] .past-challenge .daily-card-content,
[data-bs-theme="dark"] .past-challenge .daily-card-footer {
    opacity: 0.9;
}

[data-bs-theme="dark"] .date-badge {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .status-pill-past {
    background: rgba(51,65,85,0.8);
    color: #e5e7eb;
}

[data-bs-theme="dark"] .ended-ribbon {
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(55,65,81,0.95));
}

[data-bs-theme="dark"] .bg-gray-100 {
    background-color: var(--bs-gray-700) !important;
}

[data-bs-theme="dark"] .bg-gray-200 {
    background-color: var(--bs-gray-700) !important;
}

[data-bs-theme="dark"] .bg-gray-500 {
    background-color: var(--bs-gray-500) !important;
}