MediaWiki:Vector-2022.css: mudanças entre as edições

Edição atual tal como às 09h06min de 29 de julho de 2026

/*!
 * =============================================================================
 *  GUIA GALÁCTICO — MediaWiki:Vector-2022.css
 *  REVISÃO 10 — 2026-07-28
 *
 *  Confira que esta versão é a que está no ar: abra o load.php do site e
 *  procure por "REVISÃO 10". O ResourceLoader guarda o CSS do site por até
 *  cinco minutos, e o navegador guarda mais um tanto além disso.
 * =============================================================================
 *
 *  O QUE MUDOU NESTA REVISÃO
 *   - A superfície da página principal voltou. O que saiu foi só a BORDA:
 *     o cartão agora é fundo + raio + sombra, sem contorno (ver --gg-cartao-borda).
 *   - Hierarquia tipográfica dos títulos fechada:
 *       título do artigo e da wiki .... SPORE Bold, caixa alta
 *       títulos de seção (h2, h3) ..... SPORE Regular
 *       prefixo de espaço nominal ..... SPORE Light
 *   - Rótulos de infobox não hifenizam mais ("Desenvolvedo-ra").
 *   - Links de edição de seção não quebram mais para a linha de baixo.
 *   - Fundo branco parasita atrás do painel Aparência removido.
 *   - Cabeçalho fixo no topo (§8).
 *   - Recuo dos itens de menu unificado num token só: --gg-menu-recuo.
 *   - No celular: ícone da wiki no lugar do wordmark, e margens laterais
 *     bem mais estreitas para devolver largura de leitura (§15).
 *   - Título da wiki não some mais no escuro: o filtro .skin-invert estava
 *     invertendo uma cor que já vinha certa dos tokens (§6).
 *   - Fundo glífico cobre o documento inteiro, não só a janela (§5).
 *   - Fundo branco do .mw-page-container removido: era ele que tapava a
 *     textura no miolo da página e criava a segunda camada branca (§8).
 *   - Wordmark legível no escuro por um caminho que não depende de ele ser
 *     texto ou imagem (§6). O ícone segue intocado.
 *   - Fundo glífico enfim cobre tudo: o <body> deixou de ter cor de fundo
 *     própria, que era o que tapava a textura (§5).
 *   - Itens de menu com box-sizing: border-box — o realce do item ativo
 *     estava vazando para fora do painel (§8).
 *
 *  REGRA DE OURO
 *  Nenhum componente pode ter regra presa a um tema. Toda diferença entre
 *  claro e escuro vive nos tokens (§2 e §3). O MediaWiki tem TRÊS classes de
 *  tema — clientpref-day, clientpref-night e clientpref-os (automático) — e
 *  regra presa a "night" não vale no automático.
 *
 *  ÍNDICE
 *   1. Fontes                      9. Infoboxes
 *   2. Tokens — claro             10. {{Esboço}}
 *   3. Tokens — escuro            11. {{Trilha de estágios}}
 *   4. Ponte com o Codex          12. Tabelas
 *   5. Base                       13. Página inicial
 *   6. Títulos                    14. Imagens e miscelânea
 *   7. Texto e código             15. Responsivo
 *   8. Estrutura da skin          16. Preferências do leitor
 * =============================================================================
 */


/* =============================================================================
 *  1. FONTES — remova se já estiverem em MediaWiki:Common.css
 * ========================================================================== */

