/* ===========================================================================
   BetRecord — feuille de style des donnees LIVE
   ---------------------------------------------------------------------------
   Couvre tous les composants releves sur les 117 captures Flashscore/Sofascore
   (foot + tennis) : barres de comparaison, jauges, shotmap, heatmap, matrice
   de scores, tableaux tennis, blocs IA.

   Depend de la charte du projet : les jetons --bg/--card/--border/--text/...
   sont ceux de dashboard.html, matchs.html et report.html. Ils sont redefinis
   ici en repli pour que la page reste lisible si elle est servie seule.

   Convention : prefixe .lv- partout, pour ne jamais entrer en collision avec
   les styles inline des pages existantes.
   =========================================================================== */

/* Charte betsrecord.com — jetons repris a l'identique de public/landing/,
   pour que la page live ne detonne pas avec le site public. */
:root {
  --bg-0: #0d1013;
  --bg-1: #161a1e;
  --bg-2: #1c2229;
  --bg-3: #262d36;
  --bg-4: #303842;
  --card-grad-top: #232a33;
  --card-grad-bot: #191d24;
  --border: #2a323b;
  --border-2: #3a434f;
  --ink-1: #ffffff;
  --ink-2: #b8c0cb;
  --ink-3: #7a8494;
  --ink-4: #4f5866;
  --wina-red: #e60028;
  --wina-gold: #f2b437;
  --gold-2: #d99d1f;
  --live: #ff2d55;
  --up: #22d97e;
  --down: #ef4444;
  --accent: #00d97e;
  --warn: #e08b18;
  --radius: 12px;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --subnav-bg: #333b47;

  /* Alias : le reste de cette feuille est ecrit avec ces noms-la. */
  --bg: var(--bg-0);
  --card: var(--bg-1);
  --card2: var(--bg-2);
  --text: var(--ink-1);
  --muted: var(--ink-3);
  --dim: var(--ink-4);
  --green: var(--up);
  --red: var(--down);
  --gold: var(--wina-gold);
  --blue: #4a90d9;
  --purple: #a855f7;
  --cyan: var(--accent);

  /* Une couleur par camp, tenue sur toute la page : vert de la charte pour le
     domicile, or de la charte pour l'exterieur — les deux se distinguent
     encore en vision dichromate, ce que vert/rouge ne ferait pas. */
  --lv-home: var(--accent);
  --lv-away: var(--wina-gold);
  --lv-home-dim: rgba(0, 217, 126, .22);
  --lv-away-dim: rgba(242, 180, 55, .22);
  --lv-neutral: var(--bg-4);
  --lv-live: var(--live);

  --lv-radius: var(--radius);
  --lv-gap: 14px;
  --lv-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               system-ui, sans-serif;
  --lv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ---------- Coquille de page ------------------------------------------- */

.lv-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 14px 64px;
}

.lv-card {
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bot));
  border: 1px solid var(--border);
  border-radius: var(--lv-radius);
  padding: 16px;
  margin-bottom: var(--lv-gap);
}

.lv-card > h3,
.lv-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wina-red);
  font-weight: 900;
}

.lv-sub {
  font-size: 12px;
  color: var(--muted);
  margin: -8px 0 14px;
}

/* ---------- En-tete de match ------------------------------------------- */

.lv-head {
  background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bot));
  border: 1px solid var(--border);
  border-radius: var(--lv-radius);
  padding: 18px 16px;
  margin-bottom: var(--lv-gap);
}

.lv-head-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Pastille "en direct" : le point qui bat est le seul mouvement de la page,
   pour que l'oeil sache tout de suite si la donnee est vivante. */
.lv-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 45, 85, .16);
  color: var(--lv-live);
  font-weight: 700;
}

.lv-badge-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lv-live);
  animation: lv-pulse 1.4s ease-in-out infinite;
}

@keyframes lv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.lv-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.lv-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.lv-team img,
.lv-team .lv-crest {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--card2);
}

.lv-team-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.lv-team-sub {
  font-size: 11px;
  color: var(--muted);
}

.lv-score {
  font-family: var(--lv-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  white-space: nowrap;
}

.lv-clock {
  font-size: 12px;
  color: var(--lv-live);
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
}

/* Badges d'en-tete tennis : tete de serie, classement, drapeau */
.lv-seed {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #04121f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.lv-rank {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--lv-mono);
}

/* Score tennis par set : la colonne du set en cours est mise en avant, le
   tie-break passe en rouge comme dans l'app. */
.lv-sets {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--lv-mono);
  font-size: 18px;
}

