/* A casca da versão web.
   O style.css do app já traz o mercado, o chat e os diálogos prontos. Aqui só
   existe o que a janela do Electron dava de graça: a barra do topo, as abas e
   um palco que ocupa a altura da tela.

   O QUE MUDOU E POR QUÊ. O chat era um painel `position: fixed` caindo por
   cima do mercado — no app ele é uma gaveta lateral, e a web herdou isso sem
   ter para onde a gaveta abrir. Numa tela de 900px o resultado era o mercado
   espremido atrás de uma folha opaca, com as duas coisas ilegíveis.

   Ver o que está à venda e falar com quem vende são dois lugares, não duas
   camadas. Então viraram duas abas, e o chat deixou de flutuar. */

.corpo-web {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--fundo, #0f1014);
  color: var(--texto, #f2f0e9);
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
}

/* Só para leitor de tela: o rótulo do seletor existe, mas ocupar espaço numa
   barra apertada custa mais do que rende. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- a barra ---------------- */
.web-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #0b0c11;
  border-bottom: 1px solid var(--borda);
}
.web-topo .espaco { flex: 1; }
.web-marca {
  font-family: 'Archivo Black', 'Bebas Neue', system-ui, sans-serif;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--texto);
  text-decoration: none;
}
.web-marca:hover { color: var(--acento); }
.web-jogo { display: flex; align-items: center; }

/* AS TRÊS BANDEIRAS.
   São as mesmas da porta de entrada do programa — SVG desenhado, não emoji: o
   Windows não tem os glifos de bandeira e a sequência do emoji brasileiro sai
   na tela como as duas letras "BR".
   Apagadas até o hover, a escolhida acesa: três coisas iguais e uma acesa é
   lido sem instrução nenhuma, em qualquer língua — inclusive na errada, que é
   justamente quando alguém procura por isto. */
.web-idioma { display: flex; align-items: center; gap: 6px; }
.web-idioma .bandeira {
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  flex: none;
  /* Apagadas, mas não a ponto de perder a identidade: mais escuro que isto e
     a bandeira da Espanha vira uma barra marrom a 28px. */
  opacity: 0.6;
  filter: saturate(0.65);
  transition: opacity 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}
.web-idioma .bandeira svg { width: 100%; height: 100%; display: block; }
.web-idioma .bandeira:hover { opacity: 0.9; filter: saturate(0.85); }
.web-idioma .bandeira.ativa {
  opacity: 1;
  filter: none;
  border-color: var(--acento);
  box-shadow: 0 0 8px rgba(198, 240, 78, 0.4);
}
.web-idioma .bandeira:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .web-idioma .bandeira { transition: none; }
}
.web-topo select {
  background: #16181f;
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--texto);
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
}
.web-quem { font-size: 12.5px; color: var(--fraco); }
/* O botão de entrar quebrava em duas linhas e vazava a própria borda: é o
   único caminho para quem chega de fora, e chegava torto. */
.web-topo .btn { white-space: nowrap; flex: none; }
.web-topo select { max-width: 46vw; }

/* ---------------- as abas ----------------
   Em caixa alta condensada, com traço grosso embaixo da ativa: é a mesma
   linguagem do letreiro e das abas do programa, para quem usa os dois não
   sentir que trocou de produto.

   O NÚMERO AO LADO é a peça que carrega informação, não decoração: antes de
   clicar, ele responde "tem alguém do outro lado?", que é a única pergunta
   que importa num mercado. */
.web-abas {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 14px;
  background: #0b0c11;
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
}
.web-aba {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 16px 9px;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--fraco);
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.web-aba:hover { color: var(--texto); }
.web-aba.ativa {
  color: var(--texto);
  border-bottom-color: var(--acento);
}
.web-aba:focus-visible { outline: 2px dashed var(--fita); outline-offset: -3px; }
/* `display: flex` vence o atributo [hidden], que só pede `display: none` na
   folha do navegador. Sem esta linha, a aba de conversa continua na tela para
   quem não entrou — e leva a um chat que não tem como funcionar. */
