/* ============================================
   Badge Component
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  line-height: 1.6;
}

.badge .icon {
  width: 12px;
  height: 12px;
}

/* ---- Color Variants ---- */
.badge--primary {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary-light);
}

.badge--green {
  background: rgba(var(--color-green-rgb), 0.15);
  color: var(--color-green);
}

.badge--gold {
  background: rgba(var(--color-gold-rgb), 0.15);
  color: var(--color-gold);
}

.badge--red {
  background: rgba(var(--color-red-rgb), 0.15);
  color: var(--color-red);
}

.badge--cyan {
  background: rgba(var(--color-cyan-rgb), 0.15);
  color: var(--color-cyan);
}

/* ---- Category Badges ---- */
.badge--kids { background: rgba(255, 107, 157, 0.15); color: #FF6B9D; }
.badge--racing { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.badge--puzzle { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.badge--arcade { background: rgba(var(--color-primary-rgb), 0.15); color: var(--color-primary-light); }
.badge--2player { background: rgba(var(--color-cyan-rgb), 0.15); color: var(--color-cyan); }
.badge--memory { background: rgba(var(--color-green-rgb), 0.15); color: var(--color-green); }
.badge--word { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
.badge--educational { background: rgba(20, 184, 166, 0.15); color: #14B8A6; }
.badge--speed { background: rgba(244, 63, 94, 0.15); color: #F43F5E; }
.badge--brain { background: rgba(168, 85, 247, 0.15); color: #A855F7; }

/* ---- Premium Badge ---- */
.badge--premium {
  background: linear-gradient(135deg, var(--color-gold), #FFD060);
  color: #1A1A2E;
}

/* ---- Notification Dot ---- */
.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-red);
  animation: notificationPulse 2s ease-in-out infinite;
}