/* =========================================================================
   CENTRAL DE CÓDIGOS

   Refeita a partir do PDF "Página de Códigos Ativos".

   O desenho dela, de cima para baixo dentro do card, depois da segunda
   rodada de ajustes:

       o código          (com "Novo" e o símbolo verde nos cantos da caixa)
       a descrição       (pequena, dentro da mesma caixa, fora da seleção)
       a validade        (logo abaixo do código)
       os itens          (em lista: ícone, nome por extenso e a quantidade)
       ────────────      (divisória)
       COPIAR  RESGATAR  (lado a lado)

   Duas seções na mesma página — "Códigos Novos" em cima e "Códigos Ativos"
   embaixo. Quem decide em qual seção cada card entra é o navegador de quem
   está lendo; ver assets/js/codigos.js.

   Usa .abas e .faixa-titulo do conteudo.css: é o mesmo filtro e a mesma faixa
   da listagem de notícias, e duplicar as regras só faria o navegador baixar
   duas vezes a mesma coisa.
   ========================================================================= */

.codigos {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/*
 * Coluna própria, mais larga que o desenho original e mais estreita que o
 * resto do site.
 *
 * Começou em 900px, tirados do primeiro desenho dela. Ela pediu depois blocos
 * mais largos — como ficaram no tablet, onde os botões respiram — e três por
 * linha ao mesmo tempo, e as duas coisas juntas não cabiam em 900.
 *
 * 1140 é a medida que dá três cards de uns 340px, que é o tamanho dos cards do
 * site que ela usa e mandou de referência. Ainda é menos que os 1320 do resto
 * do site: página de código é lista, e lista larga demais faz o olho perder a
 * linha.
 */
.codigos .wrap {
	max-width: 1140px;
}

/*
 * A caixa de aviso, na cor do jogo escolhido.
 *
 * Começou amarela com letra preta e virou ideia melhor dela: a cor do jogo,
 * translúcida, com letra branca, trocando junto com a aba. Fica ligada à aba
 * ativa em vez de gritar sozinha num canto.
 *
 * Translúcida, e não cheia: ela pediu "pra que não fique fluorescente e agrida
 * a visão", e o azul do Genshin em cor cheia sobre preto queima mesmo.
 *
 * O dourado é o valor de partida — é o que aparece antes de o JavaScript
 * copiar a cor da aba, e o que fica para sempre em quem navega sem ele.
 */
.codigos__aviso {
	--codigos-cor: var(--gold);
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1.1rem, 2.5vw, 1.5rem);
	background: color-mix(in srgb, var(--codigos-cor) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--codigos-cor) 55%, transparent);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.6;
	/* Centralizado, a pedido dela. */
	text-align: center;
	transition: background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease);
}

/* "Copiar" e "Resgatar" em negrito: são os dois nomes que a frase ensina. */
.codigos__aviso strong {
	font-weight: 700;
	color: #FFF;
}


/* -------------------------------------------------------------------------
   As duas seções
   ---------------------------------------------------------------------- */

.codigos__secao + .codigos__secao {
	margin-top: clamp(2.5rem, 6vw, 4rem);
}

/*
 * O título dentro de uma faixa contornada de dourado, como ela desenhou.
 *
 * Diferente dos títulos da Home, que são texto com um filete ao lado. Aqui a
 * faixa fecha em volta e atravessa a largura toda: são duas listas na mesma
 * tela, e a moldura deixa claro onde uma termina e a outra começa.
 */
.codigos__secao-titulo {
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--gold-deep);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text);
	/* À esquerda, como ela pediu para todos os títulos de seção. */
	text-align: left;
}

.codigos__secao-titulo--novos {
	border-color: var(--gold);
	color: var(--gold-bright);
}

