/* Base de todas as páginas: fontes, cores (tema claro e escuro), tipografia, espaços,
   movimento e o esqueleto (topo, conteúdo, rodapé).

   Identidade visual e regras de interface: docs/17-identidade-visual.md (paleta e fontes do
   manual da marca: Sora nos títulos, Inter no texto).
   Componente reutilizável vai em css/componentes/; estilo de uma página, em css/paginas/.
   Cores, espaços e fontes só pelas variáveis daqui: nunca um "#fff" ou "13px" solto. */

/* ================================================================ fontes
   Servidas pelo próprio site: a CSP não permite fontes de fora, e assim nenhum
   visitante tem o IP enviado a terceiros. Licença OFL, em static/fontes/. */
@font-face {
  font-family: "Inter";
  src: url("../fontes/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("../fontes/sora/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/ibm-plex-mono/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Serifada de revista, só no ranking da Forbes. O navegador só baixa o arquivo na página que a usa. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fontes/playfair-display/playfair-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ================================================================ tema claro (padrão) */
:root {
  color-scheme: light;

  /* Paleta do manual da marca: a mesma nos dois temas. O logotipo usa só estas cores. */
  --cor-verde-principal: #14d8a0;
  --cor-verde-profundo: #0c3d35;
  --cor-off-white: #f3f1ea;
  --cor-grafite: #0b1110;
  --cor-cinza-nevoa: #a8b2ad;

  /* Superfícies: o "papel" do sistema. As faixas usam o off-white da marca. */
  --cor-fundo: #ffffff;
  --cor-fundo-faixa: var(--cor-off-white);
  --cor-superficie: #ffffff;
  --cor-superficie-suave: #f5f4ef;
  --cor-realce: #ecebe4;
  --cor-veu: rgb(11 17 16 / 0.46);
  --cor-papel: #fdfdfa;

  /* Linhas. */
  --cor-borda: #e3e2da;
  --cor-borda-forte: #c9c7bd;
  --cor-grade: rgb(11 17 16 / 0.05);

  /* Texto. */
  --cor-texto: var(--cor-grafite);
  --cor-texto-secundario: #3f4744;
  --cor-texto-suave: #5f6763;

  /* Marca: o verde do logotipo. No claro, texto e detalhes usam um verde mais fundo, que
     passa no contraste sobre o branco e o off-white; o verde principal fica para a ação. */
  --cor-marca: #077a57;
  --cor-marca-forte: #05664a;
  --cor-marca-suave: #dcf6ec;
  --cor-sobre-marca: #ffffff;

  /* O rótulo no alto das telas do jogo e a faixa embaixo da barra do sistema: no claro, verde e ouro;
     no escuro, neutros, para o verde ficar na ação e nos detalhes (docs/17, "Cores"). */
  --cor-rotulo-da-tela: var(--cor-marca);
  --cor-faixa-do-sistema: var(--cor-ouro);
  --cor-faixa-do-sistema-fundo: var(--cor-ouro-suave);

  /* Ação: botão principal e chamadas, sempre no verde do logotipo com texto grafite. */
  --cor-acao: var(--cor-verde-principal);
  --cor-acao-forte: #0fc792;
  --cor-sobre-acao: var(--cor-grafite);
  --cor-ouro: #986a12;
  --cor-ouro-suave: #f6eddb;

  /* Estados. */
  --cor-sucesso: #13804f;
  --cor-sucesso-suave: #e2f2e9;
  --cor-erro: #b42318;
  --cor-erro-suave: #fbe8e6;
  --cor-alerta: #9c5a06;
  --cor-alerta-suave: #fbefdb;
  --cor-info: #1f5fad;
  --cor-info-suave: #e5edf9;

  /* Painel eletrônico: cores dos votos, iguais em todo o jogo. */
  --cor-voto-sim: #139158;
  --cor-voto-nao: #d0382e;
  --cor-voto-abstencao: #c9951e;
  --cor-voto-ausente: #cfd4cc;
  --cor-voto-secreto: #6b7a8f; /* quem votou, no voto secreto */
  --cor-cadeira: #dde1da;

  /* Partidos: as 8 cores da paleta, uma por partido da temporada (docs/04), iguais nos dois temas. Em qualquer
     tela, o [data-partido="N"] põe a cor dele em --cor-do-partido (ver "utilitários"). */
  --cor-partido-1: #c2413a;
  --cor-partido-2: #e07b39;
  --cor-partido-3: #d9aa2b;
  --cor-partido-4: #6f9a3a;
  --cor-partido-5: #2c8c83;
  --cor-partido-6: #3a6fc4;
  --cor-partido-7: #6a55c2;
  --cor-partido-8: #8a5a44;

  /* Blue, a rede social do jogo (paródia do Twitter): o azul do passarinho (fixo, como todo
     logotipo), o azul da interface (mais fundo no claro, pelo contraste) e as cores das ações. */
  --cor-blue-passaro: #009cfa;
  --cor-blue: #0a8fe0;
  --cor-blue-curtida: #d61a6f;
  --cor-blue-repostagem: #00875a;

  /* Discord: a cor oficial da marca, no botão que leva ao servidor (a mesma nos dois temas). */
  --cor-discord: #5865f2;
  --cor-sobre-discord: #ffffff;

  /* Faixa invertida: a seção de destaque, escura mesmo no tema claro. */
  --cor-inverso-fundo: var(--cor-grafite);
  --cor-inverso-superficie: #131c1a;
  --cor-inverso-borda: rgb(255 255 255 / 0.1);
  --cor-inverso-texto: var(--cor-off-white);
  --cor-inverso-suave: var(--cor-cinza-nevoa);
  --cor-inverso-marca: var(--cor-verde-principal);
  --cor-inverso-sim: var(--cor-verde-principal);
  --cor-inverso-nao: #f2675c;
  --cor-inverso-alerta: #e2b85a;
  /* Séries categóricas sobre o fundo invertido (candidatos, partidos), iguais nos dois temas:
     azul, laranja e água, validadas juntas no guia de dados (daltonismo e contraste). */
  --cor-inverso-serie-1: #3987e5;
  --cor-inverso-serie-2: #d95926;
  --cor-inverso-serie-3: #199e70;

  /* Sombras e foco. */
  --sombra-1: 0 1px 2px rgb(17 22 20 / 0.06);
  --sombra-2: 0 1px 2px rgb(17 22 20 / 0.04), 0 12px 28px -14px rgb(17 22 20 / 0.22);
  --sombra-3: 0 2px 6px rgb(17 22 20 / 0.06), 0 36px 72px -28px rgb(17 22 20 / 0.38);
  --anel-foco: 0 0 0 3px rgb(7 122 87 / 0.28);

  /* Tipografia. */
  --fonte-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fonte-serifada: "Playfair Display", Georgia, serif;
  --texto-2xs: 0.6875rem;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4rem);
  --titulo-sm: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --titulo-md: clamp(1.875rem, 1.3rem + 2.3vw, 3rem);
  --titulo-lg: clamp(2.25rem, 1.3rem + 3.8vw, 4.25rem);
  --titulo-xl: clamp(2.75rem, 0.9rem + 7vw, 7.25rem);
  --entrelinha-titulo: 1.02;
  --entrelinha-texto: 1.55;
  --tracado-titulo: -0.03em;
  --tracado-rotulo: 0.09em;

  /* Espaços (múltiplos de 4px). */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;
  --espaco-10: 128px;
  --espaco-secao: clamp(72px, 11vw, 152px);

  /* Cantos. Sistema operacional: cantos pequenos. */
  --raio-1: 4px;
  --raio-2: 8px;
  --raio-3: 12px;
  --raio-4: 20px;
  --raio-pilula: 999px;

  /* Movimento. */
  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duracao-1: 120ms;
  --duracao-2: 200ms;
  --duracao-3: 320ms;
  --duracao-4: 560ms;
  --duracao-5: 900ms;

  /* Esqueleto. */
  --largura-maxima: 1240px;
  --margem-lateral: clamp(16px, 4vw, 40px);
  --altura-topo: 64px;

  /* Camadas. */
  --camada-topo: 50;
  --camada-flutuante: 60;
  --camada-dialogo: 100;
  --camada-aviso: 120;
}

/* ================================================================ tema escuro
   Escolhido no botão do topo; o servidor já manda a página no tema certo (cookie "tema").
   Escuro suave (27/09/2026): cinza neutro, sem o tom verde no fundo, um pouco mais claro que o grafite
   da marca, e o verde vivo só na ação e no logotipo. Links, ícones e seleções usam um verde mais calmo. */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --cor-fundo: #1b1d20;
  --cor-fundo-faixa: #202226;
  --cor-superficie: #232629;
  --cor-superficie-suave: #282b2f;
  --cor-realce: #303337;
  --cor-veu: rgb(0 0 0 / 0.55);
  /* Papel (cédula, documento impresso) continua claro no tema escuro, só um pouco mais baixo. */
  --cor-papel: #e6e8e4;

  --cor-borda: #33363a;
  --cor-borda-forte: #45494e;
  --cor-grade: rgb(255 255 255 / 0.035);

  --cor-texto: #ebeae4;
  --cor-texto-secundario: #b6b8b5;
  --cor-texto-suave: #90949a;

  --cor-marca: #5fcca6;
  --cor-marca-forte: #86dcbd;
  --cor-marca-suave: rgb(95 204 166 / 0.09);
  --cor-sobre-marca: #16181a;

  --cor-rotulo-da-tela: var(--cor-texto-suave);
  --cor-faixa-do-sistema: var(--cor-texto-suave);
  --cor-faixa-do-sistema-fundo: var(--cor-fundo-faixa);

  --cor-acao-forte: #45e2b5;
  --cor-ouro: #d9b35f;
  --cor-ouro-suave: rgb(217 179 95 / 0.12);

  --cor-sucesso: #4cc995;
  --cor-sucesso-suave: rgb(76 201 149 / 0.12);
  --cor-erro: #ef6f64;
  --cor-erro-suave: rgb(239 111 100 / 0.13);
  --cor-alerta: #e2a650;
  --cor-alerta-suave: rgb(226 166 80 / 0.12);
  --cor-info: #79a9e8;
  --cor-info-suave: rgb(121 169 232 / 0.13);

  --cor-voto-sim: #3dbd84;
  --cor-voto-nao: #ec6259;
  --cor-voto-abstencao: #d9b35f;
  --cor-voto-ausente: #3a3e43;
  --cor-voto-secreto: #8e9aad;
  --cor-cadeira: #34383c;

  --cor-blue: var(--cor-blue-passaro);
  --cor-blue-curtida: #f91880;
  --cor-blue-repostagem: #00ba7c;

  /* A faixa invertida (os painéis escuros nos dois temas): no escuro, uma camada um pouco mais clara que
     o fundo, neutra, em vez do verde profundo. */
  --cor-inverso-fundo: #26292d;
  --cor-inverso-superficie: #2d3035;
  --cor-inverso-borda: rgb(255 255 255 / 0.09);
  --cor-inverso-suave: #b6b8b5;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.25);
  --sombra-2: 0 1px 2px rgb(0 0 0 / 0.2), 0 16px 32px -16px rgb(0 0 0 / 0.45);
  --sombra-3: 0 2px 8px rgb(0 0 0 / 0.3), 0 40px 80px -24px rgb(0 0 0 / 0.6);
  --anel-foco: 0 0 0 3px rgb(95 204 166 / 0.32);
}

