/*
 * JANELA — Parceiros
 *
 * Convites e comissão: abas, código para copiar, lista de indicados. O DOM
 * não é o painel React — é um diálogo de shim (`www/convite/index.js`, fora
 * do escopo desta folha) com véu e cabeçalho PRÓPRIOS, porque nasceu antes
 * do kit existir.
 *
 * ── O QUE ESTAVA ERRADO ANTES DESTA VERSÃO ──────────────────────────────
 * · `.cvt` (o pano de fundo do diálogo, z-index 60) pinta um véu escuro POR
 *   CIMA do chrome inteiro do kit — o kit já escurece a cena com `.rpgw__veu`.
 * · `.cvt__caixa` traz cabeçalho PRÓPRIO (ícone + "Parceiros" + ✕) por cima
 *   do cabeçalho do chrome, que já diz a mesma coisa — dois títulos idênticos
 *   empilhados, 48px de altura jogados fora bem no topo da janela.
 * · As cinco abas (`.cvt__aba`) e tudo dentro do corpo ainda vestem o cinza
 *   `surface-raised`/`line-cool` do tema antigo: a mesma cor clara-no-escuro
 *   invertida que o CONTRATO aponta como a marca do desenho velho.
 * Aqui o véu do shim é neutralizado, o cabeçalho interno some por inteiro
 * (não sobra nada que o chrome não already diga) e o corpo vira duas colunas
 * no molde do jogo de referência: convite/vitrine/formulário rolando à
 * esquerda, uma ficha do herói à direita.
 *
 * ── RODADA 2 (26/08) — o que o inspetor reprovou e por quê ─────────────
 * · O "herói ao vivo" NUNCA funcionou: o furo (`clip-path` em `.cvt`, feito
 *   por `convite/index.js`, fora do escopo desta folha) revela o que está
 *   ATRÁS de `.cvt` na pilha — e o que está lá não é mais a cena do jogo, é
 *   o `.rpgw__quadro` do kit (opaco, z-index 44), porque esta janela agora
 *   mora DENTRO do chrome. O furo sempre mostrou o próprio painel da janela:
 *   um retângulo preto. Sem poder tocar em `convite/index.js` nem em
 *   `janela.css`, a saída honesta é DESLIGAR o furo (`.cvt{clip-path:none}`)
 *   e assumir o texto de reserva (`.cvt__semjogo`, que já existe no DOM para
 *   este caso) como o estado normal da coluna — desenhado como ficha, não
 *   como parágrafo solto.
 * · `.cvt__copiar` está na lista de seletores do `identidade/styles.css`
 *   (botão dourado antigo, `!important` em tudo) — nossa regra sem
 *   `!important` nunca vencia. Corrigido com `!important` + especificidade
 *   maior nas MESMAS propriedades que o identidade sobrescreve.
 * · `.cvt` também está na lista do identidade (borda + cantoneiras douradas
 *   nos 4 cantos da JANELA INTEIRA — aqui `.cvt` é `inset:0`, então as
 *   cantoneiras apareciam coladas nos cantos do VIEWPORT, fora do quadro do
 *   kit). Neutralizadas junto.
 *
 * ── COMO ESCREVER AQUI ────────────────────────────────────────────────
 * · prefixo obrigatório `html[data-rpgw='parceiros']`;
 * · toda medida em `calc(Npx * var(--rpg-un, 1))`;
 * · cor só dos tokens (`--rpg-tinta`, `--rpg-ouro`, …) — ver CONTRATO.md;
 * · UM botão dourado por aba: "Copiar" no Convite, "Enviar pedido" em Seja
 *   parceiro, "Enviar link" em Nos viu — nunca dois na mesma vista. Os
 *   cartões de pacote (trocar crédito por gemas) usam aro dourado, não
 *   preenchimento, para não competir com o botão.
 *
 * Validar com:
 *   node ferramentas/foto.mjs parceiros
 *   node ferramentas/inspetor-janela.mjs parceiros
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. O DIÁLOGO — véu neutralizado, caixa vira coluna, cabeçalho duplicado sai
 * ═══════════════════════════════════════════════════════════════════════ */

