/* ==================== BADGE VARIANTS ==================== */
/* Base .card-status is defined elsewhere */

/* --- Specializations --- */
.card-status.elite {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

.card-status.dev {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.card-status.ai {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.card-status.perf {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
}

.card-status.realtime {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.card-status.ui {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}

.card-status.architect {
  background: rgba(20, 184, 166, 0.2);
  color: #2dd4bf;
}

/* --- Special Gradient / Glow Badges --- */
.card-status.origin {
  background: linear-gradient(45deg, #22c55e, #06b6d4);
  color: black;
}

.card-status.trusted {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

.card-status.join {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.4);
}

.card-status.next {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.4);
}

.card-status.glow {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6),
              0 0 16px rgba(34, 197, 94, 0.3);
}

/* --- Mythic Animated Badge --- */
.card-status.mythic {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7a00,
    #ffee00,
    #00ff88,
    #00cfff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  background-size: 200% 100%;
  animation: rainbowFlow 4s linear infinite,
             mythicPulse 2.5s ease-in-out infinite;
  color: white;
  border: 1px solid #ffffff;
}

/* --- Keyframes --- */
@keyframes rainbowFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes mythicPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.6),
                0 0 20px rgba(168, 85, 247, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.9),
                0 0 35px rgba(168, 85, 247, 0.6);
  }
}