/* ==========================================================================
   BCLWEB - MODERN RANKING & LEADERBOARDS (EA SPORTS FC & SOFASCORE DESIGN)
   ========================================================================== */

/* Container Principal do Ranking */
.rankings-page {
  padding-bottom: 2rem;
}

/* Título e Cabeçalho de Seção */
.ea-section-title {
  font-family: var(--bcl-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #ffffff 0%, var(--bcl-neon-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 15px rgba(0, 242, 254, 0.2);
}

/* --------------------------------------------------------------------------
   FILTROS HORIZONTAIS COM CHIPS DESLIZANTES NO MOBILE
   -------------------------------------------------------------------------- */
.ea-ranking-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bcl-bg-surface-glass);
  backdrop-filter: var(--bcl-glass-blur);
  -webkit-backdrop-filter: var(--bcl-glass-blur);
  border: 1px solid var(--bcl-border-subtle);
  border-radius: var(--bcl-radius-lg);
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  box-shadow: var(--bcl-shadow-ambient);
}

.ea-pills-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ea-pills-group::-webkit-scrollbar {
  display: none;
}

.ea-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bcl-border-subtle);
  color: #94a3b8;
  padding: 8px 16px;
  border-radius: var(--bcl-radius-pill);
  font-family: var(--bcl-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ea-pill-btn:active {
  transform: scale(0.94);
}

.ea-pill-btn.active {
  background: linear-gradient(135deg, var(--bcl-neon-cyan), var(--bcl-neon-blue)) !important;
  border-color: transparent !important;
  color: #060a12 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px var(--bcl-neon-cyan-glow);
}

/* --------------------------------------------------------------------------
   PÓDIO TOP 3 DA TEMPORADA (CARDS GLAMOUR / GOLD)
   -------------------------------------------------------------------------- */
.podium-section {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 1.5rem 0 2rem;
  padding: 0 8px;
}

.podium-step {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.8) 0%, rgba(10, 18, 32, 0.95) 100%);
  border: 1px solid var(--bcl-border-subtle);
  border-radius: var(--bcl-radius-lg);
  padding: 16px 8px 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(12px);
}

.podium-step:active {
  transform: scale(0.95);
}

/* 1º Lugar (Ouro / Campeão) */
.podium-step.first {
  order: 2;
  transform: translateY(-16px);
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.25), 0 0 20px rgba(255, 215, 0, 0.15) inset;
}

.podium-step.first .podium-base {
  background: linear-gradient(135deg, #ffd700, #ff9f1a);
  color: #000;
  font-weight: 900;
}

/* 2º Lugar (Prata) */
.podium-step.second {
  order: 1;
  border-color: rgba(203, 213, 225, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.podium-step.second .podium-base {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #000;
  font-weight: 900;
}

/* 3º Lugar (Bronze) */
.podium-step.third {
  order: 3;
  border-color: rgba(205, 127, 50, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.podium-step.third .podium-base {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: #fff;
  font-weight: 900;
}

.podium-avatar-wrap {
  position: relative;
  margin-bottom: 8px;
}

.podium-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.podium-step.first .podium-avatar-img {
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
}

.podium-medal-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.podium-name {
  font-family: var(--bcl-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.podium-pts {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--bcl-neon-cyan);
  margin-top: 2px;
}

.podium-base {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   TABELA / LISTA DE CLASSIFICAÇÃO FUT DE ALTA DENSIDADE
   -------------------------------------------------------------------------- */
.ea-ranking-table-card {
  background: var(--bcl-bg-surface-glass);
  backdrop-filter: var(--bcl-glass-blur);
  -webkit-backdrop-filter: var(--bcl-glass-blur);
  border: 1px solid var(--bcl-border-subtle);
  border-radius: var(--bcl-radius-lg);
  overflow: hidden;
  box-shadow: var(--bcl-shadow-ambient);
}

.ea-standings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ea-thead th {
  background: rgba(10, 18, 32, 0.85);
  color: #94a3b8;
  font-family: var(--bcl-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 10px;
  border-bottom: 1px solid var(--bcl-border-subtle);
}

.ea-fc-row {
  transition: background-color 0.18s ease;
}

.ea-fc-row td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  vertical-align: middle;
}

.ea-fc-row:hover {
  background-color: rgba(0, 242, 254, 0.05);
}

/* Linha do Usuário Conectado (Destaque Neon) */
.rank-logged-row {
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.12) 0%, rgba(79, 172, 254, 0.05) 100%) !important;
  border-left: 3px solid var(--bcl-neon-cyan);
}

/* Badge de OVR estilo FUT Shield */
.ea-ovr-pill {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: var(--bcl-neon-cyan);
  font-family: var(--bcl-font-display);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
}

/* --------------------------------------------------------------------------
   CARDS DE JOGADOR NO MODO CARDS (MOBILE OPTIMIZED)
   -------------------------------------------------------------------------- */
.ranking-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-card {
  background: linear-gradient(160deg, rgba(16, 28, 48, 0.85) 0%, rgba(8, 14, 26, 0.95) 100%);
  border: 1px solid var(--bcl-border-subtle);
  border-radius: var(--bcl-radius-md);
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.ranking-card:active {
  transform: scale(0.98);
}

.rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rc-pos {
  font-family: var(--bcl-font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #94a3b8;
  min-width: 24px;
}

.rc-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rc-points {
  text-align: right;
}

.rc-points .rc-value {
  font-family: var(--bcl-font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--bcl-neon-cyan);
  display: block;
  text-shadow: 0 0 10px var(--bcl-neon-cyan-glow);
}

.rc-points .rc-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

/* Grid de Estatísticas Sofascore no Card */
.rc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 4px;
  border-radius: var(--bcl-radius-xs);
}

.rc-stat .rc-label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}

.rc-stat .rc-value {
  font-family: var(--bcl-font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.rc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rc-actions .ea-fc-btn {
  flex: 1;
}