@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	src: url('/images/fonts/AtkinsonHyperlegibleNext.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Atkinson Hyperlegible Mono';
	src: url('/images/fonts/AtkinsonHyperlegibleMono.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPORELight.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPORERegular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SPORE';
	src: url('/images/fonts/SPOREBold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* =============================================================================
 *  2. TOKENS — TEMA CLARO
 * ========================================================================== */

:root {
	/* --- Marca --- */
	--gg-azul-abissal: #041c3a;
	--gg-azul-profundo: #0a2f5c;
	--gg-azul: #0b5ea8;
	--gg-azul-vivo: #1a8fd0;
	--gg-roxo: #6d2a86;

	--gg-verde: #256b42;
	--gg-vermelho: #b3341f;

	/*
	 * Rampa do herói. Quatro paradas, distribuídas em três blocos empilhados.
	 * A cor final de um bloco é a inicial do seguinte, então a emenda somem.
	 * A parada mais clara (--gg-heroi-4) tem 4,7:1 contra branco: texto
	 * pequeno branco em cima dela ainda passa no AA.
	 */
	--gg-heroi-1: #041c3a;
	--gg-heroi-2: #093a68;
	--gg-heroi-3: #0b5ea8;
	--gg-heroi-4: #0f77c0;
	--gg-sobre-heroi: #ffffff;
	--gg-sobre-heroi-linha: rgba(255, 255, 255, .22);

	/* --- Superfícies --- */
	--gg-fundo: #eef3f9;
	--gg-superficie: #ffffff;
	--gg-superficie-2: #f3f7fc;
	--gg-superficie-3: #e4edf7;
	--gg-borda: #d7e3f0;
	--gg-borda-forte: #9db8d3;

	/*
	 * Borda do cartão de conteúdo. No claro fica transparente: a sombra já
	 * separa o cartão do fundo, e o contorno só somava ruído. No escuro,
	 * onde não há sombra, ela reaparece — é a única coisa que segura a
	 * silhueta do cartão.
	 */
	--gg-cartao-borda: transparent;

	/* --- Texto --- */
	--gg-texto: #14202e;
	--gg-texto-suave: #48596d;
	--gg-titulo-cor: #0a2f5c;
	--gg-sobre-acento: #ffffff;

	/* --- Ligações --- */
	--gg-link: #0b5ea8;
	--gg-link-hover: #0a2f5c;
	--gg-link-visitado: #6d2a86;
	--gg-link-novo: #b3341f;

	--gg-foco: #1a8fd0;
	--gg-codigo-cor: #0a2f5c;

	/*
	 * Caixa alta do título do artigo e da wiki. A SPORE Bold tem caixa baixa
	 * bem fechada; em versalete ela respira e lê melhor. Troque para "none"
	 * se algum dia um título ficar comprido demais em maiúsculas.
	 */
	--gg-titulo-caixa: uppercase;

	/* --- Cores de espécie das infoboxes (acento / fundo do acento) --- */
	--gg-a-jogo: #0b5ea8;       --gg-a-jogo-f: #e6eef8;
	--gg-a-estagio: #256b42;    --gg-a-estagio-f: #e3f2e9;
	--gg-a-criador: #0f6f8c;    --gg-a-criador-f: #e0f1f6;
	--gg-a-criacao: #6d2a86;    --gg-a-criacao-f: #f1e6f5;
	--gg-a-download: #37527a;   --gg-a-download-f: #e8edf5;
	--gg-a-raridade: #7d5308;   --gg-a-raridade-f: #f7efdd;
	--gg-a-ferramenta: #9c4315; --gg-a-ferramenta-f: #f9e9e0;
	--gg-a-arquetipo: #4b3fa0;  --gg-a-arquetipo-f: #e9e7f7;

	--gg-acento: var(--gg-a-jogo);
	--gg-acento-fraco: var(--gg-a-jogo-f);

	/* --- Tipografia --- */
	--gg-fonte-texto: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
	--gg-fonte-display: 'SPORE', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
	--gg-fonte-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;

	/* --- Forma --- */
	--gg-r-1: 6px;
	--gg-r-2: 12px;
	--gg-r-3: 18px;
	--gg-r-pilula: 999px;

	/* Recuo interno dos itens de menu — menu principal, ferramentas e sumário
	 * bebem daqui, então os três ficam alinhados por construção. */
	--gg-menu-recuo: .75rem;

	--gg-sombra-1: 0 1px 2px rgba(4, 28, 58, .04), 0 4px 16px rgba(4, 28, 58, .06);
	--gg-sombra-2: 0 2px 4px rgba(4, 28, 58, .06), 0 16px 40px rgba(4, 28, 58, .10);

	--gg-glifos-opacidade: .55;
	--gg-glifos-filtro: none;
	--gg-glifos-tamanho: 420px;

	/*
	 * O wordmark tem cor FIXA, igual nos dois temas, e quem o adapta ao
	 * escuro é o filtro abaixo. Ver a explicação em §6.
	 */
	--gg-wordmark-cor: #0a2f5c;
	--gg-wordmark-filtro: none;


	--gg-transicao: 140ms ease;
}


/* =============================================================================
 *  3. TOKENS — TEMA ESCURO
 *
 *  Dois blocos idênticos de propósito: (a) escuro fixo, (b) escuro automático
 *  — vale para clientpref-os e para wikis sem modo noturno, exceto quando o
 *  leitor fixou o claro. Ao editar um, edite o outro.
 *
 *  Sombra aqui é NONE: sombra preta sobre fundo escuro vira borrão. A
 *  separação entre camadas vem da borda, que fica mais visível.
 * ========================================================================== */

html.skin-theme-clientpref-night {
	--gg-azul-abissal: #050d19;
	--gg-azul-profundo: #0d2440;
	--gg-azul: #7ec9f3;
	--gg-azul-vivo: #8fd4fa;
	--gg-roxo: #c79ce0;

	--gg-verde: #74d19a;
	--gg-vermelho: #ff9d86;

	/* O herói continua escuro nos dois temas: as paradas quase não mudam. */
	--gg-heroi-1: #03101f;
	--gg-heroi-2: #072a4c;
	--gg-heroi-3: #0a4a85;
	--gg-heroi-4: #0d5fa4;
	--gg-sobre-heroi: #ffffff;
	--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);

	--gg-fundo: #0a1220;
	--gg-superficie: #111c2e;
	--gg-superficie-2: #17243a;
	--gg-superficie-3: #22344f;
	--gg-borda: #2f4467;
	--gg-borda-forte: #55719d;
	--gg-cartao-borda: #2f4467;

	--gg-texto: #e7eef8;
	--gg-texto-suave: #b3c3d8;
	--gg-titulo-cor: #e7eef8;
	--gg-sobre-acento: #06101f;

	--gg-link: #7ec9f3;
	--gg-link-hover: #b0e2fb;
	--gg-link-visitado: #d3aae9;
	--gg-link-novo: #ff9d86;

	--gg-foco: #8fd4fa;
	--gg-codigo-cor: #a5e4f7;

	--gg-a-jogo: #7ec9f3;       --gg-a-jogo-f: #17293e;
	--gg-a-estagio: #7ed9a5;    --gg-a-estagio-f: #14301f;
	--gg-a-criador: #7cd8ef;    --gg-a-criador-f: #103040;
	--gg-a-criacao: #d3aae9;    --gg-a-criacao-f: #291a36;
	--gg-a-download: #a9bedd;   --gg-a-download-f: #1a2438;
	--gg-a-raridade: #e6bd72;   --gg-a-raridade-f: #31260f;
	--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
	--gg-a-arquetipo: #b3a7f5;  --gg-a-arquetipo-f: #201d3c;

	--gg-sombra-1: none;
	--gg-sombra-2: none;

	--gg-glifos-opacidade: .06;
	--gg-glifos-filtro: invert(1);
	--gg-wordmark-filtro: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
	html:not(.skin-theme-clientpref-day) {
		--gg-azul-abissal: #050d19;
		--gg-azul-profundo: #0d2440;
		--gg-azul: #7ec9f3;
		--gg-azul-vivo: #8fd4fa;
		--gg-roxo: #c79ce0;

		--gg-verde: #74d19a;
		--gg-vermelho: #ff9d86;

		--gg-heroi-1: #03101f;
		--gg-heroi-2: #072a4c;
		--gg-heroi-3: #0a4a85;
		--gg-heroi-4: #0d5fa4;
		--gg-sobre-heroi: #ffffff;
		--gg-sobre-heroi-linha: rgba(255, 255, 255, .18);

		--gg-fundo: #0a1220;
		--gg-superficie: #111c2e;
		--gg-superficie-2: #17243a;
		--gg-superficie-3: #22344f;
		--gg-borda: #2f4467;
		--gg-borda-forte: #55719d;
		--gg-cartao-borda: #2f4467;

		--gg-texto: #e7eef8;
		--gg-texto-suave: #b3c3d8;
		--gg-titulo-cor: #e7eef8;
		--gg-sobre-acento: #06101f;

		--gg-link: #7ec9f3;
		--gg-link-hover: #b0e2fb;
		--gg-link-visitado: #d3aae9;
		--gg-link-novo: #ff9d86;

		--gg-foco: #8fd4fa;
		--gg-codigo-cor: #a5e4f7;

		--gg-a-jogo: #7ec9f3;       --gg-a-jogo-f: #17293e;
		--gg-a-estagio: #7ed9a5;    --gg-a-estagio-f: #14301f;
		--gg-a-criador: #7cd8ef;    --gg-a-criador-f: #103040;
		--gg-a-criacao: #d3aae9;    --gg-a-criacao-f: #291a36;
		--gg-a-download: #a9bedd;   --gg-a-download-f: #1a2438;
		--gg-a-raridade: #e6bd72;   --gg-a-raridade-f: #31260f;
		--gg-a-ferramenta: #f2a97f; --gg-a-ferramenta-f: #331f10;
		--gg-a-arquetipo: #b3a7f5;  --gg-a-arquetipo-f: #201d3c;

		--gg-sombra-1: none;
		--gg-sombra-2: none;

		--gg-glifos-opacidade: .06;
		--gg-glifos-filtro: invert(1);
		--gg-wordmark-filtro: brightness(0) invert(1);
	}
}


/* =============================================================================
 *  4. PONTE COM OS TOKENS DO CODEX
 * ========================================================================== */

:root {
	--background-color-base: var(--gg-superficie);
	--background-color-neutral: var(--gg-superficie-2);
	--background-color-neutral-subtle: var(--gg-superficie-2);
	--background-color-interactive-subtle: var(--gg-superficie-2);
	--background-color-interactive: var(--gg-superficie-3);
	--background-color-progressive: var(--gg-azul);
	--background-color-progressive--hover: var(--gg-link-hover);
	--background-color-progressive-subtle: var(--gg-superficie-3);
	--background-color-button-quiet--hover: var(--gg-superficie-3);
	--background-color-button-quiet--active: var(--gg-superficie-3);

	--color-base: var(--gg-texto);
	--color-emphasized: var(--gg-texto);
	--color-subtle: var(--gg-texto-suave);
	--color-placeholder: var(--gg-texto-suave);
	--color-progressive: var(--gg-link);
	--color-progressive--hover: var(--gg-link-hover);
	--color-visited: var(--gg-link-visitado);
	--color-destructive: var(--gg-link-novo);
	--color-inverted: var(--gg-sobre-acento);
	--color-icon: var(--gg-texto-suave);

	--border-color-base: var(--gg-borda-forte);
	--border-color-subtle: var(--gg-borda);
	--border-color-muted: var(--gg-borda);
	--border-color-interactive: var(--gg-borda-forte);
	--border-color-progressive: var(--gg-azul);
	--box-shadow-color-progressive--focus: var(--gg-foco);
}


/* =============================================================================
 *  5. BASE
 * ========================================================================== */

/*
 * A cor de fundo mora só no <html>. Quando o <body> também tinha a sua, ela
 * era pintada DEPOIS da camada de glifos (que está em z-index negativo) e
 * tapava a textura — sobrava só a faixa do cabeçalho, fora do fluxo normal.
 * Com o <body> transparente, a ordem passa a ser: cor do <html>, glifos,
 * conteúdo.
 */
html {
	background-color: var(--gg-fundo);
	color: var(--gg-texto);
}

body {
	background-color: transparent;
	color: var(--gg-texto);
}

body {
	font-family: var(--gg-fonte-texto);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Camada de glifos.
 *
 * Era position: fixed, e fixed mede pela JANELA, não pelo documento. Em
 * página longa a textura cobria só uma tela de altura — daí ela parecer
 * começar no meio do caminho. Com absolute + inset: 0 a camada passa a ter
 * a altura do <body>, ou seja, do documento inteiro. O min-height cobre o
 * caso oposto: página curta demais para encher a janela.
 *
 * Trocar "absolute" por "fixed" devolve o efeito de paralaxe, se um dia
 * você preferir a textura parada enquanto o conteúdo rola.
 */
body {
	position: relative;
}

body::before {
	content: "";
	position: absolute;
	inset: 0;
	min-height: 100vh;
	z-index: -1;
	pointer-events: none;
	background-image: url('/images/background.jpg');
	background-repeat: repeat;
	background-size: var(--gg-glifos-tamanho) auto;
	opacity: var(--gg-glifos-opacidade);
	filter: var(--gg-glifos-filtro);
}

:focus-visible {
	outline: 3px solid var(--gg-foco);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection {
	background: color-mix(in srgb, var(--gg-azul-vivo) 30%, transparent);
	color: var(--gg-texto);
}

::placeholder {
	color: var(--gg-texto-suave);
	opacity: 1;
}

.mw-parser-output a:not(.image):not(.mw-file-description) {
	color: var(--gg-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: color var(--gg-transicao), text-decoration-color var(--gg-transicao);
}

.mw-parser-output a:not(.image):not(.mw-file-description):hover {
	color: var(--gg-link-hover);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.mw-parser-output a:visited:not(.image):not(.mw-file-description) {
	color: var(--gg-link-visitado);
}

.mw-parser-output a.new,
.mw-parser-output a.new:visited {
	color: var(--gg-link-novo);
}

.mw-parser-output a.external {
	background-position: right center;
	padding-right: .95em;
}


/* =============================================================================
 *  6. TÍTULOS
 *
 *  DUAS ARMADILHAS, e as duas custaram uma revisão cada:
 *
 *  (a) INVÓLUCRO. Desde o MediaWiki 1.43 o parser embrulha os títulos em
 *      <div class="mw-heading mw-heading2"><h2>…</h2></div>. Estilo aplicado
 *      só no invólucro deixa o texto com o padrão do MediaWiki. Por isso cada
 *      regra aparece em duas famílias: uma para o ELEMENTO (fonte, cor) e
 *      outra para a CAIXA (régua, margem).
 *
 *  (b) ORDEM DE CARGA. O MediaWiki injeta os estilos de conteúdo junto com a
 *      página, e eles podem entrar DEPOIS do CSS do site. Com especificidade
 *      igual, quem vem depois ganha — e o serifado voltava. Daí os seletores
 *      com duas classes (.mw-body .mw-parser-output h2), que sobem a
 *      especificidade para 0-2-1 e vencem o 0-1-1 do núcleo sem !important.
 * ========================================================================== */

.mw-body .mw-parser-output h1,
.mw-body .mw-parser-output h2,
.mw-body .mw-parser-output h3,
.mw-body .mw-heading h1,
.mw-body .mw-heading h2,
.mw-body .mw-heading h3,
.mw-body-content .mw-parser-output h1,
.mw-body-content .mw-parser-output h2,
.mw-body-content .mw-parser-output h3,
.mw-parser-output .mw-heading h1,
.mw-parser-output .mw-heading h2,
.mw-parser-output .mw-heading h3,
.vector-body h1,
.vector-body h2,
.vector-body h3,
.vector-page-titlebar h1,
.mw-first-heading,
#firstHeading {
	font-family: var(--gg-fonte-display);
	color: var(--gg-titulo-cor);
	line-height: 1.22;
	letter-spacing: .005em;
	border-bottom: 0;
	scroll-margin-top: 5rem;
	text-wrap: balance;
}

/* h4 a h6 ficam na Atkinson: em corpo pequeno ela lê melhor. */
.mw-body .mw-parser-output h4,
.mw-body .mw-parser-output h5,
.mw-body .mw-parser-output h6,
.mw-parser-output .mw-heading h4 {
	font-family: var(--gg-fonte-texto);
	color: var(--gg-texto);
	line-height: 1.3;
}

.mw-body .mw-parser-output h1,
.mw-body .mw-heading h1,
.vector-body h1 {
	font-weight: 400;
	font-size: 2.25rem;
	margin: 0;
}

/*
 * --- TÍTULO DO ARTIGO ---
 * Regra própria, e deliberadamente pesada. O #firstHeading vive no
 * .vector-page-titlebar, fora do .mw-parser-output, então não é alcançado
 * pelos seletores de conteúdo acima. Os três <span> internos entram na lista
 * porque o MediaWiki pode carimbar fonte neles; herança sozinha não bastaria.
 *
 * SPORE Bold em caixa alta: é a combinação que a fonte lê melhor em corpo
 * grande. O text-transform é só visual — o texto no DOM continua intacto,
 * então leitor de tela e busca do navegador não são afetados.
 */
h1#firstHeading,
h1.firstHeading,
h1.mw-first-heading,
.vector-page-titlebar h1#firstHeading,
.mw-body-header h1#firstHeading,
#firstHeading .mw-page-title-main,
#firstHeading .mw-page-title-namespace,
#firstHeading .mw-page-title-separator {
	font-family: var(--gg-fonte-display);
	color: var(--gg-titulo-cor);
}

h1#firstHeading,
h1.firstHeading,
h1.mw-first-heading {
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.18;
	letter-spacing: .015em;
	text-transform: var(--gg-titulo-caixa);
	text-wrap: balance;
	margin: 0;
	border-bottom: 0;
}

/*
 * Prefixo de espaço nominal ("Predefinição:", "Categoria:") em SPORE Light.
 * Recua sem sumir: o leitor identifica o espaço nominal de relance e o nome
 * da página segue sendo o que salta primeiro.
 *
 * Depende dos <span> que o MediaWiki 1.41+ insere no título. Em versões
 * anteriores a regra simplesmente não encontra nada e nada quebra.
 */
#firstHeading .mw-page-title-namespace,
#firstHeading .mw-page-title-separator {
	font-weight: 300;
	color: var(--gg-texto-suave);
}

.mw-body .mw-parser-output h2,
.mw-body .mw-heading h2,
.mw-parser-output .mw-heading h2,
.vector-body h2 {
	font-weight: 400; /* SPORE Regular, a pedido: menos peso, mais respiro */
	font-size: 1.6rem;
	letter-spacing: .01em;
	margin: 0;
}

.mw-body .mw-parser-output h3,
.mw-parser-output .mw-heading h3,
.vector-body h3 {
	font-weight: 400;
	font-size: 1.26rem;
	letter-spacing: .01em;
	margin: 0;
}

.mw-parser-output .mw-heading4 h4,
.mw-parser-output > h4 {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--gg-texto-suave);
	margin: 0;
}

/*
 * A CAIXA do h2. .mw-heading2 cobre o MediaWiki novo, .mw-parser-output > h2
 * cobre o antigo — nunca coincidem, então a régua nunca duplica.
 */
.mw-parser-output .mw-heading2,
.mw-parser-output > h2 {
	position: relative;
	border-bottom: 1px solid var(--gg-borda);
	padding-bottom: .45rem;
	margin: 2.4rem 0 1.1rem;
}

.mw-parser-output .mw-heading2::after,
.mw-parser-output > h2::after {
	content: "";
	position: absolute; /* absoluto: não vira item do flex do invólucro */
	left: 0;
	bottom: -1px;
	width: 2.5rem;
	height: 3px;
	background: var(--gg-azul-vivo);
	border-radius: var(--gg-r-pilula);
}

.mw-parser-output .mw-heading3,
.mw-parser-output > h3 {
	margin: 1.9rem 0 .6rem;
}

.mw-parser-output .mw-heading4,
.mw-parser-output > h4 {
	margin: 1.4rem 0 .5rem;
}

/*
 * O invólucro .mw-heading é flex. Sem nowrap, "[ editar | editar
 * código-fonte ]" se parte no meio e cai para a linha de baixo.
 */
.mw-parser-output .mw-heading {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .35rem .6rem;
}

.mw-editsection {
	font-family: var(--gg-fonte-texto);
	font-size: .8rem;
	font-weight: 400;
	white-space: nowrap;
}

/*
 * --- TÍTULO DA WIKI ---
 * Mesmo tratamento do título do artigo: SPORE Bold em caixa alta. A cor é
 * fixada porque o wordmark mora dentro de um <a> e estava herdando o roxo
 * de "link visitado".
 *
 * Só vale se o wordmark for texto. Sendo imagem (padrão do $wgLogos), CSS
 * não alcança — aí o caminho é um SVG com a SPORE convertida em curvas.
 */
.mw-logo-wordmark,
.mw-logo-container .mw-logo-wordmark,
.mw-wiki-title,
.vector-sticky-header-context-bar-primary {
	font-family: var(--gg-fonte-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .03em;
	text-transform: var(--gg-titulo-caixa);
	color: var(--gg-titulo-cor);
}

.mw-logo,
.mw-logo:visited,
.mw-logo:hover {
	color: var(--gg-titulo-cor);
	text-decoration: none;
}

/*
 * --- "GUIA GALÁCTICO" SUMINDO NO ESCURO ---
 *
 * Tentei duas vezes tratar isso pela cor e falhei nas duas. O problema é
 * que a correção certa depende de o wordmark ser texto, imagem, ou texto
 * escondido atrás de uma imagem de fundo — e cada caso pede um remédio
 * diferente. Então aqui vai uma abordagem que NÃO precisa saber qual é.
 *
 * A ideia: o wordmark tem cor fixa, sempre o azul-marinho do tema claro.
 * No escuro, um filtro achata o elemento inteiro em preto — texto, imagem
 * ou fundo, tanto faz, o filtro não distingue — e depois inverte para
 * branco puro. Transparência é preservada nos dois passos.
 *
 * O ÍCONE NÃO É TOCADO. Ele é o .mw-logo-icon, irmão do contêiner do
 * wordmark, e está de fora de todos os seletores abaixo. A regra que
 * limpa o .mw-logo-container também não o alcança.
 */
.mw-logo-wordmark,
.mw-wiki-title {
	color: var(--gg-wordmark-cor);
	filter: var(--gg-wordmark-filtro);
}

/* Evita que um filtro do Vector no contêiner se some ao nosso e cancele. */
.mw-logo-container,
.mw-logo-container.skin-invert {
	filter: none;
}

/* Explícito: o ícone fica como está, nos dois temas. */
.mw-logo-icon {
	filter: none;
}

.mw-logo:hover .mw-logo-wordmark {
	color: var(--gg-link);
}


/* =============================================================================
 *  7. TEXTO E CÓDIGO
 * ========================================================================== */

.mw-parser-output p {
	margin: .8em 0;
	max-width: 78ch;
}

code,
kbd,
samp,
pre,
.mw-code {
	font-family: var(--gg-fonte-mono);
	font-size: .92em;
}

code {
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-1);
	padding: .1em .35em;
	color: var(--gg-codigo-cor);
}

pre,
.mw-code {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-left: 3px solid var(--gg-azul-vivo);
	border-radius: var(--gg-r-2);
	padding: 1rem 1.15rem;
	overflow-x: auto;
	line-height: 1.55;
}

kbd {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda-forte);
	border-bottom-width: 3px;
	border-radius: var(--gg-r-1);
	padding: .1em .45em;
}

blockquote {
	border: 0;
	border-left: 3px solid var(--gg-azul-vivo);
	background: var(--gg-superficie-2);
	margin: 1.25rem 0;
	padding: .85rem 1.15rem;
	border-radius: 0 var(--gg-r-2) var(--gg-r-2) 0;
	color: var(--gg-texto-suave);
	font-style: normal;
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--gg-borda-forte), transparent);
	margin: 2rem 0;
}