/* `.cvt` continua fixed/inset:0 (o clique-fora-fecha da lógica própria dele
   depende disso), só perde a própria tinta — quem escurece a cena é o
   `.rpgw__veu` do chrome.
   🚨 `clip-path: none`: o furo que `convite/index.js` recorta em `.cvt` só
   revelava o `.rpgw__quadro` do kit (opaco, atrás de `.cvt` na pilha, na
   MESMA área de tela) — nunca a cena. Ver a nota "RODADA 2" no topo do
   arquivo. Desligar aqui é seguro: sem o furo, `encaixarJanelinha()` mede
   `.cvt__janela` com largura zero (está `display:none`, seção 3) e devolve
   cedo, sem erro no console.
   🚨 `border`/`::before`/`::after: none`: `.cvt` está na lista de seletores
   do `identidade/styles.css` (borda + cantoneiras douradas de "pop-up"). Como
   `.cvt` aqui é `inset:0` (tela inteira, não o quadro), essas cantoneiras
   apareciam coladas nos 4 cantos do VIEWPORT — fora da janela do kit,
   sobrando como um resto do desenho antigo em cima de tudo. */
html[data-rpgw='parceiros'] .cvt {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  clip-path: none !important;
}
html[data-rpgw='parceiros'] .cvt::before,
html[data-rpgw='parceiros'] .cvt::after {
  display: none !important;
}

html[data-rpgw='parceiros'] .cvt__caixa {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(12px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
}

/* O cabeçalho interno é eco puro do chrome (mesmo ícone, mesmo "Parceiros",
   mesmo ✕) — nenhuma das outras janelas de diálogo mantém as duas. */
html[data-rpgw='parceiros'] .cvt__topo {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. AS CINCO ABAS — pílulas no desenho do kit (`.rpg-aba`), copiado à mão:
 *    o DOM daqui não é o do kit, então a aparência vem por seletor próprio.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='parceiros'] .cvt__abas {
  flex: 0 0 auto;
  gap: calc(6px * var(--rpg-un, 1));
  padding: 0 0 calc(8px * var(--rpg-un, 1));
  border-bottom: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  background: none;
}

html[data-rpgw='parceiros'] .cvt__aba {
  position: relative;
  flex: 0 0 auto;
  gap: calc(6px * var(--rpg-un, 1));
  padding: calc(7px * var(--rpg-un, 1)) calc(13px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-cabeca-b) 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
  font-weight: 700;
}
html[data-rpgw='parceiros'] .cvt__aba:hover {
  filter: brightness(1.15);
}
html[data-rpgw='parceiros'] .cvt__aba[aria-selected='true'] {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, #3a2712 0%, var(--rpg-painel-a) 100%);
  color: var(--rpg-tinta);
}
/* O fio aceso embaixo da aba ativa — a mesma marca do `.rpg-aba` do kit. Sem
   ele, azul-claro contra azul-mais-claro não se lê a um metro do celular. */
html[data-rpgw='parceiros'] .cvt__aba[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset: auto calc(8px * var(--rpg-un, 1)) calc(-9px * var(--rpg-un, 1));
  height: calc(2px * var(--rpg-un, 1));
  background: var(--rpg-aro-ouro);
  border-radius: 999px;
}
html[data-rpgw='parceiros'] .cvt__cont {
  min-width: calc(15px * var(--rpg-un, 1));
  padding: 0 calc(4px * var(--rpg-un, 1));
  border-radius: 999px;
  background: var(--rpg-ouro);
  color: #2a1200;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  font-weight: 800;
  text-align: center;
  line-height: calc(15px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__cont[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. O MEIO — corpo (rola) + o herói ao vivo (fixo, coluna direita)
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='parceiros'] .cvt__meio {
  flex: 1 1 auto;
  min-height: 0;
  gap: calc(14px * var(--rpg-un, 1));
}

html[data-rpgw='parceiros'] .cvt__corpo {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--rpg-un, 1));
  min-width: 0;
  padding: calc(2px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rpg-aro) var(--rpg-poço);
}
html[data-rpgw='parceiros'] .cvt__corpo::-webkit-scrollbar {
  width: calc(7px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__corpo::-webkit-scrollbar-track {
  background: var(--rpg-poço);
  border-radius: 999px;
}
html[data-rpgw='parceiros'] .cvt__corpo::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a9782c, #6b4f1f);
  border-radius: 999px;
}
/* Os estados de UM bloco só (formulário, "já mandei", vitrine curta, vitrine
   vazia) boiam no topo de um corpo alto e sobra caixa preta embaixo — a
   mesma lição do "categoria curta" da Loja: em Vídeos/Streamers com poucos
   itens (2-3, o normal desta conta) o corpo tinha metade da altura em preto
   liso. `safe center` cai para o topo sozinho se o conteúdo crescer além do
   vão (não esconde o início atrás do topo do scroll). */
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__form),
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__enviado),
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__cartas),
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__fileiras),
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__vazio) {
  justify-content: flex-start;
  justify-content: safe center;
}
/* A vitrine (cartas/fileiras) ganha moldura própria de "vitrine" — sem ela, o
   vazio ao redor de 2-3 itens centralizados lia como falta de conteúdo; com
   ela, lê como um display case com pouca coisa dentro, não como bug. */
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__cartas),
html[data-rpgw='parceiros'] .cvt__corpo:has(> .cvt__fileiras) {
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
  padding: calc(16px * var(--rpg-un, 1));
}

