/* ==========================================================================
   Blizi — telas do portal do membro
   ========================================================================== */

/* Estrutura das telas do portal ---------------------------------------------- */

.blizi-conteudo-portal { display: grid; gap: 20px; align-content: start; }
.blizi-conteudo-portal--estreito { display: block; max-width: 640px; }
.blizi-portal__principal { display: grid; gap: 20px; align-content: start; }
.blizi-portal__principal > .blizi-titulo-pagina { margin-bottom: 0; }
.blizi-portal__principal > .blizi-apoio { margin-top: -14px; }

/* Abas do portal -------------------------------------------------------------- */

.blizi-abas-portal { border-bottom: 1px solid var(--blizi-borda); margin-bottom: 28px; }
.blizi-abas-portal__trilha {
	display: flex; gap: 12px; overflow-x: auto;
	scrollbar-width: none;
}
.blizi-abas-portal__trilha::-webkit-scrollbar { display: none; }
.blizi-abas-portal__item {
	position: relative; white-space: nowrap;
	padding: 16px 12px; font-size: 14px; font-weight: 500;
	color: color-mix(in srgb, var(--blizi-texto) 70%, transparent);
	transition: color .2s ease;
}
.blizi-abas-portal__item:hover { color: var(--blizi-texto); text-decoration: none; }
.blizi-abas-portal__item::after {
	content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
	background: rgba(255, 255, 255, .3); opacity: 0; transition: opacity .2s ease;
}
.blizi-abas-portal__item:hover::after { opacity: 1; }
.blizi-abas-portal__item.esta-ativa { color: var(--blizi-texto); }
.blizi-abas-portal__item.esta-ativa::after { background: var(--blizi-primaria); opacity: 1; }

/* Topo do perfil ---------------------------------------------------------------- */

/*
 * Capa do perfil. O fundo e PRETO (--blizi-moldura), como no topo da pagina do jogo, e o texto por
 * cima e sempre claro: os tokens sao redefinidos aqui dentro (mesma tecnica do cabecalho), entao o
 * cartao de rank, os botoes e o avatar leem cores coerentes mesmo no tema claro. Duas capas: a que
 * o membro enviou (__foto) e, sem ela, a arte padrao (__arte), viva na cor do rank.
 */
.blizi-perfil-topo {
	--blizi-texto: var(--blizi-sobre-moldura);
	--blizi-texto-apoio: color-mix(in srgb, var(--blizi-sobre-moldura) 72%, transparent);
	--blizi-borda: color-mix(in srgb, var(--blizi-sobre-moldura) 22%, transparent);
	--blizi-superficie: color-mix(in srgb, var(--blizi-moldura) 55%, transparent);
	--blizi-superficie-2: color-mix(in srgb, var(--blizi-sobre-moldura) 12%, transparent);

	position: relative; padding-bottom: 28px; isolation: isolate; color: var(--blizi-sobre-moldura);
	min-height: 300px;
}

.blizi-perfil-topo__capa { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--blizi-moldura); }
.blizi-perfil-topo__foto { width: 100%; height: 100%; object-fit: cover; filter: url(#blizi-nitidez); }

/*
 * Arte padrao, no mesmo espirito das paginas de plataforma: gradiente vivo na cor de destaque
 * (--blizi-cor-capa: a do rank; a primaria enquanto nao ha rank, porque o cinza apagaria a capa),
 * faixas de luz em diagonal, trama de pontos, brilho no canto e o B da marca de marca d'agua.
 */
.blizi-perfil-topo { --blizi-cor-capa-em-uso: var(--blizi-cor-capa, var(--blizi-primaria)); }
.blizi-perfil-topo__arte {
	--c: var(--blizi-cor-capa-em-uso);
	--c2: color-mix(in srgb, var(--c) 60%, white);
	position: absolute; inset: 0; overflow: hidden;
	background:
		radial-gradient(color-mix(in srgb, var(--blizi-sobre-moldura) 16%, transparent) 1.5px, transparent 2px) 0 0 / 26px 26px,
		repeating-linear-gradient(115deg, transparent 0 78px, color-mix(in srgb, var(--c2) 22%, transparent) 78px 80px),
		radial-gradient(60% 130% at 84% 10%, color-mix(in srgb, var(--c2) 34%, transparent) 0%, transparent 70%),
		radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c) 58%, transparent) 0%, transparent 62%),
		linear-gradient(135deg, color-mix(in srgb, var(--c) 46%, var(--blizi-moldura)) 0%, var(--blizi-moldura) 78%);
}
.blizi-perfil-topo__marca {
	position: absolute; inset-inline-end: 3%; top: 50%; height: 150%; width: auto; max-width: none;
	transform: translateY(-50%) rotate(-8deg); opacity: .16;
}
/* Na arte padrao o veu e leve: e ela que da cor ao topo. */
.blizi-perfil-topo--arte .blizi-perfil-topo__tinta { opacity: 0; }
.blizi-perfil-topo--arte .blizi-perfil-topo__esmaecer {
	background:
		linear-gradient(to bottom, transparent 0%, transparent 55%, color-mix(in srgb, var(--blizi-moldura) 70%, transparent) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .28) 100%);
}

/* Numeros do membro na capa, em vidro (como os das paginas de plataforma). */
.blizi-perfil-topo__numeros { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.blizi-perfil-topo__numeros > div {
	display: flex; flex-direction: column; min-width: 88px; padding: 8px 14px;
	background: color-mix(in srgb, var(--blizi-sobre-moldura) 9%, transparent);
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.blizi-perfil-topo__numeros dt { order: 2; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--blizi-texto-apoio); }
.blizi-perfil-topo__numeros dd { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--blizi-texto); }

.blizi-perfil-topo__tinta {
	position: absolute; inset: 0;
	background: var(--blizi-cor-rank); opacity: .16; mix-blend-mode: lighten;
}
/* Veu escuro (unico preto fixo: a paleta nao alcanca a arte): laterais mais fechadas para o texto e
   o cartao de rank, e a base fundida no preto, como no topo do jogo. */
.blizi-perfil-topo__esmaecer {
	position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--blizi-moldura) 55%, transparent) 70%, var(--blizi-moldura) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .72) 100%);
}
/* Filete na cor do rank na base da capa. */
.blizi-perfil-topo::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
	background: linear-gradient(90deg, var(--blizi-cor-capa-em-uso), color-mix(in srgb, var(--blizi-cor-capa-em-uso) 60%, white) 55%, var(--blizi-cor-capa-em-uso));
}

.blizi-perfil-topo__interno { padding-top: 28px; }

.blizi-perfil-topo__acoes { display: flex; justify-content: flex-end; }
.blizi-botao--sombra {
	background: color-mix(in srgb, var(--blizi-superficie-2) 80%, transparent);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
	backdrop-filter: blur(6px);
	font-weight: 500;
}
.blizi-botao--sombra:hover { filter: brightness(1.15); }

.blizi-perfil-topo__corpo {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 28px; margin: 32px 0 8px;
}

