:root {
  /* Asfalto e concreto, com dois sprays. O laranja de antes era o mesmo de
     qualquer painel administrativo; verde-acido e magenta sao paleta de
     adesivo de skate, que e o que o STFU quer parecer.
     Todo lugar que usa --acento como FUNDO ja punha texto escuro por cima,
     entao a troca nao criou nenhum contraste ruim — foi conferido antes. */
  --fundo: #0f1014;
  --painel: #191b21;
  --borda: #2e323c;
  --texto: #f2f0e9;
  --fraco: #8d8f99;
  --acento: #c6f04e;
  --acento2: #ff2d90;
  --fita: #d8c79b;
  --ok: #3ecf8e;
  --perigo: #e05561;

  --textura-spray: url(build/textura/spray.jpg);

  /* O neon do texto em uma variavel so: usado no botao, no titulo e na marca,
     e assim os tres acendem iguais. */
  --brilho: 0 0 4px rgba(198, 240, 78, 0.95), 0 0 11px rgba(198, 240, 78, 0.68),
    0 0 26px rgba(198, 240, 78, 0.38), 0 1px 2px rgba(0, 0, 0, 0.85);
  --brilho-forte: 0 0 5px rgba(198, 240, 78, 1), 0 0 14px rgba(198, 240, 78, 0.9),
    0 0 34px rgba(198, 240, 78, 0.55), 0 1px 2px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}

/* ---- barra de abas (um jogo por aba) ---- */
.barra {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 38px;
  padding: 0 8px;
  background: #0b0c11;
  border-bottom: 1px solid var(--borda);
}

/* fonte do grafite, embutida por ferramentas/gerar-logo.js */
@font-face {
  font-family: "Tag";
  src: url("build/tag.woff2") format("woff2");
  font-display: swap;
}

.marca {
  align-self: center;
  font-family: "Tag", "Segoe UI", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.5px;
  transform: rotate(-2deg);
  margin: 0 10px 0 2px;
  padding-bottom: 2px;
}

/* `min-width: 0` e o que permite as abas ENCOLHEREM.
   Sem ele, um item flex nunca fica menor que o proprio conteudo: as abas
   empurravam o resto da barra e o placar tomava o lugar delas. Com a janela em
   meia tela, sobrava um scroll de dois centimetros para todas as abas. */
.abas { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; min-width: 0; flex: 1 1 auto; }

.aba {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--borda);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  background: #161923;
  color: var(--fraco);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.aba:hover { color: var(--texto); }
.aba.ativa { background: var(--painel); color: var(--texto); border-color: var(--acento); font-weight: 600; }

/* pontinho: cinza = nao carregado, verde = rodando, laranja = com bot ligado */
.aba .luz { width: 7px; height: 7px; border-radius: 50%; background: #3a3f4f; flex: none; }
.aba .luz.viva { background: var(--ok); }
.aba .luz.bot { background: var(--acento); }

.aba-mais { align-self: center; }

/* ---- barra de ferramentas do jogo ativo ---- */
.ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  background: #12141b;
  border-bottom: 1px solid var(--borda);
}

/* display:flex vence o [hidden] do navegador — precisa dizer de novo */
.ferramentas[hidden] { display: none; }

.grupo { display: flex; gap: 4px; }

.btn {
  background: #1d2029;
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 4px 9px;
  font: inherit;
  cursor: pointer;
}
.btn:hover { background: #262a36; }
.btn.ativo { background: var(--acento); border-color: var(--acento); color: #10121a; font-weight: 600; }
.btn.perigo { color: var(--perigo); }
.btn.perigo:hover { background: var(--perigo); color: #10121a; }
/* O botao principal e uma pincelada de spray com a letra acesa por cima.
   A tinta e escurecida de proposito: a pincelada nao e uniforme, e letra
   escura sobre ela sumia justamente nos trechos sem tinta. Invertido, o
   contraste deixa de depender de onde o spray caiu. */
.btn.primario {
  position: relative;
  background: none;
  border: 0;
  color: #fdffe9;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: var(--brilho);
  /* canto cortado na diagonal, como estencil — nao pilula */
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  border-radius: 0;
}
.btn.primario::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--textura-spray) center/cover no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.2) brightness(0.42);
  z-index: -1;
}
.btn.primario::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(6, 8, 4, 0.5), rgba(6, 8, 4, 0.78));
  z-index: -1;
}
.btn.primario:hover { color: #fff; text-shadow: var(--brilho-forte); }
.btn.primario:hover::before { filter: saturate(1.45) brightness(0.62); }

/* Perigo tambem e spray, mas vermelho: manter um botao "de sistema" no meio
   dos outros denunciaria a colagem. */
.btn.perigo {
  position: relative;
  background: none;
  border: 0;
  color: #fff2f0;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(224, 85, 97, 0.95), 0 0 12px rgba(224, 85, 97, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.85);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  border-radius: 0;
}
.btn.perigo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--textura-spray) center/cover no-repeat;
  mix-blend-mode: screen;
  filter: hue-rotate(285deg) saturate(1.5) brightness(0.42);
  z-index: -1;
}
.btn.perigo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 4, 4, 0.5), rgba(10, 4, 4, 0.78));
  z-index: -1;
}

.url { display: flex; gap: 4px; flex: 1; min-width: 120px; }
.url input {
  flex: 1;
  background: #1d2029;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 4px 8px;
  font: inherit;
  user-select: text;
}

/* ---- palcos: um por jogo, todos vivos, so o ativo visivel ---- */
.palcos { height: calc(100% - 76px); position: relative; }

.palco {
  display: grid;
  gap: 6px;
  padding: 6px;
  position: absolute;
  inset: 0;
}
.palco[hidden] { display: none; }

/* ---- canto superior direito: doar + perfil ---- */
.canto { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* O BOTÃO DE APOIAR, no topo.

   Era um botão comum com o texto rosa — pedia dinheiro sussurrando, no meio de
   controles que ninguém olha. Agora é a mesma peça do botão grande da página
   inicial do site, reduzida: base escura, tampa verde acesa, miolo fundo e o
   coração de pixel. Quem viu um reconhece o outro, e as duas portas levam à
   mesma tela.

   Verde e não vermelho: o vermelho da marca já é o sangue do logo. O verde
   aqui é o verde de placa acesa, e o coração vermelho é o contraste que sobra.

   É o único elemento do topo que se move. Se dois pulsassem, nenhum chamaria
   atenção. */
.btn.doar {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px; /* a borda de acrílico da tampa */
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #7bffc0, #16a35d 48%, #0b5c34);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 3px 0 -1px #0a2f1c,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(24, 214, 106, 0.35);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.btn.doar[hidden] { display: none; }
/* O miolo escuro: letra branca sobre verde claro perde contraste. */
.doar-miolo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(6, 46, 27, 0.6), rgba(3, 24, 14, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -4px 10px rgba(0, 0, 0, 0.45);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 8px rgba(120, 255, 190, 0.7);
}
/* O coração é de pixel de propósito: o programa fala com quem joga jogo de
   navegador, e o pixel é o sotaque desse lugar. */
.btn.doar .doar-coracao {
  flex: none;
  color: #ff2d3f;
  filter: drop-shadow(0 0 6px rgba(255, 45, 63, 0.8));
  animation: bate-coracao 2.6s ease-in-out infinite;
}
@keyframes bate-coracao {
  0%, 62%, 100% { transform: scale(1); }
  70% { transform: scale(1.22); }
  78% { transform: scale(1); }
  86% { transform: scale(1.14); }
}
/* Sobe um fio e acende no passar do mouse; afunda até a base no clique. É um
   botão físico sendo apertado. */
.btn.doar:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 0 -1px #0a2f1c,
    0 7px 16px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(24, 214, 106, 0.6);
}
.btn.doar:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 1px 0 -1px #0a2f1c,
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(24, 214, 106, 0.45);
}
.btn.doar:focus-visible { outline: 2px solid #7bffc0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn.doar .doar-coracao { animation: none; }
  .btn.doar { transition: none; }
}

.perfil-botao {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: #1d2029;
  color: var(--texto);
  cursor: pointer;
  font: 700 12px "Segoe UI", system-ui, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
}
.perfil-botao:hover { border-color: #454a55; }
.perfil-botao img { width: 100%; height: 100%; object-fit: cover; }

.painel-perfil {
  position: absolute;
  top: 44px;
  right: 10px;
  z-index: 30;
  width: 250px;
  background: #12141b;
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.painel-perfil[hidden] { display: none; }
.perfil-topo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.perfil-topo img { width: 40px; height: 40px; border-radius: 50%; background: #1d2029; }
.perfil-topo strong { display: block; font-size: 14px; }
.perfil-topo span { color: var(--fraco); font-size: 11px; }

.perfil-dados { display: grid; gap: 8px; margin: 0 0 14px; }
.perfil-dados div { display: flex; justify-content: space-between; align-items: baseline; }
.perfil-dados dt { color: var(--fraco); font-size: 12px; margin: 0; }
.perfil-dados dd { margin: 0; font-size: 13px; font-weight: 600; }

.perfil-acoes { display: grid; gap: 6px; }
.perfil-acoes .btn { width: 100%; text-align: left; }

/* ---- tela Início ---- */
.inicio {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 0 0 48px;
  background: #000;
}
.inicio[hidden] { display: none; }

.capa {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 44px 20px 38px;
  border-bottom: 1px solid var(--borda);
  background: radial-gradient(70% 130% at 50% 0%, #15171d 0%, #000 70%);
}
.capa-logo { width: 260px; max-width: 62%; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12)); }
.capa-frase { margin: 0; color: var(--fraco); font-size: 13px; letter-spacing: 0.04em; }

.colunas-inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px;
  padding: 30px 38px 0;
  align-items: start;
}
@media (max-width: 1100px) {
  .colunas-inicio { grid-template-columns: 1fr; }
}

.secao-cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.inicio h2 {
  font-family: "Tag", "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
}
.espaco-topo { margin-top: 28px !important; }

.busca { margin-left: auto; }
.busca input {
  width: 260px;
  background: #101216;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  padding: 8px 12px;
  font: inherit;
  user-select: text;
}
.busca input:focus { outline: none; border-color: #454a55; }

/* A LARGURA NAO MUDA — o ganho vem da ALTURA.

   Tentei alargar para 210px "porque agora cabe", e medi: a fileira caiu de 6
   para 5 jogos numa janela de 1400px. Num catalogo de 65 jogos isso e trocar
   densidade por tamanho de capa, e quem esta procurando um jogo quer ver mais
   jogos. Mantida a largura: o cartao perdeu 60px de altura sozinho, entao ja
   cabe mais fileira na tela sem custar nada. */
.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

/* cartão = capa grande, nome embaixo, botão de RMT no rodapé */
.jogo-cartao {
  display: flex;
  flex-direction: column;
  background: #0c0e12;
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.14s, border-color 0.14s;
}
.jogo-cartao:hover { transform: translateY(-3px); border-color: #454a55; }

.capa-jogo {
  position: relative;
  aspect-ratio: 3 / 4;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #14161c;
  display: block;
  width: 100%;
}
.capa-jogo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa-jogo .inicial {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: "Tag", "Segoe UI", sans-serif;
  font-size: 44px;
  color: #fff;
  opacity: 0.9;
}
.capa-jogo:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.capa-jogo .marcador {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--ok);
  color: var(--ok);
  font: 700 10px "Segoe UI", sans-serif;
  padding: 2px 7px;
  border-radius: 20px;
}
.capa-jogo .categoria {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--borda);
  color: var(--fraco);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}

.jogo-corpo { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* Altura travada em duas linhas: sem isto, um nome comprido empurra o resto do
   cartão para baixo e desalinha a fileira toda. */
.jogo-corpo h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
/* A DESCRIÇÃO, AGORA SOBRE A CAPA.

   Sobe do pé da arte quando o ponteiro chega — ou quando o foco do teclado
   entra no cartão, que é a mesma coisa para quem não usa mouse. Fora daí ela
   fica transparente e sem receber clique, mas CONTINUA no documento: leitor de
   tela lê, busca do navegador acha. Escondê-la com display:none a apagaria
   para quem mais depende dela. */
.capa-jogo .capa-descricao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 30px 12px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #dfe3ea;
  text-align: left;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, rgba(8, 9, 12, 0.88) 38%, rgba(8, 9, 12, 0.97) 100%);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.jogo-cartao:hover .capa-descricao,
.jogo-cartao:focus-within .capa-descricao {
  opacity: 1;
  transform: none;
}
/* A etiqueta de gênero sai de cena junto: as duas moram no mesmo canto do pé
   da capa, e sobrepostas ficam ilegíveis. */
.jogo-cartao:hover .capa-jogo .categoria,
.jogo-cartao:focus-within .capa-jogo .categoria { opacity: 0; }
.capa-jogo .categoria { transition: opacity 0.16s ease; }

.botao-rmt {
  background: #16181f;
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--fraco);
  font: 600 11px "Segoe UI", sans-serif;
  padding: 6px 9px;
  cursor: pointer;
  text-align: center;
}
.botao-rmt:hover { color: #fff; border-color: #454a55; background: #1c1f27; }

/* ---- notícias e chats ---- */
.novidades { display: grid; gap: 10px; }
.novidade {
  background: #0c0e12;
  border: 1px solid var(--borda);
  border-left: 3px solid #2b2f38;
  border-radius: 10px;
  padding: 13px 15px;
}
.novidade.patch { border-left-color: var(--ok); }
.novidade.aviso { border-left-color: var(--acento); }
.novidade .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4a4f5a;
  margin-bottom: 6px;
}
.novidade h4 { margin: 0 0 5px; font-size: 13px; }
/* A novidade preserva quebra de linha. Um texto que explica o programa inteiro
   precisa de estrutura; sem isto vira um paragrafo unico de trinta linhas. */
.novidade p {
  margin: 0;
  color: var(--fraco);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;
}

