/* ===== La carte du duel =====
   Deuxième carte de la colonne de gauche. Le rival se voyait seulement
   dans une phrase du bilan ; ici il a une tête, un score, et une barre
   qui bascule quand il passe devant. */

.duel{
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line); box-shadow:var(--sh-2);
  padding:.9em 1em 1em; margin-top:12px;
}
.duel.is-out{ opacity:.72; }

.duel-t{
  font-family:var(--f-title); font-weight:800; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
  margin-bottom:.7em;
}

.duel-row{ display:flex; align-items:flex-start; gap:.5em; }
.duel-side{ flex:1; min-width:0; text-align:center; }
.duel-mid{ flex:none; display:grid; place-items:center; padding-top:1.1em; }
.duel-vs{
  font-family:var(--f-title); font-weight:900; font-size:.72rem;
  color:var(--txt-3); letter-spacing:.06em;
}

.duel-av{
  width:46px; height:46px; margin:0 auto; border-radius:13px; overflow:hidden;
  background:linear-gradient(150deg,var(--surface-3),var(--surface-2));
  border:2px solid var(--line-strong);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.duel-av svg{ width:100%; height:100%; display:block; }
.duel-av.is-lead{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,200,87,.16);
}

.duel-name{
  font-family:var(--f-title); font-weight:700; font-size:.78rem;
  margin-top:.4em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.duel-num{ font-family:var(--f-title); font-weight:900; font-size:1.05rem; }

/* la barre : ta part de l'audience cumulée des deux */
.duel-bar{
  position:relative; height:7px; border-radius:99px; margin:.8em 0 .55em;
  background:rgba(255,255,255,.09); overflow:hidden;
}
.duel-bar span{
  position:absolute; inset:0 auto 0 0; border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--gold));
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}

.duel-line{
  font-size:var(--fs-sm); text-align:center; color:var(--txt-2);
  min-height:1.3em;
}
.duel-line.is-win{ color:var(--good); font-weight:600; }
.duel-line.is-lose{ color:var(--bad); font-weight:600; }
.duel-line.is-flip{
  font-weight:800;
  animation:duel-flash .6s ease;
}
@keyframes duel-flash{
  0%{ transform:scale(.94); opacity:.4; }
  60%{ transform:scale(1.04); }
  100%{ transform:scale(1); opacity:1; }
}

.duel-foot{
  display:flex; justify-content:space-between; gap:.6em;
  margin-top:.7em; padding-top:.6em; border-top:1px solid var(--line);
  font-size:.7rem; color:var(--txt-3);
}
.duel-foot b{ color:var(--txt-1); font-family:var(--f-title); }

@media (max-width:900px){
  .duel{ padding:.75em .85em .85em; margin-top:10px; }
  .duel-av{ width:40px; height:40px; border-radius:11px; }
  .duel-num{ font-size:.95rem; }
  .duel-name{ font-size:.72rem; }
}
@media (prefers-reduced-motion:reduce){
  .duel-line.is-flip{ animation:none; }
  .duel-bar span{ transition:none; }
}