.blizi-perfil-topo__identidade { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Avatar com anel do rank e faixa de nível --------------------------------------- */

.blizi-perfil-avatar { position: relative; flex-shrink: 0; }
.blizi-perfil-avatar__anel {
	display: block; width: 128px; height: 128px; padding: 3px; border-radius: 50%;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--blizi-cor-rank) 70%, transparent), transparent 65%);
}
.blizi-perfil-avatar__anel img {
	width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
	background: var(--blizi-superficie-2);
}
.blizi-perfil-avatar__editar {
	position: absolute; inset-inline-end: -6px; bottom: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: color-mix(in srgb, var(--blizi-superficie-2) 85%, transparent);
	border: 1px solid rgba(255, 255, 255, .12);
	color: var(--blizi-texto); backdrop-filter: blur(6px);
}
.blizi-perfil-avatar__editar:hover { background: var(--blizi-superficie-2); text-decoration: none; }
.blizi-perfil-avatar__editar .blizi-icone { display: block; }
.blizi-perfil-avatar__faixa {
	position: absolute; inset-inline: 0; bottom: -14px;
	width: fit-content; margin: 0 auto; padding: 3px 16px;
	background: var(--blizi-cor-rank); color: var(--blizi-sobre-rank, #fff);
	font-size: 11px; font-weight: 700; font-style: italic;
	text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
	clip-path: polygon(14% 0%, 100% 0%, 88% 100%, 0% 100%);
}

.blizi-perfil-topo__dados { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.blizi-perfil-topo__nome {
	margin: 0; font-size: clamp(26px, 4vw, 44px); font-weight: 800;
	line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere;
}
.blizi-perfil-topo__amigos {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	width: fit-content; padding: 6px 10px; border-radius: var(--blizi-arredondamento);
	font-size: 14px; color: var(--blizi-texto-apoio);
}
.blizi-perfil-topo__amigos strong { font-size: 18px; color: var(--blizi-texto); }
.blizi-perfil-topo__amigos .blizi-icone { color: var(--blizi-texto-apoio); }
.blizi-perfil-topo__bio { margin: 0; max-width: 46ch; font-size: 14px; color: var(--blizi-texto-apoio); }

/* Resumo de rank do topo ----------------------------------------------------------- */

.blizi-resumo-rank {
	display: flex; align-items: center; gap: 20px; width: 100%; max-width: 384px;
	/* Vidro escuro: o cartao de rank fica legivel mesmo sobre a arte mais movimentada (logo de jogo, texto). */
	padding: 14px 16px; background: color-mix(in srgb, var(--blizi-moldura) 58%, transparent);
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.blizi-resumo-rank__emblema { flex-shrink: 0; line-height: 0; }
.blizi-emblema {
	display: inline-flex; align-items: center; justify-content: center;
	width: 76px; height: 76px; border-radius: var(--blizi-arredondamento);
	font-size: 36px; color: var(--blizi-cor-rank);
	background: color-mix(in srgb, var(--blizi-cor-rank) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--blizi-cor-rank) 35%, transparent);
}
.blizi-emblema.esta-sem-rank { opacity: .7; }
.blizi-resumo-rank__dados { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.blizi-resumo-rank__linha {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.blizi-resumo-rank__titulo {
	margin: 0; font-size: 17px; font-weight: 800;
	color: color-mix(in srgb, var(--blizi-texto) 75%, transparent);
}
.blizi-resumo-rank__titulo span { color: var(--blizi-texto); }
.blizi-resumo-rank__nivel {
	margin: 0; font-size: 13px; color: color-mix(in srgb, var(--blizi-texto) 75%, transparent);
}
.blizi-resumo-rank__meta {
	margin: 0; font-size: 12px; font-weight: 500;
	color: var(--blizi-cor-rank); filter: brightness(1.25);
}
.blizi-resumo-rank__faltam { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 13px; }
.blizi-resumo-rank__faltam strong { color: var(--blizi-cor-rank); filter: brightness(1.25); }
.blizi-resumo-rank__faltam span { color: color-mix(in srgb, var(--blizi-texto) 75%, transparent); }
.blizi-resumo-rank__total {
	padding: 4px 7px; border-radius: var(--blizi-arredondamento);
	background: color-mix(in srgb, var(--blizi-cor-rank) 20%, transparent);
	color: var(--blizi-cor-rank); filter: brightness(1.25);
	font-size: 12px; font-weight: 600;
}

.blizi-perfil-corpo { display: grid; gap: 28px; align-content: start; }

/* Blocos ------------------------------------------------------------------- */

.blizi-bloco {
	background: var(--blizi-superficie);
	border: 1px solid var(--blizi-borda);
	border-radius: var(--blizi-arredondamento);
	padding: 20px;
}
.blizi-bloco__titulo { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; }

.blizi-portal__principal > .blizi-cartao-rank {
	border: 1px solid color-mix(in srgb, var(--blizi-cor-rank) 25%, transparent);
}

/* Cartões de número ------------------------------------------------------------------ */

.blizi-numeros {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.blizi-numero {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 14px;
	min-height: 104px; padding: 16px;
	background: var(--blizi-superficie-2);
	border: 1px solid var(--blizi-borda);
	border-radius: var(--blizi-arredondamento);
}
.blizi-numero__rotulo {
	margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
	color: var(--blizi-texto-apoio);
}
.blizi-numero__linha { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.blizi-numero__valor { font-size: 26px; font-weight: 700; line-height: 1; }
.blizi-numero__de { font-size: 14px; color: var(--blizi-texto-apoio); }
.blizi-numero__marca {
	position: absolute; inset-inline-end: -28px; top: -18px; z-index: 0;
	font-size: 120px; line-height: 1; pointer-events: none;
	color: var(--blizi-texto-apoio); opacity: .07;
}
.blizi-numero__selo {
	position: absolute; inset-inline-end: 14px; top: 14px;
	font-size: 18px; color: var(--blizi-primaria);
}

/* Histórico e recompensas ---------------------------------------------------- */

.blizi-historico, .blizi-recompensas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.blizi-historico__item, .blizi-recompensas li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid var(--blizi-borda); font-size: 14px;
}
.blizi-historico__item:last-child, .blizi-recompensas li:last-child { border-bottom: 0; }
.blizi-historico__motivo { flex: 1; }
.blizi-historico__item time { font-size: 12px; color: var(--blizi-texto-apoio); }
.blizi-historico__xp { color: var(--blizi-secundaria); font-weight: 700; }
.blizi-recompensas li span { flex: 1; }
.blizi-recompensas li strong { color: var(--blizi-secundaria); }

/* Formulários ----------------------------------------------------------------- */

.blizi-formulario { display: grid; gap: 16px; }
.blizi-campo { display: grid; gap: 6px; margin: 0; }
.blizi-campo label { font-size: 13px; font-weight: 600; }
.blizi-campo small { font-size: 12px; color: var(--blizi-texto-apoio); }
.blizi-campo input[type="text"],
.blizi-campo input[type="email"],
.blizi-campo input[type="password"],
.blizi-campo input[type="search"],
.blizi-campo textarea {
	width: 100%;
	background: var(--blizi-superficie-2); border: 1px solid var(--blizi-borda);
	color: var(--blizi-texto); border-radius: var(--blizi-arredondamento); padding: 11px 12px;
	font: inherit; font-size: 15px;
}
.blizi-campo input:focus, .blizi-campo textarea:focus {
	outline: 2px solid var(--blizi-primaria); outline-offset: 1px;
}
.blizi-campo input:disabled { opacity: .55; cursor: not-allowed; }
.blizi-campo--marcador label {
	display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: 14px;
}
.blizi-avatar-atual { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; }
.blizi-capa-atual { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--blizi-arredondamento); }

/* Criar conta / entrar: um cartão simples no centro --------------------------------- */

.blizi-conta { max-width: 420px; margin-inline: auto; padding-block: 28px 8px; }
.blizi-conta__cartao {
	position: relative; isolation: isolate; overflow: clip;
	padding: 24px 22px 20px;
	background:
		radial-gradient(120% 90% at 0% 0%, var(--blizi-primaria-suave), transparent 60%),
		color-mix(in srgb, var(--blizi-superficie) 55%, transparent);
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px rgba(0, 0, 0, .08);
}
.blizi-conta__cartao::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
}
.blizi-tema-escuro .blizi-conta__cartao { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.blizi-conta__cartao { background: var(--blizi-superficie); }
}
@media (prefers-reduced-transparency: reduce) {
	.blizi-conta__cartao { background: var(--blizi-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.blizi-conta__titulo { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.blizi-conta__apoio { margin: 0 0 18px; font-size: 14px; color: var(--blizi-texto-apoio); }
.blizi-conta .blizi-aviso { margin-bottom: 14px; }
.blizi-conta .blizi-formulario { gap: 14px; }
.blizi-conta .blizi-botao { margin-top: 2px; }
.blizi-conta__termos { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--blizi-texto-apoio); text-align: center; }
.blizi-conta__termos a { text-decoration: underline; }
.blizi-conta__rodape { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--blizi-texto-apoio); }
.blizi-conta__rodape a { font-weight: 700; }

/* Cadastro em duas colunas: formulário à esquerda e "o que você ganha" à direita (empilha no celular). */
.blizi-conta--com-vantagens {
	max-width: none; margin: 0; padding: 28px 15px 8px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start;
}
.blizi-conta__coluna { min-width: 0; }
.blizi-conta__selo {
	display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
	font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blizi-texto);
}
.blizi-conta__selo i { color: var(--blizi-primaria); }
.blizi-conta__vantagens .blizi-convite__vantagens { margin-bottom: 0; gap: 14px; }
@media (max-width: 800px) {
	.blizi-conta--com-vantagens { grid-template-columns: minmax(0, 1fr); }
}

.blizi-campo__senha { position: relative; display: block; }
.blizi-campo__senha input { padding-right: 44px; }
.blizi-campo__ver {
	position: absolute; top: 0; right: 0; width: 44px; height: 100%;
	display: grid; place-items: center; background: none; border: 0; cursor: pointer;
	color: var(--blizi-texto-apoio); font-size: 15px;
}
.blizi-campo__ver:hover, .blizi-campo__ver[aria-pressed="true"] { color: var(--blizi-primaria); }

/* Blizi Plus: o cartao do plano (usa o vidro do .blizi-conta__cartao) ------------------------------------- */
.blizi-plano { display: grid; gap: 12px; }
.blizi-plano__selo {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; width: fit-content; padding: 4px 10px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-primaria); color: var(--blizi-sobre-primaria);
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.blizi-plano__titulo { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.blizi-plano__preco { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.blizi-plano__preco strong { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--blizi-texto); }
.blizi-plano__preco span { font-size: 14px; font-weight: 600; color: var(--blizi-texto-apoio); }
.blizi-plano__texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--blizi-texto-apoio); }
.blizi-plano .blizi-botao i { margin-inline-end: 8px; }
.blizi-plano form { margin: 0; }

/* Blizi Plus: as duas opcoes de plano (mensal e anual) como cartoes que se marcam ------------------------------------- */
.blizi-planos-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 4px; }
.blizi-plano-opcao { position: relative; display: block; cursor: pointer; }
.blizi-plano-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.blizi-plano-opcao__corpo {
	display: grid; gap: 4px; height: 100%; padding: 14px 14px 12px; box-sizing: border-box;
	background: var(--blizi-superficie-2); border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.blizi-plano-opcao:hover .blizi-plano-opcao__corpo { border-color: var(--blizi-primaria-borda); }
.blizi-plano-opcao input:checked + .blizi-plano-opcao__corpo {
	border-color: var(--blizi-primaria); background: var(--blizi-primaria-suave); box-shadow: 0 0 0 1px var(--blizi-primaria);
}
.blizi-plano-opcao input:focus-visible + .blizi-plano-opcao__corpo { outline: 2px solid var(--blizi-primaria); outline-offset: 2px; }
.blizi-plano-opcao__corpo::before {
	/* Bolinha de marcar: vazia, e cheia na opcao escolhida. */
	content: ""; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid var(--blizi-borda); box-sizing: border-box; background: var(--blizi-superficie);
}
.blizi-plano-opcao input:checked + .blizi-plano-opcao__corpo::before { border-color: var(--blizi-primaria); background: radial-gradient(var(--blizi-primaria) 0 40%, var(--blizi-superficie) 45%); }
.blizi-plano-opcao__nome { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-plano-opcao__preco { display: flex; align-items: baseline; gap: 5px; }
.blizi-plano-opcao__preco strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--blizi-texto); }
.blizi-plano-opcao__preco small { font-size: 12px; font-weight: 600; color: var(--blizi-texto-apoio); }
.blizi-plano-opcao__apoio { font-size: 12px; line-height: 1.35; color: var(--blizi-texto-apoio); }
@media (max-width: 420px) { .blizi-planos-opcoes { grid-template-columns: minmax(0, 1fr); } }

/* Blizi Plus: comparacao, perguntas e fechamento (abaixo dos dois cartoes) ---------------------------------- */
.blizi-plus-secao { width: 100%; max-width: 960px; margin: 0 auto; padding: 8px 15px 28px; box-sizing: border-box; }
.blizi-plus-secao .blizi-secao-cabecalho { margin-bottom: 14px; }

.blizi-plus-tabela { padding: 4px 6px; overflow-x: auto; }
.blizi-plus-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blizi-plus-tabela th, .blizi-plus-tabela td { padding: 12px 12px; text-align: center; border-bottom: 1px solid var(--blizi-borda); }
.blizi-plus-tabela tbody tr:last-child th, .blizi-plus-tabela tbody tr:last-child td { border-bottom: 0; }
.blizi-plus-tabela thead th { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-plus-tabela tbody th { text-align: left; font-weight: 600; color: var(--blizi-texto); }
.blizi-plus-tabela td { color: var(--blizi-texto-apoio); font-weight: 600; }
.blizi-plus-tabela .e-plus { background: var(--blizi-primaria-suave); color: var(--blizi-texto); font-weight: 800; }
.blizi-plus-tabela thead .e-plus { color: var(--blizi-primaria); }
.blizi-plus-tabela__sim { color: var(--blizi-primaria); }
.blizi-plus-tabela__nao { color: var(--blizi-texto-apoio); opacity: .6; }
.blizi-plus-tabela th:first-child { width: 46%; }

.blizi-plus-duvidas { display: grid; gap: 10px; }
.blizi-plus-duvida { padding: 0; }
.blizi-plus-duvida summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none;
	font-size: 15px; font-weight: 700; color: var(--blizi-texto);
}
.blizi-plus-duvida summary::-webkit-details-marker { display: none; }
.blizi-plus-duvida summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 700; line-height: 1; color: var(--blizi-primaria); transition: transform .2s ease; }
.blizi-plus-duvida[open] summary::after { transform: rotate(45deg); }
.blizi-plus-duvida p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: var(--blizi-texto-apoio); }
.blizi-plus-duvida p a { color: var(--blizi-primaria); text-decoration: underline; }