/* ================================================================ base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + var(--espaco-4));
  scrollbar-color: var(--cor-borda-forte) transparent;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: var(--entrelinha-texto);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracado-titulo);
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

p {
  text-wrap: pretty;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--cor-marca);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--cor-marca-forte);
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: var(--texto-sm);
}

code,
kbd,
samp {
  font-family: var(--fonte-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  margin: var(--espaco-6) 0;
  border: 0;
  background: var(--cor-borda);
}

::selection {
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
}

:focus-visible {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--cor-borda-forte);
  border: 3px solid var(--cor-fundo);
  border-radius: var(--raio-pilula);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Com o diálogo aberto, a página de trás não rola. */
html.tem-dialogo-aberto {
  overflow: hidden;
}

/* ================================================================ utilitários */
.recipiente {
  width: 100%;
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

/* Some da tela, mas continua para leitores de tela. */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A cor do partido, para quem estiver dentro: <span data-partido="3">. Sem partido (0), um cinza neutro. */
[data-partido="0"] { --cor-do-partido: var(--cor-borda-forte); }
[data-partido="1"] { --cor-do-partido: var(--cor-partido-1); }
[data-partido="2"] { --cor-do-partido: var(--cor-partido-2); }
[data-partido="3"] { --cor-do-partido: var(--cor-partido-3); }
[data-partido="4"] { --cor-do-partido: var(--cor-partido-4); }
[data-partido="5"] { --cor-do-partido: var(--cor-partido-5); }
[data-partido="6"] { --cor-do-partido: var(--cor-partido-6); }
[data-partido="7"] { --cor-do-partido: var(--cor-partido-7); }
[data-partido="8"] { --cor-do-partido: var(--cor-partido-8); }

/* Rótulo técnico, em mono e caixa alta: o "carimbo" do sistema. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.numero {
  font-variant-numeric: tabular-nums;
}

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Link "pular para o conteúdo": aparece só para quem navega pelo teclado. */
.pular-para-conteudo {
  position: absolute;
  top: var(--espaco-2);
  left: var(--espaco-2);
  z-index: calc(var(--camada-aviso) + 1);
  padding: var(--espaco-2) var(--espaco-4);
  color: var(--cor-sobre-marca);
  background: var(--cor-marca);
  border-radius: var(--raio-2);
  transform: translateY(-160%);
  transition: transform var(--duracao-2) var(--curva-saida);
}

.pular-para-conteudo:focus {
  transform: none;
}

/* ================================================================ marca
   Símbolo e nome do Legado (componentes/_marca.html), no sistema do logo do manual da marca:
   o símbolo nunca muda de cor; o nome vai em grafite no tema claro (versão negativa) e em
   off-white no escuro (versão principal). Proporções do manual: o "L" tem ~58% da altura do
   símbolo, colado a ele. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-texto);
  text-decoration: none;
}

.marca:hover {
  color: var(--cor-texto);
}

.marca__simbolo {
  width: 32px;
  height: 32px;
  flex: none;
}

.marca__simbolo-fundo {
  fill: var(--cor-verde-principal);
}

.marca__simbolo-forma {
  fill: var(--cor-grafite);
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* ================================================================ marcas do jogo
   componentes/_marcas_do_jogo.html. O tamanho acompanha a fonte de quem as contém. */
.marca-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--cor-texto);
}

