/** * INVITE — o atalho e o painel. Paleta e variáveis são as do jogo. */ /* * 🚨 O "presentinho" (atalho EVENTO do bundle) sai de cena AQUI, por CSS. * * Ele é placeholder: clicar abre um diálogo que diz "Este sistema ainda está * sendo construído." e nada mais. O Gabriel pediu o Invite "no lugar daquele * presentinho", e esconder por CSS é a forma reversível de fazer isso — o nó é do * React e removê-lo da árvore já derrubou esta interface uma vez. * * Para trazer o Evento de volta quando ele existir: apague esta regra. Só isso. */ .scene-atalhos__item[title='Evento'] { display: none; } /* * O Invite é anexado no FIM da barra e sobe para o topo por `order`. * `.scene-atalhos` é `display: flex; flex-direction: column`, então isto o põe * exatamente onde o presente estava, sem inserir nada no meio dos filhos do React. */ #atalho-invite { order: -1; } /* ── o painel ──────────────────────────────────────────────────── */ /* * ── A PÁGINA (21/08) ─────────────────────────────────────────────── * * 🚨 O `clip-path` é o BURACO da janelinha, e ele é aplicado no `.cvt` inteiro * — não no `.cvt__caixa`. O `.cvt` é `fixed; inset: 0`, então o recorte é medido * em coordenadas de tela, que é o único sistema em que o JS consegue casar a * moldura com a cena do jogo. Recortar a caixa exigiria converter para as * coordenadas dela e erraria a cada rolagem. * * `--parc-recorte` sem valor = `none`: enquanto o JS não mediu (ou quando não há * cena nenhuma na tela), a página é sólida e nada vaza. */ .cvt { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--surface-scrim, rgb(0 4 10 / 0.86)); clip-path: var(--parc-recorte, none); } .cvt__caixa { display: flex; flex-direction: column; width: 100%; max-width: 940px; max-height: min(92vh, 720px); overflow: hidden; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 10px; background: var(--surface-base, #010c18); box-shadow: 0 18px 48px rgb(0 0 0 / 0.6); color: var(--text, #e9edf6); font-size: var(--fs-400, 13px); } /* * ── A CENA ENCOLHIDA ─────────────────────────────────────────────── * * 🚨 Regra de FOLHA, presa a uma classe no ``, e nunca `style` inline: o * nó da cena é do React e um inline meu morre no próximo render. Assim a * janelinha sobrevive a qualquer redesenho e some sozinha quando a classe sai. * * 🚨 `pointer-events: none`: dentro da janelinha os botões de skill ficam do * tamanho de uma ervilha. Um toque errado ali gastaria a poção de alguém. */ body.parceiros-aberta section.panel.scene { transform: translate(var(--parc-dx, 0), var(--parc-dy, 0)) scale(var(--parc-escala, 1)); transform-origin: 0 0; pointer-events: none; } /* ── abas ──────────────────────────────────────────────────────── */ .cvt__abas { display: flex; flex: none; gap: 4px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--line-cool, #0d2135); background: var(--surface-raised, #061a2b); scrollbar-width: none; } .cvt__abas::-webkit-scrollbar { display: none; } .cvt__aba { display: flex; flex: none; gap: 5px; align-items: center; padding: 7px 12px; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 7px; background: var(--surface-inset, #000610); color: var(--muted, #8ea3bd); cursor: pointer; font-family: inherit; font-size: var(--fs-300, 12px); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .cvt__aba:hover { border-color: var(--gold-700, #8a5a1c); color: var(--text, #e9edf6); } .cvt__aba[aria-selected='true'] { border-color: var(--gold-300, #f2d089); color: var(--gold-300, #f2d089); font-weight: 700; } .cvt__cont { padding: 1px 6px; border-radius: 999px; background: var(--line-cool-2, #1d4463); color: var(--text, #e9edf6); font-size: var(--fs-100, 10px); } /* ── o miolo: conteúdo + janelinha ─────────────────────────────── */ /* * 🚨 A altura mínima existe para a JANELINHA não pular. Cada aba tem um tamanho * diferente, e sem o piso a caixa encolhia na aba de vídeos, a moldura subia e * o jogo dava um salto na tela a cada clique — parecia falha de desenho. */ .cvt__meio { display: flex; min-height: min(420px, 60vh); flex: 1; gap: 0; } .cvt__lado { display: flex; flex: none; width: 300px; flex-direction: column; padding: 12px; border-left: 1px solid var(--line-cool, #0d2135); background: var(--surface-raised, #061a2b); } /* * A moldura. Ela é um buraco: NÃO pode ter fundo, senão tapa a cena que o * `clip-path` acabou de descobrir. */ .cvt__janela { width: 100%; height: 168px; border: 1px solid var(--gold-700, #8a5a1c); border-radius: 8px; background: transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5); } .cvt__semjogo { margin: 8px 0 0; color: var(--faint, #55688a); font-size: var(--fs-200, 11px); line-height: 1.4; } /* Com a cena na tela, o aviso não aparece; sem ela, a moldura não aparece. */ .cvt[data-sem-jogo='0'] .cvt__semjogo, .cvt[data-sem-jogo='1'] .cvt__janela { display: none; } /* * 🚨 No celular a janelinha SOME (e a cena volta ao normal). * * A maior parte da base joga no telefone, e lá a cena ocupa quase a tela toda: * encolhê-la para um retângulo de 100 px deixaria o herói do tamanho de uma * unha e roubaria metade do espaço de leitura da página. Ver o jogo é bônus; * ler a página é o assunto. */ @media (max-width: 860px) { .cvt__lado { display: none; } body.parceiros-aberta section.panel.scene { transform: none; } } .cvt__topo { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-cool, #0d2135); background: var(--surface-raised, #061a2b); } .cvt__icone { width: 20px; height: 20px; object-fit: contain; } .cvt__titulo { flex: 1; color: var(--gold-300, #f2d089); font-family: var(--font-display, Georgia, serif); font-size: var(--fs-600, 18px); letter-spacing: 0.04em; } .cvt__x { padding: 2px 8px; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 6px; background: transparent; color: var(--muted, #8ea3bd); cursor: pointer; font-size: var(--fs-300, 12px); } .cvt__x:hover { border-color: var(--gold-300, #f2d089); color: var(--text, #e9edf6); } .cvt__corpo { min-width: 0; flex: 1; overflow-y: auto; padding: 12px; } /* ── vitrine: vídeos e streamers ───────────────────────────────── */ .cvt__cartas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .cvt__carta { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line-cool, #0d2135); border-radius: 8px; background: var(--surface-raised, #061a2b); color: inherit; text-decoration: none; } .cvt__carta:hover { border-color: var(--gold-300, #f2d089); } .cvt__capa { display: block; width: 100%; height: 104px; border-bottom: 1px solid var(--line-cool, #0d2135); object-fit: cover; } .cvt__capa--sem { display: grid; background: linear-gradient(150deg, #0a1f33, #04101c); place-items: center; } .cvt__capa--sem span { color: var(--gold-300, #f2d089); font-family: var(--font-display, Georgia, serif); font-size: 30px; } .cvt__carta__txt { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; } .cvt__carta__txt b { color: var(--text, #e9edf6); } .cvt__carta__txt span { color: var(--muted, #8ea3bd); font-size: var(--fs-200, 11px); } .cvt__carta__link { overflow: hidden; color: var(--faint, #55688a) !important; text-overflow: ellipsis; white-space: nowrap; } /* ── formulários ───────────────────────────────────────────────── */ .cvt__form { display: flex; max-width: 460px; flex-direction: column; } .cvt__campo { padding: 8px 10px; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 6px; background: var(--surface-inset, #000610); color: var(--text, #e9edf6); font-family: inherit; font-size: var(--fs-400, 13px); } .cvt__campo:focus { border-color: var(--gold-300, #f2d089); outline: none; } .cvt__area { min-height: 74px; resize: vertical; } .cvt__contagem { align-self: flex-end; margin-top: 3px; color: var(--faint, #55688a); font-size: var(--fs-200, 11px); } .cvt__enviar { align-self: flex-start; margin-top: 12px; padding: 9px 20px; border: 1px solid var(--gold-700, #8a5a1c); border-radius: 7px; background: linear-gradient(#f2d089, #dc911e); color: var(--on-gold, #2a1a02); cursor: pointer; font-family: inherit; font-weight: 700; } .cvt__enviar:hover:not(:disabled) { filter: brightness(1.08); } .cvt__enviar:disabled { cursor: progress; opacity: 0.55; } /* O estado "já mandei", no lugar do formulário. */ .cvt__enviado { padding: 18px 14px; border: 1px dashed var(--line-cool-2, #1d4463); border-radius: 10px; background: var(--surface-inset, #000610); text-align: center; } .cvt__selo { display: inline-block; padding: 6px 16px; border: 2px solid var(--green, #4ade80); border-radius: 6px; color: var(--green, #4ade80); font-family: var(--font-display, Georgia, serif); font-size: var(--fs-600, 18px); letter-spacing: 0.06em; rotate: -4deg; text-transform: uppercase; } .cvt__enviado p { margin: 14px 0 0; color: var(--muted, #8ea3bd); line-height: 1.5; } .cvt__enviado b { color: var(--gold-300, #f2d089); } .cvt__denovo { margin-top: 12px; padding: 6px 14px; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 6px; background: transparent; color: var(--muted, #8ea3bd); cursor: pointer; font-family: inherit; font-size: var(--fs-300, 12px); } .cvt__denovo:hover { border-color: var(--gold-300, #f2d089); color: var(--text, #e9edf6); } .cvt__pitch { margin: 0 0 12px; color: var(--muted, #8ea3bd); line-height: 1.45; } .cvt__pitch b { color: var(--gold-300, #f2d089); } .cvt__rotulo { display: block; margin: 12px 0 5px; color: var(--faint, #55688a); font-size: var(--fs-200, 11px); letter-spacing: 0.08em; text-transform: uppercase; } .cvt__rotulo:first-child { margin-top: 0; } /* ── o link ────────────────────────────────────────────────────── */ .cvt__linha { display: flex; gap: 6px; } .cvt__link { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 6px; background: var(--surface-inset, #000610); color: var(--text, #e9edf6); font-family: ui-monospace, monospace; font-size: var(--fs-300, 12px); } .cvt__copiar { padding: 7px 14px; border: 1px solid var(--gold-700, #8a5a1c); border-radius: 6px; background: linear-gradient(#f2d089, #dc911e); color: var(--on-gold, #2a1a02); cursor: pointer; font-weight: 700; white-space: nowrap; } .cvt__copiar:hover { filter: brightness(1.08); } /* ── o placar ──────────────────────────────────────────────────── */ .cvt__placar { display: grid; gap: 6px; margin-top: 12px; grid-template-columns: repeat(3, 1fr); } .cvt__bloco { display: flex; flex-direction: column; gap: 2px; padding: 9px 6px; border: 1px solid var(--line-cool, #0d2135); border-radius: 8px; background: var(--surface-raised, #061a2b); text-align: center; } .cvt__bloco--credito { border-color: var(--gold-700, #8a5a1c); } .cvt__num { color: var(--text, #e9edf6); font-size: var(--fs-500, 15px); font-weight: 700; } .cvt__bloco--credito .cvt__num { color: var(--gold-300, #f2d089); } .cvt__leg { color: var(--faint, #55688a); font-size: var(--fs-100, 10px); line-height: 1.25; } /* ── em liberação (quarentena de 24 h) ─────────────────────────── */ /* * O SEGUNDO número, e o aviso do Gabriel. * * 🚨 Fica FORA do `.cvt__placar` de propósito. O placar é uma grade de três * colunas, e uma quarta caixa espremeria "R$ 1.234,00" em ~80 px no celular — a * maioria da base joga no telefone. Aqui a linha ocupa a largura inteira e o * aviso cabe embaixo, legível. * * Com saldo zero em liberação o bloco continua visível, só apagado * (`data-cheio="0"`): a regra precisa ser lida ANTES de o jogador ganhar a * primeira comissão, senão o primeiro crédito parado vira dúvida no suporte. */ .cvt__espera { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--line-cool-2, #1d4463); border-radius: 8px; background: var(--surface-inset, #000610); } .cvt__espera__topo { display: flex; gap: 6px; align-items: baseline; } .cvt__espera__num { color: var(--gold-300, #f2d089); font-size: var(--fs-500, 15px); font-weight: 700; } .cvt__espera__tag { color: var(--muted, #8ea3bd); font-size: var(--fs-200, 11px); letter-spacing: 0.06em; text-transform: uppercase; } .cvt__espera__texto { margin: 3px 0 0; color: var(--faint, #55688a); font-size: var(--fs-200, 11px); line-height: 1.4; } /* Nada em liberação: o aviso continua ali, sem chamar atenção. */ .cvt__espera[data-cheio='0'] .cvt__espera__num { color: var(--faint, #55688a); } /* ── gastar o crédito ──────────────────────────────────────────── */ .cvt__gastar { margin-top: 4px; } .cvt__pacotes { display: flex; flex-wrap: wrap; gap: 6px; } .cvt__pacote { display: flex; flex: 1 1 120px; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--gold-700, #8a5a1c); border-radius: 8px; background: var(--surface-raised, #061a2b); color: var(--text, #e9edf6); cursor: pointer; text-align: center; } .cvt__pacote:hover:not(:disabled) { border-color: var(--gold-300, #f2d089); background: #0a1a2c; } .cvt__pacote:disabled { cursor: progress; opacity: 0.55; } .cvt__pacote b { color: var(--gold-300, #f2d089); } .cvt__pacote span { color: var(--muted, #8ea3bd); font-size: var(--fs-200, 11px); } .cvt__semsaldo, .cvt__vazio { margin: 0; color: var(--faint, #55688a); font-size: var(--fs-300, 12px); line-height: 1.4; } /* ── o histórico ───────────────────────────────────────────────── */ .cvt__hist { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; } .cvt__item { display: grid; align-items: center; padding: 6px 8px; border: 1px solid var(--line-cool, #0d2135); border-radius: 6px; background: var(--surface-inset, #000610); gap: 8px; grid-template-columns: 1fr auto auto; } .cvt__quem { overflow: hidden; color: var(--text, #e9edf6); text-overflow: ellipsis; white-space: nowrap; } .cvt__quando { color: var(--faint, #55688a); font-size: var(--fs-200, 11px); } .cvt__quanto { color: var(--green, #4ade80); font-weight: 700; } /* * Comissão ainda em liberação: mesma linha, sem o verde de "é seu". * * 🚨 O verde é a cor de dinheiro que já caiu. Deixá-lo aqui faria o jogador * contar como saldo o que a loja vai recusar — e a recusa, depois de ver verde na * tela, parece bug. */ .cvt__item--espera { border-style: dashed; } .cvt__item--espera .cvt__quanto, .cvt__item--espera .cvt__quem { color: var(--muted, #8ea3bd); } /* ── recados ───────────────────────────────────────────────────── */ /* * Rodapé fixo do painel: fica FORA da área que `desenhar` reescreve, então o * recado não é apagado pela releitura do saldo (ver o comentário no index.js). */ .cvt__aviso { flex: none; margin: 0; padding: 8px 12px; min-height: 1.2em; border-top: 1px solid var(--line-cool, #0d2135); background: var(--surface-raised, #061a2b); color: var(--green, #4ade80); font-size: var(--fs-300, 12px); } .cvt__aviso:empty { display: none; } .cvt__aviso[data-erro='1'] { color: var(--error, #ff5f6a); } .cvt__carregando { margin: 0; padding: 18px 0; color: var(--faint, #55688a); text-align: center; } /* ── streamers: lista, não cartas ──────────────────────────────── */ .cvt__fileiras { display: flex; flex-direction: column; gap: 6px; } .cvt__fileira { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-cool, #0d2135); border-radius: 8px; background: var(--surface-raised, #061a2b); color: inherit; text-decoration: none; } .cvt__fileira:hover { border-color: var(--gold-300, #f2d089); } .cvt__inicial { display: grid; width: 32px; height: 32px; flex: none; border: 1px solid var(--line-cool-2, #1d4463); border-radius: 8px; background: linear-gradient(150deg, #0a1f33, #04101c); color: var(--gold-300, #f2d089); font-family: var(--font-display, Georgia, serif); font-size: var(--fs-500, 15px); place-items: center; } .cvt__fileira__txt { display: flex; min-width: 0; flex: 1; flex-direction: column; } .cvt__fileira__txt b { color: var(--text, #e9edf6); } .cvt__fileira__txt span { color: var(--muted, #8ea3bd); font-size: var(--fs-200, 11px); } /* No celular o endereço sai: ele é longo e empurraria o nome para fora. */ .cvt__fileira__link { overflow: hidden; flex: none; max-width: 40%; color: var(--faint, #55688a); font-size: var(--fs-200, 11px); text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 520px) { .cvt__fileira__link { display: none; } }