.blizi-plus-fechamento {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	width: calc(100% - 30px); max-width: 930px; margin: 4px auto 44px; padding: 22px 24px; box-sizing: border-box;
}
.blizi-plus-fechamento h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.blizi-plus-fechamento p { margin: 0; font-size: 14px; color: var(--blizi-texto-apoio); }
.blizi-plus-fechamento .blizi-botao i { margin-inline-end: 8px; }
@media (max-width: 800px) {
	.blizi-plus-tabela th, .blizi-plus-tabela td { padding: 10px 8px; font-size: 13px; }
	.blizi-plus-tabela th:first-child { width: 40%; }
}

/* Campo-isca do cadastro: escondido de gente, visível para robôs. */
.blizi-isca { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Avisos ------------------------------------------------------------------------ */

.blizi-aviso {
	border-radius: var(--blizi-arredondamento); padding: 12px 16px; font-size: 14px;
	border: 1px solid var(--blizi-borda); background: var(--blizi-superficie);
}
.blizi-aviso ul { margin: 0; padding-left: 18px; }
.blizi-aviso--erro { border-color: var(--blizi-perigo); color: var(--blizi-perigo); }
.blizi-aviso--sucesso { border-color: var(--blizi-secundaria); color: var(--blizi-secundaria); }

/* Conquistas ------------------------------------------------------------------------ */

/* Coluna única: os filtros deixaram de ser uma barra lateral e viraram uma faixa de chips acima da grade. */
.blizi-perfil-conquistas { display: grid; gap: 16px; }
.blizi-perfil-conquistas__cabecalho {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.blizi-secao__titulo { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

.blizi-ponto-raridade {
	width: 9px; height: 9px; border-radius: 50%; background: var(--blizi-cor-raridade);
}

.blizi-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 14px; }

.blizi-conquista {
	position: relative; display: flex; gap: 14px; align-items: flex-start;
	padding: 16px; border-radius: var(--blizi-arredondamento);
	background: var(--blizi-superficie); border: 1px solid var(--blizi-borda);
	transition: border-color .2s ease, transform .15s ease;
}
.blizi-conquista[hidden] { display: none; }
/* Bloqueada: a arte esmaece, mas o texto continua legível (antes o cartão inteiro ia a 50% e não se lia o requisito). */
.blizi-conquista:not(.esta-obtida) { border-style: dashed; background: var(--blizi-superficie-2); }
.blizi-conquista:not(.esta-obtida) .blizi-conquista__icone { opacity: .45; filter: grayscale(.8); }
.blizi-conquista:not(.esta-obtida) .blizi-conquista__titulo { color: var(--blizi-texto-apoio); }
.blizi-conquista.esta-obtida {
	border-color: color-mix(in srgb, var(--blizi-cor-raridade) 45%, transparent);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--blizi-cor-raridade) 10%, transparent), transparent 55%),
		var(--blizi-superficie);
}
.blizi-conquista.esta-obtida:hover { transform: translateY(-2px); }
.blizi-conquista__icone {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 40px; height: 40px; border-radius: var(--blizi-arredondamento);
	font-size: 17px; color: var(--blizi-cor-raridade);
	background: color-mix(in srgb, var(--blizi-cor-raridade) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--blizi-cor-raridade) 30%, transparent);
}
.blizi-conquista__corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blizi-conquista__titulo { margin: 0; font-size: 15px; font-weight: 700; }
.blizi-conquista__descricao { margin: 0; font-size: 13px; color: var(--blizi-texto-apoio); }
.blizi-conquista__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.blizi-selo-raridade {
	padding: 2px 7px; border-radius: var(--blizi-arredondamento);
	border: 1px solid color-mix(in srgb, var(--blizi-cor-raridade) 45%, transparent);
	background: color-mix(in srgb, var(--blizi-cor-raridade) 14%, transparent);
	color: var(--blizi-cor-raridade);
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.blizi-conquista__xp { font-size: 12px; font-weight: 700; color: var(--blizi-secundaria); }
.blizi-conquista__data { margin: 0; font-size: 11px; color: var(--blizi-texto-apoio); }
.blizi-conquista__cadeado {
	position: absolute; inset-inline-end: 12px; top: 12px;
	font-size: 12px; color: var(--blizi-texto-apoio);
}

.blizi-sem-resultado {
	margin: 0; padding: 32px; text-align: center;
	color: var(--blizi-texto-apoio); font-size: 14px;
	background: var(--blizi-superficie); border: 1px dashed var(--blizi-borda); border-radius: var(--blizi-arredondamento);
}
.blizi-sem-resultado[hidden] { display: none; }

/* Indicações ----------------------------------------------------------------------- */

.blizi-copiar { display: flex; gap: 8px; }
.blizi-copiar__campo {
	flex: 1; background: var(--blizi-superficie-2); border: 1px solid var(--blizi-borda);
	color: var(--blizi-texto); border-radius: var(--blizi-arredondamento); padding: 11px 12px; font-size: 14px;
}
.blizi-codigo {
	background: var(--blizi-superficie-2); border: 1px solid var(--blizi-borda);
	border-radius: var(--blizi-arredondamento); padding: 2px 8px; letter-spacing: .08em; font-weight: 700;
}

.blizi-lista-membros { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blizi-lista-membros__item { display: flex; align-items: center; gap: 12px; }
.blizi-lista-membros__item img { border-radius: 50%; }
.blizi-lista-membros__item div { display: flex; flex-direction: column; line-height: 1.3; }

/* Listas ------------------------------------------------------------------------------ */

.blizi-listas { display: grid; gap: 16px; }
.blizi-lista__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blizi-lista__cabecalho .blizi-bloco__titulo { margin: 0; }
.blizi-lista__itens { margin: 12px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.blizi-lista__titulo { font-size: 15px; margin: 16px 0 0; }
.blizi-etiqueta {
	font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento); padding: 2px 7px;
	color: var(--blizi-texto-apoio);
}

/* Ranking -------------------------------------------------------------------------------- */

.blizi-abas { display: flex; gap: 8px; }
.blizi-aba {
	padding: 8px 14px; border-radius: var(--blizi-arredondamento); font-size: 14px; font-weight: 600;
	border: 1px solid var(--blizi-borda); color: var(--blizi-texto);
}
.blizi-aba:hover { text-decoration: none; border-color: var(--blizi-primaria); }
.blizi-aba.esta-ativa { background: var(--blizi-primaria); border-color: var(--blizi-primaria); color: var(--blizi-sobre-primaria); }

.blizi-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: posicao; }
.blizi-ranking__item {
	display: flex; align-items: center; gap: 14px;
	background: var(--blizi-superficie);
	border: 1px solid var(--blizi-borda);
	border-left: 3px solid var(--blizi-cor-rank);
	border-radius: var(--blizi-arredondamento); padding: 12px 16px;
}
.blizi-ranking__posicao {
	min-width: 28px; font-size: 16px; font-weight: 800; color: var(--blizi-texto-apoio);
}
.blizi-ranking__item img { border-radius: 50%; }
.blizi-ranking__membro { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.blizi-ranking__membro a { color: var(--blizi-texto); font-weight: 600; }
.blizi-ranking__membro .blizi-selo-rank { align-self: flex-start; }
.blizi-ranking__xp { color: var(--blizi-secundaria); }

/* Perfil público -------------------------------------------------------------------------- */

.blizi-perfil-publico { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.blizi-perfil-publico img { border-radius: 50%; width: 88px; height: 88px; object-fit: cover; }

/* Responsivo ------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
}

@media (max-width: 782px) {
	.blizi-perfil-topo__corpo { justify-content: center; text-align: center; }
	.blizi-perfil-topo__identidade { flex-direction: column; gap: 22px; }
	.blizi-perfil-topo__dados { align-items: center; }
	.blizi-resumo-rank { max-width: none; }
	.blizi-numero__marca { display: none; }
}

/* Ícones ------------------------------------------------------------------------------------ */

.blizi-icone { display: inline-block; vertical-align: middle; flex-shrink: 0; line-height: 1; }
.blizi-perfil-topo__amigos .blizi-icone { font-size: 15px; }
.blizi-perfil-avatar__editar .blizi-icone { font-size: 12px; }

/* ==========================================================================
   Página do jogo
   ========================================================================== */

.blizi-abas-portal__contagem {
	display: inline-block; margin-inline-start: 5px; padding: 1px 6px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-superficie-2);
	font-size: 11px; font-weight: 700; color: var(--blizi-texto-apoio);
}
.esta-ativa .blizi-abas-portal__contagem { background: color-mix(in srgb, var(--blizi-primaria) 30%, transparent); color: var(--blizi-sobre-primaria); }

.blizi-jogo-corpo { display: grid; gap: 24px; align-content: start; }

/* Ficha técnica --------------------------------------------------------------- */

.blizi-ficha { margin: 0; display: grid; gap: 8px; }
.blizi-ficha__linha { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.blizi-ficha__linha dt { color: var(--blizi-texto-apoio); }
.blizi-ficha__linha dd { margin: 0; }
.blizi-ficha--compacta { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.blizi-ficha--compacta .blizi-ficha__linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.blizi-ficha--compacta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Vídeo ------------------------------------------------------------------------ */

.blizi-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--blizi-arredondamento); overflow: hidden; background: var(--blizi-moldura); }
.blizi-video--alto { aspect-ratio: 16 / 10; }
/*
 * Trailer em duas etapas: capa do video + Play na cor principal; ao clicar, o script
 * troca a capa pelo player. O Play usa a primaria e o token de contraste dela, entao
 * acompanha a troca de paleta (roxo, amarelo...). Texto/icone sobre foto: o veu escuro
 * e a unica cor fixa, como nas outras artes do tema.
 */
.blizi-trailer__capa { position: absolute; inset: 0; display: block; overflow: hidden; line-height: 0; cursor: pointer; }
.blizi-trailer__imagem { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.blizi-trailer__capa::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .45) 100%);
	transition: opacity .3s ease;
}
.blizi-trailer__capa:hover .blizi-trailer__imagem { transform: scale(1.03); }
.blizi-trailer__play {
	position: absolute; z-index: 1; top: 50%; left: 50%;
	display: flex; align-items: center; justify-content: center;
	width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria); font-size: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
	transition: transform .2s ease, background .2s ease;
}
/* O triangulo do Font Awesome tem o peso visual na esquerda; um respiro o centra no circulo. */
.blizi-trailer__play i { margin-inline-start: 5px; }
/* Anel que pulsa em volta, chamando o clique. */
.blizi-trailer__play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--blizi-primaria); opacity: 0;
	animation: blizi-trailer-anel 2.2s ease-out infinite;
}
.blizi-trailer__capa:hover .blizi-trailer__play,
.blizi-trailer__capa:focus-visible .blizi-trailer__play { transform: scale(1.1); background: var(--blizi-primaria-clara); }
.blizi-trailer__capa:focus-visible { outline: 3px solid var(--blizi-primaria); outline-offset: -3px; }
@keyframes blizi-trailer-anel { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blizi-trailer__play::before { animation: none; } .blizi-trailer__capa:hover .blizi-trailer__imagem { transform: none; } }
@media (max-width: 560px) {
	.blizi-trailer__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 22px; }
}