.codigos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/*
	 * 300px como mínimo do card dá a escada que ela quer sem nenhuma regra de
	 * tamanho de tela: três por linha no computador, dois no tablet deitado —
	 * que foi de onde ela gostou — e um no celular.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(0.85rem, 1.8vw, 1.25rem);
	/* Cards da mesma linha com a mesma altura: junto com o margin-top:auto da
	   divisória, os botões ficam todos na mesma base, mesmo quando um código
	   tem quatro itens e o vizinho tem um. */
	align-items: stretch;
}

.codigos__vazio-filtro {
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	text-align: center;
	color: var(--text-muted);
}

/* Os jogos centralizados, a pedido dela — como no arquivo de notícias. */
.codigos .abas__lista {
	justify-content: center;
}


/* -------------------------------------------------------------------------
   Card
   ---------------------------------------------------------------------- */

.codigo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	/* Segura a estrela da marca, que sangra pelo canto de baixo. */
	overflow: hidden;
	transition: border-color var(--speed) var(--ease),
	            opacity var(--speed) var(--ease),
	            filter var(--speed) var(--ease);
}

.codigo:hover { border-color: var(--border); }

/*
 * Já resgatado por esta pessoa.
 *
 * "Esse BOX do código fica sem cor e aparece um símbolo indicando que ele foi
 * resgatado."
 *
 * Sem cor aqui é redefinir os dourados para cinza dentro do card, e não pintar
 * cada elemento à mão: o card inteiro segue as mesmas variáveis do resto do
 * site, então qualquer coisa que ela acrescentar no futuro já nasce apagada
 * junto. Um filter: grayscale no card resolveria em uma linha, mas apagaria
 * também o símbolo verde — que é justamente o que precisa continuar visível.
 *
 * A opacidade não desce demais: o código continua legível para quem quiser
 * conferir o que já pegou.
 */
.codigo.is-resgatado {
	--gold:        #6E6E78;
	--gold-bright: #A8A8B2;
	--gold-deep:   rgba(255, 255, 255, 0.18);
	--border:      rgba(255, 255, 255, 0.12);
	opacity: 0.7;
}

/* As fotos dos itens são coloridas por natureza; nelas o cinza é no filtro. */
.codigo.is-resgatado .codigo__item-img,
.codigo.is-resgatado::before {
	filter: grayscale(1);
}

/* Volta ao normal quando a pessoa se interessa de novo por ele. */
.codigo.is-resgatado:hover,
.codigo.is-resgatado:focus-within {
	opacity: 1;
}

/*
 * A caixa do código, com as duas marcas mordendo os cantos de cima.
 *
 * Elas ficam por cima da caixa, e não numa linha própria acima dela, porque
 * uma linha reservada deixaria um vazio em todo card sem marca nenhuma — que
 * é a maioria. Assim o card comum não paga nada pelas duas.
 */
.codigo__caixa {
	position: relative;
}

/* O verde não é só borda: ela desenhou o símbolo cheio, e cheio ele salta
   por cima do card apagado, que é exatamente onde ele precisa saltar. */
.codigo__resgatado {
	position: absolute;
	top: -9px;
	right: -6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #35B06B;
	border: 2px solid var(--surface);
	color: #FFF;
}

.codigo__resgatado svg {
	width: 11px;
	height: 11px;
}

/*
 * Etiqueta "Novo", no canto de cima à esquerda.
 *
 * "Em vermelho (ou dourado se você preferir)" — dourado, que é a cor da casa
 * e não briga com o vermelho de erro que o site usa em outro lugar.
 */
