/*
 * A página de Personagens de cada jogo.
 *
 * As medidas vieram da página que ela montou e depois pediu de volta: "queria
 * muito que fosse do mesmo jeito". Então os valores daqui são os do código
 * dela — a proporção 0.72 da carta, a escada de colunas, o degradê de leitura,
 * os ícones no canto, a plaquinha do nome, as caixas dos filtros.
 *
 * Duas coisas não voltaram ao que eram, de propósito, porque foram ela mesma
 * que pediu depois: o tamanho dos selos, que ela mandou aumentar e encolher
 * junto com a tela, e o X dourado da busca. Desfazer isso seria devolver um
 * problema que ela já tinha mandado consertar.
 *
 * As fontes são as do site, no tamanho que a página dela usava — foi o que ela
 * pediu: "as do site igual voce colocou na pagina nova, mas mantem o mesmo
 * tamanho delas".
 */

.galeria__wrap {
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.galeria__titulo {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 700;
	text-align: center;
	color: var(--text);
}

.galeria__intro {
	width: min(100%, var(--wrap-text));
	margin: 0 auto 1.5rem;
}

/* Faixa de cima --------------------------------------------------------- */

/*
 * "Uma linha da cor do jogo em cima da barra de pesquisa. Em cima da linha na
 * ponta esquerda... e depois alinhado na ponta direita da linha, Atualizado
 * em." É o desenho dela, em palavras.
 *
 * O fio é a borda de baixo desta caixa, e não um elemento à parte: assim ele
 * acompanha a largura do conteúdo sozinho e nunca sai do lugar.
 */
.galeria__faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	margin: 0 0 1.1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--jogo-cor, var(--gold));
}

.galeria__faixa-texto,
.galeria__faixa-data {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.galeria__faixa-texto strong {
	color: var(--text);
	font-weight: 700;
}

/* O tracinho entre o nome do jogo e a contagem, desenhado em vez de digitado. */
.galeria__faixa-risco {
	display: inline-block;
	width: 1px;
	height: 0.85em;
	margin: 0 0.45rem;
	background: currentColor;
	opacity: 0.5;
	vertical-align: -0.05em;
}

/*
 * No celular a data desce para a linha de baixo sozinha, pelo flex-wrap. Sem
 * empurrar nada: com as duas na mesma linha o nome do jogo ficaria espremido.
 */
@media (max-width: 520px) {

	.galeria__faixa {
		justify-content: flex-start;
	}
}

/* Busca ----------------------------------------------------------------- */

.galeria__busca-rotulo {
	display: block;
	margin: 0 0 20px;
}

.galeria__busca {
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 14px;
}

.galeria__busca:focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/*
 * O X que limpa a busca, em dourado — pedido dela, e já aprovado.
 *
 * O X nativo do navegador não aceita cor: ele é desenhado pelo próprio
 * navegador, cinza, e nenhuma propriedade de cor o alcança. Por isso ele é
 * desligado e desenhado aqui, como imagem de fundo.
 *
 * O dourado vai escrito em número, e não como var(--gold), porque endereço de
 * imagem não lê variável de CSS. Se o dourado da marca mudar, muda aqui junto
 * — está anotado para quem procurar.
 *
 * O # vira %23: dentro de um endereço de imagem, o # cortaria o resto.
 */
.galeria__busca::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
}

.galeria__busca::-webkit-search-cancel-button:hover {
	opacity: 1;
}

/* Filtros --------------------------------------------------------------- */

.galeria__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.6rem, 2vw, 1rem);
	justify-content: center;
	/* Mesma altura nas três, que é o que deixa a fileira parecendo uma peça só. */
	align-items: stretch;
	margin: 0 0 1.75rem;
}

/*
 * Cada grupo na sua caixinha, com o título em cima — como na página dela.
 *
 * O vidro fosco por trás é o que separa a caixa do fundo preto sem precisar de
 * uma borda forte, e é o que ela tinha.
 */
