/* Elite Trade — sala de sinais.
   Identidade herdada da landing (elite-trade-landing): preto absoluto, dourado,
   Space Grotesk nos titulos e Manrope no texto. Sem emoji: os simbolos sao
   tipografia, cor e SVG.

   Mobile-first. Desktop = o MESMO layout, centralizado e com largura limitada.
   Sem framework e sem lib de animacao: tem que abrir rapido em Android fraco. */

*, *::before, *::after { box-sizing: border-box; }

/* `.cta { display:block }` e `.cta-duplo { display:grid }` venciam o atributo
   [hidden] por especificidade, e os dois grupos de botao apareciam juntos. */
[hidden] { display: none !important; }

:root {
  --preto: #020202;
  --carvao: #0a0a0a;
  --carvao2: #111111;
  --linha: rgba(255, 255, 255, .09);
  --linha2: rgba(255, 255, 255, .16);
  --texto: #f5f5f0;
  --texto2: #a3a3a3;
  --texto3: #737373;
  --ouro: #d4af37;
  --ouro-claro: #e8cf7a;
  --ouro-escuro: #a97c1f;
  --verde: #22c55e;
  --vermelho: #dc2626;
  --raio: 16px;
  --display: "Space Grotesk", system-ui, sans-serif;
  --corpo: "Manrope", system-ui, -apple-system, sans-serif;
}

html { color-scheme: dark; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--preto);
  color: var(--texto);
  font: 400 15px/1.5 var(--corpo);
  -webkit-font-smoothing: antialiased;
  padding: 0 0 32px;
}

h1, h2, h3, .display { font-family: var(--display); letter-spacing: -.02em; }

/* o "desktop" e o mesmo mobile centralizado — decisao do Renner, layout unico */
.wrap { max-width: 480px; margin: 0 auto; padding: 0 14px; position: relative; }

/* brilho dourado difuso atras do card do sinal, igual ao da landing */
.wrap::before {
  content: ''; position: absolute; top: 40px; left: 50%; width: 340px; height: 340px;
  transform: translateX(-50%); background: var(--ouro); opacity: .07;
  filter: blur(90px); border-radius: 50%; pointer-events: none; z-index: -1;
}

/* rotulo de secao: minusculo, versal, bem espacado — padrao da landing */
.kicker {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase; color: var(--ouro-claro);
  margin: 0 0 12px;
}
.kicker.frio { color: var(--texto3); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 11px; padding: 18px 2px 16px; }
.top img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.marca { line-height: 1.05; }
.marca .n1 {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase;
  background-image: linear-gradient(120deg, #e8cf7a 0%, #d4af37 45%, #a97c1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.marca .n2 {
  font-family: var(--display); font-size: 9px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--texto3);
}
.top .dir { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* iOS Safari as vezes some com texto em background-clip; solido garante nitidez */
@media (max-width: 639px) {
  .marca .n1 { background: none; -webkit-text-fill-color: var(--ouro-claro); color: var(--ouro-claro); }
}

.pill {
  font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--linha); color: var(--texto3); white-space: nowrap;
}
.pill.viva { color: var(--verde); border-color: rgba(34, 197, 94, .3); }
.pill.viva::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--verde); margin-right: 6px; vertical-align: 1px;
}

.icone-btn {
  background: transparent; border: 1px solid var(--linha); color: var(--texto2);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.icone-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.icone-btn.on { color: var(--ouro); border-color: rgba(212, 175, 55, .35); }

/* aviso do sino: sem isso a pessoa liga o sino, o navegador bloqueia em silencio
   e ela acha que esta recebendo aviso */
.nota-sino {
  margin: 0 0 11px; padding: 11px 14px; border-radius: 12px; font-size: 13px;
  line-height: 1.5; border: 1px solid rgba(212, 175, 55, .3);
  background: rgba(212, 175, 55, .07); color: var(--ouro-claro);
}
.nota-sino.erro {
  border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .08); color: #fca5a5;
}

/* ---------- cards ---------- */
.card {
  background: var(--carvao); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 18px; margin-bottom: 11px;
}

