/* =====================================================================
   jogo.css , a PÁGINA DO JOGO (/game/<slug>) inteira.

   Dono único do visual desta página. Os partials dela não imprimem mais
   <style> inline: quando o estilo mora em seis arquivos diferentes, dois
   deles divergem na primeira mudança e ninguém percebe.

   REGRAS QUE ESTE ARQUIVO SEGUE (CONTRATO.md §7 e §9):
     - nenhuma cor literal: tudo sai das variáveis --ng-*. As exceções são
       poucas e cada uma tem motivo (o verificador só aceita estas):
         · #66c0f4 #e60012 #0070d1 #107c10 #a06eff , MARCA de terceiro
           (Steam, Nintendo, PlayStation, Xbox, GOG). Azul da Sony não é
           cor da Nuntius, então não vira token do projeto; mesma decisão
           que o hub-lojas já tinha tomado antes desta reescrita;
         · #000 , fundo de vídeo. Letterbox precisa ser preto de verdade;
           com --ng-fundo (#101012) sobraria uma moldura cinza no quadro;
         · #fff , a marca do X, que é branca sobre preto por definição dela;
     - `prefers-reduced-motion` desliga toda animação no fim do arquivo;
     - nada de @import nem de fonte de CDN.

   ORDEM DO ARQUIVO = ordem da página:
     0. Estrutura de seção        5. Novidades do jogo
     1. Trailer do topo           6. Mídia (YouTube + Steam)
     2. Ficha                     7. Estúdio + fachada do X
     3. Cartão de wishlist        8. As duas barras (descrição/avaliações)
     4. Botões de plataforma      9. Rodapé da página + reduced-motion
   ===================================================================== */

/* =====================================================================
   0. ESTRUTURA , as faixas da página
   ===================================================================== */
.ng-jogo {
	color: var(--ng-tinta);
}

.ng-jogo-secao {
	padding-block: clamp(38px, 5.5vw, 68px);
	border-top: 1px solid var(--ng-fundo-3);
}

.ng-jogo-secao:first-child {
	border-top: 0;
}

/* Faixa sem filete: usada quando duas seções são visualmente uma peça só. */
.ng-jogo-secao--colada {
	border-top: 0;
	padding-top: 0;
}

.ng-jogo-secao__cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: clamp(20px, 2.8vw, 30px);
}

.ng-jogo-secao__titulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: clamp(1.35rem, .9rem + 1.4vw, 1.9rem);
	color: var(--ng-branco);
	margin: 0;
	line-height: 1.15;
}

.ng-jogo-secao__olho {
	display: block;
	font-family: var(--ng-titulo);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ng-destaque);
	margin-bottom: 6px;
}

.ng-jogo-secao__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ng-titulo);
	font-size: .88rem;
	font-weight: 600;
	color: var(--ng-destaque);
	text-decoration: none;
	white-space: nowrap;
}

.ng-jogo-secao__link svg {
	width: 15px;
	height: 15px;
	transition: transform var(--ng-transicao);
}

.ng-jogo-secao__link:hover svg {
	transform: translateX(4px);
}

/* =====================================================================
   1. TRAILER DO TOPO , a primeira coisa que a pessoa vê

   FACHADA, não embed. O <iframe> do YouTube instala cookie e roda script
   de terceiro em TODA visita, mesmo sem ninguém dar play. Aqui a página
   mostra a miniatura (servida pelo próprio YouTube, só imagem) e só troca
   pelo player quando a pessoa CLICA. Ver assets/js/jogo.js.
   ===================================================================== */
.ng-trailer {
	position: relative;
	background: var(--ng-fundo);
}

.ng-trailer__moldura {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: min(78vh, 760px);
	overflow: hidden;
	background: var(--ng-fundo-2);
}

.ng-trailer__moldura img,
.ng-trailer__moldura video,
.ng-trailer__moldura iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
	background: #000;
}

/* O véu escurece o pé do vídeo pro título e os botões terem contraste. */
.ng-trailer__veu {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10, 10, 12, .30) 0%, rgba(10, 10, 12, 0) 32%, rgba(10, 10, 12, .78) 82%, var(--ng-fundo) 100%);
}

.ng-trailer__interno {
	position: absolute;
	inset: auto 0 0 0;
	padding-block: clamp(18px, 3vw, 38px);
	pointer-events: none;
}

/* Só o que é clicável volta a receber o ponteiro: se o bloco inteiro
   voltasse, o título por cima do vídeo roubaria o clique do play. */
.ng-trailer__interno a,
.ng-trailer__interno button {
	pointer-events: auto;
}