.galeria__grupo {
	min-width: 0;

	/*
	 * As três dividem a largura inteira, em vez de encolherem no conteúdo e
	 * deixarem sobra dos dois lados. Pedido dela: "pra nao ficar sobrando
	 * espaço e ficar tudo do mesmo tamanho junto com a barra de pesquisa e os
	 * personagens. Mantem os botoes do mesmo tamanho, o mesmo espaço entre eles
	 * tambem. Se possível aumentar apenas a largura das caixas, daí centraliza
	 * os botões dentro delas."
	 *
	 * Só a caixa cresce: quem centraliza os botões é o justify-content lá do
	 * .galeria__opcoes, e o tamanho deles não muda.
	 */
	/*
	 * O 'auto' no fim é o que importa: cada caixa parte da largura do que tem
	 * dentro e só then divide a sobra. Com basis 0 as três ficariam do mesmo
	 * tamanho, e aí não cabem os oito elementos nem os dez caminhos do Honkai
	 * numa fileira — quebravam em 7 e 1, e em 7 e 3. Ela pediu os botões do
	 * mesmo tamanho e com o mesmo vão, então quem cede é a largura da caixa.
	 */
	flex: 1 1 auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	background: rgba(21, 22, 26, 0.78);
	border: 1px solid rgba(48, 50, 57, 0.85);
	border-radius: 8px;
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
}

/*
 * Maior que na página dela, com a licença que ela deu: "se voce quiser
 * aumentar a fonte e trocar a fonte. Pode fazer. Porque ali realmente ta
 * pequeno."
 *
 * A fonte é a do site, que foi o outro pedido dela.
 */
.galeria__grupo-titulo {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}

/*
 * Quantos botões cabem por fileira.
 *
 * O --por-linha vem do PHP, um por grupo: 4 nos elementos (o "4 e 4" que ela
 * aprovou), 3 na raridade, e nos caminhos do Honkai 5, que parte os dez em duas
 * fileiras iguais. A largura máxima é a conta desses botões com os vãos entre
 * eles, então a fileira quebra exatamente onde ela pediu.
 *
 * Antes isto era uma grade de quatro colunas, e resolvia só o caso em que a
 * conta fechava certinho. Com grade, o que sobrava na última fileira ficava
 * encostado à esquerda — era o que ela via no Wuthering, com sete elementos
 * virando 4 e 3. Em flex, o justify-content centraliza a sobra.
 *
 * O 99 é só a saída de emergência: sem --por-linha, o limite fica tão largo que
 * é como se não existisse.
 */
.galeria__opcoes {
	--botao: 40px;
	--vao: 6px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vao);
	max-width: calc(
		var(--por-linha, 99) * var(--botao) +
		( var(--por-linha, 99) - 1 ) * var(--vao)
	);
	margin-inline: auto;
}

.galeria__botao {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 7px;
	background: rgba(28, 30, 35, 0.62);
	color: #b5b7bd;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease),
	            transform var(--speed) var(--ease);
}

.galeria__botao img {
	width: 21px;
	height: 21px;
	object-fit: contain;
	transition: transform var(--speed) var(--ease);
}

/*
 * Os ícones de arma e de caminho em branco.
 *
 * Pedido dela: "os ícones das armas e dos caminhos tão apagadinhos, vê se você
 * consegue clarear eles. Colocar em branco." Os arquivos são cinzas, e sobre o
 * fundo escuro do botão sumiam.
 *
 * O brightness(0) pinta tudo o que é opaco de preto e o invert(1) vira esse
 * preto em branco; o que é transparente continua transparente. Sai branco
 * chapado sem precisar de um segundo jogo de arquivos.
 *
 * Só aqui, nos botões de filtro. Nos ícones da carta o mesmo truque viraria o
 * fundo preto deles em branco junto, porque o filtro pega o elemento inteiro.
 */
.galeria__botao[data-teyvat-filtro="arma"] img {
	filter: brightness(0) invert(1);
}

.galeria__botao:hover {
	background: rgba(43, 47, 56, 0.82);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
	transform: translateY(-1px);
}

.galeria__botao:hover img {
	transform: scale(1.08);
}

.galeria__botao:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.galeria__botao.is-ativo {
	background: color-mix(in srgb, var(--filtro-cor, var(--gold)) 12%, rgba(20, 22, 26, 0.92));
	border-color: var(--filtro-cor, var(--gold));
	color: #fff;
	box-shadow: 0 0 14px color-mix(in srgb, var(--filtro-cor, var(--gold)) 24%, transparent);
}

/* O botão "todos" e os de raridade são letra, e não ícone: pedem mais corpo. */
.galeria__botao[data-valor="todos"] {
	font-size: 15px;
	font-weight: 800;
	color: var(--gold);
}

.galeria__botao--cinco,
.galeria__botao--quatro {
	font-size: 15px;
	font-weight: 800;
}

