.h2h-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    align-items:start;
  }
  .h2h-box{
    padding:14px;
  }
  .h2h-field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .h2h-row{
    display:flex;
    gap:10px;
    align-items:center;
  }
 .h2h-winner-avatar{
      width:50px;height:50px;border-radius:50%;
    object-fit:cover;
  }
  .h2h-input{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    font-size:2rem;
  }
  .h2h-suggest{
    position:relative;
  }
  .h2h-dd{
    position:absolute;
    top:42px;
    left:0;
    right:0;
    z-index:50;
    background: rgba(10,10,14,0.98);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .h2h-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    cursor:pointer;
  }
  .h2h-item:hover{
    background: rgba(255,255,255,0.06);
  }
  .h2h-mini{
    width:50px;height:50px;border-radius:50%;
    object-fit:cover;
  }
  .h2h-chiplist{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
  }
  .h2h-chip{
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    background: rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    cursor:pointer;
  }
  .h2h-chip:hover{ background: rgba(255,255,255,0.10);
  }

.h2h-item.active{
  background: rgba(255,255,255,0.10);
}
.h2h-picked{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.h2h-picked-ava{
  width:50px;height:50px;border-radius:50%;object-fit:cover;
}

/* =========================
   H2H SUMMARY (top block)
   ========================= */

.h2h-summary{
  /* évite le gros vide: on force une vraie largeur de contenu */
  margin: 14px auto 16px auto;
  padding: 14px 16px;
    font-size:1.9rem;
    max-width: 900px;
}

/* Ligne principale: gauche / score / droite */
.h2h-scoreline{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.h2h-side{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.h2h-side.right{
  justify-content: center;
}


.h2h-sum-ava{
  width: 52px;
  height: 52px;
  border-radius: 14px; /* carré arrondi stylé */
  object-fit: cover;

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.35),
    0 0 0 2px rgba(180,60,255,0.10);
}

.h2h-sum-name{
  font-weight: 800;
  letter-spacing: 0.2px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  font-size:2.5rem;
}

/* le bloc score au centre */
.h2h-score{
  display: flex;
  align-items: baseline;
  gap: 10px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.h2h-score-num{
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(180,60,255,0.20);
}

/* “Majors: x — y” */
.h2h-subline{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);

  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
}

/* Grille des tiers (2 colonnes, responsive) */
.h2h-tiergrid{
  margin-top: 12px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.h2h-tierrow{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.08);
}

.h2h-tier{
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.95;
}

.h2h-tier-score{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Mobile: tout passe en 1 colonne + score plus compact */
@media (max-width: 720px){
  .h2h-summary{
    padding: 12px 12px;
    border-radius: 12px;
  }

  .h2h-scoreline{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .h2h-side.right{
    justify-content: flex-start;
  }

  .h2h-score{
    justify-content: center;
  }

  .h2h-score-num{
    font-size: 1.9rem;
  }

  .h2h-tiergrid{
    grid-template-columns: 1fr;
  }

  .h2h-sum-name{
    max-width: 100%;
  }
}

/* =========================
   Breakdown blocks (Majors / By tier)
   ========================= */
.h2h-breakdown{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.h2h-bk-block{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.h2h-bk-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 6px;
}

.h2h-bk-num{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.h2h-bk-num.left,
.h2h-bk-num.right{
  justify-self: center;
}

/* colonnes gauche / droite centrées */
.h2h-tierline .h2h-bk-num{
  text-align: center;
  justify-self: center;
}

.h2h-bk-num{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}

.h2h-bk-mid{
  padding: 0 10px;
}

/* Tier list */
.h2h-tierlist{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.h2h-tierline{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}

.h2h-tier-mid{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px; /* garde un centre stable */
  text-align: center;
}

.h2h-tier-ic{
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.95;
}

.h2h-tier-label{
  font-weight: 900;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* chaque côté centré dans sa moitié */
.h2h-side{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* bloc joueur en 2 lignes */
.h2h-player{
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;  /* centre le score sous le head */
  row-gap: 10px;          /* ✅ espace => score pas "collé" au nom */
}

/* ligne 1: avatar + nom côte à côte */
.h2h-player-head{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* score total en dessous */
.h2h-player-score{
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(180,60,255,0.25);
}

/* Mobile */
@media (max-width: 720px){
  .h2h-tier-mid{ min-width: 0; }
  .h2h-bk-num{ font-size: 1.25rem; }
}


.h2h-bk-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.table-clip
{
    font-size:1.8rem;
}