/* =========================================================================
   Arena Gamer: design system

   As cores não foram escolhidas. Foram medidas pixel a pixel no material
   oficial do cliente em 2026-09-14 (protótipo da home, painel de gestão e
   logo). Trocar qualquer valor daqui muda a marca, não só a tela.

   Regra de contraste: nada de texto pequeno em magenta puro. O magenta rende
   4,7:1 sobre o fundo e serve de acento; para texto ele entra na versão clara.
   O verde rende 14,4:1 sobre o fundo e 15:1 com texto preto em cima, por isso
   o botão principal é verde com texto preto.
   ========================================================================= */

/* ---------- Fontes (hospedadas aqui, sem CDN de terceiro) ---------------- */

@font-face {
  font-family: "Anton";
  src: url("../fontes/anton-latin.912c3c9f2621.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  src: url("../fontes/anton-latin-ext.ab8365836d69.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-latin.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fontes/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Fichas (tokens) --------------------------------------------- */

:root {
  /* Fundo, do mais fundo para o mais alto */
  --preto: #040708;
  --grafite-900: #0b0d10;
  --grafite-800: #0e1011;
  --grafite-700: #16191c;
  --grafite-600: #1e2226;

  /* Traço */
  --linha: rgba(255, 255, 255, 0.08);
  --linha-forte: rgba(255, 255, 255, 0.16);

  /* Marca */
  --verde: #4afa42;
  --verde-escuro: #2bc425;
  --verde-limao: #8cde00;
  --magenta: #c31dfd;
  --magenta-claro: #e79bff;
  --ambar: #f0a92a;
  --vermelho: #ff5c5c;

  /* Texto */
  --texto: #e8edea;
  --texto-suave: #9aa3a0;
  --texto-fraco: #6b7370;
  --texto-no-verde: #04120a;

  /* Brilho: usado com parcimônia. Seção 40 do briefing pede identidade
     no traço, não neon piscando em tudo. */
  --brilho-verde: 0 0 24px rgba(74, 250, 66, 0.28);
  --brilho-magenta: 0 0 24px rgba(195, 29, 253, 0.25);

  /* Medidas */
  --r-pequeno: 6px;
  --r-medio: 10px;
  --r-grande: 14px;
  /* Duas larguras, e a diferença entre elas é o que a caixa carrega.

     `--largura` é para LER: texto de notícia, regulamento, formulário. Linha
     muito longa cansa, e por isso ela não cresce com o monitor.

     `--largura-larga` é para MOSTRAR: cabeçalho, capa e grade de cartão. Num
     monitor de 2560 a vitrine presa em 1200px deixa mais de metade da tela
     vazia, e o site parece pequeno em vez de parecer organizado. */
  --largura: 1360px;
  /* Cresce com a tela em vez de parar num número fixo: 1680px fixos ocupam 88%
     de um Full HD e só 66% de um Quad HD, e o mesmo site parece bem resolvido
     num monitor e pequeno no outro. Com `82vw` os dois ficam em torno de 80%. */
  --largura-larga: clamp(1360px, 82vw, 2040px);
  --barra: 76px;

  --fonte-titulo: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base --------------------------------------------------------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--verde);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* ---------- Tipografia --------------------------------------------------- */

/* 🔴 O ENTRE-LINHAS DOS TÍTULOS É 1.12, E O NÚMERO É MEDIDO, NÃO ESCOLHIDO.
   Medido em 2026-09-16, direto de `fontes/anton-latin.woff2`:

     caixa da fonte  1.505 em   (sobe 1.176, desce 0.329)
     A, O            0.859 em   <- cabe em qualquer coisa
     Ã, Õ            1.072 em
     Á É Í Ó Ú Ê Ô Â 1.101 em   <- passa do quadratim
     Ç               -0.308 em

   A Anton põe o acento 10% ACIMA do quadratim. Com `0.98`, que era o valor
   antigo, a caixa da linha terminava em 0.914 em e o til do à transbordava
   0.16 em para cima, entrando na linha de cima. Em português isso aparece em
   metade dos títulos; em inglês nunca, porque A e O param na altura da
   maiúscula. Foi por isso que ninguém viu antes.

   ⚠️ E ENTRE-LINHAS NÃO RESOLVE SOZINHO. Para o acento caber DENTRO da caixa
   seria preciso 1.355, que numa fonte de título fica frouxo. O que 1.12 compra
   é a outra metade do problema: num título que QUEBRA em duas linhas, o acento
   da segunda não bate mais na base da primeira. O mínimo medido para isso é
   1.101; 1.12 é ele com uma folga.

   🔒 Para o transbordo que SOBRA, a folga vem de cima, do espaço antes do
   título. Ver `.painel-marca`. */
h1,
h2,
h3,
.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0 0 0.4em;
}

h1,
.titulo-1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
}
h2,
.titulo-2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}
h3,
.titulo-3 {
  font-size: 1.25rem;
}

.sobretitulo {
  font-family: var(--fonte-texto);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 0.9rem;
}

.secao-titulo {
  font-family: var(--fonte-texto);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 1rem;
}

/* Ícone inline acompanha o tamanho do texto ao redor. Sem isso o SVG ocupa
   a largura que encontrar, e um controle de 24px vira um controle de 300px. */
.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}

.suave {
  color: var(--texto-suave);
}
.fraco {
  color: var(--texto-fraco);
}
.numero {
  font-variant-numeric: tabular-nums;
}

/* ---------- Estrutura ---------------------------------------------------- */

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  /* O respiro lateral acompanha a tela: 20px encostado na borda de um monitor
     grande parece descuido, e num celular é o que cabe. */
  padding-inline: clamp(20px, 3vw, 44px);
}
.envelope--largo {
  max-width: var(--largura-larga);
}

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

.secao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.grade {
  display: grid;
  gap: 1rem;
}
/* `min(100%, X)` em toda faixa: sem isso, numa tela de 320px a faixa mínima
   maior que a tela faz a grade estourar para fora da página.

   `auto-fit` colapsa a faixa vazia e estica o que sobrou; `auto-fill` mantém a
   faixa vazia. A diferença importa com poucos itens:

   - `grade-4` é a vitrine de jogos, que tem número conhecido e deve preencher a
     linha. Usa `auto-fit`.
   - `grade-3` é lista de torneio e de notícia, que pode ter um item só. Com
     `auto-fit`, um torneio sozinho viraria um cartão de 2000px num monitor
     grande. Usa `auto-fill`, e o cartão mantém o tamanho. */