.galeria__botao--cinco.is-ativo { --filtro-cor: #C9A36A; }
.galeria__botao--quatro.is-ativo { --filtro-cor: #8A5FCC; }

/* Grade ----------------------------------------------------------------- */

/*
 * A escada de colunas dela: 3 no celular estreito, subindo até 8 no
 * computador.
 *
 * Um degrau estava faltando no código dela — entre 981 e 1024 pixels nenhuma
 * regra pegava e a grade despencava de 8 para 4 no meio do caminho. Aqui o 8
 * começa em 981 e a escada sobe inteira.
 */
.galeria__grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
}

.galeria__vaga {
	min-width: 0;
}

.galeria__carta {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 0.72;
	border: 1px solid #303239;
	border-radius: 9px;
	/* isolation para o degradê, os ícones e o nome ficarem acima da foto
	   sem precisar de z-index alto. */
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s var(--ease),
	            border-color 0.18s var(--ease),
	            box-shadow 0.18s var(--ease);
}

/* Os degradês dela, nos valores exatos das páginas que montou. */
.galeria__carta--cinco  { background: linear-gradient(#885550 0%, #c9a36a 53%); }
.galeria__carta--quatro { background: linear-gradient(#343659 0%, #8a5fcc 53%); }

/*
 * O escurecido de baixo, que é o que faz o nome se ler.
 *
 * Era isto que faltava: sem ele o nome fica solto por cima da arte e some em
 * quem tem roupa clara. Sombra no texto sozinha não resolve — a arte muda de
 * personagem para personagem, a sombra não.
 */
.galeria__carta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.5) 70%,
		rgba(0, 0, 0, 0.95) 100%
	);
}

/* O fiozinho no alto, na cor do elemento. Some em quem não tem elemento. */
.galeria__carta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	z-index: 4;
	pointer-events: none;
	background: var(--elemento-cor, transparent);
}

a.galeria__carta:hover,
a.galeria__carta:focus-visible {
	border-color: var(--gold);
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28),
	            0 10px 24px rgba(0, 0, 0, 0.32),
	            0 0 18px rgba(212, 175, 55, 0.10);
	transform: translateY(-3px);
}

a.galeria__carta:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* A foto cresce devagar por dentro da carta, que não se mexe. */
a.galeria__carta:hover .galeria__foto,
a.galeria__carta:focus-visible .galeria__foto {
	transform: scale(1.20);
}

/*
 * Quem ainda não tem guia fica apagado e não clica — é a mesma distinção que
 * ela fez nas páginas dela, e evita a decepção de clicar e não ir a lugar
 * nenhum.
 */
.galeria__carta--sem-guia {
	opacity: 0.48;
	cursor: default;
}

.galeria__carta--sem-guia .galeria__foto {
	filter: saturate(0.82);
}

