/* ═══════════════════════════════════════════════════════════
   MOBILE PLAYERS — Solo aplica en pantallas de teléfono (≤520px)
   Este archivo NO modifica nada de PC/tablet.
   Cárgalo DESPUÉS de styles.css (y de mobile-fixes.css si lo usas)
   en tu HTML:

   <link rel="stylesheet" href="css/styles.css">
   <link rel="stylesheet" href="css/mobile-fixes.css">
   <link rel="stylesheet" href="css/mobile-players.css">   ← nuevo

   ═══════════════════════════════════════════════════════════ */

   @media (max-width: 520px) {

    /* ───────────────────────────────────────────────
       1) GRID DE JUGADORES — 2 columnas en vez de 1
       ─────────────────────────────────────────────── */
    .players-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.65rem !important;
    }
  
    /* ───────────────────────────────────────────────
       2) CARD — de horizontal (foto+info lado a lado)
       a vertical (foto arriba, info abajo) para que
       quepa en una columna angosta.
       ─────────────────────────────────────────────── */
    .player-card-inner {
      flex-direction: column !important;
      min-height: 0 !important;
    }
  
    /* Foto arriba, ya no a la izquierda. Más alta para que
       no corte la cabeza/torso de la persona */
    .player-photo-wrap {
      width: 100% !important;
      height: 200px !important;
      flex-shrink: 0 !important;
    }
  
    .player-photo-wrap img {
      object-fit: cover !important;
      object-position: center top !important;
    }
  
    .player-flag-badge {
      width: 32px !important;
      height: 32px !important;
    }
  
    .player-status-badge {
      font-size: 0.52rem !important;
      padding: 0.12rem 0.32rem !important;
    }
  
    .player-maps-badge {
      font-size: 0.5rem !important;
      padding: 0.1rem 0.32rem !important;
    }
  
    /* Info debajo de la foto, compacta.
       Usamos grid-template-areas para poner el nombre real
       (izquierda) y el rol (derecha) en la misma fila, sin
       tener que tocar el HTML/JS que los genera. */
    .player-info-wrap {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      grid-template-areas:
        "name   name"
        "real   role"
        "played played" !important;
      align-items: center !important;
      column-gap: 0.4rem !important;
      row-gap: 0.2rem !important;
      padding: 0.6rem 0.7rem !important;
    }
  
    .player-game-name {
      grid-area: name !important;
      font-size: 0.95rem !important;
      margin-bottom: 0 !important;
    }
  
    .player-real-name {
      grid-area: real !important;
      font-size: 0.62rem !important;
      margin-bottom: 0 !important;
    }
  
    .player-role-text {
      grid-area: role !important;
      font-size: 0.56rem !important;
      text-align: right !important;
      margin-bottom: 0 !important;
      white-space: nowrap !important;
    }
  
    /* El divider ya no aporta nada en este layout compacto */
    .player-divider {
      display: none !important;
    }
  
    .player-maps-played {
      grid-area: played !important;
      font-size: 0.58rem !important;
      margin-top: 0.25rem !important;
      text-align: center;
    }
  
    .player-maps-played strong {
      font-size: 0.66rem !important;
    }
  
    /* ───────────────────────────────────────────────
       3) BARRA DE RENDIMIENTO — más compacta
       ─────────────────────────────────────────────── */
    .perf-bar-section {
      padding: 0.45rem 0.7rem !important;
    }
  
    .perf-bar-label {
      font-size: 0.55rem !important;
    }
  
    .perf-bar-value {
      font-size: 0.66rem !important;
    }
  
    .perf-bar-track {
      height: 4px !important;
    }
  
    /* ───────────────────────────────────────────────
       4) STATS INFERIORES (Bajas / Asist. / Daño)
       Achicar íconos y texto para que no se encimen
       en una card de la mitad de ancho.
       ─────────────────────────────────────────────── */
    .player-stats-bar {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  
    .stat-box {
      padding: 0.4rem 0.15rem !important;
    }
  
    .stat-icon {
      width: 15px !important;
      height: 15px !important;
      margin-bottom: 0.15rem !important;
    }
  
    .stat-icon img,
    .stat-icon svg {
      width: 15px !important;
      height: 15px !important;
    }
  
    .stat-icon-damage {
      width: 16px !important;
      height: 16px !important;
    }
  
    .stat-box-value {
      font-size: 0.72rem !important;
    }
  
    .stat-box-label {
      font-size: 0.46rem !important;
    }
  
    /* ───────────────────────────────────────────────
       5) BARRA DE BÚSQUEDA — que no se desborde
       ─────────────────────────────────────────────── */
    .search-bar-premium {
      margin-bottom: 1.25rem !important;
    }
  
    .search-input-premium {
      font-size: 0.82rem !important;
      padding: 0.7rem 0.85rem 0.7rem 2.5rem !important;
    }
  
    /* ───────────────────────────────────────────────
       6) PAGINACIÓN — texto/botones más chicos
       ─────────────────────────────────────────────── */
    .players-pagination {
      gap: 0.5rem !important;
      flex-wrap: wrap !important;
    }
  
    .players-pagination .pagination-btn {
      padding: 0.45rem 0.7rem !important;
      font-size: 0.68rem !important;
    }
  
    .players-pagination .pagination-info {
      font-size: 0.72rem !important;
      width: 100% !important;
      text-align: center !important;
      order: -1 !important;
    }
  }
  
  
  /* ═══════════════════════════════════════════════════════════
     MÓVILES MUY PEQUEÑOS (≤380px) — 2 columnas siguen,
     pero achicamos un poco más para que no se apriete el texto.
     ═══════════════════════════════════════════════════════════ */
  @media (max-width: 380px) {
  
    .players-grid {
      gap: 0.5rem !important;
    }
  
    .player-photo-wrap {
      height: 175px !important;
    }
  
    .player-game-name {
      font-size: 0.85rem !important;
    }
  
    .player-info-wrap {
      padding: 0.55rem 0.55rem !important;
    }
  
    .stat-box-value {
      font-size: 0.64rem !important;
    }
  
    .stat-box-label {
      font-size: 0.42rem !important;
    }
  }