.codigo__novo {
	position: absolute;
	top: -10px;
	left: -4px;
	z-index: 2;
	/*
	 * Grid com place-items em vez de padding solto: é o que centra a palavra
	 * de verdade dentro da pastilha. Com padding, o espaçamento entre letras
	 * empurra o texto alguns pixels para a esquerda — o último espaço depois
	 * do "O" conta, e aí a palavra nunca fica no meio.
	 */
	display: grid;
	place-items: center;
	min-height: 20px;
	padding: 0 0.6rem 0 calc(0.6rem + 0.08em);
	border-radius: 999px;
	background: var(--gold);
	border: 2px solid var(--surface);
	color: #0B0B0E;
	font-family: var(--font-display);
	/* Maior e mais cheia, a pedido dela: estava fina demais para ler de
	   relance, que é o único jeito que um selo desses é lido. */
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * O código em monoespaçada.
 *
 * São letras e números sem palavra nenhuma, e quem digita à mão precisa
 * distinguir zero de O e um de I. Em fonte de texto normal isso vira sorteio.
 */
.codigo__texto {
	margin: 0;
	width: 100%;
	padding: 0.75rem 0.85rem;
	background: var(--bg-deep);
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.codigo__valor {
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
	/*
	 * O corpo é ditado pelo código mais longo dos dois jogos.
	 *
	 * "STARRAILFATE2026" tem dezesseis caracteres e precisa caber numa linha
	 * só — um código partido no meio é justamente o que faz o jogador digitar
	 * errado. Com o card em 340px cabe folgado até 1.1rem; foi o card estreito
	 * de antes que obrigava a apertar.
	 */
	font-size: clamp(0.95rem, 2vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--gold-bright);
	/* Rede de segurança para um código maior ainda: quebra em vez de esticar
	   o card e desalinhar a grade inteira. */
	overflow-wrap: anywhere;
}

/*
 * A descrição fica junto do código, mas fora da seleção.
 *
 * "Que essa descrição não seja copiada ou selecionada quando for copiar o
 * código. Para não dificultar a vida do jogador descuidado." Quem arrasta o
 * mouse por cima do código não leva a descrição junto — e o botão Copiar
 * nunca leu daqui, ele copia do atributo.
 */
.codigo__descricao {
	-webkit-user-select: none;
	user-select: none;
	font-family: var(--font-display);
	/* Menor e mais junta do código, a pedido dela: é legenda, não título. */
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--text-muted);
	opacity: 0.85;
}


/* -------------------------------------------------------------------------
   Itens de recompensa

   Em lista, um por linha: ícone, nome por extenso e a quantidade no fim do
   próprio texto — "Gema Primordial ×60".

   Eram quadradinhos lado a lado. Ela pediu a troca e estava certa: "Minério
   de Aprimoramento Místico" quebrava em quatro linhas dentro de um quadrado
   de 74px e deixava a fileira torta. Em lista, nome nenhum atrapalha.
   ---------------------------------------------------------------------- */

.codigo__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.codigo__item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.55rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--text);
}

/*
 * O item valioso — Gemas Primordiais, Jades Estelares — ganha o fundo
 * destacado. É a moeda que faz a pessoa clicar, e ela pediu que se separasse
 * dos materiais comuns.
 */
.codigo__item--valioso {
	background: rgba(212, 175, 55, 0.10);
	border-color: var(--gold-deep);
	color: var(--gold-bright);
}

/*
 * 32px, medidos na referência que ela mandou.
 *
 * Ela apontou o crimsonwitch.com e pediu "iguais a esse". Medindo o ícone de
 * lá na tela: 28 a 30px de desenho, com a letra em 14px — ou seja, o ícone
 * vale o dobro da altura da letra.
 *
 * Aqui a caixa é 32px e o desenho ocupa 94% dela, o que dá 30px de desenho.
 * A caixa é maior que o alvo de propósito: o que a pessoa enxerga é o
 * desenho, não a moldura invisível em volta dele.
 *
 * Os 26px de antes davam 18 a 24px de desenho conforme o arquivo, porque cada
 * arte ocupava uma fração diferente do quadro. Isso está resolvido nos
 * próprios arquivos agora — todos em 94% —, sem o que aumentar a caixa só
 * espalharia a diferença.
 */