.lv-sets .lv-set { min-width: 18px; text-align: center; color: var(--muted); }
.lv-sets .lv-set.won { color: var(--text); font-weight: 700; }
.lv-sets .lv-set.current { color: var(--green); font-weight: 700; }
.lv-sets .lv-set.tiebreak {
  background: var(--lv-live);
  color: #fff;
  border-radius: 4px;
  padding: 0 4px;
}

/* Balle de service */
.lv-serve::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ---------- Selecteurs de periode / onglets ----------------------------- */

.lv-pills {
  display: flex;
  gap: 8px;
  margin-bottom: var(--lv-gap);
  overflow-x: auto;
  scrollbar-width: none;
}

.lv-pills::-webkit-scrollbar { display: none; }

.lv-pill {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.lv-pill {
  background: var(--bg-2);
  transition: all .16s var(--easing);
}

.lv-pill:hover { border-color: var(--ink-3); color: var(--ink-1); }

.lv-pill[aria-selected="true"] {
  background: #fff;
  border-color: #fff;
  color: #10151a;
  font-weight: 700;
}

.lv-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--lv-gap);
  overflow-x: auto;
  scrollbar-width: none;
}

.lv-tabs::-webkit-scrollbar { display: none; }

.lv-tab {
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}

.lv-tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--wina-red);
}

/* ---------- Ligne de comparaison (le composant central) ----------------- */
/* Valeur gauche — libelle centre — valeur droite, puis deux barres qui
   partent du centre. C'est la brique de toutes les stats a deux camps :
   Flashscore "Top stats/Shots/Attack/Passes/Defense/Goalkeeping" et
   Sofascore "Apercu du match/Tirs/Attaque/Passes/Duels/Defense/Gardien". */

.lv-stat {
  padding: 9px 0;
  border-bottom: 1px solid rgba(45, 49, 66, .5);
}

.lv-stat:last-child { border-bottom: 0; }

.lv-stat-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.lv-stat-val {
  font-family: var(--lv-mono);
  font-size: 15px;
  font-weight: 700;
}

.lv-stat-val.home { text-align: left; }
.lv-stat-val.away { text-align: right; }

/* La fraction sous le pourcentage : "84%" puis "(248/294)" */
.lv-stat-val small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.lv-stat-label {
  font-size: 13px;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
}

/* Metrique avancee : libelle cliquable + infobulle, comme le ⓘ de Sofascore */
.lv-stat-label .lv-info {
  color: var(--blue);
  cursor: help;
  border-bottom: 1px dotted currentColor;
}

.lv-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 6px;
}

.lv-bar {
  background: var(--lv-neutral);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

/* La barre domicile se remplit vers la gauche (depuis le centre) */
.lv-bar.home > i {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--lv-home);
  border-radius: 3px;
  display: block;
  transition: width .45s ease;
}

.lv-bar.away > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--lv-away);
  border-radius: 3px;
  display: block;
  transition: width .45s ease;
}

/* Le camp qui perd la ligne s'attenue : lecture instantanee du gagnant */
.lv-stat[data-winner="home"] .lv-bar.away > i { opacity: .4; }
.lv-stat[data-winner="away"] .lv-bar.home > i { opacity: .4; }

/* ---------- Barre empilee (possession, duels) --------------------------- */

.lv-split {
  display: flex;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--lv-mono);
  font-size: 12px;
  font-weight: 700;
}

.lv-split > span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  transition: width .45s ease;
}

.lv-split .home { background: var(--lv-home); color: #04240f; }
.lv-split .away { background: var(--lv-away); color: #16042a; justify-content: flex-end; }

/* ---------- Jauges circulaires (paires) --------------------------------- */
/* Sofascore : "Passes dans le tiers offensif 141/174 81% | 49% 37/76" */

.lv-donuts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(45, 49, 66, .5);
}

.lv-donut-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lv-donut-side.away { flex-direction: row-reverse; }

.lv-donut {
  --pct: 0;
  --col: var(--lv-home);
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--lv-mono);
  font-size: 11px;
  font-weight: 700;
  /* conic-gradient : une jauge sans SVG ni bibliotheque */
  background: conic-gradient(var(--col) calc(var(--pct) * 1%), var(--lv-neutral) 0);
  position: relative;
}

