/**
 * 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 var(--border-faint);
    background: var(--surface-overlay-light);
    transition: all var(--duration-fast) ease;
}

.bonus-day.earned {
    border-color: var(--accent-bg-hover);
    background: var(--accent-bg);
}

.bonus-day.current {
    border-color: var(--accent-border-active);
    background: var(--accent-glow-sm);
    box-shadow: 0 0 12px var(--accent-glow-md);
    animation: bonus-pulse 2s ease-in-out infinite;
}

.bonus-day.grand {
    border-color: var(--accent-glow-lg);
    background: linear-gradient(135deg, var(--accent-bg), var(--accent-glow-sm));
}

.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 var(--accent-glow-md); }
    50% { box-shadow: 0 0 20px var(--accent-glow-lg); }
}

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