/* ── a coluna à direita ──────────────────────────────────────────────────
   🚨 `display` NUNCA é tocado fora de media query aqui: `convite/styles.css`
   já esconde esta coluna com `display:none` abaixo de 860 px de VIEWPORT (o
   celular deitado do contrato tem 844) — uma regra minha sem media query
   ganharia por especificidade e devolveria a coluna estreita ao telefone,
   espremendo o corpo contra a moldura do herói. */
html[data-rpgw='parceiros'] .cvt__lado {
  flex-direction: column;
  gap: calc(8px * var(--rpg-un, 1));
  width: calc(190px * var(--rpg-un, 1));
  padding: calc(10px * var(--rpg-un, 1));
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffffff14,
    inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
}
html[data-rpgw='parceiros'] .cvt__lado .cvt__rotulo {
  margin: 0;
  text-align: center;
}
/* O furo nunca revelou a cena de verdade (ver a nota "RODADA 2" no topo do
   arquivo e a que desliga `clip-path` na seção 1) — só o painel opaco do
   kit atrás dele. Escondida: sem isto ela fica de pé, com largura zero,
   como uma caixa fantasma no meio do fluxo. */
html[data-rpgw='parceiros'] .cvt__janela {
  display: none;
}
/* O texto de reserva vira o estado NORMAL da coluna: uma ficha desenhada
   (aro dourado, ícone do herói), não um parágrafo boiando no vazio. */
html[data-rpgw='parceiros'] .cvt__semjogo {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--rpg-un, 1));
  margin: 0;
  padding: calc(14px * var(--rpg-un, 1));
  border: calc(2px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow:
    inset 0 0 0 calc(1px * var(--rpg-un, 1)) #9c7c4e66,
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  line-height: 1.4;
  text-align: center;
}
html[data-rpgw='parceiros'] .cvt__semjogo::before {
  content: '';
  flex: 0 0 auto;
  width: calc(48px * var(--rpg-un, 1));
  height: calc(48px * var(--rpg-un, 1));
  background: url('/potato/rpg/pecas/Icon_100_Bot_Character.png') center / contain no-repeat;
  filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. RÓTULOS DE SEÇÃO E TEXTO CORRIDO — comuns a todas as abas
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='parceiros'] .cvt__pitch {
  margin: 0;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
  line-height: 1.5;
}
html[data-rpgw='parceiros'] .cvt__pitch b {
  color: var(--rpg-ouro);
  font-weight: 800;
}

