/* ============================================================
   Outcome Bar — global component
   ============================================================ */

.outcome_bar {
  --height: 28px;
  --glow-home: 0 0 16px #10b981aa;
  --glow-draw: 0 0 14px #9ca3af88;
  --glow-away: 0 0 16px #ec4899aa;

  display: flex;
  width: 100%;
  height: var(--height);
  border-radius: 9999px;
  overflow: hidden;
  margin: .35rem 0;
  background: linear-gradient(145deg, rgba(15,23,42,0.1) 0%, rgba(30,41,59,0.1) 100%);
  border: 1px solid rgba(59, 130, 246, 0.09);
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.65),
    inset 0 2px 0 rgba(255,255,255,0.05),
    inset 0 -3px 0 rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  position: relative;
}

/* Glow ambient global (léger halo autour de la barre) */
.outcome_bar::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.2) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.6s ease;
}

.outcome_bar:hover::before {
  opacity: 1;
}

/* Segments de base */
.outcome_bar-seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;                /* forcé #fff pur, jamais modifié */
  letter-spacing: 0.4px;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

/* Corrige les coins externes pendant hover/click */
.outcome_bar-seg:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.outcome_bar-seg:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Supprime border-radius sur les segments internes */
.outcome_bar-seg:not(:first-child):not(:last-child) {
  border-radius: 0;
}
/* Gradients */
/* .outcome_bar-seg:nth-child(1) {
  background: linear-gradient(90deg, #046c52 0%, #059669 35%, #10b981 70%, #34d399 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.24);
}

.outcome_bar-seg:nth-child(2) {
  background: linear-gradient(90deg, #2d3748 0%, #374151 35%, #4b5563 70%, #6b7280 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.16);
}

.outcome_bar-seg:nth-child(3) {
  background: linear-gradient(90deg, #831843 0%, #9d174d 35%, #be185d 70%, #ec4899 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22);
} */
.outcome_bar-seg:nth-child(1) {
  background: linear-gradient(90deg, rgba(144, 255, 0, 0.7) 0%, rgba(200, 255, 97, 0.7) 75%, rgba(200, 255, 97, 0.7) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22);
}
.outcome_bar-seg:nth-child(2) {
  background: linear-gradient(90deg, rgba(200, 255, 97, 0.7) 0%, rgba(255, 255, 193, 0.7) 50%, rgba(255, 255, 193, 0.7) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22);
}

.outcome_bar-seg:nth-child(3) {
  background: linear-gradient(90deg, rgba(255, 255, 193, 0.7) 0%, rgba(255, 182, 193, 0.7) 25%, rgba(255, 182, 193, 0.7) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.22);
}

/* Shine inner (reflet lumineux dynamique) */
.outcome_bar-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    transparent 0%,
    rgba(255,255,255,0.18) 30%,
    transparent 75%
  );
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.outcome_bar:hover .outcome_bar-seg::after {
  opacity: 1;
}

/* Glow néon au hover – seulement sur le fond, pas sur le texte */
.outcome_bar:hover .outcome_bar-seg:nth-child(1) { filter: brightness(1.20) drop-shadow(var(--glow-home)); }
.outcome_bar:hover .outcome_bar-seg:nth-child(2) { filter: brightness(1.16) drop-shadow(var(--glow-draw)); }
.outcome_bar:hover .outcome_bar-seg:nth-child(3) { filter: brightness(1.20) drop-shadow(var(--glow-away)); }

/* Séparateurs fins avec glow */
.outcome_bar-seg:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.40), transparent);
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}