/* Altura fixa: o card troca de estado o tempo todo. Se ele encolher/crescer, a
   pagina pula e empurra o botao da Avalon bem na hora que o sinal chega -- a
   pessoa toca no lugar errado. 465px = medido no estado mais alto (ENTRADA com
   3 horarios, contagem e 3 motivos). Ao mexer no card, medir de novo. */
.sinal {
  min-height: 465px; display: flex; flex-direction: column; justify-content: center;
  border-color: var(--linha2);
}

.sinal .ativo {
  font-family: var(--display); font-size: 32px; font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
}
.direcao {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: .04em;
}
.direcao.call { color: var(--verde); }
.direcao.put { color: var(--vermelho); }
.seta { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.direcao.call .seta { border-bottom: 12px solid var(--verde); }
.direcao.put .seta { border-top: 12px solid var(--vermelho); }
.tf {
  color: var(--texto3); font-size: 11px; margin-top: 8px;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}

.horarios { margin-top: 16px; display: grid; gap: 5px; }
.hora {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--carvao2); border: 1px solid transparent; border-radius: 10px; font-size: 13px;
}
.hora .rot { color: var(--texto3); letter-spacing: .04em; }
.hora .val { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }

/* Contorno dourado marca a vela EM ANDAMENTO -- em vela de 30s a pessoa precisa
   saber de relance se esta na entrada ou ja na protecao. */
.hora.agora {
  border-color: var(--ouro);
  background: rgba(212, 175, 55, .09);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 0 18px rgba(212, 175, 55, .12);
}
.hora.agora .rot { color: var(--ouro-claro); font-weight: 600; }
.hora.agora .val { color: var(--ouro-claro); }
.hora .tag {
  font-family: var(--display); font-size: 9px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #1a1205; background: var(--ouro);
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}

.conta { margin-top: 16px; text-align: center; }
.conta .rot {
  font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--texto3); display: block; margin-bottom: 3px;
}
.conta .val {
  font-family: var(--display); font-size: 34px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ouro); line-height: 1;
}

.motivos { margin-top: 14px; font-size: 13px; color: var(--texto2); }
.motivos ul { margin: 5px 0 0; padding-left: 16px; }
.motivos li { margin-top: 2px; }

.centro { text-align: center; }
.centro .ativo { font-size: 24px; margin-top: 10px; }
.msg { color: var(--texto2); font-size: 14px; margin-top: 8px; }

/* selo grande de resultado, no lugar do emoji */
.resultado {
  font-family: var(--display); font-weight: 700; letter-spacing: .1em;
  font-size: 40px; line-height: 1;
}
.resultado.win { color: var(--verde); }
.resultado.loss { color: var(--vermelho); }

/* estado "sala fechada" / "analisando": circulo discreto no lugar do emoji */
.selo-vazio {
  width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
  border: 1px solid var(--linha2); display: grid; place-items: center;
}
.selo-vazio svg { width: 22px; height: 22px; fill: none; stroke: var(--texto3); stroke-width: 1.5; }

/* ---------- estado bloqueado (a isca) ---------- */
/* O borrao e COSMETICO. A trava real e no servidor: sem sessao, o detalhe do
   sinal nem e enviado (ver api/sinais.js). Nao ha o que revelar no inspecionar. */
.sinal.trancado { position: relative; }
.fake { filter: blur(10px); opacity: .4; user-select: none; pointer-events: none; }
.cadeado {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 18px;
}
.cadeado svg { width: 26px; height: 26px; fill: none; stroke: var(--ouro); stroke-width: 1.5; }
.cadeado .anel {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(212, 175, 55, .3); background: rgba(212, 175, 55, .05);
}
.cadeado .txt { font-family: var(--display); font-weight: 600; font-size: 16px; }
.cadeado .sub { color: var(--texto3); font-size: 13px; max-width: 230px; }