/* Proporções do LogoBlue.png: o passarinho é ~1,25 vez a altura do "b". */
.marca-blue__simbolo {
  width: 1.36em;
  height: 0.97em;
  margin-right: 0.04em;
  fill: var(--cor-blue-passaro);
}

/* O olho do passarinho é branco nos dois temas, como no logotipo. */
.marca-blue__olho {
  fill: #ffffff;
}

.logotipo-forbes {
  width: auto;
  height: 1em;
  fill: currentColor;
}

/* A Stripe só nas cores das diretrizes dela: o roxo no tema claro e o branco no escuro. */
.logotipo-stripe {
  width: auto;
  height: 1em;
  fill: #533afd;
}

:root[data-tema="escuro"] .logotipo-stripe {
  fill: #ffffff;
}

/* ================================================================ topo */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--camada-topo);
  background: color-mix(in srgb, var(--cor-fundo) 82%, transparent);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  transition: border-color var(--duracao-3), background-color var(--duracao-3);
}

/* A linha do topo aparece quando a página rola (base.js marca o html). */
html[data-rolou] .topo {
  border-bottom-color: var(--cor-borda);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
  height: var(--altura-topo);
}

.topo__navegacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-left: var(--espaco-4);
}

.topo__link {
  padding: 6px 10px;
  font-size: var(--texto-sm);
  font-weight: 520;
  white-space: nowrap;
  color: var(--cor-texto-secundario);
  text-decoration: none;
  border-radius: var(--raio-2);
  transition: color var(--duracao-2), background-color var(--duracao-2);
}