.ng-trailer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.ng-trailer__titulo {
	font-family: var(--ng-titulo);
	font-weight: 700;
	color: var(--ng-branco);
	line-height: 1.02;
	font-size: clamp(1.9rem, 1rem + 4.2vw, 3.4rem);
	margin: 0;
	max-width: 20ch;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

/* O botão de play: alvo grande, no meio, sempre visível.

   O <a> cobre a moldura inteira porque ele é o ALVO DE CLIQUE. Mas quem manda
   na posição do círculo é o próprio círculo, ancorado no centro da moldura, e
   não a distribuição de itens de um grid.

   O motivo é medido, não estético. O <a> tem DOIS filhos: o círculo e o texto
   do leitor de tela. Com `display: grid`, o segundo filho abriria uma segunda
   linha e o círculo subiria meia altura , e a única coisa que impede isso hoje
   é `.ng-sr` ser `position: absolute` lá no style.css, que é OUTRO arquivo. Ou
   seja: a centralização do botão dependia de uma regra que não mora aqui, e
   quando ela mudasse o botão sairia do lugar sem erro nenhum para denunciar.
   Ancorado, não tem como acontecer.

   `translate` (a propriedade, e não a função dentro de `transform`) de
   propósito: o hover usa `transform: scale()`, e se a centralização morasse no
   `transform` o primeiro hover apagaria ela e o botão daria um pulo. */
.ng-trailer__play {
	position: absolute;
	inset: 0;
	display: block;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	color: var(--ng-branco);
}

.ng-trailer__play-circulo {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: clamp(64px, 8vw, 92px);
	height: clamp(64px, 8vw, 92px);
	border-radius: var(--ng-raio-pill);
	background: rgba(16, 16, 18, .55);
	border: 2px solid rgba(255, 255, 255, .5);
	backdrop-filter: blur(3px);
	transition: transform var(--ng-transicao), background-color var(--ng-transicao), border-color var(--ng-transicao);
}

/* O TRIÂNGULO, CENTRADO DE VERDADE.

   Aqui havia `margin-left: 8%`, com um comentário dizendo que o triângulo tem
   o peso à esquerda. Ele não tem: o desenho ocupa x de 8 a 19 num viewBox de
   24, ou seja a tinta já nasce à DIREITA do centro da caixa. A margem empurrava
   mais para a direita ainda, e o resultado era medível , a tinta parava a 4px
   do centro num círculo de 64px (6,3% do botão), que é o suficiente para o olho
   ler o play como torto.

   Sem a margem, o centro de massa do triângulo cai a meio pixel do centro do
   círculo. */
.ng-trailer__play-circulo svg {
	width: 42%;
	height: 42%;
}

.ng-trailer__play:hover .ng-trailer__play-circulo,
.ng-trailer__play:focus-visible .ng-trailer__play-circulo {
	transform: scale(1.08);
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
	color: var(--ng-fundo);
}

.ng-trailer__play:focus-visible {
	outline: 3px solid var(--ng-destaque);
	outline-offset: -6px;
}

/* Troca PT/EN , só aparece quando existem as duas versões. */
.ng-trailer__idiomas {
	position: absolute;
	top: clamp(12px, 2vw, 20px);
	right: clamp(12px, 2vw, 20px);
	display: flex;
	gap: 6px;
	padding: 5px;
	border-radius: var(--ng-raio-pill);
	background: rgba(16, 16, 18, .66);
	border: 1px solid var(--ng-borda-forte);
	backdrop-filter: blur(6px);
	z-index: 2;
}

.ng-trailer__idioma {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--ng-titulo);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--ng-raio-pill);
	background: transparent;
	color: var(--ng-tinta-fraca);
	transition: background-color var(--ng-transicao), color var(--ng-transicao);
}

.ng-trailer__idioma:hover {
	color: var(--ng-branco);
}

.ng-trailer__idioma[aria-pressed="true"] {
	background: var(--ng-destaque);
	color: var(--ng-fundo);
}

/* =====================================================================
   TRAILER TOCANDO , o que está por cima sai da frente
   =====================================================================
   Pedido do dono: *"quando dá o play no trailer as tags, o seletor de idioma e
   o nome do jogo ficam na frente, então tem que tirar a opacidade enquanto está
   rolando o trailer e voltar quando pausa"*.

   A chave é a classe `ng-trailer-tocando` no <body>, escrita por
   assets/js/jogo.js. Ela mora no <body> de propósito: o seletor de idioma DO
   SITE vive no cabeçalho, que é outro arquivo , com a classe lá em cima,
   qualquer parte da página consegue reagir sem que este arquivo precise
   conhecer a marcação do cabeçalho.

   `opacity`, e não `display: none` nem `visibility`: o <h1> do jogo mora aqui
   dentro. Um elemento com opacidade zero continua no DOM e na árvore de
   acessibilidade , então o título segue valendo para o buscador e para o leitor
   de tela enquanto o vídeo roda, que é o contrário do que `display: none` faria.

   Sem JS nada disto acontece, e nem precisa: sem JS o clique abre o vídeo no
   YouTube, numa aba nova, e não há trailer rolando aqui para atrapalhar. */
.ng-trailer__veu,
.ng-trailer__interno,
.ng-trailer__idiomas {
	transition: opacity 320ms ease;
}

body.ng-trailer-tocando .ng-trailer__veu,
body.ng-trailer-tocando .ng-trailer__interno,
body.ng-trailer-tocando .ng-trailer__idiomas {
	opacity: 0;
	pointer-events: none;
}

/* `.ng-trailer__interno` devolve o ponteiro ao que é clicável lá dentro (regra
   mais acima). Com o bloco apagado, o ponteiro tem que sair junto , senão sobra
   alvo invisível roubando o clique de quem quer usar o player. */
body.ng-trailer-tocando .ng-trailer__interno a,
body.ng-trailer-tocando .ng-trailer__interno button {
	pointer-events: none;
}

/* A TROCA PT/EN VOLTA COM O PONTEIRO OU COM O FOCO.

   As tags e o título são informação: podem ficar escondidos o tempo todo em que
   o vídeo roda. A troca de idioma é CONTROLE, e controle que some sem jeito de
   voltar vira armadilha , quem quisesse a outra versão do trailer teria que
   recarregar a página. Então ela reaparece assim que o ponteiro entra na faixa
   (o mesmo comportamento dos controles de qualquer player) ou assim que o foco
   do teclado chega ali. */
body.ng-trailer-tocando .ng-trailer:hover .ng-trailer__idiomas,
body.ng-trailer-tocando .ng-trailer:focus-within .ng-trailer__idiomas {
	opacity: 1;
	pointer-events: auto;
}

/* Aviso de privacidade da fachada , discreto, mas presente. */
.ng-fachada__nota {
	margin: 8px 0 0;
	font-size: .74rem;
	line-height: 1.5;
	color: var(--ng-tinta-fraca);
}

