/* ===============================
   MOBILE H2H TABLE (CLEAN RESET)
   =============================== */
@media (max-width: 900px){

  #table-details{
    width:100%;
    border-collapse: collapse;
  }

  #table-details thead{
    display:none;
  }

  /* chaque tournoi = bloc */
  #table-details tbody{
    display:block;
    margin:14px 8px 18px 8px;
    border-radius:16px;
    overflow:hidden;
    background: rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.10);
  }

  /* reset tr */
  #table-details tbody tr{
    display:block;
  }

  /* =====================
     TOURNEY BANNER
     ===================== */
  #table-details td.tourney-banner{
    display:block;
    width:100%;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }

  /* =====================
     MATCH ROW
     ===================== */
  #table-details tbody tr:not(:first-child){
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  #table-details tbody tr:last-child{
    border-bottom:0;
  }

  /* cellules */
  #table-details tbody tr:not(:first-child) td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border:0 !important;
  }

  /* label gauche */
  #table-details tbody tr:not(:first-child) td::before{
    flex:0 0 90px;
    font-weight:900;
    text-transform:uppercase;
    opacity:.8;
  }

  #table-details tbody tr:not(:first-child) td:nth-child(1)::before{content:"Winner";}
  #table-details tbody tr:not(:first-child) td:nth-child(2)::before{content:"Tier";}
  #table-details tbody tr:not(:first-child) td:nth-child(3)::before{content:"Round";}
  #table-details tbody tr:not(:first-child) td:nth-child(4)::before{content:"Replays";}

  /* =====================
     FIX 1 : Winner bien à droite
     ===================== */
  #table-details td.winner-cell{
    justify-content:space-between;
  }

  #table-details td.winner-cell > *:last-child{
    margin-left:auto;
    text-align:right;
  }

  /* =====================
     FIX 2 : Tier sur une seule ligne
     ===================== */
  #table-details tbody tr:not(:first-child) td:nth-child(2){
    white-space:nowrap;
  }

#table-details tbody tr td{
  width: 100%;
  flex: 1 1 auto;   /* <- ça c’est le vrai “prends toute la place” en flex */
  min-width: 0;     /* <- sinon le contenu empêche de shrink */
}
}

@media (max-width: 900px){

  /* le td du banner = 100% */
  #table-details tbody tr:first-child td{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* le contenu du banner = 100% aussi */
  #table-details tbody tr:first-child .tourney-banner{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width: 900px){

  /* td Tier = wrap */
  #table-details tbody tr:not(:first-child) td:nth-child(2){
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* le "contenu" (icône + texte) passe en dessous du label */
  #table-details tbody tr:not(:first-child) td:nth-child(2) > *{
    flex: 0 0 100%;
  }

  /* et on garde icône + texte sur la même ligne */
  #table-details tbody tr:not(:first-child) td:nth-child(2){
    row-gap: 6px;
  }
  #table-details tbody tr:not(:first-child) td:nth-child(2) img{
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
  }
  #table-details tbody tr:not(:first-child) td:nth-child(2) img + *{
    display: inline-block;
    margin-left: 8px;
    white-space: nowrap;
  }
}

/* ============================
   H2H ONLY: fix Tier icon wrap
   ============================ */
@media (max-width: 900px){

  /* 0) Evite que des règles globales .table cassent #table-details */
  #table-details,
  #table-details *{
    box-sizing: border-box;
  }

  /* 1) Dans la ligne Tier (col 2), on force un layout "valeur à droite" */
  #table-details tbody tr td:nth-child(2){
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* 2) L'icône ne doit JAMAIS prendre de place énorme */
  #table-details tbody tr td:nth-child(2) img{
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    object-fit: contain !important;
  }

  /* 3) Le texte du tier doit pouvoir shrink (sinon ça déborde) */
  #table-details tbody tr td:nth-child(2) a,
  #table-details tbody tr td:nth-child(2) span,
  #table-details tbody tr td:nth-child(2) div{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 4) Si tes rules mettent le 1er enfant à margin-left:auto (winner), on annule ici */
  #table-details tbody tr td:nth-child(2) > *{
    margin-left: 0 !important;
  }

  /* 5) Et on pousse TOUT le contenu après le label vers la droite */
  #table-details tbody tr td:nth-child(2)::before{
    /* si tu utilises des labels via ::before dans ta version card */
    /* on garde le label tel quel */
  }
}