.web-aba[hidden] { display: none; }

.web-aba-conta {
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fraco);
}
.web-aba.ativa .web-aba-conta { color: var(--acento); text-shadow: var(--brilho); }
.web-aba-conta:empty { display: none; }

/* ---------------- o palco ---------------- */
.web-palco { min-height: 0; display: flex; position: relative; }
.web-palco .mercado { flex: 1; min-width: 0; }

/* O chat deixou de flutuar: aqui ele É a página, quando é a vez dele.
   `position: static` desfaz o `fixed` que ele traz do app, e as duas últimas
   linhas garantem que ele ocupe o palco em vez de encolher no conteúdo. */
.corpo-web .chat-painel {
  position: static;
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
}
/* Na web, o cabeçalho do próprio chat repete o que a aba já diz. */
.corpo-web #chatFechar,
.corpo-web #chatFecharConversa { display: none; }

.web-palco > [hidden] { display: none; }

/* ---------------- telas estreitas ----------------
   No celular a barra e as abas encolhem, mas as abas NÃO somem: sem elas não
   há como chegar ao chat, já que ele deixou de ser um botão flutuante. */
@media (max-width: 720px) {
  .web-topo { gap: 8px; padding: 9px 12px; flex-wrap: wrap; }
  .web-quem { display: none; }
  .web-abas { padding: 0 8px; }
  .web-aba { padding: 10px 12px 8px; font-size: 16px; }
  .mc-topo { padding: 12px; gap: 9px; }
  .mc-grade { padding: 0 12px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* A janela de pagamento, na web, é um diálogo. Abrir uma aba nova seria pior:
   o navegador do celular a esconde atrás do app do banco e voltar vira uma
   aventura. O conteúdo usa as mesmas classes .pag-* da janela do programa. */
.pag-dialogo {
  width: min(392px, 94vw);
  padding: 0;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto);
}
.pag-dialogo::backdrop { background: rgba(0, 0, 0, 0.72); }
/* A tela de "pago" ocupa a altura do diálogo, não da janela: dentro de um
   <dialog> o 100vh do estilo compartilhado esticaria a caixa por toda a tela. */
.pag-dialogo .pag.pago { min-height: 0; padding: 30px 24px; }

/* =========================================================================
   O CHAT NA WEB.

   Ele tem três colunas: canais, mensagens e quem está aqui. Isso funciona numa
   janela de programa, que nasce larga. No navegador ele herda a largura de
   quem chegou — e metade chega pelo celular, onde três colunas viram uma
   conversa de 90px.

   A regra: some primeiro o que é contexto, depois o que é navegação. Quem está
   aqui é bom saber; a lista de canais é preciso alcançar; a conversa é a razão
   de a página existir e nunca cede espaço.
   ========================================================================= */

/* O botão da gaveta só existe onde a gaveta existe. */
.web-canais-botao { display: none; }

/* Primeiro a ceder: a coluna de quem está na sala. */
@media (max-width: 900px) {
  .corpo-web .chat-presentes { display: none; }
  .corpo-web .chat-corpo { grid-template-columns: 152px 1fr; }
}

/* Depois, a lista de canais vira gaveta por cima da conversa.

   A GAVETA É FEITA COM `display`, NÃO COM `transform`.

   O style.css já esconde a lateral abaixo de 720px — no programa a janela do
   chat é redimensionável e a lateral simplesmente sai. Isso deixava o site do
   celular sem como trocar de canal, já que a lateral é o único caminho.

   A primeira tentativa foi deslizar a lateral com translateX, mantendo-a
   sempre presente. Não vingou: o deslocamento resistia até a estilo inline, e
   brigar com a cascata para conseguir uma animação é preço alto por enfeite.
   Aproveitar o `display: none` que já existe como estado FECHADO é mais curto,
   mais firme, e não tem transição para dar errado. */
@media (max-width: 680px) {
  .corpo-web .chat-corpo { grid-template-columns: 1fr; }
  .corpo-web .web-canais-botao { display: inline-flex; align-items: center; }

  /* Fechada: continua escondida, como o style.css já manda. Aberta: aparece
     por cima da conversa, e a conversa continua embaixo, inteira. */
  .corpo-web .chat-lateral.aberta {
    display: flex;
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(240px, 78vw);
    background: var(--painel);
    border-right: 1px solid var(--borda);
    box-shadow: 8px 0 26px rgba(0, 0, 0, 0.5);
  }
  /* A gaveta se posiciona pelo painel do chat; sem isto ela se penduraria na
     página e ficaria por baixo da barra do topo. */
  .corpo-web .chat-painel { position: relative; }
}

/* AS AÇÕES DO TOPO, EM QUALQUER LARGURA.
   
   O contêiner `.web-acoes` é criado pelo web.js SEMPRE, mas só recebia estilo
   dentro do @media de celular. Em tela larga ele virava um div sem regra
   nenhuma: bloco, sem gap, e os controles empilhavam um embaixo do outro —
   justamente onde havia espaço de sobra. Era o topo "desorganizado".
   
   A regra base vale para todas as larguras; o @media abaixo só reposiciona. */
.web-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* O nome de quem entrou não empurra o resto: em nome longo, corta. */
.web-acoes .web-quem {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   A BARRA DO TOPO NO CELULAR.

   Ela quebrava em duas linhas sozinha, e a quebra caía onde calhasse: o botão
   de entrar terminava pendurado embaixo do seletor de idioma, sem relação
   nenhuma com ele. Duas linhas cabem bem — o que não cabia era serem
   acidentais.

   Em cima, quem você é e onde está: a marca e o jogo. Embaixo, o que dá para
   fazer. Cada linha responde a uma pergunta.
   ========================================================================= */
@media (max-width: 600px) {
  .web-topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'marca jogo'
      'acoes acoes';
    gap: 8px 10px;
    padding: 9px 12px;
  }
  .web-marca { grid-area: marca; align-self: center; }
  .web-jogo { grid-area: jogo; }
  .web-jogo select { width: 100%; max-width: none; }
  .web-topo .espaco { display: none; }

  /* As ações vivem numa div própria, criada pelo web.js ao carregar. Sem um
     contêiner, cada botão receberia a mesma `grid-area` e todos empilhariam no
     mesmo lugar — o grid não enfileira irmãos que dividem uma área. */
  .web-acoes {
    grid-area: acoes;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  /* As bandeiras já são pequenas e não têm texto a truncar: o teto que existia
     aqui era para o nome do idioma escrito por extenso, que saiu. */
  .web-acoes .web-idioma { flex: none; }

  /* O BOTÃO DE CHAMADA VIRA SÓ O ÍCONE.

     Medido num aparelho de 375px: com as palavras, ele ocupava 150px e a linha
     inteira precisava de 435 — como as ações são alinhadas à direita e a linha
     não quebrava, o primeiro item era empurrado para FORA da tela. Ele começava
     em -84px: aparecia "da de voz", sem ícone e sem como clicar no começo dele.

     O ícone sozinho é o desenho de um microfone ao lado de uma tela, que já diz
     o que o botão faz — e o texto continua no atributo title, para quem usa
     leitor de tela. */
  .web-acoes .btn.chamar .chamar-dizeres,
  .web-acoes .btn.chamar .chamar-codigo { display: none; }
  .web-acoes .btn.chamar { padding: 5px 9px; }

  /* E a rede de segurança: se um botão novo aparecer aqui um dia, a linha
     quebra em vez de jogar alguma coisa para fora da tela outra vez. */
  .web-acoes { flex-wrap: wrap; row-gap: 6px; }
}

/* =========================================================================
   O AVISO DE MENSAGEM NOVA na aba.

   O número da aba de conversa mostra quem está online. Quando chega mensagem
   sem ler, ele dá lugar à contagem de não-lidas: "3 novas" vale mais que "37
   online" para quem está decidindo se olha agora.
   ========================================================================= */
.web-aba-conta.tem-nova {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--acento2);
  color: #14151a;
  font-weight: 700;
  text-shadow: none;
}
.web-aba.ativa .web-aba-conta.tem-nova { color: #14151a; }

/* =========================================================================
   ESCOLHER MEUS JOGOS.

   O seletor do topo listava os 65 do catálogo. Aqui o catálogo continua
   inteiro — é o lugar certo para ele —, mas com busca e em coluna dupla, que
   é o formato em que 65 nomes se varrem com o olho em vez de com a rolagem.

   O marcado ganha fundo e borda, não só o quadradinho: numa lista longa a
   pessoa precisa ver de relance QUANTOS e QUAIS marcou, sem reler.
   ========================================================================= */
.escolher-jogos {
  width: min(560px, 92vw);
  max-height: 82vh;
  padding: 18px 20px 16px;
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  border-radius: 14px;
  color: var(--texto);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
}
.escolher-jogos::backdrop { background: rgba(6, 7, 10, 0.82); }
.escolher-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.escolher-topo h2 {
  flex: 1;
  margin: 0;
  font-family: 'Bebas Neue', 'Archivo Black', system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.05em;
  color: var(--acento);
  text-shadow: var(--brilho);
}
.escolher-fechar { flex: none; line-height: 1; padding: 2px 9px; font-size: 16px; }
.escolher-sub {
  margin: 6px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fraco, #8b90a0);
}
.escolher-busca {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 7px 10px;
  background: #0b0b0d;
  border: 1px solid var(--borda, #23262d);
  border-radius: 6px;
  color: var(--texto);
  font: inherit;
}
.escolher-busca:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.escolher-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}
.escolher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #101219;
  font-size: 12.5px;
  cursor: pointer;
}
.escolher-item:hover { background: #171a23; }
.escolher-item.marcado {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: color-mix(in srgb, var(--acento) 9%, #101219);
}
.escolher-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolher-item input { accent-color: var(--acento); flex: none; }
.escolher-vazio { grid-column: 1 / -1; margin: 12px 2px; color: var(--fraco); font-size: 12.5px; }
.escolher-pe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.escolher-contagem { flex: 1; font-size: 12px; color: var(--fraco); }

/* No celular a coluna dupla vira simples sozinha pelo auto-fill; o que não se
   ajusta sozinho é a altura, que precisa render a lista em vez do diálogo. */
@media (max-width: 560px) {
  .escolher-grade { max-height: 52vh; }
}

/* =========================================================================
   O SINO DAS NOTIFICAÇÕES.

   Dois estados no mesmo botão, e a diferença precisa ser lida de relance:
   ligado acende no verde da marca; desligado ganha a barra atravessada, que
   é o desenho que todo mundo já sabe ler como "isto está mudo".
   ========================================================================= */
.btn.sino { position: relative; padding: 5px 9px; }
.btn.sino .sino-corte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 -2px 0 rgba(11, 11, 13, 0.9);
}
/* Ligado: sem a barra, e o ícone acende. */
.btn.sino.ligado { color: var(--acento); }
.btn.sino.ligado .sino-corte { display: none; }
.btn.sino[hidden] { display: none; }

/* O recado curto embaixo do topo: o retorno de ativar ou desligar os avisos.
   Some sozinho — recado que fica na tela vira parte do cenario e some da
   atencao de qualquer jeito, so que ocupando espaco. */
.web-recado {
  margin: 0;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--acento) 12%, #0f1116);
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  color: var(--texto);
  font-size: 12.5px;
  line-height: 1.45;
}
.web-recado[hidden] { display: none; }