.galeria__foto {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.galeria__foto--vazia {
	background: var(--bg-deep);
}

/* Ícones no canto ------------------------------------------------------- */

/*
 * Elemento em cima, arma logo abaixo, no canto de cima à esquerda — a ordem e
 * o lugar da página dela.
 */
.galeria__atributos {
	position: absolute;
	top: 5px;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;

	/*
	 * O fundo preto é do bloco, e não de cada ícone.
	 *
	 * Foi isto que destravou deixar a arma branca: o filtro do CSS pega o
	 * elemento inteiro, e enquanto o preto estava em cada ícone o invert virava
	 * o fundo em branco junto com o desenho. Com o preto aqui, o filtro lá
	 * embaixo só alcança a arma.
	 *
	 * Em coluna os dois se encostam sozinhos, e o bloco encolhe para caber só o
	 * que existe: personagem sem arma fica com o quadradinho de um ícone, e não
	 * com um buraco.
	 */
	background: #0B0B0B;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
	pointer-events: none;
}

/*
 * Os dois colados um no outro e grudados na borda — pedido dela, com foto:
 * "juntar os dois e deixar colado na lateral do bloco de personagem. Porque
 * quando ia pro mobile ele separava."
 *
 * Na página dela ficavam a 5px da borda e com 3px de vão entre si, e no
 * celular esse vão abria mais. Aqui o elemento começa onde a arma termina —
 * 5 e 25, com 20px de altura cada — e os dois encostam na lateral.
 */
.galeria__icone {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/*
 * A arma em branco também aqui na carta, e não só nos botões de filtro. Ela
 * pediu os dois: "Sim, esses também. Por favor."
 *
 * O elemento continua com a cor dele, que é o que identifica o personagem de
 * relance.
 */
.galeria__icone--arma {
	filter: brightness(0) invert(1);
}

/* Nome ------------------------------------------------------------------ */

.galeria__nome {
	position: absolute;
	right: 8px;
	bottom: 9px;
	left: 8px;
	z-index: 5;
	text-align: center;
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: break-word;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

/* Selos ----------------------------------------------------------------- */

.galeria__selo {
	position: absolute;
	top: 8px;
	right: 7px;
	z-index: 6;

	/*
	 * Grid com place-items, como no selo dos códigos — e pelo mesmo motivo,
	 * que já está escrito lá: com padding solto, o espaçamento entre letras
	 * deixa um vão depois da última letra, e a palavra nunca fica no meio.
	 * O acréscimo à esquerda devolve esse vão.
	 *
	 * Foi o que ela viu: "dá pra centralizar mais o texto dentro deles".
	 */
	display: grid;
	place-items: center;

	/*
	 * Cresce e encolhe com a tela, com piso.
	 *
	 * São três cartas por fileira no celular e oito no computador, então o
	 * selo não pode ter tamanho fixo. O clamp dá o teto de 11px — o mesmo do
	 * selo dos códigos, que ela aprovou — e um piso de 8px, que é onde a
	 * palavra ainda se lê de relance. Abaixo disso ela vira enfeite.
	 *
	 * O resto da caixa vai em em, e não em px, para o selo inteiro acompanhar
	 * a letra em vez de só o texto mudar de tamanho dentro de uma caixa fixa.
	 */
	font-size: clamp(0.5rem, 1.15vw, 0.6875rem);
	min-height: 1.85em;
	padding: 0 0.62em 0 calc(0.62em + 0.08em);

	border-radius: 5px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.07em;
	color: #0B0B0E;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.galeria__selo--novo   { background: linear-gradient(180deg, #efc95f, #c89c32); }
.galeria__selo--rerun  { background: linear-gradient(180deg, #5fcbe7, #2b92b1); }
.galeria__selo--backup { background: linear-gradient(180deg, #b0b5bc, #6c757d); }

/* Nada encontrado ------------------------------------------------------- */

.galeria__vazio {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 20px;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	background: var(--surface);
	text-align: center;
	color: var(--text-muted);
}

/* A escada de colunas, subindo ------------------------------------------ */

@media (min-width: 481px) {

	.galeria__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
	}

	.galeria__nome {
		font-size: 11px;
	}
}

@media (min-width: 651px) {

	.galeria__grade {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 821px) {

	.galeria__grade {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/*
 * No computador a página passa da largura do tema. Foi ela que fez isso e
 * gostou: "eu adicionei isso daqui pra ele ultrapassar a linha padrão da
 * pagina... Ele limitou 6 por coluna e eu coloquei 8. E gostei do resultado."
 *
 * Sem o left com o transform que ela usava. Aquilo serve para uma caixa que
 * começa encostada à esquerda; esta já vem centralizada pela .wrap do tema, e
 * as duas coisas juntas empurravam a página uns 50px para a direita — o left
 * jogava 640 para a frente e o transform só devolvia 589, que é metade da
 * largura dela. Alargar e deixar a margem automática centralizar dá o mesmo
 * resultado que ela queria, sem o empurrão.
 *
 * A classe dobrada (.galeria__wrap.wrap) é de propósito: sozinha ela empataria
 * com a .wrap do tema, e quem ganhasse dependeria da ordem dos arquivos.
 */
@media (min-width: 1025px) {

	.galeria__wrap.wrap {
		width: 92vw;
		max-width: 1400px;
		margin-inline: auto;

		/*
		 * O recuo lateral é o dela, 16px, e não o do tema.
		 *
		 * A .wrap do tema recua clamp(1rem, 4vw, 2.5rem), que no computador bate
		 * no teto de 40px por lado. São 48px a menos de grade, e com oito
		 * colunas isso deixava cada carta uns 6px mais estreita que na página
		 * dela. Ela pediu o contrário: "que ocupem o mesmo espaço da pagina que
		 * eles ocupavam".
		 *
		 * Só aqui, no computador: em tela estreita o recuo do tema já cai para
		 * perto dos mesmos 16px, então não há o que corrigir lá.
		 */
		padding-inline: 16px;
	}

	.galeria__grade {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	/*
	 * No computador cada grupo fica numa fileira só: os oito elementos, e os dez
	 * caminhos do Honkai também. É como ela deixou e gostou — o "4 e 4" e o
	 * "5 e 5" são de tela estreita, onde não cabem numa linha.
	 *
	 * Soltar o limite basta: sem teto de largura, o flex não quebra.
	 */
	.galeria__opcoes {
		max-width: none;
	}
}

/*
 * No celular cada caixa de filtro pega a largura toda e elas se empilham, como
 * na foto que ela mandou.
 */
@media (max-width: 650px) {

	/*
	 * flex-basis, e não width.
	 *
	 * Num item flex quem manda no tamanho é o basis, e o width fica só de
	 * enfeite. Enquanto isto era width, as três caixas continuavam dividindo a
	 * linha do jeito do computador e ficavam com 108px cada no celular, com os
	 * botões quebrando de dois em dois.
	 */
	.galeria__grupo {
		flex-basis: 100%;
	}
}

/* Celular estreito: botão menor, como no código dela. */
@media (max-width: 520px) {

	.galeria__grupo {
		padding: 8px;
		border-radius: 7px;
		gap: 7px;
	}

	.galeria__botao {
		width: 36px;
		height: 36px;
		border-radius: 6px;
		font-size: 10px;
	}

	/*
	 * A conta da largura precisa saber que o botão encolheu. Sem isto ela
	 * continua reservando 40px por botão, sobra espaço no fim da fileira e
	 * entra um botão a mais onde ela pediu quatro.
	 */
	.galeria__opcoes {
		--botao: 36px;
	}
}

/* -------------------------------------------------------------------------
   [char] — as mesmas cartas, dentro do texto da postagem

   Ela pediu "os blocos do mesmo tamanho que ficam na pagina de personagens".
   A carta é literalmente a mesma (template-parts/galeria-carta.php), então o
   que falta aqui é só a grade em volta.

   E a grade não pode ser a .galeria__grade: aquela conta colunas — 3, 4, 5, 6,
   8 conforme a tela — para encher a largura da página, que no computador passa
   dos 1300px. O texto da postagem tem menos da metade disso, e oito colunas ali
   dariam cartas de uns 78px, um terço do tamanho das da galeria.

   Por isso a coluna aqui tem largura fixa em vez de fração: 134px é o que a
   carta mede na página de Personagens num monitor de 1280 (92vw, menos os 16px
   de recuo de cada lado, menos os sete vãos de 10px, dividido por oito). Assim
   a carta sai do mesmo tamanho esteja ela onde estiver, e o número de colunas é
   consequência da largura que sobrar.
   ---------------------------------------------------------------------- */

.char-atalho {
	margin: 1.75rem 0;
}

/*
 * Centralizado, que foi o que ela pediu depois de usar: "se ficasse
 * centralizado ele ia parecer que ta melhor organizado".
 *
 * Não é grade, é flex — e a diferença aparece na última fileira.
 *
 * Na grade, quem centraliza é o conjunto de colunas, não os blocos: com três
 * personagens no celular cabem dois em cima e um embaixo, e esse um fica na
 * coluna da esquerda, fora do eixo dos de cima. Era o que dava aqui. No flex
 * cada fileira se centraliza sozinha, inclusive a última pela metade.
 *
 * Isto só sai de graça porque todo bloco tem a mesma largura fixa de 134px. Se
 * tivessem larguras diferentes, o flex deixaria a última fileira com blocos de
 * outro tamanho — e aí a grade seria a escolha certa.
 *
 * (A primeira versão era grade com auto-fill, que é pior ainda: o auto-fill
 * deixa de pé as colunas vazias da linha, e são elas que comem o espaço que a
 * centralização usaria. Saiu tudo encostado à esquerda, e ela viu na hora:
 * "Eu coloquei os personagens, dai se alinharam tudo a esquerda".)
 */
.char-atalho__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.char-atalho__lista > .galeria__vaga {
	width: 134px;
}

/* O mesmo aviso do [arma], para ela ver o nome que não encontrou. */
.char-atalho__aviso {
	margin: 1rem 0;
	padding: 10px 14px;
	border: 1px dashed var(--border-soft);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text-muted);
	font-size: 0.9rem;
}

/*
 * Desfazendo, só aqui dentro, o que a postagem faz com imagem e com link.
 *
 * conteudo.css veste tudo o que cai dentro de .post__conteudo: imagem ganha
 * height:auto e canto arredondado, link ganha dourado e sublinhado. São regras
 * de uma classe mais um elemento; as da carta são de uma classe só, e por isso
 * a carta perdia. Dentro da postagem a foto parava de preencher — virava 66px,
 * que é a altura natural da arte reduzida à largura da carta — e o nome saía
 * sublinhado em dourado.
 *
 * O prefixo .char-atalho é o que devolve a carta ao que ela é na página de
 * Personagens. Mexer em conteudo.css seria o contrário do que se quer: as
 * imagens e os links normais do texto dela continuam como estão.
 */
.char-atalho .galeria__carta {
	color: inherit;
	text-decoration: none;
}

.char-atalho .galeria__foto {
	height: 100%;
	border-radius: 0;
}

.char-atalho .galeria__icone {
	height: 20px;
	border-radius: 0;
}