/* Ranking: casca da página no tema escuro (fundo marinho profundo, pensado para a TV da sala de reunião). */
body.rank { background: var(--marinho-900); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.fundo {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(160deg, var(--marinho-900) 30%, var(--marinho-500) 150%);
}
.fundo i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.fundo-a { left: -30vmax; top: -48vmax; background: radial-gradient(closest-side, rgb(8 140 174 / 0.3), transparent); }
.fundo-b { right: -36vmax; bottom: -52vmax; background: radial-gradient(closest-side, rgb(98 180 85 / 0.24), transparent); }

body.rank .faixa-demo { border-bottom: 1px solid rgb(255 255 255 / 0.15); background: transparent; }

.rank-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  padding: var(--esp-4) clamp(16px, 3vw, 48px) 0;
}
.rank-titulo {
  font-size: clamp(1.4rem, 0.7rem + 2.4vw, 3.1rem);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.015em;
  color: var(--texto-forte);
}

/* Controles no rodapé: a TV fica só com a logo e o título no alto */
.rank-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-5);
  padding: var(--esp-3) clamp(16px, 3vw, 48px) var(--esp-4);
}
.rank-controles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); transition: opacity 400ms var(--curva-saida); }
.mes-nav { display: inline-flex; align-items: center; gap: var(--esp-2); }
.mes-rotulo { min-width: 9.5ch; text-align: center; font-weight: 600; color: var(--texto-forte); }
.botao--icone { width: var(--alvo-minimo); padding: 0; font-size: 1.5rem; line-height: 1; }

.rank-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rank-main [hidden] { display: none !important; }

.rank-dicas {
  display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-5);
  font-size: var(--tam-1); color: var(--texto-suave);
  transition: opacity 400ms var(--curva-saida);
}
body.rank kbd { background: rgb(255 255 255 / 0.1); color: var(--texto-forte); border-color: var(--neutro-200); }

.regra-rodape { font-size: var(--tam-1); color: var(--texto-suave); }

/* Em tela cheia, os controles e as dicas somem quando o mouse fica parado */
body.ocioso .rank-controles, body.ocioso .rank-dicas { opacity: 0; pointer-events: none; }
body.ocioso { cursor: none; }

.rank-titulo { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .rank-topo { grid-template-columns: auto minmax(0, 1fr); }
  .rank-rodape {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--marinho-900); border-top: 1px solid var(--linha);
    padding: var(--esp-2) var(--esp-4);
  }
  .rank-controles { width: 100%; }
  .rank-controles .botao { flex: 1 1 auto; }
  .mes-nav { flex: 1 1 100%; justify-content: space-between; }
  .rank-dicas, #btn-tela { display: none; }
}

@media (max-width: 480px) {
  .rank-topo { grid-template-columns: minmax(0, 1fr); }
}
.rank-estado { padding: var(--esp-5) clamp(16px, 3vw, 48px) 0; }
.rank-estado .estado { background: var(--superficie); color: var(--texto); border-color: var(--linha); }
.rank-estado .estado--erro { background: var(--negativo-tom); color: var(--coral-700); border-color: var(--coral-700); }
.rank-estado .giro { border-color: rgb(255 255 255 / 0.25); border-top-color: var(--verde-300); }
.rank-main .estado .botao--sec { color: var(--texto); }
.rank-estado .estado--erro .botao--sec { color: var(--marinho-500); background: var(--neutro-0); }
.atalhos-chave { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-minimo); color: var(--texto-suave); }
.atalhos-chave input { width: 22px; height: 22px; margin: 0; }
.rank-conteudo { display: contents; }
.aviso-publico {
  grid-column: 1 / -1; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-2);
  border: 1px dashed var(--linha); color: var(--texto); background: var(--superficie);
}
.sem-dados-publicos .podio-bloco, .sem-dados-publicos .lateral, .sem-dados-publicos .regra-rodape { display: none; }
#q-vazio { padding: var(--esp-4); border: 1px dashed var(--linha); border-radius: var(--raio-2); }
.apresentacao > .aviso-publico { grid-area: auto; }