/* =====================================================================
   2. FICHA , cápsula + minibio à esquerda, dados à direita
   ===================================================================== */
.ng-ficha {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

@media (min-width: 860px) {
	.ng-ficha {
		grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr);
	}
}

/* Altura automática de propósito: a arte grande é 616×353, o header é 460×215 e
   a cápsula pequena é 231×87 , três proporções diferentes. Cravar aspect-ratio
   esticaria duas delas, e o corte cairia em cima da logo do jogo. */
.ng-ficha__capsula {
	display: block;
	width: 100%;
	/*
	 * O TETO É O TAMANHO REAL DO ARQUIVO, e não um número escolhido no olho.
	 *
	 * O pedido do dono foi *"aumenta o tamanho da capsula para o maximo de
	 * largura da area usavel ali"*, e por causa dele eu tinha tirado o teto por
	 * completo. Isso trocou uma faixa vazia por um defeito pior: a arte era a
	 * `capsule` de 231px de largura, esticada até a coluna inteira , 3× de
	 * aumento, que foi o "baixíssima resolução" que ele viu depois.
	 *
	 * Agora a arte é a cápsula 616×353 (ver `inc/arte-do-jogo.php`), e o teto
	 * de 740px é 1,2× dela: o limite em que o borrão ainda não aparece. No
	 * 1080p a coluna dá ~700px, então ela continua preenchida de ponta a ponta
	 * , a faixa vazia que ele reclamou não volta. Só num monitor bem largo
	 * sobra margem, e aí sobrar margem é melhor do que entregar arte borrada.
	 */
	max-width: 740px;
	height: auto;
	border-radius: var(--ng-raio);
	border: 1px solid var(--ng-fundo-3);
	background: var(--ng-fundo-2);
	margin-bottom: 16px;
}

.ng-ficha__bio {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--ng-tinta);
	max-width: 62ch;
}

.ng-ficha__dados {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-fundo-3);
	border-radius: var(--ng-raio);
	padding: clamp(18px, 2.4vw, 26px);
}

.ng-ficha__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-block: 10px;
	border-bottom: 1px solid var(--ng-fundo-3);
}

.ng-ficha__linha:last-of-type {
	border-bottom: 0;
}

.ng-ficha__rotulo {
	flex: none;
	min-width: 8.5em;
	font-family: var(--ng-titulo);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ng-tinta-fraca);
}

.ng-ficha__valor {
	font-size: .98rem;
	color: var(--ng-branco);
	min-width: 0;
	word-break: break-word;
}

.ng-ficha__valor a {
	color: var(--ng-destaque);
}

.ng-ficha__nome {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
}

.ng-ficha__presskit {
	margin-top: 16px;
}

/* =====================================================================
   3. O EMBED OFICIAL DA STEAM , dentro do card de informações

   Ele mora na coluna de dados da ficha, embaixo do press kit (pedido do
   dono). O cartão de wishlist próprio que existia aqui foi REMOVIDO: as
   regras dele saíram junto, para não sobrar estilo órfão esperando por
   uma marcação que nunca mais vai existir.
   ===================================================================== */
.ng-embed-steam {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ng-fundo-3);
}

.ng-embed-steam__gatilho {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border-radius: var(--ng-raio-pill);
	border: 1px solid rgba(158, 219, 254, .34);
	background: rgba(158, 219, 254, .10);
	color: var(--ng-destaque);
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	transition: background-color var(--ng-transicao), border-color var(--ng-transicao), color var(--ng-transicao);
}

.ng-embed-steam__gatilho:hover,
.ng-embed-steam__gatilho:focus-visible {
	background: rgba(158, 219, 254, .18);
	border-color: var(--ng-destaque);
	color: var(--ng-branco);
}

.ng-embed-steam__gatilho svg {
	width: 17px;
	height: 17px;
	flex: none;
}

/* O iframe só nasce depois do clique (assets/js/jogo.js). */
.ng-embed-steam__alvo iframe {
	width: 100%;
	max-width: 646px;
	height: 190px;
	border: 0;
	border-radius: var(--ng-raio-sm);
	background: var(--ng-fundo-2);
	display: block;
}

.ng-fachada-linha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--ng-corpo);
	font-size: .84rem;
	color: var(--ng-destaque);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ng-fachada-linha svg {
	width: 15px;
	height: 15px;
}

/* =====================================================================
   4. A FAIXA DE PLATAFORMAS (hub-lojas.php)

   O formato é o do print que o dono mandou: a ação dita uma vez, em cima,
   e embaixo as lojas em PÍLULAS lado a lado. Nada de cartão grande com a
   mesma frase repetida em cada plataforma.

   `flex-wrap` em vez de grade de propósito: a faixa tem de 1 a 6 pílulas,
   e uma grade de colunas fixas deixaria buraco quando só a Steam existe ,
   que é o caso da maioria dos jogos hoje (medido: dos 29, quase todos só
   têm Steam cadastrada). Com flex, uma pílula sozinha fica centrada e a
   faixa continua parecendo intencional.

   As cores são de marca de terceiros , ver a nota no topo do arquivo
   sobre por que elas não viram token do CONTRATO §7.
   ===================================================================== */
.ng-faixa-lojas {
	padding: clamp(18px, 2.6vw, 26px) clamp(16px, 2.4vw, 28px);
	border-radius: var(--ng-raio-lg);
	border: 1px solid var(--ng-fundo-3);
	background:
		radial-gradient(120% 180% at 50% 0%, rgba(158, 219, 254, .13), transparent 60%),
		linear-gradient(160deg, var(--ng-fundo-2), var(--ng-fundo));
	text-align: center;
}

