/* Estilos para el contenedor de la clasificación */
.ranking-container {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 1300px;
    margin: 40px auto;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-columns-btn {
    display: none;
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.back-button {
    background: #555;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}
.back-button:hover {
    background-color: #777;
}

/* Estilos para la tabla de clasificación */
#ranking-table {
    width: 100%;
    border-collapse: collapse;
}

#ranking-table th, #ranking-table td {
    padding: 12px;
    text-align: left;
}

#ranking-table th {
    background-color: #333;
    color: #ffd700;
}

#ranking-table tr {
    background-color: rgba(0,0,0,0.3);
    border-bottom: 1px solid #444;
}

#ranking-table tr:hover {
    background-color: #444;
}

#loading-message {
    color: #ccc;
    font-style: italic;
    margin-top: 20px;
}


/* ranking.css */

/* AÑADE ESTA REGLA para la columna "Mes Ant." */
#ranking-table th:nth-child(6), #ranking-table td:nth-child(6) {
    text-align: center;
}

/* --- ESTILOS PARA LOS BOTONES DE SELECCIÓN (Mensual/Histórica) --- */
.ranking-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
}

.ranking-selector button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ranking-selector button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.ranking-selector button.active {
    background-color: #ffd700;
    color: #333;
    border-color: #ffd700;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* --- ESTILOS PARA LOS ICONOS DE RAREZA EN LA TABLA --- */
.card-count-cell {
    display: flex;
    align-items: center;
    gap: 8px; 
    flex-wrap: wrap;
}

.rarity-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid;
}

.rarity-common {
    border-color: #A0A0A0;
    background-color: #A0A0A0;
    box-shadow: 0 0 4px #A0A0A0;
}
.rarity-uncommon {
    border-color: #4CAF50;
    background-color: #4CAF50;
    box-shadow: 0 0 6px #4CAF50;
}
.rarity-rare {
    border-color: #2196F3;
    background-color: #2196F3;
    box-shadow: 0 0 8px #2196F3;
}
.rarity-epic {
    border-color: #9C27B0;
    background-color: #9C27B0;
    box-shadow: 0 0 10px #9C27B0;
}
.rarity-legendary {
    border-color: #FFC107;
    background-color: #FFC107;
    box-shadow: 0 0 12px #FFC107;
}
.rarity-ultralegendary {
    border-color: #F44336;
    background-color: #F44336;
    box-shadow: 0 0 15px #F44336;
}

.rarity-count {
    color: #fff;
    font-size: 0.9em;
    font-weight: bold;
}

/* Animación shimmer */
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Badge para el número de posición */
.position-badge {
  display: inline-block;
  min-width: 28px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: #fff; /* números blancos por defecto */
}

/* --- ESTILOS PARA DESTACAR EL TOP 3 --- */
tr.top-1-cell {
  font-weight: bold;
  background: linear-gradient(120deg,
    rgba(255,215,0,0.7) 0%,
    rgba(218,165,32,0.25) 50%,
    rgba(255,215,0,0.7) 100%);
  background-size: 200% 200%;
  animation: shimmer 3s linear infinite;
  box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.45);
}
tr.top-1-cell .position-badge {
  background: #FFD700;
  box-shadow: 0 0 8px rgba(255,215,0,0.7);
}

tr.top-2-cell {
  font-weight: bold;
  background: linear-gradient(120deg,
    rgba(230,230,230,0.7) 0%,
    rgba(169,169,169,0.25) 50%,
    rgba(230,230,230,0.7) 100%);
  background-size: 200% 200%;
  animation: shimmer 3s linear infinite;
  box-shadow: inset 0 0 25px rgba(192,192,192,0.45);
}
tr.top-2-cell .position-badge {
  background: #C0C0C0;
  box-shadow: 0 0 8px rgba(192,192,192,0.7);
}

tr.top-3-cell {
  font-weight: bold;
  background: linear-gradient(120deg,
    rgba(205,127,50,0.7) 0%,
    rgba(139,69,19,0.25) 50%,
    rgba(205,127,50,0.7) 100%);
  background-size: 200% 200%;
  animation: shimmer 3s linear infinite;
  box-shadow: inset 0 0 25px rgba(205,127,50,0.45);
}
tr.top-3-cell .position-badge {
  background: #CD7F32;
  color: #fff;
  box-shadow: 0 0 8px rgba(205,127,50,0.7);
}

/* --- ESTILOS PARA TOP 4 Y 5 --- */
tr.top-4-cell {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff; /* números blancos */
}
tr.top-5-cell {
  background-color: rgba(255,255,255,0.05) !important;
  color: #fff;
}
tr.top-6-cell {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff; /* números blancos */
}
tr.top-7-cell {
  background-color: rgba(255,255,255,0.05) !important;
  color: #fff;
}

