/* #FORASHARK: preto e branco, pôster de rua.
   Duas fontes (Anton nos títulos, Inter no texto), cantos retos, estrutura feita de blocos
   preenchidos e degraus de tom em vez de linhas finas. Cada seção define suas cores
   (.escura / .clara) e os componentes usam as variáveis, então funcionam nos dois fundos. */
:root {
  --escuro: #0b0b0b;
  --claro: #fff;
  --tinta: #0b0b0b;
  --tinta-clara: #f5f5f5;

  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* seis tamanhos, bem separados */
  --t-gigante: clamp(4rem, 11vw, 9.5rem);
  --t-titulo: clamp(2.75rem, 6vw, 5rem);
  --t-cartaz: clamp(1.75rem, 3vw, 2.6rem);
  --t-grande: clamp(1.25rem, 1.8vw, 1.5rem);
  --t-base: 1.0625rem;
  --t-meta: .875rem;

  --margem: clamp(16px, 5vw, 72px);
  --largura: 1240px;
  /* margem real: a mesma no topo, nas seções e no rodapé, em qualquer largura */
  --borda-x: max(var(--margem), calc((100% - var(--largura)) / 2));
  --secao: clamp(88px, 11vw, 168px);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* Paletas por contexto */
body, .escura, .topo, .faixa, .rodape {
  --sup: #161616; --sup-2: #222; --sup-3: #2e2e2e;
  --apoio: #b8b8b8; --forte: #fff; --contra: #0b0b0b;
}
.clara, .hero, .dialogo {
  --sup: #f0f0f0; --sup-2: #e2e2e2; --sup-3: #d4d4d4;
  --apoio: #3d3d3d; --forte: #0b0b0b; --contra: #fff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 var(--t-base)/1.6 var(--texto);
  background: var(--escuro);
  color: var(--tinta-clara);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--display); line-height: .95; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: var(--t-titulo); margin-bottom: 24px; }
h2 { font-size: var(--t-titulo); margin-bottom: 40px; }
h3 { font: 800 var(--t-base)/1.3 var(--texto); }
p { margin: 0; text-wrap: pretty; }
code { font: inherit; font-weight: 600; }

/* Cursor: o cachorro da tropa (ponto do clique no nariz) */
html, body, *, *::before, *::after {
  cursor: url('/img/cursor.png') 22 41, auto !important;
  cursor: -webkit-image-set(url('/img/cursor.png') 1x, url('/img/cursor@2x.png') 2x) 22 41, auto !important;
}

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.pular {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--claro); color: var(--tinta); padding: 12px 16px; font-weight: 800;
}
.pular:focus { top: 12px; }