/* =============================================================================
 *  8. ESTRUTURA DA SKIN
 * ========================================================================== */

/*
 * --- A SEGUNDA CAMADA BRANCA ---
 *
 * O Vector pinta o .mw-page-container de branco em telas largas, com sombra
 * própria. Era esse o branco extra entre o fundo da página e o cartão — e
 * era ele que tapava a textura de glifos no miolo, deixando os glifos
 * visíveis só na faixa do cabeçalho e abaixo do rodapé.
 *
 * O seletor leva um "body" na frente porque a regra do Vector mora dentro
 * de uma media query, e media query não soma especificidade: sem esse
 * degrau a mais, quem carrega por último ganha — e nem sempre somos nós.
 */
body .mw-page-container,
body .mw-page-container-inner {
	background: transparent;
	box-shadow: none;
	border: 0;
}

.mw-page-container {
	max-width: 1600px;
}

/*
 * Cartão de conteúdo. Vale para TODAS as páginas, inclusive a principal:
 * tirar a superfície dela deixava o texto direto sobre os glifos, sem
 * ancoragem. O que sai é o contorno, não o fundo — no claro a sombra basta
 * para destacar o cartão; no escuro --gg-cartao-borda devolve a silhueta.
 */
.mw-content-container,
#content.mw-body {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-cartao-borda);
	border-radius: var(--gg-r-3);
	box-shadow: var(--gg-sombra-1);
}