.topo__link:hover {
  color: var(--cor-texto);
  background: var(--cor-realce);
}

/* WikiLegado no menu: a marca da wiki (componentes/_marca_wiki.html) num selo verde, para se
   destacar dos links da página. */
.topo__link--wiki {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--espaco-2);
  padding: 4px 12px 4px 5px;
  color: var(--cor-texto);
  background: var(--cor-marca-suave);
  border: 1px solid color-mix(in srgb, var(--cor-marca) 30%, transparent);
  border-radius: var(--raio-pilula);
}

.topo__link--wiki:hover {
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-marca) 20%, transparent);
}

.topo__link--wiki .marca__simbolo {
  width: 22px;
  height: 22px;
}

.topo__link--wiki .marca__nome {
  font-size: var(--texto-md);
  letter-spacing: -0.03em;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-left: auto;
}

/* Telas médias: os links ficam mais juntos, e o selo da wiki mostra só o símbolo (o nome
   continua para o leitor de tela). */
@media (max-width: 1180px) and (min-width: 901px) {
  .topo__barra {
    gap: var(--espaco-4);
  }

  .topo__navegacao {
    margin-left: 0;
  }

  .topo__link {
    padding: 6px clamp(5px, 0.6vw, 7px);
  }

  .topo__link--wiki {
    padding: 4px;
  }

  .topo__link--wiki .marca__nome {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* O botão de menu só aparece no celular (o .botao dos componentes não pode vencer). */
.topo__acoes .topo__menu-botao {
  display: none;
}

@media (max-width: 900px) {
  .topo__navegacao {
    position: absolute;
    top: calc(var(--altura-topo) - 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--espaco-2) var(--margem-lateral) var(--espaco-4);
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-2);
  }

  .topo[data-menu-aberto] .topo__navegacao {
    display: flex;
    animation: surgir-de-cima var(--duracao-3) var(--curva-saida);
  }

  .topo__link {
    padding: 12px 4px;
    font-size: var(--texto-md);
    border-bottom: 1px solid var(--cor-borda);
    border-radius: 0;
  }

  /* No menu aberto do celular, a wiki vira uma pílula no fim da lista. */
  .topo__link--wiki {
    align-self: flex-start;
    margin: var(--espaco-3) 0 0;
    padding: 8px 16px 8px 8px;
    border-bottom-color: color-mix(in srgb, var(--cor-marca) 30%, transparent);
    border-radius: var(--raio-pilula);
  }

  .topo__acoes .topo__menu-botao {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  .topo__cta {
    display: none;
  }
}

/* Entrar e Minha conta (componentes/_acesso_do_topo.html). No celular, o "Entrar" sai do topo:
   o "Quero jogar" também entra, porque quem já tem conta volta direto para ela pelo Discord. */
.topo__conta .icone {
  width: 16px;
  height: 16px;
}

@media (max-width: 600px) {
  .topo__acoes .topo__entrar {
    display: none;
  }
}

/* No celular, "Minha conta" fica só com o ícone (o nome continua para o leitor de tela). */
@media (max-width: 520px) {
  .topo__acoes .topo__conta {
    width: 40px;
    padding: 0;
  }

  .topo__acoes .topo__conta span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ================================================================ conteúdo e rodapé */
.conteudo {
  flex: 1;
  width: 100%;
}

/* Páginas comuns (painel, erros): conteúdo dentro de uma coluna com respiro. */
.conteudo--coluna {
  max-width: calc(var(--largura-maxima) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding: var(--espaco-7) var(--margem-lateral) var(--espaco-9);
}

.cartao {
  padding: var(--espaco-6);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
}

.cartao > * + * {
  margin-top: var(--espaco-4);
}

.rodape {
  padding: var(--espaco-8) 0 var(--espaco-6);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--espaco-7);
}

.rodape__texto {
  max-width: 44ch;
  margin-top: var(--espaco-4);
}

.rodape__lista {
  display: grid;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.rodape__lista a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.rodape__lista a:hover {
  color: var(--cor-texto);
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-top: var(--espaco-8);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
}

@media (max-width: 720px) {
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }

  .rodape__grade > :first-child {
    grid-column: 1 / -1;
  }
}

/* ================================================================ rodapé enxuto
   Telas de sistema (entrar, jogo): componentes/_rodape_curto.html. */
.rodape-curto {
  padding: var(--espaco-4) var(--margem-lateral);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  border-top: 1px solid var(--cor-borda);
}

.rodape-curto__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2) var(--espaco-5);
  max-width: var(--largura-maxima);
  margin-inline: auto;
}

.rodape-curto__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
}

.rodape-curto__links a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.rodape-curto__links a:hover {
  color: var(--cor-texto);
  text-decoration: underline;
}

/* ================================================================ revelar ao rolar
   Elementos com data-revelar entram suaves quando aparecem na tela (base.js).
   Sem JavaScript, ficam visíveis: o estado escondido só vale com a classe "js". */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duracao-5) var(--curva-saida),
    transform var(--duracao-5) var(--curva-saida);
  transition-delay: calc(var(--atraso, 0) * 90ms);
}

.js [data-revelar="esquerda"] {
  transform: translateX(-28px);
}

.js [data-revelar="escala"] {
  transform: scale(0.96);
}

.js [data-revelar].esta-visivel {
  opacity: 1;
  transform: none;
}

/* ================================================================ animações compartilhadas */
@keyframes surgir-de-cima {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes surgir-de-baixo {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes pulsar {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Troca de tema com um círculo que se abre a partir do botão (base.js). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ================================================================ menos movimento
   Quem pede menos movimento no sistema vê tudo pronto, sem animação. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-revelar] {
    opacity: 1;
    transform: none;
  }
}