.grade-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grade-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.grade-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

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

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--grafite-900) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.cabecalho__interno {
  height: var(--barra);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* O `auto` estava no `ul`, que não tem para onde empurrar: quem manda na sobra é
   o filho direto da barra. Sem isto, logo, menu e botões ficavam amontoados à
   esquerda e metade da barra sobrava vazia num monitor grande. */
.cabecalho__interno > nav {
  margin-left: auto;
}

.marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marca img {
  height: 54px;
  width: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.menu a {
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-weight: 500;
  padding-block: 0.4rem;
  position: relative;
  text-decoration: none;
  transition: color 0.15s ease;
}
.menu a:hover {
  color: var(--texto);
}
.menu a[aria-current="page"] {
  color: var(--verde);
}
.menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--verde);
  box-shadow: var(--brilho-verde);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* O segundo `auto`: a sobra se divide entre logo-menu e menu-botões, e a barra
     fica ocupada de ponta a ponta em vez de aglomerada num canto. */
  margin-left: auto;
}

.menu-botao {
  display: none;
  background: none;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pequeno);
  color: var(--texto);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .menu,
  .cabecalho__acoes {
    display: none;
  }
  .menu-botao {
    display: block;
    margin-left: auto;
  }
  .menu-movel:not([hidden]) {
    display: block;
  }
  .marca img {
    height: 44px;
  }
}

.menu-movel {
  display: none;
  border-top: 1px solid var(--linha);
  padding-block: 1rem 1.4rem;
  background: var(--grafite-900);
}
.menu-movel ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.menu-movel ul a {
  display: block;
  padding: 0.7rem 0.4rem;
  color: var(--texto);
  border-bottom: 1px solid var(--linha);
}

/* ---------- Botões ------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fonte-texto);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.78rem 1.25rem;
  border-radius: var(--r-pequeno);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.08s ease;
}
.botao:hover {
  text-decoration: none;
}
.botao:active {
  transform: translateY(1px);
}
.botao[disabled],
.botao[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.botao--principal {
  background: var(--verde);
  color: var(--texto-no-verde);
}
.botao--principal:hover {
  background: var(--verde-escuro);
}

.botao--contorno {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--texto);
}
.botao--contorno:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.botao--fantasma {
  background: transparent;
  color: var(--texto-suave);
  padding-inline: 0.7rem;
}
.botao--fantasma:hover {
  color: var(--texto);
  background: var(--grafite-700);
}

.botao--largo {
  width: 100%;
}
.botao--grande {
  padding: 0.95rem 1.6rem;
  font-size: 0.98rem;
}

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

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: var(--r-pequeno);
  border: 1px solid transparent;
  white-space: nowrap;
}

.selo--aberto {
  background: rgba(74, 250, 66, 0.14);
  border-color: rgba(74, 250, 66, 0.35);
  color: var(--verde);
}
.selo--breve {
  background: rgba(240, 169, 42, 0.14);
  border-color: rgba(240, 169, 42, 0.35);
  color: var(--ambar);
}
.selo--destaque {
  background: rgba(195, 29, 253, 0.16);
  border-color: rgba(195, 29, 253, 0.4);
  color: var(--magenta-claro);
}
.selo--neutro {
  background: var(--grafite-700);
  border-color: var(--linha);
  color: var(--texto-suave);
}
.selo--encerrado {
  background: rgba(255, 92, 92, 0.12);
  border-color: rgba(255, 92, 92, 0.3);
  color: var(--vermelho);
}
.selo--cheio {
  background: var(--verde);
  color: var(--texto-no-verde);
  border-color: var(--verde);
}

/* ---------- Cartões ------------------------------------------------------ */

.cartao {
  background: var(--grafite-800);
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cartao--clicavel:hover {
  border-color: rgba(74, 250, 66, 0.4);
  transform: translateY(-2px);
}
.cartao__corpo {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
/* A chamada desce até o rodapé do cartão para alinhar entre cartões de
   alturas diferentes na mesma grade. */
.cartao__corpo > .botao:last-child {
  margin-top: auto;
}
.cartao__capa {
  aspect-ratio: 16 / 9;
  background: var(--grafite-700);
  object-fit: cover;
  width: 100%;
}
.cartao__titulo {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  font-size: 1.15rem;
  /* 1.15, nao 1.05: o acento da Anton sobe 1.101 em. Ver a regra de h1. */
  line-height: 1.15;
  margin: 0;
}

.ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ficha li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ficha .icone {
  width: 14px;
  height: 14px;
  color: var(--verde);
}

/* Cartão de jogo: pouco texto, muita imagem */
.cartao-jogo {
  position: relative;
  aspect-ratio: 16 / 10;
  text-align: left;
  border-radius: var(--r-medio);
  border: 1px solid var(--linha);
  background: var(--grafite-800);
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--texto);
  font-weight: 600;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
/* Véu de baixo para cima: o nome do jogo fica legível sobre qualquer arte, sem
   depender de a imagem ser escura naquele canto. */
.cartao-jogo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(
    to top,
    rgba(4, 7, 8, 0.95) 8%,
    rgba(4, 7, 8, 0.6) 45%,
    transparent
  );
  pointer-events: none;
}
.cartao-jogo .figura {
  position: absolute;
  inset: 0;
  transition: transform 0.35s ease;
}
.cartao-jogo:hover {
  border-color: var(--verde);
  box-shadow: var(--brilho-verde);
  text-decoration: none;
}
.cartao-jogo:hover .figura {
  transform: scale(1.06);
}
.cartao-jogo:hover .cartao-jogo__nome {
  color: var(--verde);
}
@media (prefers-reduced-motion: reduce) {
  .cartao-jogo .figura,
  .cartao-jogo:hover .figura {
    transition: none;
    transform: none;
  }
}

/* ---------- Barra de vagas ---------------------------------------------- */

.vagas {
  display: grid;
  gap: 0.4rem;
}
.vagas__topo {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.vagas__trilho {
  height: 7px;
  border-radius: 99px;
  background: var(--grafite-600);
  overflow: hidden;
}
.vagas__preenchido {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--verde-limao), var(--verde));
}
.vagas__preenchido--cheio {
  background: linear-gradient(90deg, var(--ambar), var(--vermelho));
}

/* ---------- Tabela de classificação ------------------------------------- */