/* Trailer que abre a Visao Geral: solto sobre a pagina, com respiro para o que vem depois. */
.blizi-video--abertura { margin-bottom: 28px; box-shadow: var(--blizi-sombra-sutil); }
.blizi-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.blizi-veredito { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.blizi-veredito strong { font-size: 40px; line-height: 1; color: var(--blizi-secundaria); letter-spacing: -0.03em; }
.blizi-veredito span { color: var(--blizi-texto-apoio); font-size: 14px; }

/* Distribuição de notas ------------------------------------------------------------ */

.blizi-distribuicao { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.blizi-distribuicao__linha { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 13px; }
.blizi-distribuicao__faixa { color: var(--blizi-texto-apoio); text-align: end; }
.blizi-distribuicao__trilho { height: 8px; border-radius: 999px; background: var(--blizi-superficie-2); overflow: hidden; }
.blizi-distribuicao__barra { display: block; height: 100%; border-radius: 999px; background: var(--blizi-primaria); }
.blizi-distribuicao__total { color: var(--blizi-texto-apoio); }

/* Avaliações dos jogadores ----------------------------------------------------------- */

.blizi-avaliacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.blizi-avaliacao { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--blizi-borda); }
.blizi-avaliacao:last-child { border-bottom: 0; }
.blizi-avaliacao__foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blizi-avaliacao__corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.blizi-avaliacao__cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.blizi-avaliacao__autor { font-weight: 700; color: var(--blizi-texto); }
.blizi-avaliacao__nota { margin-inline-start: auto; font-size: 20px; color: var(--blizi-secundaria); }
.blizi-avaliacao__texto { margin: 0; font-size: 15px; }

@media (max-width: 560px) {
	.blizi-nota { min-width: 92px; padding: 12px; }
	.blizi-nota__valor { font-size: 28px; }
	.blizi-linha-materia__imagem { width: 92px; }
}

/* Banner do topo do jogo -------------------------------------------------------- */

.blizi-jogo-topo { position: relative; isolation: isolate; }
.blizi-jogo-topo.tem-banner { min-height: 300px; display: flex; align-items: flex-end; }
.blizi-jogo-banner { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--blizi-moldura); }
.blizi-jogo-banner img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
	/* Mesmo filtro de nitidez do destaque da home (definido em header.php). */
	filter: url(#blizi-nitidez);
}
.blizi-jogo-banner__esmaecer {
	position: absolute; inset: 0;
	/* Por tras da imagem e preto (--blizi-moldura), nao a cor da pagina: as bordas esmaecem para ele. */
	background: linear-gradient(to bottom, color-mix(in srgb, var(--blizi-moldura) 35%, transparent) 0%, transparent 40%, color-mix(in srgb, var(--blizi-moldura) 75%, transparent) 70%, var(--blizi-moldura) 100%);
}
.blizi-jogo-banner__lateral {
	position: absolute; inset: 0; display: none;
	background: linear-gradient(to right, var(--blizi-moldura) 0%, transparent 15%, transparent 85%, var(--blizi-moldura) 100%);
}
.blizi-jogo-topo__interno { position: relative; width: 100%; padding: 28px 20px 20px; }

