.ranking-section { padding-top: 24px; }

.ranking-period-tabs { display: flex; gap: 6px; margin-top: 16px; }
.ranking-period-tab {
  background: var(--panel); border: 1px solid var(--iron-dim); color: var(--bone-dim); padding: 8px 16px;
  border-radius: 999px; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.ranking-period-tab:hover { border-color: var(--gold-dim); }
.ranking-period-tab.active { background: rgba(209,162,79,0.14); border-color: var(--gold); color: var(--gold-bright); }

/* start: cada coluna com a altura do próprio conteúdo. Com stretch, o quadro "Você" (só em Mais Gastou) abria um vão
   grande antes do "Ver ranking completo" nas outras duas. */
.ranking-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .ranking-columns { grid-template-columns: minmax(0, 1fr); } }

.ranking-column {
  min-width: 0;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column;
}
.ranking-column.featured {
  border: 1px solid var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 20px 50px rgba(209,162,79,0.14);
  background: linear-gradient(180deg, rgba(209,162,79,0.06) 0%, var(--panel) 40%);
}

/* Cabeçalho de cada coluna */
.ranking-col-header { text-align: center; margin-bottom: 20px; }
.ranking-col-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px; display: flex;
  align-items: center; justify-content: center; border: 1px solid;
}
.ranking-col-icon .icon { width: 22px; height: 22px; }
.ranking-col-header h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 4px; }
.ranking-col-header p { font-size: 0.72rem; color: var(--bone-dim); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }

/* Cores por coluna */
.ranking-column-kills .ranking-col-icon { background: rgba(184,35,47,0.14); border-color: var(--ember-deep); color: var(--ember-bright); }
.ranking-column-kills .ranking-col-header h2 { color: var(--ember-text); }
.ranking-column-spending .ranking-col-icon { background: rgba(209,162,79,0.16); border-color: var(--gold); color: var(--gold-bright); }
.ranking-column-spending .ranking-col-header h2 { color: var(--gold-bright); }
.ranking-column-playtime .ranking-col-icon { background: rgba(111,174,90,0.15); border-color: var(--good); color: var(--good); }
.ranking-column-playtime .ranking-col-header h2 { color: var(--good); }

/* Pódio (top 3) */
.ranking-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-bottom: 20px; min-height: 170px; }
.podium-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.podium-slot[data-rank="1"] { order: 2; }
.podium-slot[data-rank="2"] { order: 1; }
.podium-slot[data-rank="3"] { order: 3; }

.podium-avatar-wrap { position: relative; }

/* Avatar vira link pro perfil público só quando a pessoa deixou
   público (ver avatarImgHtml em ranking.js) — o cursor e o leve zoom
   no hover deixam claro que dá pra clicar, sem exigir nenhum texto
   "ver perfil" extra poluindo o pódio. */
.ranking-avatar-link { display: inline-block; line-height: 0; cursor: pointer; }
.ranking-avatar-link img { transition: transform 0.15s ease, filter 0.15s ease; }
.ranking-avatar-link:hover img { transform: scale(1.06); filter: brightness(1.1); }

/* Nome vira link pro perfil público do mesmo jeito que o avatar — cor
   normal (não o azul padrão de link do navegador), só destaca no hover. */
.ranking-name-link { color: inherit; text-decoration: none; cursor: pointer; }
.ranking-name-link:hover { color: var(--gold-bright); text-decoration: underline; }

.podium-avatar {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--iron-dim); background: var(--void);
}
.podium-slot[data-rank="1"] .podium-avatar { width: 78px; height: 78px; }
.podium-rank-badge {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: #1a1310; border: 2px solid var(--panel);
}
/* top mais negativo que antes — o desenho novo da coroa é mais "cheio"
   (preenchido, quase até a borda da caixa) que o ícone fino de contorno
   de antes, então com a folga antiga ele encostava/sobrepunha o
   círculo do número 1 logo abaixo. */
.podium-crown { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; color: var(--gold-bright); }

