/* ================================
   Rankings – Mobile vertical cards
   ================================ */

@media (max-width: 900px){

  /* Hide header */
  .rk-table thead{
    display: none !important;
  }

  .rk-table,
  .rk-table tbody{
    display: block !important;
    width: 100% !important;
  }

  /* Each row becomes a card */
  .rk-table tbody tr{
    display: block !important;
    margin: 16px 0 !important;
    padding: 16px !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
  }

  /* Each cell = 20% label / 80% value */
  .rk-table tbody tr > td{
    display: grid !important;
    grid-template-columns: 20% 80% !important;
    align-items: center !important;

    padding: 8px 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Auto label from data-label */
  .rk-table tbody tr > td::before{
    content: attr(data-label);
    opacity: .75;
    text-align: center;
  }

  /* Player cell (bigger + centered) */
  .rk-table tbody tr > td:nth-child(2){
    display: block !important;
    font-weight: 700 !important;
    padding-bottom: 14px !important;
    text-align: center !important;
  }

  .rk-table tbody tr > td:nth-child(2)::before{
    content: "" !important;
  }

  /* Value column highlight */

  /* Keep winrate bar nice */
  .rk-table td.winrate-row{
    border-radius: 12px !important;
    padding: 12px 0 !important;
    margin-top: 6px !important;
  }

 .rk-table-center{
    width:95%;
 }


}

/* ===== Force tier icons on one line (mobile) ===== */

@media (max-width: 900px){

  .rk-table td.rk-ttperf-tiers{
    white-space: nowrap !important;       /* interdit les retours ligne */
    overflow-x: auto;                     /* scroll horizontal si besoin */
    display: flex !important;             /* override le grid */
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .rk-table td.rk-ttperf-tiers::before{
    white-space: normal !important; /* label reste normal */
  }

  .rk-table td.rk-ttperf-tiers img.tier-icon{
    flex: 0 0 auto !important;
  }

}

/* ============================
   Rankings – Mobile Fix
   ============================ */
@media (max-width: 900px){

  /* Le wrapper prend toute la largeur */
  .rk-table-center{
    width: 100%;
  }

  .table-wrap{
    width: 100%;
  }

  .table-clip{
    width: 100%;
    overflow-x: auto;           /* scroll horizontal si nécessaire */
    -webkit-overflow-scrolling: touch;
  }

  /* Le tableau ne doit PAS shrink */
  .rk-table{
    min-width: 720px;           /* ajuste selon ton nombre de colonnes */
    width: max-content;
  }

  /* Alignement plus propre sur mobile */
  .rk-table th,
  .rk-table td{
    white-space: nowrap;
  }

  /* Colonne joueur plus flexible */
  .rk-table td:nth-child(2){
    min-width: 180px;
  }

}