html, body {
  margin: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  background: transparent;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.root {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 60px 160px;
}

/* ── Header événement ── */
.header {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: center;
}

.evLogo {
  width: 64px; height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

.evName {
  font-size: 36px; font-weight: 1000;
  color: #ffffff; letter-spacing: .3px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.evGame {
  font-size: 14px; font-weight: 900;
  color: rgba(255,255,255,.40);
  text-transform: uppercase; letter-spacing: 2px;
  margin-top: 2px;
}

/* ── Liste des matchs ── */
.matchList {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 1300px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* ── Ligne match ──
   5 colonnes strictement symétriques :
   [logo A 80px] [team A 1fr] [centre fixe 200px] [team B 1fr] [logo B 80px]
   Les deux colonnes team sont identiques (1fr chacune).
   Team A est alignée à droite, team B à gauche — effet miroir.
*/
.matchRow {
  display: grid;
  grid-template-columns: 80px 1fr 200px 1fr 80px;
  align-items: center;
  height: 100px;
  background: rgba(14,14,22,.92);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
}

.matchRow:last-child { border-bottom: none; }

/* Live : aucune surbrillance de fond — le score + BO clignotant suffisent */
.matchRow.status-live { }

/* Done : ultra discret — texte très atténué, pas de fond */
.matchRow.status-done .matchTag    { opacity: .25; }
.matchRow.status-done .matchName   { opacity: .20; }
.matchRow.status-done .matchLogoWrap img { opacity: .20; }
.matchRow.status-done .matchCenter { opacity: .30; }

/* ── Logo ── */
.matchLogoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px 10px;
  /* Si pas de logo : espace réservé transparent */
}

.matchLogoWrap img {
  width: 54px; height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  display: block;
}

/* ── Équipe gauche (A) — alignée à droite ── */
.matchTeamLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 0 8px;
  height: 100%;
}

/* ── Équipe droite (B) — alignée à gauche ── */
.matchTeamRight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 8px 0 16px;
  height: 100%;
}

.matchTag {
  font-size: 30px; font-weight: 1000;
  color: #ffffff;
  text-transform: uppercase; letter-spacing: .5px;
  line-height: 1;
}

.matchName {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.30);
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: 4px;
}

/* ── Centre : heure/NEXT + BO ── */
.matchCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  border-left:  1px solid rgba(255,255,255,.07);
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 0 12px;
}

.matchTime {
  font-size: 28px; font-weight: 1000;
  color: rgba(255,255,255,.80);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  line-height: 1;
}

/* NEXT bien visible */
.matchRow.is-next .matchTime {
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.matchScore {
  font-size: 28px; font-weight: 1000;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: none;
}

/* Affichage heure vs score */
.matchRow.status-live .matchTime  { display: none; }
.matchRow.status-live .matchScore { display: block; }
/* done : afficher le score final, masquer l'heure */
.matchRow.status-done .matchTime  { display: none; }
.matchRow.status-done .matchScore { display: block; }
/* has-score : score > 0 sur le match actif non encore live */
.matchRow.has-score   .matchTime  { display: none; }
.matchRow.has-score   .matchScore { display: block; }

.matchFormat {
  font-size: 11px; font-weight: 900;
  color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: 2px;
  line-height: 1;
}

.matchRow.status-live .matchFormat {
  color: rgba(255,255,255,.50);
  animation: pulseLive 1.4s ease-in-out infinite;
}

.matchStage {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,.20);
  text-transform: uppercase; letter-spacing: 1px;
}

@keyframes pulseLive { 0%,100%{opacity:1} 50%{opacity:.50} }