.codigo__item-img {
	flex: none;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

/* Enquanto ela não subir a arte dos itens, um losango da casa segura o lugar
   para a lista não ficar com os nomes desalinhados entre si. */
.codigo__item-vazio {
	flex: none;
	width: 32px;
	height: 32px;
	background: var(--gold-deep);
	opacity: 0.5;
	-webkit-mask: linear-gradient(#000 0 0) center / 9px 9px no-repeat;
	mask: linear-gradient(#000 0 0) center / 9px 9px no-repeat;
	transform: rotate(45deg);
}

.codigo__item-nome {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A quantidade acompanha o nome no mesmo texto, só que sem competir com ele. */
.codigo__item-qtd {
	margin-left: 0.3em;
	font-weight: 700;
	color: var(--text-muted);
	white-space: nowrap;
}

.codigo__item--valioso .codigo__item-qtd {
	color: var(--gold-bright);
}

/* Recompensas escritas à mão, para o que não virou item com foto. */
.codigo__recompensas {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--text-muted);
	text-align: center;
}

.codigo__recompensas li + li { margin-top: 0.2rem; }


/* -------------------------------------------------------------------------
   Validade, divisória e botões
   ---------------------------------------------------------------------- */

/*
 * A validade, logo abaixo do código.
 *
 * Subiu de perto dos botões para cá a pedido dela: "porque aí o espaço de
 * baixo fica só pros itens". A data pertence ao código, e não à lista de
 * recompensas — lida assim, faz sentido de primeira.
 */
.codigo__validade {
	margin: -0.35rem 0 0;
	font-size: 0.6875rem;
	color: var(--text-muted);
	text-align: center;
}

.codigo__validade--aberta { opacity: 0.75; }

/*
 * A divisória empurra os botões para o fim do card.
 *
 * O margin-top:auto vive aqui e não nos botões: assim a linha desce junto e
 * os dois ficam colados nela, em vez de a linha ficar boiando no meio.
 */
.codigo__divisor {
	display: block;
	margin-top: auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-deep) 25%, var(--gold-deep) 75%, transparent);
}

.codigo__acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

/*
 * Os dois botões, alinhados por dentro.
 *
 * "Tenta deixar as letras e os ícones de copiar e link externo alinhados",
 * ela pediu. O texto de cada um mora num span próprio, e a linha de base é o
 * centro do flex — sem isso o SVG assentava uns pixels acima da letra, e num
 * botão pequeno isso se vê.
 */
.codigo__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 0.5rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background-color var(--speed) var(--ease);
}

.codigo__botao svg {
	width: 13px;
	height: 13px;
	flex: none;
	/* O SVG é inline por natureza e assenta na linha de base do texto; block
	   tira ele da linha e deixa o flex centrar os dois de verdade. */
	display: block;
}

.codigo__botao-texto {
	display: block;
	line-height: 1;
}

/* Copiar é a ação secundária: contorno. */
.codigo__botao--copiar {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-muted);
}

.codigo__botao--copiar:hover,
.codigo__botao--copiar:focus-visible {
	color: var(--text);
	border-color: var(--gold-deep);
}

/* Confirmação no próprio botão: o olho de quem copiou está no card, não no
   fim da página. */
.codigo__botao--copiar.is-copiado {
	color: #0B0B0E;
	background: var(--gold);
	border-color: var(--gold-bright);
}

/* Resgatar é a ação principal: preenchido. */
.codigo__botao--resgatar {
	background: var(--gold);
	border: 1px solid var(--gold);
	color: #0B0B0E;
}

/*
 * Os mesmos botões, agora dentro do texto de uma postagem.
 *
 * O card chegou lá pelo atalho [codigo], e no corpo da postagem todo link é
 * dourado e sublinhado — regra de leitura, escrita para os links que ela
 * escreve no meio de um parágrafo. Só que o Resgatar também é um link, e
 * aquela regra tem dois nomes de classe contra o um só daqui: ganhava. O
 * botão saía com a letra dourada sobre o fundo dourado, quase apagada, e
 * sublinhada.
 *
 * Aqui a conta empata em dois nomes, e este arquivo é carregado depois. O
 * seletor descreve a estrutura em vez de citar a postagem, então vale
 * também na Central, onde não muda nada, e continuará valendo se um dia o
 * card aparecer num terceiro lugar.
 */