/* ---------- Botões: preenchidos, nome da ação ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 26px; border: 0; border-radius: 0;
  font: 800 var(--t-base)/1 var(--texto);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(2px); }
.btn-preto { background: var(--tinta); color: var(--claro); }
.btn-preto:hover { background: #2e2e2e; }
.btn-branco { background: var(--claro); color: var(--tinta); }
.btn-branco:hover { background: #e2e2e2; }
.btn-vazado, .btn-vazado-claro { background: var(--sup-2); color: inherit; }
.btn-vazado:hover, .btn-vazado-claro:hover { background: var(--forte); color: var(--contra); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.link-seta {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 24px;
  font-weight: 800; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.link-seta::after { content: '→'; transition: transform .2s var(--curva); }
.link-seta:hover::after { transform: translateX(4px); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 10px var(--borda-x);
  background: var(--escuro); color: var(--tinta-clara);
  view-transition-name: topo;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; font: var(--t-grande) var(--display); letter-spacing: .02em; }
.logo { border-radius: 50%; background: var(--claro); flex-shrink: 0; }
.menu { display: flex; justify-content: center; gap: 4px; }
.menu a { padding: 9px 14px; text-decoration: none; font-weight: 600; color: var(--apoio); transition: background-color .15s, color .15s; white-space: nowrap; }
.menu a:hover { color: var(--claro); background: var(--sup-2); }
.menu a[aria-current="page"] { background: var(--claro); color: var(--tinta); }
.topo-acoes { display: flex; gap: 8px; }
.btn-menu, .btn-som, .btn-conta {
  border: 0; padding: 10px 14px; font: 600 var(--t-meta)/1.2 var(--texto); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.btn-menu { display: none; background: var(--sup-2); color: var(--tinta-clara); }
.btn-som { background: var(--sup-2); color: var(--tinta-clara); }
.btn-menu:hover, .btn-som:hover { background: var(--claro); color: var(--tinta); }
.btn-som[aria-pressed="false"] span { color: var(--apoio); }
.btn-conta { background: var(--claro); color: var(--tinta); font-weight: 800; display: flex; gap: 8px; align-items: baseline; }
.btn-conta:hover { background: #e2e2e2; }
.btn-conta.logado { background: var(--sup-2); color: var(--tinta-clara); }
.btn-conta.logado span { color: var(--apoio); font-weight: 600; }
.btn-conta.logado:hover { background: var(--sup-3); }

/* ---------- Janela do nick ---------- */
.dialogo {
  border: 0; padding: 0; width: min(480px, calc(100vw - 32px));
  background: var(--claro); color: var(--tinta);
}
.dialogo[open] { animation: subir .28s var(--curva); }
.dialogo::backdrop { background: rgb(0 0 0 / .78); }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } }
.dialogo-corpo { padding: clamp(24px, 5vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.dialogo h2 { font-size: var(--t-cartaz); margin: 0; }
.dialogo label { font-weight: 800; margin-top: 8px; }
.dialogo input { padding: 15px 16px; border: 0; border-radius: 0; background: var(--sup); color: var(--tinta); font: inherit; }
.dialogo .acoes { margin-top: 8px; }
.ajuda, .nota { font-size: var(--t-meta); color: var(--apoio); }

/* ---------- Hero da página inicial ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 72px);
  background: var(--claro); color: var(--tinta);
  padding: clamp(24px, 4vw, 56px) var(--borda-x) clamp(56px, 7vw, 104px);
}
.hero-foto img { width: 100%; height: auto; animation: chegar .9s var(--curva) both; }
@keyframes chegar { from { opacity: 0; transform: scale(.96); } }
.hero-texto { max-width: 600px; display: flex; flex-direction: column; }
.lead { font-size: var(--t-grande); line-height: 1.45; margin-bottom: 28px; }

/* Contrato (CA) com botão de copiar */
.ca { display: flex; align-items: stretch; margin-top: 28px; background: var(--sup); min-width: 0; }
.ca-rotulo {
  display: flex; align-items: center; padding: 0 16px;
  background: var(--forte); color: var(--contra); text-decoration: none;
  font: 800 var(--t-meta) var(--texto); white-space: nowrap;
}
.ca-valor { flex: 1; min-width: 0; padding: 14px 16px; font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copiar {
  border: 0; background: var(--sup-2); color: inherit;
  padding: 0 18px; font: 800 var(--t-meta) var(--texto);
  transition: background-color .15s, color .15s;
}
.ca-copiar:hover, .ca-copiar.copiado { background: var(--forte); color: var(--contra); }
.ca-grande { margin: 28px 0 0; }
.ca-grande .ca-valor { font-size: var(--t-base); padding: 18px 20px; }

/* Faixa de bordões rolando (para no hover e fora da tela) */
.faixa { overflow: hidden; background: #000; color: var(--claro); padding: 20px 0; }
.faixa-trilho { display: flex; width: max-content; animation: rolar 70s linear infinite; }
.faixa:hover .faixa-trilho, .faixa.parada .faixa-trilho { animation-play-state: paused; }
.faixa span { font: var(--t-cartaz)/1 var(--display); text-transform: uppercase; white-space: nowrap; color: #8f8f8f; }
.faixa .faixa-tag { color: var(--claro); }
.faixa span::after { content: ''; display: inline-block; width: .32em; height: .32em; margin: 0 .75em; vertical-align: .3em; background: currentColor; }
@keyframes rolar { to { transform: translateX(-50%); } }

/* ---------- Seções ---------- */
.secao { padding: var(--secao) var(--margem); scroll-margin-top: 72px; }
.escura { background: var(--escuro); color: var(--tinta-clara); }
.clara { background: var(--claro); color: var(--tinta); }
.pagina-topo { padding-top: clamp(48px, 7vw, 104px); }
.pagina-app h1 { font-size: 2rem; margin-bottom: 20px; }
.conteudo { max-width: var(--largura); margin: 0 auto; }
.apoio { font-size: var(--t-grande); line-height: 1.45; color: var(--apoio); max-width: 46ch; }
.titulo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.titulo-linha h2 { margin: 0; }
.titulo-linha .link-seta { margin: 0; }

/* ---------- Placar #FORASHARK × #FICASHARK (número em cima, nome embaixo) ---------- */
.placar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 4px 0 28px; }
.placar-lado { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 20px; background: var(--sup); }
.placar-lado span { font-weight: 800; }
.placar-lado b { font: 400 var(--t-titulo)/1 var(--display); }
.placar-fora { background: var(--forte); color: var(--contra); }
.placar-barra { grid-column: 1 / -1; height: 12px; background: var(--sup-2); }
.placar-barra i { display: block; height: 100%; width: 50%; background: var(--forte); transition: width .8s var(--curva); }
.placar-agora { grid-column: 1 / -1; margin-top: 6px; }
.placar-grande .placar { margin-bottom: 12px; }
.placar-grande .placar-lado { padding: clamp(22px, 3vw, 36px); }
.placar-grande .placar-lado b { font-size: var(--t-gigante); }
.placar-rodadas, .moeda-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.moeda-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.placar-rodadas div, .moeda-stats div { display: flex; flex-direction: column-reverse; gap: 6px; background: var(--sup); padding: 20px; }
.placar-rodadas dt, .moeda-stats dt { font-size: var(--t-meta); color: var(--apoio); }
.placar-rodadas dd, .moeda-stats dd { margin: 0; font: 800 var(--t-cartaz)/1.05 var(--texto); white-space: nowrap; }

/* ---------- Página inicial ---------- */
.inicio-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .75fr); gap: 12px; align-items: stretch; }
.cartao-meme h2 { margin-bottom: 20px; }
.cartao { background: var(--sup); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; }
.cartao h2 { font-size: var(--t-cartaz); margin: 0; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.cartao .link-seta { margin-top: auto; padding-top: 24px; }
.cartao-sub { margin-top: 10px; color: var(--apoio); }
.cartao-sub b { color: var(--tinta-clara); }
.previa { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.previa li { background: var(--sup-2); padding: 10px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: entrar .25s ease-out both; }
.previa b { margin-right: 8px; }
.previa .vazio { background: transparent; padding: 0; color: var(--apoio); white-space: normal; }
.inicio-memes { display: flex; flex-direction: column; gap: 12px; }
.moeda-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.moeda-mini h2 { font-size: var(--t-gigante); margin-bottom: 16px; }
.moeda-mini-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.moeda-mini-acoes .ca { flex: 1 1 420px; margin: 0; }

/* Espalha a hashtag */
.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kit h2 { margin-bottom: 20px; }
.kit-acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.kit-item {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: clamp(20px, 3vw, 32px); border: 0; background: var(--sup); color: inherit;
  text-decoration: none; font: inherit;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.kit-item b { font: 400 var(--t-cartaz)/1 var(--display); text-transform: uppercase; }
.kit-item span { color: var(--apoio); font-weight: 600; }
.kit-item:hover { background: var(--sup-3); }
.kit-item:active { transform: translateY(2px); }
.kit-principal { background: var(--forte); color: var(--contra); }
.kit-principal span { color: inherit; opacity: .75; }
.kit-principal:hover { background: color-mix(in srgb, var(--contra) 16%, var(--forte)); }

/* ---------- Paredão ---------- */
.paredao-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.paredao-topo h1 { font-size: var(--t-gigante); margin-bottom: 16px; }
.relogio { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.relogio span { color: var(--apoio); font-weight: 600; }
.relogio b { font: 400 var(--t-titulo)/1 var(--display); padding: 0 .1em; transition: background-color .2s, color .2s; }
.relogio-mini b { font-size: var(--t-cartaz); }
.relogio.urgente b { background: var(--forte); color: var(--contra); }

.duelo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.duelo-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.versus { align-self: center; font: var(--t-cartaz) var(--display); text-transform: uppercase; color: var(--apoio); padding: 0 8px; }
.opcao {
  display: flex; flex-direction: column; gap: 20px; text-align: left;
  padding: clamp(24px, 3.5vw, 44px);
  border: 0; background: var(--sup); color: inherit;
  font: inherit;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.opcao:active:not(:disabled) { transform: scale(.985); }
.cartao .opcao { background: var(--sup-2); padding: 20px; gap: 14px; }
.opcao .nome { font: clamp(2.75rem, 6vw, 6rem)/.9 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.cartao .opcao .nome { font-size: var(--t-cartaz); }
.opcao .tag { font-weight: 800; margin-top: -8px; }
.opcao .placar-opcao { display: flex; align-items: baseline; gap: 12px; }
.opcao .placar-opcao b { font: 800 var(--t-cartaz)/1 var(--texto); }
.opcao .placar-opcao small { font-size: var(--t-base); color: var(--apoio); }
.opcao .barra { display: block; height: 14px; background: var(--sup-3); }
.opcao .barra i { display: block; height: 100%; width: 0; background: var(--forte); transition: width .7s var(--curva); }
.opcao:not(:disabled):hover { background: var(--sup-3); }
.opcao.escolhida { background: var(--forte); color: var(--contra); }
.opcao.escolhida .placar-opcao small { color: inherit; opacity: .7; }
.opcao.escolhida .barra { background: color-mix(in srgb, var(--contra) 20%, var(--forte)); }
.opcao.escolhida .barra i { background: var(--contra); }
.enq-status { margin-top: 20px; color: var(--apoio); min-height: 1.6em; }
.paredao-rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.paredao-rodape .enq-status { margin: 0; }

.paredao-baixo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.paredao-baixo .apoio { margin-bottom: 28px; }
.fila { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fila li { background: var(--sup); padding: 10px 16px; font: var(--t-grande) var(--display); text-transform: uppercase; transition: background-color .3s, color .3s; }
.fila li.atual { background: var(--forte); color: var(--contra); }
.resultados ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.resultados li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--sup); }
.resultados .vence { font-weight: 800; }
.resultados .perde { color: var(--apoio); }
.resultados small { font-size: var(--t-meta); color: var(--apoio); white-space: nowrap; }
.resultados li.vazio { background: transparent; padding: 0; color: var(--apoio); }

/* ---------- Chat (tela de uso: título menor) ---------- */
.chat-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.chat { display: flex; flex-direction: column; height: min(72vh, 680px); min-height: 480px; background: var(--sup); }
.chat-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--sup-2); }
.status { font-weight: 800; }
.eu { color: var(--apoio); font-size: var(--t-meta); }
.mensagens { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.mensagens li { padding: 5px 0; overflow-wrap: anywhere; animation: entrar .25s ease-out both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.mensagens .hora { font-size: var(--t-meta); color: #8f8f8f; margin-right: 10px; }
.mensagens .nick { font-weight: 800; margin-right: 8px; }
.mensagens .eu-msg .nick { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.mensagens .sistema { background: var(--sup-2); padding: 8px 12px; margin: 4px 0; color: #d6d6d6; }
.mensagens .privado { background: var(--claro); color: var(--tinta); padding: 8px 12px; margin: 4px 0; }
.mensagens .privado .hora { color: #6b6b6b; }
.mensagens .mencao { background: var(--sup-3); padding: 5px 10px; }
.form-msg { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: var(--sup-2); }
.linha { display: flex; gap: 8px; }
.linha input {
  flex: 1; min-width: 0; padding: 15px 16px;
  border: 0; border-radius: 0; background: var(--escuro); color: var(--tinta-clara);
  font: inherit;
}
.clara .linha input { background: var(--sup); color: var(--tinta); }
.linha input::placeholder { color: #8f8f8f; }
.clara .linha input::placeholder { color: #6b6b6b; }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.atalhos button {
  border: 0; background: var(--sup-3); color: inherit;
  padding: 6px 12px; font: 600 var(--t-meta) var(--texto);
  transition: background-color .15s, color .15s;
}
.atalhos button:hover { background: var(--forte); color: var(--contra); }
.erro { font-weight: 600; min-height: 1.3em; font-size: var(--t-meta); }
.lateral { display: flex; flex-direction: column; gap: 12px; }
.bloco { background: var(--sup); padding: 20px; }
.bloco h2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font: 800 var(--t-base)/1.3 var(--texto); text-transform: none; }
.contador { background: var(--forte); color: var(--contra); padding: 0 10px; }
.online { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; }
.online li { background: var(--sup-2); padding: 4px 10px; font-size: var(--t-meta); }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ranking li { display: flex; gap: 10px; padding: 8px 10px; background: var(--sup-2); }
.ranking li:first-child { background: var(--forte); color: var(--contra); font-weight: 800; }
.ranking .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking li.vazio { background: transparent; color: var(--apoio); padding: 0; font-weight: 400; }
.comandos { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.comandos div { display: grid; gap: 2px; padding: 10px 14px; background: var(--sup-2); }
.comandos dt { font-weight: 800; font-size: var(--t-meta); }
.comandos dd { margin: 0; color: var(--apoio); font-size: var(--t-meta); }
.bloco .nota { margin-top: 12px; }

/* ---------- Memes ---------- */
.memes-topo { padding-bottom: clamp(40px, 5vw, 64px); }
.memes-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.memes-cabeca > :not(.memes-cachorro) { grid-column: 1; }
.memes-cachorro { grid-column: 2; grid-row: 1 / span 3; width: auto; max-height: min(560px, 62vh); justify-self: end; }
.sub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.sub-nav a { background: var(--sup); padding: 12px 18px; font-weight: 800; text-decoration: none; transition: background-color .15s, color .15s; }
.sub-nav a:hover { background: var(--forte); color: var(--contra); }

/* Bordões: lista de pôster, com quem fala logo depois da frase */
.bordoes { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: clamp(32px, 5vw, 80px); }
.bordao { break-inside: avoid; margin: 0 0 clamp(28px, 3vw, 40px); }
.bordao p { font: var(--t-cartaz)/1.05 var(--display); text-transform: uppercase; }
.bordao span { color: var(--apoio); margin-left: .2em; }
.bordao:first-child { column-span: all; margin-bottom: clamp(36px, 5vw, 64px); }
.bordao:first-child p { font-size: var(--t-gigante); line-height: .9; }

.gifs { columns: 3 260px; column-gap: 12px; }
.gif { break-inside: avoid; margin: 0 0 12px; background: var(--sup); }
.gif a { display: block; }
.gif video { width: 100%; height: auto; background: var(--sup-2); }
.gif figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.gif figcaption span { font-size: var(--t-meta); color: var(--apoio); }
.gifs-destaque { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gifs-destaque .gif { margin: 0; }
.gifs-destaque video { aspect-ratio: 4 / 3; object-fit: cover; }
.credito { margin-top: 20px; font-size: var(--t-meta); color: var(--apoio); }

/* Clipes: miniatura em preto e branco, cor quando a pessoa passa o mouse */
.clipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 12px; }
.clipes-faixa { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.clipe h3 { margin: 16px 0 4px; }
.clipe p { font-size: var(--t-meta); color: var(--apoio); }
.clipe-tela, .clipe-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--sup); position: relative; overflow: hidden; }
.clipe-tela img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: transform .4s var(--curva), filter .4s ease; }
.clipe-tela:hover img, .clipe-tela:focus-visible img { transform: scale(1.04); filter: none; }
.clipe-play {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--claro); color: var(--tinta); padding: 10px 16px; font: 800 var(--t-meta) var(--texto);
  transition: background-color .15s, color .15s;
}
.clipe-play::before { content: '▶'; margin-right: 8px; }
.clipe-tela:hover .clipe-play { background: var(--tinta); color: var(--claro); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 48px; }
.galeria a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sup); }
.galeria img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.galeria a:hover img { transform: scale(1.04); }
.form-meme { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 32px; }
.form-meme label { font-weight: 600; }

.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.meme { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 220px; padding: 24px; background: var(--sup); }
.meme p { font: var(--t-cartaz)/1.05 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.meme footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.meme small { font-size: var(--t-meta); color: var(--apoio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meme button {
  border: 0; background: var(--sup-2); color: inherit;
  padding: 8px 14px; font: 800 var(--t-meta) var(--texto); flex-shrink: 0;
  transition: background-color .15s, color .15s, transform .15s;
}
.meme button:hover, .meme button.votado { background: var(--forte); color: var(--contra); }
.meme button:active { transform: scale(.94); }
.mural .meme:first-child { background: var(--forte); color: var(--contra); }
.mural .meme:first-child { grid-column: span 2; }
.mural .meme:first-child p { font-size: var(--t-titulo); }
.mural .meme:first-child small { color: inherit; opacity: .7; }
.mural .meme:first-child button { background: color-mix(in srgb, var(--contra) 18%, var(--forte)); }
.mural .meme:first-child button:hover, .mural .meme:first-child button.votado { background: var(--contra); color: var(--forte); }

/* Memes em alta (página inicial): lista grande, não cartões */
.memes-top { list-style: none; margin: 0 0 clamp(32px, 4vw, 56px); padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vw, 24px); }
.meme-linha { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.meme-linha p { font: var(--t-titulo)/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.meme-linha:first-child p { font-size: var(--t-gigante); }
.meme-linha footer { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.meme-linha small { color: var(--apoio); }
.meme-linha button {
  border: 0; background: var(--sup-2); color: inherit;
  padding: 10px 16px; font: 800 var(--t-meta) var(--texto);
  transition: background-color .15s, color .15s, transform .15s;
}
.meme-linha button:hover, .meme-linha button.votado { background: var(--forte); color: var(--contra); }
.meme-linha button:active { transform: scale(.94); }
.moeda-stats-livres div { background: none; padding: 0; }
.moeda-stats-livres dd { font-size: var(--t-titulo); }

/* ---------- Fábrica de pôsteres ---------- */
.fabrica { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fabrica-tela { display: flex; justify-content: center; background: var(--sup); padding: clamp(12px, 2vw, 24px); }
.fabrica-tela canvas { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; }
.fabrica fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.fabrica legend { font-weight: 800; margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  border: 0; background: var(--sup-2); color: inherit;
  padding: 9px 14px; font: 600 var(--t-meta) var(--texto);
  transition: background-color .15s, color .15s, transform .15s;
}
.chips button:hover { background: var(--sup-3); }
.chips button:active { transform: scale(.96); }
.chips button[aria-pressed="true"] { background: var(--forte); color: var(--contra); }
.fabrica .acoes { margin-top: 8px; }
.prontos { margin-top: clamp(64px, 8vw, 120px); }
.posteres-prontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.poster-pronto { margin: 0; }
.poster-pronto img { width: 100%; height: auto; background: var(--sup); }
.poster-pronto figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; }
.poster-pronto figcaption span { font-size: var(--t-meta); color: var(--apoio); }
.poster-pronto .btn { padding: 10px 14px; font-size: var(--t-meta); }

/* ---------- Jogo Corre, tropa! ---------- */
.jogo-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.jogo-topo .apoio { max-width: 52ch; }
.jogo-numeros { display: flex; gap: 8px; margin: 0; }
.jogo-numeros div { display: flex; flex-direction: column-reverse; gap: 4px; background: var(--sup); padding: 14px 18px; min-width: 130px; }
.jogo-numeros dt { font-size: var(--t-meta); color: var(--apoio); }
.jogo-numeros dd { margin: 0; font: 800 var(--t-cartaz)/1 var(--texto); }
.jogo { background: var(--sup); padding: clamp(8px, 1.5vw, 16px); }
.jogo canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 420; background: var(--claro); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.jogo canvas:focus { outline: none; }
.jogo canvas:focus-visible { outline: 3px solid var(--forte); outline-offset: 3px; }
.jogo-controles { display: none; gap: 8px; margin-top: 8px; }
.jogo-controles .btn { flex: 1; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.jogo-ajuda { margin-top: 12px; }
.jogo-salvar { padding: 8px 14px; font-size: var(--t-meta); margin-left: 4px; }
.link-botao { border: 0; padding: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: none), (max-width: 720px) {
  .jogo-controles { display: flex; }
}
@media (max-width: 720px) {
  .jogo-numeros div { min-width: 0; }
}

/* o jogo embaixo do "Votar agora", na página inicial */
.jogo-inicio { padding-top: clamp(24px, 3vw, 40px); }
.jogo-inicio-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 20px; }
.jogo-inicio-topo h2, .jogo-inicio-topo .apoio { margin: 0; }

/* ---------- Top 10 do jogo ---------- */
.top10-secao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.top10-inicio { margin-top: clamp(32px, 4vw, 56px); }
.top10-inicio h3 { font: 400 var(--t-cartaz)/1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.top10-voce { margin: 12px 0 16px; font-weight: 600; }
.top10 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 6px clamp(12px, 2vw, 24px); }
.top10 li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 16px; background: var(--sup); }
.top10-pos { font: 400 var(--t-grande)/1 var(--display); }
.top10-nick { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-pontos { font-weight: 800; font-variant-numeric: tabular-nums; }
.top10 li:first-child:not(.vaga) { background: var(--forte); color: var(--contra); }
.top10 li.vaga { color: var(--apoio); }
.top10 li.vaga .top10-nick { font-weight: 600; }
.top10 li.eu { outline: 3px solid var(--forte); outline-offset: -3px; }
.top10 li.eu:first-child { outline-color: var(--sup-3); }
@media (max-width: 900px) {
  .top10-secao { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .top10 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 4px; }
  .top10 li { padding: 10px 14px; }
}

/* ---------- Meme da vez (sorteado a cada página aberta) ---------- */
.meme-aleatorio { margin: 0; }
.meme-aleatorio img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; background: var(--sup-2); }
.meme-aleatorio figcaption { margin-top: 10px; font-size: var(--t-meta); color: var(--apoio); }
.paredao-meme { margin-top: 32px; max-width: 360px; }
.nao-achou-grid .meme-aleatorio { width: min(360px, 100%); }
.nao-achou-grid .meme-aleatorio img { max-height: none; width: 100%; }

/* ---------- Moeda ---------- */
.moeda-topo { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); margin-bottom: 32px; }
.moeda-poster { width: clamp(120px, 16vw, 220px); height: auto; flex-shrink: 0; }
.moeda-topo h1 { font-size: var(--t-gigante); margin-bottom: 28px; }
.moeda-acoes { margin-top: 28px; }
.curva { margin-top: 24px; }
.curva-topo { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; }
.curva-barra { height: 16px; margin: 10px 0; background: var(--sup-2); }
.curva-barra i { display: block; height: 100%; width: 0; background: var(--forte); transition: width .8s var(--curva); }
.curva-texto { color: var(--apoio); font-size: var(--t-meta); }
.grafico { margin-top: 32px; height: 480px; background: var(--sup); }
.grafico iframe { width: 100%; height: 100%; border: 0; display: block; }
.atualizado { margin-top: 10px; font-size: var(--t-meta); color: #8f8f8f; }
.moeda-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.moeda-grid > div { padding: clamp(24px, 3vw, 40px); background: var(--sup); }
.moeda-grid h2 { font-size: var(--t-cartaz); margin-bottom: 24px; }
.passos { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; }
.passos li::marker { font-weight: 800; }
.passos code { background: var(--sup-2); padding: 1px 6px; }
.moeda-grid > .riscos { background: var(--forte); color: var(--contra); }
.riscos ul { margin: 0 0 20px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 12px; }
.riscos .nota { color: inherit; opacity: .75; }

/* ---------- Sobre ---------- */
.sobre { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(32px, 6vw, 96px); align-items: start; }
.sobre h1 { grid-column: 1 / -1; margin-bottom: clamp(32px, 4vw, 56px); }
.sobre-foto { width: 100%; height: auto; }
.texto-grande { font-size: var(--t-grande); line-height: 1.5; margin-bottom: 40px; }
.principios { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.principios div { border-left: 6px solid currentColor; padding: 2px 0 2px 20px; }
.principios dt { font-weight: 800; }
.principios dd { margin: 4px 0 0; color: var(--apoio); }
.regras-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.regras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.regras li { background: var(--sup); padding: 22px 24px; }
.regras li:first-child { background: var(--forte); color: var(--contra); }
.regras li:first-child p { color: inherit; opacity: .75; }
.regras p { margin-top: 6px; color: var(--apoio); }
.canais { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.canal h3 { font: var(--t-titulo)/1 var(--display); text-transform: uppercase; margin-bottom: 16px; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.links a {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 3vw, 36px); background: var(--sup); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.links a b { font: 400 var(--t-cartaz)/1 var(--display); text-transform: uppercase; }
.links a span { font-weight: 600; color: var(--apoio); }
.links a:hover { background: var(--forte); color: var(--contra); }
.links a:hover span { color: inherit; opacity: .75; }

/* ---------- 404 e sem internet ---------- */
.nao-achou-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); align-items: center; }
.nao-achou-grid img { max-height: 62vh; width: auto; }
.nao-achou-grid .acoes { margin-top: 32px; }

/* ---------- Rodapé: o nome volta no fim ---------- */
.rodape { background: #000; padding: 56px var(--margem) 40px; color: var(--apoio); }
.rodape-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.rodape p { max-width: 62ch; font-size: var(--t-base); line-height: 1.65; margin-top: 18px; }
.rodape .marca { color: var(--claro); }
.rodape-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rodape-links a { color: var(--tinta-clara); font-weight: 600; text-decoration: none; }
.rodape-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape .rodape-nome {
  max-width: none; margin: 56px 0 0; color: var(--claro);
  font: 400 clamp(3.5rem, 17.5vw, 19rem)/.82 var(--display); letter-spacing: -.01em;
  text-align: center; white-space: nowrap; overflow: hidden;
}

/* ---------- Aviso rápido e instalar ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 140%); opacity: 0;
  max-width: calc(100vw - 32px); padding: 14px 20px;
  background: var(--claro); color: var(--tinta); font-weight: 800;
  transition: transform .3s var(--curva), opacity .3s;
  pointer-events: none;
}
.aviso.visivel { transform: translate(-50%, 0); opacity: 1; }
.btn-instalar { margin-top: 8px; padding: 12px 18px; font-size: var(--t-meta); }

/* ---------- Movimento (só com a classe .anima, ligada pelo script) ---------- */
/* Títulos sobem por trás de uma máscara */
.anima h1 { animation: mascara .9s var(--curva) both; }
@keyframes mascara {
  from { clip-path: inset(100% -5% -25% -5%); }
  to { clip-path: inset(-25% -5% -25% -5%); }
}
/* Partes de cada seção entram em sequência */
.anima [data-revelar] > :not(h1) { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.anima [data-revelar].visto > * { opacity: 1; transform: none; }
.anima [data-revelar].visto > :nth-child(2) { transition-delay: 80ms; }
.anima [data-revelar].visto > :nth-child(3) { transition-delay: 160ms; }
.anima [data-revelar].visto > :nth-child(n + 4) { transition-delay: 240ms; }
/* Itens de listas, um depois do outro */
.anima [data-revelar] .em-sequencia > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--curva), transform .5s var(--curva), background-color .18s ease, color .18s ease;
}
.anima [data-revelar].visto .em-sequencia > * { opacity: 1; transform: none; transition-delay: calc(min(var(--i, 0), 10) * 70ms + 120ms); }
.anima [data-revelar].pronto > *, .anima [data-revelar].pronto .em-sequencia > * { transition-delay: 0s; }

/* ---------- Transição entre páginas (navegadores que suportam) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both sair-pagina; }
::view-transition-new(root) { animation: .32s var(--curva) both entrar-pagina; }
@keyframes sair-pagina { to { opacity: 0; transform: translateY(-12px); } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .topo { grid-template-columns: minmax(0, 1fr) auto; }
  .menu { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 1200px) {
  .inicio-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .cartao-meme { grid-column: 1 / -1; }
  .cartao-meme .meme-aleatorio { max-width: 360px; }
}
@media (max-width: 960px) {
  .hero, .sobre, .regras-wrap, .paredao-baixo, .inicio-grid, .moeda-mini, .canais, .rodape-grid, .kit,
  .chat-grid, .moeda-grid, .fabrica { grid-template-columns: minmax(0, 1fr); }
  .hero-texto { max-width: none; }
  .sobre-foto { max-width: 520px; margin-bottom: 40px; }
  .canais { row-gap: 80px; }
  .placar-rodadas, .moeda-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moeda-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grafico { height: 400px; }
  .gifs-destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gifs-destaque .gif:nth-child(3) { display: none; }
  .meme-linha { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 720px) {
  /* topo numa linha só; as páginas abrem no botão Menu */
  .btn-menu { display: inline-flex; align-items: center; }
  .menu { display: none; }
  .topo.aberto .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-bottom: 10px; }
  .topo.aberto .menu a { padding: 12px 14px; background: var(--sup); }
  .topo.aberto .menu a[aria-current="page"] { background: var(--claro); }
  .btn-som span { display: none; }
  /* primeira tela: pôster menor para título, frase, placar e o botão de votar caberem */
  .hero-foto img { width: min(100%, 280px); margin: 0 auto; }
  .paredao-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .relogio { align-items: flex-start; }
  /* duelo lado a lado também no celular */
  .duelo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .versus { display: none; }
  .opcao { padding: 16px; gap: 14px; }
  .opcao .nome { font-size: clamp(1.4rem, 7vw, 2.6rem); }
  .opcao .placar-opcao { flex-direction: column; gap: 4px; }
  .mural .meme:first-child { grid-column: auto; }
  .memes-cabeca { grid-template-columns: minmax(0, 1fr); }
  .memes-cachorro { display: none; }
  .moeda-topo { flex-direction: column; align-items: flex-start; }
  .nao-achou-grid { grid-template-columns: minmax(0, 1fr); }
  .nao-achou-grid img { max-height: 40vh; }
}
@media (max-width: 480px) {
  .hero { padding-top: 16px; }
  .hero-foto img { width: 200px; }
  .btn-menu, .btn-som, .btn-conta { padding: 10px; }
  .marca { gap: 8px; }
  .moeda-stats, .moeda-stats-3, .placar-rodadas, .gifs-destaque, .kit-acoes { grid-template-columns: minmax(0, 1fr); }
  .gifs-destaque .gif:nth-child(3) { display: block; }
  .placar-lado { padding: 14px 16px; }
  .linha { flex-wrap: wrap; }
  .linha .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}