.tabela-envelope {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  background: var(--grafite-800);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 540px;
}
.tabela th {
  text-align: right;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 0.85rem 0.6rem;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.tabela td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--linha);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabela tr:last-child td {
  border-bottom: none;
}
.tabela .col-posicao {
  width: 3.6rem;
  text-align: center;
  white-space: nowrap;
}
.tabela td.col-posicao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
}
.tabela .col-jogador {
  text-align: left;
  width: 100%;
}
.tabela th.col-jogador {
  text-align: left;
}
.tabela th.col-posicao {
  text-align: center;
}
.tabela tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.jogador-celula {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grafite-600);
  border: 1px solid var(--linha-forte);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--texto-suave);
}
.avatar--grande {
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
}

/* Marca quem passa e quem cai. Não pode depender só da cor: o ponto fica
   junto de uma legenda escrita. */
.ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto-fraco);
}
.ponto--classificado {
  background: var(--verde);
}
.legenda {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--linha);
}
.legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* ---------- Formulário --------------------------------------------------- */

.campo {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  /* Dentro de uma grade, o campo é esticado até a altura da linha. Sem isto, o
     campo sem texto de ajuda estica por dentro e o input dele desce, ficando
     desalinhado do campo vizinho. */
  align-content: start;
}
.campo > label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-suave);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo select,
.campo textarea {
  width: 100%;
  background: var(--grafite-900);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pequeno);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.72rem 0.85rem;
  transition: border-color 0.15s ease;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-fraco);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--verde);
  outline: none;
}
.campo__ajuda {
  font-size: 0.78rem;
  color: var(--texto-fraco);
}
.campo__erro {
  font-size: 0.8rem;
  color: var(--vermelho);
}
.campo--erro input,
.campo--erro select {
  border-color: var(--vermelho);
}

.escolha {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
}
.escolha input {
  margin-top: 0.2rem;
  accent-color: var(--verde);
  width: 16px;
  height: 16px;
}

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

.aviso {
  border: 1px solid var(--linha-forte);
  border-left-width: 3px;
  border-radius: var(--r-pequeno);
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  background: var(--grafite-800);
}
.aviso--atencao {
  border-left-color: var(--ambar);
}
.aviso--erro {
  border-left-color: var(--vermelho);
}
.aviso--ok {
  border-left-color: var(--verde);
}

/* ---------- Rodapé ------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--grafite-900);
  padding-block: 2.5rem 2rem;
  margin-top: 3rem;
}
.rodape__topo {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.rodape__lema {
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin: 0.5rem 0 0;
}
.rodape__plataformas {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--texto-suave);
  list-style: none;
  padding: 0;
  margin: 0;
}
.rodape__base {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

/* ---------- Página de amostra do design system -------------------------- */

.amostra {
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  padding: 1.4rem;
  background: var(--grafite-800);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.ficha-cor {
  display: grid;
  gap: 0.4rem;
  font-size: 0.75rem;
}
.ficha-cor__amostra {
  height: 64px;
  border-radius: var(--r-medio);
  border: 1px solid var(--linha);
}
.ficha-cor code {
  color: var(--texto-suave);
  font-size: 0.72rem;
}

/* =========================================================================
   Imagens do site

   As 15 imagens do cliente vieram em PNG somando 31 MB. O que vai para o ar é
   AVIF e WebP em quatro larguras, montados pela tag `figura`. Aqui só mora o
   enquadramento.
   ========================================================================= */

.figura {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--grafite-700);
}
.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Véu para a imagem que destoa da paleta. O lote tem uma cena de dia, clara e
   quente; sem véu ela fura a página preta e parece de outro site. */
.figura--veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 8, 0.45);
  pointer-events: none;
}

.figura--capa {
  aspect-ratio: 16 / 9;
}
.figura--quadro {
  aspect-ratio: 16 / 10;
}
.figura--retrato {
  aspect-ratio: 3 / 4;
  height: 100%;
}

/* ---------- Hero --------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  /* A capa é o primeiro contato com o site. Presa em 620px num monitor de
     1440 de altura ela ocupa menos da metade da tela e some cedo demais. */
  min-height: min(84vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--linha);
}

.hero .figura {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--preto);
}

/* O lote foi desenhado com o fundo escuro à esquerda, onde o texto entra.
   Esta camada garante contraste mesmo se a imagem mudar. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      var(--preto) 8%,
      rgba(4, 7, 8, 0.85) 38%,
      rgba(4, 7, 8, 0.15) 70%,
      rgba(4, 7, 8, 0.45) 100%
    ),
    linear-gradient(to top, var(--preto) 2%, transparent 35%);
}

.hero__texto {
  /* Cresce um pouco em tela grande, mas com teto: linha longa demais cansa
     mesmo numa capa. */
  max-width: clamp(34rem, 42vw, 44rem);
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__linha {
  font-size: clamp(1.05rem, 1.1vw, 1.2rem);
  color: var(--texto-suave);
  margin: 0 0 1.6rem;
}
.hero__acoes {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .hero {
    min-height: 0;
  }
  .hero::before {
    background: linear-gradient(
        to top,
        var(--preto) 18%,
        rgba(4, 7, 8, 0.82) 55%,
        rgba(4, 7, 8, 0.5) 100%
      );
  }
  .hero__texto {
    max-width: none;
    padding-top: 9rem;
  }
}

/* ---------- Cartão de jogo com imagem ----------------------------------- */

.cartao-jogo {
  position: relative;
  padding: 0;
  display: block;
  aspect-ratio: 16 / 10;
}
.cartao-jogo .figura {
  position: absolute;
  inset: 0;
  background: none;
}
.cartao-jogo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 7, 8, 0.92) 8%, rgba(4, 7, 8, 0.25) 65%);
  pointer-events: none;
}
.cartao-jogo__nome {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 1;
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  /* Acompanha o tamanho do cartão: num monitor grande o cartão dobra, e um
     nome de 1rem dentro dele vira legenda. */
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  transition: color 0.15s ease;
  /* 1.15, nao 1.05: o acento da Anton sobe 1.101 em. Ver a regra de h1. */
  line-height: 1.15;
  color: var(--texto);
  margin: 0;
}

/* ---------- Seção de cadastro ------------------------------------------- */

.cadastro {
  display: grid;
  grid-template-columns: 1.05fr 1fr 0.5fr;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--grafite-900);
}
.cadastro__arte {
  position: relative;
  min-height: 420px;
}
.cadastro__arte .figura {
  position: absolute;
  inset: 0;
}
.cadastro__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 8, 0.2), rgba(11, 13, 16, 0.95));
}
.cadastro__arte--direita::after {
  background: linear-gradient(270deg, rgba(4, 7, 8, 0.2), rgba(11, 13, 16, 0.95));
}
.cadastro__conteudo {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  position: relative;
  z-index: 1;
}
.cadastro__lista {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.cadastro__lista li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
}
.cadastro__lista .icone {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  border: 1px solid rgba(74, 250, 66, 0.35);
  background: rgba(74, 250, 66, 0.1);
  color: var(--verde);
}
.cadastro__marca {
  position: absolute;
  top: clamp(1.6rem, 4vw, 2.6rem);
  left: clamp(1.6rem, 4vw, 2.6rem);
  z-index: 1;
}