/*
 * Mesmo veu da capa da materia, pelo mesmo motivo. Fica na camada do banner (que
 * tem a largura da tela e corta o excesso), nao no container de 1000px: la ele
 * deixava uma caixa visivel sobre a arte, e com 100vw estourava a barra de rolagem.
 */
.blizi-jogo-topo.tem-banner .blizi-jogo-banner::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; top: 30%;
	background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, transparent 100%);
	pointer-events: none;
}
.blizi-jogo-topo.tem-banner .blizi-jogo-topo__nome { color: #fff; }
.blizi-jogo-topo.tem-banner .blizi-trilha__item,
.blizi-jogo-topo.tem-banner .blizi-trilha__item a { color: rgba(255, 255, 255, .8); }
.blizi-jogo-topo.tem-banner .blizi-trilha__item [aria-current] { color: #fff; }
.blizi-jogo-topo.tem-banner .blizi-jogo-topo__interno { padding-top: 120px; }

/*
 * Capa principal ao lado do titulo: o container vira uma linha (capa + texto) alinhada
 * pela base. O topo cresce para caber os 240px da capa mais o respiro de cima; sem
 * capa principal nada disso vale e o topo segue como era.
 */
.blizi-jogo-topo.tem-poster .blizi-jogo-topo__interno { display: flex; align-items: flex-end; gap: 24px; }
.blizi-jogo-topo.tem-poster.tem-banner { min-height: 420px; }
.blizi-jogo-topo__poster {
	flex-shrink: 0; width: 160px; margin: 0; line-height: 0;
	background: var(--blizi-moldura); border-radius: var(--blizi-arredondamento); overflow: hidden;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 14px 32px rgba(0, 0, 0, .55);
}
.blizi-jogo-topo__poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.blizi-jogo-topo__texto { flex: 1; min-width: 0; }
.blizi-jogo-topo.tem-poster .blizi-jogo-topo__interno { padding-top: 60px; }
.blizi-jogo-topo__linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.blizi-jogo-topo__nome {
	margin: 0; font-size: clamp(30px, 5vw, 56px); font-weight: 800;
	line-height: 1.02; letter-spacing: -0.035em;
}

.blizi-salvar-jogo { margin: 0; }

/*
 * Acoes do topo (Voxel): "Add no perfil", Review, Nota da comunidade e "Avaliar este jogo".
 * Sobre a arte, entao texto claro sempre e fundo translucido escuro.
 */
.blizi-jogo-topo__acoes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 16px; }
.blizi-jogo-topo__acoes .blizi-salvar-jogo__botao {
	width: auto; height: 100%; min-height: 44px; padding: 0 16px; gap: 8px;
	border-radius: var(--blizi-arredondamento); font-size: 13px; font-weight: 700;
}
.blizi-jogo-topo__acoes .blizi-salvar-jogo__botao i { font-size: 15px; }
.blizi-jogo-topo__acoes .blizi-salvar-jogo { display: flex; }
.blizi-jogo-topo__nota {
	display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 5px 14px;
	background: rgba(0, 0, 0, .55); color: #fff; border-radius: var(--blizi-arredondamento);
	backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); line-height: 1;
}
a.blizi-jogo-topo__nota:hover { background: rgba(0, 0, 0, .78); text-decoration: none; }
.blizi-jogo-topo__nota-rotulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .75); }
.blizi-jogo-topo__nota strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.blizi-jogo-topo__avaliar { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 700px) {
	.blizi-jogo-topo__acoes { gap: 8px; margin-top: 12px; }
	.blizi-jogo-topo__acoes .blizi-salvar-jogo__botao { padding: 0 12px; }
	.blizi-jogo-topo__avaliar { flex-basis: 100%; justify-content: center; }
}
.blizi-salvar-jogo__botao {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(0, 0, 0, .55); border: 0; color: #fff;
	font-size: 17px; cursor: pointer; backdrop-filter: blur(6px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	transition: background .2s ease, transform .2s ease;
}
.blizi-salvar-jogo__botao:hover { background: rgba(0, 0, 0, .78); transform: translateY(-1px); }
.blizi-salvar-jogo__botao.esta-salvo { background: var(--blizi-primaria); }

/* Abas fixas no topo ------------------------------------------------------------- */

.blizi-abas-portal--fixa { position: sticky; top: 68px; z-index: 40; background: var(--blizi-fundo); }

/* Layout com lateral -------------------------------------------------------------- */

.blizi-jogo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.blizi-jogo-layout__principal { display: grid; gap: 24px; align-content: start; min-width: 0; }
/* Sem sticky: a ficha técnica é mais alta que a tela, e grudada o fim dela (compartilhar, crédito) ficaria inalcançável. */
.blizi-jogo-lateral { position: relative; }

.blizi-etiquetas-jogo { display: flex; flex-wrap: wrap; gap: 5px; }
.blizi-etiqueta-jogo {
	display: inline-flex; align-items: center; 
	height: 24px; 
	padding: 0 8px;
	border-radius: var(--blizi-arredondamento); 
	border: 1px solid 
	color-mix(in srgb, var(--blizi-primaria) 22%, transparent);	
	color: color-mix(in srgb, #000 65%, #000);
	font-size: 11px; font-weight: 700; 
	text-transform: uppercase; 
	letter-spacing: .04em;
}
.blizi-etiqueta-jogo:hover { text-decoration: none; filter: brightness(1.2); }

.blizi-lojas { display: flex; flex-direction: column; gap: 8px; }
.blizi-lojas__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--blizi-texto-apoio); }
.blizi-lojas__itens { display: flex; flex-wrap: wrap; gap: 8px; }
.blizi-loja {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: var(--blizi-arredondamento);
	background: color-mix(in srgb, var(--blizi-texto-apoio) 18%, transparent);
	border: 1px solid var(--blizi-borda);
	color: var(--blizi-texto); font-size: 17px;
	transition: transform .2s ease, background .2s ease;
}
.blizi-loja:hover { transform: translateY(-2px); background: var(--blizi-superficie-2); text-decoration: none; }

/* Ficha técnica (lateral da página do jogo) ------------------------------------------------ */

/*
 * Cartão de vidro como os da home. Em cima, a arte do jogo desfocada com o nome; no corpo, as notas (a da redação num anel que
 * se preenche na fração da nota), os dados em linhas com ícone, plataformas e gêneros em chips, onde comprar e compartilhar.
 * Sobre a arte o texto é sempre claro; no corpo só tokens de paleta.
 */
.blizi-ficha-tecnica {
	position: relative; overflow: clip; isolation: isolate;
	border: 1px solid color-mix(in srgb, var(--blizi-texto) 10%, transparent); border-radius: var(--blizi-arredondamento);
	background: color-mix(in srgb, var(--blizi-superficie) 62%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px rgba(15, 20, 30, .1);
}
.blizi-tema-escuro .blizi-ficha-tecnica { border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 0, 0, .35); }

.blizi-ficha-tecnica__topo { position: relative; isolation: isolate; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; background: var(--blizi-moldura); color: #fff; }
.blizi-ficha-tecnica__fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: url(#blizi-nitidez); }
.blizi-ficha-tecnica__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .45) 48%, transparent 80%); }
.blizi-ficha-tecnica__marca { padding: 18px 18px 16px; min-width: 0; }
.blizi-ficha-tecnica__rotulo { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.blizi-ficha-tecnica__rotulo i { font-size: 11px; color: var(--blizi-primaria-clara); }
.blizi-ficha-tecnica__nome { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: #fff; text-wrap: balance; }

.blizi-ficha-tecnica__corpo { display: grid; gap: 18px; padding: 18px; }

/* Notas: anel da redação + pequenas ao lado. */
.blizi-ficha-tecnica__notas { display: flex; align-items: center; gap: 16px; }
.blizi-ficha-tecnica__anel {
	position: relative; display: grid; place-content: center; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%; text-align: center;
	background: conic-gradient(var(--blizi-primaria) var(--blizi-nota-pct, 0%), color-mix(in srgb, var(--blizi-texto) 12%, transparent) 0);
}
.blizi-ficha-tecnica__anel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--blizi-superficie); }
.blizi-ficha-tecnica__anel strong, .blizi-ficha-tecnica__anel span { position: relative; }
.blizi-ficha-tecnica__anel strong { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--blizi-texto); }
.blizi-ficha-tecnica__anel span { margin-top: 3px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__anel.esta-vazio strong { color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__menores { display: grid; flex: 1; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.blizi-ficha-tecnica__menores li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--blizi-borda); }
.blizi-ficha-tecnica__menores li:last-child { padding-bottom: 0; border-bottom: 0; }
.blizi-ficha-tecnica__menor-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__menores strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--blizi-texto); }
.blizi-ficha-tecnica__menores small { grid-column: 1 / -1; font-size: 11px; color: var(--blizi-texto-apoio); }