.mw-content-container #content.mw-body {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

#content.mw-body,
.vector-body {
	padding: 1.6rem 2.1rem 2.6rem;
}

/* --- Cabeçalho --- */

/*
 * Cabeçalho fixo no topo.
 *
 * position: fixed sozinho não basta: ao sair do fluxo, um elemento de bloco
 * passa a ter largura shrink-to-fit e o cabeçalho encolheria até o tamanho
 * do conteúdo. Daí o inset-inline: 0, que devolve a largura total. O
 * z-index sobe para o cabeçalho passar por cima do corpo rolante, e o fundo
 * translúcido com blur existe porque agora há conteúdo correndo por baixo.
 */
.vector-header-container.vector-sticky-header-container {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--gg-fundo) 88%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.25);
	backdrop-filter: blur(12px) saturate(1.25);
}

.vector-header-container .vector-header {
	background: transparent;
	padding-block: .5rem;
}

.vector-sticky-header {
	background: color-mix(in srgb, var(--gg-superficie) 90%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.25);
	backdrop-filter: blur(10px) saturate(1.25);
	border-bottom: 1px solid var(--gg-borda);
	box-shadow: none;
}

.mw-logo-wordmark {
	max-height: 2.1em;
}

.mw-logo-tagline {
	font-family: var(--gg-fonte-texto);
	color: var(--gg-texto-suave);
	font-size: .8rem;
	letter-spacing: .02em;
}

