/* ============================================================
   juego-ranking.css — Fase E (Despensa Isa)
   Estilos del panel de ranking. Autónomo: no pisa clases de
   juego-zombis.css. Todo bajo el prefijo .dj-rank.
   ============================================================ */

.dj-rank { color: #eaeaf2; font-family: inherit; }

.dj-rank__titulo {
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  text-align: center;
}

/* Pestañas de scope */
.dj-rank__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  margin-bottom: .5rem;
}
.dj-rank__tab {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #d8d8e6;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .85rem;
  cursor: pointer;
}
.dj-rank__tab.is-activo {
  background: #ffcc33;
  color: #1a1030;
  border-color: #ffcc33;
  font-weight: 700;
}

/* Selector de dificultad */
.dj-rank__dif {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
  margin-bottom: .6rem;
}
.dj-rank__difLbl { font-size: .82rem; opacity: .85; }
.dj-rank__difSel {
  background: rgba(255, 255, 255, .08);
  color: #eaeaf2;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .5rem;
  padding: .25rem .5rem;
  font-size: .85rem;
}

/* Posición personal */
.dj-rank__personalWrap { margin-bottom: .5rem; min-height: 1.6rem; }
.dj-rank__personal {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  justify-content: center;
  background: rgba(124, 92, 255, .18);
  border: 1px solid rgba(124, 92, 255, .4);
  border-radius: .6rem;
  padding: .4rem .6rem;
  font-size: .9rem;
}
.dj-rank__pos { font-weight: 800; color: #ffcc33; }
.dj-rank__anon {
  text-align: center;
  font-size: .85rem;
  opacity: .9;
  background: rgba(255, 255, 255, .05);
  border-radius: .6rem;
  padding: .5rem .6rem;
}

/* Estados */
.dj-rank__offline,
.dj-rank__vacio,
.dj-rank__cargando { text-align: center; font-size: .88rem; opacity: .85; padding: .6rem; }
.dj-rank__offline { color: #ffb347; }
.dj-rank__error { text-align: center; padding: .6rem; }
.dj-rank__reintentar,
.dj-rank__mas {
  margin-top: .4rem;
  border: none;
  background: #7c5cff;
  color: #fff;
  border-radius: .6rem;
  padding: .45rem 1rem;
  font-size: .9rem;
  cursor: pointer;
}
.dj-rank__mas { display: block; margin: .6rem auto 0; }
.dj-rank__mas:disabled { opacity: .6; cursor: default; }

/* Lista */
.dj-rank__lista { list-style: none; margin: 0; padding: 0; }
.dj-rank__fila {
  display: grid;
  grid-template-columns: 2.2rem 2rem 1fr auto;
  align-items: center;
  gap: .4rem;
  padding: .45rem .3rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dj-rank__num { font-weight: 800; color: #ffcc33; text-align: right; }
.dj-rank__avatar { font-size: 1.2rem; text-align: center; }
.dj-rank__nombre {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dj-rank__puntos { font-weight: 700; white-space: nowrap; }
.dj-rank__meta {
  grid-column: 3 / 5;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .72rem;
  opacity: .8;
  margin-top: .15rem;
}
.dj-rank__meta > span {
  background: rgba(255, 255, 255, .07);
  border-radius: .4rem;
  padding: .05rem .35rem;
}
.dj-rank__jefe { color: #ffcc33; }