/* ===========================================================================
   Rankings -- o placar que abre no botao do hero
   ---------------------------------------------------------------------------
   Segue as MESMAS REGRAS do mapa de missoes, nao o mesmo estilo:

   * numero vem do servidor, nunca de estimativa;
   * arte vem do cliente (retrato de classe, greca e grao da UI do jogo);
   * componente proprio -- nada de tabela zebrada de painel administrativo;
   * a cor de destaque de cada linha e a do REINO, entao o jogador acha o dele
     sem ler;
   * o estado de repouso e ABERTO: o JS fecha. Sem JS o placar aparece.

   O CARTAO segue o padrao da landing (.c-pilares__bloco): mesmos tokens de
   superficie, borda, raio e o fio dourado no hover. O placar mora na home, e
   cartao com linguagem propria ali brigaria com o resto da pagina. Nada de
   inclinacao: sao quatro colunas que se comparam, e torto atrapalha comparar.
   =========================================================================== */

.c-rank {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2rem, 4vw, 3.4rem);
	overflow: hidden;
}

/* Grao do painel do jogo, de ponta a ponta e MUITO apagado -- aqui ele so tira
   o chapado do preto; a identidade da secao vem dos cartoes, que sao os da
   landing. */
.c-rank::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("/assets/textura/grao.webp") repeat;
	background-size: 168px;
	opacity: .22;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* ---------------------------------------------------------------- cabeca --- */
.c-rank__cabeca {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
}

.c-rank__eyebrow {
	margin: 0 0 .35rem;
	font: 700 .7rem/1 var(--font-secondary, Inter), sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brasa, #c8552f);
}

.c-rank__titulo {
	margin: 0;
	font: 400 clamp(1.5rem, 3.4vw, 2.3rem)/1.1 var(--font-primary, Cinzel), serif;
}

.c-rank__quando {
	margin: 0;
	font-size: .78rem;
	color: rgba(255, 255, 255, .5);
}

/* ---------------------------------------------------------------- grade ---- */
/* CARROSSEL, nao grid: o desenho original era 4 colunas exatas; a 5a
   categoria (skills) num grid auto-fit caia sozinha na linha de baixo,
   esticada -- layout quebrado. Aqui cada card ocupa 1/4 da faixa no desktop
   (pixel-igual ao que era) e o excedente fica a um arrasto/seta de distancia.
   Sem JS continua funcionando: e uma faixa rolavel com scroll-snap. */
.c-rank__grade {
	display: flex;
	gap: clamp(.8rem, 1.6vw, 1.3rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--e-1);
	scrollbar-width: none;
}

.c-rank__grade::-webkit-scrollbar { display: none; }

.c-rank__coluna {
	flex: 0 0 calc((100% - 3 * clamp(.8rem, 1.6vw, 1.3rem)) / 4);
	min-width: 15.5rem;
	scroll-snap-align: start;
}

/* Telefone: um card e meio por tela -- a beirada do proximo convida a
   arrastar, que e como se descobre o resto sem seta nenhuma. */
@media (max-width: 640px) {
	.c-rank__coluna { flex-basis: 85%; min-width: 0; }
}

/* Setas do carrossel: nascem escondidas; o JS as mostra SO quando ha mais
   cards do que a faixa comporta. */
.c-rank__setas[hidden] { display: none; }

.c-rank__setas {
	display: flex;
	gap: 0.4rem;
	justify-content: flex-end;
	margin-bottom: var(--e-2);
}

.c-rank__carroSeta {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--linha-forte);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color var(--transicao), color var(--transicao);
}

.c-rank__carroSeta:hover { border-color: var(--ouro); color: var(--ouro); }