/* ---------- botoes ---------- */
.cta {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; padding: 16px; border-radius: 999px; border: 0;
  margin-bottom: 11px; cursor: pointer;
  background: linear-gradient(120deg, var(--ouro-claro) 0%, var(--ouro) 55%, var(--ouro-escuro) 100%);
  color: #1a1205;
}
.cta.secundario {
  background: transparent; border: 1px solid var(--linha2); color: var(--texto);
  font-family: var(--display);
}
.cta-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cta-duplo .cta { font-size: 12px; padding: 15px 6px; letter-spacing: .08em; }
/* 340px ou menos (iPhone SE): lado a lado o texto quebra feio */
@media (max-width: 340px) { .cta-duplo { grid-template-columns: 1fr; gap: 0; } }

/* ---------- historico ---------- */
.grade { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.q { aspect-ratio: 1; border-radius: 4px; background: var(--carvao2); border: 1px solid var(--linha); }
.q.win { background: var(--verde); border-color: var(--verde); }
.q.loss { background: var(--vermelho); border-color: var(--vermelho); }
.legenda { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 13px; font-size: 11px; color: var(--texto3); }
.legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* ---------- rodape ---------- */
.blocos { display: flex; gap: 7px; flex-wrap: wrap; }
.bloco {
  border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--texto2);
}
.bloco.on { border-color: rgba(34, 197, 94, .35); color: var(--verde); }

details.ajuda { border-top: 1px solid var(--linha); }
details.ajuda:first-of-type { border-top: 0; }
details.ajuda summary {
  cursor: pointer; font-size: 14px; padding: 12px 0; font-weight: 600;
  list-style: none; display: flex; align-items: center;
}
details.ajuda summary::-webkit-details-marker { display: none; }
details.ajuda summary::after {
  content: '+'; margin-left: auto; color: var(--texto3); font-size: 18px; font-weight: 400;
}
details.ajuda[open] summary::after { content: '−'; }
details.ajuda .passo { font-size: 13px; color: var(--texto2); padding-bottom: 13px; line-height: 1.7; }
details.ajuda .passo b { color: var(--texto); font-weight: 600; }
/* a regra do Safari e o motivo n1 de a pessoa desistir de instalar no iPhone */
details.ajuda .passo .atencao { color: var(--ouro-claro); font-weight: 700; }

.marca-fim { text-align: center; padding: 22px 0 10px; }
.marca-fim img { width: 30px; height: 30px; object-fit: contain; opacity: .55; }
.aviso { font-size: 11px; line-height: 1.6; color: #525252; text-align: center; padding: 0 10px; }

/* ---------- modal de login ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(2, 2, 2, .9); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 18px; z-index: 50;
}
.modal.abre { display: flex; }
.modal .box {
  background: var(--carvao); border: 1px solid var(--linha2); border-radius: var(--raio);
  padding: 26px 22px; width: 100%; max-width: 340px; text-align: center;
}
.modal .box img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 14px; }
.modal h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.modal p.ajuda-txt { margin: 0 0 18px; font-size: 13px; color: var(--texto3); }
.campo {
  width: 100%; background: var(--preto); border: 1px solid var(--linha);
  color: var(--texto); border-radius: 10px; padding: 13px; font-size: 16px;
  margin-bottom: 9px; font-family: var(--corpo);
}
.campo:focus { outline: none; border-color: rgba(212, 175, 55, .45); }
.lembrar {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--texto2); margin: 4px 0 15px; text-align: left;
}
.lembrar input { accent-color: var(--ouro); }
.erro { color: var(--vermelho); font-size: 13px; min-height: 18px; margin-bottom: 6px; }
.btn-txt {
  width: 100%; background: transparent; border: 0; color: var(--texto3);
  font-size: 13px; padding: 12px; cursor: pointer; font-family: var(--corpo);
  text-decoration: none; display: block;
}
.btn-txt b { color: var(--ouro-claro); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .card, .q, .cta { transition: background-color .15s ease, border-color .15s ease; }
}

/* Turnstile do login: some enquanto vazio (captcha desligado) e centraliza o widget quando existe */
.cf-wrap { display: flex; justify-content: center; margin: 8px 0; }
.cf-wrap:empty { display: none; }