/* O rótulo de seção — o mesmo `.rpg-secao` do kit: caixa-alta, dourado, fio
   que fecha a linha. `:first-child` não recebe a margem de cima: ele já é o
   primeiro traço dentro do corpo. */
html[data-rpgw='parceiros'] .cvt__rotulo {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--rpg-un, 1));
  margin: calc(2px * var(--rpg-un, 1)) 0 0;
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__rotulo::after {
  content: '';
  flex: 1 1 auto;
  height: calc(1px * var(--rpg-un, 1));
  background: linear-gradient(90deg, #9c7c4e88, #9c7c4e00);
}
html[data-rpgw='parceiros'] .cvt__rotulo:first-child {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. ABA CONVITE — o link, o placar, a espera, os pacotes, o histórico
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── o link, com o botão dourado da tela ────────────────────────────── */
html[data-rpgw='parceiros'] .cvt__linha {
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__link {
  min-width: 0;
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', ui-monospace, monospace;
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}
/* 🚨 `.cvt__copiar` está na lista de seletores do `identidade/styles.css`
   ("botão dourado, como o Continuar do prêmio") — border, border-radius,
   background, box-shadow, color, font-family, font-weight, letter-spacing e
   text-transform, TUDO com `!important`. Uma regra sem `!important` nunca
   vence `!important`, não importa a especificidade — por isso ele saía
   inteiro no desenho antigo (serifa Cinzel, CAIXA ALTA, dourado clarinho)
   mesmo com esta folha carregada depois. Aqui as MESMAS propriedades levam
   `!important` de volta, e a especificidade extra do prefixo
   (`html[data-rpgw='parceiros']` vs só `.cvt__copiar`) garante a vitória. */
html[data-rpgw='parceiros'] .cvt__copiar {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--rpg-un, 1));
  padding: 0 calc(16px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro) !important;
  border-radius: var(--rpg-raio-p) !important;
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%) !important;
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008 !important;
  color: #2a1200 !important;
  font-family: 'Baloo 2', system-ui, sans-serif !important;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  transition: filter 0.12s ease, translate 0.08s ease;
}
html[data-rpgw='parceiros'] .cvt__copiar::before {
  content: '';
  width: calc(14px * var(--rpg-un, 1));
  height: calc(14px * var(--rpg-un, 1));
  background: #2a1200;
  -webkit-mask: url('/potato/rpg/pecas/Icon_40_Copy.png') center / 100% 100% no-repeat;
  mask: url('/potato/rpg/pecas/Icon_40_Copy.png') center / 100% 100% no-repeat;
}
html[data-rpgw='parceiros'] .cvt__copiar:hover {
  filter: brightness(1.12);
}
html[data-rpgw='parceiros'] .cvt__copiar:active {
  translate: 0 calc(1px * var(--rpg-un, 1));
}