@media (max-width: 900px){
  #table-details tbody tr:not(:first-child) td:nth-child(2) img{
    display:inline-block !important;
    vertical-align: middle;
  }
  #table-details tbody tr:not(:first-child) td:nth-child(2) img + *{
    display:inline-block !important;
    vertical-align: middle;
  }
}

@media (max-width: 900px){

  /* recap: 2 côtés + VS au centre, sans wrap débile */
  .h2h-summary .h2h-scoreline{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  .h2h-summary .h2h-side{
    min-width: 0 !important;
  }

  .h2h-summary .h2h-side .h2h-player{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* on annule tes margins inline (50%) qui flinguent tout */
  .h2h-summary .h2h-player-score{
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    text-align: right;
  }

  /* le bloc avatar+nom doit pouvoir shrink */
  .h2h-summary .h2h-player-head{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .h2h-summary .h2h-sum-name{
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* côté droit: score à gauche (symétrie) */
  .h2h-summary .h2h-side.right .h2h-player{
    flex-direction: row-reverse !important;
  }
  .h2h-summary .h2h-side.right .h2h-player-score{
    text-align: left !important;
  }
}

@media (max-width: 900px){

  /* le scoreline reste en 3 colonnes: left | VS | right */
  .h2h-summary .h2h-scoreline{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
  }

  /* IMPORTANT: un side ne doit pas "prendre toute la ligne" de façon chelou */
  .h2h-summary .h2h-side{
    min-width: 0 !important;
  }

  /* chaque joueur = grid interne: [head][score] */
  .h2h-summary .h2h-side .h2h-player{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    min-width: 0 !important;
  }

  /* annule COMPLETEMENT les margins inline 50% */
  .h2h-summary .h2h-player-score{
    margin: 0 !important;
    justify-self: end !important;
    white-space: nowrap !important;
  }

  /* le head (avatar + nom) doit pouvoir shrink */
  .h2h-summary .h2h-player-head{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* nom: pas de wrap, ellipsis si trop long */
  .h2h-summary .h2h-sum-name{
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* côté RIGHT: on inverse l'ordre visuel -> score à gauche du nom */
  .h2h-summary .h2h-side.right .h2h-player{
    grid-template-columns: auto 1fr !important;
  }
  .h2h-summary .h2h-side.right .h2h-player-score{
    justify-self: start !important;
  }
  .h2h-summary .h2h-side.right .h2h-player-head{
    justify-content: flex-end !important;
  }
}
@media (max-width: 900px){

  /* BULLDOZER: recap H2H (noms + scores sur une seule ligne) */
  .h2h-summary.neon-frame.table-auto .h2h-scoreline{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .h2h-summary.neon-frame.table-auto .h2h-score-center{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* LEFT et RIGHT prennent chacun une moitié */
  .h2h-summary.neon-frame.table-auto .h2h-side{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Dans chaque côté: avatar+nom à gauche, score à droite */
  .h2h-summary.neon-frame.table-auto .h2h-side .h2h-player{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .h2h-summary.neon-frame.table-auto .h2h-player-head{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .h2h-summary.neon-frame.table-auto .h2h-sum-name{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Force override des inline styles margin-left/right:50% */
  .h2h-summary.neon-frame.table-auto .h2h-player-score,
  .h2h-summary.neon-frame.table-auto .h2h-player-score[style]{
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Côté RIGHT: on inverse juste le visuel pour que ça soit symétrique */
  .h2h-summary.neon-frame.table-auto .h2h-side.right .h2h-player{
    flex-direction: row-reverse !important;
  }
}