.ng-faixa-lojas__titulo {
	margin: 0 0 clamp(14px, 2vw, 20px);
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: clamp(1.15rem, .8rem + 1.1vw, 1.6rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ng-branco);
	line-height: 1.2;
}

.ng-faixa-lojas__pilulas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ng-pilula {
	--loja-cor: var(--ng-destaque);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: var(--ng-raio-pill);
	/*
	 * PINTADA de verdade (pedido do dono: "e bom terem cor"). Antes a cor da
	 * marca so aparecia no icone e na borda do hover, entao a faixa inteira era
	 * uma fileira de retangulos cinzas iguais -- que foi o "muito feios".
	 *
	 * A cor da marca entra por baixo de um veu escuro: cor de marca pura como
	 * fundo joga o contraste do texto para baixo em algumas delas (o verde do
	 * Xbox e o vermelho da Nintendo, medidos), e o texto e o que a pessoa
	 * precisa ler. Assim a pilula fica com a cara da plataforma e o texto
	 * branco continua legivel em todas.
	 */
	/*
	 * O VEU E UMA VARIAVEL, e nao um numero cravado.
	 *
	 * Ele existe para o texto branco sobreviver em marca CLARA. Cravado em .45
	 * ele tambem escurecia a marca ESCURA -- e ai a Steam (#1b2838) media 1,27:1
	 * contra o fundo da pagina e a pilula deixava de ter forma. Cada loja escura
	 * manda `--loja-veu:0` pela tabela do hub-lojas.php.
	 */
	background:
		linear-gradient(
			rgba(0,0,0,var(--loja-veu, .45)),
			rgba(0,0,0,var(--loja-veu, .45))
		),
		var(--loja-cor);
	/*
	 * O FILETE CLARO E A REDE DE SEGURANCA, e vale para TODA pilula.
	 *
	 * A borda e da cor da marca -- ou seja, numa marca escura ela some junto com
	 * o fundo. Este filete de dentro nao recolore marca nenhuma (o que os guias
	 * de selo proibem): ele so garante que a pilula sempre tenha CONTORNO, hoje
	 * e com qualquer cor de loja que entre na tabela amanha.
	 */
	border: 1px solid var(--loja-cor);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
	color: #fff;
	text-decoration: none;
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform var(--ng-transicao), box-shadow var(--ng-transicao), background-color var(--ng-transicao);
}

/* No hover o veu abre: a cor da marca aparece cheia. */
.ng-pilula:hover,
.ng-pilula:focus-visible {
	transform: translateY(-2px);
	background:
		linear-gradient(
			rgba(0,0,0,calc(var(--loja-veu, .45) * .4)),
			rgba(0,0,0,calc(var(--loja-veu, .45) * .4))
		),
		var(--loja-cor);
	/* o filete de dentro continua; o halo de fora e o que muda no hover */
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.28),
		0 8px 22px -10px var(--loja-cor);
	color: #fff;
}

.ng-pilula:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/*
 * A MARCA em branco. Os guias de selo de loja das fabricantes pedem a marca
 * monocromatica sobre o fundo da cor delas -- e proibem recolorir. Por isso o
 * icone herda #fff do texto, e nao a --loja-cor.
 */
.ng-pilula__ico {
	flex: none;
	display: grid;
	place-items: center;
	color: inherit;
}

.ng-pilula__ico svg {
	width: 20px;
	height: 20px;
}

.ng-pilula__nome {
	min-width: 0;
}


/*
 * Telas estreitas: a pílula ocupa a linha inteira em vez de o nome ser
 * cortado. "NINTENDO SWITCH 2" com reticências não diz qual console é.
 */
@media (max-width: 460px) {
	.ng-faixa-lojas__pilulas {
		flex-direction: column;
	}

	.ng-pilula {
		justify-content: center;
	}
}

/* =====================================================================
   5. NOVIDADES DO JOGO , mesma grade e mesmo cartão da Home
   ===================================================================== */
.ng-jogo-novidades {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}

/* =====================================================================
   6. MÍDIA , trailers do canal (fachada) + imagens da Steam
   ===================================================================== */
.ng-midia__bloco + .ng-midia__bloco {
	margin-top: clamp(26px, 3.4vw, 40px);
}

.ng-midia__subtitulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--ng-branco);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ng-midia__conta {
	font-family: var(--ng-corpo);
	font-weight: 400;
	font-size: .8rem;
	color: var(--ng-tinta-fraca);
}

.ng-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(12px, 1.8vw, 18px);
}

/*
 * A FILEIRA MISTA dos vídeos da comunidade (YouTube + Twitch juntos).
 *
 * QUATRO COLUNAS FIXAS, e não `auto-fit`. Pedido do dono, com as palavras dele:
 * *"os cards do vídeos da comunidade estão gigantescos por algum motivo que não
 * faz sentido … quero sempre 4 ali. SEMPRE"*.
 *
 * O motivo era o `auto-fit` que morava aqui: ele RECOLHE as colunas vazias, e
 * as que sobram dividem a fileira inteira entre si. Com dois vídeos, cada
 * cartão virava meia tela , um quadro de vídeo do tamanho de um pôster. O
 * tamanho do cartão mudava conforme a quantidade, que é justamente o que não
 * faz sentido para quem olha.
 *
 * Com quatro colunas cravadas, o cartão tem SEMPRE o mesmo tamanho, com dois
 * vídeos ou com quatro. O preço é honesto e está aceito: quando há menos de
 * quatro, sobra espaço vazio à direita da fileira , melhor um vão do que um
 * cartão inchado.
 *
 * Os cortes seguem a mesma escada do resto da página: quatro no desktop, dois
 * no tablet, um no telefone. O 1060px não é chute , abaixo dele a coluna útil
 * (a largura menos o respiro lateral e os vãos) deixaria cada cartão com menos
 * de 230px, e aí a miniatura fica menor do que o título que vai embaixo dela.
 */
