/**
 * Role Badges - Styles centralisés pour les badges de grade
 * À inclure dans toutes les pages affichant des badges de rôle
 */

/* Animations de pulsation et scintillement */
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor; }
}
@keyframes badge-sparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}
@keyframes badge-pulse-sparkle {
  0%, 100% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; filter: brightness(1); }
  25% { filter: brightness(1.3); }
  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; filter: brightness(1.5); }
  75% { filter: brightness(1.2); }
}

/* Badge de base */
.guild-role-badge,
.badge-role {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(96,165,250,0.3), rgba(110,231,183,0.3));
  color: #a5f3fc;
}

/* Marchant - Jaune basique */
.guild-role-badge.merchant-role,
.badge-role.merchant-role {
  background: linear-gradient(90deg, rgba(251,191,36,0.5), rgba(245,158,11,0.5));
  color: #fcd34d;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Premier Orateur - Rouge avec pulsation */
.guild-role-badge.first-orator-role,
.badge-role.first-orator-role {
  background: linear-gradient(90deg, rgba(220,38,38,0.6), rgba(239,68,68,0.6));
  color: #ff6b6b;
  font-weight: 700;
  animation: badge-pulse 2s ease-in-out infinite;
  text-shadow: 0 0 10px #ff6b6b;
}

/* Deuxieme Orateur - Or scintillant */
.guild-role-badge.second-orator-role,
.badge-role.second-orator-role {
  background: linear-gradient(90deg, rgba(255,215,0,0.6), rgba(255,193,7,0.6));
  color: #ffd700;
  font-weight: 700;
  animation: badge-sparkle 1.5s ease-in-out infinite;
  text-shadow: 0 0 8px #ffd700;
}

/* Troisieme Orateur - Vert scintillant */
.guild-role-badge.third-orator-role,
.badge-role.third-orator-role {
  background: linear-gradient(90deg, rgba(34,197,94,0.6), rgba(74,222,128,0.6));
  color: #4ade80;
  font-weight: 700;
  animation: badge-sparkle 1.5s ease-in-out infinite;
  text-shadow: 0 0 8px #4ade80;
}

/* Grand Chasseur - Bordeaux avec pulsation & scintillance */
.guild-role-badge.grand-hunter-role,
.badge-role.grand-hunter-role {
  background: linear-gradient(90deg, rgba(127,29,29,0.7), rgba(153,27,27,0.7));
  color: #f87171;
  font-weight: 700;
  animation: badge-pulse-sparkle 2s ease-in-out infinite;
  text-shadow: 0 0 10px #dc2626;
  border: 1px solid rgba(220,38,38,0.5);
}

/* Pionnier - Blanc avec écriture visible */
.guild-role-badge.pioneer-role,
.badge-role.pioneer-role {
  background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(226,232,240,0.2));
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.4);
}

/* Maitre de guerre - Violet scintillant */
.guild-role-badge.war-master-role,
.badge-role.war-master-role {
  background: linear-gradient(90deg, rgba(139,92,246,0.6), rgba(168,85,247,0.6));
  color: #c4b5fd;
  font-weight: 700;
  animation: badge-sparkle 1.5s ease-in-out infinite;
  text-shadow: 0 0 10px #a855f7;
}

/* Guerrier - Bleu basique */
.guild-role-badge.warrior-role,
.badge-role.warrior-role {
  background: linear-gradient(90deg, rgba(59,130,246,0.5), rgba(96,165,250,0.5));
  color: #93c5fd;
  font-weight: 600;
}

/* Webmaster - Avec pulsation et scintillance */
.guild-role-badge.webmaster-role,
.badge-role.webmaster-role {
  background: linear-gradient(90deg, rgba(236,72,153,0.6), rgba(219,39,119,0.6));
  color: #f472b6;
  font-weight: 700;
  animation: badge-pulse-sparkle 2s ease-in-out infinite;
  text-shadow: 0 0 10px #ec4899;
  border: 1px solid rgba(236,72,153,0.5);
}

/* Prince Marchant - Or scintillant avec pulsation */
.guild-role-badge.prince-merchant-role,
.badge-role.prince-merchant-role {
  background: linear-gradient(90deg, rgba(255,215,0,0.6), rgba(255,193,7,0.6));
  color: #ffd700;
  font-weight: 700;
  animation: badge-pulse-sparkle 2s ease-in-out infinite;
  text-shadow: 0 0 12px #ffd700;
  border: 1px solid rgba(255,215,0,0.5);
}

/* Chasseur - Vert basique */
.guild-role-badge.hunter-role,
.badge-role.hunter-role {
  background: linear-gradient(90deg, rgba(34,197,94,0.4), rgba(74,222,128,0.4));
  color: #4ade80;
  font-weight: 600;
}

/* Essaie - Gris sobre */
.guild-role-badge.trial-role,
.badge-role.trial-role {
  background: linear-gradient(90deg, rgba(107,114,128,0.4), rgba(156,163,175,0.4));
  color: #d1d5db;
  font-weight: 500;
}

/* ========================================
   BADGE STREAMER TWITCH - Design Violet/Pourpre
   ======================================== */
@keyframes twitch-glow {
  0%, 100% { 
    box-shadow: 0 0 8px #9146ff, 0 0 15px rgba(145, 70, 255, 0.5); 
    filter: brightness(1);
  }
  50% { 
    box-shadow: 0 0 15px #9146ff, 0 0 30px rgba(145, 70, 255, 0.7), 0 0 45px rgba(145, 70, 255, 0.3); 
    filter: brightness(1.2);
  }
}

.guild-role-badge.streamer-role,
.badge-role.streamer-role {
  background: linear-gradient(135deg, rgba(145, 70, 255, 0.7), rgba(100, 65, 165, 0.7));
  color: #bf94ff;
  font-weight: 700;
  animation: twitch-glow 2s ease-in-out infinite;
  text-shadow: 0 0 10px #9146ff;
  border: 1px solid rgba(145, 70, 255, 0.6);
  position: relative;
  overflow: hidden;
}

.guild-role-badge.streamer-role::before,
.badge-role.streamer-role::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer-streamer 3s linear infinite;
}

@keyframes shimmer-streamer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Badge Discord (pour les sujets synchronisés) */
.guild-role-badge.discord-role,
.badge-role.discord-role {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.6), rgba(69, 79, 191, 0.6));
  color: #7289da;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(88, 101, 242, 0.5);
}