/* MOBILE ONLY: highlights en 2 lignes, sans impacter PC */
@media (max-width: 900px){

  .highlights-grid{
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 12px !important;
  }

  /* on force le bon layout même si .hl-item est défini 2 fois ailleurs */
  .highlights-grid .hl-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    white-space: normal !important; /* kill nowrap */
  }

  .highlights-grid .hl-item > span{
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
  }

  .highlights-grid .hl-item .hl-muted{
    display: block !important;
    margin: 2px 0 0 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 900px){

  /* ton wrap ajoute 64px de padding -> sur mobile ça casse la mise en page */
  .card-export-wrap{
    padding: 12px !important;
  }

  .highlights-grid{
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 12px !important;
  }

  /* IMPORTANT: on scope à highlights-grid pour ignorer tes .hl-item doublons */
  .highlights-grid > .hl-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    white-space: normal !important; /* chez toi c'est nowrap */
  }

  .highlights-grid > .hl-item > span{
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
  }

  .highlights-grid .hl-muted{
    display: block !important;
    margin: 2px 0 0 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 900px){

  .highlights-grid{
    text-align: center !important;
  }

  .highlights-grid > .hl-item{
    align-items: center !important;
    text-align: center !important;
  }

  .highlights-grid > .hl-item > span{
    text-align: center !important;
  }

  .highlights-grid .hl-muted{
    text-align: center !important;
  }

}

@media (max-width: 900px){

  /* Zone infos sous le pseudo */
  .profile-subline{
    text-align: center !important;
  }

  /* Chaque bloc prend sa propre ligne + espace vertical */
  .profile-subline > div{
    margin: 14px 0 !important;
    line-height: 1.4;
  }

  /* Force les spans neon à passer sous le label */
  .profile-subline span.neon-anim{
    display: block !important;
    margin-top: 4px;
  }

}

@media (max-width: 900px){

  /* Dans les titles uniquement */
  .titles-item .extra_info{
    display: block !important;
    margin-top: 4px;
  }

}

