/* Classic Ludo - Phase 5 Filter & Category UI Styling */

.filter-pills-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.filter-pill {
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

.filter-pill.active {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
  border-color: #3B82F6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.retention-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.retention-day-card {
  padding: 10px 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  text-align: center;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.retention-day-card.claimed {
  background: rgba(46, 204, 113, 0.2);
  border-color: #2ECC71;
  color: #2ECC71;
}

.retention-day-card.today {
  box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
  border-color: #F1C40F;
}