/* ===== Mobile: prevent Top50 table from widening the page ===== */
@media (max-width: 900px){

  /* empêcher le "page width creep" */
  html, body{
    overflow-x: hidden;
  }

  /* le bloc prend toute la largeur */
  .t-top50-block .rk-table-center{
    width: 100% !important;
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
  }

  /* scroll horizontal LOCAL au tableau */
  .t-top50-block .table-wrap{
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* important avec le neon-frame: ne pas laisser overflow:hidden bloquer */
  .t-top50-block .table-clip.neon-frame{
    width: max-content;
    min-width: 100%;
  }


}

/* ===== Tournament page (mobile): Top50 table must NOT have any min-width ===== */
@media (max-width: 900px){

  /* cible uniquement le tableau MVPs de cette page */
  .t-top50-block table.table.rk-table{
    min-width: 0 !important;     /* kill style.css + ranking_mobile.css */
    width: 100% !important;
    table-layout: fixed;          /* force le tableau à rentrer dans l’écran */
  }

  /* enlève les "nowrap" qui empêchent le reflow */
  .t-top50-block table.table.rk-table th,
  .t-top50-block table.table.rk-table td{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* au cas où: certaines règles mettent un min-width sur la colonne joueur */
  .t-top50-block table.table.rk-table td:nth-child(2){
    min-width: 0 !important;
  }

  /* compact pour que ça reste lisible */
  .t-top50-block table.table.rk-table th,
  .t-top50-block table.table.rk-table td{
    padding: 8px 8px;
  }

  /* si tes liens joueurs héritent d'un nowrap (ranking.css), on le casse ici */
  .t-top50-block .rk-player-link,
  .t-top50-block .rk-player-nolink{
    white-space: normal !important;
  }
}

@media (max-width: 900px){

  /* Le conteneur qui doit scroller */
  #bv.brackets-viewer{
    width: 100%;
    max-width: 100vw;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* Le contenu interne doit pouvoir dépasser */
  #bv.brackets-viewer .rounds{
    width: max-content;
    min-width: 100%;
  }

  /* (optionnel) évite que des éléments internes “clippent” le scroll */
  #bv.brackets-viewer,
  #bv.brackets-viewer *{
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 900px){
  .round-filters{
    display: none !important;
  }
}

@media (max-width: 900px){
  .t-bracket-col{ overflow: visible !important; }
}

@media (max-width: 900px){

  /* 1) la page ne doit PAS scroller horizontalement */
  html, body{
    overflow-x: hidden !important;
  }

  /* 2) le scroll doit se faire ici */
  #bv.brackets-viewer{
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* 3) IMPORTANT: le vrai conteneur interne du lib doit pouvoir être plus large que l’écran */
  #bv .brackets-viewer,
  #bv .brackets-viewer-container{
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;            /* <- ton margin:auto empêche le "push" */
  }

  /* 4) si un parent clippe, on neutralise */
  .t-bracket-wrap,
  .t-bracket-col{
    overflow: visible !important;
  }
}

@media (max-width: 900px){
  #bv .brackets-viewer{
    overflow-x: visible !important;
  }
}

/* ===== Mobile: bracket scroll horizontal (GOOD selectors) ===== */
@media (max-width: 900px){

  /* la page ne scroll pas horizontalement */
  html, body { overflow-x: hidden !important; }

  /* le scroll horizontal doit se faire sur le wrapper #bv */
  #bv{
    width: 100%;
    max-width: 100vw;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-bottom: 10px; /* un peu de place pour la barre de scroll */
  }

  /* le contenu doit pouvoir être plus large que l’écran */
  #bv > .brackets-viewer,
  #bv .brackets-viewer-container,
  #bv .bracket,
  #bv .rounds{
    width: max-content !important;
    min-width: 100% !important;
  }

  /* sur desktop tu forces le centrage -> sur mobile on enlève */
  #bv > .brackets-viewer,
  #bv .brackets-viewer-container{
    margin: 0 !important;
  }
}


@media (max-width: 900px){
  #bv{
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Empêche la sélection de texte qui "mange" le drag */
  #bv, #bv *{
    user-select: none;
    -webkit-user-select: none;
  }

  .page
  {
    padding:0px;
  }

  .tr-replay-list
  {
    font-size:1.1rem;
  }
}