.lv-donut::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--card);
}

.lv-donut > span { position: relative; }

.lv-donut.away { --col: var(--lv-away); }

.lv-donut-ratio {
  font-family: var(--lv-mono);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Carte des tirs (shotmap) ------------------------------------ */

.lv-shotmap {
  position: relative;
  background: linear-gradient(180deg, #1d3b28, #17301f);
  border: 1px solid var(--border);
  border-radius: 10px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.lv-shotmap svg { width: 100%; height: 100%; display: block; }

/* Une bulle par tir, rayon proportionnel au xG */
.lv-shot {
  cursor: pointer;
  transition: transform .15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.lv-shot:hover { transform: scale(1.25); }
.lv-shot.goal { fill: var(--green); stroke: #fff; stroke-width: 2; }
.lv-shot.saved { fill: rgba(255, 255, 255, .55); stroke: #fff; stroke-width: 1; }
.lv-shot.missed { fill: rgba(255, 255, 255, .28); stroke: rgba(255,255,255,.6); }
.lv-shot.blocked { fill: rgba(255, 255, 255, .18); stroke: rgba(255,255,255,.45); }
.lv-shot.selected { stroke: #fff; stroke-width: 3; }

/* Fiche du tir : xG, xGOT, Resultat, Situation, Type de tir, Zone de but */
.lv-shot-card {
  margin-top: 12px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.lv-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lv-shot-head img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.lv-shot-player { font-weight: 700; flex: 1; }

.lv-shot-min {
  font-family: var(--lv-mono);
  font-weight: 700;
  color: var(--gold);
}

.lv-nav {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.lv-nav:disabled { opacity: .35; cursor: default; }

.lv-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  text-align: center;
}

.lv-shot-grid dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 3px;
}

.lv-shot-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--lv-mono);
}

/* ---------- Heatmap de terrain ------------------------------------------ */

.lv-heatmap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  aspect-ratio: 3 / 2;
  background: #17301f;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}

.lv-heatmap > i {
  --v: 0;                       /* 0 a 1 : densite d'actions de la zone */
  display: block;
  border-radius: 3px;
  background: rgba(0, 210, 106, calc(.06 + var(--v) * .74));
}

.lv-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

.lv-legend .lv-ramp {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,210,106,.08), rgba(0,210,106,.8));
}

/* ---------- Repartition des passes par tiers ---------------------------- */

.lv-thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.lv-thirds > div {
  display: grid;
  place-items: center;
  font-family: var(--lv-mono);
  font-size: 18px;
  font-weight: 700;
  color: #04240f;
}

.lv-thirds > div:nth-child(1) { background: rgba(0, 210, 106, .55); }
.lv-thirds > div:nth-child(2) { background: rgba(120, 220, 90, .72); }
.lv-thirds > div:nth-child(3) { background: rgba(255, 215, 0, .78); }

/* ---------- Matrice des scores exacts ----------------------------------- */
/* "Probabilite du resultat" : 6x6, buts domicile en lignes 5->0,
   buts exterieur en colonnes 0->5. */

.lv-matrix {
  display: grid;
  grid-template-columns: auto repeat(6, 1fr);
  gap: 3px;
  font-family: var(--lv-mono);
  font-size: 10px;
}

.lv-matrix .lv-axis {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
}

.lv-matrix .lv-cell {
  --p: 0;                       /* probabilite normalisee 0..1 */
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(74, 158, 255, calc(.05 + var(--p) * .85));
  color: var(--text);
}

.lv-matrix .lv-cell.top {
  outline: 2px solid var(--gold);
  font-weight: 700;
}

.lv-matrix-legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Probabilites 1 N 2 / duel de pourcentages ------------------- */

.lv-odds3 {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.lv-odds3 .lv-p {
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--card2);
  font-family: var(--lv-mono);
  font-weight: 700;
}

.lv-odds3 .lv-p.best { background: rgba(255, 215, 0, .18); color: var(--gold); }

.lv-odds3 img { width: 30px; height: 30px; object-fit: contain; }

/* Duel tennis : photo — 46% | 54% — photo */
.lv-duel {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.lv-duel img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lv-duel .lv-pct { font-family: var(--lv-mono); font-size: 22px; font-weight: 700; }
.lv-duel .lv-pct.home { color: var(--lv-home); text-align: right; }
.lv-duel .lv-pct.away { color: var(--lv-away); text-align: left; }
.lv-duel .lv-sep { color: var(--dim); }

/* Verdict du pronostic verifie apres coup */
.lv-verdict {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 210, 106, .14);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.lv-verdict.ko { background: rgba(239, 68, 68, .14); color: var(--down); }

/* ---------- Barres de probabilite simples (scores possibles) ------------ */

.lv-prob {
  display: grid;
  grid-template-columns: 62px 1fr 52px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.lv-prob .lv-sc {
  font-family: var(--lv-mono);
  font-size: 14px;
  font-weight: 700;
}

.lv-prob .lv-track {
  height: 7px;
  border-radius: 4px;
  background: var(--lv-neutral);
  overflow: hidden;
}

.lv-prob .lv-track > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--blue);
  transition: width .45s ease;
}

.lv-prob .lv-pv {
  font-family: var(--lv-mono);
  font-size: 13px;
  text-align: right;
  color: var(--muted);
}

/* ---------- Liste cle -> valeur (pronostic IA) -------------------------- */

.lv-kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(45, 49, 66, .5);
  font-size: 13px;
}

.lv-kv:last-child { border-bottom: 0; }
.lv-kv dt { color: var(--muted); }
.lv-kv dd { margin: 0; font-weight: 700; font-family: var(--lv-mono); }

/* ---------- Blocs narratifs (AI Insights) ------------------------------- */

.lv-prose h4 {
  margin: 18px 0 6px;
  font-size: 14px;
  color: var(--text);
}

.lv-prose p,
.lv-prose li {
  font-size: 13px;
  line-height: 1.65;
  color: #C8CCD8;
}

.lv-prose ul { margin: 6px 0; padding-left: 18px; }

.lv-disclaimer {
  margin-top: 16px;
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
}

/* ---------- Chronologie des faits de match ------------------------------ */

.lv-timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }

.lv-timeline > li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(45, 49, 66, .5);
  font-size: 13px;
}