@media (max-width: 680px){

  /* 1) on cache le header */
  .table thead{
    display: none !important;
  }

  /* 2) la table et le tbody deviennent “libres” */
  .table,
  .table tbody{
    display: block !important;
    width: 100% !important;
  }

  /* 3) chaque ligne principale (une année) devient une carte */
  .table tr.year-row-clickable{
    display: block !important;
    margin: 14px 0 !important;
    padding: 12px 12px !important;

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

    text-align: center !important;
  }

  /* 4) chaque cellule devient une ligne empilée */
  .table tr.year-row-clickable > td{
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
    border: 0 !important;            /* enlève les traits internes */
    text-align: center !important;
  }

  /* Year un peu plus gros */
  .table tr.year-row-clickable > td:first-child{
    font-weight: 800 !important;
    padding-top: 2px !important;
    padding-bottom: 10px !important;
  }

  /* Winrate: garde ton gradient, mais en mode “pill” */
  .table tr.year-row-clickable td.winrate-row{
    margin-top: 6px !important;
    padding: 10px 0 !important;
    border-radius: 12px !important;
  }

  /* ===== Titles + Runs: affichés sous la carte, empilés ===== */

  .table tr.year-titles-row,
  .table tr.year-runs-row{
    display: block !important;
    margin: -6px 0 14px 0 !important;    /* colle à la carte du dessus */
  }

  .table tr.year-titles-row > td,
  .table tr.year-runs-row > td{
    display: block !important;
    width: 100% !important;
    padding: 0 12px 12px 12px !important;
    border: 0 !important;
    text-align: center !important;
  }

  /* les “mini-box” (tournois) : en colonne sur mobile */
  .year-titles-row div[style*="display:flex"],
  .year-runs-row  div[style*="display:flex"]{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .year-titles-row .mini-box,
  .year-runs-row  .mini-box{
    justify-content: center !important;
    width: 100% !important;
  }
}

@media (max-width: 680px){

  .table tr.year-row-clickable > td{
    text-align: center !important;
  }

  .table tr.year-row-clickable > td a{
    display: inline-block;
  }
}

@media (max-width: 680px){

  /* autorise le texte à revenir à la ligne dans les badges */
  .year-titles-row .mini-box,
  .year-runs-row  .mini-box{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* si un parent clippe, on évite le découpage */
  .table-clip{
    overflow: visible !important;
  }
}

@media (max-width: 900px){

  .table-clip{
    overflow: visible !important;
  }

}


@media (max-width: 900px){

  /* Chaque td devient une “ligne” : Label à gauche, valeur à droite */
  .table tr.year-row-clickable > td{
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 14px !important;
    text-align: left !important;      /* le conteneur */
    white-space: normal !important;
  }

  /* Label auto depuis data-label */
  .table tr.year-row-clickable > td::before{
    content: attr(data-label);
    opacity: 0.75;
    font-size: 0.9em;
    letter-spacing: .04em;
  }

  /* Valeur à droite */
  .table tr.year-row-clickable > td > a,
  .table tr.year-row-clickable > td{
    font-variant-numeric: tabular-nums;
  }

  /* La ligne Year : on enlève le label (sinon “Year 2015” en double) */
  .table tr.year-row-clickable > td:first-child{
    justify-content: center !important;
  }
  .table tr.year-row-clickable > td:first-child::before{
    content: "" !important;
  }
}

@media (max-width: 900px){

  /* Chaque cellule = grille 15% / 85% */
  .table tr.year-row-clickable > td{
    display: grid !important;
    grid-template-columns: 30% 70% !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }

  /* Label centré dans sa colonne */
  .table tr.year-row-clickable > td::before{
    content: attr(data-label);
    opacity: .75;
    font-size: .9em;
    text-align: center !important;
  }

  /* Valeur centrée dans les 85% */
  .table tr.year-row-clickable > td > *{
    text-align: center !important;
  }

  /* ===== Année ===== */
  .table tr.year-row-clickable > td:first-child{
    display: block !important;
    text-align: center !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    padding-bottom: 12px !important;
  }

  .table tr.year-row-clickable > td:first-child::before{
    content: "" !important;
  }

}

@media (max-width: 680px){

  /* td = grille 15/85 ET texte centré pour la valeur */
  .table tr.year-row-clickable > td{
    display: grid !important;
    grid-template-columns: 15% 85% !important;
    align-items: center !important;
    padding: 8px 0 !important;

    text-align: center !important; /* <-- centre la “valeur” même si c’est du texte brut */
  }

  /* label (colonne 15%) */
  .table tr.year-row-clickable > td::before{
    content: attr(data-label);
    opacity: .75;
    font-size: .9em;
    text-align: center !important;
  }

  /* Année plus grosse + pas de label */
  .table tr.year-row-clickable > td:first-child{
    display: block !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    padding-bottom: 12px !important;
    text-align: center !important;
  }
  .table tr.year-row-clickable > td:first-child::before{
    content: "" !important;
  }
}

@media (max-width: 900px){

  /* cacher toggle */
  #toggle-tier-years{
    display: none !important;
  }

  /* cacher breakdown yearly */
  tr.tier-year-row{
    display: none !important;
  }

  /* cacher header */
  .table thead{
    display: none !important;
  }

  /* transformer lignes principales en cartes */
  .table tr[data-tier]{
    display: block !important;
    margin: 16px 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  /* structure 15% / 85% */
  .table tr[data-tier] > td{
    display: grid !important;
    grid-template-columns: 15% 85% !important;
    align-items: center !important;
    padding: 8px 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* labels */
  .table tr[data-tier] > td::before{
    content: attr(data-label);
    opacity: .75;
    text-align: center !important;
  }

  /* Tier en gros */
  .table tr[data-tier] > td:first-child{
    display: block !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    padding-bottom: 12px !important;
    text-align: center !important;
  }

  .table tr[data-tier] > td:first-child::before{
    content: "" !important;
  }

}

@media (max-width: 900px){
  body.theme-neon .tier-toggle{
    display: none !important;
  }
}

@media (max-width: 900px){

  /* cache header */
  .table thead{ display:none !important; }

  /* chaque ligne devient une carte */
  .table tr.row-hover{
    display:block !important;
    margin:16px 0 !important;
    padding:14px !important;
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    text-align:center !important;
  }

  /* td = 15/85, label et valeur centrés */
  .table tr.row-hover > td{
    display:grid !important;
    grid-template-columns: 15% 85% !important;
    align-items:center !important;
    padding:8px 0 !important;
    text-align:center !important; /* centre la valeur même si texte brut */
    white-space: normal !important;
  }

  .table tr.row-hover > td::before{
    content: attr(data-label);
    opacity:.75;
    font-size:.9em;
    text-align:center !important;
  }

  /* YEAR en gros (1ère cellule) */
  .table tr.row-hover > td:first-child{
    display:block !important;
    font-size:2rem !important;
    font-weight:800 !important;
    padding-bottom:12px !important;
    text-align:center !important;
  }
  .table tr.row-hover > td:first-child::before{
    content:"" !important;
  }

  /* évite que price-bar / winrate-row forcent nowrap */
  .table tr.row-hover td.price-bar,
  .table tr.row-hover td.winrate-row{
    white-space: normal !important;
  }

  /* Manager check bien centré */
  .table tr.row-hover td.col-manager{
    justify-items: center;
  }
}


@media (max-width: 900px){

  /* cible UNIQUEMENT le tableau Teams */
  .teams-table .table thead{
    display: none !important;
  }

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

  /* chaque ligne = carte */
  .teams-table .table tbody tr{
    display: block !important;
    margin: 14px 0 !important;
    padding: 14px 14px 12px !important;

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

    text-align: center !important;
  }

  /* empile les cellules */
  .teams-table .table tbody tr > td{
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* YEAR en gros */
  .teams-table .table tbody tr > td:first-child{
    font-size: 2rem !important;
    font-weight: 800 !important;
    padding-top: 2px !important;
    padding-bottom: 10px !important;
  }

  /* Tournament un peu plus “titre” */
  .teams-table .table tbody tr > td:nth-child(2){
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding-bottom: 10px !important;
  }

  /* Team légèrement plus discret */
  .teams-table .table tbody tr > td:nth-child(3){
    opacity: .9;
    padding-bottom: 12px !important;
  }

  /* Record (barre) en “pill” */
  .teams-table .table tbody tr > td.winrate-row{
    border-radius: 12px !important;
    padding: 12px 0 !important;
    margin: 6px 0 10px !important;
  }

  /* Price (barre) en pill aussi */
  .teams-table .table tbody tr > td.price-bar{
    border-radius: 12px !important;
    padding: 12px 0 !important;
    margin: 6px 0 10px !important;
  }

  /* Manager : gros check */
  .teams-table .table tbody tr > td.col-manager{
    font-size: 1.4rem !important;
    padding-top: 6px !important;
  }

  /* si cellule manager vide, garde de l’air (tu peux mettre — côté HTML si tu veux) */
}

@media (max-width: 900px){

  /* si pas manager: cache complètement la cellule (6e colonne) */
  .teams-table .table tbody tr > td.col-manager:empty{
    display: none !important;
  }

  /* si manager: la cellule devient une vraie ligne centrée */
  .teams-table .table tbody tr > td.col-manager{
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 900px){

  /* masquer les lignes vides (Record/Price/Manager) */
  .teams-table .table tbody tr > td.winrate-row:empty,
  .teams-table .table tbody tr > td.price-bar:empty,
  .teams-table .table tbody tr > td.col-manager:empty{
    display: none !important;
  }

  /* si Manager présent: plein centre */
  .teams-table .table tbody tr > td.col-manager{
    width: 100% !important;
    text-align: center !important;
    font-size: 1.6rem !important;
    padding-top: 8px !important;
  }
}

@media (max-width: 900px){
  .teams-table .table tbody tr > td:nth-child(2){
    font-size: 1.8rem !important;   /* plus gros */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 900px){

  /* cache le header uniquement pour matches */
  .matches-table .table thead{
    display: none !important;
  }

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

  /* chaque ligne devient une carte */
  .matches-table .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;
  }

  /* chaque cellule devient grille 30% / 70% */
  .matches-table .table tbody tr > td{
    display: grid !important;
    grid-template-columns: 30% 70% !important;
    align-items: center !important;
    padding: 8px 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* label automatique */
  .matches-table .table tbody tr > td::before{
    content: attr(data-label);
    opacity: .75;
    font-size: .9em;
    text-align: center;
  }

  /* Opponent un peu plus visible */
  .matches-table .table tbody tr > td:first-child{
    font-weight: 700;
  }

  /* avatar + nom centrés */
  .matches-table .opp-cell{
    justify-content: center !important;
  }

}

@media (max-width: 900px){

  /* cellule Tier */
  .matches-table td[data-label="Tier"]{
    align-items: center !important;
  }

  /* wrapper implicite du contenu */
  .matches-table td[data-label="Tier"] img.gen-icon{
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px !important;
  }

  /* aligne icônes + texte ensemble */
  .matches-table td[data-label="Tier"]{
    display: grid !important;
    grid-template-columns: 30% 70% !important;
  }

  /* contenu de droite = flex centré */
  .matches-table td[data-label="Tier"] > *{
    justify-self: center;
  }

}

@media (max-width: 900px){

  /* Dans la cellule "Tier", la partie droite (contenu) doit être inline-flex */
  .matches-table td[data-label="Tier"]{
    grid-template-columns: 30% 70% !important;
  }

  /* Tout ce qui n'est pas le label (::before) est dans la 2e colonne,
     on force un conteneur flex via le td lui-même */
  .matches-table td[data-label="Tier"]{
    justify-items: center;
  }

  /* Force les icônes à rester sur la même ligne */
  .matches-table td[data-label="Tier"] img.gen-icon{
    display: inline-block !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
    flex: 0 0 auto !important;
  }

  /* Si un style global met les images en block, on le casse */
  .matches-table td[data-label="Tier"] img{
    display: inline-block !important;
  }

  /* Et on évite les retours à la ligne automatiques entre icônes */
  .matches-table td[data-label="Tier"]{
    white-space: nowrap !important;
  }
}

@media (max-width: 900px){

  /* ===== HEADER OFF ===== */
  .tournaments-table .table thead{
    display: none !important;
  }

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

  /* ===== BANNER TOURNOI ===== */

  .tournaments-table .tourney-banner{
    font-size: 1.6rem !important;        /* plus gros */
    font-weight: 800 !important;
    padding: 16px !important;
    line-height: 1.2 !important;
    white-space: normal !important;      /* autorise multi-ligne */
    word-break: break-word !important;   /* évite overflow */
  }

  .tournaments-table .tourney-banner a{
    display: block;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
  }

  .tournaments-table .tourney-banner .outline_type{
    display: block;
    font-size: 0.95rem;
    margin-top: 6px !important;
    font-size:1.7rem;
  }

  /* ===== MATCHES ===== */

  .tournaments-table .table tbody tr.row-hover{
    display: block !important;
    margin: 14px 0 !important;
    padding: 16px !important;

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

  /* cellules en 30/70 */
  .tournaments-table .table tbody tr.row-hover > td{
    display: grid !important;
    grid-template-columns: 30% 70% !important;
    align-items: center !important;
    padding: 8px 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* labels auto */
  .tournaments-table .table tbody tr.row-hover > td::before{
    content: attr(data-label);
    opacity: .75;
    font-size: .9em;
    text-align: center;
  }

  /* Opponent un peu plus visible */
  .tournaments-table td[data-label="Opponent"]{
    font-weight: 700;
  }

  /* icônes tier alignées */
  .tournaments-table td[data-label="Tier"] img.gen-icon{
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px !important;
  }

}

@media (max-width: 900px){

  /* ====== BANNER: prendre toute la largeur + centré ====== */
  .tournaments-table .tourney-banner{
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;

    text-align: center !important;
    padding: 18px 16px !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .tournaments-table .tourney-banner a{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .tournaments-table .tourney-banner .outline_type{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important; /* tu as margin-left:10px inline */
  }

  /* ====== TIER: forcer les icônes sur une seule ligne ====== */
  .tournaments-table td[data-label="Tier"]{
    white-space: nowrap !important;
  }

  .tournaments-table td[data-label="Tier"] img,
  .tournaments-table td[data-label="Tier"] img.gen-icon{
    display: inline-block !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
  }

}

@media (max-width: 900px){

  .tournaments-table td[colspan]{
    padding: 0 !important;
  }

  .tournaments-table .tourney-banner{
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;

    padding: 18px 16px !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

}

.tournaments-table .tourney-banner{
  max-width: none !important;
}

@media (max-width: 900px){
  /* IMPORTANT: annule les styles "carte" sur la ligne banner */
  .tournaments-table tr.tourney-banner-row,
  .tournaments-table tr.tourney-banner-row > td{
    display: block !important;
    width: 100% !important;
  }

  .tournaments-table tr.tourney-banner-row > td{
    padding: 0 !important; /* tue ton padding inline */
  }

  .tournaments-table .tourney-banner{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;

    padding: 18px 16px !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* le sous-texte prend toute la largeur et n'est pas décalé */
  .tournaments-table .tourney-banner .outline_type{
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important; /* écrase ton inline margin-left:10px */
    text-align: center !important;
  }

  .container{
  padding: 0;
  }

#player-card-export-wrap.card-export-wrap{
  padding: 8px !important;
}

}

@media (max-width: 900px){

  /* autorise le wrap */
  .year-runs-row .mini-box{
    white-space: normal !important;
  }

  /* transforme le badge en colonne */
  .year-runs-row .mini-box{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
  }

}

@media (max-width: 900px){
  .highlights-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .profile-top{ flex-direction: column; font-size: 1.4rem; }
  .titles-box{ min-width: unset; width: 100%; }
  .profile-left{ grid-template-columns: 132px 1fr; }
  .profile-grid{ grid-template-columns: 1fr; }
  .highlights-grid{ grid-template-columns: 1fr; }
}