/* Linhas de dados: quadradinho de ícone, rótulo pequeno e valor. */
.blizi-ficha-tecnica__linhas { display: grid; gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--blizi-borda); }
.blizi-ficha-tecnica__linha { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "icone rotulo" "icone valor"; column-gap: 12px; row-gap: 1px; align-items: center; }
.blizi-ficha-tecnica__icone {
	grid-area: icone; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-primaria-suave); color: var(--blizi-primaria); font-size: 14px;
}
.blizi-ficha-tecnica__linha dt { grid-area: rotulo; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__linha dd { grid-area: valor; margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--blizi-texto); overflow-wrap: anywhere; }
.blizi-ficha-tecnica__selo {
	display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: var(--blizi-arredondamento); vertical-align: 1px;
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.blizi-ficha-tecnica__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.blizi-ficha-tecnica__chip {
	display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento); background: var(--blizi-superficie);
	font-size: 12px; font-weight: 700; color: var(--blizi-texto); transition: border-color .2s ease, color .2s ease;
}
.blizi-ficha-tecnica__chip i { font-size: 12px; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__chip:hover { border-color: var(--blizi-primaria); color: var(--blizi-primaria); text-decoration: none; }
.blizi-ficha-tecnica__chip:hover i { color: var(--blizi-primaria); }

/* Onde comprar: botões com o logo da loja. */
.blizi-ficha-tecnica__lojas { display: grid; gap: 8px; }
.blizi-ficha-tecnica__subtitulo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.blizi-ficha-tecnica__loja {
	display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-primaria); color: var(--blizi-sobre-primaria);
	font-size: 13px; font-weight: 700; transition: filter .2s ease;
}
.blizi-ficha-tecnica__loja i { font-size: 14px; }
.blizi-ficha-tecnica__loja:hover { filter: brightness(1.12); text-decoration: none; color: var(--blizi-sobre-primaria); }
.blizi-ficha-tecnica__credito { margin: -6px 0 0; text-align: center; font-size: 11px; color: var(--blizi-texto-apoio); }
.blizi-ficha-tecnica__credito a { color: inherit; text-decoration: underline; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .blizi-ficha-tecnica { background: var(--blizi-superficie); } }
@media (prefers-reduced-transparency: reduce) { .blizi-ficha-tecnica { background: var(--blizi-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Notas do jogo -------------------------------------------------------------------- */

.blizi-jogo-notas { display: flex; flex-wrap: wrap; gap: 10px; }
.blizi-nota {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	flex: 1 1 calc(50% - 5px); min-width: 92px; padding: 12px 14px;
	background: var(--blizi-superficie); border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
}
.blizi-nota__rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--blizi-texto-apoio); }
.blizi-nota__valor { font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
.blizi-nota__apoio { font-size: 11px; color: var(--blizi-texto-apoio); text-align: center; }
.blizi-nota--redacao { border-color: color-mix(in srgb, var(--blizi-primaria) 45%, transparent); }
.blizi-nota--redacao .blizi-nota__valor { color: var(--blizi-primaria); filter: brightness(1.35); }
.blizi-nota--publico { border-color: color-mix(in srgb, var(--blizi-secundaria) 40%, transparent); }
.blizi-nota--publico .blizi-nota__valor { color: var(--blizi-secundaria); }
/* Notas de fora (RAWG, Metacritic): referencia, sem a cor da marca. Duas por linha com as da casa. */
.blizi-nota--externa { flex-basis: calc(50% - 5px); }
.blizi-nota--externa .blizi-nota__valor { color: var(--blizi-texto); }

/* Sobre o jogo (texto da Visão Geral) --------------------------------------------------------------- */

.blizi-sobre-texto .blizi-secao-cabecalho { margin-bottom: 14px; }
.blizi-sobre-texto__cartao {
	position: relative; isolation: isolate; overflow: clip;
	padding: 24px 26px 22px;
	border: 1px solid color-mix(in srgb, var(--blizi-texto) 10%, transparent); border-radius: var(--blizi-arredondamento);
	/* Vidro líquido, igual aos cartões da lateral (.blizi-caixa): superfície translúcida, sem cor de fundo. */
	background: color-mix(in srgb, var(--blizi-superficie) 55%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(255, 255, 255, .12),
		0 10px 30px rgba(15, 20, 30, .08);
}
/* Reflexo do vidro: faixa de luz que desce da borda de cima. */
.blizi-sobre-texto__cartao::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 56px; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
}
.blizi-tema-escuro .blizi-sobre-texto__cartao {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35);
}
.blizi-tema-escuro .blizi-sobre-texto__cartao::before { background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.blizi-sobre-texto__cartao { background: var(--blizi-superficie); }
}
@media (prefers-reduced-transparency: reduce) {
	.blizi-sobre-texto__cartao { background: var(--blizi-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.blizi-sobre-texto__corpo { max-width: 68ch; font-size: 1rem; line-height: 1.75; color: var(--blizi-texto); }
.blizi-sobre-texto__corpo > * { margin: 0 0 1em; }
.blizi-sobre-texto__corpo > *:last-child { margin-bottom: 0; }
/* Sem hifenização: o texto importado vem em inglês e o site é pt-BR ("Ba-sed"). Abertura (só quando há mais de um parágrafo; um texto único não ganha filete): o primeiro parágrafo um pouco maior, no peso normal (peso 500 parecia negrito), com filete na marca à esquerda. */
.blizi-sobre-texto__corpo > p:first-child:not(:only-child) {
	padding-inline-start: 16px; border-inline-start: 4px solid var(--blizi-primaria);
	font-size: 1.125rem; line-height: 1.6; text-wrap: pretty;
}
.blizi-sobre-texto__corpo p { text-wrap: pretty; }
.blizi-sobre-texto__corpo a { text-decoration: underline; text-underline-offset: 3px; }
.blizi-sobre-texto__corpo h2, .blizi-sobre-texto__corpo h3 { margin: 1.4em 0 .5em; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }

/* "Ler mais": texto longo recolhido com um esmaecido embaixo; o botão só existe se o JavaScript achou o texto longo. */
.blizi-sobre-texto.esta-recolhido .blizi-sobre-texto__corpo {
	max-height: 15.5rem; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 62%, transparent); mask-image: linear-gradient(to bottom, rgb(0 0 0) 62%, transparent);
}
.blizi-sobre-texto__mais {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 36px; padding: 0 14px;
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento); background: transparent;
	color: var(--blizi-texto); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.blizi-sobre-texto__mais:hover { border-color: var(--blizi-primaria); color: var(--blizi-primaria); }
.blizi-sobre-texto__mais i { font-size: 11px; transition: transform .25s ease; }
.blizi-sobre-texto__mais[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 700px) { .blizi-sobre-texto__cartao { padding: 18px 16px; } .blizi-sobre-texto__corpo > p:first-child:not(:only-child) { font-size: 1.0625rem; } }

/* Sobre o jogo --------------------------------------------------------------------- */

.blizi-sobre-jogo { display: grid; gap: 16px; }
.blizi-sobre-jogo .blizi-secao-cabecalho { margin-bottom: 0; }

/* Vidro líquido, como os demais cartões da Visão Geral (Sobre o jogo, Imagens). */
.blizi-sobre-jogo__cartao {
	position: relative; isolation: isolate; overflow: clip;
	padding: 22px 24px;
	border: 1px solid color-mix(in srgb, var(--blizi-texto) 10%, transparent); border-radius: var(--blizi-arredondamento);
	background: color-mix(in srgb, var(--blizi-superficie) 55%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(255, 255, 255, .12),
		0 10px 30px rgba(15, 20, 30, .08);
}
.blizi-sobre-jogo__cartao::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 56px; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
}
.blizi-tema-escuro .blizi-sobre-jogo__cartao {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35);
}
.blizi-tema-escuro .blizi-sobre-jogo__cartao::before { background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.blizi-sobre-jogo__cartao { background: var(--blizi-superficie); }
}
@media (prefers-reduced-transparency: reduce) {
	.blizi-sobre-jogo__cartao { background: var(--blizi-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Linhas com ícone em chip, no mesmo idioma visual da Ficha técnica da lateral. */
.blizi-sobre-jogo__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 24px; }
.blizi-sobre-jogo__item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.blizi-sobre-jogo__icone {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: var(--blizi-arredondamento); background: var(--blizi-primaria-suave); color: var(--blizi-primaria); font-size: 14px;
}
.blizi-sobre-jogo__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.blizi-sobre-jogo__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blizi-texto-apoio); }
.blizi-sobre-jogo__valor { font-size: .9375rem; font-weight: 700; line-height: 1.35; color: var(--blizi-texto); overflow-wrap: anywhere; }
a.blizi-sobre-jogo__valor:hover { color: var(--blizi-secundaria); }
.blizi-sobre-jogo__selo {
	display: inline-block; margin-inline-start: 4px; padding: 1px 7px; border-radius: var(--blizi-arredondamento); vertical-align: 1px;
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.blizi-sobre-jogo__item .blizi-lojas__itens { margin-top: 2px; }

/* Faixa do jogo dentro da matéria ------------------------------------------------------ */

.blizi-materia-jogo {
	display: flex; align-items: center; gap: 14px;
	margin: 24px 0; padding: 12px 16px;
	background: var(--blizi-superficie-2); border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
}
.blizi-materia-jogo__capa { flex-shrink: 0; line-height: 0; }
.blizi-materia-jogo__capa img { width: 80px; border-radius: var(--blizi-arredondamento); }
.blizi-materia-jogo__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blizi-materia-jogo__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--blizi-texto-apoio); }
.blizi-materia-jogo__nome { font-size: 16px; font-weight: 700; color: var(--blizi-texto); }
.blizi-materia-jogo__nome:hover { color: var(--blizi-secundaria); }
.blizi-materia-jogo__nota { margin-inline-start: auto; display: flex; flex-direction: column; align-items: center; }
.blizi-materia-jogo__nota strong { font-size: 22px; color: var(--blizi-primaria); filter: brightness(1.3); line-height: 1; }
.blizi-materia-jogo__nota span { font-size: 10px; text-transform: uppercase; color: var(--blizi-texto-apoio); }

@media (min-width: 1024px) {
	.blizi-jogo-banner__lateral { display: block; }
}

@media (max-width: 1100px) {
	.blizi-jogo-layout { grid-template-columns: minmax(0, 1fr); }
	.blizi-jogo-lateral { position: static; }
}

@media (max-width: 700px) {
	.blizi-jogo-topo.tem-banner { min-height: 220px; }
	.blizi-jogo-topo.tem-poster.tem-banner { min-height: 290px; }
	.blizi-jogo-topo.tem-poster .blizi-jogo-topo__interno { gap: 16px; padding-top: 50px; }
	.blizi-jogo-topo__poster { width: 104px; }
	.blizi-jogo-topo.tem-banner .blizi-jogo-topo__interno { padding-top: 80px; }
}

/* Pôster vertical do jogo ---------------------------------------------------------- */

.blizi-poster {
	position: relative; margin: 0;
	aspect-ratio: 2 / 3; border-radius: var(--blizi-arredondamento); overflow: hidden;
	background: var(--blizi-moldura); border: 1px solid var(--blizi-borda);
}
.blizi-poster img { width: 100%; height: 100%; object-fit: cover; }
.blizi-poster__vazio {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; font-size: 30px; color: var(--blizi-texto-apoio); opacity: .35;
}
.blizi-poster__nota {
	position: absolute; inset-inline-end: 8px; bottom: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 26px; padding: 0 7px; border-radius: var(--blizi-arredondamento);
	background: color-mix(in srgb, var(--blizi-primaria) 85%, #000);
	color: var(--blizi-sobre-primaria); font-size: 13px; font-weight: 800;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}


/* Grade de jogos --------------------------------------------------------------------- */

/*
 * Página /jogos/: as duas colunas da home. Linha de 960px, principal (640) + lateral (320), cada uma com 15px de padding
 * de cada lado (610 e 290 de conteúdo, 30px entre elas). A lateral gruda ao rolar e desce para depois da grade no celular.
 */
.blizi-arquivo-jogos {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; align-items: start;
	max-width: 960px; padding-top: 28px; padding-bottom: 48px;
}
.blizi-arquivo-jogos__principal, .blizi-arquivo-jogos__lateral { padding-inline: 15px; min-width: 0; }
.blizi-arquivo-jogos__lateral { display: grid; gap: 24px; align-content: start; position: sticky; top: 86px; }
.admin-bar .blizi-arquivo-jogos__lateral { top: 118px; }
/*
 * Faixa do topo de /jogos/: 100px de altura, de borda a borda. Fundo = a moldura preta misturada com a cor da marca (como o topo das
 * páginas de plataforma), com listras de luz; o texto é sempre claro. Título e total à esquerda, filtro de plataforma à direita.
 */
.blizi-faixa-jogos {
	--blizi-texto: #fff;
	--blizi-texto-apoio: rgba(255, 255, 255, .72);
	--blizi-borda: rgba(255, 255, 255, .24);
	position: relative; isolation: isolate; overflow: hidden; height: 100px; display: flex; align-items: center;
	background: color-mix(in srgb, var(--blizi-moldura) 72%, var(--blizi-primaria));
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
	color: #fff;
}
.blizi-faixa-jogos::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 26px),
		radial-gradient(60% 160% at 0% 0%, color-mix(in srgb, var(--blizi-primaria) 55%, transparent), transparent 70%);
}
.blizi-faixa-jogos__interno { max-width: 960px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: 15px; }
.blizi-faixa-jogos__marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.blizi-faixa-jogos__texto { min-width: 0; }
/* Ícone do controle numa placa de vidro, como o das seções do portal. */
.blizi-faixa-jogos__icone {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px;
	border-radius: var(--blizi-arredondamento); font-size: 22px; color: #fff;
	background: linear-gradient(160deg, var(--blizi-primaria), color-mix(in srgb, var(--blizi-primaria) 55%, var(--blizi-moldura)));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .35);
}
.blizi-faixa-jogos__titulo {
	display: flex; align-items: baseline; gap: 12px; margin: 0;
	font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff;
}
.blizi-faixa-jogos__total { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }

