/* =========================================================================
   PlayCash — perfil e ranking

   Arquivo da frente de PERFIL E RANKING (www/js/telas/perfil.js,
   ranking.js). Só o que é exclusivo dessas telas. A base já entrega:
   .perfil-topo, .avatar, .avatar-p, .grade-stats, .stat, .linha-acao,
   .interruptor, .etiqueta-nivel, .barra, .linha-pessoa, .posicao,
   .rodape-nota, .vazio, .esqueleto.

   Carrega DEPOIS de styles.css: no empate de especificidade, o que estiver
   aqui vence.

   Nenhuma cor escrita aqui — só token. Nenhuma medida fora da escala base 4.
   ========================================================================= */

/* ============================================================== RANKING */

/* O cartão da sua posição é .cartao-marca: fundo azul da marca com texto
   branco. Barra e botão precisam do mesmo tratamento que .cartao-saldo já
   recebe na base — o preenchimento padrão da barra é o gradiente da própria
   marca, e azul sobre azul não aparece. */
.rank-voce { gap: var(--e-2); }

.rank-voce .barra {
  background: var(--overlay);
  margin-top: var(--e-1);
}

.rank-voce .barra-fill { background: var(--sobre-marca); }

@supports (color: color-mix(in srgb, transparent, transparent)) {
  .rank-voce .barra { background: color-mix(in srgb, var(--sobre-marca) 28%, transparent); }
}

.rank-voce .btn-primario {
  background: var(--sobre-marca);
  color: var(--marca);
  box-shadow: none;
  margin-top: var(--e-2);
}

/* O valor da semana não encolhe: quem some na borda é o nome, que já tem
   reticências. Dinheiro cortado pela metade é pior que nome cortado. */
.rank-ganho {
  flex: none;
  font-size: var(--txt-corpo);
}

/* A cidade acompanha a regra do nome: em 320px "São Bernardo do Campo, SP"
   empurraria o valor para fora da linha. */
.linha-pessoa-info .nota {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fora do top, a sua linha fica fixada no fim da lista, atrás de um corte —
   com quem está um degrau acima logo antes dela. */
.rank-fixa { margin-top: var(--e-3); }

.rank-corte {
  text-align: center;
  color: var(--texto-3);
  font-size: var(--txt-nota);
  letter-spacing: var(--letra-rotulo);
  line-height: 1;
  padding: var(--e-1) 0;
}

/* =============================================================== PERFIL */

/* O que o próximo nível destrava. Cartão suave, para não competir com o
   cartão do nível de hoje logo acima. */
.nivel-destrave { gap: var(--e-2); }

.nivel-ganho {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-nota);
  line-height: var(--altura-normal);
}

.nivel-ganho > .icone-ouro {
  display: grid;
  place-items: center;
  flex: none;
}

/* ==========================================================================
   A ESCADA DE NÍVEIS
   Os seis degraus de uma vez, na horizontal. Passados acesos, o atual
   marcado, os futuros apagados — mas legíveis: nível bloqueado que não dá
   para ler não convida ninguém a subir.
   ========================================================================== */

.escada {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-block-start: var(--e-3, 14px);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-start: 2px;
}
.escada::-webkit-scrollbar { display: none; }

.escada-degrau {
  flex: 1 1 0;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}

/* A linha que liga um degrau ao outro nasce do próprio degrau, e não de um
   elemento extra: assim ela acompanha a largura sem cálculo. */
.escada-degrau::before {
  content: '';
  position: absolute;
  top: 8px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--borda);
}
.escada-degrau:first-child::before { display: none; }
.escada-degrau.passou::before,
.escada-degrau.aqui::before { background: var(--amarelo); }

.escada-marca {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--superficie);
  border: 2px solid var(--borda);
  color: var(--sobre-amarelo);
}

.escada-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--borda-forte);
}

.escada-degrau.passou .escada-marca {
  background: var(--amarelo);
  border-color: var(--amarelo);
}

/* O degrau atual ganha um anel em volta — o único da fileira. */
.escada-degrau.aqui .escada-marca {
  background: var(--amarelo);
  border-color: var(--amarelo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarelo) 26%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .escada-degrau.aqui .escada-marca { box-shadow: 0 0 0 4px var(--superficie-3); }
}

.escada-degrau.aqui .escada-ponto {
  background: var(--sobre-amarelo);
  width: 7px;
  height: 7px;
}

.escada-nome {
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--texto-3);
  white-space: nowrap;
}

.escada-degrau.passou .escada-nome { color: var(--texto-fraco); }

.escada-degrau.aqui .escada-nome {
  color: var(--texto);
  font-weight: 700;
}

/* Os números do perfil: o ícone agora é desenho, então precisa de cor e caixa
   em vez do bloco de emoji que existia. */
.stat-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--superficie-3);
  color: var(--marca-texto);
}

/* ================================================= O QUE O PÓDIO LEVA

   Três linhas, uma por lugar do pódio, com o metal de cada posição na lateral.
   O valor à direita é quanto a semana precisa render para chegar ali — sai da
   mesma curva que desenha a lista abaixo, então prêmio e ranking nunca contam
   histórias diferentes. */

.premiacao {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.premiacao-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  /* A faixa de metal na borda esquerda: ouro, prata, bronze. É o que faz as três
     linhas serem um pódio em vez de uma lista de três itens iguais. */
  border-left: 3px solid var(--metal, var(--borda-forte));
}

.premiacao-1 { --metal: #E8B923; }
.premiacao-2 { --metal: #C9CDD4; }
.premiacao-3 { --metal: #CD7F32; }

.premiacao-pos {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--metal) 18%, transparent);
  color: var(--metal);
  flex: none;
}

.premiacao-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* O nome do prêmio não parte no meio: "iPhone 17 Pro Max" quebrando o Max para
   a linha de baixo lê como erro de tela, e não como quebra de texto. */
.premiacao-nome {
  line-height: var(--altura-apertada);
  text-wrap: balance;
}

/* A logo do prêmio no lugar do ícone: quadro claro, porque quase toda logo é
   feita para viver sobre branco e some sobre o carvão do app. */
.premiacao-pos-logo {
  background: #FFFFFF;
  padding: 4px;
  overflow: hidden;
}

.premiacao-pos-logo .marca-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A FOTO DO PRÊMIO. Maior que a logo e maior que o ícone, porque ela é o que a
   pessoa está perseguindo — as outras duas eram etiqueta, esta é o objeto.

   O QUADRO É EM PÉ, e o fundo é escuro. Ele era deitado e branco, porque as
   fotos eram recortes de catálogo em fundo branco — uma delas com a marca
   d'água do banco de imagens atravessada, que na miniatura virava sujeira. As
   três agora saem de uma arte só, montada pelo dono, com o produto sobre fundo
   escuro e brilho atrás. Quadro branco em volta dessa arte devolveria a moldura
   que o recorte tirou.

   `cover` e não `contain`: a arte já vem no formato exato do quadro, e `cover`
   garante que nenhuma tarja apareça se a arte mudar um pixel de proporção. */
.premiacao-item:has(.premiacao-pos-foto) { grid-template-columns: 88px 1fr; }

.premiacao-pos-foto {
  width: 88px;
  height: 105px;
  border-radius: var(--raio-p);
  background: #08080A;
  overflow: hidden;
  padding: 0;
  /* O fio na cor da posição: ouro, prata, bronze. É o mesmo metal da faixa da
     esquerda, e é ele que faz o segundo lugar não parecer o primeiro. */
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--metal) 55%, transparent);
}

.premiacao-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}