.ng-videos--mista {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
	.ng-videos--mista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.ng-videos--mista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ng-video {
	display: flex;
	flex-direction: column;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-fundo-3);
	border-radius: var(--ng-raio);
	overflow: hidden;
	transition: transform var(--ng-transicao), border-color var(--ng-transicao);
}

.ng-video:hover,
.ng-video:focus-within {
	transform: translateY(-3px);
	border-color: var(--ng-destaque);
}

.ng-video__moldura {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.ng-video__moldura img,
.ng-video__moldura iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.ng-video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(0deg, rgba(6, 6, 8, .5), rgba(6, 6, 8, 0) 60%);
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ng-branco);
}

.ng-video__play svg {
	width: 46px;
	height: 46px;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .7));
	transition: transform var(--ng-transicao), color var(--ng-transicao);
}

.ng-video__play:hover svg,
.ng-video__play:focus-visible svg {
	transform: scale(1.12);
	color: var(--ng-destaque);
}

.ng-video__corpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
}

.ng-video__titulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
	color: var(--ng-branco);
	margin: 0;
}

.ng-video__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	color: var(--ng-tinta-fraca);
}

.ng-video__idioma {
	flex: none;
	padding: 2px 8px;
	border-radius: var(--ng-raio-pill);
	border: 1px solid var(--ng-borda-forte);
	font-family: var(--ng-titulo);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .68rem;
}

.ng-video__ver {
	margin-left: auto;
	color: var(--ng-tinta-fraca);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: .76rem;
}

.ng-video__ver:hover {
	color: var(--ng-destaque);
}

/* =====================================================================
   7. ESTÚDIO , logo, bio, redes, sites, e a fachada do X
   ===================================================================== */
.ng-estudio {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 34px);
	background: linear-gradient(160deg, var(--ng-fundo-2), var(--ng-fundo));
	border: 1px solid var(--ng-fundo-3);
	border-radius: var(--ng-raio-lg);
	padding: clamp(22px, 3.4vw, 34px);
}

/* =====================================================================
   A MARCA DO ESTÚDIO, grande, na direita
   =====================================================================
   "o texto ficou todo na esquerda, então seria interessante colocar a logo do
   estúdio grande cobrindo o espaço vazio na direita" (pedido do dono).

   Aqui morava um `.ng-estudio--com-x`, de quando o embed do X ficava neste
   cartão. Ele mudou de lugar (vive em partials/barras-steam.php) e a regra
   ficou para trás sem ninguém para aplicá-la: NENHUM arquivo do tema escrevia
   essa classe. Saiu junto — estilo órfão esperando marcação que não existe é o
   tipo de coisa que confunde quem vem depois. */
@media (min-width: 900px) {
	.ng-estudio--com-marca {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
		align-items: center;
	}
}

.ng-estudio__marca {
	/* nasce escondida; a media query de 900px acende como flex */
	display: none;
	min-width: 0;
	justify-self: center;
	align-self: center;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	padding: 18px;
	border-radius: var(--ng-raio-lg);
	background: var(--ng-fundo-3);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.10));
}

.ng-estudio__marca img {
	/*
	   `contain` e nunca `cover`: a logo de um parceiro não pode ser cortada para
	   caber. Se ela é larga, sobra ar em cima e embaixo — e é assim que tem de
	   ser.
	*/
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Só de 900px pra cima existe a segunda coluna. No telefone o cartão é de uma
   coluna só, e a marca grande daria uma tela inteira de logo antes do texto —
   ali quem serve é a logo pequena do topo, que continua no HTML. */
@media (min-width: 900px) {
	.ng-estudio__marca { display: flex; }
	.ng-estudio--com-marca .ng-estudio__logo { display: none; }
}

.ng-estudio__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.ng-estudio__topo {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.ng-estudio__logo {
	flex: none;
	width: 68px;
	height: 68px;
	object-fit: contain;
	border-radius: var(--ng-raio);
	background: var(--ng-fundo-3);
	padding: 6px;
}

/* Sem logo cadastrada: monograma com a inicial. Nunca uma caixa vazia,
   nunca uma imagem quebrada. */
.ng-estudio__monograma {
	flex: none;
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
	border-radius: var(--ng-raio);
	background: linear-gradient(145deg, var(--ng-fundo-3), var(--ng-fundo-2));
	border: 1px solid var(--ng-borda-forte);
	font-family: var(--ng-titulo);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--ng-destaque);
	line-height: 1;
	user-select: none;
}

.ng-estudio__rotulo {
	display: block;
	font-family: var(--ng-titulo);
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ng-tinta-fraca);
	margin-bottom: 3px;
}

.ng-estudio__nome {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: 1.45rem;
	color: var(--ng-branco);
	margin: 0;
	line-height: 1.15;
}

.ng-estudio__bio {
	margin: 0;
	color: var(--ng-tinta);
	font-size: .96rem;
	line-height: 1.7;
	max-width: 62ch;
}

.ng-estudio__creditos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	color: var(--ng-tinta-fraca);
	font-size: .86rem;
	margin: 0;
}

.ng-estudio__creditos b {
	color: var(--ng-tinta);
	font-weight: 600;
}

.ng-estudio__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 2px;
}

.ng-estudio__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- fachada do X/Twitter: cartão estático até alguém clicar --- */
.ng-x {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border-radius: var(--ng-raio);
	border: 1px solid var(--ng-fundo-3);
	background: var(--ng-fundo-2);
	min-width: 0;
}