.chats { display: grid; gap: 7px; margin-top: 14px; }
.chat-linha {
  display: grid;
  gap: 2px;
  text-align: left;
  background: #0c0e12;
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 10px 13px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
}
.chat-linha:hover { border-color: #454a55; background: #12151b; }
.chat-nome { font-weight: 700; font-size: 13px; }
.chat-desc { color: var(--fraco); font-size: 11.5px; }
.aviso-chat { color: #4a4f5a; font-size: 11px; margin: 4px 0 0; }

.inicio-rodape { margin-top: 26px; color: #4a4f5a; font-size: 12px; }
.ligacao {
  background: none;
  border: none;
  color: var(--texto);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.ligacao:hover { color: #fff; }

/* a aba Início não some quando o jogo está desligado */
.aba.inicio-aba .luz { display: none; }
.palco.foco .painel:not(.focado) { display: none; }

.painel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
}

.cabecalho {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #1b1e28;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}

.cabecalho .nome {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--texto);
  font: 600 12px/1 inherit;
  padding: 3px 5px;
  width: 90px;
  user-select: text;
}
.cabecalho .nome:hover { border-color: var(--borda); }

.estado { width: 7px; height: 7px; border-radius: 50%; background: var(--fraco); flex: none; }
.estado.carregando { background: var(--acento); }
.estado.pronto { background: var(--ok); }

.acoes { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.acoes button, .foco {
  background: #232735;
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  font: inherit;
  line-height: 1.3;
}
.acoes button:hover, .foco:hover { background: #2f3446; }
.acoes button.on { background: var(--acento); border-color: var(--acento); color: #10121a; }

.acoes .script {
  background: #232735;
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 5px;
  font: inherit;
  max-width: 120px;
  padding: 2px;
}

.chk { display: flex; align-items: center; gap: 3px; color: var(--fraco); }
.zoom { color: var(--fraco); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* rodapé: última linha do console daquela conta */
.rodape {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 3px 7px;
  background: #14161e;
  border: none;
  border-top: 1px solid var(--borda);
  color: var(--fraco);
  font: 11px/1.4 ui-monospace, Consolas, monospace;
  text-align: left;
  cursor: pointer;
}
.rodape:hover { background: #1b1e28; }
.rodape .ultima {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rodape .ultima.erro { color: var(--perigo); }
.rodape .idade { flex: none; opacity: 0.7; }
.rodape .sinal { width: 6px; height: 6px; border-radius: 50%; background: #3a3f4f; flex: none; }
.rodape .sinal.vivo { background: var(--ok); }
.rodape .sinal.velho { background: var(--acento); }

/* borda discreta em conta com bot vigiado */
.painel.vigiada { border-color: #3a3550; }

.log {
  margin: 0;
  max-height: 46vh;
  min-width: 520px;
  overflow: auto;
  background: #0b0c11;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 10px;
  font: 11px/1.6 ui-monospace, Consolas, monospace;
  color: var(--texto);
  white-space: pre-wrap;
  user-select: text;
}

.form.largo { min-width: 460px; max-width: 560px; }
.form fieldset {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
  display: grid;
  gap: 7px;
}
.form legend { color: var(--acento); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 4px; }
.form .lista { display: grid; gap: 5px; max-height: 30vh; overflow: auto; }
.form .curto { width: 62px; }
.form input[type="time"] { width: 120px; }

.moldura { flex: 1; min-height: 0; position: relative; }
.moldura webview { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* ocupa o lugar da webview quando a conta esta offline */
.dormindo {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  color: var(--fraco);
  position: absolute;
  inset: 0;
  background: #12141b;
}
.dormindo[hidden] { display: none; }

/* ---- PAINEL PEQUENO: o cromo encolhe para sobrar painel ----

   Com 36 contas a célula fica em 240x128 px, e nessa altura o painel estava
   gastando 61 px só de cabeçalho — quase metade — porque a fila de botões não
   cabia na largura e quebrava para uma segunda linha. Sobravam 43 px de
   moldura para um aviso que precisa de 54, e o "ligar" saía cortado ao meio.
   A fila de ações também era cortada à direita, no meio de um botão.

   MEDIDO, e a medição me enganou primeiro: eu tinha comparado o fim do botão
   com o fim do PAINEL, que inclui o rodapé, e concluí que não cortava. O corte
   é no fim da MOLDURA. Quem mostrou foi a captura de tela ampliada, não o
   número — de novo.

   A conta por painel, com 128 px de altura:
     cabeçalho 61 + rodapé 22 = 83 de cromo, 43 de moldura   (antes)
     cabeçalho 32 + rodapé 22 = 54 de cromo, 74 de moldura   (agora)

   POR QUE @container E NÃO @media: o que decide não é o tamanho da JANELA, é
   o tamanho do PAINEL. Dois jogos abertos lado a lado na mesma janela têm
   números de contas diferentes, e portanto painéis de tamanhos diferentes —
   uma media query acertaria um e erraria o outro. */
.painel { container-type: size; }

/* LARGURA **ou** ALTURA, e a largura não é detalhe: a quebra do cabeçalho é
   falta de largura, não de altura. Com só a regra de altura, nove painéis
   (487x262) ficavam com cabeçalho de duas linhas enquanto dezesseis (364x195)
   ficavam com uma — o layout mais folgado saía mais gordo que o apertado. */
@container (max-width: 560px) or (max-height: 220px) {
  /* Uma linha só. A fila de ações passa a ROLAR na horizontal em vez de
     quebrar: nada fica inalcançável, que era o problema do corte à direita. */
  .cabecalho { flex-wrap: nowrap; padding: 3px 4px; gap: 4px; }
  /* LARGURA SUFICIENTE PARA "Conta 48", e isso é medido: com 58px o nome
     cortava em 27 dos 36 painéis — todos os de dois dígitos. Num jogo com 36
     contas o número É a identidade do painel, e "Conta 1" onde deveria estar
     escrito "Conta 13" é pior que não mostrar nome nenhum: não parece cortado,
     parece outro painel. Os 10px saem da fila de ações, que rola. */
  .cabecalho .nome { width: 68px; flex: 0 1 68px; padding: 2px 4px; }
  /* COMEÇA PELO COMEÇO, e isso não é preferência. Dois motivos:

     1. o que fica visível são os primeiros botões — ligar/desligar, a chave
        do cofre, o bot. O fim da fila é o zoom, que quase ninguém mexe painel
        a painel. Com flex-end o painel abria mostrando "− 25% +" e escondendo
        justamente o que se usa.

     2. num flex com justify-content:flex-end o conteúdo que não cabe transborda
        para a ESQUERDA, e essa parte não é alcançável rolando. Seria trocar um
        corte por outro, desta vez sem conserto. */
  .acoes {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .acoes::-webkit-scrollbar { display: none; }
  .acoes .script { max-width: 64px; }
  .dormindo { gap: 5px; }
  .dormindo > span { font-size: 10px; }
}

@container (max-height: 150px) {
  /* Aqui nem o aviso cabe junto com o botão. Some o texto e fica o botão: o
     rodapé logo abaixo já diz "offline", então a informação não se perde —
     o que sairia é a repetição, não o recado. */
  .dormindo > span { display: none; }
  .dormindo { gap: 0; }
}

.painel.offline { opacity: 0.65; }
.painel.offline .cabecalho { background: #15171f; }

.memoria {
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 3px 7px;
  border: 1px solid var(--borda);
  border-radius: 6px;
}
.memoria.pesado { color: var(--perigo); border-color: var(--perigo); }

/* ---- dialogo de novo jogo ---- */
dialog {
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 0;
}
dialog::backdrop { background: #000a; }
.form { display: grid; gap: 10px; padding: 18px; min-width: 320px; }
.form h2 { margin: 0 0 4px; font-size: 15px; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--fraco); }
/* display:grid vence o [hidden] do navegador: sem isto os campos do jogo
   continuavam na tela depois de escolher "mix". */
.form label[hidden], .form p[hidden], .form fieldset[hidden] { display: none; }
.form input {
  background: #1d2029;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 8px;
  font: 13px inherit;
  user-select: text;
}
.form menu { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 0; }
.form .espaco { flex: 1; }
.form .linha { display: flex; align-items: center; gap: 6px; }
.form select {
  flex: 1;
  background: #1d2029;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 8px;
  font: 13px inherit;
  max-width: 100%;
}
.form .nota { margin: 0; font-size: 11px; color: var(--fraco); max-width: 380px; line-height: 1.5; }
.form .nota code { color: var(--texto); }

/* ---------------- painel de chat ---------------- */
.chat-painel {
  position: absolute;
  top: 38px;
  right: 0;
  bottom: 0;
  z-index: 25;
  /* Era 400px: estreito demais para conversa, e os cartões de intermediação
     nasciam espremidos. Acompanha a janela, com teto para não engolir o jogo. */
  width: clamp(460px, 42vw, 720px);
  display: flex;
  flex-direction: column;
  background: #101218;
  border-left: 1px solid var(--borda);
  box-shadow: -22px 0 46px rgba(0, 0, 0, 0.6);
}
.chat-painel[hidden] { display: none; }

.chat-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  background: #101218;
}
.chat-topo strong { font-size: 13px; }
.chat-estado { margin-left: auto; font-size: 11px; color: var(--fraco); }
.chat-estado.ok { color: var(--ok); }
.chat-estado.ruim { color: var(--perigo); }

.chat-corpo { flex: 1; display: grid; grid-template-columns: 168px 1fr auto; min-height: 0; }

.chat-canais {
  border-right: 1px solid var(--borda);
  overflow-y: auto;
  padding: 8px 6px;
  display: grid;
  gap: 3px;
  align-content: start;
}
.chat-canal-item {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fraco);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-canal-item:hover { color: #fff; background: #16181f; }
.chat-canal-item.ativo { color: #fff; background: #1c1f28; border-color: #333845; }
.chat-canal-item.rmt { color: #b9a06a; }

.chat-mensagens {
  overflow-y: auto;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Sem isto o display:flex acima vence o [hidden] do navegador: no mural, a
   coluna de mensagens continuava ocupando uma faixa de 24px e empurrava a
   lista de presentes para uma segunda linha do grid. */
.chat-mensagens[hidden] { display: none; }
.chat-msg {
  max-width: 92%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}
.chat-msg.minha {
  align-self: flex-end;
  text-align: right;
  grid-template-columns: minmax(0, 1fr) auto;
}
.chat-foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  grid-row: span 2;
  object-fit: cover;
  flex: none;
  background: #1a1d26;
}
/* Na minha propria mensagem a foto troca de lado junto com o texto. */
.chat-msg.minha .chat-foto { grid-column: 2; grid-row: 1 / span 2; }
.chat-msg.minha .chat-cabeca,
.chat-msg.minha p { grid-column: 1; }
.chat-foto-letra {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #e7e9ef;
  text-transform: uppercase;
}
.chat-cabeca { display: flex; gap: 7px; align-items: baseline; font-size: 11px; }
.chat-msg.minha .chat-cabeca { justify-content: flex-end; }
.chat-cabeca b { color: var(--texto); }
.chat-msg.admin .chat-cabeca b { color: var(--acento); }
/* Especifico de proposito: com '.chat-cabeca span' generico, a tag de cargo
   posta ao lado do nome tambem virava cinza de horario. */
.chat-cabeca .hora { color: #4a4f5a; }
.chat-msg p {
  margin: 3px 0 0;
  background: #14161d;
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d6dae3;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg.minha p { background: #1a1d26; }
.chat-aviso { color: #4a4f5a; font-size: 11.5px; text-align: center; margin: 12px 0; }

.chat-rodape { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--borda); background: #101218; }
.chat-rodape input {
  flex: 1;
  background: #16181f;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  padding: 8px 11px;
  font: inherit;
  user-select: text;
}
.chat-rodape input:focus { outline: none; border-color: #454a55; }

/* cartões de ação dentro do chat (pedido, cobrança, confirmação) */
.chat-cartao {
  flex-shrink: 0;
  background: #12151c;
  border: 1px solid #2c3140;
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.chat-cartao strong { font-size: 12.5px; }
/* O corpo do cartao PRESERVA quebra de linha.
   As mensagens ja preservavam; o cartao nao, e o endereco de repasse — nome,
   banco e chave, uma coisa por linha — chegava tudo grudado numa linha so.
   Numa tela onde um erro de leitura manda dinheiro para a pessoa errada, isso
   nao e detalhe de estilo. */
.chat-cartao p {
  margin: 0;
  font-size: 12px;
  color: var(--fraco);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* O bloco de destino do repasse: monoespacado, para o nome do banco e a chave
   alinharem embaixo dos rotulos e a leitura ser conferencia, nao adivinhacao. */
/* A FRASE DA CAPA aparece SO na web.
   No programa ela esta escondida por decisao antiga — la a pessoa ja sabe o
   que instalou. Na web, quem chega por um link precisa de uma linha dizendo
   onde entrou, antes de ver um mural de anuncios. */
#inicioWeb .capa-frase {
  display: block;
  text-align: center;
  margin: 14px auto 0;
  padding: 0 18px;
  max-width: 620px;
  font-size: 13px;
  color: var(--fraco);
  line-height: 1.6;
}

/* AS DUAS PORTAS da tela inicial da web. Na web nao ha biblioteca nem contas:
   o que existe e a comunidade, entao a capa leva direto a ela. */
.web-portas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 22px auto 0;
  padding: 0 18px;
}
.web-porta {
  display: grid;
  gap: 5px;
  text-align: left;
  background: #0c0e12;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--texto);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.web-porta:hover {
  background: #10131a;
  border-color: #3a4051;
  border-left-color: var(--acento);
  transform: translateY(-1px);
}
.web-porta b { font-size: 14px; letter-spacing: -.01em; }
.web-porta span { font-size: 12px; color: var(--fraco); line-height: 1.5; }

.web-inicio-baixar {
  max-width: 720px;
  margin: 16px auto 30px;
  padding: 0 18px;
  font-size: 11.5px;
  color: #5b6072;
  line-height: 1.6;
  text-align: center;
}
.web-inicio-baixar a { color: var(--fraco); }
.web-inicio-baixar a:hover { color: var(--acento); }

/* O TUTORIAL. Mesmo cartao do resto, com a borda no acento para se distinguir
   de um aviso do sistema — e o unico cartao que a pessoa abriu de proposito. */
.chat-cartao.tutorial { border-left-color: var(--acento); }
.tut-regua {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 2px 0 4px;
}
.tut-ponto {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2c3140;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.tut-ponto.feito { background: #4a5566; }
.tut-ponto.agora {
  background: var(--acento);
  transform: scale(1.45);
}
.tut-ponto:hover { background: #6b7788; }
.chat-tutorial-link {
  align-self: flex-start;
  font-size: 11px;
  padding: 4px 9px;
  color: var(--fraco);
  border-color: var(--borda);
}
.chat-tutorial-link::before { content: "? "; opacity: .6; }
.chat-tutorial-link:hover { color: var(--acento); border-color: var(--acento); }

/* O jogo no cartao do negocio: discreto ao lado do valor, porque a pergunta
   "isso e meu?" vem antes de "quanto e?" mas nao pode competir com o valor. */
.negocio-jogo {
  margin-left: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--fraco);
  vertical-align: middle;
}

.chat-cartao .destino {
  display: block;
  margin-top: 6px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .03);
  border-left: 2px solid var(--acento);
  border-radius: 0 6px 6px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #cdd2dc;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-cartao-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-cartao .btn { font-size: 11.5px; padding: 5px 10px; }
.chat-campo { display: grid; gap: 4px; font-size: 11px; color: var(--fraco); }
.chat-campo input, .chat-campo select {
  background: #0d0f14;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 8px;
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  user-select: text;
}
.chat-nota { font-size: 11px !important; color: #6f7480 !important; }
.chat-pix {
  display: block;
  background: #0a0c10;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 8px;
  font: 10px/1.5 ui-monospace, Consolas, monospace;
  color: #8b90a3;
  word-break: break-all;
  max-height: 70px;
  overflow: auto;
  user-select: text;
}
.chat-cabeca b.clicavel { cursor: pointer; text-decoration: underline dotted; }
.chat-cabeca b.clicavel:hover { color: #fff; }

/* separador entre os canais públicos e as conversas privadas */
.chat-canais-titulo {
  margin: 10px 0 4px;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5f6470;
}
.chat-canal-item.privado { color: #c9ccd6; }
/* um ponto avisa que chegou coisa nova onde você não está olhando */
.chat-canal-item.nao-lida {
  color: #fff;
  font-weight: 600;
}
.chat-canal-item.nao-lida::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
}

/* ---- amigos no painel do chat ---- */
.chat-canal-item.amigo::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #3a3f4d;         /* offline */
  vertical-align: middle;
}
.chat-canal-item.amigo.online::before { background: var(--ok); }
.chat-canal-item.amigo.esperando { opacity: .45; font-style: italic; }
.chat-canal-item.pedido { color: var(--acento); }
.chat-canal-item.pedido::after {
  content: 'responder';
  float: right;
  font-size: 10px;
  opacity: .7;
}

/* recado curto embaixo dos números do perfil */
.perfil-nota {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #6f7480;
}
.perfil-nota:empty { display: none; }

/* ---- botão de chat na barra, com contador ---- */
.chat-botao { position: relative; }
.chat-botao.tem-recado { color: #fff; border-color: var(--acento); }
.chat-botao.tem-recado::after {
  content: attr(data-contador);
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--acento);
  color: #14151a;
  font: 700 9.5px/15px "Segoe UI", sans-serif;
  text-align: center;
}
/* quantas mensagens esperam em cada canal da lista */
.chat-canal-item.nao-lida::after { content: attr(data-quantas); }
.chat-canal-item.nao-lida[data-quantas]::after {
  float: right;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 999px;
  background: var(--acento);
  color: #14151a;
  font: 700 9.5px/14px "Segoe UI", sans-serif;
  padding: 0 5px;
  vertical-align: baseline;
}

/* bandeira de denúncia, discreta até passar o mouse pela mensagem */
.chat-denunciar {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #4a4f5e;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.chat-msg:hover .chat-denunciar { opacity: 1; }
.chat-denunciar:hover { color: var(--perigo); }
.chat-cabeca { display: flex; align-items: center; gap: 6px; }


/* ---- mix: atalhos e avisos dos dialogos de tela ---- */
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
.atalhos .btn { font-size: 11px; padding: 4px 9px; }
.aviso-drm { border-left: 2px solid var(--acento); padding-left: 9px; color: #9aa0b0; }
/* a tela de um mix pode ser editada; a de um jogo comum, nao */
.painel .editar { display: none; }
.painel.tela-livre .editar { display: inline-flex; }

/* mix sem nenhuma tela ainda */
.mix-vazio {
  margin: auto;
  max-width: 420px;
  padding: 26px;
  text-align: center;
  border: 1px dashed var(--borda);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.mix-vazio strong { font-size: 14px; }
.mix-vazio p { margin: 0; color: var(--fraco); font-size: 12.5px; line-height: 1.6; }

/* aviso de versão nova na tela Início */
.aviso-versao {
  display: grid;
  gap: 7px;
  justify-items: start;
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid var(--acento);
  border-radius: 10px;
  background: #1a1410;
}
.aviso-versao[hidden] { display: none; }
.aviso-versao strong { font-size: 13px; color: var(--acento); }
.aviso-versao p { margin: 0; font-size: 12px; color: var(--fraco); line-height: 1.5; }

/* escolha de idioma no painel de perfil */
.perfil-idioma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 2px;
  font-size: 11.5px;
  color: var(--fraco);
}
.perfil-idioma select {
  background: #0d0f14;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 5px 7px;
  font: 12px inherit;
}


/* uma linha por tela do mix, na hora de criar a aba */
.telas-mix { display: grid; gap: 7px; }
.telas-mix .linha-tela {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px;
}
.telas-mix input {
  background: #0d0f14;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
}
.telas-mix input:focus { outline: none; border-color: #454a55; }


/* ---- painel de amigos, separado da lista de canais ---- */
.chat-topo .btn.aberto { background: var(--acento); color: #14151a; border-color: var(--acento); }

.amigos-painel {
  position: absolute;
  inset: 47px 0 0 0;
  z-index: 3;
  background: #101218;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
.amigos-painel[hidden] { display: none; }
.amigos-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--borda);
}
.amigos-topo strong { font-size: 13px; }
.amigos-topo .conta { margin-left: auto; font-size: 11px; color: var(--apagado, #5f6472); }
.amigos-lista { overflow-y: auto; min-height: 0; padding: 10px 12px; display: grid; gap: 5px; align-content: start; }
.amigos-grupo {
  margin: 8px 0 2px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5f6472;
}
.amigos-grupo:first-child { margin-top: 0; }
.amigo-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: #171922;
}
.amigo-linha .luz-amigo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a3f4d;
  flex: none;
}
.amigo-linha.online .luz-amigo { background: var(--ok); }
.amigo-linha .nome { font-size: 12.5px; color: var(--texto); flex: 1; }
.amigo-linha .btn { font-size: 11px; padding: 4px 9px; }
.amigos-vazio { color: var(--fraco); font-size: 12.5px; line-height: 1.6; }


/* ---- arrastar para reordenar ---- */
.aba.arrastando, .painel.arrastando { opacity: .45; }
.aba.alvo { box-shadow: inset 3px 0 0 var(--acento); }
.painel.alvo { outline: 2px dashed var(--acento); outline-offset: -3px; }
.painel .cabecalho { cursor: grab; }
.painel .cabecalho:active { cursor: grabbing; }
/* Os controles do cabeçalho não devem iniciar arraste ao serem clicados. */
.painel .cabecalho .acoes, .painel .cabecalho .nome { cursor: auto; }


/* aviso do Tor no diálogo de proxy */
.aviso-tor {
  border-left: 2px solid var(--acento);
  padding-left: 9px;
  color: #9aa0b0;
}
.aviso-tor[hidden] { display: none; }
#proxyTorEstado.vivo { border-left-color: var(--ok); color: var(--ok); }
#proxyTorEstado.morto { border-left-color: var(--perigo); color: #e08d94; }


/* instruções do torrc dentro do diálogo de proxy */
.soTor[hidden] { display: none; }
#proxyTorAjuda { margin: -2px 0 4px; }
#proxyTorAjuda summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--acento);
  margin-bottom: 6px;
}
.bloco-torrc {
  display: block;
  white-space: pre;
  background: #0a0c10;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 8px 10px;
  font: 11px/1.6 ui-monospace, Consolas, monospace;
  color: #9aa0b0;
  user-select: text;
}


/* botao do tradutor de pagina */
.painel .acoes .traduzir.on {
  color: var(--acento);
  border-color: var(--acento);
}


/* ---- vitrine de parceiros, no topo da biblioteca ---- */
.vitrine { margin: 0 0 18px; }
.vitrine[hidden] { display: none; }
.vitrine-palco {
  position: relative;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--borda);
  background: #05070b;
}
.vitrine-cartao {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}
.vitrine-cartao.ativo { opacity: 1; visibility: visible; }
.vitrine-fundo {
  position: absolute;
  inset: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  object-fit: cover;
  filter: blur(22px) brightness(0.62) saturate(1.35);
}
/* A arte inteira, no meio: e onde a logo do parceiro vive. */
.vitrine-arte {
  position: relative;
  display: block;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
.vitrine-selo {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  background: rgba(5, 7, 11, 0.72);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 9px;
}
.vitrine-legenda {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  margin: 0;
  font-size: 12.5px;
  color: #e7e9ef;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.vitrine-cartao:hover .vitrine-arte { transform: scale(1.015); transition: transform 0.3s ease; }
.vitrine-pontos { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.vitrine-pontos[hidden] { display: none; }
.vitrine-ponto {
  width: 22px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--borda);
  cursor: pointer;
}
.vitrine-ponto.ativo { background: var(--acento); }

/* ---- botao de adicionar, por cima da capa do cartao ---- */
.cartao-acao {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font: 600 11.5px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #0b0c10;
  background: var(--acento);
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  opacity: 0.94;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.cartao-acao:hover { opacity: 1; transform: translateY(-1px); }
/* Ja adicionado: some do caminho da arte, mas continua clicavel. */
.cartao-acao.ja {
  color: #e7e9ef;
  background: rgba(10, 12, 16, 0.78);
  border: 1px solid var(--borda);
}


/* ---- quem esta no canal agora ---- */
.chat-presentes {
  width: 172px;
  border-left: 1px solid var(--borda);
  overflow-y: auto;
  padding: 10px 8px;
}
.chat-presentes[hidden] { display: none; }
.chat-presentes h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fraco);
}
.presente {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--texto);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.presente:hover { background: var(--fundo-3, rgba(255, 255, 255, 0.05)); }
.presente img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.presente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.presente.admin span { color: var(--acento); font-weight: 600; }

/* ---- mural de anuncios do RMT ---- */
.chat-mural {
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  align-content: start;
}
.chat-mural[hidden] { display: none; }
.anuncio {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0c10;
}
/* Quem vende e quem procura leem diferente de longe. */
.anuncio.oferta { border-top: 2px solid var(--acento); }
.anuncio.procura { border-top: 2px solid #4a9eda; }
.anuncio-capa { width: 100%; height: 118px; object-fit: cover; display: block; }
.anuncio-corpo { display: grid; gap: 6px; padding: 10px 11px 11px; }
.anuncio-selo {
  justify-self: start;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fraco);
}
.anuncio.oferta .anuncio-selo { color: var(--acento); }
.anuncio.procura .anuncio-selo { color: #4a9eda; }
.anuncio h4 { margin: 0; font-size: 14px; line-height: 1.25; }
.anuncio-desc {
  margin: 0;
  font-size: 12px;
  color: var(--fraco);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.anuncio-preco { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.anuncio-preco.combinar { font-size: 12.5px; font-weight: 600; color: var(--fraco); }
.anuncio-pe {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-top: 2px;
}
.anuncio-autor {
  border: 0;
  background: none;
  padding: 0;
  color: var(--fraco);
  font-size: 11.5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anuncio-autor:hover { color: var(--acento); }
.anuncio-conversar { font-size: 11.5px; padding: 5px 11px; flex: none; }
.anuncio-tirar {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 11, 0.8);
  color: #e7e9ef;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.anuncio-tirar:hover { background: var(--perigo, #b4433a); }
.linha-radio { display: flex; gap: 16px; border: 0; padding: 0; margin: 0; }


/* ---- mensagem traduzida ---- */
#chatTraduzir { padding: 4px 9px; font-size: 13px; line-height: 1; }
#chatTraduzir.on { color: var(--acento); border-color: var(--acento); }
.chat-traduzida {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fraco);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.75;
}
.chat-traduzida:hover { color: var(--acento); opacity: 1; }


/* ---- tags de papel no chat ---- */
.tag-papel {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
/* Cada papel com a sua cor: e o que se le de relance, sem precisar ler a letra. */
.tag-fundador { color: #f2c14e; }
.tag-admin { color: #e04a3c; }
.tag-equipe { color: #4a9eda; }
.presente .tag-papel { margin-left: auto; font-size: 8.5px; padding: 1px 5px; }


/* ---- menções ---- */
.mencao {
  display: inline;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 16%, transparent);
  cursor: pointer;
}
.mencao:hover { background: color-mix(in srgb, var(--acento) 28%, transparent); }
/* Quando é você que foi chamado, a mensagem inteira muda de fundo: é o que
   faz a pessoa achar o próprio nome ao voltar de longe. */
.mencao.eu { color: #f2c14e; background: color-mix(in srgb, #f2c14e 20%, transparent); }
.chat-msg.me-chamou {
  background: color-mix(in srgb, #f2c14e 8%, transparent);
  border-left: 2px solid #f2c14e;
  padding-left: 8px;
  border-radius: 4px;
}
.chat-rodape { position: relative; }
.mencao-sugestao {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  min-width: 190px;
  max-width: 280px;
  background: #10131a;
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  z-index: 20;
  display: grid;
  gap: 2px;
}
.mencao-op {
  text-align: left;
  border: 0;
  background: none;
  color: var(--texto);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.mencao-op.ativa,
.mencao-op:hover { background: color-mix(in srgb, var(--acento) 22%, transparent); }


/* ---- caixinha de aviso de mensagem ---- */
.avisos-pop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}
.aviso-pop {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 310px;
  padding: 11px 12px;
  background: #12151c;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acento);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.aviso-pop.dentro { opacity: 1; transform: none; }
.aviso-pop.saindo { opacity: 0; transform: translateX(14px); }
.aviso-pop:hover { border-color: var(--acento); }
.aviso-pop .chat-foto { grid-row: span 2; }
.aviso-pop-corpo { display: grid; gap: 2px; min-width: 0; }
.aviso-pop-corpo strong { font-size: 12.5px; }
.aviso-pop-onde {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
}
.aviso-pop-corpo p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--fraco);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.aviso-pop-fechar {
  border: 0;
  background: none;
  color: var(--fraco);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.aviso-pop-fechar:hover { color: var(--texto); }


/* ---- integrantes da sala de intermediação ---- */
.integrante { align-items: center; gap: 8px; }
.integrante .chat-foto { width: 24px; height: 24px; opacity: 0.5; }
/* Quem está online aparece nítido; quem não está, apagado. É a diferença que
   interessa aqui — sem esconder ninguém, porque a parte continua sendo parte. */
.integrante.vivo .chat-foto { opacity: 1; }
.integrante-nome { display: grid; gap: 1px; min-width: 0; text-align: left; }
.integrante-nome > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.integrante:not(.vivo) .integrante-nome > span:first-child { color: var(--fraco); }
.integrante-papel {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.papel-comprador { color: #4a9eda; }
.papel-vendedor { color: var(--acento); }
.papel-admin { color: #e04a3c; }
.integrante-estado {
  margin: 10px 2px 0;
  font-size: 10.5px;
  color: var(--fraco);
  line-height: 1.4;
}


/* ---- negociações abertas ---- */
#chatNegocios.tem { color: var(--acento); border-color: var(--acento); }
.negocios-lista { overflow-y: auto; padding: 10px; display: grid; gap: 10px; align-content: start; }
.negocio {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 11px 12px;
  background: #0f1218;
  display: grid;
  gap: 7px;
}
.negocio-topo { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.negocio-topo strong { font-size: 13px; }
.negocio-estado {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fraco);
  white-space: nowrap;
}
/* Com dinheiro em jogo o estado muda de cor: é o aviso de que sair dali
   não é mais uma decisão só sua. */
.negocio-estado.com-dinheiro { color: #e8b923; }
.negocio-valor { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.negocio-acoes { display: flex; gap: 7px; }
.negocio-acoes .btn { font-size: 11.5px; padding: 5px 11px; }


/* ---- janela de amigos, separada do app ---- */
/* ---- janela de amigos ----
   Coluna em flex, nao grid de linhas fixas. O grid anterior declarava cinco
   linhas (`auto auto 1fr auto auto`) contando com cinco filhos, mas o bloco de
   pedidos fica `hidden` quase sempre: sem ele as linhas escorregam uma casa e o
   `1fr` — que era da lista — caia no RODAPE. Era isso que fazia o botao de
   adicionar virar uma coluna verde de um terco da janela. Em flex, filho
   escondido nao desloca nada. */
.janela-amigos {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo, #141414);
  color: var(--texto, #f2f0e9);
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}

.ja-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  background: #191919;
  -webkit-app-region: drag;
  flex: none;
}
.ja-topo .busca,
.ja-topo input,
.ja-topo button { -webkit-app-region: no-drag; }
.ja-topo strong { font-size: 13.5px; letter-spacing: 0.01em; }
.ja-topo .conta { font-size: 11px; color: var(--fraco); }
.ja-topo .espaco { flex: 1; }
.ja-topo input {
  width: 120px;
  background: #0f0f10;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 5px 8px;
  font-size: 12px;
}
.ja-topo input:focus { outline: none; border-color: #4a4a50; }

/* Icone, nao botao de texto: no topo cabe um quadrado de 28px, e a chapa de
   spray dos botoes do app fica pesada demais nesse tamanho. */
.ja-icone {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #0f0f10;
  color: var(--fraco);
  cursor: pointer;
}
.ja-icone svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ja-icone:hover { color: var(--texto); border-color: #4a4a50; }
.ja-icone.aberto { color: #0f120a; background: var(--acento); border-color: var(--acento); }

.ja-adicionar {
  display: flex;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  background: #131313;
  flex: none;
}
.ja-adicionar[hidden] { display: none; }
.ja-adicionar input {
  flex: 1;
  min-width: 0;
  background: #0f0f10;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 9px;
  font-size: 12px;
}
.ja-adicionar input:focus { outline: none; border-color: var(--acento); }
.ja-mandar {
  flex: none;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--acento);
  color: #0f120a;
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}
.ja-mandar:hover { filter: brightness(1.12); }

.ja-secao { padding: 4px 6px 8px; overflow-y: auto; flex: none; }
.ja-secao[hidden] { display: none; }
/* A lista e o unico bloco que cresce; `min-height: 0` para ela poder encolher
   e rolar por dentro em vez de empurrar o resto para fora da janela. */
.ja-cresce { flex: 1; min-height: 0; }
.ja-secao h4 {
  margin: 10px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6f7078;
  font-weight: 600;
}
.ja-secao h4[hidden] { display: none; }

/* Linha compacta: 30px de foto, nome e situacao empilhados, acoes so no hover.
   O alvo e a densidade de uma lista de amigos de verdade — cabe muito mais
   gente na mesma altura de janela. */
.ja-pessoa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 5px;
}
.ja-pessoa:hover { background: rgba(255, 255, 255, 0.055); }
.ja-foto {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  object-fit: cover;
  background: #1c1c1f;
}
.ja-foto-letra {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #cfd0d6;
}
/* Offline fica apagado, nao escondido: continua sendo seu amigo. */
.ja-pessoa:not(.viva) .ja-foto { opacity: 0.42; filter: grayscale(1); }
.ja-pessoa:not(.viva) .ja-meio strong { color: #74757c; }
.ja-meio { display: grid; gap: 0; min-width: 0; }
.ja-meio strong {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O nome fica claro, nao verde. Verde em todo nome de quem esta online era
   verde demais numa lista de dezenas — quem carrega a cor e a situacao. */
.ja-pessoa.viva .ja-meio strong { color: #eceae3; }
.ja-meio span {
  font-size: 10.5px;
  color: #6f7078;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ja-pessoa.viva .ja-meio span { color: #93b53c; }

/* Acoes so no item sob o mouse: de longe a lista fica limpa. E com estilo
   proprio, sem a chapa de tinta — a 10px ela vira uma mancha. */
.ja-botoes { display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
.ja-pessoa:hover .ja-botoes,
.ja-pessoa:focus-within .ja-botoes { opacity: 1; }
.ja-botoes .btn,
.ja-botoes .btn.primario,
.ja-botoes .btn.perigo {
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: #202024;
  color: #c9cad0;
  font: 600 10.5px/1.5 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow: none;
  clip-path: none;
  isolation: auto;
  overflow: visible;
}
.ja-botoes .btn::before,
.ja-botoes .btn::after { content: none; }
.ja-botoes .btn:hover { background: #2b2b31; color: #fff; }
.ja-botoes .btn.primario { border-color: rgba(198, 240, 78, 0.45); color: #d8e9a8; }
.ja-botoes .btn.primario:hover { background: var(--acento); color: #0f120a; }
.ja-botoes .btn.perigo { border-color: rgba(224, 85, 97, 0.4); color: #e69a9f; }
.ja-botoes .btn.perigo:hover { background: #7c2028; color: #fff; }

.ja-vazio { color: var(--fraco); font-size: 12px; text-align: center; margin: 22px 6px; }
.ja-estado {
  margin: 0;
  padding: 7px 12px;
  font-size: 11px;
  color: var(--fraco);
  min-height: 15px;
  border-top: 1px solid var(--borda);
  flex: none;
}
.ja-estado:empty { display: none; }
.ja-estado.ruim { color: #e04a3c; }


/* ---- página do mercado ---- */
.mercado {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mercado[hidden] { display: none; }
.mc-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  flex-wrap: wrap;
}
.mc-titulo { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
.mc-titulo h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.mc-conta { font-size: 11.5px; color: var(--fraco); }
.mc-filtros { display: flex; gap: 4px; }
.mc-filtro {
  border: 1px solid var(--borda);
  background: none;
  color: var(--fraco);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  cursor: pointer;
}
.mc-filtro.ativo { color: var(--acento); border-color: var(--acento); }
.mc-topo .busca input {
  width: 190px;
  background: #16181f;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  padding: 6px 10px;
  font-size: 12.5px;
}
.mc-regra {
  margin: 0 20px 12px;
  font-size: 11.5px;
  color: var(--fraco);
  line-height: 1.5;
  max-width: 760px;
}
.mc-grade {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
  align-content: start;
}
.mc-vazio { color: var(--fraco); text-align: center; margin: 40px 20px; font-size: 13px; }
.mc-vazio[hidden] { display: none; }

.mc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: 12px;
  overflow: hidden;
  background: #0d1016;
}
.mc-item.oferta { border-top: 3px solid var(--acento); }
.mc-item.procura { border-top: 3px solid #4a9eda; }
/* Quadrado, e nao uma faixa: print de tela de jogo e alto, e uma faixa de
   148px o transformava numa fatia horizontal ilegivel. O recortador garante
   que o que sobe ja e quadrado, entao aqui nada precisa ser deformado. */
.mc-capa {
  position: relative;
  /* LARGA, NAO QUADRADA.
     A foto de um anuncio e quase sempre a captura de tela de um jogo, que e
     larga. No quadrado ela era cortada em cima e embaixo — justo onde ficam o
     nome e os atributos, que e o que a pessoa quer ver antes de comprar. E uma
     foto pequena ainda era esticada para preencher a altura.
     De quebra o cartao ficou mais baixo, entao cabe mais anuncio na tela. */
  aspect-ratio: 16 / 10;
  background: #10131a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sem foto o cartao encolhia para uma tira de 40px, porque nao havia nada para
   mostrar — e a grade ficava com dentes de alturas diferentes. Agora ha capa
   padrao, entao ele mantem o quadrado como qualquer outro. */
.mc-capa.sem-capa { background: linear-gradient(180deg, #141821, #0d1016); }
.mc-selo {
  position: absolute;
  top: 9px;
  left: 9px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(5, 7, 11, 0.78);
}
.mc-item.oferta .mc-selo { color: var(--acento); }
.mc-item.procura .mc-selo { color: #4a9eda; }
/* O prazo é informação de compra: ninguém quer responder a uma oferta que
   sai do ar em dez minutos sem saber disso. */
.mc-prazo {
  position: absolute;
  bottom: 9px;
  right: 9px;
  font-size: 10px;
  color: #cfd3dc;
  background: rgba(5, 7, 11, 0.78);
  padding: 3px 8px;
  border-radius: 999px;
}
.mc-corpo { display: grid; gap: 7px; padding: 12px 14px 10px; }
.mc-corpo h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.mc-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--fraco);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mc-preco { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mc-preco.combinar { font-size: 13px; font-weight: 600; color: var(--fraco); }
.mc-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* O bloco da decisao: preco e o botao de falar com quem vende. A linha em cima
   separa do texto sem precisar de caixa dentro de caixa. */
.mc-negocio {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.02);
}
.mc-autor { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--fraco); }
.mc-autor img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.mc-autor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-rep { color: var(--acento); flex: none; }
.mc-pe .btn { font-size: 12px; padding: 6px 14px; flex: none; }
.mc-tirar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 11, 0.82);
  color: #e7e9ef;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.mc-tirar:hover { background: #b4433a; }
.mercado-aba .luz { background: var(--acento); }


/* ---- apoiadores: cor do nick, aura e selo ---- */
/* As mesmas cores dos cargos do Discord, de propósito: quem reconhece lá
   reconhece aqui. A aura mora no nome, não na mensagem inteira — brilhar o
   bloco todo cansa a vista num canal movimentado. */
/* A classe vem dobrada de proposito. Regras como ".chat-cabeca b { color }"
   tem especificidade maior que uma classe sozinha e venciam a cor do apoio —
   o selo aparecia e o nome continuava branco. Dobrar resolve sem amarrar
   estas regras a um pai especifico, que quebraria no mercado e na lista. */
.nick-apoio { font-weight: 700; }
.nick-bronze.nick-apoio { color: #d08a4e; text-shadow: 0 0 7px rgba(208, 138, 78, 0.6); }
.nick-prata.nick-apoio { color: #cfd6e0; text-shadow: 0 0 8px rgba(207, 214, 224, 0.65); }
.nick-ouro.nick-apoio { color: #f2c94c; text-shadow: 0 0 9px rgba(242, 201, 76, 0.7); }
.nick-diamante.nick-apoio {
  color: #6fe3f5;
  text-shadow: 0 0 6px rgba(111, 227, 245, 0.85), 0 0 14px rgba(111, 227, 245, 0.5);
}
/* Só o diamante pulsa. Se todos os níveis brilhassem igual, o topo não
   valeria nada — e quatro auras piscando juntas viram poluição. */
@keyframes brilho-diamante {
  0%, 100% { text-shadow: 0 0 6px rgba(111, 227, 245, 0.85), 0 0 14px rgba(111, 227, 245, 0.45); }
  50% { text-shadow: 0 0 9px rgba(111, 227, 245, 1), 0 0 22px rgba(111, 227, 245, 0.7); }
}
.nick-diamante.nick-apoio { animation: brilho-diamante 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .nick-diamante.nick-apoio { animation: none; }
}

.tag-apoio {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.apoio-bronze { color: #d08a4e; }
.apoio-prata { color: #cfd6e0; }
.apoio-ouro { color: #f2c94c; }
.apoio-diamante { color: #6fe3f5; }
.presente .tag-apoio { font-size: 8px; padding: 0 4px; }

/* No mercado, o anúncio de quem apoia já vem em cima; a borda diz por quê. */
.mc-item.de-apoiador { border-color: currentColor; }
.mc-item.apoiador-bronze { box-shadow: 0 0 0 1px rgba(208, 138, 78, 0.35); }
.mc-item.apoiador-prata { box-shadow: 0 0 0 1px rgba(207, 214, 224, 0.35); }
.mc-item.apoiador-ouro { box-shadow: 0 0 0 1px rgba(242, 201, 76, 0.4); }
.mc-item.apoiador-diamante { box-shadow: 0 0 0 1px rgba(111, 227, 245, 0.45); }

/* ---- níveis no diálogo de apoio ---- */


/* ---- denunciar um anuncio ---- */
/* Fica ao lado do X de remover quando ambos aparecem; discreto por padrao e
   vermelho ao passar o mouse. Denunciar nao pode competir com "conversar". */
.mc-denunciar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(5, 7, 11, 0.72);
  color: var(--fraco);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.mc-denunciar:hover { opacity: 1; color: #e04a3c; background: rgba(5, 7, 11, 0.9); }
.mc-item .mc-tirar + .mc-denunciar,
.mc-item .mc-denunciar + .mc-tirar { right: 38px; }


/* ---- recortador da capa ---- */
.recorte { display: grid; gap: 8px; }
.recorte[hidden] { display: none; }
.recorte-palco {
  justify-self: center;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0c10;
  /* O quadriculado deixa claro que o que esta dentro do quadrado e o recorte. */
  background-image: linear-gradient(45deg, #12151c 25%, transparent 25%),
    linear-gradient(-45deg, #12151c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #12151c 75%),
    linear-gradient(-45deg, transparent 75%, #12151c 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#recorteTela { display: block; cursor: grab; touch-action: none; }
#recorteTela:active { cursor: grabbing; }
.recorte-zoom { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fraco); }
.recorte-zoom input { flex: 1; accent-color: var(--acento); }


/* ---- direcao grafite: letras acesas e estencil ---- */

/* A marca e os titulos de tela usam a fonte de spray, que ja era a das capas
   dos jogos — entao nao e fonte nova, e continuidade. */
/* Letra de rua, nao de estencil. A Rubik Spray Paint parecia placa vazada e,
   no tamanho grande com brilho, virava borrao — o nome do jogo ficou ilegivel
   na primeira tentativa. Permanent Marker e tag de marcador: tem a mao humana
   e continua legivel, que e o que um titulo precisa. */
/* O TÍTULO DA PÁGINA — e só ele. O nome do lugar onde a pessoa está:
   "Biblioteca", "Dragon Ball Idle". Aqui a marca fala, com a letra de marcador
   e o brilho. */
#mercadoJogo,
.secao-cabecalho h2 {
  font-family: "Permanent Marker", "Comic Sans MS", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #fdffe9;
  /* brilho mais curto: halo largo sobre letra irregular vira mancha */
  text-shadow: 0 0 4px rgba(198, 240, 78, 0.8), 0 0 14px rgba(198, 240, 78, 0.42),
    0 2px 3px rgba(0, 0, 0, 0.9);
}

/* AS SEÇÕES DENTRO DA PÁGINA são outra coisa, e antes eram desenhadas igual.
   "Notícias e patches" e "Chats" gritavam com a mesma força de "Biblioteca" —
   três manchetes na mesma tela, e nenhuma delas guiando.

   Viraram rótulo: pequeno, espaçado, sem brilho, com um risco de tinta à
   esquerda que é o único traço de marca que sobra aqui. */
/* A EXCEÇÃO PRECISA GANHAR DA REGRA, e por isso ela e escrita assim.
   `.inicio h2` e `.secao-cabecalho h2` tem a MESMA especificidade, e o titulo
   da Biblioteca casa com os dois — entao quem vem depois no arquivo manda.
   Escrevendo o seletor de secao com o `.inicio` na frente, ele passa a ser
   mais especifico e o titulo da pagina volta a falar com a letra da marca,
   independente da ordem em que as regras aparecerem.
   Foi assim que a Biblioteca perdeu a voz na primeira tentativa. */
.inicio .secao-cabecalho h2 {
  font-family: "Permanent Marker", "Comic Sans MS", Impact, sans-serif;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #fdffe9;
  padding-left: 0;
  border-left: 0;
  text-shadow: 0 0 4px rgba(198, 240, 78, 0.8), 0 0 14px rgba(198, 240, 78, 0.42),
    0 2px 3px rgba(0, 0, 0, 0.9);
}

.inicio h2 {
  font-family: "Bebas Neue", "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa08e;
  text-shadow: none;
  padding-left: 11px;
  border-left: 3px solid color-mix(in srgb, var(--acento) 55%, transparent);
  line-height: 1.1;
}

/* A marca leva a tinta escorrendo: e uma palavra so e grande, entao o
   escorrido aparece sem atrapalhar leitura. */
.marca {
  font-family: "Rubik Wet Paint", "Permanent Marker", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fdffe9;
  text-shadow: 0 0 5px rgba(198, 240, 78, 0.9), 0 0 16px rgba(198, 240, 78, 0.5),
    0 0 38px rgba(198, 240, 78, 0.22);
}

#mercadoJogo { font-size: clamp(22px, 3vw, 34px); line-height: 1.05; }

/* Preco e numero em fonte pesada: e o que a pessoa procura no cartao. */
.mc-preco,
.negocio-valor,
.anuncio-preco {
  font-family: "Archivo Black", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Selecao acesa em vez de so colorida: o filtro ativo estava fraco demais. */
.mc-filtro.ativo,
.aba.ativa .rotulo {
  color: #eaffb0;
  text-shadow: 0 0 5px rgba(198, 240, 78, 0.8), 0 0 14px rgba(198, 240, 78, 0.4);
}
.mc-filtro.ativo { box-shadow: inset 0 0 12px rgba(198, 240, 78, 0.12); }

/* Estencil nos cantos do que e acao, nao caixa. */
.mc-filtro,
.cartao-acao,
.btn.ativo {
  border-radius: 0;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

/* Os paineis ficam opacos sobre a parede: texto sobre textura nao se le. */
.painel,
.inicio,
.chat-painel,
.mercado,
dialog {
  background-color: var(--painel);
}


/* =========================================================================
   Segunda passada da direcao grafite: a parede aparece, a vitrine ganha
   moldura pintada e os botoes usam a pincelada isolada.
   ========================================================================= */



/* A biblioteca cobria a parede inteira com um retangulo opaco — dava no mesmo
   que nao ter textura. Agora ela e um veu: a parede passa por baixo, mas
   escurecida o bastante para o texto continuar legivel sem depender de sorte
   com o grafite que caiu atras. */
.inicio {
  background: rgba(12, 13, 17, 0.76);
}

/* Os cartoes e paineis continuam opacos: e onde ha texto pequeno. A parede
   aparece nas frestas entre eles, que e onde ela deve aparecer. */
.painel,
.chat-painel,
.mercado,
dialog {
  background-color: var(--painel);
}

/* A copia borrada da arte sai de cena: a moldura ja faz esse trabalho. */
.vitrine-fundo { display: none; }
.vitrine-arte {
  height: 78%;
  margin-top: 2.6%;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.75));
}
.vitrine-selo {
  top: 12px;
  left: 14px;
  border-radius: 0;
  border: 0;
  background: rgba(6, 8, 4, 0.66);
  color: #eaffb0;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(198, 240, 78, 0.85), 0 0 14px rgba(198, 240, 78, 0.4);
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.vitrine-legenda { bottom: 12px; left: 14px; right: 14px; }
.vitrine-ponto { border-radius: 0; }
.vitrine-ponto.ativo { box-shadow: 0 0 8px rgba(198, 240, 78, 0.7); }

/* ---- a pincelada nova ----
   A textura anterior era um pedaco de parede com varias tags sobrepostas: a
   tinta caia irregular e a letra sumia em partes do botao. Esta e uma unica
   pincelada isolada em preto, com escorridos nas pontas. Como a tinta e
   uniforme, da para clarea-la mais sem perder o contraste da letra. */
.btn.primario::before { filter: saturate(1.15) brightness(0.5); }
.btn.primario:hover::before { filter: saturate(1.4) brightness(0.72); }
.btn.primario::after {
  background: radial-gradient(ellipse at center, rgba(6, 8, 4, 0.44), rgba(6, 8, 4, 0.74));
}



/* A capa continua sendo uma faixa, nao uma tela cheia: a biblioteca e o motivo
   de abrir o STFU e nao pode ficar abaixo da dobra. O que cresceu foi a logo. */
.capa {
  position: relative;
  border-bottom: 0;
  padding: 30px 20px 26px;
}
.capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 118% at 50% 45%, rgba(4, 5, 8, 0.93) 12%, rgba(4, 5, 8, 0.55) 58%, rgba(4, 5, 8, 0.2) 100%);
  pointer-events: none;
}
/* filete de spray no lugar da linha de 1px: a borda reta denunciava o painel */
.capa::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--textura-spray) center/100% 400% no-repeat;
  mix-blend-mode: screen;
  opacity: 0.85;
  z-index: 2;
}
.capa > * { position: relative; z-index: 3; }
.capa-frase { color: #b9bcc4; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }

/* So a logo, grande e no meio. A frase embaixo dividia a atencao num lugar que
   existe para dizer uma coisa so. */
.capa-frase { display: none; }
.capa-logo {
  /* o PNG tem margem transparente dos lados, entao a caixa e bem maior do que
     a palavra parece — 940px na caixa da uma logo de ~640px na tela */
  width: 940px;
  max-width: 82%;
  filter: drop-shadow(0 0 26px rgba(198, 240, 78, 0.55)) drop-shadow(0 0 70px rgba(198, 240, 78, 0.3))
    drop-shadow(0 12px 44px rgba(0, 0, 0, 0.95));
}
/* O escuro do miolo acompanha a logo maior, senao o grafite passa por cima
   dela. */
.capa::after {
  background: radial-gradient(52% 88% at 50% 50%, rgba(4, 5, 8, 0.9) 10%, rgba(4, 5, 8, 0.6) 55%, rgba(4, 5, 8, 0.3) 100%);
}
/* Seta de rolagem: sem ela a biblioteca some abaixo da dobra e a tela parece
   um fim de caminho. */
.capa-desce {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font: 700 22px/1 "Segoe UI", system-ui, sans-serif;
  color: #eaffb0;
  text-shadow: 0 0 6px rgba(198, 240, 78, 0.85), 0 0 18px rgba(198, 240, 78, 0.45);
  animation: capa-desce 1.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes capa-desce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-desce { animation: none; }
}


/* ---- a marca escorrendo sangue, com a luz falhando ----
   A logo virou uma peca pintada: letras bolha de miolo osso, contorno vinho e
   sangue escorrendo ate pingar. O brilho verde-acido saiu de cima dela — duas
   cores gritando no mesmo lugar viravam borrao. O acento verde continua no
   resto da interface; a marca fica sendo a unica coisa vermelha da tela, que e
   o que faz ela ser vista primeiro.

   O piscar imita lampada de tubo prestes a queimar: duas animacoes de duracao
   propositalmente sem multiplo comum (2.7s e 7.1s), entao o padrao nunca se
   repete igual. Uma faz a luz respirar, a outra apaga de repente. */
.capa-logo {
  /* A peca nova e muito mais alta que o antigo lettering deitado, entao quem
     manda no tamanho e a altura: por largura a faixa dobrava e empurrava a
     biblioteca para fora da tela. */
  width: auto;
  height: 260px;
  max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 245, 235, 0.28)) drop-shadow(0 0 60px rgba(150, 20, 24, 0.4))
    drop-shadow(0 12px 40px rgba(0, 0, 0, 0.95));
  animation: luz-respira 4.1s ease-in-out infinite;
}
@keyframes luz-respira {
  0%, 100% { opacity: 0.94; }
  38% { opacity: 1; }
  62% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-logo { animation: none; opacity: 1; }
}

/* ---- fundo neutro ----
   A parede de grafite atras de tudo brigava com a marca: dois grafites na mesma
   tela e nenhum ganha. O fundo passa a ser carvao neutro, sem viés azul, como
   nas artes de adesivo — a unica coisa colorida da tela vira o conteudo (as
   capas dos jogos) e o vermelho da marca. As texturas de spray continuam nos
   botoes, que e onde a tinta ainda faz sentido. */
:root {
  --fundo: #141414;
  --painel: #1c1c1e;
  --borda: #2e2e32;
}
body {
  background-color: var(--fundo);
  background-image: none;
}
.inicio { background: var(--fundo); }
.capa {
  background: #141414;
  padding: 34px 20px 30px;
}
/* sem parede, o escuro do miolo nao tem nada para esconder */
.capa::after { display: none; }
/* a linha de spray fica: e o unico respingo de cor no corte entre a marca e a
   biblioteca, e substitui a borda de 1px */
.capa::before { opacity: 0.7; }

/* O carvao chapado ficava plastico numa tela desse tamanho. Entra o concreto
   preto fosco — a mesma parede lisa do fundo das artes de adesivo: da textura
   sem desenho nenhum, entao nao briga com a marca nem com as capas dos jogos. */
:root { --textura-concreto: url(build/textura/concreto.jpg); }
body {
  background-color: var(--fundo);
  background-image: var(--textura-concreto);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.inicio { background: rgba(20, 20, 20, 0.55); }
.capa {
  background: transparent;
  box-shadow: inset 0 -60px 90px -60px rgba(0, 0, 0, 0.9);
}


/* ---- vitrine sem moldura pintada ----
   A moldura de respingos era do tempo em que o fundo era parede de grafite;
   com o concreto neutro ela virou o unico barulho da tela e roubava a atencao
   do parceiro, que e quem paga o espaco. Volta a ser o que um destaque de loja
   deve ser: o concreto do resto do app, um filete de acento embaixo e a arte
   inteira no meio. */
/* Proporcao fixa em vez de altura fixa. Com 230px de altura num palco que
   acompanha a largura da coluna, a caixa ficava com quase 5:1 e qualquer banner
   de proporcao normal virava uma ilha no meio de duas tarjas pretas. Agora o
   palco tem a MESMA proporcao que a arte pedida (4:1), entao ela preenche. */
.vitrine-palco {
  background: #101012 var(--textura-concreto) center/cover no-repeat;
  border: 1px solid var(--borda);
  border-bottom: 2px solid var(--acento);
  clip-path: none;
  height: auto;
  /* Valor de partida enquanto a imagem carrega. O numero de verdade vem da
     propria arte, em renderer.js, no `load` da imagem. */
  aspect-ratio: 5 / 1;
  max-height: 320px;
}
/* O escurecido das bordas saiu junto com o `contain`: ele existia para segurar
   uma arte que flutuava no meio. Com a arte preenchendo, ele so sujava o
   trabalho do parceiro. */
/* A arte fica ACIMA do veu: sem isso o gradiente do ::before (z-index 1) pinta
   por cima do cartao, que e posicionado mas sem z-index proprio. */
.vitrine-cartao { z-index: 2; }
/* `cover` e nao `contain`: banner de parceiro e arte de sangria, feita para
   encostar nas bordas. Com `contain` sobrava fundo dos dois lados e o parceiro
   pagava por um espaco que ficava preto. Arte na proporcao certa nao perde
   nada; fora dela, o corte e pelo centro. */
.vitrine-arte {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
}
.vitrine-selo {
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(198, 240, 78, 0.35);
}

/* Anuncio sem foto ganha uma capa de verdade: camera riscada em estencil
   vermelho na mesma parede preta do resto do app. Antes era um retangulo cinza
   vazio, que na grade parecia imagem que nao carregou — o vendedor levava a
   culpa de um bug que nao existia. */
:root { --textura-sem-foto: url(build/textura/sem-foto.jpg); }
.mc-capa.sem-capa {
  background: #101012 var(--textura-sem-foto) center/cover no-repeat;
}


/* ---- as tags de papel, acesas ----
   Antes eram pilulas de 9px em Segoe UI com um contorno da mesma cor: liam-se
   como etiqueta de formulario. Agora sao letreiro.

   A fonte e Bebas Neue e nao uma de grafite: a tag tem 10px de altura e cabe do
   lado do nick — marcador e spray viram borrao nesse tamanho. Bebas e
   condensada e so caixa alta, entao continua legivel pequena e tem a cara de
   cartaz de rua, que e o que a tag precisa ser.

   O aceso vem em tres camadas: a letra brilha, o contorno brilha para fora e o
   fundo escuro por tras segura o contraste — neon sobre neon nao se le. */
.tag-papel {
  font-family: "Bebas Neue", "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.13em;
  padding: 2px 7px 1px;
  border-radius: 0;
  /* canto cortado, o mesmo estencil dos botoes */
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid currentColor;
  vertical-align: 0;
}
.presente .tag-papel { font-size: 10px; padding: 1px 6px 0; }

/* Cada papel acende na sua cor. As cores subiram de tom: a versao antiga era
   pensada para texto, e cor de texto vira cinza quando vira brilho. */
.tag-fundador {
  color: #fff0c2;
  text-shadow: 0 0 6px rgba(255, 207, 69, 0.9), 0 0 15px rgba(255, 207, 69, 0.6),
    0 0 30px rgba(255, 175, 20, 0.4);
  box-shadow: 0 0 10px rgba(255, 207, 69, 0.55), 0 0 22px rgba(255, 175, 20, 0.28),
    inset 0 0 10px rgba(255, 207, 69, 0.2);
}
.tag-admin {
  color: #ffd2ce;
  text-shadow: 0 0 6px rgba(255, 45, 33, 0.9), 0 0 15px rgba(255, 45, 33, 0.65),
    0 0 32px rgba(255, 30, 20, 0.42);
  box-shadow: 0 0 10px rgba(255, 45, 33, 0.6), 0 0 24px rgba(255, 30, 20, 0.3),
    inset 0 0 10px rgba(255, 45, 33, 0.2);
}
.tag-equipe {
  color: #d5efff;
  text-shadow: 0 0 6px rgba(63, 182, 255, 0.9), 0 0 15px rgba(63, 182, 255, 0.6),
    0 0 30px rgba(20, 140, 255, 0.4);
  box-shadow: 0 0 10px rgba(63, 182, 255, 0.55), 0 0 22px rgba(20, 140, 255, 0.28),
    inset 0 0 10px rgba(63, 182, 255, 0.2);
}

/* O fundador ganha um pulsar lento de mais: e um cargo so, e piscar igual aos
   outros tiraria o que ele tem de raro. */
.tag-fundador { animation: tag-fundador 3.4s ease-in-out infinite; }
@keyframes tag-fundador {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 207, 69, 0.55), 0 0 22px rgba(255, 175, 20, 0.28),
      inset 0 0 10px rgba(255, 207, 69, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 207, 69, 0.9), 0 0 38px rgba(255, 175, 20, 0.5),
      inset 0 0 15px rgba(255, 207, 69, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tag-fundador { animation: none; }
}

/* As tags de apoio seguem a mesma regra: mesma fonte, mesmo corte, mesmo
   fundo — o que muda e a cor. Duas familias de etiqueta na mesma linha do chat
   pareceriam dois sistemas diferentes. */
.tag-apoio {
  font-family: "Bebas Neue", "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  border-radius: 0;
  clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
  background: rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   Os botoes, todos pintados
   -------------------------------------------------------------------------
   Cada tipo de botao ganhou a sua chapa de tinta, gerada uma a uma: verde-acido
   para acao principal, vermelho-sangue para o que destroi, branco-osso para o
   secundario e rolo cinza para o discreto.

   A receita e sempre a mesma, e vale explicar uma vez so:
   - ::before leva a chapa com mix-blend-mode:screen, entao o preto do arquivo
     some sozinho e nao precisa de PNG com alfa;
   - a chapa entra escurecida, e a letra vai clara e acesa por cima. O inverso
     (letra escura sobre tinta clara) sumia nos trechos onde o spray caiu mais
     fino — o contraste passava a depender da textura, o que nao da para
     garantir;
   - ::after e um veu escuro que segura o contraste no meio, onde a tinta e mais
     forte;
   - o canto cortado na diagonal substitui o arredondado: e estencil, nao pilula.
   ========================================================================= */

:root {
  --chapa-verde: url(build/textura/btn-verde.jpg);
  --chapa-vermelha: url(build/textura/btn-vermelho.jpg);
  --chapa-branca: url(build/textura/btn-branco.jpg);
  --chapa-cinza: url(build/textura/btn-cinza.jpg);
  --chapa-quadrada: url(build/textura/btn-quadrado.jpg);
  --corte-estencil: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.btn,
.cartao-acao,
.mc-filtro {
  isolation: isolate;
  border-radius: 0;
  clip-path: var(--corte-estencil);
  overflow: hidden;
}
/* `position` fica FORA da regra compartilhada. Quando ela declarava
   `position: relative` para os tres, o botao do cartao — que e `absolute`, preso
   no canto da capa — virava elemento de fluxo e ia parar em cima do titulo do
   jogo. Cada um declara o seu. */
.btn,
.mc-filtro { position: relative; }
.cartao-acao { position: absolute; }
.btn::before,
.cartao-acao::before,
.mc-filtro::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  z-index: -2;
}
.btn::after,
.cartao-acao::after,
.mc-filtro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 7, 5, 0.42), rgba(6, 7, 5, 0.7));
  z-index: -1;
}

/* ---- o botao comum: rolo cinza, discreto ----
   Antes era um retangulo #1d2029 com borda de 1px: o unico elemento da tela que
   ainda parecia caixa de dialogo do sistema. */
.btn {
  background: #0b0b0d;
  border: 0;
  color: #e8e6df;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 11px;
}
.btn::before { background-image: var(--chapa-cinza); filter: brightness(0.85) saturate(0.6); }
.btn:hover { color: #fff; }
.btn:hover::before { filter: brightness(1.15) saturate(0.7); }

/* ---- acao principal: verde-acido, letra acesa ---- */
.btn.primario {
  background: #060804;
  color: #fdffe9;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: var(--brilho);
}
.btn.primario::before { background-image: var(--chapa-verde); filter: brightness(0.5) saturate(1.15); }
.btn.primario:hover { color: #fff; text-shadow: var(--brilho-forte); }
.btn.primario:hover::before { filter: brightness(0.72) saturate(1.4); }
.btn.primario::after {
  background: linear-gradient(180deg, rgba(6, 8, 4, 0.4), rgba(6, 8, 4, 0.72));
}

/* ---- o que destroi: vermelho-sangue ----
   Chapa vermelha de verdade, nao a verde girada de matiz. O truque do
   hue-rotate deixava a tinta com o mesmo desenho de gotas do botao verde, e
   dois botoes lado a lado denunciavam a copia. */
.btn.perigo {
  background: #0a0404;
  color: #fff0ee;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(255, 59, 48, 0.95), 0 0 12px rgba(255, 59, 48, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.85);
}
.btn.perigo::before { background-image: var(--chapa-vermelha); filter: brightness(0.62) saturate(1.1); }
.btn.perigo:hover::before { filter: brightness(0.88) saturate(1.25); }
.btn.perigo::after {
  background: linear-gradient(180deg, rgba(10, 4, 4, 0.38), rgba(10, 4, 4, 0.68));
}

/* ---- "+ adicionar" por cima da capa do jogo ----
   Fica sobre arte colorida, entao leva a chapa branca: verde sobre capa verde
   sumia. */
.cartao-acao {
  background: #0b0b0d;
  color: #fffdf6;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  border-radius: 0;
  padding: 6px 11px;
}
.cartao-acao::before { background-image: var(--chapa-branca); filter: brightness(0.5) saturate(0.5); }
.cartao-acao:hover::before { filter: brightness(0.78) saturate(0.6); }
/* Ja na biblioteca: verde, porque agora e confirmacao e nao convite. */
.cartao-acao.ja::before { background-image: var(--chapa-verde); filter: brightness(0.5) saturate(1.15); }
.cartao-acao.ja { color: #eaffb0; text-shadow: var(--brilho); }

/* ---- filtros do mercado ---- */
.mc-filtro {
  border: 0;
  background: #0b0b0d;
  color: #b9b7b0;
  padding: 5px 13px;
}
/* O filtro apagado estava escuro demais: virava rotulo, nao botao. Subiu o
   suficiente para se ler que da para clicar, sem competir com o ativo. */
.mc-filtro::before { background-image: var(--chapa-cinza); filter: brightness(0.78) saturate(0.4); }
.mc-filtro:hover::before { filter: brightness(0.8) saturate(0.5); }
.mc-filtro.ativo::before { background-image: var(--chapa-verde); filter: brightness(0.52) saturate(1.15); }
.mc-filtro.ativo {
  color: #eaffb0;
  text-shadow: 0 0 5px rgba(198, 240, 78, 0.8), 0 0 14px rgba(198, 240, 78, 0.4);
  box-shadow: none;
}


/* =========================================================================
   TODO BOTÃO É UMA PEÇA.

   O botão de doar virou uma peça física — base escura por baixo, tampa com a
   borda clara em cima, e o clique afunda até a base. Funcionou, e ficou
   estranho ser o único: os outros continuavam recortes chapados, e a tela
   passou a ter dois vocabulários.

   Agora é um só. O que NÃO muda é a cor: se todo botão fosse a peça verde
   acesa, o doar deixaria de saltar — e o que fazia ele funcionar era ser o
   único assim. Então o volume é igual em todos e a cor continua sendo a
   hierarquia: grafite no comum, verde no confirmar, vermelho no que destrói.

   A chapa pintada continua sendo a face da peça. Ela é a identidade do
   programa; o que se acrescentou foi a espessura por baixo dela.
   ========================================================================= */
.btn,
.cartao-acao,
.mc-filtro {
  /* O corte de estêncil sai: um chanfro diagonal briga com a base reta que
     agora existe embaixo, e a peça deixava de parecer apoiada em algo. */
  clip-path: none;
  border-radius: 7px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}
/* A espessura. Três camadas, sempre na mesma ordem:
   o fio preto que separa a peça do fundo, a base que aparece por baixo, e a
   sombra que apoia o conjunto. Por dentro, a luz de cima e a penumbra de
   baixo — é o que faz a face parecer levemente abaulada. */
.btn,
.mc-filtro {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 3px 0 -1px #05060a,
    0 5px 11px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -7px 13px rgba(0, 0, 0, 0.35);
}
.btn:hover,
.mc-filtro:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 4px 0 -1px #05060a,
    0 7px 15px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -7px 13px rgba(0, 0, 0, 0.32);
}
/* O clique afunda até a base: é um botão sendo apertado, não uma cor mudando. */
.btn:active,
.mc-filtro:active,
.cartao-acao:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 -1px #05060a,
    0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -5px 11px rgba(0, 0, 0, 0.4);
}
.btn:disabled,
.mc-filtro:disabled {
  transform: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 -5px 11px rgba(0, 0, 0, 0.4);
}

/* A base herda o metal da peça: base preta sob um botão verde lê como sombra
   solta, e não como a lateral da mesma coisa. */
.btn.primario {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 3px 0 -1px #0a2f1c,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(24, 214, 106, 0.22),
    inset 0 1px 0 rgba(220, 255, 200, 0.26),
    inset 0 -7px 13px rgba(0, 0, 0, 0.32);
}
.btn.primario:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 4px 0 -1px #0a2f1c,
    0 7px 16px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(24, 214, 106, 0.42),
    inset 0 1px 0 rgba(220, 255, 200, 0.32),
    inset 0 -7px 13px rgba(0, 0, 0, 0.3);
}
.btn.primario:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 -1px #0a2f1c,
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(24, 214, 106, 0.3),
    inset 0 1px 0 rgba(220, 255, 200, 0.18),
    inset 0 -5px 11px rgba(0, 0, 0, 0.4);
}

.btn.perigo {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 3px 0 -1px #3a0c0c,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(255, 59, 48, 0.18),
    inset 0 1px 0 rgba(255, 210, 205, 0.24),
    inset 0 -7px 13px rgba(0, 0, 0, 0.32);
}
.btn.perigo:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 4px 0 -1px #3a0c0c,
    0 7px 16px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 59, 48, 0.38),
    inset 0 1px 0 rgba(255, 210, 205, 0.3),
    inset 0 -7px 13px rgba(0, 0, 0, 0.3);
}
.btn.perigo:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 0 -1px #3a0c0c,
    0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 210, 205, 0.16),
    inset 0 -5px 11px rgba(0, 0, 0, 0.4);
}

/* O botão aceso (aba de filtro escolhida, "já na biblioteca") não afunda nem
   levanta: ele já está pressionado. Um botão ligado que ainda salta no hover
   diz que dá para ligar de novo. */
.btn.ativo,
.mc-filtro.ativo {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(0, 0, 0, 0.4);
}
.btn.ativo:hover,
.mc-filtro.ativo:hover { transform: none; }

/* O "+ adicionar" mora em cima da arte da capa, onde uma base escura viraria
   borrão: ele leva a luz e a penumbra, sem a espessura. */
.cartao-acao {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -6px 12px rgba(0, 0, 0, 0.3);
}

/* O DOAR guarda o que é dele: sem a chapa pintada por cima, porque a tampa
   verde já é a face, e com a própria espessura definida lá em cima. */
.btn.doar::before,
.btn.doar::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .cartao-acao,
  .mc-filtro { transition: none; }
  .btn:hover,
  .btn:active,
  .mc-filtro:hover,
  .mc-filtro:active,
  .cartao-acao:active { transform: none; }
}

/* Os niveis de apoio acendem na mesma receita das tags de papel: letra quase
   branca no nucleo e halo colorido em volta. Bronze fica de proposito com o
   brilho mais curto e diamante com o mais longo — o brilho passa a ser parte
   do que se compra. */
.apoio-bronze {
  color: #ffdcb8;
  text-shadow: 0 0 5px rgba(208, 138, 78, 0.85), 0 0 12px rgba(208, 138, 78, 0.45);
  box-shadow: 0 0 7px rgba(208, 138, 78, 0.4), inset 0 0 8px rgba(208, 138, 78, 0.16);
}
.apoio-prata {
  color: #f4f7fb;
  text-shadow: 0 0 5px rgba(207, 214, 224, 0.9), 0 0 14px rgba(207, 214, 224, 0.5);
  box-shadow: 0 0 8px rgba(207, 214, 224, 0.45), inset 0 0 9px rgba(207, 214, 224, 0.18);
}
.apoio-ouro {
  color: #fff0c2;
  text-shadow: 0 0 6px rgba(242, 201, 76, 0.9), 0 0 16px rgba(242, 201, 76, 0.6),
    0 0 30px rgba(255, 175, 20, 0.35);
  box-shadow: 0 0 10px rgba(242, 201, 76, 0.55), inset 0 0 10px rgba(242, 201, 76, 0.2);
}
.apoio-diamante {
  color: #e6fdff;
  text-shadow: 0 0 6px rgba(111, 227, 245, 0.95), 0 0 18px rgba(111, 227, 245, 0.65),
    0 0 36px rgba(70, 200, 255, 0.4);
  box-shadow: 0 0 12px rgba(111, 227, 245, 0.6), 0 0 26px rgba(70, 200, 255, 0.3),
    inset 0 0 11px rgba(111, 227, 245, 0.22);
  animation: tag-diamante 2.8s ease-in-out infinite;
}
@keyframes tag-diamante {
  0%, 100% {
    box-shadow: 0 0 12px rgba(111, 227, 245, 0.6), 0 0 26px rgba(70, 200, 255, 0.3),
      inset 0 0 11px rgba(111, 227, 245, 0.22);
  }
  50% {
    box-shadow: 0 0 20px rgba(111, 227, 245, 0.95), 0 0 44px rgba(70, 200, 255, 0.55),
      inset 0 0 16px rgba(111, 227, 245, 0.32);
  }
}
@media (prefers-reduced-motion: reduce) {
  .apoio-diamante { animation: none; }
}

/* O botao ligado ("◉ ligado", "leve", os de layout) pintava fundo verde e texto
   escuro. Com a chapa por cima, esse texto escuro passou a cair sobre tinta
   escura e sumia. Ligado agora e a chapa verde com a letra acesa, igual ao
   filtro ativo do mercado — e o estado "ligado" passa a ter a mesma cara em
   toda a interface. */
.btn.ativo,
.painel .acoes .traduzir.on {
  background: #060804;
  border: 0;
  color: #eaffb0;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(198, 240, 78, 0.85), 0 0 14px rgba(198, 240, 78, 0.45);
}
.btn.ativo::before,
.painel .acoes .traduzir.on::before { background-image: var(--chapa-verde); filter: brightness(0.5) saturate(1.15); }
.btn.ativo:hover::before,
.painel .acoes .traduzir.on:hover::before { filter: brightness(0.72) saturate(1.4); }


/* ---- o dedo, do lado da marca ----
   Mesma linguagem da logo: miolo osso, contorno vinho, sangue escorrendo. Ele
   vem do MESMO gerador e no mesmo estilo, senao viraria um emoji colado ali.

   Fica um pouco mais baixo e inclinado de proposito: alinhado e reto ele parecia
   parte da palavra, e o que se quer e um adesivo grudado ao lado. E o `alt` e
   vazio com aria-hidden porque a marca ja e lida como "STFU" — leitor de tela
   anunciando "mao com dedo do meio" no meio do nome so atrapalha. */
.capa-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 22px);
}
.capa-dedo {
  height: 200px;
  width: auto;
  transform: rotate(7deg) translateY(6px);
  filter: drop-shadow(0 0 18px rgba(255, 245, 235, 0.22)) drop-shadow(0 0 46px rgba(150, 20, 24, 0.38))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.9));
  /* Respira junto com a marca, no mesmo compasso. */
  animation: luz-respira 4.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .capa-dedo { animation: none; }
}
/* Em janela estreita o dedo sai antes da logo: entre perder o nome e perder o
   adereco, perde-se o adereco. */
@media (max-width: 700px) {
  .capa-dedo { display: none; }
}


/* A cópia em `screen` por cima da marca — o "letreiro com o miolo falhando" —
   saiu: sobre um PNG com sombra e escorridos ela virava um fantasma cinza em
   cima das letras, e a peça ficava suja em vez de acesa. O que sobrou é o
   respirar lento, que a arte já sustenta sozinha.
   Se um dia voltar a ideia, o caminho é a arte vir em duas camadas separadas
   (contorno e preenchimento), não uma cópia filtrada da mesma imagem. */
.capa-logo,
.capa-dedo {
  animation: luz-respira 4.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .capa-logo,
  .capa-dedo { animation: none; }
}


/* ---- o laco do mascote atras da marca ----
   O video ocupa a faixa inteira e o mascote mora no terco direito, entao a marca
   sai do centro e vai para a esquerda: nao e para os dois disputarem o mesmo
   pedaco de parede.

   `object-position: right` porque em janela estreita o `cover` corta pelas
   laterais — cortando pela esquerda perde-se parede vazia, cortando pela direita
   perde-se o personagem. */
/* O video NAO cobre a faixa. Numa faixa de ~5:1 o `cover` sobre um 16:9 corta
   tanto que decapitava o balao de fala e cortava as pernas dele. Aqui ele entra
   inteiro, encostado a direita, com a altura da faixa mandando na largura — o
   fundo do video e a mesma parede preta do app, entao a emenda nao aparece. */
.capa-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100%;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  z-index: 0;
}
/* Veu por cima do video: a parede do video e mais clara que a do app, e sem isso
   a faixa da capa aparecia como um retangulo mais claro no meio da tela. */
.capa::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, rgba(15, 15, 15, 0.92) 0%, rgba(15, 15, 15, 0.72) 45%, rgba(15, 15, 15, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
}
.capa { display: block; }
.capa-marca {
  position: relative;
  z-index: 3;
  /* `width: 100%` nao e decoracao: sem ele a caixa da marca encolhe ate o
     conteudo (medido: 683px numa faixa de 1400px) e o `flex-start` passa a
     alinhar dentro de uma caixa que ja estava centrada — a marca nao saia do
     meio por mais que se mexesse no justify-content. */
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-left: clamp(20px, 6vw, 90px);
}
/* Em janela estreita nao cabem os dois. O video sai e a marca volta ao centro —
   perde-se a animacao, nunca o nome. */
@media (max-width: 900px) {
  .capa-video { display: none; }
  .capa::after { background: none; }
  .capa-marca { justify-content: center; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-video { display: none; }
}


/* A faixa cresce para caber a cena inteira do mascote sem corte. Com 324px ele
   saia com 110px de altura — pequeno demais para se ver o que ele faz. */
.capa { min-height: 420px; align-content: center; }
/* O veu acompanha: escuro a esquerda, onde mora a marca, e limpo a direita,
   onde o mascote precisa aparecer. */
.capa::after {
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.96) 0%, rgba(20, 20, 20, 0.9) 30%,
    rgba(20, 20, 20, 0.35) 62%, rgba(20, 20, 20, 0) 78%);
}


/* ---- a cena do mascote e a fala dele ----
   A fala NAO esta no video: o modelo desenha o balao vazio e o texto entra por
   HTML. Assim ele nunca sai com erro de ortografia (numa tentativa o moletom
   dele virou "STFF") e, principalmente, traduz junto com o resto do app.

   O bloco tem a proporcao do video, entao a posicao em % cai sempre em cima do
   balao, seja qual for a largura da janela. */
.capa-cena {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 16 / 9;
  max-width: 62%;
  z-index: 0;
  pointer-events: none;
}
.capa-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* A borda esquerda do video e um pouco mais clara que o fundo do app e
     aparecia como uma emenda vertical no meio da faixa. A mascara dissolve os
     primeiros 20% e a emenda some. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
}
.capa-fala {
  position: absolute;
  /* Centro do balao: 59% da largura da cena, 19% da altura. A 58% o "BEM"
     encostava na borda esquerda, a 60% o "STFU!" passava da direita — a frase
     numa linha so e larga demais para um balao redondo, entao ela quebra em
     duas (ver `width`). */
  left: 59%;
  top: 19%;
  transform: translate(-50%, -50%);
  /* Estreito de proposito: forca a quebra em duas linhas, que e o formato que
     cabe num balao redondo sem raspar nas bordas. */
  width: 19%;
  text-align: center;
  color: #14141a;
  font-family: "Permanent Marker", "Comic Sans MS", Impact, sans-serif;
  font-size: clamp(11px, 1.15vw, 19px);
  line-height: 1.1;
  opacity: 0;
  transition: opacity 0.18s ease;
}
/* Quem liga e desliga a fala e o proprio video, pelo currentTime (ver
   renderer.js). A primeira versao usava uma animacao CSS de 15s contando que os
   dois relogios ficassem em fase — nao ficam: o video demora a bufferizar e a
   frase aparecia antes do balao abrir. */
.capa-fala.falando { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .capa-cena { display: none; }
}
@media (max-width: 900px) {
  .capa-cena { display: none; }
}

/* =========================================================================
   JANELA DO CHAT
   -------------------------------------------------------------------------
   O chat saiu de dentro do programa e virou janela, como a de amigos. Aqui ele
   ocupa a janela inteira em vez de ser uma gaveta lateral.

   A lateral segue a ordem em que se procura: conversas (alguem esperando
   resposta), salas da comunidade, e os jogos — cada jogo com o NOME dele como
   título e as duas portas embaixo. Antes era uma tira única de `# dbidle` e
   `⇄ rmt · dbidle`, tudo com o mesmo peso e o ID cru no lugar do nome.
   ========================================================================= */

.janela-chat {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--fundo);
}
.janela-chat .chat-painel {
  position: static;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.janela-chat .chat-topo {
  -webkit-app-region: drag;
  align-items: center;
  gap: 12px;
}
.janela-chat .chat-topo button,
.janela-chat .chat-topo input { -webkit-app-region: no-drag; }
.chat-titulo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.chat-titulo strong { font-size: 14px; }
.chat-acoes { display: flex; gap: 6px; margin-left: auto; }

/* ---- o corpo: lateral, meio, presentes ---- */
.janela-chat .chat-corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
}
.chat-lateral {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--borda);
  background: #171718;
}
.chat-busca { padding: 9px 10px; border-bottom: 1px solid var(--borda); }
.chat-busca input {
  width: 100%;
  background: #0f0f10;
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto);
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
}
.chat-busca input:focus { outline: none; border-color: #4a4a50; }
.janela-chat .chat-canais {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 6px 10px;
  display: block;
}
/* O pe da lateral. Chegou a ter tres botoes quando a chamada nasceu aqui, e
   em tres o flex dividia a largura em partes iguais e cortava os rotulos no
   meio ("negoc", "chama"). A chamada subiu para o topo — e um estado, nao um
   lugar — e sobraram os dois de sempre, que cabem lado a lado. */
.chat-lateral-pe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--borda);
}
.chat-lateral-pe .btn {
  font-size: 11.5px;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-canais-titulo {
  margin: 12px 8px 4px;
  font: 400 11px/1 "Bebas Neue", "Archivo Black", Impact, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f7078;
}
.chat-canais-vazio { margin: 18px 10px; font-size: 12px; color: var(--fraco); }

/* O nome do jogo é rótulo, não botão: quem clica são as duas portas embaixo. */
.chat-grupo-nome {
  margin: 9px 8px 2px;
  font-size: 12px;
  font-weight: 600;
  color: #b9b7b0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.janela-chat .chat-canal-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 9px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #a8a9b0;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.janela-chat .chat-canal-item.filho { padding-left: 20px; font-size: 12px; }
.janela-chat .chat-canal-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--texto); }
.janela-chat .chat-canal-item.ativo {
  background: rgba(198, 240, 78, 0.12);
  color: #eaffb0;
  box-shadow: inset 2px 0 0 var(--acento);
}
.janela-chat .chat-canal-item.nao-lida { color: var(--texto); font-weight: 600; }
.janela-chat .chat-canal-item.nao-lida::after {
  content: attr(data-quantas);
  float: right;
  min-width: 17px;
  text-align: center;
  background: var(--acento);
  color: #0f120a;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
}

.chat-meio { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.janela-chat .chat-mensagens { flex: 1; min-height: 0; }
.janela-chat .chat-presentes {
  width: 190px;
  border-left: 1px solid var(--borda);
  overflow-y: auto;
}


@media (max-width: 720px) {
  .janela-chat .chat-corpo { grid-template-columns: 1fr; }
  .chat-lateral, .janela-chat .chat-presentes { display: none; }
}

/* Amigo em jogo: o verde é o mesmo do "online", mas o texto agora diz QUAL
   jogo. É a informação que se procura ao abrir a lista — quem está jogando o
   quê, e se dá para chamar. */
.ja-pessoa.viva .ja-meio span.em-jogo { color: var(--acento); }

/* =========================================================================
   O RECIBO DO NEGÓCIO  (substitui a faixa)
   -------------------------------------------------------------------------
   O que este chat tem e nenhum outro tem é dinheiro parado entre dois
   estranhos. Então o negócio deixa de ser mais uma faixa cinza e vira um
   objeto: papel quente sobre o concreto, borda picotada, valores alinhados em
   fonte de máquina e o estado como carimbo.

   É a ÚNICA coisa barulhenta da tela, de propósito — o resto das mensagens
   ficou mais quieto para ele poder gritar.
   ========================================================================= */
:root {
  --papel: #e8e2d4;
  --papel-tinta: #1a1713;
  --papel-fraco: #6b6559;
  --papel-linha: #b3ab98;
  --maquina: ui-monospace, Consolas, "SF Mono", monospace;
}

.chat-negocio {
  position: relative;
  flex: none;
  margin: 14px 20px 4px;
  padding: 13px 16px 14px;
  background: var(--papel);
  color: var(--papel-tinta);
  border: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  transform: rotate(-0.25deg);
}
.chat-negocio[hidden] { display: none; }
/* O picote: um raio de círculo transparente repetido na borda. */
.chat-negocio::before,
.chat-negocio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: radial-gradient(circle at 4px 0, transparent 4px, var(--papel) 4.5px) 0 0 / 12px 6px repeat-x;
}
.chat-negocio::before { top: -5px; transform: rotate(180deg); }
.chat-negocio::after { bottom: -5px; }

.neg-cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dashed var(--papel-linha);
  padding-bottom: 8px;
}
.neg-cabeca strong {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--papel-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O jogo é o primeiro filtro de quem lê: "isso é meu?" antes de "o que faço?" */
.neg-jogo {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel-fraco);
  border: 1px solid var(--papel-linha);
  padding: 1px 7px;
  white-space: nowrap;
}
.neg-valor {
  margin-left: auto;
  font-family: var(--maquina);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--papel-tinta);
  white-space: nowrap;
}

/* As etapas viram linhas de conta: nome, pontilhado, valor. O que já passou
   mostra o valor; o que falta mostra traço. */
.neg-passos {
  list-style: none;
  /* a folga embaixo e onde o carimbo pousa, sem encostar na ultima linha */
  margin: 9px 0 34px;
  padding: 0;
  font-family: var(--maquina);
  font-size: 11.5px;
  color: #4a443b;
  display: block;
}
.neg-passo {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: #4a443b;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
.neg-passo::before {
  content: '·';
  width: 12px;
  flex: none;
  position: static;
  background: none;
}
.neg-passo.feito { color: #2f2a23; }
.neg-passo.feito::before { content: '\2713'; }
.neg-passo.agora { color: var(--papel-tinta); font-weight: 700; }
.neg-passo.agora::before { content: '\25B8'; }
.neg-passo .pontos {
  flex: 1;
  border-bottom: 1px dotted var(--papel-linha);
  transform: translateY(-4px);
}
.neg-passo .quanto { white-space: nowrap; }

/* O carimbo. Fica na esquerda: na direita ele cobria a coluna de valores, que
   é o que a pessoa foi ali ler. */
.neg-carimbo {
  position: absolute;
  left: 14px;
  bottom: 48px;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--sangue, #8f1418);
  border: 2.5px solid var(--sangue, #8f1418);
  background: rgba(232, 226, 212, 0.55);
  padding: 2px 10px 0;
  transform: rotate(-7deg);
  opacity: 0.8;
  border-radius: 3px;
  pointer-events: none;
}

.neg-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--papel-linha);
}
/* Os botões do recibo são de papel, não de spray: a chapa de tinta do resto do
   app sobre fundo claro fica ilegível. */
.neg-acoes .btn,
.neg-acoes .btn.primario,
.neg-acoes .btn.perigo {
  font: 600 11.5px/1.5 "Segoe UI", system-ui, sans-serif;
  padding: 6px 12px;
  border: 1px solid var(--papel-linha);
  border-radius: 4px;
  background: none;
  color: #3a352d;
  letter-spacing: 0;
  text-shadow: none;
  clip-path: none;
  isolation: auto;
  overflow: visible;
}
.neg-acoes .btn::before,
.neg-acoes .btn::after { content: none; }
.neg-acoes .btn:hover { background: rgba(0, 0, 0, 0.06); }
.neg-acoes .btn.primario {
  background: var(--papel-tinta);
  color: var(--papel);
  border-color: var(--papel-tinta);
}
.neg-acoes .btn.perigo { color: #7c2028; border-color: #b9787c; }
.neg-dica { font-size: 11.5px; color: var(--papel-fraco); }

/* DE QUEM E A VEZ.
   Ocupa a linha inteira acima dos botoes, porque e a primeira coisa que a
   pessoa precisa ler ao abrir a sala: "e comigo agora?". Quando e dela, ganha
   a cor do acento — o resto da faixa fica quieto de proposito, para que so a
   propria vez chame atencao. */
.neg-vez {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--papel-fraco);
  margin-bottom: 2px;
}
.neg-vez.minha {
  color: var(--acento);
}

/* =========================================================================
   AS FALAS PERDEM A CAIXA
   Cada mensagem era um balão com fundo e borda; numa conversa de quarenta
   linhas viram quarenta retângulos disputando atenção. Texto de chat é texto.
   ========================================================================= */
.janela-chat .chat-msg {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 14px 0 0;
  max-width: none;
}
.janela-chat .chat-msg p {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: #d9d7d0;
}
/* A minha fala leva um filete de tinta em vez de balão.
   O filete fica na DIREITA, colado no texto: a mensagem própria é alinhada à
   direita e o parágrafo ocupa a linha inteira, então uma borda à esquerda
   aparecia sozinha na outra ponta da tela — um risco solto sem relação
   nenhuma com a frase. `width: fit-content` faz o bloco encolher até o texto
   para a borda encostar nele. */
.janela-chat .chat-msg.minha p {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  border-right: 2px solid var(--acento);
  padding-right: 9px;
}
.janela-chat .chat-cabeca .hora {
  font-family: var(--maquina);
  font-size: 10.5px;
  color: #55565d;
}

/* Números onde números importam: valor do negócio na lista lateral. */
.chat-canal-item .grana {
  float: right;
  font-family: var(--maquina);
  font-size: 11px;
  color: #8f9098;
}

/* =========================================================================
   APOIAR O STFU — a escada das patentes.

   O que havia antes eram quatro linhas iguais com preco a direita e dois
   botoes cinzentos cada: oito botoes na tela ao mesmo tempo, porque a tela
   fazia duas perguntas de uma vez (qual nivel? como pagar?). Aqui ela pergunta
   uma de cada vez, e o espaco que sobra vira informacao.

   As patentes sao ACUMULATIVAS: prata tem o do bronze mais anuncio acima dos
   comuns, ouro tem o do prata, e por ai. A trilha da esquerda diz isso sem
   tabela de comparacao — escolher ouro acende bronze e prata junto, cada um na
   sua cor. E a unica ousadia da tela; o resto fica quieto de proposito.
   ========================================================================= */
#dlgDoar { width: min(560px, 94vw); max-width: none; }
#dlgDoar .form.apoio { display: grid; gap: 13px; }

.patentes { display: grid; }

.patente {
  --metal: var(--fraco);
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  grid-template-areas: 'no nome preco' 'no oque preco';
  align-items: center;
  column-gap: 12px;
  padding: 11px 12px 11px 0;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.patente[data-nivel='bronze'] { --metal: #d08a4e; }
.patente[data-nivel='prata'] { --metal: #cfd6e0; }
.patente[data-nivel='ouro'] { --metal: #f2c94c; }
.patente[data-nivel='diamante'] { --metal: #6fe3f5; }

/* A TRILHA. Um fio continuo passando por tras dos emblemas; as pontas param no
   meio do primeiro e do ultimo para a escada ter comeco e fim. */
.patente::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3b4049;
  transition: background-color 0.18s ease;
}
.patente:first-child::before { top: 50%; }
.patente:last-child::before { bottom: 50%; }
.patente.aceso::before { background: var(--metal); }

.pat-no {
  grid-area: no;
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}
.pat-emblema {
  width: 38px;
  height: 38px;
  fill: none;
  /* Apagado NAO e cinza: e o proprio metal rebaixado. Com cinza puro, o azul
     do diamante so existia se voce escolhesse o diamante — e ninguem escolhe
     o que nunca viu. A escada continua legivel porque aceso ganha brilho. */
  stroke: color-mix(in srgb, var(--metal) 40%, var(--borda));
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* O quadrado de fundo esconde a trilha atras do emblema, para o fio nao
     cortar o escudo ao meio. */
  background: var(--painel);
  border-radius: 50%;
  transition: stroke 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
.patente.aceso .pat-emblema {
  stroke: var(--metal);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--metal) 60%, transparent));
}

.pat-nome {
  grid-area: nome;
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--fraco);
  transition: color 0.18s ease;
}
.patente.aceso .pat-nome { color: var(--metal); }

.pat-oque {
  grid-area: oque;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fraco);
  margin-top: 3px;
}
.pat-preco {
  grid-area: preco;
  align-self: center;
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 21px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fraco);
  white-space: nowrap;
  transition: color 0.18s ease;
}
.patente.aceso .pat-preco { color: var(--texto); }

.patente:hover { background: rgba(255, 255, 255, 0.035); }
.patente:hover .pat-emblema { transform: translateY(-1px); }
/* Foco de teclado em osso, NAO em verde-acido: verde e a cor de "escolhido", e
   o showModal() poe o foco no primeiro nivel assim que abre. Com a mesma cor
   nos dois papeis, o Bronze parecia ja escolhido toda vez que a tela abria. */
.patente:focus-visible {
  outline: 2px dashed var(--fita);
  outline-offset: -3px;
}

/* O ESCOLHIDO. Os de baixo acendem junto (a patente inclui as anteriores), mas
   so o escolhido ganha fundo e o fio verde: acender tudo igual perderia
   justamente a informacao de qual foi escolhido. */
.patente.escolhido { background: rgba(198, 240, 78, 0.07); }
.patente.escolhido::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  pointer-events: none;
}

/* COMO PAGAR — so depois de escolher.
   `display: grid` vence o [hidden] do HTML, que so pede `display: none` na
   folha do navegador. Sem estas duas linhas os dois blocos aparecem sempre, e
   a tela volta a fazer as duas perguntas de uma vez — foi exatamente o que a
   primeira foto mostrou. */
.apoio-pagar[hidden], .apoio-codigo[hidden] { display: none; }
.apoio-pagar { display: grid; gap: 9px; }
.apoio-escolhido {
  margin: 0;
  font-size: 12px;
  color: var(--fraco);
}
.apoio-escolhido b { color: var(--texto); }
.apoio-meios { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.apoio-meios .meio {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  height: auto;
  text-align: center;
  line-height: 1.2;
  /* Sem a textura de spray. Ela funciona num botao pequeno; esticada por meia
     tela vira borrao com manchas escuras nas pontas, e a tela ja gasta toda a
     sua ousadia na escada. */
  background-image: none;
}
.apoio-meios .meio:not(.primario) {
  background-color: var(--painel);
  border: 1px solid var(--borda);
}
.apoio-meios .meio.primario { background-color: var(--acento); }
.apoio-meios .meio strong { font-size: 13px; letter-spacing: 0.02em; }
.apoio-meios .meio span { font-size: 10.5px; opacity: 0.75; font-weight: 400; }

/* O CODIGO DO PIX. */
.apoio-codigo { display: grid; gap: 7px; }
.apoio-como { font-size: 11.5px; color: var(--fraco); }
.apoio-codigo input {
  width: 100%;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 11px;
}
.apoio-fino { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .patente, .patente::before, .pat-emblema, .pat-nome, .pat-preco { transition: none; }
}

/* =========================================================================
   A FALA DE QUEM APOIA — moldura na cor da patente.

   As mensagens comuns nao tem caixa nenhuma: foi decisao anterior, para o chat
   ler como conversa e nao como aplicativo de mensagem. E justamente por isso a
   moldura funciona aqui — ela e a UNICA caixa da tela, e quem apoia se
   distingue sem precisar de mais cor, mais fonte ou mais icone.
   ========================================================================= */
/* AS MOLDURAS VALEM NOS DOIS LUGARES.

   Estavam presas ao `.janela-chat`, que só existe na janela do programa: na
   versão de navegador ninguém tinha moldura nenhuma, e a mesma pessoa via
   cores diferentes conforme entrasse por um lado ou pelo outro.

   E O CARGO PASSOU A PINTAR TAMBÉM. Só a patente pintava, então administrador
   e fundador — que são justamente quem se precisa reconhecer numa negociação
   — falavam sem marca nenhuma se não tivessem comprado patente.

   Cargo VENCE patente, como no anel da foto: as regras do cargo vêm depois e
   sobrescrevem o metal. */
.chat-msg[data-apoio] { --metal: var(--fraco); }
.chat-msg[data-apoio='bronze'] { --metal: #d08a4e; }
.chat-msg[data-apoio='prata'] { --metal: #cfd6e0; }
.chat-msg[data-apoio='ouro'] { --metal: #f2c94c; }
.chat-msg[data-apoio='diamante'] { --metal: #6fe3f5; }
/* O vermelho da marca: a cor do que interrompe e do que decide. */
.chat-msg[data-papel='admin'] { --metal: #d6353c; }
/* O verde do botão de apoiar — não o verde-ácido de confirmar. Ele aparece em
   exatamente dois lugares no programa: no botão que sustenta isto no ar e em
   quem o construiu. */
.chat-msg[data-papel='fundador'] { --metal: #16a35d; }

.chat-msg[data-apoio] p,
.chat-msg[data-papel] p {
  border: 1px solid color-mix(in srgb, var(--metal) 42%, transparent);
  background: color-mix(in srgb, var(--metal) 7%, transparent);
  border-radius: 11px;
  padding: 6px 11px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--metal) 12%, transparent);
}
/* O cargo pinta um pouco mais forte que a patente: são poucas pessoas, e é a
   informação que muda uma decisão sobre dinheiro. */
.chat-msg[data-papel] p {
  border-color: color-mix(in srgb, var(--metal) 58%, transparent);
  background: color-mix(in srgb, var(--metal) 10%, transparent);
}
/* A minha fala e alinhada a direita e o paragrafo encolhe ate o texto; a
   moldura substitui o filete, entao ele sai para nao virar borda dupla. */
.chat-msg.minha[data-apoio] p,
.chat-msg.minha[data-papel] p {
  border-right: 1px solid color-mix(in srgb, var(--metal) 42%, transparent);
  padding-right: 11px;
}
/* Diamante pulsa, como o nome pulsa: e o que a tela de apoio promete. Cargo
   nao pulsa — ele ja e a cor mais forte da tela, e duas coisas pulsando
   deixam de chamar atencao. */
.chat-msg[data-apoio='diamante']:not([data-papel]) p {
  animation: moldura-diamante 2.8s ease-in-out infinite;
}
@keyframes moldura-diamante {
  0%, 100% { box-shadow: 0 0 9px rgba(111, 227, 245, 0.14); }
  50% { box-shadow: 0 0 18px rgba(111, 227, 245, 0.34); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg[data-apoio='diamante'] p { animation: none; }
}


/* =========================================================================
   O ANEL EM VOLTA DA FOTO.

   Quem é a pessoa já estava na tela: a patente pintava o nome, o cargo virava
   uma etiqueta. Só que tudo isso morava à direita da foto, dentro da linha de
   texto — e num chat que rola, o olho desce pela coluna das FOTOS. A
   informação estava no lugar por onde ninguém passa.

   O anel é desenhado com box-shadow e não com border: borda muda o tamanho da
   caixa, e as mensagens dançariam meio pixel quando alguém comprasse bronze.

   Dois anéis, sempre: um escuro colado na foto e o colorido por fora. Sem o
   escuro no meio, o anel encosta na imagem e some no primeiro avatar claro.

   CARGO VENCE PATENTE — não por hierarquia de preço, mas porque são coisas
   diferentes: patente é o que a pessoa comprou, cargo é o que ela pode fazer
   com o seu dinheiro. Num fundador que também é diamante, o que você precisa
   saber é que ele é fundador.
   ========================================================================= */
.chat-foto[data-apoio],
.chat-foto[data-papel] {
  box-shadow: 0 0 0 2px var(--fundo, #0f1116), 0 0 0 3.5px var(--anel), 0 0 9px var(--halo);
}

.chat-foto[data-apoio='bronze']   { --anel: #d08a4e; --halo: rgba(208, 138, 78, 0.4); }
.chat-foto[data-apoio='prata']    { --anel: #cfd6e0; --halo: rgba(207, 214, 224, 0.42); }
.chat-foto[data-apoio='ouro']     { --anel: #f2c94c; --halo: rgba(242, 201, 76, 0.5); }
.chat-foto[data-apoio='diamante'] { --anel: #6fe3f5; --halo: rgba(111, 227, 245, 0.55); }

/* ADMIN: o vermelho da marca. É a cor do que interrompe e do que decide —
   quem manda numa negociação e quem pode banir. Ela já quer dizer isso no
   resto do programa; aqui só passa a valer para uma pessoa. */
.chat-foto[data-papel='admin'] {
  --anel: #d6353c;
  --halo: rgba(214, 53, 60, 0.55);
}
/* FUNDADOR: o verde do botão de doar. Não é o verde-ácido de "confirmar" —
   é o verde da peça acesa, e ele aparece em exatamente dois lugares no
   programa inteiro: no botão que sustenta isto no ar e em quem o construiu. */
.chat-foto[data-papel='fundador'] {
  --anel: #16a35d;
  --halo: rgba(24, 214, 106, 0.55);
}

/* Os dois cargos respiram. É o único anel que se move, e é o que faz a
   diferença ser lida como cargo e não como mais uma patente cara. */
.chat-foto[data-papel='admin'],
.chat-foto[data-papel='fundador'] {
  animation: anel-respira 3.2s ease-in-out infinite;
}
@keyframes anel-respira {
  0%, 100% { box-shadow: 0 0 0 2px var(--fundo, #0f1116), 0 0 0 3.5px var(--anel), 0 0 7px var(--halo); }
  50%      { box-shadow: 0 0 0 2px var(--fundo, #0f1116), 0 0 0 3.5px var(--anel), 0 0 16px var(--halo); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-foto[data-papel] { animation: none; }
}

/* Na lista lateral as fotos são menores e ficam lado a lado: o anel encolhe
   junto, senão dois vizinhos se tocam. */
.integrante .chat-foto[data-apoio],
.integrante .chat-foto[data-papel] {
  box-shadow: 0 0 0 1.5px var(--fundo, #0f1116), 0 0 0 2.5px var(--anel), 0 0 6px var(--halo);
  animation: none;
}


/* =========================================================================
   O CARTÃO DE PERFIL.

   É a ficha de quem está do outro lado, e ela existe por causa do dinheiro:
   antes de mandar mil reais para um nome no chat, a pergunta é quantos
   negócios essa pessoa fechou e há quanto tempo ela está aqui.

   Por isso a REPUTAÇÃO é o herói da peça — um número grande, sozinho, com as
   contagens que o explicam logo abaixo. Um cartão que mostrasse tudo do mesmo
   tamanho seria uma tabela, e ninguém lê tabela no meio de uma conversa.

   O metal da pessoa (a patente, ou o cargo) pinta a peça inteira: a faixa de
   cima, o anel da foto e o filete da borda saem todos do mesmo --anel. É o
   mesmo vocabulário do chat — quem reconheceu o anel na foto reconhece a
   ficha antes de ler o nome.
   ========================================================================= */
.perfil-cartao {
  position: fixed;
  z-index: 90;
  width: 268px;
  padding: 0 0 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #14161d, #0d0e13);
  border: 1px solid var(--linha, #23262d);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: perfil-entra 0.13s ease-out;
}
@keyframes perfil-entra {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .perfil-cartao { animation: none; }
}

/* A faixa de cima é a única superfície colorida da peça. Sem metal ela some,
   e o cartão de quem não comprou nada não fica com uma barra cinza sobrando. */
.perfil-cartao[data-apoio]::before,
.perfil-cartao[data-papel]::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--anel), transparent);
}
.perfil-cartao[data-apoio] { border-color: color-mix(in srgb, var(--anel) 38%, transparent); }
.perfil-cartao[data-papel] { border-color: color-mix(in srgb, var(--anel) 55%, transparent); }

.perfil-cartao[data-apoio='bronze']   { --anel: #d08a4e; }
.perfil-cartao[data-apoio='prata']    { --anel: #cfd6e0; }
.perfil-cartao[data-apoio='ouro']     { --anel: #f2c94c; }
.perfil-cartao[data-apoio='diamante'] { --anel: #6fe3f5; }
.perfil-cartao[data-papel='admin']    { --anel: #d6353c; }
.perfil-cartao[data-papel='fundador'] { --anel: #16a35d; }

.perfil-cartao-espera {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: var(--fraco, #8b90a0);
  font-size: 12px;
}

.perfil-cartao-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px 0;
}
/* A foto do cartão é maior que a do chat: aqui ela é o retrato, não a marca
   da coluna. O anel vem junto, herdado do mesmo data-atributo. */
.perfil-cartao-topo .chat-foto {
  width: 46px;
  height: 46px;
  font-size: 18px;
}
.perfil-cartao-quem { min-width: 0; display: grid; gap: 4px; }
.perfil-cartao-quem b {
  font-size: 15px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perfil-cartao-tags { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

/* A reputação. É o número que decide se vale a pena, então é o único elemento
   da peça com tamanho de manchete. */
.perfil-cartao-rep {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 16px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.perfil-cartao-rep strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 800;
  color: var(--anel, #e9ecf2);
  font-variant-numeric: tabular-nums;
}
.perfil-cartao-rep span {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fraco, #8b90a0);
}

.perfil-cartao-numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 12px 16px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
.perfil-cartao-numeros > div {
  background: #101219;
  padding: 8px 10px;
}
.perfil-cartao-numeros dt {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7080;
  margin: 0 0 2px;
}
.perfil-cartao-numeros dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #e2e5ec;
  font-variant-numeric: tabular-nums;
}

/* DAR PATENTE PELA FICHA — só o fundador vê.
   Era um comando de texto com o nome escrito à mão; aqui não há nome a
   digitar, e o que está valendo agora fica marcado. Cinco botões pequenos em
   vez de uma lista: são cinco opções fixas, e uma lista suspensa para cinco
   coisas é um clique a mais para ver o que já cabia na tela. */
.perfil-cartao-patente {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.perfil-cartao-patente > span {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7080;
}
.perfil-patente-fila { display: flex; gap: 4px; margin-left: auto; }
.perfil-patente {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--anel, #2a2e38);
  background: rgba(255, 255, 255, 0.03);
  color: var(--anel, #8b90a0);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.12s ease;
}
.perfil-patente:hover { background: color-mix(in srgb, var(--anel, #8b90a0) 22%, transparent); }
/* A que está valendo fica preenchida: sem isto, dar a mesma patente de novo
   parece a única forma de saber qual é a atual. */
.perfil-patente.atual {
  background: color-mix(in srgb, var(--anel, #8b90a0) 30%, transparent);
  box-shadow: 0 0 0 1px var(--anel, #8b90a0) inset;
}
.perfil-patente.apoio-bronze   { --anel: #d08a4e; }
.perfil-patente.apoio-prata    { --anel: #cfd6e0; }
.perfil-patente.apoio-ouro     { --anel: #f2c94c; }
.perfil-patente.apoio-diamante { --anel: #6fe3f5; }
.perfil-patente.tirar          { --anel: #6b7080; }
.perfil-patente.tirar:hover    { --anel: #d6353c; color: #ffd9d7; }

.perfil-cartao-acoes {
  display: grid;
  gap: 6px;
  margin: 14px 16px 0;
}
.perfil-cartao-acoes .btn { width: 100%; justify-content: center; text-align: center; padding: 7px 10px; }
.perfil-cartao-acoes .btn:disabled { opacity: 0.45; cursor: default; }

/* A foto vira um alvo: sem isto ela continua parecendo enfeite, e o anel novo
   não convida a clicar em nada. */
.chat-foto.clicavel { cursor: pointer; }
.chat-foto.clicavel:hover { filter: brightness(1.12); }


/* =========================================================================
   OS EMOTES.

   O painel sobe a partir do botão, colado no rodapé do chat, e não é uma
   janela: quem procura um emote está no meio de uma frase, e uma modal
   cobrindo a conversa faria perder o fio do que ia responder.

   Ele não fecha ao escolher — quase todo mundo põe dois seguidos.
   ========================================================================= */
.chat-rodape { position: relative; }

/* O botão é o menor da barra: ele abre uma gaveta, não executa nada. Ao lado
   do "enviar", que é a peça verde, ele tem que se comportar. */
.chat-emotes-abrir {
  flex: none;
  padding: 5px 9px;
  font-family: "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0;
  color: #b9b7b0;
}
.chat-emotes-abrir[aria-expanded='true'] { color: #fff; }

.emotes-painel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: 296px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 12px 12px;
  border-radius: 11px;
  background: linear-gradient(180deg, #14161d, #0d0e13);
  border: 1px solid var(--linha, #23262d);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.72);
  animation: emotes-entra 0.12s ease-out;
}
@keyframes emotes-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.emotes-painel h5 {
  margin: 10px 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7080;
}
.emotes-painel h5:first-child { margin-top: 0; }

.emotes-grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.emote {
  border: 0;
  /* Uma placa quase invisivel atras de cada um. Parece enfeite e nao e: uns
     poucos emotes (a balanca, a chave) sao desenhados em cinza escuro, e
     sobre o painel preto eles simplesmente nao aparecem. */
  background: rgba(255, 255, 255, 0.045);
  border-radius: 7px;
  padding: 4px 0;
  font-size: 21px;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.1s ease, transform 0.1s ease;
}
.emote:hover { background: rgba(255, 255, 255, 0.07); transform: scale(1.12); }
.emote:active { transform: scale(0.96); }
.emote:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* A mensagem que é só emote. Uma reação não é uma frase curta — é um gesto, e
   um gesto no mesmo corpo do texto não é lido como gesto nenhum. */
.chat-msg p.so-emote {
  font-size: 30px;
  line-height: 1.18;
}

@media (prefers-reduced-motion: reduce) {
  .emotes-painel { animation: none; }
  .emote:hover, .emote:active { transform: none; }
}



/* =========================================================================
   A JANELA DA CHAMADA.

   Era uma faixa empurrando a conversa para baixo: o chat encolhia, as telas
   ficavam do tamanho de um selo, e não dava para olhar a conversa e a tela ao
   mesmo tempo — que é exatamente o que se faz numa chamada.

   Agora flutua por cima e sai da frente. Arrasta pela barra de cima, encolhe
   num clique, e nasce no canto de baixo à direita, onde não cobre nem a lista
   de conversas nem a caixa de escrever.

   Não é uma janela do sistema porque não pode ser: o áudio e o vídeo vivem
   NESTA página, e uma segunda janela do programa teria que receber os fluxos
   de volta por um caminho que não existe. O que se ganharia com ela — sair da
   frente, ser movida, encolher — está aqui.
   ========================================================================= */
.chamada-painel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: 320px;
  display: grid;
  gap: 9px;
  padding: 0 0 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #14161d, #0d0e13);
  border: 1px solid var(--linha, #23262d);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.chamada-painel[hidden] { display: none; }
/* DENTRO DA JANELA PRÓPRIA o painel deixa de flutuar: ele É a janela. Sem
   isto ele apareceria como um cartãozinho de 320px no canto de uma janela
   vazia, com o resto preto em volta. */
.janela-chamada { margin: 0; background: #0d0e13; }
.janela-chamada .chamada-painel {
  position: static;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  align-content: start;
}
/* A janela é movida pelo sistema, não arrastada pela barra. */
.janela-chamada .chamada-barra { cursor: default; }
.chamada-destacar {
  border: 0;
  background: none;
  color: #8b90a0;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 5px;
  line-height: 0;
  margin-left: auto;
}
.chamada-destacar:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* Quando os dois botões existem, só o primeiro empurra. */
.chamada-destacar + .chamada-encolher { margin-left: 0; }
.chamada-painel.encolhida { padding-bottom: 0; width: 250px; }

/* Clicou no botão do topo já estando numa chamada: a janela pisca em vez de
   abrir um menu que derrubaria a chamada em curso sem avisar. */
.chamada-painel.piscou { animation: chamada-pisca 0.9s ease-out; }
@keyframes chamada-pisca {
  0%, 100% { border-color: var(--linha, #23262d); }
  30% { border-color: #d6353c; box-shadow: 0 20px 48px rgba(0,0,0,.75), 0 0 24px rgba(214,53,60,.55); }
}

/* ---- a barra de cima: é por onde se arrasta ---- */
.chamada-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--linha, #23262d);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.chamada-codigo {
  border: 1px solid rgba(198, 240, 78, 0.28);
  background: rgba(198, 240, 78, 0.07);
  color: #eaffb0;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.chamada-codigo:hover { background: rgba(198, 240, 78, 0.14); border-color: rgba(198, 240, 78, 0.5); }
/* Copiou: o próprio botão confirma. Um aviso separado para "copiei um código"
   é mais interrupção do que informação. */
.chamada-codigo.copiado { background: var(--acento); color: #10121a; border-color: var(--acento); }

.chamada-quantos { font-size: 10.5px; color: var(--fraco, #8b90a0); }
.chamada-encolher {
  margin-left: auto;
  border: 0;
  background: none;
  color: #8b90a0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
}
.chamada-encolher:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* ---- o palco: UMA tela por vez, grande ----
   Antes todas apareciam juntas e com três pessoas compartilhando não dava para
   olhar nenhuma. Escolhe-se quem assistir clicando na ficha da pessoa. */
.chamada-palco {
  position: relative;
  margin: 0 10px;
  border-radius: 9px;
  overflow: hidden;
  background: #05060a;
  border: 1px solid var(--linha, #23262d);
  aspect-ratio: 16 / 9;
}
.chamada-palco video { width: 100%; height: 100%; object-fit: contain; display: block; }
.chamada-palco-quem {
  position: absolute;
  left: 7px;
  bottom: 6px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #dfe3ea;
}
/* Com uma tela no palco a janela cresce: 320px servem para saber QUE alguém
   está mostrando algo, não para ver o que é. */
.chamada-painel:has(.chamada-palco) { width: 420px; }

.chamada-palco-ampliar {
  position: absolute;
  right: 34px;
  top: 6px;
  border: 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.62);
  color: #dfe3ea;
  cursor: pointer;
  line-height: 0;
  padding: 5px 6px;
}
.chamada-palco-ampliar:hover { background: var(--acento); color: #10121a; }
.chamada-palco video { cursor: zoom-in; }

/* =========================================================================
   A TELA COMPARTILHADA EM TAMANHO GRANDE.

   É uma camada por cima de tudo, e não uma janela nova: o fluxo já vive
   nesta página, e uma janela precisaria recebê-lo de volta por um caminho
   que não existe.

   Ela ainda tenta a tela cheia de verdade do sistema por cima disto. Quando
   o navegador recusa, a camada sozinha já ocupa a janela inteira — por isso
   a tela cheia é uma tentativa e não uma condição.
   ========================================================================= */
.chamada-grande {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: #05060a;
  padding: 12px;
}
.chamada-grande video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}
.chamada-grande-quem {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #dfe3ea;
}
.chamada-grande-fechar {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.66);
  color: #dfe3ea;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 7px 11px;
}
.chamada-grande-fechar:hover { background: #d6353c; color: #fff; }

.chamada-palco-fechar {
  position: absolute;
  right: 6px;
  top: 6px;
  border: 0;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.62);
  color: #dfe3ea;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
}
.chamada-palco-fechar:hover { background: rgba(214, 53, 60, 0.8); color: #fff; }

/* ---- as fichas de quem está na chamada ----
   Um nome numa linha não dizia quem estava com a tela no ar nem dava onde
   clicar. A ficha diz as duas coisas: a foto com o anel da patente, o nome, e
   o ícone de tela em quem está compartilhando — que é o próprio botão de
   assistir. */
.chamada-gente {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 10px;
}
.chamada-ficha {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  min-width: 0;
}
.chamada-ficha.na-tela { border-color: color-mix(in srgb, var(--anel, #c6f04e) 45%, transparent); }
.chamada-ficha .chat-foto { width: 24px; height: 24px; font-size: 11px; }
.chamada-ficha-nome {
  font-size: 11px;
  color: #cfd3dc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chamada-ficha[data-apoio='bronze']   { --anel: #d08a4e; }
.chamada-ficha[data-apoio='prata']    { --anel: #cfd6e0; }
.chamada-ficha[data-apoio='ouro']     { --anel: #f2c94c; }
.chamada-ficha[data-apoio='diamante'] { --anel: #6fe3f5; }
.chamada-ficha[data-papel='admin']    { --anel: #d6353c; }
.chamada-ficha[data-papel='fundador'] { --anel: #16a35d; }

.chamada-ficha-tela {
  margin-left: auto;
  flex: none;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--anel, #c6f04e);
  cursor: pointer;
  padding: 3px 4px;
  line-height: 0;
  transition: background 0.12s ease;
}
.chamada-ficha-tela:hover { background: rgba(255, 255, 255, 0.09); }
/* Assistindo agora: o ícone acende e pulsa devagar, para se saber qual das
   fichas está no palco sem ter que ler o nome embaixo do vídeo. */
.chamada-ficha-tela.assistindo {
  background: color-mix(in srgb, var(--anel, #c6f04e) 22%, transparent);
  animation: ficha-assiste 2.4s ease-in-out infinite;
}
@keyframes ficha-assiste {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--anel, #c6f04e) 40%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--anel, #c6f04e) 22%, transparent); }
}

/* QUAL MICROFONE. Muito do "ruído ruim" numa chamada não é ruído: é o
   aparelho errado — o da webcam, o do monitor — enquanto o headset está ali
   do lado. O navegador escolhe um padrão que raramente é o melhor. */
.chamada-microfone {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.chamada-microfone > span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7080;
  flex: none;
}
.chamada-microfone select {
  flex: 1;
  min-width: 0;
  background: #0b0c10;
  border: 1px solid var(--linha, #23262d);
  border-radius: 5px;
  color: #cfd3dc;
  font: inherit;
  font-size: 10.5px;
  padding: 3px 5px;
}
.chamada-microfone select:focus { outline: none; border-color: var(--acento); }

/* OS DEGRAUS DE RESOLUÇÃO. A patente define até onde dá para subir; qual
   degrau usar é escolha de quem compartilha — numa internet apertada, 1080p
   não entrega nitidez, entrega travamento. */
.chamada-degraus {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.chamada-degraus > span {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7080;
  margin-right: 2px;
}
.chamada-degrau {
  border: 1px solid var(--linha, #23262d);
  background: rgba(255, 255, 255, 0.03);
  color: #9ba0ac;
  border-radius: 5px;
  padding: 2px 7px;
  font: inherit;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.chamada-degrau:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* O que está valendo fica aceso: sem isso, trocar de degrau e não ver nada
   mudar na tela faria parecer que o clique não pegou. */
.chamada-degrau.agora {
  background: rgba(198, 240, 78, 0.16);
  border-color: rgba(198, 240, 78, 0.5);
  color: #eaffb0;
}

/* O PONTO DE "FALANDO".

   O microfone só transmite quando há voz — uma porteira desliga a faixa no
   silêncio, que é o que tira o ventilador e o cooler da chamada. Só que uma
   porteira mal ajustada é indistinguível de um microfone quebrado: nos dois
   casos ninguém te ouve.

   Este ponto é a diferença entre os dois. Se ele acende quando você fala, o
   microfone está bom; se não acende, é o aparelho. */
.chamada-ficha .chat-foto { transition: box-shadow 0.12s ease; }
.chamada-ficha.falando .chat-foto {
  box-shadow: 0 0 0 2px #0d0e13, 0 0 0 3.5px var(--acento, #c6f04e), 0 0 10px rgba(198, 240, 78, 0.5);
}
.chamada-ficha.falando .chamada-ficha-nome { color: #eaffb0; }

.chamada-acoes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 10px; }
.chamada-acoes .btn { font-size: 11px; padding: 5px 9px; }
/* O botão de tela para quem não tem patente: aparece, mas diz que está
   fechado. Esconder esconderia também que existe — e a patente só se vende se
   der para ver o que ela abre. */
.chamada-acoes .btn.travado { opacity: 0.5; }
.chamada-acoes .btn.travado::before { content: '🔒 '; }

.chamada-nota {
  margin: 0 10px;
  font-size: 9.5px;
  line-height: 1.45;
  color: #7a7f8c;
  border-left: 2px solid rgba(214, 53, 60, 0.5);
  padding-left: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .chamada-painel.piscou { animation: none; }
  .chamada-ficha-tela.assistindo { animation: none; }
}

/* Em tela estreita a janela ocupa a largura toda embaixo: flutuar num canto de
   375 pixels é cobrir a conversa inteira de qualquer jeito. */
@media (max-width: 560px) {
  .chamada-painel { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .chamada-gente { grid-template-columns: 1fr; }
}

/* =========================================================================
   FOTOS NA CONVERSA.

   Só no privado e na sala de intermediação — é onde elas servem (o print da
   conta, a foto do item, o comprovante) e onde quem vê escolheu estar.
   ========================================================================= */
.chat-anexar { flex: none; padding: 5px 9px; color: #b9b7b0; line-height: 0; }
.chat-anexar:hover { color: #fff; }

/* A prévia antes de mandar. Sem ela a pessoa escolhe um arquivo, não vê nada
   acontecer, e só descobre o que mandou quando já está na conversa de outra
   pessoa — e foto é o que mais se manda errado. */
.chat-foto-previa {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border-radius: 9px;
  background: #14161d;
  border: 1px solid var(--linha, #23262d);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
}
.chat-foto-previa img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.chat-foto-previa span {
  font-size: 11px;
  color: var(--fraco, #8b90a0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-foto-tirar {
  flex: none;
  border: 0;
  background: none;
  color: #8b90a0;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 5px;
}
.chat-foto-tirar:hover { background: rgba(214, 53, 60, 0.25); color: #fff; }

/* A foto dentro da mensagem. Teto de altura para uma captura de tela inteira
   não empurrar a conversa para fora da janela — clicando, ela abre no tamanho
   de verdade, que é para o que foi mandada. */
.chat-msg-foto {
  display: block;
  margin-top: 5px;
  max-width: min(260px, 100%);
  max-height: 220px;
  border-radius: 8px;
  border: 1px solid var(--linha, #23262d);
  cursor: zoom-in;
  object-fit: cover;
}
.chat-msg.minha .chat-msg-foto { margin-left: auto; }

/* Arrastando um arquivo por cima da conversa. */
.chat-painel.recebendo-foto { outline: 2px dashed rgba(198, 240, 78, 0.55); outline-offset: -4px; }

/* A foto em tamanho cheio: uma camada por cima de tudo, que some no primeiro
   clique. Um print de conta a 260 pixels não se lê, e é para ler que ele foi
   mandado. */
.foto-cheia {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
  padding: 24px;
}
.foto-cheia img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
}



/* ---- a porta: começar uma chamada, ou entrar com um código ---- */
.chamada-menu {
  /* `fixed` e posicionado pelo JS: o menu abre para baixo ou para cima
     conforme onde o botão está na tela. Com `absolute` ele dependia de um
     ancestral posicionado, e quando o botão mudou de lugar o menu foi parar
     fora da janela — visível para o código, invisível para a pessoa. */
  position: fixed;
  /* Não acompanha a largura de quem o abriu: numa barra estreita o campo do
     código e o botão de entrar não cabem lado a lado. O menu é uma peça
     flutuante — pode ser mais largo do que o botão. */
  min-width: 232px;
  z-index: 90;
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #14161d, #0d0e13);
  border: 1px solid var(--linha, #23262d);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.7);
}
.chamada-menu-ou {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7080;
  text-align: center;
}
.chamada-menu-codigo { display: flex; gap: 5px; }
.chamada-menu-codigo input {
  flex: 1;
  min-width: 0;
  background: #0b0c10;
  border: 1px solid var(--linha, #23262d);
  border-radius: 6px;
  color: var(--texto, #e9ecf2);
  padding: 5px 8px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chamada-menu-codigo input:focus { outline: none; border-color: var(--acento); }
/* ---- o convite que chega ---- */
.chamada-convite {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  width: 260px;
  padding: 12px 14px;
  border-radius: 11px;
  background: linear-gradient(180deg, #14161d, #0d0e13);
  border: 1px solid rgba(198, 240, 78, 0.32);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.72);
  animation: chamada-convite-entra 0.16s ease-out;
}
@keyframes chamada-convite-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chamada-convite p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; }
.chamada-convite-acoes { display: flex; gap: 6px; }
.chamada-convite-acoes .btn { flex: 1; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .chamada-painel.piscou,
  .chamada-convite { animation: none; }
}


/* =========================================================================
   O BOTÃO DA CHAMADA.

   Ele dizia só "chamada", e isso não diz nada a quem nunca usou: chamada de
   quê, com quem, como? Agora diz as duas coisas que faz, em duas linhas — a
   ação em cima, o que vem junto embaixo — e leva um ícone que mostra as duas:
   um microfone e uma tela.

   NÃO É VERDE NEM VERMELHO em repouso. O verde já é do apoiar e do confirmar;
   o vermelho é do que destrói e do administrador. A chamada tem identidade
   própria.

   E ELE É O PRÓPRIO INDICADOR. Em chamada, o ícone dá lugar a três barras que
   andam, a peça acende em sangue e as duas linhas de texto dão lugar ao código
   — que é a única coisa que se passa adiante. O ícone e as barras ocupam o
   mesmo lugar e se revezam: em repouso o desenho diz o que o botão FAZ, em
   chamada diz o que está ACONTECENDO. Os dois lado a lado seriam duas coisas
   disputando o mesmo olhar.

   Um segundo aviso em outro canto da tela seria uma segunda verdade sobre a
   mesma coisa — e o painel da chamada só aparece na aba de conversa, então sem
   este botão nada diria que há um microfone aberto.
   ========================================================================= */
.btn.chamar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  text-align: left;
}
.btn.chamar[hidden] { display: none; }

.chamar-icone {
  display: inline-flex;
  flex: none;
  color: #a9adb8;
  transition: color 0.15s ease;
}
.btn.chamar:hover .chamar-icone { color: #eef0f5; }

/* As duas linhas. A de baixo é menor e mais apagada de propósito: ela é a
   informação a mais, não uma segunda ação. */
.chamar-dizeres {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  min-width: 0;
}
.chamar-texto {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #e7e9ef;
  white-space: nowrap;
}
.chamar-sub {
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7f838f;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.btn.chamar:hover .chamar-sub { color: #a2a7b3; }

/* As barras e o código só existem em chamada. */
.chamar-ondas { display: none; align-items: flex-end; gap: 2.5px; height: 14px; flex: none; }
.chamar-ondas i {
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 1.5px;
  background: #ff6b72;
}
.chamar-codigo { display: none; }

/* ---- em chamada ---- */
.btn.chamar.ao-vivo {
  color: #ffe9ec;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 3px 0 -1px #4a0f12,
    0 5px 12px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(214, 53, 60, 0.5),
    inset 0 1px 0 rgba(255, 210, 205, 0.28),
    inset 0 -7px 13px rgba(0, 0, 0, 0.32);
}
.btn.chamar.ao-vivo:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 4px 0 -1px #4a0f12,
    0 7px 16px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(214, 53, 60, 0.7),
    inset 0 1px 0 rgba(255, 210, 205, 0.34),
    inset 0 -7px 13px rgba(0, 0, 0, 0.3);
}
.btn.chamar.ao-vivo .chamar-icone,
.btn.chamar.ao-vivo .chamar-dizeres { display: none; }
.btn.chamar.ao-vivo .chamar-ondas { display: inline-flex; }
.btn.chamar.ao-vivo .chamar-codigo {
  display: inline;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  font-variant-numeric: tabular-nums;
}
.btn.chamar.ao-vivo .chamar-ondas i { animation: chamar-onda 1s ease-in-out infinite; }
.btn.chamar.ao-vivo .chamar-ondas i:nth-child(2) { animation-delay: 0.15s; }
.btn.chamar.ao-vivo .chamar-ondas i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chamar-onda {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.chamar.ao-vivo .chamar-ondas i { animation: none; height: 9px; }
}

/* Em tela apertada some a segunda linha, não o botão: a ação continua legível
   e o que sai é o complemento. */
@media (max-width: 1100px) {
  .chamar-sub { display: none; }
  .chamar-texto { font-size: 12px; }
}

/* Na web o botão do topo do site é o que vale. O da barra do chat continua no
   HTML porque é o mesmo arquivo que o programa usa — lá ele é o único. Dois na
   mesma tela seriam duas portas para o mesmo lugar. */
.corpo-web #chatChamar { display: none; }

/* =========================================================================
   INSTALAR NO WINDOWS.

   Só existe na versão de navegador, e é a única peça do topo que fala de algo
   fora dela: quem chegou pelo link não sabe que existe um programa, e o site
   inteiro é a comunidade — o programa é o que abre vários jogos e várias
   contas na mesma janela.

   Discreto de propósito. Ele compete com o Doe, e entre pedir dinheiro e
   oferecer o programa, quem tem que gritar é o Doe.
   ========================================================================= */
.btn.instalar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #c3c7d2;
}
.btn.instalar:hover { color: #fff; }
.instalar-marca { flex: none; opacity: 0.8; }
.btn.instalar:hover .instalar-marca { opacity: 1; }

/* Em tela estreita o rótulo sai e sobra a janelinha: quatro quadrados são
   reconhecíveis sozinhos, e a frase inteira empurraria o topo para duas
   linhas justamente onde não há espaço. */
@media (max-width: 760px) {
  .btn.instalar span { display: none; }
  .btn.instalar { padding-left: 8px; padding-right: 8px; }
}

/* =========================================================================
   O LETREIRO da tela Início.

   Painel eletronico: a fita corre, os nomes passam. A fita esta DUPLICADA no
   HTML e a animacao anda exatamente metade da largura — quando a primeira
   copia sai, a segunda esta onde a primeira comecou, e a volta ao inicio nao
   tem emenda visivel.
   ========================================================================= */
.letreiro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0 14px;
  height: 40px;
  background: linear-gradient(180deg, #0c0e13, #14171f);
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
}
/* A luz que pisca na ponta, como painel de aviso de verdade. */
.letreiro-luz {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 8px var(--acento);
  animation: letreiro-pisca 1.8s steps(1, end) infinite;
}
@keyframes letreiro-pisca {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.18; }
}
.letreiro-trilho { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.letreiro-fita { display: flex; width: max-content; animation: letreiro-corre 34s linear infinite; }
.letreiro:hover .letreiro-fita { animation-play-state: paused; }
@keyframes letreiro-corre {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.letreiro-copia { display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; }
.letreiro-saudacao {
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--acento);
  text-shadow: var(--brilho);
}
.letreiro-rotulo { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fraco); }
.letreiro-nome { font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .letreiro-fita { animation: none; }
  .letreiro-luz { animation: none; }
}

/* =========================================================================
   A FAIXA DE APOIO — atravessa o topo quando alguem apoia.

   Fica fora do Inicio de proposito: quem esta com um jogo aberto tambem ve. E
   o momento em que a patente para de ser uma linha numa tabela de preco e
   passa a ser uma coisa que aconteceu com alguem, na frente de todo mundo.
   ========================================================================= */
.apoio-faixa {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 9px 16px;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.97), rgba(10, 12, 16, 0.9));
  border-bottom: 2px solid var(--metal, var(--acento));
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
  animation: faixa-entra 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.apoio-faixa.saindo { animation: faixa-sai 0.55s ease forwards; }
.apoio-faixa-bronze { --metal: #d08a4e; }
.apoio-faixa-prata { --metal: #cfd6e0; }
.apoio-faixa-ouro { --metal: #f2c94c; }
.apoio-faixa-diamante { --metal: #6fe3f5; }
.apoio-faixa-texto {
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--metal);
  text-shadow: 0 0 12px color-mix(in srgb, var(--metal) 55%, transparent);
}
.apoio-faixa-nota { font-size: 11.5px; color: var(--fraco); }
@keyframes faixa-entra {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@keyframes faixa-sai {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .apoio-faixa, .apoio-faixa.saindo { animation: none; }
}

/* Com a biblioteca em aba propria, o Inicio tem uma coluna so. */
.colunas-inicio.uma-coluna { grid-template-columns: 1fr; }

/* OS NÚMEROS DA BARRA.
   Uma pastilha só, encostada nos botões do canto: soltos no meio do vazio eles
   pareciam três coisas sem dono. Juntos e ao lado do chat, lêem-se como o
   estado da comunidade, que é o que são. */
.placar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  margin-right: 10px;
  padding: 4px 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--borda);
  border-radius: 999px;
  white-space: nowrap;
}
.placar-item { display: flex; align-items: baseline; gap: 5px; }
.placar-item b {
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.placar-item span { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fraco); }
/* O ponto que pulsa: e o que diz que o numero e de AGORA e nao de quando o
   programa abriu. Sem ele, "12 online" podia ser de ontem. */
.placar-pulso {
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 7px var(--ok);
  animation: placar-pulsa 2.4s ease-in-out infinite;
}
@keyframes placar-pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.placar[hidden] { display: none; }
/* QUANDO APERTA, O PLACAR CEDE PRIMEIRO.
   Ele e o unico item da barra que ninguem clica: as abas, o "+" e o chat sao
   caminho, o placar e informacao. Em meia tela ele encolhe para so os numeros
   e, mais apertado que isso, sai de cena — antes de as abas virarem um scroll
   de dois centimetros. */
.placar { flex: 0 0 auto; }
/* Apertando, some UM dos dois — nao os rotulos dos dois.
   Encolher para "37 6" trocava dois numeros com nome por dois numeros anonimos
   colados, que ninguem sabe ler. Fica o "online": e o unico numero que a pessoa
   nao consegue ver de outro jeito. Quantas abas ela abriu, ela ve olhando. */
@media (max-width: 1240px) {
  .placar { gap: 10px; padding: 4px 11px; }
  #placarInstItem { display: none; }
}
@media (max-width: 1020px) { .placar { display: none; } }
@media (prefers-reduced-motion: reduce) { .placar-pulso { animation: none; } }

/* As duas portas do card: ver o que está à venda, e falar com quem vende. */
.jogo-portas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.botao-rmt.secundario {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--fraco);
}
.botao-rmt.secundario:hover { color: var(--texto); border-color: var(--acento); }

/* O × da aba do marketplace. Ele é uma visita, não um lugar fixo como Início
   e Biblioteca — e visita tem porta de saída. */
.aba-fechar {
  margin-left: 2px;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  color: var(--fraco);
  opacity: 0.65;
}
.aba-fechar:hover { opacity: 1; color: var(--perigo); background: rgba(224, 85, 97, 0.14); }

/* =========================================================================
   A JANELA DO PAGAMENTO.

   Uma tela só do PIX: QR grande, código embaixo, e para quem o dinheiro vai.
   O copia-e-cola vivia numa linha dentro de um diálogo cheio de outras coisas
   e sumia quando o diálogo fechava — bem no momento em que a pessoa pega o
   celular e precisa dele na tela.
   ========================================================================= */
body.janela-pagamento { padding: 0; background: var(--fundo); }
.pag { display: grid; gap: 13px; padding: 18px; }
.pag-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pag-topo strong {
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 21px;
  letter-spacing: 0.05em;
}
.pag-valor {
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 25px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
  text-shadow: var(--brilho);
}
.pag-de { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--fraco); }

/* O QR em fundo branco, sempre. Um QR escuro não é lido por leitor nenhum, e
   este programa é escuro inteiro — é a única superfície branca de propósito. */
.pag-qr {
  display: grid;
  place-items: center;
  min-height: 232px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
}
.pag-qr img { width: 100%; max-width: 208px; height: auto; image-rendering: pixelated; }
.pag-sem-qr { margin: 0; padding: 0 18px; font-size: 12px; line-height: 1.5; color: #4b4b4b; text-align: center; }

.pag-codigo { display: grid; gap: 5px; font-size: 11px; color: var(--fraco); }
.pag-codigo textarea {
  width: 100%;
  resize: none;
  /* O estilo global de campo nao alcanca textarea: sem isto ele nasce branco
     no meio de um programa todo escuro. */
  padding: 8px 10px;
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.45;
  word-break: break-all;
}
.pag-acoes { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pag-nota { margin: 0; font-size: 11px; line-height: 1.5; color: var(--fraco); }

/* O aviso de que a cobrança abriu noutra janela. O código em si mora lá. */
.apoio-abriu { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--acento); }

/* As ações do painel de configurações, em linha. */
.config-acoes { display: flex; flex-wrap: wrap; gap: 7px; }

/* =========================================================================
   A PRIMEIRA VEZ.

   Três frases e um botão, na tela Início. Aparece uma vez e some para sempre —
   e é por isso que ela pode ocupar espaço de verdade: não vai atrapalhar
   ninguém duas vezes.

   O que ela diz é o que ninguém adivinha olhando: que cada aba é uma conta
   inteira, separada das outras. É a coisa que o programa faz e que justifica
   ele existir.
   ========================================================================= */

/* =========================================================================
   A PRIMEIRA VEZ.

   Era um aviso de três frases explicando o programa. Quem acabou de instalar
   não tem onde pendurar nenhuma delas: "cada aba é uma conta" não ensina
   nada a quem nunca viu uma aba com quatro contas.

   Agora é uma pergunta com três capas — qual jogo você joga — e o programa
   abre esse jogo. As capas são grandes de propósito: elas são a resposta, e
   uma capa que se reconhece é mais rápida de escolher que um nome que se lê.
   ========================================================================= */
.bv-sub {
  margin: 4px 0 16px;
  color: var(--fraco, #8b90a0);
  font-size: 13px;
}
.bv-jogos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bv-jogo {
  position: relative;
  border: 1px solid var(--linha, #23262d);
  background: #101219;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
.bv-jogo:hover { border-color: var(--acento); transform: translateY(-2px); }
.bv-jogo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.bv-jogo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* O nome fica SOBRE a capa, no rodapé: embaixo dela viraria uma segunda
   fileira de texto e faria as três capas encolherem para caber. */
.bv-jogo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8px 7px;
  font-size: 12px;
  font-weight: 700;
  color: #f2f4f8;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
}

/* As outras duas saídas são botões comuns, e menores: são respostas válidas,
   mas não são a que faz o programa se explicar. */
/* Os dois botoes ficam do tamanho do texto, nao esticados. A textura de chapa
   do `.btn` e uma imagem esticada para 100% da largura: num botao de 350px ela
   vira uma faixa clara obvia no meio. No tamanho natural, ela e o que deveria
   ser — um rolo de tinta. */
.bv-outras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

/* A DICA DAS CONTAS: uma faixa encostada nos painéis do jogo recém-aberto.
   Não é um balão com seta — seta sobre conteúdo que ainda carrega aponta para
   o lugar errado metade das vezes. Ela fica onde a coisa está. */
.dica-contas {
  position: absolute;
  left: 12px;
  right: 12px;
  /* EMBAIXO, e nao em cima. No topo ela cobria a barra da primeira fileira de
     contas — os botoes de zoom, som e login de que a propria dica esta
     falando. Medido: escondia por inteiro o cabecalho das contas 1 e 2. */
  bottom: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.97), rgba(13, 14, 19, 0.97));
  border: 1px solid rgba(198, 240, 78, 0.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7);
  animation: dica-entra 0.2s ease-out;
}
.dica-contas p { margin: 0; font-size: 12.5px; line-height: 1.45; flex: 1; color: #cfd3dc; }
.dica-contas b { color: #eaffb0; }
.dica-contas .btn { flex: none; }
@keyframes dica-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .capa-jogo .capa-descricao { transition: none; transform: none; }
  .dica-contas { animation: none; }
  .bv-jogo:hover { transform: none; }
}
/* A PERGUNTA COBRE A TELA, e nao fica dentro da pagina.

   Ela morava no meio do inicio, depois da capa gigante e do letreiro — ou
   seja, ABAIXO DA DOBRA. Quem instalava abria, via o logo, e a unica pergunta
   que o programa precisa fazer estava a um scroll de distancia que ninguem
   pediu para dar. Medido: numa janela de 1280x880 o titulo aparecia a 510px do
   topo, com as capas cortadas pela borda.

   Agora ela e a tela. Nao ha nada atras para disputar a atencao, e nao ha
   scroll entre a pessoa e a resposta. Some para sempre no primeiro clique. */
.boas-vindas {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 7, 10, 0.9);
  backdrop-filter: blur(6px);
  animation: bv-entra 0.22s ease-out;
}
.bv-caixa {
  width: min(760px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 28px 24px;
  background: linear-gradient(135deg, rgba(198, 240, 78, 0.07), rgba(255, 45, 144, 0.05)), #0d0e13;
  border: 1px solid color-mix(in srgb, var(--acento) 34%, transparent);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
}
.boas-vindas h2 {
  margin: 0;
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 30px;
  letter-spacing: 0.05em;
  color: var(--acento);
  text-shadow: var(--brilho);
}
@keyframes bv-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .boas-vindas { animation: none; }
}
.boas-vindas[hidden] { display: none; }

/* =========================================================================
   O MENU DOS COMANDOS.

   Sobe do campo de escrever quando a linha começa com barra. Mostra a FORMA de
   cada comando e um exemplo pronto — porque saber que `/chavepix` existe não
   ajuda ninguém que não saiba o que vem depois dele.

   Fica acima do campo, não abaixo: no rodapé da janela não haveria espaço, e
   uma lista que abre para baixo sairia da tela.
   ========================================================================= */
.chat-comandos {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 100%;
  z-index: 30;
  margin-bottom: 6px;
  display: grid;
  gap: 1px;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.5);
}
.chat-comandos[hidden] { display: none; }
.chat-comandos .cmd {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  padding: 7px 9px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-comandos .cmd:hover,
.chat-comandos .cmd.escolhido { background: rgba(198, 240, 78, 0.1); }
.chat-comandos .cmd b {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--acento);
}
.cmd-exemplo {
  grid-column: 1;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--fraco);
}
.cmd-quem {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fita);
  opacity: 0.75;
}
.cmd-quem:empty { display: none; }

/* O rodapé vira a âncora do menu; sem isto ele se penduraria na janela. */
.chat-rodape { position: relative; }

/* =========================================================================
   A TELA DE AGRADECIMENTO.

   Ela substitui o QR quando o dinheiro entra, e não é um recibo: é o momento
   em que alguém acabou de pagar para isto continuar existindo.

   O ✓ num círculo saiu de propósito. Aquele glifo é o de transação — banco,
   loja, companhia aérea — e diz "processado", que é o oposto de obrigado.

   No lugar dele vem a INSÍGNIA da patente, grande, na cor do metal: em cultura
   de rua, patente é remendo que se costura na jaqueta. É o objeto que existe
   no mundo do assunto, e é o que se ganha.

   Toda a tela toma a cor do metal comprado. Quem compra diamante vê uma tela
   ciano; quem compra bronze, uma tela de cobre. A compra muda a tela, e não
   só uma linha de texto dentro dela.
   ========================================================================= */
.pag.pago {
  place-content: center;
  justify-items: center;
  gap: 0;
  min-height: 100vh;
  padding: 30px 26px;
  text-align: center;
  /* Um sopro da cor do metal atrás de tudo, sem virar fundo colorido. */
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--metal, var(--acento)) 13%, transparent), transparent 70%),
    var(--fundo);
}
.pag.pago[data-nivel='bronze'] { --metal: #d08a4e; }
.pag.pago[data-nivel='prata'] { --metal: #cfd6e0; }
.pag.pago[data-nivel='ouro'] { --metal: #f2c94c; }
.pag.pago[data-nivel='diamante'] { --metal: #6fe3f5; }

/* ---- a insígnia ---- */
.ag-insignia { width: 108px; height: 108px; margin-bottom: 4px; }
.ag-insignia svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--metal, var(--acento));
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--metal, var(--acento)) 55%, transparent));
  /* Ela CHEGA: entra grande e assenta, como um remendo sendo prensado. É a
     única animação da tela — um momento, e depois quietude. */
  animation: ag-prensa 0.5s cubic-bezier(0.18, 1.3, 0.4, 1) both;
}
.ag-recibo {
  display: grid;
  place-items: center;
  border: 2px solid var(--ok);
  border-radius: 50%;
  color: var(--ok);
  font-size: 44px;
}
@keyframes ag-prensa {
  from { transform: scale(1.55) rotate(-7deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.ag-patente {
  margin: 0 0 12px;
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em; /* a folga da última letra, para o texto ficar centrado */
  text-transform: uppercase;
  color: var(--metal, var(--texto));
}

/* ---- o agradecimento, escrito à mão ----
   Um "obrigado" tipografado é um aviso. Escrito à mão, é alguém. A fonte de
   grafite já é a da marca — a mesma dos títulos da Biblioteca. */
.ag-mao {
  margin: 0 0 6px;
  font-family: 'Permanent Marker', 'Bebas Neue', cursive;
  font-size: 25px;
  line-height: 1.2;
  color: var(--texto);
  transform: rotate(-1.6deg);
  animation: ag-sobe 0.45s 0.22s ease both;
}
.ag-frase {
  margin: 0 0 20px;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fraco);
  animation: ag-sobe 0.45s 0.3s ease both;
}
@keyframes ag-sobe {
  from { transform: translateY(9px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---- a pessoa, já do jeito novo ----
   Mostrar o que se comprou é melhor do que descrever. Aqui está a fala dela no
   chat, com a cor, o selo e a moldura que acabou de ganhar. */
.ag-rotulo {
  margin-bottom: 7px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fraco);
}
.ag-previa {
  width: 100%;
  max-width: 300px;
  margin-bottom: 18px;
  padding: 11px 13px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--metal) 42%, transparent);
  background: color-mix(in srgb, var(--metal) 7%, transparent);
  border-radius: 11px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--metal) 14%, transparent);
  animation: ag-sobe 0.45s 0.4s ease both;
}
.ag-previa-cabeca { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ag-previa-cabeca img { width: 22px; height: 22px; border-radius: 50%; }
.ag-previa-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--metal);
  text-shadow: 0 0 8px color-mix(in srgb, var(--metal) 55%, transparent);
}
.ag-previa-selo {
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--metal) 55%, transparent);
  border-radius: 5px;
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--metal);
}
.ag-previa-fala { margin: 0; font-size: 12.5px; color: var(--texto); }

.ag-fino {
  margin: 0 0 16px;
  max-width: 32ch;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fraco);
}

@media (prefers-reduced-motion: reduce) {
  .ag-insignia svg,
  .ag-mao,
  .ag-frase,
  .ag-previa { animation: none; }
}

/* O botão de aplicar nas outras contas fica separado do salvar/cancelar:
   ele age na hora e nas OUTRAS contas, enquanto o rodapé decide o destino
   desta. Misturar os dois no mesmo menu faria parecer que um depende do
   outro. */
.conta-clonar {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.conta-clonar .nota { margin: 7px 0 0; }
.conta-clonar .btn[disabled] { opacity: 0.6; cursor: default; }

/* O BOTÃO DA VISTORIA.

   Dois estados, e a diferença tem que ser lida ANTES do clique: apagado é
   "ninguém está lá, comece"; aceso com o ponto pulsando é "tem gente na
   vistoria agora". A urgência é real — do outro lado alguém está esperando
   com a conta na tela. */
.btn.vistoria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 12px;
}
.vistoria-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fraco, #8b90a0);
  flex: none;
}
.btn.vistoria.acesa { color: #eaffb0; }
.btn.vistoria.acesa .vistoria-ponto {
  background: var(--acento);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent);
  animation: vistoria-pulsa 1.6s ease-out infinite;
}
@keyframes vistoria-pulsa {
  to { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.vistoria.acesa .vistoria-ponto { animation: none; }
}
.btn.vistoria[hidden] { display: none; }

/* O link do próprio perfil, no cartão. Fica embaixo dos números porque é o
   que a pessoa faz DEPOIS de ver que eles são bons: mostrar para alguém. */
.perfil-link { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.perfil-link .btn { width: 100%; justify-content: center; }
.perfil-link-url {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--fraco);
  word-break: break-all;
  text-align: center;
}

/* =========================================================================
   O QUE ACONTECEU ENQUANTO VOCÊ NÃO ESTAVA OLHANDO.

   No topo do Início, acima da capa. É a primeira pergunta de quem abre o
   programa depois de uma noite — e a única coisa nesta tela que pode ser
   urgente, então ela vem antes da marca.

   Conta ainda parada AGORA é o único caso que acende: as outras já se
   resolveram sozinhas e são história, não chamado.
   ========================================================================= */
.diario {
  margin: 0 0 2px;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.96), rgba(13, 14, 19, 0.96));
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 26%, transparent);
}
.diario[hidden] { display: none; }
.diario-titulo {
  margin: 0 0 10px;
  font-family: "Bebas Neue", "Archivo Black", system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #9aa08e;
}
.diario-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diario-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #0e1015;
  border-left: 3px solid #2a2e37;
  font-size: 12.5px;
}
/* A que ainda está parada: é a única que pede ação agora. */
.diario-lista li.agora {
  border-left-color: var(--perigo, #ff6b7a);
  background: color-mix(in srgb, var(--perigo, #ff6b7a) 8%, #0e1015);
}
.diario-lista b { color: var(--texto); font-weight: 700; }
.diario-lista span { color: var(--fraco); }
.diario-lista li.agora span { color: #ffb3bb; }
.diario-fechar { margin-top: 11px; }