.c-rank__carroSeta[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Cada categoria e um cartao no PADRAO DA LANDING -- os mesmos tokens do
   .c-pilares__bloco: `--surface`, `--linha`, `--raio`, e o fio dourado na borda
   esquerda que acende no hover. Tinha feito uma placa de canto cortado, mas o
   placar mora na home e cartao com linguagem propria ali briga com o resto da
   pagina. O pergaminho tambem saiu: `--surface` e a superficie da landing. */
.c-rank__coluna {
	position: relative;
	padding: var(--e-3, 1.5rem);
	border: 1px solid var(--linha, #26262f);
	border-radius: var(--raio, 14px);
	background: var(--surface, #14141a);
	overflow: hidden;
	transition: border-color var(--transicao, .2s), background var(--transicao, .2s);
}

.c-rank__coluna:hover {
	border-color: var(--linha-forte, #363641);
	background: var(--surface-2, #1a1a22);
}

/* Fio dourado a esquerda, aceso no hover. Nao e border-left: border empurraria o
   conteudo 2px no hover. Mesmo recurso do bloco da landing. */
.c-rank__coluna::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, var(--ouro, #d9b45a), transparent);
	opacity: 0;
	transition: opacity var(--transicao, .2s);
}

.c-rank__coluna:hover::before {
	opacity: 1;
}

.c-rank__colunaTopo {
	margin-bottom: .7rem;
	padding-bottom: .6rem;
	position: relative;
}

/* Greca do jogo como divisor do titulo da coluna. */
.c-rank__colunaTopo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 7px;
	background: url("/assets/textura/greca.webp") repeat-x;
	background-size: auto 100%;
	opacity: .45;
	mix-blend-mode: screen;
	pointer-events: none;
}

.c-rank__colunaRot {
	margin: 0;
	font: 400 1.12rem/1.15 var(--font-primary, Cinzel), serif;
	color: var(--ouro-claro, #f0d68f);
}

.c-rank__colunaNota {
	margin: .15rem 0 0;
	font-size: .74rem;
	color: rgba(255, 255, 255, .48);
}

/* ---------------------------------------------------------------- lista ---- */
.c-rank__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .18rem;
	counter-reset: none;
}

.c-rank__linha {
	display: grid;
	grid-template-columns: 1.5rem 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: .5rem;
	padding: .3rem .35rem;
	border-radius: 7px;
	/* A cor do reino entra como fio a esquerda, nao como fundo colorido: fundo
	   colorido em dez linhas viraria arco-iris. */
	border-left: 2px solid var(--reino, transparent);
	transition: background .18s;
}

.c-rank__linha:hover {
	background: rgba(255, 255, 255, .045);
}

/* Podio: os tres primeiros ganham peso, sem medalha de emoji. */
.c-rank__linha--podio {
	background: rgba(212, 175, 55, .06);
}

.c-rank__linha--podio .c-rank__pos,
.c-rank__linha--podio .c-rank__nome {
	color: var(--ouro-claro, #f0d68f);
}

.c-rank__linha--podio:first-child .c-rank__valor {
	color: var(--ouro-claro, #f0d68f);
}

.c-rank__pos {
	font: 700 .82rem/1 var(--font-secondary, Inter), sans-serif;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: rgba(255, 255, 255, .4);
}

.c-rank__fig {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
}

.c-rank__fig img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	display: block;
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
}

.c-rank__figVazio {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2);
}

.c-rank__quem {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.c-rank__nome {
	font-weight: 600;
	font-size: .88rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c-rank__meta {
	font-size: .7rem;
	color: rgba(255, 255, 255, .45);
}

.c-rank__valor {
	font: 700 .9rem/1 var(--font-secondary, Inter), sans-serif;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.c-rank__valor small {
	display: block;
	margin-top: .12rem;
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .38);
}

.c-rank__semNinguem,
.c-rank__vazio {
	margin: .4rem 0 0;
	font-size: .8rem;
	color: rgba(255, 255, 255, .42);
}

.c-rank__rodape {
	margin: 1.4rem 0 0;
	font-size: .78rem;
	color: rgba(255, 255, 255, .42);
}

/* ===========================================================================
   Abrir e fechar
   ---------------------------------------------------------------------------
   O JS poe `data-fechado` no carregamento. A altura anima por grid-template-rows
   (e nao por max-height chutado): assim a transicao serve para qualquer
   quantidade de linhas, hoje com 2 jogadores e depois com 40.
   =========================================================================== */
.c-rank[data-fechado] {
	padding-block: 0;
	border-block: 0 solid transparent;
}

.c-rank__dobra {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1);
}

.c-rank[data-fechado] .c-rank__dobra {
	grid-template-rows: 0fr;
}

.c-rank__dobra > * {
	overflow: hidden;
	min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.c-rank__dobra {
		transition: none;
	}
}

/* Botao do hero quando o placar esta aberto. */
.c-hero__cta--rank[aria-expanded="true"] {
	border-color: rgba(212, 175, 55, .55);
	background: rgba(212, 175, 55, .12);
}

/* A marca M2 (o mesmo desenho do favicon) no lugar da setinha. Nao gira de
   cabeca pra baixo ao abrir -- logo invertido e logo errado; so acende. */
.c-hero__cta--rank .c-rank__m2 {
	width: 16px;
	height: 16px;
	object-fit: contain;
	filter: saturate(0.8);
	transition: filter .3s, transform .3s;
}

.c-hero__cta--rank .c-rank__m2 { transition: filter .3s, transform .55s ease; }

/* Gira uma volta INTEIRA ao abrir -- anima como a setinha girava, mas o logo
   termina de pe (pedido do dono: nada de marca de cabeca pra baixo). */
.c-hero__cta--rank[aria-expanded="true"] .c-rank__m2 {
	filter: none;
	transform: rotate(360deg);
}

/* ---------------------------------------------------------------- celular -- */
@media (max-width: 620px) {

	.c-rank__linha {
		grid-template-columns: 1.3rem 28px minmax(0, 1fr) auto;
		gap: .4rem;
	}

	.c-rank__fig,
	.c-rank__fig img {
		width: 28px;
		height: 28px;
	}
}