/**
 * RSite — Novelle Page  v1.0
 * Depends on: base.css (variables)
 *
 * Weekly bonus grid and achievement showcase styles.
 */

/* Weekly bonus grid */
.weekly-bonus-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-sm);
}

.bonus-day {
    text-align: center;
    padding: 14px 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.2);
    transition: all var(--duration-fast) ease;
}

.bonus-day.earned {
    border-color: rgba(212, 175, 55, 0.15);
    background: rgba(212, 175, 55, 0.06);
}

.bonus-day.current {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
    animation: bonus-pulse 2s ease-in-out infinite;
}

.bonus-day.grand {
    border-color: rgba(212, 175, 55, 0.25);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
}

.bonus-day-num {
    font-family: var(--font-heading);
    font-size: 1em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.bonus-day.earned .bonus-day-num,
.bonus-day.current .bonus-day-num {
    color: var(--gold-accent);
}

.bonus-day-icon {
    font-size: 1.6em;
    margin-bottom: 4px;
}

.bonus-day:not(.earned):not(.current) .bonus-day-icon {
    opacity: 0.3;
}

.bonus-day-label {
    font-size: 0.65em;
    color: var(--text-muted);
}

.bonus-day.current .bonus-day-label {
    color: var(--gold-accent);
}

@keyframes bonus-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.15); }
    50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
}

@media (max-width: 500px) {
    .weekly-bonus-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}