/* =========================================================================
   Home: acabamento compacto do protótipo

   A landing usa uma composição mais editorial que as páginas internas: capa
   baixa, faixas horizontais e cartões menores. Tudo fica restrito à home para
   a leitura das demais telas continuar com as medidas do design system.
   ========================================================================= */

.pagina-home .cabecalho__interno {
  gap: clamp(1.2rem, 2vw, 2rem);
}
.pagina-home .marca img {
  height: 62px;
}
.pagina-home .menu {
  gap: clamp(1.2rem, 2.25vw, 2.25rem);
}
.pagina-home .menu a {
  color: var(--texto);
  font-size: 0.82rem;
  font-weight: 650;
}
.pagina-home .cabecalho__acoes {
  gap: 0.85rem;
}

.pagina-home .hero {
  min-height: clamp(430px, 38vw, 560px);
  align-items: flex-start;
}
.pagina-home .hero::before {
  background:
    linear-gradient(90deg, var(--preto) 3%, rgba(4, 7, 8, 0.9) 31%, rgba(4, 7, 8, 0.2) 67%, rgba(4, 7, 8, 0.36) 100%),
    linear-gradient(to top, var(--preto) 0%, transparent 28%);
}
.pagina-home .hero__texto {
  max-width: min(49rem, 56vw);
  padding-block: clamp(2.5rem, 4vw, 4rem) 2rem;
}
.pagina-home .hero h1 {
  max-width: 12ch;
  margin-bottom: 0.22em;
  font-family: var(--fonte-texto);
  font-size: clamp(2.8rem, 4.65vw, 4.35rem);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.045em;
}
.pagina-home .hero__lema {
  margin: 0 0 0.28rem;
  color: var(--texto);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 500;
}
.pagina-home .hero__linha {
  max-width: 52ch;
  margin-bottom: 1.15rem;
  color: var(--texto);
  font-size: clamp(0.94rem, 1vw, 1.04rem);
  line-height: 1.45;
}
.pagina-home .hero__acoes {
  gap: 0.85rem;
}
.pagina-home .hero__indicadores {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  margin: clamp(1.55rem, 2.5vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}
.pagina-home .hero__indicadores li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--texto-suave);
  font-size: 0.72rem;
  line-height: 1.25;
}
.pagina-home .hero__indicadores .icone {
  width: 26px;
  height: 26px;
  color: var(--verde);
}
.pagina-home .hero__indicadores strong {
  display: block;
  color: var(--texto);
  font-size: 0.78rem;
}