.ng-x__topo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ng-x__marca {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #000;
	color: #fff;
}

.ng-x__marca svg {
	width: 17px;
	height: 17px;
}

.ng-x__conta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ng-x__nome {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: .96rem;
	color: var(--ng-branco);
	line-height: 1.2;
}

.ng-x__arroba {
	font-size: .8rem;
	color: var(--ng-tinta-fraca);
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-x__alvo {
	min-height: 0;
}

.ng-x__alvo iframe {
	width: 100%;
	border: 0;
}

/* =====================================================================
   8. AS DUAS BARRAS , descrição da Steam e avaliações
   ===================================================================== */
.ng-barras {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(16px, 2.4vw, 24px);
	align-items: start;
}

@media (min-width: 940px) {
	.ng-barras--duas {
		grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	}
}

.ng-barra {
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-fundo-3);
	border-radius: var(--ng-raio);
	padding: clamp(20px, 2.8vw, 30px);
	min-width: 0;
}

.ng-barra__rotulo {
	display: block;
	font-family: var(--ng-titulo);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ng-destaque);
	margin-bottom: 12px;
}

.ng-barra__texto {
	color: var(--ng-tinta);
	line-height: 1.8;
	font-size: .97rem;
	max-width: 78ch;
}

.ng-barra__texto img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ng-raio-sm);
	margin-block: 12px;
}

.ng-barra__texto h1,
.ng-barra__texto h2,
.ng-barra__texto h3 {
	margin-top: 1.3em;
	font-size: 1.1rem;
	color: var(--ng-branco);
}

.ng-barra__texto ul {
	list-style: disc;
	padding-left: 1.3em;
	margin: 8px 0;
}

.ng-barra__texto a {
	color: var(--ng-destaque);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Aviso do cadeado , só quem pode editar o jogo enxerga. */
.ng-barra__aviso-admin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: var(--ng-raio-sm);
	border: 1px dashed var(--ng-borda-forte);
	background: rgba(255, 255, 255, .03);
	font-size: .82rem;
	line-height: 1.6;
	color: var(--ng-tinta-fraca);
}

.ng-barra__aviso-admin strong {
	color: var(--ng-tinta);
}

.ng-barra__aviso-admin a {
	color: var(--ng-destaque);
	white-space: nowrap;
}

/* --- a barra das avaliações (uma barra de verdade) --- */
.ng-avaliacoes__nota {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ng-avaliacoes__percentual {
	font-family: var(--ng-titulo);
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--ng-ok);
	font-variant-numeric: tabular-nums;
}

.ng-avaliacoes--morna .ng-avaliacoes__percentual {
	color: var(--ng-destaque);
}

.ng-avaliacoes--fria .ng-avaliacoes__percentual {
	color: var(--ng-alerta);
}

.ng-avaliacoes__rotulo {
	font-family: var(--ng-titulo);
	font-weight: 600;
	font-size: 1rem;
	color: var(--ng-branco);
}

.ng-avaliacoes__trilho {
	height: 10px;
	border-radius: var(--ng-raio-pill);
	background: var(--ng-fundo-3);
	overflow: hidden;
}

.ng-avaliacoes__preenchido {
	display: block;
	height: 100%;
	border-radius: var(--ng-raio-pill);
	background: linear-gradient(90deg, var(--ng-ok), var(--ng-destaque));
}

.ng-avaliacoes--morna .ng-avaliacoes__preenchido {
	background: linear-gradient(90deg, var(--ng-destaque-2), var(--ng-destaque));
}

.ng-avaliacoes--fria .ng-avaliacoes__preenchido {
	background: linear-gradient(90deg, var(--ng-alerta), var(--ng-destaque-2));
}

.ng-avaliacoes__total {
	margin: 10px 0 0;
	font-size: .84rem;
	color: var(--ng-tinta-fraca);
}

.ng-avaliacoes__citacao {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--ng-destaque);
	border-radius: 0 var(--ng-raio-sm) var(--ng-raio-sm) 0;
	background: rgba(255, 255, 255, .03);
	color: var(--ng-tinta);
	font-size: .9rem;
	line-height: 1.65;
}

.ng-avaliacoes__citacao footer {
	margin-top: 8px;
	font-size: .78rem;
	color: var(--ng-tinta-fraca);
}

/* =====================================================================
   8b. VÍDEOS DA COMUNIDADE (YouTube + Twitch de quem já jogou)

   Reusa o cartão .ng-video da seção de Mídia de propósito: para quem lê,
   é a mesma coisa (uma miniatura com play). O que muda é a ETIQUETA de
   fonte no canto, que responde de onde aquele vídeo vem antes do clique.
   Um segundo sistema de cartão seria uma segunda coisa para manter certa.
   ===================================================================== */
.ng-video--comunidade .ng-video__moldura {
	/* espaço para a etiqueta não encostar no play */
	isolation: isolate;
}

.ng-video__fonte {
	position: absolute;
	z-index: 2;
	top: 8px;
	left: 8px;
	padding: 3px 9px;
	border-radius: var(--ng-raio-pill);
	font-family: var(--ng-titulo);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
	/* preto de verdade atrás da marca, pelo mesmo motivo do letterbox */
	background: rgba(0, 0, 0, .72);
	backdrop-filter: blur(2px);
	pointer-events: none;
}

/*
   Cores de MARCA de terceiro, como as das pílulas de loja.

   O roxo é o #bf94ff, e não o #9146ff que primeiro veio à cabeça: MEDIDO contra
   o fundo real desta etiqueta (preto a 72% sobre o cartão, que dá rgb(6,6,8)), o
   roxo padrão fica em 4.36 de contraste e REPROVA no mínimo de 4.5 da WCAG AA
   para texto pequeno , e esta etiqueta é pequena, 0.68rem. O #bf94ff é o roxo
   que a própria Twitch publica para fundo escuro: mede 8.58 e continua sendo a
   marca dela. O vermelho do YouTube mede 5.11 e passa como está.
*/
.ng-video__fonte--twitch {
	color: #bf94ff;
}