.lv-timeline > li.away { grid-template-columns: 46px 1fr; text-align: right; }
.lv-timeline .lv-min { font-family: var(--lv-mono); color: var(--wina-red); font-weight: 700; }

/* ---------- Formes recentes W / N / D ----------------------------------- */

.lv-form { display: flex; gap: 5px; }

.lv-form > b {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.lv-form > b.w { background: rgba(0, 210, 106, .2); color: var(--green); }
.lv-form > b.d { background: rgba(139, 143, 163, .2); color: var(--muted); }
.lv-form > b.l { background: rgba(255, 71, 87, .2); color: var(--red); }

/* ---------- Cotes : cote = proba implicite + taux reel ------------------ */

.lv-oddsrow {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(45, 49, 66, .5);
  font-size: 13px;
}

.lv-oddsrow .lv-o { font-family: var(--lv-mono); font-weight: 700; }
.lv-oddsrow .lv-imp { font-family: var(--lv-mono); color: var(--muted); }

.lv-wbadge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--lv-mono);
  background: rgba(139, 143, 163, .18);
  color: var(--muted);
}

.lv-wbadge.good { background: rgba(255, 215, 0, .18); color: var(--gold); }

/* ---------- Tableau tennis ---------------------------------------------- */
/* Meme brique .lv-stat, mais les valeurs sont du "38/62 (61%)" : on garde
   le monospace pour que les fractions s'alignent verticalement. */

.lv-tennis .lv-stat-val { font-size: 14px; }

/* ---------- Radar joueur (ATT/TEC/TAC/DEF/CRE) -------------------------- */