/* Faixa de Criar conta e Entrar: frase sob o título e os selos do que a conta dá, à direita. */
.blizi-faixa-conta__apoio { margin: 3px 0 0; white-space: nowrap; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.blizi-faixa-conta__selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 560px; }
.blizi-faixa-conta__selos li {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; white-space: nowrap;
	font-size: 12px; font-weight: 700; color: #fff;
	background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--blizi-arredondamento);
	-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.blizi-faixa-conta__selos li.e-destaque { background: var(--blizi-primaria); border-color: transparent; color: var(--blizi-sobre-primaria); }
.blizi-faixa-conta__selos i { font-size: 12px; }
@media (max-width: 800px) {
	.blizi-faixa-conta__apoio { white-space: normal; }
	.blizi-faixa-conta__selos { justify-content: flex-start; max-width: none; }
}

/* Busca de um jogo: campo de largura total logo abaixo da faixa, acima da grade. */
.blizi-busca-jogos { position: relative; margin: 0 0 22px; }
.blizi-busca-jogos input[type="search"] {
	width: 100%; height: 46px; padding: 0 44px 0 42px;
	border: 1px solid var(--blizi-borda); border-radius: var(--blizi-arredondamento);
	background: var(--blizi-superficie); color: var(--blizi-texto); font: inherit; font-size: 15px; font-weight: 500;
	-webkit-appearance: none; appearance: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.blizi-busca-jogos input[type="search"]::placeholder { color: var(--blizi-texto-apoio); }
.blizi-busca-jogos input[type="search"]::-webkit-search-cancel-button { display: none; }
.blizi-busca-jogos input[type="search"]:focus { outline: none; border-color: var(--blizi-primaria); box-shadow: 0 0 0 3px var(--blizi-primaria-suave); }
.blizi-busca-jogos__lupa { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--blizi-texto-apoio); pointer-events: none; }
.blizi-busca-jogos__limpar {
	position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
	border-radius: var(--blizi-arredondamento); font-size: 13px; color: var(--blizi-texto-apoio);
}
.blizi-busca-jogos__limpar:hover { background: var(--blizi-superficie-2); color: var(--blizi-texto); text-decoration: none; }

/* Estado vazio da busca/filtro: cartão tracejado com ícone, o que houve, o que fazer, e jogos sugeridos logo abaixo. */
.blizi-jogos-vazio {
	display: grid; justify-items: center; gap: 8px; padding: 36px 24px 32px; margin-bottom: 28px; text-align: center;
	border: 1px dashed var(--blizi-borda); border-radius: var(--blizi-arredondamento); background: var(--blizi-superficie);
}
.blizi-jogos-vazio__icone {
	display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%;
	background: var(--blizi-primaria-suave); color: var(--blizi-primaria); font-size: 1.5rem;
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--blizi-primaria) 8%, transparent);
}
.blizi-jogos-vazio__titulo { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--blizi-texto); }
.blizi-jogos-vazio__texto { margin: 0; max-width: 42ch; color: var(--blizi-texto-apoio); line-height: 1.5; overflow-wrap: anywhere; }
.blizi-jogos-vazio__botao { margin-top: 10px; gap: 8px; }
.blizi-jogos-vazio__botao i { font-size: .8em; }
.blizi-jogos-vazio__cabecalho { margin-bottom: 18px; }