/* ── o placar: três fichas, a de crédito com aro aceso ──────────────── */
html[data-rpgw='parceiros'] .cvt__placar {
  gap: calc(8px * var(--rpg-un, 1));
  margin-top: 0;
}
html[data-rpgw='parceiros'] .cvt__bloco {
  gap: calc(2px * var(--rpg-un, 1));
  padding: calc(9px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
}
html[data-rpgw='parceiros'] .cvt__bloco--credito {
  border-color: var(--rpg-aro-ouro);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-painel-b) 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833;
}
html[data-rpgw='parceiros'] .cvt__num {
  color: var(--rpg-tinta);
  font-size: clamp(9.5px, calc(17px * var(--rpg-un, 1)), 22px);
  font-weight: 800;
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__bloco--credito .cvt__num {
  color: var(--rpg-ouro);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
}
html[data-rpgw='parceiros'] .cvt__leg {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  line-height: 1.25;
}

/* ── em liberação: o segundo número ────────────────────────────────────
   🚨 Tracejado só quando NÃO há nada em liberação (`data-cheio='0'`) — é o
   vocabulário do contrato para "vazio". Com saldo em liberação a caixa tem
   conteúdo real (um valor em R$), e tracejado numa caixa preenchida lê como
   "área por preencher", não como o que ela é. */
html[data-rpgw='parceiros'] .cvt__espera {
  margin-top: 0;
  padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) dashed var(--rpg-aro);
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
}
html[data-rpgw='parceiros'] .cvt__espera[data-cheio='1'] {
  border-style: solid;
  border-color: var(--rpg-aro-ouro);
}
html[data-rpgw='parceiros'] .cvt__espera__topo {
  gap: calc(7px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__espera__num {
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  font-weight: 700;
}
/* Nada em liberação: o número apaga — só o rótulo continua de pé, para a
   regra ser lida antes da primeira comissão cair (senão o crédito parado vira
   dúvida no suporte no dia em que aparecer). */
html[data-rpgw='parceiros'] .cvt__espera[data-cheio='0'] .cvt__espera__num {
  color: var(--rpg-tinta-3);
}
html[data-rpgw='parceiros'] .cvt__espera__tag {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-rpgw='parceiros'] .cvt__espera__texto {
  margin: calc(3px * var(--rpg-un, 1)) 0 0;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
  line-height: 1.4;
}

/* ── trocar por gemas: cartões de aro dourado, nunca preenchidos — o
      preenchimento é do botão "Copiar", único da aba ──────────────────── */
html[data-rpgw='parceiros'] .cvt__gastar {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--rpg-un, 1));
  margin-top: 0;
}
html[data-rpgw='parceiros'] .cvt__pacotes {
  gap: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__pacote {
  flex: 1 1 calc(120px * var(--rpg-un, 1));
  gap: calc(2px * var(--rpg-un, 1));
  padding: calc(9px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-painel-b) 100%);
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
html[data-rpgw='parceiros'] .cvt__pacote:hover:not(:disabled) {
  border-color: #ffe1a8;
  filter: brightness(1.1);
}
html[data-rpgw='parceiros'] .cvt__pacote:disabled {
  border-color: var(--rpg-aro);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  filter: none;
  opacity: 0.6;
}
html[data-rpgw='parceiros'] .cvt__pacote b {
  color: var(--rpg-ouro);
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
}
html[data-rpgw='parceiros'] .cvt__pacote span {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
}
/* Ficha, não frase solta: o texto sozinho lia como conteúdo faltando, não
   como um estado desenhado. Tracejada (vazio de verdade, não erro). */
html[data-rpgw='parceiros'] .cvt__semsaldo,
html[data-rpgw='parceiros'] .cvt__vazio {
  margin: 0;
  padding: calc(16px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) dashed var(--rpg-aro);
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  line-height: 1.5;
  text-align: center;
}

/* ── histórico: lista com zebra, no molde do Correio ─────────────────── */
html[data-rpgw='parceiros'] .cvt__hist {
  gap: calc(5px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__item {
  gap: calc(8px * var(--rpg-un, 1));
  padding: calc(7px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: #ffffff08;
}
html[data-rpgw='parceiros'] .cvt__item:nth-child(even) {
  background: #ffffff0d;
}
html[data-rpgw='parceiros'] .cvt__quem {
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}
html[data-rpgw='parceiros'] .cvt__quando {
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
}
html[data-rpgw='parceiros'] .cvt__quanto {
  color: var(--rpg-bom);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  font-weight: 700;
}
/* Em liberação: mesma linha, sem o verde de "já é seu" — o verde é dinheiro
   que já caiu; usá-lo aqui faria o jogador contar como saldo o que a loja
   ainda recusa. */
html[data-rpgw='parceiros'] .cvt__item--espera {
  border-style: dashed;
}
html[data-rpgw='parceiros'] .cvt__item--espera .cvt__quanto,
html[data-rpgw='parceiros'] .cvt__item--espera .cvt__quem {
  color: var(--rpg-tinta-2);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. VITRINE — vídeos (cartas) e streamers (fileiras)
 * ═══════════════════════════════════════════════════════════════════════ */

/* 🚨 `auto-fit`, não `auto-fill`: com 3 cartas numa fileira que cabe 5,
   `auto-fill` mantém as duas colunas vazias no lugar (o vão lateral morto
   que o inspetor mediu); `auto-fit` colapsa o que não tem carta e estica as
   3 que existem para preencher a largura. */
html[data-rpgw='parceiros'] .cvt__cartas {
  gap: calc(9px * var(--rpg-un, 1));
  grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--rpg-un, 1)), 1fr));
}
html[data-rpgw='parceiros'] .cvt__carta {
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
}
html[data-rpgw='parceiros'] .cvt__carta:hover {
  border-color: var(--rpg-aro-ouro);
}
html[data-rpgw='parceiros'] .cvt__capa {
  height: calc(92px * var(--rpg-un, 1));
  border-bottom: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
}
html[data-rpgw='parceiros'] .cvt__capa--sem {
  position: relative;
  background: radial-gradient(120% 130% at 50% 15%, var(--rpg-cabeca-a), var(--rpg-poço) 70%);
}
/* Um ícone de câmera ao fundo, apagado — a letra sozinha lia como
   placeholder de wireframe; o ícone diz "isto é um vídeo" antes de o
   jogador ler o nome. */
html[data-rpgw='parceiros'] .cvt__capa--sem::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(30px * var(--rpg-un, 1));
  height: calc(30px * var(--rpg-un, 1));
  background: var(--rpg-aro-ouro);
  opacity: 0.4;
  -webkit-mask: url('/potato/rpg/pecas/Icon_64_Cam.png') center / contain no-repeat;
  mask: url('/potato/rpg/pecas/Icon_64_Cam.png') center / contain no-repeat;
}
html[data-rpgw='parceiros'] .cvt__capa--sem span {
  position: relative;
  color: var(--rpg-ouro);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(14.5px, calc(26px * var(--rpg-un, 1)), 34px);
  -webkit-text-stroke: calc(1.6px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__carta__txt {
  gap: calc(2px * var(--rpg-un, 1));
  padding: calc(8px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__carta__txt b {
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
}
html[data-rpgw='parceiros'] .cvt__carta__txt span {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}
html[data-rpgw='parceiros'] .cvt__carta__link {
  color: var(--rpg-tinta-3) !important;
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
}

html[data-rpgw='parceiros'] .cvt__fileiras {
  gap: calc(7px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__fileira {
  gap: calc(10px * var(--rpg-un, 1));
  padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
}
html[data-rpgw='parceiros'] .cvt__fileira:hover {
  border-color: var(--rpg-aro-ouro);
}
/* Avatar redondo com aro dourado fino — o mesmo vocabulário do retrato do
   Perfil (`.profile__retrato`), em vez do quadrado com borda azul-genérica
   que lia como lista de contatos de site. */
html[data-rpgw='parceiros'] .cvt__inicial {
  width: calc(32px * var(--rpg-un, 1));
  height: calc(32px * var(--rpg-un, 1));
  border: calc(1.5px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço));
  box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #ffe1a833;
  color: var(--rpg-ouro);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__fileira__txt b {
  color: var(--rpg-tinta);
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
}
html[data-rpgw='parceiros'] .cvt__fileira__txt span {
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(11px * var(--rpg-un, 1)), 14.5px);
}
html[data-rpgw='parceiros'] .cvt__fileira__link {
  max-width: 38%;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10.5px * var(--rpg-un, 1)), 13.5px);
}

html[data-rpgw='parceiros'] .cvt__carregando {
  padding: calc(20px * var(--rpg-un, 1)) 0;
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. FORMULÁRIOS — Seja parceiro e Nos viu aonde?
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='parceiros'] .cvt__form {
  gap: calc(3px * var(--rpg-un, 1));
  max-width: none;
}
html[data-rpgw='parceiros'] .cvt__campo {
  padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff1f;
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(9px, calc(12.5px * var(--rpg-un, 1)), 16.5px);
  font-weight: 400;
}
html[data-rpgw='parceiros'] .cvt__campo:focus {
  border-color: transparent;
  outline: calc(2px * var(--rpg-un, 1)) solid #ffc94a80;
  outline-offset: calc(-1px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__area {
  min-height: calc(52px * var(--rpg-un, 1));
}
html[data-rpgw='parceiros'] .cvt__contagem {
  margin-top: calc(2px * var(--rpg-un, 1));
  color: var(--rpg-tinta-3);
  font-size: clamp(9px, calc(10px * var(--rpg-un, 1)), 13px);
}
html[data-rpgw='parceiros'] .cvt__enviar {
  align-self: flex-start;
  margin-top: calc(8px * var(--rpg-un, 1));
  min-height: calc(34px * var(--rpg-un, 1));
  padding: 0 calc(20px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow:
    inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008;
  color: #2a1200;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  font-weight: 700;
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__enviar:hover:not(:disabled) {
  filter: brightness(1.12);
}
html[data-rpgw='parceiros'] .cvt__enviar:disabled {
  border-color: var(--rpg-aro);
  background: linear-gradient(180deg, var(--rpg-painel-a) 0%, var(--rpg-painel-b) 100%);
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: 0;
}

/* ── "já mandei" (Seja parceiro) ─────────────────────────────────────────
   Sólida, não tracejada: só aparece quando existe um pedido real (data,
   selo, contato) — nunca é o estado vazio. */
html[data-rpgw='parceiros'] .cvt__enviado {
  padding: calc(18px * var(--rpg-un, 1)) calc(14px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro);
  border-radius: var(--rpg-raio-p);
  background: var(--rpg-poço);
}
html[data-rpgw='parceiros'] .cvt__selo {
  padding: calc(6px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1));
  border: calc(2px * var(--rpg-un, 1)) solid var(--rpg-bom);
  border-radius: var(--rpg-raio-p);
  color: var(--rpg-bom);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
  letter-spacing: 0.06em;
  -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205;
  paint-order: stroke fill;
}
html[data-rpgw='parceiros'] .cvt__enviado p {
  margin: calc(12px * var(--rpg-un, 1)) 0 0;
  color: var(--rpg-tinta-2);
  font-size: clamp(9px, calc(12px * var(--rpg-un, 1)), 15.5px);
  line-height: 1.5;
}
html[data-rpgw='parceiros'] .cvt__enviado b {
  color: var(--rpg-ouro);
}
html[data-rpgw='parceiros'] .cvt__denovo {
  margin-top: calc(10px * var(--rpg-un, 1));
  min-height: calc(28px * var(--rpg-un, 1));
  padding: 0 calc(14px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #8a7255;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #6b5a3f 0%, #3f3120 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f;
  color: var(--rpg-tinta);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 15px);
}
html[data-rpgw='parceiros'] .cvt__denovo:hover {
  filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. O RECADO DO RODAPÉ — status de "Copiado!"/"Enviando…"/erro
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-rpgw='parceiros'] .cvt__aviso {
  flex: 0 0 auto;
  margin: 0;
  padding: calc(6px * var(--rpg-un, 1)) calc(2px * var(--rpg-un, 1)) 0;
  min-height: 0;
  border-top: none;
  background: none;
  color: var(--rpg-bom);
  font-size: clamp(9px, calc(11.5px * var(--rpg-un, 1)), 15px);
  font-weight: 700;
}
html[data-rpgw='parceiros'] .cvt__aviso[data-erro='1'] {
  color: var(--rpg-perigo);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. POUCA ALTURA (celular deitado) — a coluna do herói já some (regra do
 *    próprio `convite/styles.css`, ≤860px de viewport); aqui é só apertar o
 *    ritmo vertical para a lista de blocos caber sem cortar.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-height: 420px) {
  html[data-rpgw='parceiros'] .cvt__caixa {
    gap: calc(6px * var(--rpg-un, 1));
    padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='parceiros'] .cvt__abas {
    padding-bottom: calc(6px * var(--rpg-un, 1));
  }
  html[data-rpgw='parceiros'] .cvt__aba {
    padding: calc(10px * var(--rpg-un, 1)) calc(16px * var(--rpg-un, 1));
    font-size: clamp(11px, calc(20px * var(--rpg-un, 1)), 26px);
  }
  html[data-rpgw='parceiros'] .cvt__corpo {
    gap: calc(16px * var(--rpg-un, 1));
  }
  /* 🚨 As dez de baixo (a partir de `.cvt__carta__txt b`) faltavam na rodada
     1: as vitrines (Vídeos/Streamers) saíam com fonte de ~4 px no celular
     deitado — a mesma lição 9-bis nº7 do contrato ("fonte de 3,7 px —
     ninguém lê"), repetida. */
  html[data-rpgw='parceiros'] .cvt__pitch,
  html[data-rpgw='parceiros'] .cvt__link,
  html[data-rpgw='parceiros'] .cvt__campo,
  html[data-rpgw='parceiros'] .cvt__leg,
  html[data-rpgw='parceiros'] .cvt__quem,
  html[data-rpgw='parceiros'] .cvt__quanto,
  html[data-rpgw='parceiros'] .cvt__quando,
  html[data-rpgw='parceiros'] .cvt__semsaldo,
  html[data-rpgw='parceiros'] .cvt__vazio,
  html[data-rpgw='parceiros'] .cvt__espera__texto,
  html[data-rpgw='parceiros'] .cvt__contagem,
  html[data-rpgw='parceiros'] .cvt__carta__txt b,
  html[data-rpgw='parceiros'] .cvt__carta__txt span,
  html[data-rpgw='parceiros'] .cvt__carta__link,
  html[data-rpgw='parceiros'] .cvt__fileira__txt b,
  html[data-rpgw='parceiros'] .cvt__fileira__txt span,
  html[data-rpgw='parceiros'] .cvt__fileira__link,
  html[data-rpgw='parceiros'] .cvt__pacote b,
  html[data-rpgw='parceiros'] .cvt__pacote span {
    font-size: clamp(11.5px, calc(21px * var(--rpg-un, 1)), 27.5px);
  }
  html[data-rpgw='parceiros'] .cvt__num,
  html[data-rpgw='parceiros'] .cvt__espera__num,
  html[data-rpgw='parceiros'] .cvt__inicial {
    font-size: clamp(14.5px, calc(26px * var(--rpg-un, 1)), 34px);
  }
  /* O contador da aba (o "3"/"2" de Vídeos/Streamers) virava uma bolinha sem
     número legível. */
  html[data-rpgw='parceiros'] .cvt__cont {
    min-width: calc(15px * var(--rpg-un, 1));
    font-size: clamp(9px, calc(15px * var(--rpg-un, 1)), 19.5px);
    line-height: calc(21px * var(--rpg-un, 1));
  }
  html[data-rpgw='parceiros'] .cvt__rotulo,
  html[data-rpgw='parceiros'] .cvt__espera__tag {
    font-size: clamp(10px, calc(18px * var(--rpg-un, 1)), 23.5px);
  }
  html[data-rpgw='parceiros'] .cvt__copiar,
  html[data-rpgw='parceiros'] .cvt__enviar {
    font-size: clamp(12px, calc(22px * var(--rpg-un, 1)), 28.5px);
  }
  html[data-rpgw='parceiros'] .cvt__inicial {
    width: calc(46px * var(--rpg-un, 1));
    height: calc(46px * var(--rpg-un, 1));
  }
}