.lv-radar { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.lv-radar .grid { fill: none; stroke: var(--border); stroke-width: 1; }
.lv-radar .axis { stroke: var(--border); stroke-width: 1; }
.lv-radar .poly-home { fill: rgba(0, 210, 106, .22); stroke: var(--lv-home); stroke-width: 2; }
.lv-radar .poly-away { fill: rgba(168, 85, 247, .22); stroke: var(--lv-away); stroke-width: 2; }
.lv-radar text { fill: var(--muted); font-size: 10px; }

/* ---------- Note de joueur / d'equipe ----------------------------------- */

.lv-rating {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 6px;
  font-family: var(--lv-mono);
  font-size: 12px;
  font-weight: 700;
  color: #04121f;
  background: var(--muted);
}

.lv-rating.high { background: var(--green); }
.lv-rating.mid { background: var(--gold); }
.lv-rating.low { background: var(--red); color: #fff; }

/* ---------- Etats : chargement, vide, obsolete -------------------------- */

.lv-skeleton {
  background: linear-gradient(90deg, var(--card2) 25%, #2b3044 50%, var(--card2) 75%);
  background-size: 200% 100%;
  animation: lv-shimmer 1.3s linear infinite;
  border-radius: 6px;
  height: 12px;
}

@keyframes lv-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lv-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
  font-size: 13px;
}

/* Fraicheur : une donnee live qui date n'a pas le droit de passer pour fraiche */
.lv-stale {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 45, 85, .16);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Sources ------------------------------------------------------ */

.lv-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--dim);
}

.lv-source::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Petits ecrans ------------------------------------------------ */

@media (max-width: 560px) {
  .lv-wrap { padding: 12px 10px 48px; }
  .lv-score { font-size: 28px; }
  .lv-team img, .lv-team .lv-crest { width: 42px; height: 42px; }
  .lv-stat-label { font-size: 12px; }
  .lv-shot-grid { grid-template-columns: repeat(2, 1fr); }
  .lv-matrix { font-size: 9px; }
}

/* ---------- Accessibilite ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lv-badge-live::before,
  .lv-skeleton { animation: none; }
  .lv-bar > i,
  .lv-split > span,
  .lv-prob .lv-track > i { transition: none; }
}

.lv-pill:focus-visible,
.lv-tab:focus-visible,
.lv-nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ---------- Liste des matchs en direct ---------------------------------- */

.lv-liste { display: flex; flex-direction: column; gap: 1px; }

.lv-ligne {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: var(--bg-1);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink-1);
  transition: background .14s var(--easing);
}

.lv-ligne:hover { background: var(--bg-3); }

.lv-ligne[aria-current="true"] {
  background: var(--bg-3);
  box-shadow: inset 3px 0 0 var(--wina-red);
}

/* La minute : c'est la premiere chose que l'oeil cherche dans une liste live. */
.lv-ligne .lv-min-live {
  font-family: var(--lv-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--live);
  white-space: nowrap;
}

.lv-ligne .lv-equipes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lv-ligne .lv-eq {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lv-ligne .lv-eq.perd { color: var(--ink-3); font-weight: 500; }

.lv-ligne .lv-sc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--lv-mono);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.lv-ligne .lv-tournoi {
  grid-column: 2 / -1;
  font-size: 10.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pastille de profondeur : combien d'endpoints ont ete moissonnes. */
.lv-prof {
  font-size: 10px;
  font-family: var(--lv-mono);
  color: var(--ink-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
}

.lv-prof.riche { color: var(--accent); border-color: rgba(0,217,126,.35); }

.lv-compteur {
  font-size: 12px;
  color: var(--ink-3);
  margin: -6px 0 10px;
}


/* ---------- Positions moyennes ------------------------------------------ */
/* Un terrain vu du dessus, un point par joueur a sa position moyenne. Les deux
   camps attaquent en sens inverse : la source donne x/y en pourcentage du
   terrain du point de vue de CHAQUE equipe, on retourne donc l'exterieur. */

.lv-terrain {
  position: relative;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.14) 49.7%,
                    rgba(255,255,255,.14) 50.3%, transparent 50.3%),
    linear-gradient(180deg, #1d3b28, #17301f);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.lv-terrain::before {                 /* le rond central */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.lv-joueur {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--lv-mono);
  font-size: 10px;
  font-weight: 700;
  color: #04240f;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.lv-joueur.home { background: var(--lv-home); }
.lv-joueur.away { background: var(--lv-away); color: #2a1a02; }

/* Indicateurs de pression (Packball, bible §60) — un tableau sobre, une
   ligne par indicateur, une colonne par fenetre servie par la source. */
.lv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lv-table th, .lv-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.lv-table th:first-child, .lv-table td:first-child { text-align: left; color: var(--muted); }
.lv-table thead th { font-family: var(--lv-mono); font-weight: 600; }