tr.top-1-cell:hover,
tr.top-2-cell:hover,
tr.top-3-cell:hover {
  cursor: pointer;
  transform: scale(1.01);
  transition: transform 0.3s ease;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.3);
}

/* --- ESTILOS PARA LAS RECOMPENSAS --- */
.reward-cell {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: bold;
    color: #4CAF50;
    font-size: 1em;
}

/* Esta es la nueva regla para la imagen */
.reward-cell .dollar-image-icon {
    width: 24px;  /* Ajusta este valor para cambiar el tamaño de la imagen */
    height: 24px; /* Mantén el mismo valor para que no se deforme */
    vertical-align: middle;
}
/* Estilos para el badge de las posiciones 4 y 5 */
tr.top-4-cell .position-badge {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

tr.top-5-cell .position-badge {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

tr.top-6-cell .position-badge {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

tr.top-7-cell .position-badge {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
}

/* ================================================================== */
/* --- REGLA PARA RESPONSIVE EN DISPOSITIVOS MÓVILES --- */
/* ================================================================== */
@media (max-width: 768px) {

  .ranking-container {
    padding: 10px;
    margin: 20px auto;
    max-width: 380px;
  }

  /* --- INICIO DE LA CORRECCIÓN --- */

  /* 1. El DIV wrapper se encarga del scroll */
  .table-scroll-wrapper {
      width: 100%;
      overflow-x: auto; /* <-- El scroll se aplica aquí */
      -webkit-overflow-scrolling: touch;
  }

  /* 2. La tabla (width: 100%) se mantiene como tabla.
      Quitamos el 'display: block' y 'overflow-x' que la rompían */
  #ranking-table {
      width: 100%;
      /* NO LLEVA 'display: block' */
      /* NO LLEVA 'overflow-x' */
  }
  
  /* --- FIN DE LA CORRECCIÓN --- */


  /* Ocultar columna Cartas (4ª) POR DEFECTO */
  #ranking-table th:nth-child(4),
  #ranking-table td:nth-child(4) {
    display: none;
  }

  /* Ocultar columna Mes Anterior (6ª) POR DEFECTO */
  #ranking-table th:nth-child(6),
  #ranking-table td:nth-child(6) {
    display: none;
  }

  /* Ajustes de celdas */
  #ranking-table th, 
  #ranking-table td {
    padding: 10px 5px;
    font-size: 0.85rem;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  }

  /* Columna nombre/correo */
  #ranking-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
    min-width: 120px;
    max-width: 180px;
  }

  /* Recompensa */
  #ranking-table td:nth-child(5) {
    white-space: nowrap;
    font-size: 0.9rem;
  }

/* --- Botón para mostrar/ocultar columnas --- */
  .toggle-columns-btn {
    display: block; /* Solo se muestra en móvil */
    font-size: 0.85rem;
    font-weight: bold;
    opacity: 0.8;
    margin-bottom: 6px;
    margin-left: auto; /* Alinea a la derecha */
    margin-right: 0;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
    position: relative;
    top: -5px;
  }
  .toggle-columns-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
  }

  /* --- Lógica para mostrar columnas --- */
  /* Cuando la tabla tiene esta clase, se muestran las celdas */
  #ranking-table.show-all-columns th:nth-child(4),
  #ranking-table.show-all-columns td:nth-child(4),
  #ranking-table.show-all-columns th:nth-child(6),
  #ranking-table.show-all-columns td:nth-child(6) {
    display: table-cell; /* Se muestran como celdas */
  }

} /* <-- FIN DEL @media */



.reward-stars {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 6px #FFD700;
}

/* TOP 8, 9, 10 CON ESTRELLAS (premios de sobres) */
tr.top-8-cell {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff;
}
tr.top-9-cell {
    background-color: rgba(255,255,255,0.06) !important;
    color: #fff;
}
tr.top-10-cell {
    background-color: rgba(255,255,255,0.04) !important;
    color: #fff;
}

/* Badges para 8, 9, 10 */
tr.top-8-cell .position-badge,
tr.top-9-cell .position-badge,
tr.top-10-cell .position-badge {
    background: rgba(255, 215, 0, 0.20);
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.35);
}

/* Animación suave si pasas por encima */
tr.top-8-cell:hover,
tr.top-9-cell:hover,
tr.top-10-cell:hover {
    transform: scale(1.01);
    transition: transform 0.2s ease;
    cursor: pointer;
}

tr.top-4-cell:hover,
tr.top-5-cell:hover,
tr.top-6-cell:hover,
tr.top-7-cell:hover {
    cursor: pointer;
    transform: scale(1.01);
    transition: transform 0.3s ease;
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.3);
}