/* Cor da borda/badge por posição */
.podium-slot[data-rank="1"] .podium-avatar { border-color: var(--gold); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--gold-dim), 0 8px 24px rgba(209,162,79,0.35); }
.podium-slot[data-rank="1"] .podium-rank-badge { background: var(--gold); }
.podium-slot[data-rank="2"] .podium-avatar { border-color: #a8a8a8; }
.podium-slot[data-rank="2"] .podium-rank-badge { background: #c4c4c4; }
.podium-slot[data-rank="3"] .podium-avatar { border-color: #a15c37; }
.podium-slot[data-rank="3"] .podium-rank-badge { background: #c17a4f; }

.podium-name { font-size: 0.82rem; font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-slot[data-rank="1"] .podium-name { font-size: 0.9rem; }
/* Mesmo espaço para o valor nas três colunas (o de Kills tem duas linhas, número e "KILLS"; Mais Gastou não mostra
   valor): o pódio é alinhado pela base, então sem isso as fotos e os nomes ficavam em alturas diferentes. */
.podium-value { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; text-align: center; min-height: 2.35rem; }
.podium-slot[data-rank="1"] .podium-value { font-size: 1.05rem; min-height: 2.6rem; }
/* Colunas empilhadas (até 980px, como .ranking-columns): não há o que alinhar, e o espaço vazio só abriria um vão. */
@media (max-width: 980px) {
  .podium-value:empty { display: none; }
  /* Sem valor o pódio fica mais baixo: a altura mínima de 170px abriria um vão em cima. Fica só o espaço da coroa. */
  .ranking-column-spending .ranking-podium { min-height: 0; padding-top: 30px; }
}
.podium-value-sub { font-size: 0.68rem; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.04em; display: block; }

.ranking-column-kills .podium-value { color: var(--ember-text); }
.ranking-column-spending .podium-value { color: var(--gold-bright); }
.ranking-column-playtime .podium-value { color: var(--good); }

/* Lista #4 em diante */
.ranking-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.ranking-list-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--iron-dim);
  font-size: 0.84rem;
}
.ranking-list-row:last-child { border-bottom: none; }
.ranking-list-rank { width: 18px; flex-shrink: 0; color: var(--bone-dim); font-family: var(--font-mono); font-size: 0.78rem; }
.ranking-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-list-value { font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; }
.ranking-column-kills .ranking-list-value { color: var(--ember-text); }
.ranking-column-spending .ranking-list-value { color: var(--gold-bright); }
.ranking-column-playtime .ranking-list-value { color: var(--good); }

/* Faixa "Você" do ranking de compradores, acima das colunas (fora delas, para nenhuma mudar de altura): posição e total
   de quem está logado. O valor só a própria pessoa vê. */
.ranking-me {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 18px;
  padding: 10px 16px; border: 1px solid var(--gold-dim); border-radius: 10px; background: var(--panel); font-size: 0.88rem;
}
.ranking-me[hidden] { display: none; }
.ranking-me > .icon { width: 18px; height: 18px; color: var(--gold-bright); flex-shrink: 0; }
.ranking-me-main strong { font-weight: 700; }
.ranking-me-value { font-family: var(--font-mono); font-weight: 600; color: var(--gold-bright); }
.ranking-me-note { margin-left: auto; color: var(--bone-dim); font-size: 0.78rem; }
.ranking-me-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .ranking-me-note { margin-left: 0; flex-basis: 100%; } }

/* Botão "ver ranking completo" */
.ranking-view-all-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto;
  background: none; border: 1px solid var(--iron-dim); border-radius: 8px; padding: 10px; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; color: var(--bone-dim); transition: border-color 0.15s ease, color 0.15s ease;
}
.ranking-view-all-btn .icon { width: 14px; height: 14px; }
.ranking-column-kills .ranking-view-all-btn:hover { border-color: var(--ember-deep); color: var(--ember-text); }
.ranking-column-spending .ranking-view-all-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.ranking-column-playtime .ranking-view-all-btn:hover { border-color: var(--good); color: var(--good); }

.ranking-update-note {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0;
  font-size: 0.8rem; color: var(--bone-dim);
}
.ranking-update-note .icon { width: 14px; height: 14px; color: var(--good); }

/* Modal do ranking completo */
.ranking-full-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.ranking-full-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--iron-dim);
}
.ranking-full-row:last-child { border-bottom: none; }
.ranking-full-rank { width: 26px; flex-shrink: 0; font-family: var(--font-mono); color: var(--bone-dim); text-align: center; }
.ranking-full-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--iron-dim); }
.ranking-full-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.ranking-full-value { font-family: var(--font-mono); font-weight: 600; flex-shrink: 0; }
.ranking-booster-icon { width: 12px; height: 12px; color: #b98eff; vertical-align: -1px; margin-left: 3px; flex-shrink: 0; }

/* Mesmo gradiente Discord (blurple/rosa/roxo) já usado nos cards de
   booster da Conta/Perfil, só que "pintando" o texto do nome em vez de
   uma borda — pra quem tá dando boost se destacar no ranking mesmo sem
   parar pra reparar na gema do lado. */
.is-booster-name {
  font-weight: 700;
  background: linear-gradient(120deg, #7289da, #ff73fa, #b98eff, #7289da);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: rankingBoosterNameShimmer 6s ease infinite;
}
/* Sem isso, o :hover normal do link (.ranking-name-link:hover, cor
   dourada sólida) ganharia de ".is-booster-name" por especificidade e
   "apagaria" o gradiente ao passar o mouse — aqui força a manter o
   texto transparente (o gradiente por trás continua a mesma cor,
   sublinhado já indica que é clicável). */
a.is-booster-name:hover { color: transparent; -webkit-text-fill-color: transparent; }
@keyframes rankingBoosterNameShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Toque no celular: nome do jogador no ranking com área clicável maior, sem mudar o desenho. */
@media (max-width: 860px) {
  .ranking-name-link { display: inline-block; padding: 8px 0; margin: -8px 0; }
}