/* Enquanto a busca ao vivo espera a resposta, o resultado antigo fica meio apagado. */
.blizi-arquivo-jogos__principal.esta-buscando > :not(.blizi-busca-jogos) { opacity: .5; transition: opacity .15s ease; }

/* Filtro por plataforma (filtra a lista na própria página): chips de vidro sobre a faixa. */
.blizi-arquivo-jogos__filtros { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.blizi-filtro { white-space: nowrap; }
.blizi-filtro {
	display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--blizi-arredondamento);
	font-size: 13px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background .2s ease, border-color .2s ease;
}
.blizi-filtro i { font-size: 13px; color: rgba(255, 255, 255, .8); }
.blizi-filtro:hover { background: rgba(255, 255, 255, .2); text-decoration: none; color: #fff; }
.blizi-filtro.esta-ativo { background: var(--blizi-primaria); border-color: rgba(255, 255, 255, .5); color: var(--blizi-sobre-primaria); }
.blizi-filtro.esta-ativo i { color: inherit; }

/* Sem 100px de sobra: quando o filtro não cabe ao lado do título, a faixa cresce e empilha. */
@media (max-width: 800px) {
	.blizi-faixa-jogos { height: auto; padding-block: 16px; }
	.blizi-faixa-jogos__interno { flex-direction: column; align-items: flex-start; gap: 12px; }
	.blizi-arquivo-jogos__filtros { justify-content: flex-start; flex-wrap: wrap; }
	}

@media (max-width: 900px) {
	.blizi-arquivo-jogos { grid-template-columns: minmax(0, 1fr); }
	.blizi-arquivo-jogos__lateral { position: static; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 600px) { .blizi-arquivo-jogos__lateral { grid-template-columns: minmax(0, 1fr); } }

.blizi-grade-jogos {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px;
}
.blizi-jogo-cartao-lista__link { display: grid; align-content: start; gap: 10px; color: inherit; }
.blizi-jogo-cartao-lista__link:hover { text-decoration: none; }
.blizi-jogo-cartao-lista__link .blizi-poster { border: 0; box-shadow: 0 2px 10px rgba(15, 20, 30, .18); }
.blizi-jogo-cartao-lista__link .blizi-poster img { filter: url(#blizi-nitidez); }
/* Hover igual ao da lista de Novidades da home: a imagem vai a 50% de opacidade sobre a moldura preta (--blizi-moldura) e a capa escurece. Sem subir, sem zoom, sem contorno. */
.blizi-jogo-cartao-lista__link .blizi-poster img { transition: opacity .3s ease-in-out; }
.blizi-jogo-cartao-lista__link:hover .blizi-poster img { opacity: .5; }
.blizi-jogo-cartao-lista__nome { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.blizi-jogo-cartao-lista__link:hover .blizi-jogo-cartao-lista__nome { color: var(--blizi-secundaria); }
/* Logos das plataformas: sobre o pôster, no canto inferior direito, numa pastilha de vidro líquido preto (translúcida, desfoque, aro de luz) com ícone branco (sobre foto o texto é sempre claro). O nome vai no title e para leitor de tela. */
.blizi-jogo-cartao-lista__plataformas {
	position: absolute; inset-inline-end: 8px; bottom: 8px; z-index: 1;
	display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 8px; list-style: none;
	border-radius: var(--blizi-arredondamento); color: #fff;
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), rgba(0, 0, 0, .5);
	border: 1px solid rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(0, 0, 0, .35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.blizi-jogo-cartao-lista__plataformas { background: rgba(0, 0, 0, .82); }
}
.blizi-jogo-cartao-lista__plataformas li { display: inline-flex; font-size: 13px; line-height: 1; }
/* A nota da redação dividia esse canto: passa para o canto de cima. */
.blizi-jogo-cartao-lista__link .blizi-poster__nota { bottom: auto; top: 8px; }
/* Data no estilo do tempo da lista padrão: pequena, caixa alta, cor de apoio; jogo por lançar ganha a cor da marca. */
.blizi-jogo-cartao-lista__data {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blizi-texto-apoio);
}
.blizi-jogo-cartao-lista__data i { font-size: 11px; }
.blizi-jogo-cartao-lista__data.e-em-breve { color: var(--blizi-primaria); font-weight: 700; }

/* Galeria de imagens do jogo --------------------------------------------------------- */

/* Cabeçalho fora do cartão, como "Sobre o jogo" e "Sobre {jogo}": só o conteúdo fica no vidro. */
.blizi-galeria-secao { display: grid; gap: 16px; }
.blizi-galeria-secao .blizi-secao-cabecalho { margin-bottom: 0; }

/* Vidro líquido, como o cartão "Sobre o jogo" e os da lateral (.blizi-caixa): sobrepõe o fundo sólido de .blizi-bloco. */
.blizi-galeria {
	position: relative; isolation: isolate; overflow: clip;
	border: 1px solid color-mix(in srgb, var(--blizi-texto) 10%, transparent);
	background: color-mix(in srgb, var(--blizi-superficie) 55%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(255, 255, 255, .12),
		0 10px 30px rgba(15, 20, 30, .08);
}
.blizi-galeria::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 56px; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
}
.blizi-tema-escuro .blizi-galeria {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35);
}
.blizi-tema-escuro .blizi-galeria::before { background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.blizi-galeria { background: var(--blizi-superficie); }
}
@media (prefers-reduced-transparency: reduce) {
	.blizi-galeria { background: var(--blizi-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Primeira imagem em destaque (2x2 de 4 colunas): com ela e mais quatro, a grade fecha sem buraco. */
.blizi-galeria__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.blizi-galeria__item { margin: 0; }
.blizi-galeria__item--destaque { grid-column: span 2; grid-row: span 2; }
.blizi-galeria__item a {
	position: relative; display: block; height: 100%; aspect-ratio: 16 / 9; overflow: hidden;
	line-height: 0; background: var(--blizi-moldura); border-radius: var(--blizi-arredondamento);
}
.blizi-galeria__item--destaque a { aspect-ratio: auto; }
.blizi-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; filter: url(#blizi-nitidez); }
.blizi-galeria__item a:hover img { transform: scale(1.04); }
@media (max-width: 560px) {
	.blizi-galeria__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blizi-galeria__item--destaque { grid-column: span 2; grid-row: auto; }
	.blizi-galeria__item--destaque a { aspect-ratio: 16 / 9; }
}

/* Topo sem banner: o gradiente de apoio substitui a arte ------------------------------- */

.blizi-jogo-topo:not(.tem-banner) .blizi-jogo-banner {
	background:
		radial-gradient(120% 140% at 80% 0%, color-mix(in srgb, var(--blizi-primaria) 30%, transparent) 0%, transparent 60%),
		radial-gradient(90% 120% at 10% 10%, color-mix(in srgb, var(--blizi-secundaria) 14%, transparent) 0%, transparent 55%),
		var(--blizi-superficie);
}

@media (max-width: 560px) {
	.blizi-grade-jogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
	.blizi-arquivo-jogos { padding-top: 20px; }
}

/* ==========================================================================
   Ler depois
   ========================================================================== */

.blizi-ler-depois {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: transparent; border: none;
	color: var(--blizi-texto-apoio);
	font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blizi-ler-depois--icone .blizi-ler-depois__texto { display: none; }
.blizi-ler-depois--texto { padding: 8px 14px; }
.blizi-ler-depois:hover { color: var(--blizi-texto); border-color: var(--blizi-primaria); }
.blizi-ler-depois.esta-salvo {
	color: var(--blizi-primaria); border-color: color-mix(in srgb, var(--blizi-primaria) 55%, transparent);
}

.blizi-materia__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }


.blizi-atalho-lista {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: var(--blizi-arredondamento);
	border: 1px solid var(--blizi-borda); color: var(--blizi-texto); font-size: 15px;
}
.blizi-atalho-lista:hover { border-color: var(--blizi-primaria); color: var(--blizi-secundaria); text-decoration: none; }
.blizi-atalho-lista__contador {
	position: absolute; inset-inline-end: -5px; top: -5px;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
	background: var(--blizi-primaria); color: var(--blizi-sobre-primaria);
	font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.blizi-atalho-lista__contador[hidden] { display: none; }

.blizi-ler-depois-topo {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding-bottom: 14px; border-bottom: 1px solid var(--blizi-borda);
}
.blizi-ler-depois-topo[hidden] { display: none; }