/* KICKOFF · duel.css : écran « Duel de clubs » (jeu communautaire).
   Réutilise .card/.btn/.pill/.crest/.kicker/.stat de tokens.css + app.css.
   Motion : transform/opacity + width de la jauge (transition douce). */

.du-wrap { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 16px; position: relative; }

/* ---- face-à-face ---- */
.du-face { overflow: hidden; }
.du-face-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.du-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
.du-team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; transition: transform .3s ease; }
.du-team.is-lead { transform: translateY(-2px); }
.du-tshort { font-size: 22px; letter-spacing: .02em; }
.du-tname { font-size: 11.5px; color: var(--muted); line-height: 1.25; max-width: 12ch; }
.du-team.is-mine .du-tshort { color: var(--txt); }
.du-flag {
  font-family: var(--disp); font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: 9px; letter-spacing: .12em; color: var(--red-glow);
  background: rgba(232,0,13,.14); border: 1px solid rgba(232,0,13,.4);
  padding: 2px 8px; border-radius: 999px;
}

.du-vs { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding-top: 8px; }
.du-score {
  font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 34px;
  color: var(--txt); font-variant-numeric: tabular-nums; display: inline-block;
}
.du-slash { font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 26px; color: var(--red); text-shadow: 0 0 12px rgba(232,0,13,.8); }

/* ---- jauge de rapport de force ---- */
.du-gauge {
  position: relative; display: flex; height: 15px; margin-top: 16px;
  border-radius: 999px; overflow: hidden;
  background: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
}
.du-fill { height: 100%; transition: width .6s cubic-bezier(.16,1,.3,1); min-width: 0; }
.du-fill-a { border-right: 1px solid rgba(0,0,0,.4); }
.du-seam {
  position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px;
  transform: translateX(-50%); background: rgba(244,244,246,.18); pointer-events: none;
}
.du-pcts {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 13px; color: var(--txt);
}
.du-support { font-family: var(--body); font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--muted); text-align: center; }
.du-support b { color: var(--txt); font-weight: 700; }
.du-timer { text-align: center; margin-top: 12px; font-size: 12.5px; }
.du-timer b { font-variant-numeric: tabular-nums; }

/* ---- action : renfort ---- */
.du-act { display: flex; flex-direction: column; gap: 8px; }
.du-act-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted); padding: 0 2px; gap: 10px; }
.du-act-meta b { font-variant-numeric: tabular-nums; }

.du-locked { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.du-locked-txt { font-size: 13px; color: var(--muted); max-width: 32ch; line-height: 1.5; }
.du-mine { font-size: 12.5px; margin-top: 2px; }

/* ---- ma contribution ---- */
.du-contrib { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.du-contrib-l { display: flex; align-items: center; gap: 12px; }
.du-contrib-t { font-size: 14px; }

/* ---- règle ---- */
.du-rule p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 6px; }

/* ---- effets ---- */
.du-punch { animation: koNumPunch .42s cubic-bezier(.16,1,.3,1); }
.du-gain {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 26px;
  color: var(--gold); text-shadow: 0 2px 14px rgba(244,195,59,.6);
  pointer-events: none; z-index: 5; animation: duGainFly .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes duGainFly {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); }
  30% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .du-fill { transition: none; }
  .du-team, .du-team.is-lead { transition: none; transform: none; }
  .du-punch, .du-gain { animation: none; }
  .du-gain { display: none; }
}