/* --- BUSCA ---
 * Zero borda. O Codex empilha invólucro sobre invólucro (.cdx-typeahead-search
 * > .cdx-search-input > .cdx-search-input__input-wrapper > .cdx-text-input),
 * e qualquer borda sobrevivente vira um anel a mais em volta do campo. Todos
 * ficam transparentes; o campo é um preenchimento, e o botão é discreto.
 */
.vector-search-box .cdx-typeahead-search,
.vector-search-box .cdx-search-input,
.vector-search-box .cdx-search-input__input-wrapper,
.vector-search-box .cdx-text-input,
.vector-search-box-inner,
.vector-typeahead-search-container {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.vector-search-box .cdx-text-input__input,
.vector-search-box input[type="search"] {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 1px solid transparent; /* transparente só para segurar a altura */
	border-radius: var(--gg-r-pilula);
	box-shadow: none;
	font-family: var(--gg-fonte-texto);
	padding-left: 2.5em;
	transition: background-color var(--gg-transicao), border-color var(--gg-transicao);
}

.vector-search-box .cdx-text-input__input:hover {
	background: var(--gg-superficie-3);
}

.vector-search-box .cdx-text-input__input:focus {
	background: var(--gg-superficie);
	border-color: var(--gg-azul-vivo);
	box-shadow: 0 0 0 2px var(--gg-azul-vivo);
	outline: 0;
}

.vector-search-box .cdx-search-input__end-button,
.vector-search-box .cdx-search-input__end-button:visited {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--gg-link);
	border-radius: var(--gg-r-pilula);
	margin-left: .3rem;
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
}

.vector-search-box .cdx-search-input__end-button:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
}

.cdx-menu {
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	box-shadow: var(--gg-sombra-2);
	overflow: hidden;
}

/* --- Colunas laterais --- *
 * Os contêineres de fixação vêm com fundo próprio do Vector, que aparecia
 * como um retângulo branco escapando por trás dos painéis arredondados.
 */
.vector-pinned-container,
.vector-unpinned-container,
.vector-appearance-pinned-container,
.vector-page-tools-pinned-container,
.vector-toc-pinned-container,
.vector-main-menu-pinned-container,
.vector-column-start,
.vector-column-end {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.vector-main-menu-container .vector-main-menu,
.vector-page-tools,
.vector-toc,
.vector-appearance,
.vector-dropdown-content {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	box-shadow: var(--gg-sombra-1);
	padding: .6rem .5rem;
}

.vector-pinnable-header,
.vector-menu-heading,
.vector-toc-pinnable-header {
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gg-texto-suave);
}

.vector-menu-content-list li a,
.vector-toc-link,
.vector-page-tools .mw-list-item a {
	/*
	 * border-box é o que impede o realce do item ativo de vazar para fora
	 * do painel: o link ocupa 100% da largura, e sem isto o padding que
	 * acrescentamos seria SOMADO a esses 100%.
	 */
	box-sizing: border-box;
	color: var(--gg-link);
	border-radius: var(--gg-r-1);
	padding-inline: var(--gg-menu-recuo);
	text-decoration: none;
	transition: background-color var(--gg-transicao), color var(--gg-transicao);
}

/*
 * O Vector desenha uma sombra de rolagem no rodapé dos painéis fixados,
 * para sugerir que há mais conteúdo abaixo. Nos nossos painéis, que já são
 * cartões com sombra própria, ela aparece como uma faixa cinza solta
 * flutuando fora do cartão.
 */
.vector-sticky-pinned-container::after,
.vector-pinned-container::after,
.vector-toc::after,
.vector-page-tools::after {
	display: none;
}

/*
 * O menu principal vinha com recuo menor que o de ferramentas, e o realce do
 * item ativo encostava na borda do painel. Especificidade um degrau acima
 * para vencer o padrão do Vector; o valor sai do mesmo token dos outros.
 */
.vector-main-menu .vector-menu-content-list .mw-list-item a,
.vector-main-menu-container .vector-menu-content-list .mw-list-item a,
#vector-main-menu-dropdown .vector-menu-content-list .mw-list-item a,
.vector-page-tools .vector-menu-content-list .mw-list-item a {
	padding-inline: var(--gg-menu-recuo);
}

.vector-menu-content-list li a:hover,
.vector-toc-link:hover,
.vector-page-tools .mw-list-item a:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
	text-decoration: underline;
}

.vector-toc-list-item-active > .vector-toc-link {
	background: var(--gg-superficie-3);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--gg-azul-vivo);
}

/* --- Abas: só um sublinhado de acento --- */
.vector-menu-tabs .mw-list-item a,
.vector-menu-tabs-legacy li a {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--gg-link);
	font-weight: 500;
	transition: color var(--gg-transicao), box-shadow var(--gg-transicao);
}

.vector-menu-tabs .mw-list-item a:hover {
	background: transparent;
	color: var(--gg-link-hover);
	text-decoration: underline;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited {
	background: transparent;
	color: var(--gg-texto);
	font-weight: 700;
	box-shadow: inset 0 -3px 0 var(--gg-azul-vivo);
}

/* --- Botões --- */
.cdx-button:not(.cdx-button--weight-quiet) {
	border-radius: var(--gg-r-pilula);
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
	border-color: var(--gg-borda-forte);
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
}

.cdx-button--action-progressive.cdx-button--weight-primary {
	background: var(--gg-azul);
	border-color: var(--gg-azul);
	color: var(--gg-sobre-acento);
}

.cdx-button--weight-quiet {
	color: var(--gg-link);
	border-radius: var(--gg-r-1);
}

/* --- Rodapé --- */
.mw-footer,
.mw-footer-container {
	background: transparent;
	color: var(--gg-texto-suave);
	border-top: 0;
}

.mw-footer-container {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--gg-borda);
}