.pagina-home .secao {
  padding-block: clamp(1.45rem, 2.5vw, 2.15rem);
}
.pagina-home .secao + .secao {
  border-top: 1px solid var(--linha);
}
.pagina-home .secao-titulo {
  color: var(--texto);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
}
.home-jogos__grade {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.pagina-home .cartao-jogo {
  aspect-ratio: 16 / 8.8;
  border-radius: 7px;
}
.pagina-home .cartao-jogo__nome {
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.7rem;
  font-family: var(--fonte-texto);
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}
.cartao-jogo--mais {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(145deg, var(--grafite-800), var(--grafite-900));
  color: var(--texto);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}
.cartao-jogo--mais::after {
  display: none;
}
.cartao-jogo--mais .icone {
  width: 34px;
  height: 34px;
}

.home-torneios__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
  align-items: stretch;
}
.home-torneios__grade .cartao {
  border-radius: 8px;
}
.home-torneios__grade .cartao__corpo {
  gap: 0.58rem;
  padding: 0.85rem;
}
.home-torneios__grade .cartao__titulo {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.home-torneios__grade .ficha {
  gap: 0.35rem 0.7rem;
  font-size: 0.72rem;
}
.home-torneios__grade .vagas {
  display: none;
}
.home-torneios__grade .botao {
  margin-top: auto;
  padding-block: 0.65rem;
  font-size: 0.78rem;
}
.home-ranking {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(74, 250, 66, 0.035), var(--grafite-800));
}
.home-ranking > .icone {
  width: 34px;
  height: 34px;
  margin-bottom: auto;
  color: var(--texto);
}
.home-ranking h3 {
  max-width: 15ch;
  margin: 1.2rem 0 0.65rem;
  font-family: var(--fonte-texto);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.home-ranking p {
  margin: 0 0 1.15rem;
  color: var(--texto-suave);
  font-size: 0.78rem;
  line-height: 1.5;
}
.home-ranking .botao {
  margin-top: auto;
}

.pagina-home .home-noticias .figura--capa {
  aspect-ratio: 16 / 7;
}
.pagina-home .home-noticias .grade-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.pagina-home .home-noticias .cartao {
  border-radius: 7px;
}
.pagina-home .home-noticias .cartao__corpo {
  gap: 0.38rem !important;
  padding: 0.65rem;
}

.pagina-home .cadastro {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr) minmax(130px, 0.36fr);
  min-height: 620px;
}
.pagina-home .cadastro__arte {
  min-height: 620px;
}
.pagina-home .cadastro__arte::after {
  background:
    linear-gradient(90deg, rgba(4, 7, 8, 0.08), rgba(11, 13, 16, 0.2) 58%, rgba(11, 13, 16, 0.96)),
    linear-gradient(to top, rgba(4, 7, 8, 0.8), transparent 55%);
}
.pagina-home .cadastro__arte--direita::after {
  background: linear-gradient(270deg, rgba(4, 7, 8, 0.14), rgba(11, 13, 16, 0.94));
}
.cadastro__informacoes {
  position: absolute;
  inset: clamp(1.8rem, 4vw, 3.2rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.cadastro__logo {
  width: auto;
  height: clamp(105px, 10vw, 150px);
}
.pagina-home .cadastro__lista {
  gap: 0.85rem;
  margin: 0;
}
.pagina-home .cadastro__lista li {
  color: var(--texto);
  font-size: 0.88rem;
  font-weight: 700;
}
.pagina-home .cadastro__conteudo {
  padding: clamp(1.8rem, 3vw, 3rem);
}
.pagina-home .cadastro__conteudo h2 {
  font-family: var(--fonte-texto);
  font-size: clamp(1.85rem, 2.6vw, 2.55rem);
  font-weight: 850;
  letter-spacing: -0.045em;
}
.cadastro__formulario {
  margin-top: 1.2rem;
}
.cadastro__formulario .campo {
  gap: 0.22rem;
  margin-bottom: 0.55rem;
}
.cadastro__formulario .campo > label:not(.escolha) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cadastro__formulario .campo input[type="text"],
.cadastro__formulario .campo input[type="email"],
.cadastro__formulario .campo input[type="password"] {
  min-height: 42px;
  padding: 0.68rem 0.85rem;
  background: color-mix(in srgb, var(--grafite-900) 70%, transparent);
}
.cadastro__formulario .campo__ajuda {
  display: none;
}
.cadastro__aceite {
  margin-block: 0.8rem !important;
}
.cadastro__aceite .escolha {
  font-size: 0.72rem;
  line-height: 1.45;
}
.cadastro__login {
  margin: 1.15rem 0 0;
  text-align: center;
  color: var(--texto-suave);
  font-size: 0.78rem;
}
.cadastro__autenticado {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .pagina-home .hero__indicadores {
    gap: 1.2rem;
  }
  .pagina-home .hero__indicadores li:nth-child(2) {
    display: none;
  }
  .home-jogos__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-torneios__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagina-home .home-noticias .grade-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagina-home .cadastro {
    grid-template-columns: 1.1fr 1fr;
  }
  .pagina-home .cadastro__arte--direita {
    display: none;
  }
}

@media (max-width: 760px) {
  .pagina-home .marca img {
    height: 48px;
  }
  .pagina-home .hero {
    min-height: 570px;
    align-items: flex-end;
  }
  .pagina-home .hero::before {
    background: linear-gradient(to top, var(--preto) 13%, rgba(4, 7, 8, 0.82) 58%, rgba(4, 7, 8, 0.35) 100%);
  }
  .pagina-home .hero__texto {
    max-width: none;
    padding-block: 8rem 2rem;
  }
  .pagina-home .hero h1 {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
  }
  .pagina-home .hero__indicadores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagina-home .hero__indicadores li:nth-child(2) {
    display: flex;
  }
  .home-jogos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-torneios__grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-ranking {
    min-height: 260px;
  }
  .pagina-home .cadastro {
    grid-template-columns: 1fr;
  }
  .pagina-home .cadastro__arte {
    min-height: 360px;
  }
  .pagina-home .cadastro__informacoes {
    inset: 1.5rem;
  }
  .pagina-home .cadastro__logo {
    height: 96px;
  }
}

@media (max-width: 520px) {
  .pagina-home .home-noticias .grade-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  .cadastro {
    grid-template-columns: 1fr;
  }
  .cadastro__arte {
    min-height: 220px;
  }
  .cadastro__arte--direita {
    display: none;
  }
}

/* ---------- Faixa de demonstração ---------------------------------------
   Aparece enquanto existir registro com slug `demo-`. Some sozinha quando o
   `seed_demonstracao --limpar` rodar. Não é decoração: é o que impede alguém
   de confundir exemplo com dado real.
   ---------------------------------------------------------------------- */
.faixa-demo {
  margin: 0;
  padding: 0.6rem 20px;
  text-align: center;
  font-size: 0.82rem;
  background: rgba(240, 169, 42, 0.14);
  border-bottom: 1px solid rgba(240, 169, 42, 0.35);
  color: var(--ambar);
}
.faixa-demo strong {
  color: var(--ambar);
}

/* =========================================================================
   Páginas internas: torneios, ranking, notícias, sobre e contato
   ========================================================================= */

/* ---------- Cabeçalho de página interna --------------------------------- */

.pagina-topo {
  border-bottom: 1px solid var(--linha);
  background: linear-gradient(180deg, var(--grafite-900), var(--preto));
  padding-block: clamp(2rem, 5vw, 3.2rem);
}
.pagina-topo h1 {
  margin-bottom: 0.3rem;
}
.pagina-topo p {
  margin: 0;
  color: var(--texto-suave);
  max-width: 54ch;
}

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

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.4rem;
}
/* A seção já tem respiro no topo; o primeiro filtro não precisa somar mais. */
.secao > .filtros:first-child {
  margin-top: 0;
}
.filtro {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 99px;
  border: 1px solid var(--linha-forte);
  color: var(--texto-suave);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.filtro:hover {
  color: var(--texto);
  border-color: var(--texto-fraco);
  text-decoration: none;
}
.filtro[aria-current="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--texto-no-verde);
}

/* ---------- Paginação ---------------------------------------------------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

/* ---------- Página do torneio ------------------------------------------- */

.torneio-topo {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  overflow: hidden;
}
.torneio-topo .figura,
.torneio-topo__capa {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.torneio-topo__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A capa vem do painel e pode ter qualquer proporção. Puxar o recorte para
     cima salva o rosto, que em capa de torneio fica quase sempre no terço
     superior. Recorte centralizado cortava a cabeça. */
  object-position: center 25%;
}
.torneio-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    var(--preto) 6%,
    rgba(4, 7, 8, 0.88) 42%,
    rgba(4, 7, 8, 0.45) 100%
  );
}
.torneio-topo__texto {
  padding-block: clamp(2rem, 5vw, 3rem);
}

.torneio-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
}
/* Item de grid nasce com `min-width: auto`, do tamanho do conteúdo. Sem isto a
   chave do mata-mata, que é larga de propósito, empurra a página inteira para o
   lado no celular em vez de rolar dentro da própria caixa. */
.torneio-corpo > * {
  min-width: 0;
}
@media (max-width: 900px) {
  .torneio-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
}

.painel {
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  background: var(--grafite-800);
  padding: 1.2rem;
}
.painel + .painel {
  margin-top: 1rem;
}
.painel__titulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0 0 0.9rem;
}

.dados {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}
.dados div {
  display: grid;
  gap: 0.15rem;
}
.dados dt {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.dados dd {
  margin: 0;
  font-size: 0.95rem;
}

.participantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.participantes li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9rem;
}
.participantes li:last-child {
  border-bottom: none;
}
.participantes .ordem {
  width: 1.6rem;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

/* ---------- Artigo ------------------------------------------------------- */

.artigo {
  max-width: 68ch;
  margin-inline: auto;
}
.prosa {
  font-size: 1.02rem;
  line-height: 1.75;
}
.prosa p {
  margin: 0 0 1.1em;
}
.prosa h2,
.prosa h3 {
  margin-top: 1.8em;
}
.prosa a {
  text-decoration: underline;
}
.prosa img {
  border-radius: var(--r-medio);
  margin-block: 1.6em;
}
.prosa ul,
.prosa ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}
.prosa li {
  margin-bottom: 0.4em;
}