.ng-video__fonte--youtube {
	color: #ff0033;
}

.ng-video__canal {
	flex: none;
	max-width: 46%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ng-tinta);
	font-weight: 600;
}

/* =====================================================================
   9. RODAPÉ DA PÁGINA + acessibilidade do movimento
   ===================================================================== */
.ng-jogo-fechamento {
	text-align: center;
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

.ng-jogo-fechamento .ng-jogo-secao__titulo {
	margin-bottom: 6px;
}

.ng-jogo-fechamento p {
	margin: 0;
	color: var(--ng-tinta-fraca);
	font-size: .95rem;
}

.ng-jogo-relacionados {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: clamp(14px, 2vw, 22px);
}

@media (prefers-reduced-motion: reduce) {
	.ng-jogo *,
	.ng-jogo *::before,
	.ng-jogo *::after {
		transition: none !important;
		animation: none !important;
	}

	.ng-pilula:hover,
	.ng-pilula:focus-visible,
	.ng-video:hover,
	.ng-video:focus-within {
		transform: none;
	}
}

/* =====================================================================
   DETALHES , duas colunas
   =====================================================================
   ⚠️ ESTA FOLHA NASCEU DE UM DEFEITO REAL. A marcacao das duas colunas
   (.ng-detalhes--duas, .ng-detalhes__col) foi escrita no partial e o CSS
   NUNCA. Sem regra nenhuma, uma <div> e `display: block` e as duas colunas
   empilham -- medido no navegador: a coluna da direita saia com 1200px de
   largura, 3.300px ABAIXO da outra. O dono viu isso e reportou "os conteudos
   bem feitos e bonitos ao lado dos detalhes nao estao ali, estao depois".

   Nada acusa um defeito assim: o PHP roda, o HTML sai, o console fica limpo.
   ===================================================================== */

.ng-detalhes--duas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

/* A coluna do lado acompanha a rolagem enquanto houver texto a esquerda: e o
   comportamento da propria Steam, e o que faz "ao lado" continuar sendo ao
   lado numa descricao comprida. */
.ng-detalhes__col--lado {
	position: sticky;
	top: clamp(16px, 4vh, 88px);
	display: grid;
	gap: clamp(14px, 2vw, 20px);
}

.ng-detalhes__col--sobre { min-width: 0; }

@media (max-width: 900px) {
	.ng-detalhes--duas { grid-template-columns: 1fr; }
	.ng-detalhes__col--lado { position: static; }
}

/* --- Idiomas, no formato da sidebar da Steam ------------------------- */

.ng-idiomas-lado__lista {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.ng-idiomas-lado__item {
	font-size: .82rem;
	line-height: 1.2;
	color: var(--ng-tinta);
	background: rgba(255,255,255,.06);
	border: 1px solid var(--ng-borda, rgba(255,255,255,.10));
	border-radius: var(--ng-raio-pill, 999px);
	padding: 4px 10px;
}

/* =====================================================================
   PRESS KIT , o link precisava se destacar
   =====================================================================
   "O link pro Press Kit precisa ser diferente, talvez azul clarinho como o
   botao abaixo dele." O --ng-destaque e justamente o azul claro do tema, o
   mesmo do botao que fica logo abaixo.

   E ELE NASCE CHEIO, nao so contornado. Pedido do dono depois de ver a pagina
   pronta: *"as cores como o botao de press kit fica selecionado quando o mouse
   esta em cima deveria ser o padrao dele"*. Sao exatamente as cores que ele
   aprovou olhando (o azul cheio com o texto escuro), promovidas de estado de
   passagem a estado de repouso , e nao um par novo que eu escolhesse.

   O texto escuro sobre o azul da marca da contraste 11,0:1 (WCAG AAA), medido;
   o contorno sozinho, que era o padrao, deixava o link com o mesmo peso visual
   do botao da Steam logo abaixo , que e justamente o que ele pediu para
   desfazer da primeira vez. */
.ng-ficha__presskit--azul {
	color: #06222f;
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
}

/*
   E O HOVER, que um botao ainda precisa ter: o mesmo brilho que o tema ja usa
   em `.ng-botao--primario`, que e o outro botao cheio na cor da marca. Trocar
   a cor de novo aqui desfaria o pedido , o azul cheio TEM de ser o repouso ,
   entao o que muda e a luz em volta, nao a tinta. A base `.ng-botao:hover` ja
   levanta o botao 2px; isto so acrescenta o halo.
*/
.ng-ficha__presskit--azul:hover,
.ng-ficha__presskit--azul:focus-visible {
	color: #06222f;
	background: var(--ng-destaque);
	border-color: var(--ng-destaque);
	box-shadow: 0 12px 32px -10px rgba(158, 219, 254, .55);
}

/* =====================================================================
   WIDGET DA STEAM , desenhado de uma vez, sem fachada
   =====================================================================
   O widget oficial tem altura fixa de 190px e nao redimensiona sozinho; a
   largura ele acompanha. */
/*
 * SEM ARTE ATRÁS DO WIDGET. O fundo é a cor da própria Steam e mais nada.
 *
 * Aqui houve uma arte do jogo pintada atrás do iframe (`--steam-arte`), com
 * duas versões: primeiro fixa, depois some quando o widget carregava. Ela SAIU
 * inteira, a pedido do dono , *"a imagem atrás do card da steam voltou"*.
 *
 * O registro honesto do que aconteceu, para ninguém ter a mesma ideia de novo:
 * a arte nunca foi pedida. Ela foi invenção minha para tapar um caso em que o
 * widget não pinta (bloqueador de privacidade, rede ruim, `lazy` ainda
 * esperando) e sobra um retângulo escuro de 190px. O dono já tinha reclamado
 * dela uma vez, e voltou a reclamar. O caso que ela cobria é raro; a arte
 * aparecia em toda visita até o widget chegar. Trocar um defeito raro por um
 * enfeite constante foi a escolha errada.
 *
 * `#1b2838` é o azul-escuro da própria Steam: quando o widget chega, ele pinta
 * por cima e ninguém vê a cor; quando não chega, o que sobra é um quadro na cor
 * da loja, e não um retalho branco piscando.
 */
.ng-embed-steam {
	display: grid;
	gap: 10px;
}

.ng-embed-steam__quadro {
	width: 100%;
	height: 190px;
	border: 0;
	border-radius: var(--ng-raio);
	display: block;
	background-color: #1b2838;
}

.ng-embed-steam__link {
	font-size: .84rem;
	color: var(--ng-tinta-fraca);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ng-embed-steam__link:hover,
.ng-embed-steam__link:focus-visible { color: var(--ng-destaque); }

/* =====================================================================
   AVALIAÇÕES NA STEAM , seção própria, entre as plataformas e a mídia
   =====================================================================
   "As avaliações da Steam é uma nova seção que fica depois da lista de
   plataformas e antes da área de mídias" , pedido do dono. Antes isto
   estava partido em dois: a nota no card do topo e os comentários lá
   embaixo, nos Detalhes. Agora é um bloco só: a nota à esquerda, os
   comentários à direita.

   A coluna da nota tem largura MÍNIMA em ch e não em px para acompanhar o
   corpo da fonte , num monitor grande a raiz cresce (ver style.css) e uma
   caixa em px ficaria estreita demais para o número dentro dela. */
.ng-aval-secao {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 32px);
	align-items: start;
}

@media (min-width: 900px) {
	.ng-aval-secao {
		grid-template-columns: minmax(22ch, .8fr) minmax(0, 2fr);
	}
}

/* Sem comentário aproveitável, a nota ocupa a faixa inteira em vez de
   ficar espremida numa coluna com metade da seção vazia ao lado. */
.ng-aval-secao--so-nota { grid-template-columns: 1fr; }

.ng-aval-secao__nota {
	display: grid;
	gap: 10px;
	padding: clamp(18px, 2.4vw, 26px);
	border-radius: var(--ng-raio);
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-fundo-3);
}

.ng-aval-secao__nota .ng-avaliacoes__nota { margin: 0; }
.ng-aval-secao__nota .ng-avaliacoes__total { margin: 0; }

/* Os comentários lado a lado quando cabem , na coluna estreita dos
   Detalhes eles eram uma pilha; aqui há largura para três colunas. */
.ng-aval-secao__lista {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ng-aval-secao__lista > li { margin: 0; }

/* =====================================================================
   O BLOCO DO X , as postagens, desenhadas pelo próprio site
   =====================================================================
   Não há mais widget de terceiro aqui. O servidor colhe uma vez por dia
   (nuntius-core/inc/x-do-estudio.php) e isto abaixo é HTML normal , o que
   também significa que funciona com o JavaScript desligado.

   O link do rodapé tem dois pesos: com postagens acima ele é discreto;
   sem elas ele É o bloco, e aí precisa parecer um botão de verdade em vez
   de uma linha solta embaixo de um título. A lista vazia acontece de
   verdade , medido, o X devolve linha do tempo vazia para algumas contas
   mesmo elas existindo. */
.ng-x__lista {
	display: grid;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ng-x__item { margin: 0; }

.ng-x__post {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 12px;
	border-radius: var(--ng-raio);
	background: var(--ng-fundo-3);
	border: 1px solid transparent;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--ng-transicao), background-color var(--ng-transicao);
}

/* Sem foto, o texto ocupa a largura inteira em vez de deixar a coluna vazia. */
.ng-x__post:not(:has(.ng-x__foto)) { grid-template-columns: minmax(0, 1fr); }

.ng-x__post:hover,
.ng-x__post:focus-visible {
	background: var(--ng-fundo-2);
	border-color: color-mix(in srgb, var(--ng-destaque) 45%, transparent);
}

.ng-x__foto {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

.ng-x__corpo { display: grid; gap: 4px; min-width: 0; }

/*
 * O texto é CORTADO em quatro linhas: postagem longa numa coluna estreita
 * empurraria os modos e recursos para fora da dobra. O clique abre o post
 * inteiro no X, então nada se perde.
 */
.ng-x__texto {
	color: var(--ng-tinta);
	font-size: .88rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.ng-x__quando {
	color: var(--ng-tinta-fraca);
	font-size: .74rem;
	letter-spacing: .04em;
}

.ng-x__linha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 12px;
	padding: 7px 13px;
	border-radius: var(--ng-raio-pill);
	border: 1px solid color-mix(in srgb, var(--ng-destaque) 40%, transparent);
	background: transparent;
	color: var(--ng-destaque);
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--ng-transicao), color var(--ng-transicao);
}

/* Sem postagens, o link é o conteúdo: volta a ter peso de botão. */
.ng-x__linha--sozinha {
	margin-top: 10px;
	padding: 9px 16px;
	font-size: .86rem;
}

.ng-x__linha:hover,
.ng-x__linha:focus-visible {
	background: var(--ng-destaque);
	color: #06222f;
}

@media (prefers-reduced-motion: reduce) {
	.ng-x__linha,
	.ng-x__post { transition: none; }
}