.mw-footer li,
.mw-footer a {
	color: var(--gg-texto-suave);
}

.mw-footer a:hover {
	color: var(--gg-link-hover);
}


/* =============================================================================
 *  9. INFOBOXES
 *
 *  POR QUE O TÍTULO DESGRUDAVA
 *  O <caption> fica FORA da caixa da <table>: nem o border-radius nem o
 *  overflow da tabela o alcançam. São dois retângulos empilhados, e qualquer
 *  diferença entre eles aparece como emenda. A costura exige três coisas:
 *
 *    1. Raios espelhados — o título arredonda só em cima, a tabela só embaixo,
 *       com o MESMO valor (--gg-r-3).
 *    2. Bordas complementares — o título tem topo e laterais, a tabela tem
 *       laterais e base. Nenhum dos dois tem a borda do meio.
 *    3. Acento como SOMBRA INTERNA, não como borda. Borda ocuparia espaço
 *       próprio e reapareceria como aquela terceira linha entre os dois.
 *
 *  box-sizing: border-box nos dois garante largura idêntica ao pixel.
 * ========================================================================== */

.gg-infobox {
	float: right;
	clear: right;
	box-sizing: border-box;
	width: 22rem;
	max-width: 100%;
	margin: .3rem 0 1.5rem 1.75rem;
	background: var(--gg-superficie);
	border: 1px solid var(--gg-borda);
	border-top: 0;
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
	box-shadow: var(--gg-sombra-1);
	border-collapse: separate;
	border-spacing: 0;
	font-size: .92rem;
	line-height: 1.5;
}

.gg-infobox-titulo {
	caption-side: top;
	box-sizing: border-box;
	text-align: left;
	font-family: var(--gg-fonte-display);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--gg-acento);
	background: var(--gg-acento-fraco);
	padding: .9rem 1.15rem .85rem;
	border: 1px solid var(--gg-borda);
	border-bottom: 0;
	border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gg-acento) 30%, transparent);
}

.gg-infobox-subtitulo {
	padding: .7rem 1.15rem;
	background: var(--gg-acento-fraco);
	color: var(--gg-texto-suave);
	font-size: .9em;
}

.gg-infobox-imagem {
	padding: .95rem 1.15rem;
	text-align: center;
	background: var(--gg-superficie-2);
}

.gg-infobox-imagem img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gg-r-1);
}

.gg-infobox-legenda {
	margin-top: .5rem;
	font-size: .85em;
	color: var(--gg-texto-suave);
	line-height: 1.45;
}

/*
 * Sem hyphens: auto. Com a coluna estreita ele partia "Desenvolvedora" em
 * "Desenvolvedo-ra", que lê pior do que a palavra inteira ocupando duas
 * linhas. A coluna ganhou dois pontos percentuais para compensar.
 */
.gg-infobox-rotulo {
	width: 40%;
	text-align: left;
	vertical-align: top;
	font-weight: 700;
	color: var(--gg-texto-suave);
	padding: .6rem .5rem .6rem 1.15rem;
	hyphens: manual;
	overflow-wrap: break-word;
}

.gg-infobox-dado {
	vertical-align: top;
	padding: .6rem 1.15rem .6rem .5rem;
}

/* Zebra em vez de linhas: ajuda a rastrear a linha sem mais uma borda. */
.gg-infobox tr:nth-child(even) .gg-infobox-rotulo,
.gg-infobox tr:nth-child(even) .gg-infobox-dado {
	background: var(--gg-superficie-2);
}

.gg-infobox-rodape {
	padding: .75rem 1.15rem;
	background: var(--gg-superficie-2);
	font-size: .85em;
	color: var(--gg-texto-suave);
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
}

/* --- Cor de espécie. Os pares vêm dos tokens, logo já respeitam o tema. --- */
.gg-infobox-jogo       { --gg-acento: var(--gg-a-jogo);       --gg-acento-fraco: var(--gg-a-jogo-f); }
.gg-infobox-estagio    { --gg-acento: var(--gg-a-estagio);    --gg-acento-fraco: var(--gg-a-estagio-f); }
.gg-infobox-criador    { --gg-acento: var(--gg-a-criador);    --gg-acento-fraco: var(--gg-a-criador-f); }
.gg-infobox-criacao    { --gg-acento: var(--gg-a-criacao);    --gg-acento-fraco: var(--gg-a-criacao-f); }
.gg-infobox-download   { --gg-acento: var(--gg-a-download);   --gg-acento-fraco: var(--gg-a-download-f); }
.gg-infobox-raridade   { --gg-acento: var(--gg-a-raridade);   --gg-acento-fraco: var(--gg-a-raridade-f); }
.gg-infobox-ferramenta { --gg-acento: var(--gg-a-ferramenta); --gg-acento-fraco: var(--gg-a-ferramenta-f); }
.gg-infobox-arquetipo  { --gg-acento: var(--gg-a-arquetipo);  --gg-acento-fraco: var(--gg-a-arquetipo-f); }


/* =============================================================================
 *  10. {{Esboço}}
 * ========================================================================== */

.gg-esboco {
	display: flow-root;
	clear: both;
	margin: 2.25rem 0 1rem;
	padding: 1rem 1.2rem 1rem 3.4rem;
	background: var(--gg-superficie-2);
	border: 1px dashed var(--gg-borda-forte);
	border-radius: var(--gg-r-2);
	color: var(--gg-texto-suave);
	font-size: .95rem;
	position: relative;
}

/* Broto decorativo — CSS puro, invisível para leitores de tela. */
.gg-esboco::before {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 1.2rem;
	width: .85rem;
	height: .85rem;
	border-radius: 60% 0 60% 60%;
	background: var(--gg-verde);
	transform: rotate(-15deg);
}


/* =============================================================================
 *  11. {{Trilha de estágios}}
 * ========================================================================== */

.gg-evolucao {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1.75rem;
	padding: .4rem;
	background: var(--gg-superficie-2);
	border: 0;
	border-radius: var(--gg-r-pilula);
	counter-reset: etapa;
}

.gg-evolucao-etapa {
	counter-increment: etapa;
	flex: 1 1 7rem;
	text-align: center;
}

.gg-evolucao-etapa a {
	display: block;
	padding: .5rem .65rem;
	border-radius: var(--gg-r-pilula);
	font-family: var(--gg-fonte-texto);
	font-weight: 500;
	font-size: .95rem;
	color: var(--gg-link);
	text-decoration: none;
	background: transparent;
	border: 0;
	transition: background-color var(--gg-transicao), color var(--gg-transicao), transform var(--gg-transicao);
}

.gg-evolucao-etapa a::before {
	content: counter(etapa) ".";
	margin-right: .35em;
	color: var(--gg-texto-suave);
	font-variant-numeric: tabular-nums;
}

.gg-evolucao-etapa a:hover {
	background: var(--gg-superficie-3);
	color: var(--gg-link-hover);
	transform: translateY(-1px);
	text-decoration: underline;
}