.codigo__acoes .codigo__botao {
	text-decoration: none;
}

.codigo__acoes .codigo__botao--resgatar {
	color: #0B0B0E;
}

.codigo__acoes .codigo__botao--copiar {
	color: var(--text-muted);
}

.codigo__acoes .codigo__botao--copiar:hover,
.codigo__acoes .codigo__botao--copiar:focus-visible {
	color: var(--text);
}

.codigo__acoes .codigo__botao--copiar.is-copiado {
	color: #0B0B0E;
}

/* -------------------------------------------------------------------------
   O card dentro do texto de uma postagem

   Pergunta dela: "se o código tiver descrição, não vai ficar bugado na
   postagem também?" Ia — e não só a descrição.

   O corpo da postagem tem as suas regras de leitura: parágrafo com respiro
   embaixo, lista com recuo à esquerda, item de lista com espaço entre um e
   outro. São regras certas para o texto que ela escreve, e o card caiu no
   meio delas quando o atalho [codigo] o levou para lá. Todas ganham do card
   por especificidade — falam de dois nomes de classe, o card fala de um.

   Medido: o mesmo código saía com 361px de altura na Central e 462px na
   postagem. Cem pixels de respiro que ninguém pediu, sendo 18px dentro da
   própria caixa do código, logo abaixo da descrição.

   Aqui cada peça volta ao valor que ela tem na Central. Os seletores citam a
   estrutura do card, e não a postagem, então o card fica igual em qualquer
   lugar onde ela o puser.
   ---------------------------------------------------------------------- */

.codigo .codigo__texto {
	margin: 0;
}

.codigo .codigo__validade {
	margin: -0.35rem 0 0;
}

.codigo .codigo__itens,
.codigo .codigo__recompensas {
	margin: 0;
	padding: 0;
}

.codigo .codigo__item,
.codigo .codigo__recompensas li {
	margin-bottom: 0;
}

/* O ícone do item não é foto de postagem: nada de cantos arredondados. */
.codigo .codigo__item-img {
	border-radius: 0;
}

/*
 * No mouse, só a letra muda.
 *
 * Antes o fundo clareava para o dourado pálido e o botão inteiro sumia — ela
 * mandou print. Mantendo o fundo e passando a letra para branco, o botão
 * responde ao mouse sem perder o contraste.
 */
.codigo__botao--resgatar:hover,
.codigo__botao--resgatar:focus-visible,
.codigo__acoes .codigo__botao--resgatar:hover,
.codigo__acoes .codigo__botao--resgatar:focus-visible {
	background: var(--gold);
	border-color: var(--gold-bright);
	color: #FFF;
}

/* Wuthering Waves não tem página de resgate: no lugar do link, o recado. */
.codigo__aviso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.6rem 0.5rem;
	font-size: 0.6875rem;
	line-height: 1.3;
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
}

/*
 * A estrela da marca atrás do card, pedido dela.
 *
 * Mesma assinatura dos blocos de parceiro e do slide de guias. Entra pelo
 * canto de baixo à direita. O recorte e o position ficam na regra do .codigo
 * lá em cima.
 */
.codigo::before {
	content: '';
	position: absolute;
	right: -16%;
	bottom: -24%;
	width: 68%;
	aspect-ratio: 1;
	background: url('../img/estrela-marca.png') no-repeat center / contain;
	opacity: 0.05;
	pointer-events: none;
}

.codigo > * {
	position: relative; /* acima da marca-d'água */
}

/* Código que venceu com a aba aberta: o texto muda e a cor acompanha. */
.codigo__validade .is-expirado {
	color: #E86A5A;
}