/* =========================================================================
   tracker.css — Page « Classement & phase finale »
   Partagée par la Ligue des Champions (tracker.html) et l'Europa League
   (europa-classement.html).
   ========================================================================= */
/* ---- Classement -------------------------------------------------------- */
.standings{ width:100%; border-collapse:collapse; font-size:13.5px; overflow:hidden; }
.standings th, .standings td{ padding:9px 8px; text-align:center; white-space:nowrap; }
.standings thead th{ color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--line-2); }
.standings tbody tr{ border-bottom:1px solid var(--line); }
.standings tbody tr:hover{ background:rgba(255,255,255,.03); }
.standings td.club{ text-align:left; }
.standings .club-cell{ display:flex; align-items:center; gap:9px; }
.standings .club-cell .nm{ font-weight:700; }
.standings .tbl-cup{ font-size:11px; font-weight:800; color:var(--upcoming); margin-left:7px; white-space:nowrap; }
.standings td.pts{ font-weight:900; }
/* Chances de qualification (chances.js) : pourcentage et barre de fond. */
.standings th.ch{ cursor:help; }
.standings td.ch{ font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--muted);
  background:linear-gradient(90deg, rgba(var(--gold-rgb,245,181,10),.16) var(--p), transparent var(--p)); }
.standings td.ch.hi{ color:#5fdc97; } .standings td.ch.mid{ color:var(--txt); } .standings td.ch.xlo{ color:var(--muted-2); }
.standings td.pos{ font-weight:800; position:relative; padding-left:14px; }
.standings td.pos::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:3px; background:transparent; }
tr.z-q td.pos::before{ background:var(--zone-q); }
tr.z-po td.pos::before{ background:var(--zone-po); }
tr.z-out td.pos::before{ background:var(--zone-out); }
/* Club en train de jouer : pastille « ● score [logo adversaire] » collée au
   nom, score du point de vue du club. Rouge clair #ff8a95 sur le fond teinté : 6,7:1,
   niveau AA. */