/* Estágio atual: cor + peso + preenchimento. Três sinais, não só cor. */
.gg-evolucao-atual a,
.gg-evolucao-atual a:visited {
	background: var(--gg-azul);
	color: var(--gg-sobre-acento);
	font-weight: 700;
}

.gg-evolucao-atual a::before {
	color: inherit;
	opacity: .7;
}


/* =============================================================================
 *  12. TABELAS
 * ========================================================================== */

.mw-parser-output table.wikitable {
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-radius: var(--gg-r-2);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--gg-sombra-1);
}

.mw-parser-output table.wikitable > * > tr > th {
	background: var(--gg-superficie-3);
	color: var(--gg-texto);
	border: 0;
	padding: .65rem .8rem;
	text-align: left;
}

.mw-parser-output table.wikitable > * > tr > td {
	border: 0;
	padding: .6rem .8rem;
}

.mw-parser-output table.wikitable > * > tr:nth-child(even) > td {
	background: var(--gg-superficie-2);
}

/* --- {{Tabela evolutiva}}: mesma costura da infobox --- */
.gg-tabela-evolutiva {
	box-sizing: border-box;
	width: 100%;
	margin: 1.75rem 0;
	background: var(--gg-superficie);
	color: var(--gg-texto);
	border: 1px solid var(--gg-borda);
	border-top: 0;
	border-radius: 0 0 var(--gg-r-2) var(--gg-r-2);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--gg-sombra-1);
}

.gg-tabela-evolutiva caption {
	caption-side: top;
	box-sizing: border-box;
	font-family: var(--gg-fonte-texto);
	font-weight: 700;
	text-align: left;
	padding: .85rem 1rem;
	color: var(--gg-texto);
	background: var(--gg-superficie-2);
	border: 1px solid var(--gg-borda);
	border-bottom: 0;
	border-radius: var(--gg-r-2) var(--gg-r-2) 0 0;
	box-shadow: inset 0 -2px 0 var(--gg-borda);
}

.gg-tabela-evolutiva th[scope="col"] {
	background: var(--gg-superficie-3);
	padding: .6rem .8rem;
	text-align: left;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 0;
}

.gg-tabela-evolutiva td,
.gg-tabela-evolutiva th[scope="row"] {
	padding: .7rem .8rem;
	border: 0;
	vertical-align: top;
	text-align: left;
}

.gg-tabela-evolutiva tbody tr:nth-child(even) td,
.gg-tabela-evolutiva tbody tr:nth-child(even) th[scope="row"] {
	background: var(--gg-superficie-2);
}

.gg-te-escolha {
	font-weight: 700;
	white-space: nowrap;
	position: relative;
	padding-left: 2.2rem !important;
}

/*
 * Marcador da escolha: a FORMA muda junto com a cor — círculo, losango,
 * triângulo. A linha continua legível em escala de cinza.
 */
.gg-te-escolha::before {
	content: "";
	position: absolute;
	left: .9rem;
	top: 1.1em;
	width: .6rem;
	height: .6rem;
	background: var(--gg-texto-suave);
}

.gg-cor-verde .gg-te-escolha::before    { background: var(--gg-verde); border-radius: 50%; }
.gg-cor-azul .gg-te-escolha::before     { background: var(--gg-azul); transform: rotate(45deg); }
.gg-cor-vermelho .gg-te-escolha::before { background: var(--gg-vermelho); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gg-cor-neutra .gg-te-escolha::before   { background: var(--gg-texto-suave); border-radius: var(--gg-r-1); }

.gg-cor-verde > th:first-child    { box-shadow: inset 4px 0 0 var(--gg-verde); }
.gg-cor-azul > th:first-child     { box-shadow: inset 4px 0 0 var(--gg-azul); }
.gg-cor-vermelho > th:first-child { box-shadow: inset 4px 0 0 var(--gg-vermelho); }
.gg-cor-neutra > th:first-child   { box-shadow: inset 4px 0 0 var(--gg-borda-forte); }


/* =============================================================================
 *  13. PÁGINA INICIAL
 *
 *  Aqui a conta de bordas foi a zero. O herói é UM bloco contínuo: os três
 *  elementos empilhados (título, subtítulo, painel de números) carregam
 *  fatias da mesma rampa vertical, e a cor final de cada um é a inicial do
 *  seguinte — a emenda desaparece sem precisar de wrapper no wikitexto.
 * ========================================================================== */

/*
 * A página principal usa o mesmo cartão das demais. O herói é um bloco
 * arredondado DENTRO dele — não sangra até a borda, e não precisa: o cartão
 * já não tem contorno, então as duas curvas convivem sem competir.
 */
.gg-inicio {
	max-width: 66rem;
	margin-inline: auto;
}

/* --- Herói, fatia 1: a CAIXA do título (invólucro ou o próprio h1) --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 {
	background: linear-gradient(180deg, var(--gg-heroi-1), var(--gg-heroi-2));
	border: 0;
	border-radius: var(--gg-r-3) var(--gg-r-3) 0 0;
	padding: 2.8rem 1.5rem 1.2rem;
	margin: 0;
	text-align: center;
	display: block;
}

/* --- Herói: o TEXTO do título, embrulhado ou não --- */
.gg-inicio > h1,
.gg-inicio > .mw-heading1 h1,
.gg-inicio .mw-heading1 h1 {
	font-family: var(--gg-fonte-display);
	font-weight: 400;
	font-size: clamp(2rem, 5.5vw, 3.2rem);
	line-height: 1.08;
	color: var(--gg-sobre-heroi);
	border: 0;
	margin: 0;
	text-align: center;
}

/* --- Herói, fatia 2: subtítulo --- */
.gg-subtitulo {
	text-align: center;
	color: var(--gg-sobre-heroi);
	background: linear-gradient(180deg, var(--gg-heroi-2), var(--gg-heroi-3));
	padding: 0 1.5rem 1.9rem;
	font-size: 1.05rem;
	margin: 0;
}

.gg-subtitulo b,
.gg-subtitulo strong {
	font-weight: 700;
}

/* --- Herói, fatia 3: painel de números --- */
.gg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	background: linear-gradient(180deg, var(--gg-heroi-3), var(--gg-heroi-4));
	border: 0;
	border-radius: 0 0 var(--gg-r-3) var(--gg-r-3);
	overflow: hidden;
	margin: 0 0 2.75rem;
	box-shadow: none;
}

.gg-stat {
	background: transparent;
	padding: 1.35rem .85rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	justify-content: center;
	box-shadow: inset 1px 0 0 var(--gg-sobre-heroi-linha);
}

.gg-stat:first-child {
	box-shadow: none;
}

.gg-stat-numero {
	font-family: var(--gg-fonte-display);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 400;
	color: var(--gg-sobre-heroi);
	font-variant-numeric: tabular-nums;
}

.gg-stat-rotulo {
	font-size: .84rem;
	line-height: 1.35;
	color: var(--gg-sobre-heroi);
	text-wrap: balance;
}

/* --- Seções: sem régua, só o traço de acento --- */
.gg-inicio .mw-heading2,
.gg-inicio > h2 {
	border-bottom: 0;
	padding-bottom: .5rem;
	margin: 2.5rem 0 1rem;
}

