/* ===== MOBILE FIX HOF ===== */
@media (max-width: 900px){

  /* 1) Les cards ne peuvent plus dépasser */
  .profile-card{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important
  }

  /* 2) Le header ne force plus une ligne infinie */
  .hof-topbar .extra_info{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 3) Sécurité ultime anti-overflow */
  html, body{
    overflow-x: hidden !important;
  }

}

/* ===== HOF mobile centering ===== */
@media (max-width: 900px){

  .hof-stats{
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important; /* déjà le cas mais on sécurise */

    justify-items: center !important;  /* centre les mini-box horizontalement */
    margin: 20px auto 0 auto !important;
  }

  .hof-mini{
    width: 100%;
    max-width: 420px;   /* largeur jolie sur mobile */
    text-align: center;
  }

  .desktop-tip
  {
    display:none;
  }
}

/* ===== HOF identity stack under avatar ===== */
@media (max-width: 900px){

  /* Empile LEFT + RIGHT */
  .hof-top{
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Avatar au-dessus, texte dessous */
  .hof-identity{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Bloc nom + subtitle + dates */
  .hof-nameblock{
    width: 100% !important;
    margin-top: 12px !important;
  }

  /* Played From → wrap propre */
  .hof-dates{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    margin-top: 6px;
  }

}