.standings .live-pill{ display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:3px 6px 3px 8px; border-radius:999px; background:rgba(255,59,70,.16);
  font-size:12px; font-weight:800; color:#ff8a95; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; }
.standings .live-pill .lp-dot{ width:6px; height:6px; border-radius:50%; background:var(--live); animation:lpPulse 1.4s ease-in-out infinite; }
.standings .live-pill img{ width:16px; height:16px; object-fit:contain; }
@keyframes lpPulse{ 50%{ opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .standings .live-pill .lp-dot{ animation:none; } }
.standings td.gd.pos-v{ color:var(--finished); }
.standings td.gd.neg-v{ color:var(--live); }
/* Forme : 5 derniers résultats */
.standings td.form{ white-space:nowrap; }
.form-wrap{ display:inline-flex; gap:3px; }
.form-pill{ width:18px; height:18px; border-radius:5px; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.form-pill.f-w{ background:var(--finished); color:#04270f; }
.form-pill.f-d{ background:#caa53a; color:#1a1300; }
.form-pill.f-l{ background:var(--live); color:#fff; }
.form-none{ color:var(--muted-2); }
/* Ligne de l'équipe favorite (couleur du club) */
.standings tr.is-fav td{ background:rgba(var(--fav-rgb,245,181,10),.10); }
.standings tr.is-fav .nm{ color:rgb(var(--fav-rgb,245,181,10)); font-weight:800; }
.tbl-fav{ color:rgb(var(--fav-rgb,245,181,10)); margin-right:5px; }

.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted); }
.thr-note{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ---- Bracket cartes ---------------------------------------------------- */
.bracket-cards{ display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; }
.round-col{ min-width:230px; flex:1; }
.round-col h3{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 0 10px; text-align:center; }
.tie{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; margin-bottom:12px; position:relative; }
.tie.live{ border-color:var(--live); }
.tie.decided{ border-color:rgba(40,199,111,.4); }
.tie .row{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.tie .row .nm{ flex:1; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tie .row .sc{ font-weight:900; font-variant-numeric:tabular-nums; min-width:20px; text-align:right; }
.tie .row.win .nm{ color:#fff; }
.tie .row.lose{ opacity:.55; }
.tie .legs{ font-size:10.5px; color:var(--muted); margin-top:6px; text-align:center; }
.tie .pen-note{ color:var(--accent); font-weight:700; }

/* ---- Toggle vues ------------------------------------------------------- */
.view-toggle{ display:flex; gap:6px; }
#bracketTree{ overflow-x:auto; }
.brackets-viewer{ --primary-background:var(--card); --secondary-background:var(--bg-soft);
  --match-background:var(--card); --font-color:var(--txt); --win-color:var(--finished);
  --loss-color:var(--muted); --label-color:var(--muted); --hint-color:var(--muted-2);
  --connector-color:var(--line-2); --border-color:var(--line); }

/* ---- Champion ---------------------------------------------------------- */
.champion{
  display:none; align-items:center; gap:14px; margin-bottom:16px; padding:16px 18px;
  background:rgba(var(--gold-rgb,245,181,10),.08);
  border:1px solid rgba(var(--gold-rgb,245,181,10),.4); border-top:3px solid var(--upcoming); border-radius:12px;
}
.champion.show{ display:flex; }
.champion img{ width:48px; height:48px; object-fit:contain; }
.champion .lbl{ font-size:12px; color:var(--upcoming); font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.champion .nm{ font-size:22px; font-weight:900; }

/* ---- Widget live ------------------------------------------------------- */
#liveWidget{
  /* remonte au-dessus du footer quand il entre à l'écran (voir footer.js) */
  position:fixed; right:18px; bottom:calc(18px + var(--ldc-footer-overlap, 0px)); width:300px; z-index:60;
  background:var(--card); border:1px solid var(--line-2);
  border-radius:12px; overflow:hidden; transition:transform .2s;
}
#liveWidget.hidden{ transform:translateY(140%); }
#liveWidget .whead{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
#liveWidget .wclose{ margin-left:auto; cursor:pointer; color:var(--muted); border:none; background:none; font-size:16px; line-height:1; }
#liveWidget .wbody{ padding:12px; }
#liveWidget .wteams{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#liveWidget .wt{ display:flex; flex-direction:column; align-items:center; gap:4px; width:78px; }
#liveWidget .wt img{ width:34px; height:34px; object-fit:contain; }
#liveWidget .wt .ab{ font-weight:800; font-size:12px; }
#liveWidget .wscore{ font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; }
#liveWidget .wmeta{ text-align:center; margin-top:8px; font-size:11.5px; color:var(--muted); }
#liveWidget .wmeta .cd{ color:var(--upcoming); font-weight:800; }
#liveWidget .wdots{ display:flex; gap:4px; justify-content:center; margin-top:8px; }
#liveWidget .wdots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); }
#liveWidget .wdots i.on{ background:var(--txt); }
#widgetReopen{ position:fixed; right:18px; bottom:calc(18px + var(--ldc-footer-overlap, 0px)); z-index:59; display:none; }

#confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; display:none; }

/* ---- Évolution des positions (▲▼) ------------------------------------- */
.standings .pos .pd{ display:block; font-size:9px; font-weight:800; line-height:1; margin-top:2px; }
.standings .pos .pd.up{ color:var(--finished); }
.standings .pos .pd.dn{ color:var(--live); }

/* ---- Prédicteur de classement ----------------------------------------- */
.predict-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.predict-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#1a1300; background:var(--upcoming); padding:3px 9px; border-radius:999px; }
.predict-panel{ margin-top:14px; border-top:1px dashed var(--line-2); padding-top:14px; }
.predict-hint{ font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.predict-count{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--upcoming); margin-bottom:12px; }
.pm-list{ display:flex; flex-direction:column; gap:8px; }
.pm-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:8px 10px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; }
.pm-team{ display:flex; align-items:center; gap:8px; min-width:0; }
.pm-row .pm-team:last-child{ justify-content:flex-end; text-align:right; }
.pm-team img{ width:24px; height:24px; object-fit:contain; flex:none; }
.pm-nm{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-picks{ display:flex; gap:4px; }
.pm-pick{ width:34px; height:34px; border-radius:8px; border:1px solid var(--line-2); background:var(--card); color:var(--muted); font-family:inherit; font-weight:800; font-size:13px; cursor:pointer; transition:.12s; }
.pm-pick:hover{ color:var(--txt); border-color:rgba(var(--gold-rgb,245,181,10),.55); }
.pm-pick.active{ background:rgba(var(--gold-rgb,245,181,10),.18); border-color:rgb(var(--gold-rgb)); color:#fff; }

/* ---- Parcours vers la finale (bracket interactif) --------------------- */
.bracket-predict{ display:flex; flex-direction:column; gap:14px; }
#runBar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.run-hypo{ font-size:11px; color:var(--muted); border:1px dashed var(--line-2); border-radius:8px; padding:4px 9px; }
.run-copied{ font-size:12px; font-weight:800; color:var(--upcoming); }
.run-hint{ font-size:12.5px; color:var(--muted); }
.run-rounds{ display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; }
.run-rounds .round-col{ min-width:190px; }
.run-row{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer; transition:background .12s, box-shadow .12s; }
.run-row + .run-row{ margin-top:4px; }
.run-row .crest{ width:22px; height:22px; object-fit:contain; flex:none; }
.run-row .nm{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.run-row:hover{ background:rgba(var(--gold-rgb,245,181,10),.10); }
.run-row.picked{ background:rgba(var(--gold-rgb,245,181,10),.16); box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)); }
.run-row.picked .nm{ color:#fff; }
.run-row.empty{ opacity:.55; cursor:default; }
.run-row.empty .nm{ color:var(--muted); font-style:italic; }
.run-row:focus-visible{ outline:2px solid rgb(var(--gold-rgb)); outline-offset:1px; }
.run-champion{ display:none; align-items:center; gap:14px; padding:14px 18px; background:rgba(var(--gold-rgb,245,181,10),.10); border:1px dashed rgba(var(--gold-rgb,245,181,10),.5); border-radius:12px; }
.run-champion.show{ display:flex; }
.run-champion img{ width:46px; height:46px; object-fit:contain; }
.run-champion .lbl{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--upcoming); }
.run-champion .nm{ font-size:22px; font-weight:900; }

@media (max-width:720px){
  #liveWidget{ width:calc(100vw - 28px); right:14px; bottom:calc(14px + var(--ldc-footer-overlap, 0px)); }
  #widgetReopen{ right:14px; bottom:calc(14px + var(--ldc-footer-overlap, 0px)); }
  .view-toggle{ flex-wrap:wrap; }
}
@media (max-width:560px){
  .standings{ font-size:12px; }
  .standings th, .standings td{ padding:7px 5px; }
  .standings td.pos{ padding-left:11px; }
  .standings .club-cell{ gap:7px; }
  .standings .club-cell .nm{ font-weight:700; }
  .standings .tbl-cup{ margin-left:5px; font-size:10px; }
  .legend{ gap:8px 14px; font-size:11px; }
  .pm-row{ gap:6px; padding:7px 8px; } .pm-nm{ font-size:12px; } .pm-team img{ width:20px; height:20px; }
  .pm-pick{ width:30px; height:30px; font-size:12px; }
  .champion{ padding:12px 14px; gap:11px; }
  .champion img{ width:38px; height:38px; }
  .champion .nm{ font-size:18px; }
  .round-col{ min-width:200px; }
}