.artigo__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 1.4rem;
}

/* ---------- Sobre e contato --------------------------------------------- */

.blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.bloco {
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  background: var(--grafite-800);
  padding: 1.3rem;
}
.bloco .icone {
  width: 32px;
  height: 32px;
  color: var(--verde);
  margin-bottom: 0.7rem;
}
.bloco h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.bloco p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.92rem;
}

/* =========================================================================
   Telas de conta: cadastro, login e recuperação de senha
   ========================================================================= */

.conta {
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px) 1fr;
  min-height: calc(100vh - var(--barra));
  border-bottom: 1px solid var(--linha);
}
.conta__arte {
  position: relative;
  overflow: hidden;
}
.conta__arte .figura {
  position: absolute;
  inset: 0;
}
.conta__arte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 8, 0.35), var(--preto));
}
.conta__arte--direita::after {
  background: linear-gradient(270deg, rgba(4, 7, 8, 0.35), var(--preto));
}
.conta__caixa {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.conta__caixa h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}
.conta__marca {
  margin-bottom: 1.4rem;
}
.conta__marca img {
  height: 62px;
  width: auto;
}
.conta__rodape {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linha);
  font-size: 0.9rem;
  color: var(--texto-suave);
}

@media (max-width: 1000px) {
  .conta {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .conta__arte {
    display: none;
  }
}

/* Lista de vantagens da tela de cadastro */
.vantagens {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
.vantagens li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.vantagens .icone {
  color: var(--verde);
}

/* ---------- Mensagens do sistema ---------------------------------------- */

.recados {
  list-style: none;
  margin: 0;
  padding: 1rem 20px 0;
  display: grid;
  gap: 0.6rem;
  max-width: var(--largura);
  margin-inline: auto;
}
.recado {
  border: 1px solid var(--linha-forte);
  border-left-width: 3px;
  border-radius: var(--r-pequeno);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  background: var(--grafite-800);
}
.recado--success {
  border-left-color: var(--verde);
}
.recado--error {
  border-left-color: var(--vermelho);
}
.recado--warning {
  border-left-color: var(--ambar);
}
.recado--info {
  border-left-color: var(--texto-fraco);
}

/* Erro que vale para o formulário inteiro, não para um campo */
.erros-do-formulario {
  border: 1px solid rgba(255, 92, 92, 0.35);
  background: rgba(255, 92, 92, 0.08);
  border-radius: var(--r-pequeno);
  padding: 0.8rem 1rem;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
  color: var(--vermelho);
}
.erros-do-formulario ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* ---------- Texto legal --------------------------------------------------- */

.legal {
  max-width: 72ch;
  margin-inline: auto;
}
.legal h2 {
  font-size: 1.35rem;
  margin-top: 2.2rem;
}
.legal .prosa {
  font-size: 0.98rem;
}

/* =========================================================================
   Área do jogador
   ========================================================================= */

.area {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
/* Item de grid nasce com `min-width: auto`, ou seja, do tamanho do conteúdo.
   Sem isso o menu que rola na horizontal empurra a página inteira para o lado
   no celular, em vez de rolar dentro da própria caixa. */
.area > * {
  min-width: 0;
}
@media (max-width: 860px) {
  .area {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
}

.area-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  position: sticky;
  top: calc(var(--barra) + 1rem);
}
@media (max-width: 860px) {
  /* No celular o menu vira uma fileira que rola de lado. O desenho está certo,
     mas faltava AVISAR que rola: o último item ficava cortado na borda e a
     tela parecia quebrada em vez de rolável. Visto em 2026-09-16, na Visão
     geral, onde "Registro" e "Retaguarda" ficam fora de vista. */
  .area > nav {
    position: relative;
  }
  /* A sombra na borda direita é o aviso. Ela não intercepta o toque. */
  .area > nav::after {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 2.2rem;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--preto));
  }
  .area-menu {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    /* Cada item para alinhado na borda em vez de meio cortado. */
    scroll-snap-type: x proximate;
    scrollbar-width: thin;
    padding-bottom: 0.4rem;
    /* Espaço para a sombra não cobrir o último item quando ele chega ao fim. */
    padding-right: 2.2rem;
  }
  .area-menu li {
    scroll-snap-align: start;
  }
}
.area-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-pequeno);
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.area-menu a:hover {
  background: var(--grafite-800);
  color: var(--texto);
  text-decoration: none;
}
.area-menu a[aria-current="page"] {
  background: rgba(74, 250, 66, 0.12);
  color: var(--verde);
}
.area-menu .icone {
  width: 18px;
  height: 18px;
}

/* ---------- Placas de número -------------------------------------------- */

.placas {
  display: grid;
  /* 132px e nao 110px: com 110 cabiam tres colunas num celular, e a etiqueta
     mais longa ("Inscrições abertas") quebrava em duas linhas enquanto as
     vizinhas ficavam em uma. Medido em 2026-09-16, na tela de 412px. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0.7rem;
}
.placa {
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  background: var(--grafite-800);
  padding: 0.9rem 1rem;
  /* 🔒 Os números descem para a base do cartão, e isso NÃO é enfeite: quando
     uma etiqueta quebra em duas linhas e a vizinha não, os números saem
     desalinhados e a fileira inteira parece torta. Com o `margin-top: auto`
     abaixo, eles ficam na mesma altura aconteça o que acontecer com o texto. */
  display: flex;
  flex-direction: column;
}
.placa dt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 0.25rem;
  /* Equilibra a quebra em vez de deixar uma palavra sozinha na segunda linha. */
  text-wrap: balance;
}
.placa dd {
  margin: 0.15rem 0 0;
  margin-top: auto;
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  /* ⚠️ `1` aqui está CERTO e não é descuido: esta linha só mostra algarismo, e
     algarismo não tem acento. A folga de 1.12 dos títulos existe para o Á e o
     Ã; cobrar ela aqui só afastaria o número da etiqueta sem motivo. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.placa--destaque dd {
  color: var(--verde);
}

/* ---------- Confronto ---------------------------------------------------- */

.confronto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  background: var(--grafite-800);
}
.confronto + .confronto {
  margin-top: 0.6rem;
}
.confronto__lado {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.confronto__lado--dele {
  flex-direction: row-reverse;
  text-align: right;
}
.confronto__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}
.confronto__placar {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-inline: 0.5rem;
}
.confronto__placar--vazio {
  font-family: var(--fonte-texto);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.confronto__contexto {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--texto-fraco);
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.confronto--vitoria {
  border-left: 3px solid var(--verde);
}
.confronto--derrota {
  border-left: 3px solid var(--vermelho);
}
.confronto--empate {
  border-left: 3px solid var(--texto-fraco);
}

@media (max-width: 560px) {
  .confronto {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    padding: 0.8rem;
  }
  .confronto__nome {
    font-size: 0.82rem;
  }
  .confronto__placar {
    font-size: 1.2rem;
  }
}

/* Linha destacada: a minha, dentro da tabela do grupo */
.tabela tr.eu {
  background: rgba(74, 250, 66, 0.07);
}
.tabela tr.eu td {
  font-weight: 600;
}

/* ---------- Ficha pública do jogador ------------------------------------ */

.ficha-jogador {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.ficha-jogador__foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--linha-forte);
  background: var(--grafite-700);
  display: grid;
  place-items: center;
  font-family: var(--fonte-titulo);
  font-size: 2rem;
  color: var(--texto-suave);
}