.gg-inicio .mw-heading2::after,
.gg-inicio > h2::after {
	bottom: 0;
	width: 2.75rem;
}

.gg-inicio .mw-heading2 h2,
.gg-inicio > h2 {
	font-size: 1.4rem;
}

/*
 * Pastilhas: preenchimento em vez de contorno. Continuam <ul>/<li> no HTML,
 * então a semântica e a navegação por leitor de tela não mudam.
 */
.gg-inicio ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
	gap: .55rem;
}

.gg-inicio ul li {
	margin: 0;
}

.gg-inicio ul li a {
	display: block;
	padding: .85rem 1.05rem;
	background: var(--gg-superficie-2);
	border: 0;
	border-left: 4px solid var(--gg-azul-vivo);
	border-radius: var(--gg-r-1) var(--gg-r-2) var(--gg-r-2) var(--gg-r-1);
	color: var(--gg-link);
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
	transition: transform var(--gg-transicao), background-color var(--gg-transicao),
		border-color var(--gg-transicao);
}

.gg-inicio ul li a:hover {
	transform: translateY(-2px);
	background: var(--gg-superficie-3);
	border-left-color: var(--gg-azul);
	text-decoration: underline;
}

.gg-inicio ul li a.new {
	border-left-color: var(--gg-vermelho);
}


/* =============================================================================
 *  14. IMAGENS E MISCELÂNEA
 * ========================================================================== */

.mw-parser-output figure[typeof~='mw:File/Thumb'],
.mw-parser-output .thumbinner {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-radius: var(--gg-r-2);
	box-shadow: none;
	padding: .55rem;
}

.mw-parser-output .thumbcaption,
.mw-parser-output figcaption {
	color: var(--gg-texto-suave);
	font-size: .88rem;
	line-height: 1.45;
	padding: .5rem .35rem .2rem;
}

.mw-parser-output figure img,
.mw-parser-output .thumbimage {
	border: 0;
	border-radius: var(--gg-r-1);
}

.catlinks {
	background: var(--gg-superficie-2);
	color: var(--gg-texto);
	border: 0;
	border-radius: var(--gg-r-2);
	padding: .85rem 1.1rem;
	margin-top: 2.25rem;
}

.mw-parser-output .reflist,
.mw-parser-output .references {
	font-size: .9rem;
	color: var(--gg-texto-suave);
}

.mw-message-box,
.cdx-message {
	border-radius: var(--gg-r-2);
}

.mw-parser-output .toc {
	background: var(--gg-superficie-2);
	border: 0;
	border-radius: var(--gg-r-2);
}


/* =============================================================================
 *  15. RESPONSIVO
 * ========================================================================== */

@media (max-width: 720px) {
	/*
	 * --- LARGURA DE LEITURA ---
	 * O conteúdo estava perdendo largura três vezes: o recuo do
	 * .mw-page-container, a margem do cartão e o recuo do corpo. Os três
	 * encolhem juntos aqui. Em tela estreita, cada pixel de margem custa
	 * caro — sobretudo em tabela, que passa a rolar antes da hora.
	 */
	.mw-page-container,
	.mw-page-container-inner {
		padding-inline: .5rem;
	}

	#content.mw-body,
	.vector-body {
		padding: 1.15rem .9rem 1.9rem;
	}

	.mw-content-container,
	#content.mw-body {
		border-radius: var(--gg-r-2);
	}

	/*
	 * --- LOGO NO LUGAR DO TÍTULO ---
	 * "GUIA GALÁCTICO" em caixa alta ocupava duas linhas do cabeçalho.
	 * O ícone diz o mesmo em muito menos espaço.
	 *
	 * O wordmark some da tela mas NÃO da árvore de acessibilidade: com
	 * display: none o link do logotipo ficaria sem nome acessível, já que o
	 * ícone costuma vir com alt vazio. O recorte abaixo é o padrão
	 * "visualmente oculto" — continua sendo lido e continua sendo achado
	 * pela busca do navegador.
	 */
	.mw-logo .mw-logo-icon,
	.mw-logo-icon {
		display: inline-block;
		width: auto;
		height: 2.5rem;
	}

	.mw-logo-wordmark,
	.mw-logo-tagline {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Título do artigo: em caixa alta ele quebra cedo, então cede um pouco. */
	h1#firstHeading,
	h1.firstHeading,
	h1.mw-first-heading {
		font-size: 1.7rem;
	}

	.gg-inicio > h1,
	.gg-inicio > .mw-heading1 {
		padding: 2rem 1rem 1rem;
	}

	.gg-infobox,
	.gg-infobox-titulo {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.gg-infobox {
		margin-bottom: 1.5rem;
	}

	.gg-evolucao {
		border-radius: var(--gg-r-2);
	}

	.gg-inicio ul {
		grid-template-columns: 1fr;
	}

	.gg-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Na grade 2×2 a linha separadora da terceira célula fica sobrando. */
	.gg-stat:nth-child(3) {
		box-shadow: none;
	}

	.gg-tabela-evolutiva,
	.mw-parser-output table.wikitable {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}

	/*
	 * Com display: block a legenda herda a largura ROLADA da tabela, não a
	 * da tela — por isso ela não quebrava e saía cortada no meio da palavra.
	 * Limitar à viewport devolve a quebra; sticky mantém a legenda à vista
	 * enquanto a tabela rola para o lado.
	 */
	.gg-tabela-evolutiva caption {
		position: sticky;
		left: 0;
		width: max-content;
		max-width: 88vw;
		white-space: normal;
	}
}

/* Telas bem estreitas: mais um passo de compressão. */
@media (max-width: 480px) {
	.mw-page-container,
	.mw-page-container-inner {
		padding-inline: .25rem;
	}

	#content.mw-body,
	.vector-body {
		padding: 1rem .75rem 1.6rem;
	}

	.gg-stats {
		grid-template-columns: 1fr;
	}

	.gg-stat {
		box-shadow: inset 0 1px 0 var(--gg-sobre-heroi-linha);
	}

	.gg-stat:first-child {
		box-shadow: none;
	}
}


/* =============================================================================
 *  16. PREFERÊNCIAS DO LEITOR
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.gg-inicio ul li a:hover,
	.gg-evolucao-etapa a:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.gg-infobox,
	.gg-infobox-titulo,
	.gg-esboco,
	.gg-evolucao,
	.gg-tabela-evolutiva,
	.gg-stats,
	.gg-inicio ul li a,
	.mw-content-container {
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.gg-evolucao-atual a {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	body::before {
		display: none;
	}
}

@media print {
	body::before {
		display: none;
	}

	.mw-content-container,
	#content.mw-body,
	.gg-infobox,
	.gg-stats,
	.gg-tabela-evolutiva {
		box-shadow: none;
		border-color: #999;
	}

	.gg-inicio > h1,
	.gg-inicio > .mw-heading1,
	.gg-inicio > .mw-heading1 h1,
	.gg-subtitulo,
	.gg-stats,
	.gg-stat-numero,
	.gg-stat-rotulo {
		background: none !important;
		color: #000 !important;
	}

	.gg-evolucao,
	.catlinks {
		display: none;
	}
}
Admin (discussão | contribs)

Edição atual tal como às 09h06min de 29 de julho de 2026