/* =========================================================================
   Painel administrativo

   Mesma paleta do site, densidade maior. Quem usa passa a tarde aqui
   organizando torneio, não está de passagem.
   ========================================================================= */

.painel-marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  /* 🔒 ESTA FOLGA SEGURA O ACENTO DO TÍTULO LOGO ABAIXO, e é a outra metade do
     conserto da regra de h1: o Á da Anton transborda 0.117 em acima da caixa da
     linha mesmo com `line-height: 1.12`, e não existe entre-linhas razoável que
     resolva isso. Quem encostar este valor em zero traz o problema de volta,
     e ele só aparece em palavra ACENTUADA. */
  margin-bottom: 1.5rem;
}

/* ---------- Roteiro do torneio ------------------------------------------
   A peça central do painel. A seção 36 do briefing pede que o organizador veja
   sempre em que etapa está e qual é a próxima ação; é isto.
   ---------------------------------------------------------------------- */

.roteiro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: etapa;
}

.etapa {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.85rem 0;
  position: relative;
}
.etapa + .etapa {
  border-top: 1px solid var(--linha);
}
.etapa__marca {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--linha-forte);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--texto-fraco);
  margin-top: 0.15rem;
  flex: none;
}
.etapa--feita .etapa__marca {
  border-color: var(--verde);
  background: var(--verde);
  color: var(--texto-no-verde);
}
.etapa--agora .etapa__marca {
  border-color: var(--verde);
  color: var(--verde);
  box-shadow: var(--brilho-verde);
}
.etapa__titulo {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.15rem;
}
.etapa--feita .etapa__titulo {
  color: var(--texto-suave);
}
.etapa--agora .etapa__titulo {
  color: var(--verde);
}
.etapa__descricao {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}
.etapa__acao {
  margin-top: 0.7rem;
}
.etapa--adiante .etapa__titulo,
.etapa--adiante .etapa__descricao {
  color: var(--texto-fraco);
}

.proxima-acao {
  border: 1px solid rgba(74, 250, 66, 0.35);
  background: rgba(74, 250, 66, 0.07);
  border-radius: var(--r-grande);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}
.proxima-acao__rotulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 0.4rem;
}
.proxima-acao h2 {
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}
.proxima-acao p {
  margin: 0 0 1rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.barra-progresso {
  height: 6px;
  border-radius: 99px;
  background: var(--grafite-600);
  overflow: hidden;
  margin-top: 0.8rem;
}
.barra-progresso span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--verde-limao), var(--verde));
}

/* ---------- Lista densa do painel --------------------------------------- */

.linhas {
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  background: var(--grafite-800);
  overflow: hidden;
}
.linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
}
.linha + .linha {
  border-top: 1px solid var(--linha);
}
.linha:hover {
  background: rgba(255, 255, 255, 0.02);
}
.linha__titulo {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}
.linha__meta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}
.linha__acoes {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 620px) {
  .linha {
    grid-template-columns: 1fr;
  }
  .linha__acoes {
    justify-content: flex-start;
  }
}

/* ---------- Grupos de campo no formulário do painel --------------------- */

.grupo-de-campos {
  border: 1px solid var(--linha);
  border-radius: var(--r-grande);
  background: var(--grafite-800);
  padding: 1.3rem;
  margin-bottom: 1.2rem;
}
.grupo-de-campos > legend,
.grupo-de-campos > .titulo-do-grupo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 1rem;
  padding: 0;
}
.campos-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 1rem;
}

/* ---------- Trilha de passos do formulário ------------------------------ */

.passos {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--texto-fraco);
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.passos b {
  color: var(--verde);
  font-weight: 600;
}

/* ---------- Registro de auditoria --------------------------------------- */

.registro {
  font-size: 0.85rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linha);
}
.registro:last-child {
  border-bottom: none;
}
.registro__quando {
  font-size: 0.76rem;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* Campo de placar do painel. Estreito de propósito: é número de um ou dois
   dígitos, e campo largo convida a digitar o que não é placar. */
.placar {
  width: 3.4rem;
  text-align: center;
  background: var(--grafite-900);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pequeno);
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  padding: 0.35rem 0.2rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.placar:focus {
  border-color: var(--verde);
  outline: none;
}
/* As setinhas de incremento roubam metade da largura do campo. */
.placar::-webkit-outer-spin-button,
.placar::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Chave do mata-mata ------------------------------------------- */
/* Uma coluna por fase. Cada confronto ocupa uma fatia igual da coluna, então o
   confronto da fase seguinte cai naturalmente no meio do par que o alimenta:
   é o alinhamento que faz a chave parecer chave, sem uma linha de JavaScript.

   No celular a chave rola na horizontal, como a seção 32 do briefing pede.
   Espremer uma chave de 8 em 360px destruiria a leitura. */
.chave-envelope {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.8rem;
  -webkit-overflow-scrolling: touch;
}
.chave {
  display: flex;
  gap: 36px;
  align-items: stretch;
  min-width: min-content;
  padding: 0.2rem 0;
}
.chave__coluna {
  display: flex;
  flex-direction: column;
  flex: 0 0 236px;
  min-width: 236px;
}
.chave__coluna--solta {
  flex: 0 0 auto;
  max-width: 280px;
}
.chave__fase {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 700;
}
.chave__fase-selo {
  color: var(--verde);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.chave__partida {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0.35rem 0;
}
.chave__cartao {
  width: 100%;
  background: var(--grafite-800);
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  padding: 0.55rem;
}
.chave__cartao--bye {
  border-style: dashed;
  background: transparent;
}

/* Os traços que ligam uma fase à seguinte. O horizontal sai de todo confronto;
   o vertical sai só do primeiro de cada par e desce até o segundo, que é
   exatamente a altura de uma fatia. */
.chave__coluna:not(:last-child) .chave__partida::after,
.chave__coluna:not(:first-child) .chave__partida::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--linha-forte);
}
.chave__coluna:not(:last-child) .chave__partida::after {
  right: -18px;
}
.chave__coluna:not(:first-child) .chave__partida::before {
  left: -18px;
}
.chave__coluna:not(:last-child) .chave__partida--liga .chave__ligacao {
  position: absolute;
  right: -18px;
  top: 50%;
  width: 2px;
  height: 100%;
  background: var(--linha-forte);
}
/* A coluna solta (disputa de 3º) não liga em nada. */
.chave__coluna--solta .chave__partida::after,
.chave__coluna--solta .chave__partida::before,
.chave__coluna--solta .chave__ligacao {
  display: none;
}

.chave__lado {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  position: relative;
  border-radius: var(--r-pequeno);
}
.chave__lado + .chave__lado {
  border-top: 1px solid var(--linha);
}
.chave__nome {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Quem venceu e quem caiu. Não é só cor: o vencedor fica em negrito e o
   eliminado perde opacidade, então a informação sobrevive em preto e branco. */
.chave__lado--venceu .chave__nome {
  color: var(--verde);
  font-weight: 700;
}
.chave__lado--caiu {
  opacity: 0.5;
}
.chave__lado--eu {
  background: color-mix(in srgb, var(--magenta) 14%, transparent);
}
.chave__placar {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  min-width: 1.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.chave__nota {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  color: var(--texto-suave);
}
.chave__cartao--bye .chave__nota {
  color: var(--verde);
}
.chave__acoes {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.placar--chave {
  width: 2.8rem;
  font-size: 1rem;
  padding: 0.2rem;
}
.botao--miudo {
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
}
.avatar--vazio {
  border-style: dashed;
  background: transparent;
}
.chave-terceiro {
  margin-top: 2rem;
}
/* Só aparece onde a chave não cabe inteira. Num monitor a dica seria ruído. */
.chave__dica {
  display: none;
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: var(--texto-fraco);
}
@media (max-width: 760px) {
  .chave__dica {
    display: block;
  }
}

@media (max-width: 640px) {
  .chave {
    gap: 28px;
  }
  .chave__coluna {
    flex-basis: 208px;
    min-width: 208px;
  }
}

/* ---------- Campeão ------------------------------------------------------ */
/* Seção 23 do briefing pede "uma experiência especial". Especial aqui é
   hierarquia, não fogos: o nome grande, o resto pequeno. */
.campeao {
  border: 1px solid var(--verde);
  border-radius: var(--r-grande);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--verde) 12%, var(--grafite-800)),
    var(--grafite-800) 60%
  );
  padding: 1.6rem;
  margin-bottom: 1.5rem;
}
.campeao__rotulo {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 700;
}
.campeao__nome {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.campeao__nome strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  /* 1.15, nao 1.05: o acento da Anton sobe 1.101 em. Ver a regra de h1. */
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.campeao__vice {
  margin: 0.7rem 0 0;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* ---------- Correção de resultado ---------------------------------------- */
/* O "de" e o "para" lado a lado. A alteração de placar é a informação central
   da tela da seção 24, e ela precisa ser lida sem procurar. */
.troca {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.troca__lado {
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  padding: 0.7rem 1.1rem;
  min-width: 8rem;
}
.troca__lado--novo {
  border-color: var(--verde);
}
.troca__rotulo {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 700;
}
.troca__placar {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  line-height: 1;
}
.troca__lado--novo .troca__placar {
  color: var(--verde);
}
.troca__seta {
  font-size: 1.4rem;
  color: var(--texto-fraco);
}

.efeitos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.efeitos li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.efeitos + .tabela-envelope {
  margin-top: 1rem;
}

.correcao__troca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
}
.correcao__motivo {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--texto-suave);
  border-left: 2px solid var(--linha-forte);
  padding-left: 0.6rem;
}
.correcao__efeito {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

/* ---------- Dobra (details) ---------------------------------------------- */
/* Explicação que a maioria não precisa ler, mas que não pode faltar para quem
   quer conferir a conta. Fechada por padrão para não competir com a tabela. */
.dobra {
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  background: var(--grafite-800);
  padding: 0.9rem 1.1rem;
}
.dobra > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--texto-suave);
  list-style: none;
}
.dobra > summary::-webkit-details-marker {
  display: none;
}
.dobra > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--verde);
  font-weight: 700;
}
.dobra[open] > summary::before {
  content: "\2212";
}
.dobra > summary:hover {
  color: var(--texto);
}
.dobra > summary:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

/* ---------- Editor de notícia -------------------------------------------- */
/* O campo de texto e a ajuda lado a lado. A ajuda fica visível enquanto a
   pessoa escreve: ninguém decora marcação, e quem escreve aqui não programa. */
.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .editor {
    grid-template-columns: minmax(0, 1fr);
  }
}
.editor__ajuda {
  border: 1px solid var(--linha);
  border-radius: var(--r-medio);
  background: var(--grafite-900);
  padding: 0.9rem 1rem;
}
.editor__titulo {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  font-weight: 700;
}
.editor__lista {
  margin: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.8rem;
}
.editor__lista dt {
  margin: 0;
}
.editor__lista dd {
  margin: 0.1rem 0 0;
  color: var(--texto-fraco);
}
.editor__lista code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  background: var(--grafite-700);
  border: 1px solid var(--linha);
  border-radius: var(--r-pequeno);
  padding: 0.1rem 0.35rem;
  color: var(--verde);
}

/* Texto de notícia já formatado. As tags aqui são as que `conteudo/formato.py`
   gera, e nenhuma outra: o texto do autor é escapado antes. */
.prosa h2 {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 2rem 0 0.8rem;
  letter-spacing: 0.01em;
}
.prosa ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
}
.prosa blockquote {
  margin: 1.4rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--verde);
  color: var(--texto-suave);
  font-size: 1.05rem;
}
.prosa strong {
  color: var(--texto);
}