/* ============================================================
   PrimeCaixa — tema NAVY/AZUL (referência: layout do dono)
   Fundo azul-marinho profundo, brilho azul nas bordas, cards de vidro.
   O verde ficou reservado pro que é dinheiro/sucesso (saldo, WIN, depósito);
   o azul é a cor de ação da interface.
   ============================================================ */

:root {
  --bg: #050b1c;
  --bg-elevada: #0b1730;
  --bg-card: rgba(13, 25, 52, 0.72);
  --borda: #16294f;

  --azul: #2d8cff;
  --azul-forte: #1f6bff;
  --azul-brilho: rgba(45, 140, 255, 0.55);

  --verde: #17c964;
  --verde-escuro: #109b4d;
  --dourado: #ffbf3f;

  --texto: #eef4ff;
  --texto-suave: #9ab0d6;
  --texto-fraco: #62789e;

  --erro: #ff5d5d;
  --erro-bg: rgba(255, 93, 93, 0.12);
  --sucesso: #17c964;
  --sucesso-bg: rgba(23, 201, 100, 0.12);

  --double-vermelho: #e2453b;
  --double-preto: #1c1f27;
  --double-branco: #eef2f7;

  --raio: 18px;
  --raio-sm: 12px;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sombra-forte: 0 12px 32px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(1100px 620px at 88% 6%, rgba(31, 107, 255, 0.30), transparent 62%),
    radial-gradient(900px 700px at 4% 92%, rgba(31, 107, 255, 0.20), transparent 60%),
    linear-gradient(160deg, #071231 0%, #050b1c 46%, #04091a 100%);
  background-attachment: fixed;
}

/* Decoração do fundo: malha de pontos (cantos) + arcos de luz azul.
   Fica FIXA e sem captar clique — é só cenário atrás da interface. */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

/* pontinhos nos cantos superior-esquerdo e inferior-direito */
body::before {
  inset: 0;
  background-image: radial-gradient(rgba(120, 165, 255, 0.30) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image:
    radial-gradient(closest-side at 6% 10%, #000 0%, transparent 100%),
    radial-gradient(closest-side at 95% 88%, #000 0%, transparent 100%);
  mask-image:
    radial-gradient(closest-side at 6% 10%, #000 0%, transparent 100%),
    radial-gradient(closest-side at 95% 88%, #000 0%, transparent 100%);
  -webkit-mask-size: 46% 46%, 40% 44%;
  mask-size: 46% 46%, 40% 44%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.75;
}

/* arcos de luz: dois círculos gigantes só com borda, saindo pela direita */
body::after {
  top: -38vh;
  right: -30vw;
  width: 128vh;
  height: 128vh;
  border-radius: 50%;
  border: 1px solid rgba(90, 155, 255, 0.30);
  box-shadow:
    0 0 90px 8px rgba(45, 140, 255, 0.16),
    inset 0 0 120px 10px rgba(45, 140, 255, 0.09);
}

/* segundo arco, embaixo à esquerda (elemento próprio pra não brigar com os ::) */
.arco-fundo {
  position: fixed;
  left: -46vw;
  bottom: -64vh;
  width: 120vh;
  height: 120vh;
  border-radius: 50%;
  border: 1px solid rgba(90, 155, 255, 0.22);
  box-shadow: 0 0 80px 6px rgba(45, 140, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* tudo que é interface fica ACIMA do cenário */
.app, .header { position: relative; z-index: 1; }

button, input, select {
  font-family: inherit;
  color: inherit;
}

/* ── layout base ─────────────────────────────────────────── */

.app {
  min-height: 100vh;
  padding-bottom: 40px;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

.view { width: 100%; }
.view[hidden] { display: none !important; }

.view-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* ── header fixo ─────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(5, 11, 28, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(45, 140, 255, 0.16);
}

/* marca no canto esquerdo, como no layout de referência */
.header-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.marca-mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--azul), var(--azul-forte));
  color: #fff; font-weight: 900; font-size: 15px;
  box-shadow: 0 0 16px var(--azul-brilho);
}
.marca-texto { font-size: 15px; font-weight: 800; letter-spacing: 0.12em; color: var(--texto); }
.marca-texto b { color: var(--azul); font-weight: 900; }

.header-dir { display: flex; align-items: center; gap: 10px; }

/* pílula do saldo (o retângulo escuro do canto direito na referência) */
.pill-saldo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(10, 22, 48, 0.9);
  border: 1px solid rgba(45, 140, 255, 0.28);
  box-shadow: inset 0 0 18px rgba(45, 140, 255, 0.08);
}
.pill-saldo-ico { color: var(--azul); font-size: 13px; }
.pill-saldo strong { font-size: 14px; font-weight: 800; color: var(--texto); font-family: 'JetBrains Mono', monospace; }

.header-email-oculto { display: none; }
.ponto-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde);
  border: 2px solid #050b1c;
}
.header[hidden] { display: none !important; }

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.header-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(45, 140, 255, 0.28), rgba(11, 23, 48, 0.9));
  border: 1px solid rgba(45, 140, 255, 0.35);
  font-size: 16px;
}

.header-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-info strong {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55vw;
}

.header-saldo {
  font-size: 12px;
  color: var(--verde);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.btn-icon {
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 8px 14px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-icon:hover { border-color: var(--erro); color: var(--erro); }

/* ── cards ───────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}

.card-login {
  width: 100%;
  max-width: 380px;
}

/* logo */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.logo-mark {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
  color: #06170d;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(23, 201, 100, 0.35);
}
.logo-text {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.logo-text b { font-weight: 800; color: var(--dourado); }

.subtitle {
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
  margin: 4px 0 22px;
}

/* ── formulário ──────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
}

.field input, .select {
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 13px 14px;
  font-size: 15px;
  color: var(--texto);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}

.field input::placeholder { color: var(--texto-fraco); }

.field input:focus, .select:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(23, 201, 100, 0.15);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ae' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

.input-money {
  display: flex;
  align-items: center;
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 0 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-money:focus-within {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(23, 201, 100, 0.15);
}
.input-money > span {
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 15px;
}
.input-money input {
  border: none;
  background: transparent;
  padding: 13px 8px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  width: 100%;
  color: var(--texto);
}

/* ── botões ──────────────────────────────────────────────── */

.btn {
  border: none;
  border-radius: var(--raio-sm);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, filter .15s ease, opacity .15s ease;
  text-align: center;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-block { width: 100%; }

.btn-primary {
  background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
  color: #06170d;
  box-shadow: 0 6px 18px rgba(23, 201, 100, 0.28);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-secondary {
  background: var(--bg-elevada);
  color: var(--texto);
  border: 1px solid var(--borda);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--dourado); color: var(--dourado); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--dourado);
  color: var(--dourado);
  border-radius: var(--raio-sm);
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgba(255, 191, 63, 0.1); }
.btn-ghost.copiado { background: var(--verde); border-color: var(--verde); color: #06170d; }

.btn-tall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border-radius: var(--raio);
  font-size: 14px;
}
.btn-tall-icon { font-size: 26px; }

/* Era texto solto, sem alvo visível — parecia um resto de layout. Agora é uma pílula
   discreta: tem borda pra dizer "isto é um botão" e continua secundária o bastante pra
   não competir com o conteúdo da tela. */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 13px;
  border-radius: 100px;
  border: 1px solid rgba(120, 175, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--texto-suave);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.btn-voltar::before {
  content: "‹";
  font-size: 18px;
  line-height: 1;
  /* a seta anda 2px pra esquerda no hover — o gesto conta o que o botão faz */
  transition: transform .16s ease;
}
.btn-voltar:hover {
  background: rgba(45, 140, 255, 0.14);
  border-color: rgba(120, 175, 255, 0.45);
  color: #fff;
}
.btn-voltar:hover::before { transform: translateX(-2px); }
.btn-voltar:active { transform: translateY(1px); }
.btn-voltar:focus-visible { outline: 2px solid rgba(80, 160, 255, 0.6); outline-offset: 2px; }

/* DENTRO DO JOGO continua discreto: a barra da mesa é apertada e uma pílula ali roubaria
   altura do jogo — que é exatamente o que a gente vem tirando de lá. */
#btn-sair-jogo, #btn-sair-double {
  padding: 8px 0; border: 0; border-radius: 0; background: none;
}
#btn-sair-jogo:hover, #btn-sair-double:hover { background: none; color: var(--verde); }

/* ── tela carteira ───────────────────────────────────────── */

.card-saldo {
  background: linear-gradient(160deg, #14251b 0%, var(--bg-card) 55%);
  border: 1px solid rgba(23, 201, 100, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 22px;
}

.card-saldo-label {
  font-size: 13px;
  color: var(--texto-suave);
  font-weight: 600;
  margin-bottom: 8px;
}

.card-saldo-valor {
  font-size: 38px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
  color: var(--texto);
  text-shadow: 0 0 24px rgba(23, 201, 100, 0.25);
}

.saldo-extra {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
}
.chip-bonus { background: rgba(255, 191, 63, 0.15); color: var(--dourado); }
.chip-credito { background: rgba(23, 201, 100, 0.15); color: var(--verde); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  transition: border-color .15s ease;
}
.card-link:hover { border-color: var(--dourado); }
.chevron { color: var(--texto-fraco); font-size: 18px; }

/* ── botão Jogos (carteira) ──────────────────────────────── */

.btn-jogos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 191, 63, 0.16), rgba(23, 201, 100, 0.12));
  border: 1px solid rgba(255, 191, 63, 0.35);
  color: var(--dourado);
  margin-bottom: 16px;
  font-size: 15px;
}
.btn-jogos:hover:not(:disabled) { filter: brightness(1.1); }

/* ── tela de jogos (lista de cards) ──────────────────────── */

.jogos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jogo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  transition: border-color .15s ease;
}
.jogo-card:hover { border-color: var(--verde); }

.jogo-card-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.jogo-card-emoji {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  font-size: 22px;
}

.jogo-card-nome {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jogo-card .btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
}

/* ── tela do jogo rodando (iframe em tela cheia) ─────────── */

.view-jogo {
  padding: 0;
  display: flex;
  flex-direction: column;
  position: fixed;      /* cobre a tela toda, inclusive o cabeçalho da conta */
  inset: 0;
  z-index: 1000;
  height: 100vh;
  height: 100dvh;       /* altura REAL do celular (desconta as barras do navegador) */
  /* SEM fundo próprio. Era `#000`, e no monitor a mesa trava em 16:9 — sobrava uma
     tarja preta em volta, enquanto o DoubleX (que é transparente) mostrava o gradiente
     do app. Transparente aqui deixa o MESMO cenário aparecer: o gradiente do body e a
     decoração (pontinhos e arcos), que ficam em z-index 0, atrás de tudo.
     `.app`, `.view` e `main` não pintam fundo, então não há nada no meio do caminho. */
  background: transparent;
}
.view-jogo[hidden] { display: none !important; }
/* A tela de carregamento cobre TUDO agora, inclusive esta barra — foi o pedido. Quem
   protege contra mesa que não abre é o teto de tempo, não um botão visível por cima. */

.jogo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  height: 60px;
  flex-shrink: 0;
  background: var(--bg-elevada);
  border-bottom: 1px solid var(--borda);
}

.jogo-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

/* Indicador simples de status — usado pelo #perfil-carregando. NÃO é a tela de
   carregamento do jogo: essa é a `.carga-tela`, logo abaixo. */
.jogo-carregando {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}
.jogo-carregando .status-dot {
  background: var(--dourado);
  animation: pulsar 1.2s ease-in-out infinite;
}

/* ── TELA DE CARREGAMENTO DO JOGO ────────────────────────────────────────────
   Cobre a TELA INTEIRA — header, faixa da IA, botão de sinal, mesa — e só sai quando o
   jogo está de fato aberto. Mora como filha direta do <body>: dentro das views ela ficava
   presa no contexto de empilhamento de `.app` (z-index:1) e o header aparecia por cima. */
.carga-tela {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(20, 40, 82, 0.55), transparent 62%),
    rgba(3, 6, 14, 0.94);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  animation: cargaFundo .28s ease both;
}
.carga-tela[hidden] { display: none !important; }
/* sai suave: sem isso a mesa aparece num corte seco */
.carga-tela.saindo {
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
@keyframes cargaFundo { from { opacity: 0; } to { opacity: 1; } }

.carga-caixa {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  animation: cargaEntra .4s ease both;
}
/* halo atrás da marca: dá profundidade sem pesar imagem nenhuma */
.carga-halo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 140, 255, 0.28), transparent 62%);
  filter: blur(6px);
  animation: cargaPulso 2.4s ease-in-out infinite;
}
/* Invólucro do tamanho da marca. É a âncora do halo e do anel — sem ele os dois se
   centravam na caixa inteira (logo + barra + textos) e o anel passava por cima do texto. */
.carga-marca-wrap {
  position: relative;
  width: 112px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 34px;      /* folga pro anel não encostar na barra */
}
/* anel girando em volta da marca: o movimento fica NA BORDA, não na logo — assim a marca
   respira devagar sem parecer que está tremendo */
.carga-anel {
  position: absolute; top: 50%; left: 50%;
  width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--azul);
  border-right-color: rgba(255, 210, 63, 0.75);
  animation: cargaGira 1.5s linear infinite;
}
.carga-anel::after {
  content: ''; position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 255, 0.14);
}
.carga-marca {
  position: relative;
  width: 112px; height: auto; display: block;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 22px rgba(45, 140, 255, 0.35));
  animation: cargaFlutua 2.6s ease-in-out infinite;
}
@keyframes cargaGira { to { transform: rotate(360deg); } }
.carga-barra {
  position: relative;
  width: 168px; height: 3px; margin: 0 0 16px;
  border-radius: 3px;
  background: rgba(120, 175, 255, 0.16);
  overflow: hidden;
}
/* faixa que corre de ponta a ponta: progresso INDETERMINADO de propósito — a casa
   não nos diz a porcentagem, e uma barra fingindo 73% seria mentira na tela. */
.carga-barra span {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--azul), var(--dourado), transparent);
  animation: cargaCorre 1.25s ease-in-out infinite;
}
.carga-txt {
  position: relative; margin: 0;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(92deg, #eaf2ff, var(--azul) 45%, var(--dourado));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.carga-sub {
  position: relative; margin: 5px 0 0;
  font-size: 12px; color: var(--texto-fraco);
  min-height: 15px;
}
@keyframes cargaEntra   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cargaFlutua  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cargaPulso   { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
                          50%      { opacity: .9;  transform: translate(-50%, -50%) scale(1.08); } }
@keyframes cargaCorre   { 0% { left: -42%; } 100% { left: 102%; } }

@media (max-width: 560px) {
  .carga-marca { width: 88px; }
  .carga-marca-wrap { width: 88px; height: 88px; margin-bottom: 28px; }
  .carga-anel { width: 122px; height: 122px; margin: -61px 0 0 -61px; }
  .carga-halo { width: 168px; height: 168px; }
  .carga-barra { width: 140px; }
  .carga-txt { font-size: 15px; }
}

/* Quem prefere menos movimento não perde a informação: a barra continua, parada. */
@media (prefers-reduced-motion: reduce) {
  .carga-caixa, .carga-marca, .carga-halo, .carga-barra span, .carga-anel { animation: none; }
  .carga-barra span { left: 0; width: 100%; opacity: .5; }
}

.jogo-erro-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.jogo-iframe {
  width: 100%;
  flex: 1;          /* preenche todo o espaço abaixo da barra */
  min-height: 0;
  border: none;
  display: block;
  background: #000;
}
.jogo-iframe[hidden] { display: none !important; }

/* ── selo "NOSSO" no card de jogo local ──────────────────── */

.selo-nosso {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #06170d;
  background: linear-gradient(135deg, var(--verde), var(--dourado));
  padding: 3px 8px;
  border-radius: 100px;
  flex-shrink: 0;
}

.selo-demo,
.selo-real {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--dourado);
  border: 1px solid var(--dourado);
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Aposta com dinheiro do cliente: o selo avisa em vermelho, não em dourado. */
.selo-real {
  color: #ff5a5a;
  border-color: #ff5a5a;
}

/* ============================================================
   DOUBLE — jogo próprio (estilo Blaze)
   ============================================================ */

.double-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* TAMANHO DA ROLETA em um lugar só. O JS LÊ estas variáveis (getComputedStyle) pra calcular
   o giro — então dá pra escalar por tamanho de tela sem quebrar a matemática da parada.
   Não trocar por número fixo aqui sem olhar o app.js. */
.double-wrap {
  --dbl-tile: 64px;
  --dbl-gap: 8px;
  padding-top: 16px;
  padding-bottom: 32px;
}

/* Monitor: a coluna de celular (480px) deixava a mesa minúscula. Aqui ela espicha e as peças
   crescem junto — senão só sobraria espaço vazio dos lados. */
@media (min-width: 900px) {
  #view-double .double-wrap {
    --dbl-tile: 86px;
    --dbl-gap: 10px;
    max-width: min(1100px, 92vw);
  }
  #view-double .double-hist-bola { width: 40px; height: 40px; font-size: 15px; }
  #view-double .double-card-res { font-size: 22px; padding: 11px 20px 11px 22px; top: 12px; }
  #view-double .double-card-res .card-res-sub { font-size: 13px; }
  #view-double .double-contador { font-size: 44px; }
  /* as 3 áreas de aposta lado a lado, em vez de empilhadas numa coluna fina */
  #view-double .double-apostas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
}
@media (min-width: 1400px) {
  #view-double .double-wrap {
    --dbl-tile: 104px;
    --dbl-gap: 12px;
    max-width: min(1360px, 90vw);
  }
  #view-double .double-hist-bola { width: 46px; height: 46px; font-size: 17px; }
  #view-double .double-card-res { font-size: 26px; padding: 13px 24px 13px 26px; }
  #view-double .double-card-res .card-res-sub { font-size: 14px; }
  #view-double .double-contador { font-size: 54px; }
}

/* histórico de resultados */
.double-historico {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.double-historico::-webkit-scrollbar { height: 4px; }

.double-hist-bola {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}
.double-hist-bola.cor-vermelho { background: var(--double-vermelho); color: #fff; }
.double-hist-bola.cor-preto { background: var(--double-preto); color: #fff; border: 1px solid #3a3d47; }
.double-hist-bola.cor-branco { background: var(--double-branco); color: var(--double-vermelho); }

/* tira giratória */
.double-track-wrap {
  position: relative;
  overflow: hidden;
  height: calc(var(--dbl-tile, 64px) + 12px);
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  margin-bottom: 18px;
}

/* Card do resultado — GAVETA que desliza da direita, no alto da tira, e recolhe em ~4s.
   Não cobre a roleta: entra por cima do canto, deixando o giro visível.
   Verde = WIN · branco = EMPATE 11X · vermelho = LOSS. */
.double-card-res {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  padding: 7px 14px 7px 16px;
  border-radius: 8px 0 0 8px;      /* "gaveta": arredondada só do lado que entra */
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: -6px 0 18px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.double-card-res.aberta { transform: translateX(0); }

.double-card-res.win    { background: #17a050; color: #fff; border-left: 3px solid #2ee06a; }
.double-card-res.loss   { background: #b42222; color: #fff; border-left: 3px solid #ff5a5a; }
.double-card-res.branco { background: #ededed; color: #14161a; border-left: 3px solid #fff; }

.double-card-res .card-res-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.double-track {
  position: absolute;
  top: 6px;
  left: 0;
  display: flex;
  gap: var(--dbl-gap, 8px);
  will-change: transform;
  transform: translateX(0px);
}

.double-tile {
  flex: 0 0 var(--dbl-tile, 64px);
  width: var(--dbl-tile, 64px);
  height: var(--dbl-tile, 64px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--dbl-tile, 64px) * 0.34);
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}
/* tiles do spin: limpos e leves (sem brilho pesado) */
.double-tile.cor-vermelho { background: var(--double-vermelho); color: #fff; }
.double-tile.cor-preto { background: var(--double-preto); color: #fff; border: 1px solid #2c2f38; }
.double-tile.cor-branco { background: var(--double-branco); color: #12131a; }
/* número dentro de um círculo (igual ao print) + ícone do tile branco */
.double-tile-circ {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.6);
}
.double-tile.cor-preto .double-tile-circ { border-color: rgba(255, 255, 255, 0.38); }
.double-tile-ico { font-size: 27px; line-height: 1; color: var(--double-vermelho); }

/* marcador central: linha branca fina que atravessa a tira (igual ao print) */
.double-marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  z-index: 3;
}
.double-marker-top {
  width: 3px;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}
.double-marker-bottom { display: none; }

/* fase + contador */
.double-fase-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 18px;
}
.double-fase-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.double-contador {
  font-size: 44px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  color: var(--verde);
  text-shadow: 0 0 22px rgba(23, 201, 100, 0.35);
  transition: color .2s ease;
}
.double-contador.fase-giro { color: var(--dourado); text-shadow: 0 0 22px rgba(255, 191, 63, 0.35); }
.double-contador.fase-resultado { color: var(--texto); text-shadow: none; }

/* fichas */
.double-fichas-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.double-fichas-label { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.double-fichas-box strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--dourado);
  flex: 1;
}
.btn-mini {
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini:hover { border-color: var(--erro); color: var(--erro); }

/* áreas de aposta */
.double-apostas-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.double-area {
  border-radius: var(--raio);
  padding: 14px;
  border: 1px solid var(--borda);
  background: var(--bg-card);
}
.double-area-vermelho { border-top: 3px solid var(--double-vermelho); }
.double-area-branco { border-top: 3px solid var(--double-branco); }
.double-area-preto { border-top: 3px solid #4a4d59; }

.double-area-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.double-area-nome { font-weight: 800; font-size: 14px; }
.double-area-mult {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
  background: var(--bg-elevada);
  padding: 2px 8px;
  border-radius: 100px;
}

.double-area-aposta {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 10px;
}
.double-area-aposta strong { color: var(--texto); font-family: 'JetBrains Mono', monospace; }

.double-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.double-chip {
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: var(--raio-sm);
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.double-chip:hover { border-color: var(--dourado); color: var(--dourado); }

.double-input {
  width: 100%;
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--texto);
  outline: none;
  margin-bottom: 8px;
}
.double-input:focus { border-color: var(--verde); }

.btn-double-apostar {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  background: var(--bg-elevada);
  border: 1px solid var(--verde);
  color: var(--verde);
}
.btn-double-apostar:hover:not(:disabled) { background: rgba(23, 201, 100, 0.12); }
.btn-double-apostar:disabled { opacity: 0.4; cursor: not-allowed; }

.double-resultado-msg {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  padding: 12px;
  border-radius: var(--raio-sm);
  margin-bottom: 8px;
}
.double-resultado-msg.ganhou { background: var(--sucesso-bg); color: var(--sucesso); }
.double-resultado-msg.perdeu { background: var(--erro-bg); color: var(--erro); }

/* ── topbar de subtelas ──────────────────────────────────── */

.topbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 18px;
}
.topbar h1 {
  font-size: 21px;
  font-weight: 800;
  margin: 0;
}

/* ── chips de valor rápido (depósito) ────────────────────── */

.chips-valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 18px;
}

.chip-valor {
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: var(--raio-sm);
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.chip-valor:hover, .chip-valor.ativo {
  border-color: var(--verde);
  color: var(--verde);
  background: rgba(23, 201, 100, 0.08);
}

/* ── resultado do PIX ─────────────────────────────────────── */

.status-pix {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--raio-sm);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}
.status-aguardando {
  background: rgba(255, 191, 63, 0.1);
  color: var(--dourado);
}
.status-confirmado {
  background: var(--sucesso-bg);
  color: var(--sucesso);
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-aguardando .status-dot { animation: pulsar 1.2s ease-in-out infinite; }

@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.qr-box {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border-radius: var(--raio-sm);
  margin-bottom: 18px;
}
.qr-img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.copia-cola-box { margin-bottom: 8px; }
.copia-cola-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.copia-cola-linha {
  display: flex;
  gap: 8px;
}
.copia-cola-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevada);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--texto-suave);
}
.hint {
  font-size: 12px;
  color: var(--texto-fraco);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── saque ───────────────────────────────────────────────── */

.saque-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevada);
  border-radius: var(--raio-sm);
  padding: 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--texto-suave);
}
.saque-info strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--dourado);
  font-size: 16px;
}

/* ── mensagens ───────────────────────────────────────────── */

.msg-erro {
  background: var(--erro-bg);
  color: var(--erro);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
}
.msg-sucesso {
  background: var(--sucesso-bg);
  color: var(--sucesso);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
}
.msg-alerta {
  background: rgba(255, 191, 63, 0.1);
  color: var(--dourado);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  margin-bottom: 16px;
}
[hidden] { display: none !important; }

/* ── histórico ───────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--bg-elevada);
  padding: 4px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--texto-suave);
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.tab-ativa {
  background: var(--bg-card);
  color: var(--verde);
  box-shadow: var(--sombra);
}

.lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-hist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 14px;
}

.item-hist-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.item-hist-data {
  font-size: 12px;
  color: var(--texto-fraco);
}
.item-hist-status {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  width: fit-content;
}
.status-ok { background: var(--sucesso-bg); color: var(--sucesso); }
.status-pendente { background: rgba(255, 191, 63, 0.12); color: var(--dourado); }
.status-falha { background: var(--erro-bg); color: var(--erro); }

.item-hist-valor {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 15px;
}

.vazio, .carregando {
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
  padding: 30px 0;
}

/* ── toast ───────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(10px);
  background: var(--bg-elevada);
  border: 1px solid var(--erro);
  color: var(--texto);
  padding: 12px 18px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sombra-forte);
  z-index: 100;
  max-width: 90vw;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast.mostrar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── responsivo (desktop: centraliza um pouco mais largo) ── */

@media (min-width: 600px) {
  .wrap { max-width: 480px; }
}

/* ============================================================
   ROBÔ — aposta automática (tela view-robo)
   ============================================================ */

/* O select do robô segue o mesmo desenho dos inputs do resto do app. */
.field select {
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  background: var(--bg-elevada);
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
  appearance: none;
}
.field select:focus { outline: none; border-color: var(--dourado); }

.card-titulo {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
}
.hint-inline {
  font-style: normal;
  font-weight: 500;
  color: var(--texto-fraco);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 2px;
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.45;
}
.check input { margin-top: 2px; accent-color: var(--verde); }

.btn-robo {
  background: linear-gradient(135deg, #2a2340, #1a1726);
  border: 1px solid #3d3358;
  color: var(--texto);
}
.btn-robo:hover { border-color: var(--dourado); }

/* ── painel ao vivo ── */
.card-robo { display: flex; flex-direction: column; gap: 14px; }

.robo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.robo-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.robo-status .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.robo-on { color: var(--verde); }
.robo-on .status-dot { background: var(--verde); box-shadow: 0 0 0 4px rgba(23, 201, 100, 0.15); }
.robo-off { color: var(--texto-fraco); }
.robo-off .status-dot { background: var(--texto-fraco); }
.robo-mesa { font-size: 12px; color: var(--texto-suave); text-align: right; }

.robo-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.robo-numeros div { display: flex; flex-direction: column; gap: 3px; }
.robo-numeros span { font-size: 11px; color: var(--texto-fraco); }
.robo-numeros strong { font-size: 16px; font-family: 'JetBrains Mono', monospace; }
.robo-lucro.positivo { color: var(--verde); }
.robo-lucro.negativo { color: var(--erro); }

.robo-ultimos { display: flex; gap: 6px; min-height: 14px; }
.robo-bola { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.robo-bola.casa { background: var(--double-vermelho); }
.robo-bola.visitante { background: #3b82f6; }
.robo-bola.empate { background: var(--dourado); }

.robo-aviso {
  padding: 10px 12px;
  border-radius: var(--raio-sm);
  background: rgba(255, 191, 63, 0.1);
  border: 1px solid rgba(255, 191, 63, 0.25);
  color: var(--dourado);
  font-size: 13px;
}

/* ── diário ao vivo ── */
.robo-diario { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.robo-linha {
  display: flex; gap: 8px; align-items: baseline;
  padding: 7px 8px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  border-left: 3px solid var(--borda);
  background: var(--bg-elevada);
}
.robo-hora { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--texto-fraco); flex: none; }
.robo-txt { color: var(--texto-suave); }
.robo-linha.tipo-entrada, .robo-linha.tipo-gale { border-left-color: var(--dourado); }
.robo-linha.tipo-win, .robo-linha.tipo-ok { border-left-color: var(--verde); }
.robo-linha.tipo-win .robo-txt, .robo-linha.tipo-ok .robo-txt { color: var(--verde); }
.robo-linha.tipo-loss, .robo-linha.tipo-erro { border-left-color: var(--erro); }
.robo-linha.tipo-loss .robo-txt, .robo-linha.tipo-erro .robo-txt { color: var(--erro); }
.robo-linha.tipo-sinal { border-left-color: #7c6bd6; }
.robo-linha.tipo-empate, .robo-linha.tipo-naobateu, .robo-linha.tipo-aviso { border-left-color: var(--texto-fraco); }

/* ── histórico de operações ── */
.robo-operacoes { display: flex; flex-direction: column; gap: 6px; }
.robo-op {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--raio-sm);
  background: var(--bg-elevada); border: 1px solid var(--borda);
}
.robo-op-esq { display: flex; flex-direction: column; gap: 2px; }
.robo-op-esq strong { font-size: 13px; }
.robo-op-esq span { font-size: 11px; color: var(--texto-fraco); }
.robo-op-lucro { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.robo-op-lucro.positivo { color: var(--verde); }
.robo-op-lucro.negativo { color: var(--erro); }
.robo-op.res-win { border-color: rgba(23, 201, 100, 0.35); }
.robo-op.res-loss { border-color: rgba(255, 93, 93, 0.35); }

/* ============================================================
   TEMA AZUL — sobrescritas finais
   Vem no fim de propósito: mantém os blocos originais legíveis e concentra
   a repaginação num lugar só, fácil de ajustar depois.
   ============================================================ */

/* Cards = vidro azul com brilho interno */
.card {
  background: linear-gradient(158deg, rgba(18, 34, 70, 0.82), rgba(9, 18, 40, 0.78));
  border: 1px solid rgba(45, 140, 255, 0.20);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(140, 185, 255, 0.10);
  backdrop-filter: blur(8px);
}
.card:hover { border-color: rgba(45, 140, 255, 0.34); }

/* Saldo: continua verde (é dinheiro), mas assentado no azul */
.card-saldo {
  background: linear-gradient(160deg, rgba(15, 48, 40, 0.75) 0%, rgba(10, 22, 48, 0.85) 58%);
  border: 1px solid rgba(23, 201, 100, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(23, 201, 100, 0.05);
}

/* Ação principal vira AZUL (a cor de ação da interface) */
.btn-primary {
  background: linear-gradient(135deg, var(--azul), var(--azul-forte));
  color: #fff;
  box-shadow: 0 8px 22px rgba(31, 107, 255, 0.35);
}
/* Depositar é a exceção: dinheiro entrando continua verde */
#btn-depositar {
  background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
  color: #06170d;
  box-shadow: 0 8px 22px rgba(23, 201, 100, 0.30);
}

.btn-secondary {
  background: rgba(11, 23, 48, 0.85);
  border: 1px solid rgba(45, 140, 255, 0.24);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }

.btn-ghost { border-color: rgba(45, 140, 255, 0.45); color: var(--azul); }
.btn-ghost:hover:not(:disabled) { background: rgba(45, 140, 255, 0.10); }

.btn-jogos {
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.20), rgba(31, 107, 255, 0.10));
  border: 1px solid rgba(45, 140, 255, 0.40);
  color: #bcd8ff;
}
.btn-jogos:hover { border-color: var(--azul); color: #fff; }

.btn-robo {
  background: linear-gradient(135deg, rgba(20, 40, 84, 0.9), rgba(10, 20, 44, 0.9));
  border: 1px solid rgba(45, 140, 255, 0.26);
  color: var(--texto);
}
.btn-robo:hover { border-color: var(--azul); }

/* Campos de formulário no tom azul */
.field input, .field select, input[type="text"], input[type="email"], input[type="password"], select {
  background: rgba(8, 18, 40, 0.9);
  border-color: rgba(45, 140, 255, 0.22);
  color: var(--texto);
}
.field input:focus, .field select:focus, input:focus, select:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 140, 255, 0.16);
}

/* Marca da tela de login no azul */
.logo-mark {
  background: linear-gradient(150deg, var(--azul), var(--azul-forte));
  color: #fff;
  box-shadow: 0 0 22px var(--azul-brilho);
}
.logo-text b { color: var(--azul); }

/* Barra de jogo (Double): mesma vidraça */
.jogo-barra {
  background: rgba(5, 11, 28, 0.72);
  border-bottom: 1px solid rgba(45, 140, 255, 0.16);
  backdrop-filter: blur(14px);
}

/* Trilho da roleta assentado no azul (as cores das peças NÃO mudam) */
.double-track-wrap {
  background: rgba(9, 18, 40, 0.85);
  border: 1px solid rgba(45, 140, 255, 0.20);
}
.double-fichas-box {
  background: linear-gradient(158deg, rgba(18, 34, 70, 0.82), rgba(9, 18, 40, 0.78));
  border: 1px solid rgba(45, 140, 255, 0.20);
}

/* ============================================================
   HOME no formato da referência: cabeçalho de boas-vindas + grade de cards.
   A coluna de 480px é de celular; no monitor ela espicha (wrap-largo).
   ============================================================ */

.wrap-largo { max-width: 480px; }
@media (min-width: 900px) {
  .wrap-largo { max-width: min(1180px, 92vw); padding-top: 34px; }
}

/* ── cabeçalho de boas-vindas ── */
.home-hero { margin-bottom: 26px; }
.hero-sup {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--azul);
  margin-bottom: 6px;
}
.hero-nome {
  margin: 0;
  font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--texto);
}
.hero-nome span { color: var(--texto); }
.hero-mao { font-size: 30px; }
.hero-barra {
  display: block;
  width: 54px; height: 4px;
  margin: 14px 0 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azul), var(--azul-forte));
  box-shadow: 0 0 14px var(--azul-brilho);
}
.hero-sub { margin: 0; font-size: 13px; color: var(--texto-suave); }

@media (min-width: 900px) {
  .hero-nome { font-size: 58px; }
  .hero-mao { font-size: 42px; }
}

/* ── faixa do saldo (larga, não bloco central) ── */
.saldo-faixa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 22px;
  border-radius: var(--raio);
  background: linear-gradient(140deg, rgba(16, 36, 76, 0.86), rgba(9, 18, 40, 0.82));
  border: 1px solid rgba(45, 140, 255, 0.22);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(140, 185, 255, 0.10);
  backdrop-filter: blur(8px);
}
.saldo-faixa-esq { display: flex; flex-direction: column; gap: 6px; }
.saldo-faixa .card-saldo-valor { font-size: 38px; }
.saldo-faixa-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.saldo-faixa-dir .btn { margin: 0; }

@media (min-width: 900px) {
  .saldo-faixa { flex-direction: row; align-items: center; justify-content: space-between; padding: 26px 32px; }
  .saldo-faixa .card-saldo-valor { font-size: 46px; }
  .saldo-faixa-dir { grid-template-columns: auto auto; gap: 14px; }
  .saldo-faixa-dir .btn { padding: 14px 30px; }
}

/* ── grade de cards ── */
.home-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px)  { .home-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 26px 22px 30px;
  min-height: 132px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--raio);
  background: linear-gradient(158deg, rgba(18, 36, 74, 0.80), rgba(8, 17, 38, 0.80));
  border: 1px solid rgba(45, 140, 255, 0.18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(140, 185, 255, 0.08);
  backdrop-filter: blur(8px);
  color: var(--texto);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 140, 255, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(45, 140, 255, 0.16);
}
.tile-ico { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.tile-nome { font-size: 19px; font-weight: 800; }
.tile-sub { font-size: 12px; color: var(--texto-suave); }
.tile-seta {
  position: absolute; right: 20px; bottom: 20px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(45, 140, 255, 0.45);
  color: var(--azul);
  font-size: 15px;
  transition: all .16s ease;
}
.tile:hover .tile-seta { background: var(--azul); border-color: var(--azul); color: #fff; }

@media (min-width: 900px) {
  .tile { min-height: 176px; padding: 30px 26px 34px; }
  .tile-ico { font-size: 42px; }
  .tile-nome { font-size: 21px; }
}

/* ============================================================
   PAINEL DE APOSTA (formato Blaze): um valor, escolhe a cor, um botão.
   Substitui os 3 blocos que repetiam chips + input + botão pra cada cor.
   ============================================================ */

.aposta-painel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--raio);
  background: linear-gradient(158deg, rgba(18, 34, 70, 0.80), rgba(8, 17, 38, 0.82));
  border: 1px solid rgba(45, 140, 255, 0.20);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

/* abas Normal / Auto */
/* FLEX e não `grid-template-columns: 1fr 1fr`: eram duas abas (Normal e Auto) e o grid
   tinha duas colunas cravadas. Tirada a aba Auto, a Normal ficava na metade esquerda e
   sobrava um buraco do lado. Assim a barra se ajusta a quantas abas existirem — uma ocupa
   tudo, duas dividem no meio — sem ninguém precisar lembrar de mexer aqui. */
.modo-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(6, 14, 32, 0.85);
  border: 1px solid rgba(45, 140, 255, 0.14);
}
.modo-tab {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.modo-tab.ativo { background: rgba(45, 140, 255, 0.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(45, 140, 255, 0.4); }
.modo-tab:disabled { opacity: 0.4; cursor: not-allowed; }

/* linha da quantia + ½ / 2x */
.quantia-linha { display: flex; gap: 8px; }
.quantia-campo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(6, 14, 32, 0.9);
  border: 1px solid rgba(45, 140, 255, 0.22);
}
.quantia-campo:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(45, 140, 255, 0.14); }
.quantia-label { font-size: 13px; color: var(--texto-fraco); flex-shrink: 0; }
.quantia-campo input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-size: 17px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  outline: none;
}
.quantia-moeda { font-size: 13px; font-weight: 700; color: var(--texto-suave); flex-shrink: 0; }

.quantia-op {
  width: 54px;
  border-radius: 12px;
  background: rgba(6, 14, 32, 0.9);
  border: 1px solid rgba(45, 140, 255, 0.22);
  color: var(--texto-suave);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}
.quantia-op:hover { border-color: var(--azul); color: #fff; }

/* fichas rápidas */
.chips-rapidos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.chips-rapidos .double-chip {
  padding: 9px 0;
  border-radius: 9px;
  background: rgba(6, 14, 32, 0.85);
  border: 1px solid rgba(45, 140, 255, 0.18);
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.chips-rapidos .double-chip:hover { border-color: var(--azul); color: #fff; }

.sel-cor-label { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }

/* as três cores lado a lado, com o multiplicador dentro */
.cores-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.cor-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 62px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.cor-btn b { font-size: 18px; font-weight: 900; }
.cor-btn i { font-size: 10px; font-style: normal; opacity: 0.85; font-family: 'JetBrains Mono', monospace; }

.cor-vermelho { background: var(--double-vermelho); color: #fff; }
.cor-preto    { background: var(--double-preto);    color: #fff; }
.cor-branco   { background: var(--double-branco);   color: #14161a; }

.cor-btn:hover { transform: translateY(-2px); }
/* a cor escolhida fica com anel branco, como na referência */
.cor-btn.escolhida {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.4);
}
.cor-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* botão único de apostar */
.btn-apostar {
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
  color: #06170d;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(23, 201, 100, 0.28);
  transition: filter .15s ease;
}
.btn-apostar:hover:not(:disabled) { filter: brightness(1.08); }
.btn-apostar:disabled {
  background: rgba(20, 40, 76, 0.9);
  color: var(--texto-fraco);
  box-shadow: none;
  cursor: not-allowed;
}

@media (min-width: 900px) {
  .aposta-painel { max-width: 560px; margin: 0 auto; padding: 20px; }
  .cor-btn { height: 74px; }
  .cor-btn b { font-size: 21px; }
}

/* ============================================================
   AJUSTES DE CELULAR — o painel estava estourando a largura da tela.
   ============================================================ */

/* A CAUSA do ½/2x cortado: item flex não encolhe abaixo do conteúdo sem min-width:0.
   O campo "Quantia" empurrava os botões pra fora da tela. */
.quantia-campo { min-width: 0; }
.quantia-campo input { min-width: 0; width: 100%; }

/* Cor travada não pode parecer quebrada: 0.45 apagava demais no fundo escuro. */
.cor-btn:disabled { opacity: 0.62; }

@media (max-width: 560px) {
  /* menos respiro lateral: no celular cada pixel de largura conta */
  .double-wrap { padding-left: 12px; padding-right: 12px; }
  .aposta-painel { padding: 14px; gap: 10px; border-radius: 14px; }

  .quantia-op { width: 46px; font-size: 14px; }
  .quantia-campo { padding: 0 12px; gap: 6px; }
  .quantia-campo input { padding: 12px 0; font-size: 16px; }
  .quantia-label { font-size: 12px; }

  .chips-rapidos { gap: 6px; }
  .chips-rapidos .double-chip { padding: 10px 0; font-size: 12px; }

  .modo-tab { padding: 9px; font-size: 13px; }

  .cores-grid { gap: 7px; }
  .cor-btn { height: 58px; }
  .cor-btn b { font-size: 17px; }
  .cor-btn i { font-size: 9px; }

  .btn-apostar { padding: 15px; font-size: 15px; }

  /* histórico e roleta um pouco menores, pra caber mais rodada na tela */
  .double-historico { gap: 5px; }
  .double-hist-bola { width: 26px; height: 26px; font-size: 11px; }
  #view-double .double-wrap { --dbl-tile: 58px; --dbl-gap: 7px; }

  /* cabeçalho: a pílula do saldo espremia a marca */
  .header { padding: 10px 12px; gap: 8px; }
  .marca-texto { font-size: 13px; letter-spacing: 0.08em; }
  .pill-saldo { padding: 7px 10px; }
  .pill-saldo strong { font-size: 13px; }
  .btn-icon { padding: 7px 11px; font-size: 12px; }
}

/* telas bem estreitas: esconde o texto da marca e o botão Sair vira só ícone */
@media (max-width: 380px) {
  .marca-texto { display: none; }
  .header-avatar { display: none; }
}

/* ============================================================
   BARRA DE FASE (estilo Blaze): trilho que ESVAZIA durante as apostas,
   listras correndo enquanto gira, e cor do resultado quando resolve.
   Substitui o número solto no meio da tela.
   ============================================================ */

.fase-barra {
  position: relative;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 14, 32, 0.9);
  border: 1px solid rgba(45, 140, 255, 0.20);
  margin: 14px 0 16px;
}

.fase-barra-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--azul-forte), var(--azul));
  /* a transição acompanha o poll (1s), pra descer liso em vez de aos saltos */
  transition: transform 1s linear, background .25s ease;
}

.fase-barra-texto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.fase-barra-seg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  letter-spacing: 0;
}

/* GIRANDO: sem tempo pra mostrar — listras correndo, barra cheia */
.fase-barra.girando .fase-barra-fill {
  transform: none !important;
  background:
    repeating-linear-gradient(115deg,
      rgba(45, 140, 255, 0.85) 0 18px,
      rgba(31, 107, 255, 0.55) 18px 36px);
  background-size: 200% 100%;
  animation: faseListras 0.9s linear infinite;
}
@keyframes faseListras { from { background-position: 0 0; } to { background-position: -72px 0; } }

/* RESULTADO: a barra assume a cor que saiu */
.fase-barra.res-vermelho .fase-barra-fill { transform: none !important; background: var(--double-vermelho); }
.fase-barra.res-preto   .fase-barra-fill { transform: none !important; background: #2a2f3d; }
.fase-barra.res-branco  .fase-barra-fill { transform: none !important; background: var(--double-branco); }
.fase-barra.res-branco  .fase-barra-texto { color: #14161a; text-shadow: none; }

/* quase acabando: vermelho pra avisar */
.fase-barra.urgente .fase-barra-fill { background: linear-gradient(90deg, #c9342a, #e2453b); }

@media (max-width: 560px) {
  .fase-barra { height: 42px; margin: 12px 0 14px; }
  .fase-barra-texto { font-size: 12px; gap: 8px; }
  .fase-barra-seg { font-size: 14px; }
}

/* O rótulo e o contador agora vivem DENTRO da barra — anula o estilo antigo
   (número gigante verde no meio da tela), senão eles brigam com a barra. */
.fase-barra .double-fase-label,
.fase-barra .double-contador,
#view-double .fase-barra .double-contador {
  font-size: inherit;
  color: inherit;
  margin: 0;
  text-shadow: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
}
.fase-barra .fase-barra-seg { font-size: 15px; }
@media (max-width: 560px) { .fase-barra .fase-barra-seg { font-size: 14px; } }

/* A barra vive dentro de .double-fase-box, que é flex-column com align-items:center.
   Como TODO o conteúdo dela é position:absolute, ela não tem largura própria e colapsava
   num risquinho vertical. Precisa esticar na largura do container. */
.double-fase-box { align-items: stretch; }
.fase-barra { width: 100%; align-self: stretch; }

/* Cor bloqueada pela regra "não pode as duas cores na mesma rodada":
   fica apagada e riscada, pra ler como PROIBIDA e não como "esperando". */
.cor-btn.bloqueada {
  opacity: 0.28;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
.cor-btn.bloqueada::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  transform: rotate(-14deg);
}

/* Listas de Apostas (Fake Bots) */
.apostas-listas-container {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.aposta-coluna {
  flex: 1;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.aposta-coluna-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.aposta-titulo {
  font-weight: 700;
  font-size: 14px;
}
.aposta-badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-vermelho { background: var(--vermelho); }
.badge-branco { background: var(--branco); color: #000; }
.badge-preto { background: var(--preto); border: 1px solid rgba(255,255,255,0.1); }
.aposta-coluna-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 6px;
}
.texto-cinza {
  color: var(--txt-sub);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.aposta-lista-header {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 8px;
  margin-bottom: 8px;
}
.aposta-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.aposta-lista::-webkit-scrollbar {
  width: 4px;
}
.aposta-lista::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.aposta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.2s;
}
.aposta-item:hover {
  background: rgba(255,255,255,0.02);
}
.aposta-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--txt-sub);
}
.aposta-user-ico {
  color: #7b889b;
  font-size: 14px;
}
.aposta-valor {
  font-weight: 600;
  color: #fff;
}
@media (max-width: 768px) {
  .apostas-listas-container {
    flex-direction: column;
  }
}

/* Selo de SIMULAÇÃO do painel de apostas. Fica bem visível de propósito: o jogador precisa
   saber que aquele movimento é gerado, não gente apostando. Sai junto com o bot-apostas.js
   quando o painel passar a mostrar as apostas reais. */
.selo-simulacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 191, 63, 0.10);
  border: 1px dashed rgba(255, 191, 63, 0.55);
  color: var(--dourado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.aposta-item-bot .aposta-user span:last-child { opacity: 0.9; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
@media (max-width: 560px) { .selo-simulacao { font-size: 11px; padding: 9px 10px; } }

/* Quando a cor vence, o TOTAL dela passa a mostrar o GANHO e fica verde.
   Sem borda na coluna nem escurecer as outras — o dono não quis marcação. */
.total-ganho {
  color: #2ee06a !important;
  transition: color .2s ease;
}

/* 20 resultados na fita: em tela estreita eles não cabem lado a lado, então a fita rola
   na horizontal em vez de espremer as bolinhas até ficarem ilegíveis. */
.double-historico {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.double-historico::-webkit-scrollbar { height: 4px; }
.double-historico::-webkit-scrollbar-thumb { background: rgba(45, 140, 255, 0.35); border-radius: 4px; }


/* ============================================================
   TELA DE LOGIN — tela DIVIDIDA: marca sobre a arte à esquerda, formulário à direita.
   O dourado vive só aqui; passou do login, o app é azul.
   ============================================================ */

.view-login-fx {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;          /* celular: uma coluna só */
  align-content: center;
  padding: 28px 18px;
  gap: 26px;
}

/* canvas da arte de cassino, atrás de tudo */
.login-fx {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* halo dourado — no desktop ele se desloca pra ESQUERDA, atrás da marca */
.login-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(720px, 130vw);
  height: min(720px, 130vw);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.15), transparent 58%),
    radial-gradient(circle at 62% 38%, rgba(255, 214, 120, 0.09), transparent 46%);
}
.login-halo::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  /* gradiente CÔNICO recortado em anel: mostra o brilho dando a volta (borda lisa não denuncia giro) */
  background: conic-gradient(from 0deg,
    rgba(212, 175, 55, 0.05) 0deg, rgba(212, 175, 55, 0.22) 90deg,
    rgba(255, 226, 150, 0.95) 168deg, rgba(255, 246, 214, 1) 180deg,
    rgba(255, 226, 150, 0.95) 192deg, rgba(212, 175, 55, 0.22) 270deg,
    rgba(212, 175, 55, 0.05) 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2.5px), #000 50%, transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 2.5px), #000 calc(50% - 2.5px), #000 50%, transparent 50%);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.55));
  animation: haloGira 10s linear infinite;
}
@keyframes haloGira { to { transform: rotate(360deg); } }

/* ── lado esquerdo: a marca ── */
.login-marca { position: relative; z-index: 1; text-align: center; }
.marca-linha { display: flex; align-items: center; justify-content: center; gap: 12px; }
.marca-simbolo {
  display: flex;
  color: #f0cf74;
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.55));
}
.marca-nome {
  margin: 0;
  font-size: clamp(34px, 7vw, 62px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #f7f2e4;
}
.marca-nome span {
  background: linear-gradient(120deg, #f2d478, #b8912f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.marca-tag {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(230, 214, 170, 0.55);
}

/* ── lado direito: o formulário ── */
.login-painel { position: relative; z-index: 1; display: flex; justify-content: center; }
.login-painel-inner { width: 100%; max-width: 380px; }

.login-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.42em;
  color: #e9cf7d;
}
.login-risco {
  display: block;
  width: 46px; height: 2px;
  margin: 9px 0 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f2d478, rgba(212, 175, 55, 0.15));
}

.form-login { display: flex; flex-direction: column; gap: 12px; }

.campo-ico {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  border-radius: 11px;
  background: rgba(6, 11, 24, 0.68);
  border: 1px solid rgba(212, 175, 55, 0.30);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.campo-ico:focus-within {
  border-color: rgba(240, 210, 120, 0.85);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
  background: rgba(8, 14, 30, 0.82);
}
.campo-ico-mark { color: rgba(212, 175, 55, 0.85); display: flex; flex-shrink: 0; }
.campo-ico input {
  flex: 1; min-width: 0;
  padding: 16px 0;
  border: 0; background: transparent;
  color: #f4efe2;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  outline: none;
}
.campo-ico input::placeholder { color: rgba(230, 220, 190, 0.40); letter-spacing: 0.14em; font-size: 12px; }

.ver-senha {
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 4px;
  border: 0; background: transparent;
  color: rgba(212, 175, 55, 0.7);
  cursor: pointer;
  transition: color .15s ease;
}
.ver-senha:hover { color: #f0cf74; }

/* botão em pílula com a seta no círculo, como no layout de referência */
.btn-entrar {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 8px;
  padding: 17px 20px;
  border: 1px solid rgba(255, 226, 150, 0.55);
  border-radius: 100px;
  background: linear-gradient(100deg, #8d6c1e 0%, #e8c86a 42%, #f7e6a8 52%, #e8c86a 62%, #8d6c1e 100%);
  color: #2a2005;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(180, 140, 40, 0.28);
  transition: filter .18s ease, transform .12s ease;
}
.btn-entrar-seta {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(42, 32, 5, 0.45);
  font-size: 13px;
}
.btn-entrar:hover:not(:disabled) { filter: brightness(1.07); }
.btn-entrar:active:not(:disabled) { transform: translateY(1px); }
.btn-entrar:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-entrar::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  animation: brilhoPassa 3.6s ease-in-out infinite;
}
@keyframes brilhoPassa { 0%, 62% { left: -60%; } 100% { left: 130%; } }

.login-nota {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(8, 14, 30, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.16);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(226, 214, 184, 0.62);
}
.login-nota b { color: rgba(240, 207, 116, 0.9); }


#view-login .msg-erro { text-align: center; }

/* ── DESKTOP: duas colunas de verdade ── */
@media (min-width: 900px) {
  .view-login-fx {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    padding: 40px clamp(40px, 6vw, 110px);
    gap: 40px;
  }
  .login-marca { text-align: left; }
  .marca-linha { justify-content: flex-start; }
  /* o halo sai do centro e vai pra trás da marca, à esquerda */
  .login-halo { left: 34%; width: min(860px, 62vw); height: min(860px, 62vw); }
  .login-painel { justify-content: flex-end; }
  .login-painel-inner { max-width: 400px; }
}

/* Quem pediu menos movimento no sistema não leva o brilho atravessando o botão.
   O anel continua girando: é lento (10s) e não pisca. */
@media (prefers-reduced-motion: reduce) {
  .btn-entrar::after { animation: none; }
}

/* "Esqueceu sua senha?" — alinhado à direita, discreto, como no layout de referência */
.login-esqueci { display: flex; justify-content: flex-end; margin-top: 2px; }
.link-esqueci {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: rgba(226, 208, 150, 0.62);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color .15s ease;
}
.link-esqueci:hover:not(:disabled) { color: #f0cf74; }
.link-esqueci:disabled { opacity: 0.6; cursor: progress; }

/* a mesma caixa serve pra erro e pra confirmação; verde quando deu certo */
#view-login .msg-erro.msg-ok {
  color: #7fe0a4;
  border-color: rgba(46, 224, 106, 0.35);
  background: rgba(46, 224, 106, 0.10);
}

/* ── LOGO em imagem (substituiu o "V" em SVG) ───────────────────────────────
   A arte já tem brilho e volume próprios, então NÃO levo o fundo dourado nem a
   sombra que o símbolo antigo tinha — dobrar efeito por cima suja o desenho. */
.marca-simbolo .marca-img {
  display: block;
  width: clamp(54px, 8vw, 92px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(70, 150, 255, 0.35));
}

/* versão pequena, no cabeçalho de dentro do app */
.marca-mark-img {
  background: none !important;
  box-shadow: none !important;
  width: 32px;
  height: 32px;
  padding: 0;
}
.marca-mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 560px) {
  .marca-simbolo .marca-img { width: 60px; }
  .marca-mark-img { width: 28px; height: 28px; }
}

/* ── LOGO como marca principal (substituiu o nome escrito) ──────────────────
   A arte já tem brilho e volume próprios: nada de fundo dourado nem sombra por
   baixo, senão vira efeito sobre efeito e o desenho suja. */
.marca-linha .marca-img {
  display: block;
  width: clamp(150px, 22vw, 300px);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(70, 150, 255, 0.30));
}
.header-logo { height: 34px; width: auto; display: block; }

@media (max-width: 560px) {
  .marca-linha .marca-img { width: min(200px, 56vw); margin: 0 auto; }
  .header-logo { height: 28px; }
}

/* ── MARCA: símbolo (CB) + nome (CYBERBOOM) lado a lado ─────────────────────
   O nome é bem largo (proporção ~3:1), então ele manda no espaço: o símbolo
   acompanha numa altura proporcional, pra dupla não desequilibrar. */
.marca-linha {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  flex-wrap: nowrap;
}
.marca-linha .marca-img {
  width: auto;
  height: clamp(64px, 8.5vw, 116px);   /* o símbolo é quadrado: mando pela ALTURA */
  flex-shrink: 0;
}
.marca-nome-img {
  height: clamp(34px, 4.6vw, 62px);    /* ~55% da altura do símbolo: o nome fica dominante mas alinhado */
  width: auto;
  display: block;
  filter: drop-shadow(0 0 26px rgba(70, 150, 255, 0.28));
  min-width: 0;
}

/* cabeçalho de dentro do app */
.header-marca { display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-logo-nome { height: 20px; width: auto; display: block; }

@media (max-width: 700px) {
  /* em tela estreita a dupla lado a lado espremeria o nome: empilha e centraliza */
  .marca-linha { flex-direction: column; gap: 12px; }
  .marca-linha .marca-img { height: 82px; }
  .marca-nome-img { height: auto; width: min(260px, 68vw); }
}
@media (max-width: 560px) {
  .header-logo { height: 26px; }
  .header-logo-nome { height: 16px; }
}
@media (max-width: 400px) {
  /* espaço curto: fica só o símbolo no cabeçalho */
  .header-logo-nome { display: none; }
}

/* ============================================================
   PREENCHIMENTO AUTOMÁTICO (autofill) — nunca deixar o campo ficar BRANCO.
   O Chrome pinta o fundo dele por cima do CSS e `background` não vence. O jeito que
   funciona é uma sombra interna gigante (cobre o campo inteiro) + `-webkit-text-fill-color`
   pro texto. A transição de 9999s trava a cor de fundo que ele tenta aplicar na volta.
   ============================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #f4efe2 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(6, 11, 24, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(6, 11, 24, 0.95) inset !important;
  caret-color: #f4efe2;
  border-radius: inherit;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* dentro do app (azul), o preenchido acompanha o fundo azul-escuro em vez do dourado */
#view-carteira input:-webkit-autofill,
#view-deposito input:-webkit-autofill,
#view-saque input:-webkit-autofill,
#view-robo input:-webkit-autofill,
#view-double input:-webkit-autofill {
  -webkit-text-fill-color: var(--texto) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 18, 40, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(8, 18, 40, 0.95) inset !important;
}

/* Firefox tem propriedade própria */
input:autofill { background: rgba(6, 11, 24, 0.95) !important; color: #f4efe2 !important; }

/* ── botão CRIAR CONTA: secundário, contornado, pra não competir com o de entrar ── */
.btn-criar-conta {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 100px;
  background: rgba(8, 14, 30, 0.55);
  border: 1px solid rgba(120, 175, 255, 0.45);
  color: #a9cbff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: all .16s ease;
}
.btn-criar-conta:hover { border-color: #6ba6ff; color: #dbe9ff; background: rgba(45, 140, 255, 0.12); }

/* ── popup do cadastro ── */
.modal-conta { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-conta[hidden] { display: none !important; }
.modal-conta-fundo { position: absolute; inset: 0; background: rgba(2, 6, 16, 0.78); backdrop-filter: blur(4px); }
.modal-conta-card {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(158deg, rgba(16, 24, 46, 0.97), rgba(8, 13, 28, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.30);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  animation: contaEntra .24s cubic-bezier(0.22, 0.9, 0.3, 1);
}
@keyframes contaEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.modal-conta-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent; color: rgba(230, 220, 190, 0.5);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.modal-conta-x:hover { color: #f0cf74; background: rgba(212, 175, 55, 0.10); }

.conta-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #f6f1e2; }
.conta-sub { margin: 0 0 18px; font-size: 12.5px; color: rgba(230, 220, 190, 0.6); }
.conta-sub b { color: rgba(240, 207, 116, 0.95); }

.form-conta { display: flex; flex-direction: column; gap: 10px; }
.form-conta .campo-ico-mark { font-size: 14px; width: 17px; justify-content: center; }

.conta-termos {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 4px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(226, 214, 184, 0.68);
  cursor: pointer;
}
.conta-termos input { margin-top: 2px; accent-color: #d4af37; flex-shrink: 0; width: 15px; height: 15px; }
.conta-termos b { color: rgba(240, 207, 116, 0.92); }

#conta-erro { text-align: center; }
#conta-erro.msg-ok { color: #7fe0a4; border-color: rgba(46, 224, 106, 0.35); background: rgba(46, 224, 106, 0.10); }

/* ============================================================
   MARCA — só o nome (o losango CB saiu). Sem outro elemento ao lado, ele
   fica maior e centralizado, e é o único ponto de identidade da tela.
   ============================================================ */
.marca-linha { justify-content: center; }
.marca-linha .marca-nome-img {
  height: auto;
  width: clamp(230px, 30vw, 430px);
  /* TEMPERATURA: a arte original vem com azul e dourado bem mais berrantes que o resto do
     site. Baixo a saturação e o brilho e puxo o matiz uns graus pro quente, pra o azul dela
     encostar no azul do fundo e o dourado no dourado dos campos. Assim ela deixa de parecer
     um adesivo colado por cima e passa a fazer parte da tela. */
  filter:
    saturate(0.82)
    brightness(0.92)
    contrast(1.04)
    hue-rotate(-6deg)
    drop-shadow(0 0 30px rgba(70, 150, 255, 0.22));
}

.header-marca .header-logo-nome {
  height: 22px;
  filter: saturate(0.82) brightness(0.94) hue-rotate(-6deg);
}

@media (max-width: 700px) {
  .marca-linha .marca-nome-img { width: min(300px, 74vw); }
}
@media (max-width: 560px) {
  .header-marca .header-logo-nome { height: 18px; }
}
/* o cabeçalho não tem mais símbolo, então o nome nunca some */
@media (max-width: 400px) {
  .header-logo-nome { display: block !important; height: 16px; }
}

/* CRIAR CONTA agora fica DEPOIS do textinho explicativo */
.btn-criar-conta { margin-top: 14px; }

/* "INTELIGÊNCIA ARTIFICIAL" mais perto do nome. A margem de 12px vinha de quando havia o
   losango ao lado; sem ele, a linha ficava solta no meio do vazio.
   O -4px compensa a folga que o PNG traz embaixo (a arte não encosta na borda do arquivo). */
.marca-tag { margin-top: -4px; }

@media (max-width: 700px) {
  .marca-tag { margin-top: -2px; }
}

/* Anel dourado giratório REMOVIDO (pedido do dono, pra avaliar sem ele).
   Some só o aro; o brilho suave por trás da logo continua, senão ela ficaria
   chapada no fundo. Pra trazer de volta é só apagar este bloco. */
.login-halo::after { display: none !important; }

/* Canvas do fundo fora de cena enquanto a animação está desligada (login-fx.js). */
.login-fx { display: none !important; }

/* ============================================================
   BOTÃO ACESSAR — dourado tirado do PRÓPRIO "BOOM" da logo.
   As cores abaixo saíram de uma amostragem dos pixels do arquivo, não de chute:
     sombra  #603000 · #704000 · #804000
     meio    #905000 · #A06000 · #B06000
     brilho  #FFC400 · #FFD000 · #FFE066
   O dourado antigo era claro e acinzentado (champanhe) e destoava da logo.
   ============================================================ */
.btn-entrar {
  background: linear-gradient(100deg,
    #5f3000 0%,
    #8a4d00 18%,
    #c98a06 36%,
    #ffd23f 49%,
    #ffeaa0 54%,
    #ffd23f 59%,
    #c98a06 74%,
    #8a4d00 88%,
    #5f3000 100%);
  border-color: rgba(255, 210, 63, 0.62);
  color: #2a1600;                                  /* marrom escuro: contraste alto no dourado forte */
  box-shadow: 0 10px 28px rgba(180, 110, 10, 0.34);
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.35);
}
.btn-entrar .btn-entrar-seta { border-color: rgba(42, 22, 0, 0.5); }
.btn-entrar:hover:not(:disabled) { filter: brightness(1.06) saturate(1.04); }

/* o "ACESSO" e o risquinho seguem o mesmo dourado, pra a tela ficar coesa */
.login-eyebrow { color: #ffd23f; }
.login-risco { background: linear-gradient(90deg, #ffd23f, rgba(201, 138, 6, 0.15)); }

/* No desktop a marca estava desalinhada: a logo centralizada (justify-content:center em
   .marca-linha) e a legenda encostada à esquerda (text-align:left que veio da regra de
   ≥900px). Centraliza o bloco inteiro, aí a legenda cai exatamente sob a logo. */
@media (min-width: 900px) {
  .login-marca { text-align: center; }
  .marca-linha { justify-content: center; }
}

/* ============================================================
   HOME v2 — vitrine de jogos. Conta e dinheiro vivem SÓ no header;
   a Home é descoberta de jogos, não painel administrativo.
   ============================================================ */

/* ── header ── */
.header { padding: 14px 22px; gap: 14px; }
.header-marca .header-logo-nome { height: 52px; }      /* logo com presença: 20 → 32 → 52 */

.btn-hd {
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease, border-color .15s ease, transform .12s ease;
}
.btn-hd:active { transform: translateY(1px); }
/* dinheiro ENTRANDO em verde, SAINDO contornado: a diferença some se os dois forem iguais */
.btn-hd-dep {
  border: 1px solid rgba(46, 224, 106, 0.5);
  background: linear-gradient(135deg, #17c964, #109b4d);
  color: #06170d;
  box-shadow: 0 6px 18px rgba(23, 201, 100, 0.24);
}
.btn-hd-dep:hover { filter: brightness(1.07); }
.btn-hd-saq {
  border: 1px solid rgba(120, 175, 255, 0.42);
  background: rgba(10, 22, 48, 0.85);
  color: #bcd8ff;
}
.btn-hd-saq:hover { border-color: #6ba6ff; color: #fff; }

/* ── menu do perfil ── */
.perfil-wrap { position: relative; }
.header-avatar { cursor: pointer; padding: 0; }
.menu-perfil {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 224px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(158deg, rgba(18, 30, 58, 0.98), rgba(9, 16, 34, 0.99));
  border: 1px solid rgba(45, 140, 255, 0.26);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  z-index: 40;
  animation: menuCai .16s ease-out;
}
.menu-perfil[hidden] { display: none !important; }
@keyframes menuCai { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.menu-perfil-topo { padding: 10px 12px 12px; border-bottom: 1px solid rgba(45, 140, 255, 0.14); margin-bottom: 6px; }
.menu-perfil-nome { display: block; font-size: 14px; font-weight: 800; color: var(--texto); }
.menu-perfil-email { display: block; font-size: 11.5px; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; }

.menu-perfil-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.menu-perfil-item:hover { background: rgba(45, 140, 255, 0.12); color: #fff; }
.menu-perfil-item span { font-size: 15px; }
.menu-perfil-sair { color: #ff8a8a; }
.menu-perfil-sair:hover { background: rgba(255, 93, 93, 0.12); color: #ff9d9d; }

/* ── saudação enxuta ── */
.saudacao { margin: 6px 0 30px; }
.saudacao-ola { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--azul); text-transform: uppercase; }
.saudacao-nome { margin: 6px 0 0; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; color: var(--texto); }

/* ── seções ── */
.secao-jogos { margin-bottom: 34px; }
.secao-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.secao-titulo { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--texto); white-space: nowrap; }
.secao-linha { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(45, 140, 255, 0.35), transparent); }

/* ── cards de jogo ── */
.destaques { display: grid; grid-template-columns: 1fr; gap: 14px; }
.catalogo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.card-jogo {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  min-height: 84px;
  border-radius: 16px;
  border: 1px solid rgba(120, 175, 255, 0.16);
  background: linear-gradient(140deg, rgba(20, 34, 66, 0.9), rgba(9, 16, 34, 0.92));
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.card-jogo:hover { transform: translateY(-3px); border-color: rgba(120, 175, 255, 0.5); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45); }

/* o brilho é o que dá identidade por categoria, sem precisar de imagem de capa */
.card-jogo-brilho {
  position: absolute; inset: 0;
  opacity: 0.5;
  transition: opacity .2s ease;
  pointer-events: none;
}
.card-jogo:hover .card-jogo-brilho { opacity: 0.78; }
.tom-double   .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(226, 69, 59, 0.30), transparent 62%); }
.tom-verde    .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(23, 201, 100, 0.26), transparent 62%); }
.tom-roxo     .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(150, 90, 255, 0.26), transparent 62%); }
.tom-vermelho .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(226, 69, 59, 0.26), transparent 62%); }
.tom-ouro     .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(255, 210, 63, 0.24), transparent 62%); }
.tom-azul     .card-jogo-brilho { background: radial-gradient(circle at 88% 18%, rgba(45, 140, 255, 0.26), transparent 62%); }

.card-jogo-ico { position: relative; font-size: 30px; line-height: 1; flex-shrink: 0; }
.card-jogo-txt { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-jogo-cat { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-fraco); }
.card-jogo-nome { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.card-jogo-desc { font-size: 12px; color: var(--texto-suave); }

.card-jogo-selo {
  position: absolute; top: 12px; right: 14px;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255, 210, 63, 0.14);
  border: 1px solid rgba(255, 210, 63, 0.4);
  color: #ffd23f;
  font-size: 9px; font-weight: 900; letter-spacing: 0.12em;
}
.card-jogo-seta {
  position: relative; margin-left: auto;
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 255, 0.35);
  color: var(--azul);
  transition: all .16s ease;
}
.card-jogo:hover .card-jogo-seta { background: var(--azul); border-color: var(--azul); color: #fff; }

.card-jogo-g { min-height: 116px; padding: 20px; }
.card-jogo-g .card-jogo-ico { font-size: 40px; }
.card-jogo-g .card-jogo-nome { font-size: 19px; }

@media (min-width: 760px) {
  .catalogo { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .catalogo { grid-template-columns: repeat(4, 1fr); }
  .card-jogo-g { flex-direction: column; align-items: flex-start; min-height: 190px; }
  .card-jogo-g .card-jogo-seta { position: absolute; right: 18px; bottom: 18px; margin: 0; }
  .card-jogo-g .card-jogo-ico { font-size: 46px; }
}

/* ── celular: o header não pode virar uma barra entulhada ── */
@media (max-width: 700px) {
  .header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .header-marca { width: 100%; }
  .header-marca .header-logo-nome { height: 40px; }
  .header-dir { width: 100%; justify-content: space-between; gap: 8px; }
  .pill-saldo { flex: 1; justify-content: center; padding: 9px 10px; }
  .btn-hd { padding: 9px 13px; font-size: 11.5px; }
  .menu-perfil { min-width: 200px; }
  .saudacao { margin-bottom: 22px; }
}

/* ── MEU PERFIL ────────────────────────────────────────────────────────────── */
.perfil-cabeca {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  margin-bottom: 18px;
  border-radius: var(--raio);
  background: linear-gradient(140deg, rgba(20, 34, 66, 0.9), rgba(9, 16, 34, 0.92));
  border: 1px solid rgba(45, 140, 255, 0.2);
}
.perfil-avatar {
  position: relative;
  width: 58px; height: 58px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  background: linear-gradient(150deg, rgba(45, 140, 255, 0.28), rgba(11, 23, 48, 0.9));
  border: 1px solid rgba(45, 140, 255, 0.4);
  padding: 0; cursor: pointer; overflow: hidden;
  transition: border-color .16s ease;
}
.perfil-avatar:hover { border-color: rgba(120, 175, 255, 0.75); }
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-avatar img[hidden] { display: none; }
/* a lente só aparece no hover/foco: no repouso o que importa é a foto, não o botão */
.perfil-avatar-lente {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 8, 20, 0.6);
  font-size: 19px;
  opacity: 0; transition: opacity .16s ease;
}
.perfil-avatar:hover .perfil-avatar-lente,
.perfil-avatar:focus-visible .perfil-avatar-lente { opacity: 1; }
.perfil-avatar.enviando .perfil-avatar-lente { opacity: 1; animation: pfPulso 1s ease-in-out infinite; }
@keyframes pfPulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* A mesma foto no cantinho do cabeçalho.
   SEM `overflow:hidden` aqui: o `.ponto-online` fica em right/bottom -1px, ou seja PRA FORA
   do botão — recortar o botão comeria o pontinho de "online". Quem arredonda é a própria
   imagem. */
.header-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.header-avatar img[hidden] { display: none; }
.perfil-cabeca-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perfil-cabeca-txt strong { font-size: 18px; font-weight: 800; }
.perfil-cabeca-txt span { font-size: 12.5px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; }
.perfil-desde { font-size: 11.5px !important; color: var(--texto-fraco) !important; }
.perfil-nivel {
  margin-left: auto; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 210, 63, 0.10);
  border: 1px solid rgba(255, 210, 63, 0.3);
}
.perfil-nivel b { font-size: 22px; font-weight: 900; color: #ffd23f; line-height: 1; }
.perfil-nivel i { font-size: 9.5px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 210, 63, 0.7); }

.perfil-grade { display: grid; grid-template-columns: 1fr; gap: 14px; }
.perfil-bloco {
  padding: 18px 20px;
  border-radius: var(--raio);
  background: linear-gradient(158deg, rgba(18, 34, 70, 0.8), rgba(8, 17, 38, 0.82));
  border: 1px solid rgba(45, 140, 255, 0.18);
}
.perfil-bloco h3 {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--azul);
}
.perfil-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(45, 140, 255, 0.09);
  font-size: 13px;
}
.perfil-linha:last-of-type { border-bottom: 0; }
.perfil-linha span { color: var(--texto-suave); }
.perfil-linha b { font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 13px; }

.btn-revelar {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  background: rgba(6, 14, 32, 0.7);
  border: 1px solid rgba(45, 140, 255, 0.26);
  color: var(--texto-suave);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-revelar:hover { border-color: var(--azul); color: #fff; }

/* Rodapé legal da Home. Discreto de propósito: é informação obrigatória de canto, não
   um bloco a mais competindo com os jogos. Mesma família do .perfil-rodape. */
.rodape-legal {
  /* COLUNA, não linha: agora são três informações de pesos diferentes (o selo, a advertência
     do Ministério e a ressalva sobre os sinais). Lado a lado elas viravam um parágrafo só e
     ninguém achava a que importa. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 34px auto 0;
  padding-top: 20px;
  max-width: 720px;
  border-top: 1px solid rgba(120, 175, 255, 0.10);
  text-align: center;
  /* Aviso legal se lê ou não serve pra nada. Era 11,5px — sumia no rodapé. */
  font-size: 15px;
  line-height: 1.5;
  color: rgba(226, 232, 245, 0.72);
}
.rodape-cab {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(226, 232, 245, 0.92);
}
/* A advertência do Ministério é a linha de peso legal — ela não pode ficar menor que o resto. */
.rodape-orgao {
  font-size: 15.5px; font-weight: 700; letter-spacing: 0.01em;
  color: rgba(255, 168, 160, 0.95);
}
.rodape-nota { font-size: 14px; color: rgba(226, 232, 245, 0.62); max-width: 620px; }
.rodape-18 {
  flex-shrink: 0;
  padding: 4px 13px;
  border-radius: 100px;
  border: 1.5px solid rgba(226, 69, 59, 0.5);
  background: rgba(226, 69, 59, 0.14);
  color: #ff8a80;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
@media (max-width: 560px) {
  .rodape-legal { gap: 6px; margin-top: 26px; padding: 18px 4px 0; max-width: 100%; }
  .rodape-cab { font-size: 14.5px; }
  .rodape-orgao { font-size: 13.5px; }
  .rodape-nota { font-size: 12.5px; }
  .rodape-18 { font-size: 14px; padding: 3px 10px; }
}

/* NA TELA DO JOGO o rodapé não pode roubar altura da mesa: a .jogo-area é flex:1 e o que
   sobrar vira mesa menor. Então ele fica compacto e não encolhe (flex-shrink:0 evitaria o
   contrário — aqui o risco é ele espremer o jogo, então limitamos o próprio rodapé). */
#view-jogo .rodape-legal,
#view-double .rodape-legal {
  flex-shrink: 0;
  margin: 0 auto;
  padding: 8px 16px 10px;
  border-top: 0;
  gap: 3px;
}
#view-jogo .rodape-cab, #view-double .rodape-cab { font-size: 13px; }
#view-jogo .rodape-orgao, #view-double .rodape-orgao { font-size: 12px; }
/* A ressalva sobre os sinais FICA também na mesa — é justamente onde o cliente está
   apostando. Ela tinha saído porque a .jogo-area esticava até o fim da tela e cada linha
   do rodapé roubava altura do jogo; agora a área encolhe até a mesa e sobra espaço.
   (Em janela baixa o rodapé inteiro some, pela regra de max-height mais acima.) */
#view-jogo .rodape-nota, #view-double .rodape-nota { font-size: 11.5px; max-width: 560px; }
#view-jogo .rodape-18,
#view-double .rodape-18 { font-size: 12px; padding: 2px 8px; }

/* Telas baixas (celular deitado, janela curta): a mesa precisa de cada pixel. O aviso sai
   daqui — ele continua na Home, no login e nas demais telas. */
@media (max-height: 720px) {
  #view-jogo .rodape-legal { display: none; }
}

/* LOGIN — mesmo aviso, sem a linha de cima (lá ele não fecha uma lista, fica solto sob a
   marca) e ocupando a coluna inteira da grade. */
.rodape-login {
  border-top: 0;
  padding-top: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 900px) {
  /* coluna 1 = a da marca. É onde o aviso foi pedido: logo abaixo dela. */
  .rodape-login { grid-column: 1; justify-self: center; max-width: 620px; }
}

.perfil-rodape { margin-top: 18px; font-size: 11.5px; color: var(--texto-fraco); text-align: center; }
.perfil-rodape b { color: var(--texto-suave); }

@media (min-width: 860px) { .perfil-grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .perfil-cabeca { padding: 16px; gap: 12px; }
  .perfil-avatar { width: 48px; height: 48px; font-size: 22px; }
  .perfil-nivel { padding: 8px 12px; }
}

/* ============================================================
   CARDS DE JOGO v2 — formato VERTICAL (referência do dono):
   palco com o ícone grande em cima, nome, subtítulo e a seta no círculo embaixo.
   ============================================================ */
.saudacao-barra {
  display: block; width: 46px; height: 4px;
  margin: 12px 0 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--azul), var(--azul-forte));
  box-shadow: 0 0 14px var(--azul-brilho);
}
.saudacao-sub { margin: 0; font-size: 13px; color: var(--texto-suave); }

.card-jogo {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 26px 16px 24px;
  min-height: 0;
  text-align: center;
  border-radius: 18px;
}

/* palco do ícone: dá ao emoji o peso de uma arte, sem precisar de imagem */
.card-jogo-palco {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 128px;
  margin-bottom: 14px;
}
.card-jogo-ico {
  position: relative;
  font-size: 62px;
  line-height: 1;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  transition: transform .22s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.card-jogo:hover .card-jogo-ico { transform: translateY(-5px) scale(1.06); }

.card-jogo-nome {
  position: relative;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 5px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-jogo-desc {
  position: relative;
  font-size: 11.5px; color: var(--texto-fraco);
  margin-bottom: 18px;
  min-height: 16px;
}
.card-jogo-seta {
  position: relative;
  margin: auto 0 0;          /* colada embaixo, mesmo com nomes de alturas diferentes */
  width: 38px; height: 38px;
}
.card-jogo-selo { top: 12px; right: 12px; }

/* o brilho vira um halo ATRÁS do ícone, em vez de um canto */
.card-jogo-brilho { opacity: 0.55; }
.tom-double   .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(226, 69, 59, 0.30), transparent 58%); }
.tom-verde    .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(23, 201, 100, 0.26), transparent 58%); }
.tom-roxo     .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(150, 90, 255, 0.26), transparent 58%); }
.tom-vermelho .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(226, 69, 59, 0.26), transparent 58%); }
.tom-ouro     .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(255, 210, 63, 0.24), transparent 58%); }
.tom-azul     .card-jogo-brilho { background: radial-gradient(circle at 50% 30%, rgba(45, 140, 255, 0.26), transparent 58%); }

/* o destaque é o mesmo card, só maior */
.card-jogo-g { padding: 30px 18px 26px; }
.card-jogo-g .card-jogo-palco { height: 150px; }
.card-jogo-g .card-jogo-ico { font-size: 74px; }
.card-jogo-g .card-jogo-nome { font-size: 19px; }

/* grades: no celular 2 colunas; no monitor, 5 na vitrine (igual à referência) */
.destaques, .catalogo { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) {
  .catalogo  { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (min-width: 1200px) {
  .catalogo  { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
  .card-jogo { padding: 20px 12px 18px; }
  .card-jogo-palco { height: 92px; margin-bottom: 10px; }
  .card-jogo-ico { font-size: 46px; }
  .card-jogo-g .card-jogo-palco { height: 106px; }
  .card-jogo-g .card-jogo-ico { font-size: 54px; }
  .card-jogo-nome { font-size: 14.5px; margin-bottom: 12px; }
  .card-jogo-desc { font-size: 10.5px; margin-bottom: 14px; }
  .card-jogo-seta { width: 32px; height: 32px; }
}

/* NOME EM DUAS LINHAS. Era nowrap+ellipsis e "Futebol Studio Inglês" virava "Futebol
   Studio I…". Como os cards da mesma fila esticam juntos no grid, deixar quebrar não
   desalinha nada — e a seta continua colada embaixo pelo margin:auto. Duas linhas é o
   teto: na terceira o card viraria uma torre ao lado dos vizinhos. */
.card-jogo-nome {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.25;
}

/* ÍMPAR NÃO FICA ÓRFÃO. Em 2 colunas, um número ímpar de jogos deixa o último encostado
   na esquerda com um buraco do lado. Ele passa a ocupar a fila inteira e se centraliza,
   mantendo a MESMA largura dos outros — some o buraco sem inchar o card. */
@media (max-width: 759px) {
  .destaques > .card-jogo:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 6px);      /* 6px = metade do gap de 12px */
    margin-inline: auto;
  }
}

/* Coluna FIXA envelhece a cada jogo novo: eram 2 colunas, entrou o Bac Bo e sobrou um
   buraco na segunda fila. Com auto-fit a grade se resolve sozinha - cabem 3, entram 3;
   cabem 2, entram 2. 260px e o piso onde arte e nome ainda respiram lado a lado. */
@media (min-width: 760px) {
  .destaques { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
}

/* ============================================================
   DOUBLE — a mesa mora ABAIXO do header, não por baixo dele.

   O BUG: #view-double é position:fixed com z-index 1000, mas vive dentro de .app, que tem
   z-index:1 e portanto ABRE um contexto de empilhamento próprio. Os 1000 só valem lá dentro;
   lá fora .app inteiro vale 1, e o .header (irmão, z-index 20) pinta por cima de tudo.
   Resultado no celular: o header comia a barra "Sair do jogo" e metade do histórico.

   A correção não é subir z-index — é parar de sobrepor. A mesa entra no fluxo normal, embaixo
   do header. E isso é melhor de propósito: saldo e Depositar continuam à mão enquanto joga.
   O #view-jogo (iframe da casa) segue em tela cheia — lá o header atrapalharia mesmo.
   ============================================================ */
#view-double {
  /* relative, não static: a tela de carregamento é absolute/inset-0 e precisa de âncora.
     O motivo do static continua valendo (não sobrepor o header) — relative não sobrepõe. */
  position: relative;
  inset: auto;
  height: auto;
  z-index: auto;
  background: transparent;
  display: block;
}
#view-double .double-scroll { flex: none; overflow: visible; }

/* A barra do jogo agora aparece de verdade — enxuta, colada no header */
#view-double .jogo-barra {
  padding: 9px 14px;
  border-radius: 0;
}

/* ── ritmo vertical: os vãos entre roleta, barra e painel estavam largos demais no celular,
      empurrando as cores pra fora da primeira tela ── */
.double-wrap { padding-top: 12px; padding-bottom: 24px; }
.double-historico { margin-bottom: 10px; }
.double-track-wrap { margin-bottom: 12px; }
.double-fase-box { margin-bottom: 12px; }
.fase-barra { height: 42px; margin: 0 0 4px; }

/* A fita de resultados rola, mas a barra cinza nativa cortava o desenho.
   Os itens cortados na borda já dizem que dá pra arrastar. */
.double-historico { scrollbar-width: none; }
.double-historico::-webkit-scrollbar { display: none; }

@media (max-width: 560px) {
  .double-wrap { padding-top: 10px; padding-bottom: 20px; }
  .fase-barra { height: 40px; }
  .fase-barra-texto { font-size: 12px; letter-spacing: 0.07em; }
  .double-historico { margin-bottom: 8px; }
  .double-track-wrap { margin-bottom: 10px; }
  .double-fase-box { margin-bottom: 10px; }
  /* o painel de apostas é o que importa: começa mais cedo na rolagem */
  .aposta-painel { padding: 13px; gap: 9px; }
  .apostas-listas-container { margin-top: 16px; }
}

/* ============================================================================
   SINAL IA — a faixa da IA acima do jogo.
   Uma área só, altura estável, que troca de estado. Se cada etapa criasse um bloco
   novo, o iframe pularia de tamanho a cada transição — no celular isso é péssimo.
   ============================================================================ */
.sinal-host { flex-shrink: 0; padding: 8px 12px; }

.sinal-ia {
  position: relative;
  overflow: hidden;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(45, 140, 255, 0.22);
  background: linear-gradient(150deg, rgba(16, 30, 62, 0.92), rgba(7, 14, 32, 0.94));
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

/* botão ocioso — dourado da marca, o único chamado pra ação da tela */
.sinal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px; font-weight: 900; letter-spacing: 0.10em;
  color: #1a1206;
  background: linear-gradient(135deg, #ffd76a, #f0a020);
  box-shadow: 0 6px 20px rgba(240, 160, 32, 0.26);
  transition: filter .15s ease, transform .12s ease;
}
.sinal-btn:hover { filter: brightness(1.07); }
.sinal-btn:active { transform: translateY(1px); }
.sinal-btn[hidden] { display: none !important; }
.sinal-btn-ico { font-size: 15px; }

/* palco: todas as outras etapas acontecem aqui, sem trocar de caixa */
.sinal-palco {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 100%; text-align: center;
}
.sinal-palco[hidden] { display: none !important; }
.sinal-etapa {
  font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--texto-suave);
  transition: color .25s ease;
}
.sinal-entrada[hidden] { display: none; }
.sinal-entrada-linha { display: inline-flex; align-items: center; gap: 8px; }

/* a entrada precisa ser lida num relance: ícone + palavra, alto contraste */
.sinal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 900; letter-spacing: 0.06em;
  color: #fff;
  background: color-mix(in srgb, var(--chip) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip) 62%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--chip) 16%, transparent);
}
.sinal-chip i { font-style: normal; font-size: 13px; }
.sinal-mais { color: var(--texto-suave); font-size: 13px; font-weight: 800; }

/* ── varredura: o brilho que percorre o componente enquanto a IA pensa ──
   Discreta de propósito. Animação chamativa aqui competiria com o jogo. */
.sinal-varredura {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(45, 140, 255, 0.20) 48%,
    rgba(120, 210, 255, 0.30) 52%,
    transparent 66%);
  background-size: 260% 100%;
}
.sinal-ia[data-estado="analisando"] .sinal-varredura,
.sinal-ia[data-estado="aguardando"] .sinal-varredura {
  opacity: 1;
  animation: sinalVarre 1.9s linear infinite;
}
@keyframes sinalVarre { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ── estados ── */
.sinal-ia[data-estado="analisando"] {
  border-color: rgba(45, 140, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(45, 140, 255, 0.12), 0 6px 26px rgba(45, 140, 255, 0.14);
}
.sinal-ia[data-estado="analisando"] .sinal-etapa { color: #7fc0ff; }
/* três pontinhos que respiram — o "está pensando" sem gastar altura */
.sinal-ia[data-estado="analisando"] .sinal-etapa::after {
  content: "";
  display: inline-block; width: 4px; height: 4px; margin-left: 7px;
  border-radius: 50%; background: #7fc0ff;
  box-shadow: 9px 0 0 #7fc0ff, 18px 0 0 #7fc0ff;
  animation: sinalPulsa 1.1s ease-in-out infinite;
}
@keyframes sinalPulsa { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.sinal-ia[data-estado="sinal"] {
  border-color: rgba(46, 224, 106, 0.55);
  background: linear-gradient(150deg, rgba(12, 46, 30, 0.92), rgba(7, 20, 32, 0.94));
  box-shadow: 0 0 0 1px rgba(46, 224, 106, 0.14), 0 8px 30px rgba(46, 224, 106, 0.16);
  animation: sinalEntra .45s cubic-bezier(.2, .9, .3, 1.2);
}
.sinal-ia[data-estado="sinal"] .sinal-etapa { color: #2ee06a; }
@keyframes sinalEntra { from { transform: scale(0.97); opacity: 0.4; } to { transform: none; opacity: 1; } }

.sinal-ia[data-estado="aguardando"] { border-color: rgba(45, 140, 255, 0.38); }

.sinal-ia[data-estado="gale"] {
  border-color: rgba(240, 160, 32, 0.6);
  background: linear-gradient(150deg, rgba(52, 36, 8, 0.92), rgba(20, 14, 6, 0.94));
  animation: sinalEntra .4s cubic-bezier(.2, .9, .3, 1.2);
}
.sinal-ia[data-estado="gale"] .sinal-etapa { color: #ffc247; letter-spacing: 0.18em; }

.sinal-ia[data-estado="win"] {
  border-color: rgba(46, 224, 106, 0.7);
  background: linear-gradient(150deg, rgba(10, 52, 32, 0.94), rgba(6, 22, 34, 0.94));
}
.sinal-ia[data-estado="win"] .sinal-etapa { color: #2ee06a; font-size: 14px; }
.sinal-ia[data-estado="loss"] {
  border-color: rgba(226, 69, 59, 0.55);
  background: linear-gradient(150deg, rgba(52, 14, 12, 0.92), rgba(22, 8, 10, 0.94));
}
.sinal-ia[data-estado="loss"] .sinal-etapa { color: #ff6b60; font-size: 14px; }

/* ── balão de WIN/LOSS ──────────────────────────────────────────────────────
   No DoubleX (mesa nossa) fica no centro. Em jogo de casa vai pro canto superior
   direito do palco (.no-palco): o centro é onde a Evolution desenha o WIN dela, e
   os dois anúncios sobrepostos não deixavam ler nenhum. */
.sinal-balao {
  position: fixed;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3000;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 40px;
  border-radius: 20px;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(8px);
  animation: balaoEntra .42s cubic-bezier(.15, .9, .3, 1.35);
}
/* Canto da MESA, não da tela. O topo tem folga pros botões da casa (chat, câmera, som),
   que moram justamente na primeira faixa do canto direito. */
.sinal-balao.no-palco {
  position: absolute;
  left: auto; right: 14px;
  top: 64px;
  transform: none;
  padding: 13px 18px;
  gap: 1px;
  border-radius: 14px;
  animation: balaoCanto .34s cubic-bezier(.15, .9, .3, 1.25);
}
.sinal-balao.no-palco .sinal-balao-ico { font-size: 24px; }
.sinal-balao.no-palco strong { font-size: 20px; }
.sinal-balao.no-palco span { font-size: 11px; }
@keyframes balaoCanto {
  from { opacity: 0; transform: translateX(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .sinal-balao.no-palco { right: 8px; top: 46px; padding: 10px 13px; }
  .sinal-balao.no-palco .sinal-balao-ico { font-size: 19px; }
  .sinal-balao.no-palco strong { font-size: 17px; }
  .sinal-balao.no-palco span { font-size: 10px; }
}
.sinal-balao strong { font-size: 30px; font-weight: 900; letter-spacing: 0.06em; line-height: 1; }
.sinal-balao span { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.sinal-balao-ico { font-size: 40px; line-height: 1; }
.sinal-balao.e-win {
  background: rgba(8, 40, 24, 0.9);
  border: 1px solid rgba(46, 224, 106, 0.55);
  box-shadow: 0 18px 60px rgba(46, 224, 106, 0.3);
}
.sinal-balao.e-win strong { color: #2ee06a; }
.sinal-balao.e-loss {
  background: rgba(38, 12, 12, 0.9);
  border: 1px solid rgba(226, 69, 59, 0.5);
  box-shadow: 0 18px 60px rgba(226, 69, 59, 0.24);
}
.sinal-balao.e-loss strong { color: #ff6b60; }
.sinal-balao.saindo { animation: balaoSai .55s ease forwards; }
@keyframes balaoEntra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes balaoSai {
  to { opacity: 0; transform: translate(-50%, -62%) scale(0.94); }
}
/* O balão do canto NÃO usa translate(-50%,-50%): herdar a saída do centro faria ele
   pular pro meio da mesa antes de sumir. Sai deslizando pra direita, de onde veio. */
.sinal-balao.no-palco.saindo { animation: balaoCantoSai .5s ease forwards; }
@keyframes balaoCantoSai {
  to { opacity: 0; transform: translateX(14px) scale(.96); }
}

/* ── celular: a faixa não pode roubar altura do jogo ── */
@media (max-width: 560px) {
  .sinal-host { padding: 6px 10px; }
  .sinal-ia { min-height: 48px; padding: 6px 10px; border-radius: 12px; }
  .sinal-btn { padding: 10px 14px; font-size: 12.5px; letter-spacing: 0.08em; }
  .sinal-etapa { font-size: 10px; letter-spacing: 0.10em; }
  .sinal-chip { padding: 4px 9px; font-size: 11.5px; }
  .sinal-balao { padding: 18px 30px; }
  .sinal-balao strong { font-size: 25px; }
  .sinal-balao-ico { font-size: 34px; }
}

/* ============================================================================
   TELA DO JOGO — header + faixa da IA + jogo, e o jogo come todo o resto.

   O header é irmão do .app (que tem z-index:1 e abre contexto próprio), então ele
   SEMPRE pinta por cima de qualquer coisa daqui — brigar por z-index não resolve.
   A tela então COMEÇA embaixo dele: --header-h é medido em JS porque no celular o
   header quebra em duas linhas e a altura não é constante. Com isso o iframe usa a
   altura REAL que sobra do dvh e a página não rola — o jogo cabe inteiro na tela.
   ============================================================================ */
#view-jogo {
  top: var(--header-h, 0px);
  bottom: 0;
  height: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#view-jogo .jogo-barra { flex-shrink: 0; padding: 8px 12px; }

/* nunca estourar a largura da tela */
.jogo-iframe { max-width: 100%; }

/* no monitor o jogo fica centralizado, sem esticar até virar um borrão */
@media (min-width: 900px) {
  #view-jogo .sinal-host { max-width: 820px; margin: 0 auto; width: 100%; }
}

/* A etapa é sempre UMA linha. Se quebrasse em duas, a faixa cresceria e o iframe
   encolheria no meio da análise — exatamente o pulo de layout que queremos evitar. */
.sinal-etapa {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 400px) { .sinal-etapa { font-size: 9.5px; letter-spacing: 0.06em; } }

/* ============================================================================
   MODO JOGANDO — o jogo é o protagonista, e no celular isso é aritmética.

   O QUE ESTAVA BUGADO: no celular o header quebra em DUAS linhas (~110px). Somando
   a barra do jogo (~50px) e a faixa da IA (~60px), sobrava pouco mais da metade da
   tela pro Evolution — e a UI da casa, sem altura, atropela os próprios elementos.
   Fora isso a página ainda rolava, então metade do jogo vivia fora da viewport.

   A correção é cortar altura do que NÃO é o jogo, sem esconder nada que o usuário
   precise: o header vira uma linha só e Depositar/Sacar viram ícones (o rótulo volta
   assim que ele sai do jogo). O saldo, que é o dado que importa jogando, fica.
   ============================================================================ */

/* A página não rola: quem rola, se precisar, é o jogo dentro do iframe.
   Sem isso o usuário arrasta a página inteira e perde o jogo de vista. */
body.jogando { overflow: hidden; }
body.jogando #view-jogo { overflow: hidden; }

@media (max-width: 700px) {
  /* header em UMA linha — era a maior sangria de altura da tela */
  body.jogando .header { flex-wrap: nowrap; padding: 7px 10px; gap: 8px; }
  body.jogando .header-marca { width: auto; flex-shrink: 0; }
  body.jogando .header-marca .header-logo-nome { height: 17px; }
  body.jogando .header-dir { width: auto; flex: 1; justify-content: flex-end; gap: 6px; }

  body.jogando .pill-saldo { flex: 0 1 auto; padding: 6px 9px; }
  body.jogando .pill-saldo strong { font-size: 12.5px; }
  body.jogando .pill-saldo-ico { font-size: 10px; }

  /* Depositar/Sacar viram ícone: continuam a um toque, sem comer a linha inteira.
     Nada de escondê-los — o menu do avatar não tem essas ações. */
  body.jogando .btn-hd { font-size: 0; padding: 7px 11px; flex-shrink: 0; }
  body.jogando .btn-hd::after { font-size: 14px; line-height: 1; font-weight: 900; }
  body.jogando .btn-hd-dep::after { content: '+'; }
  body.jogando .btn-hd-saq::after { content: '\2193'; }

  body.jogando .header-avatar { padding: 6px 9px; flex-shrink: 0; }

  /* barra do jogo e faixa da IA: enxutas, mas legíveis */
  body.jogando .jogo-barra { padding: 6px 10px; }
  body.jogando .jogo-titulo { font-size: 12.5px; }
  body.jogando .btn-voltar { font-size: 12.5px; padding: 5px 2px; }
  body.jogando .btn-icon { padding: 5px 9px; font-size: 11px; }

  body.jogando .sinal-host { padding: 5px 8px; }
  body.jogando .sinal-ia { min-height: 44px; padding: 5px 9px; }
  body.jogando .sinal-btn { padding: 9px 12px; }
}

/* Ponto da fonte do resultado: verde = mesa ao vivo, âmbar = demonstração.
   Fica no canto, discreto — mas é o que diferencia "quebrado" de "ainda conectando". */
.sinal-fonte {
  position: absolute;
  top: 7px; left: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f0a020;
  box-shadow: 0 0 7px rgba(240, 160, 32, 0.8);
  transition: background .3s ease, box-shadow .3s ease;
}
.sinal-fonte[data-real="1"] {
  background: #2ee06a;
  box-shadow: 0 0 7px rgba(46, 224, 106, 0.85);
}

/* ============================================================================
   DOUBLE NO MONITOR — duas colunas, em vez de uma coluna de celular esticada.

   O problema não era tamanho, era DESPERDÍCIO: a roleta ocupava 1360px enquanto o
   painel de aposta ficava numa coluna de 560px no meio, com o resto da tela vazio —
   e as listas de aposta, empurradas pra baixo de tudo, exigiam rolagem pra existir.

   Aqui a mesa (histórico, roleta, fase) segue full-width, porque é o que o olho
   acompanha. Embaixo dela o espaço se divide: apostas dos jogadores à esquerda,
   painel de aposta à direita, sempre à mão. Nada de rolar pra apostar.
   ============================================================================ */
/* (a grade do DoubleX no monitor foi refeita mais abaixo: operação à esquerda, jogo à direita) */

/* ── a faixa da IA não é um outdoor ──
   Esticada em 1360px, o botão dourado virava uma barra gigante gritando na tela.
   Ela é a camada da IA sobre o jogo, não o assunto principal. */
@media (min-width: 900px) {
  .sinal-ia { max-width: 720px; margin: 0 auto; }
  .sinal-btn { width: auto; min-width: 280px; align-self: center; }
}

/* ============================================================================
   LISTAS DE APOSTA — por que estavam sem graça: TOKEN QUE NÃO EXISTE.
   O bloco original usava --vermelho, --branco, --preto e --txt-sub. Nenhum desses
   está no :root deste projeto (os certos são --double-vermelho/-preto/-branco e
   --texto-suave). CSS com variável inexistente não quebra ruidosamente: ele
   simplesmente não pinta — por isso os badges viraram quadradinhos vazios e os
   cards ficaram sem fundo. Aqui os tokens certos entram e o bloco ganha desenho.
   ============================================================================ */

#coluna-vermelho { --tom: #e2453b; }
#coluna-branco   { --tom: #eef2f7; }
#coluna-preto    { --tom: #7d8698; }

.aposta-coluna {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: linear-gradient(162deg, rgba(18, 34, 70, 0.74), rgba(8, 17, 38, 0.82));
  border: 1px solid rgba(45, 140, 255, 0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  transition: border-color .25s ease, transform .25s ease;
}
.aposta-coluna:hover { border-color: color-mix(in srgb, var(--tom) 40%, transparent); }

/* fio de cor no topo: identifica a coluna antes de o olho ler o título */
.aposta-coluna::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--tom), color-mix(in srgb, var(--tom) 25%, transparent));
}
/* brilho suave da cor no canto — dá profundidade sem virar enfeite */
.aposta-coluna::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tom) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.aposta-coluna-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}
.aposta-titulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--texto);
}

/* o badge vira ficha redonda da cor, não um quadrado solto */
.aposta-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tom) 14%, transparent),
              0 3px 10px color-mix(in srgb, var(--tom) 34%, transparent);
}
.badge-vermelho { background: #e2453b; }
.badge-branco   { background: #eef2f7; color: #e2453b; }
.badge-preto    { background: #1c1f27; border: 1px solid rgba(255, 255, 255, 0.16); }

.aposta-coluna-total {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(4, 10, 24, 0.5);
  border: 1px solid rgba(45, 140, 255, 0.12);
}
.aposta-coluna-total strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: var(--texto);
}

.texto-cinza {
  color: var(--texto-fraco);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.aposta-lista-header {
  display: flex; justify-content: space-between;
  padding: 0 10px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(45, 140, 255, 0.12);
}
.aposta-lista { gap: 2px; max-height: 260px; }
.aposta-lista::-webkit-scrollbar-thumb { background: rgba(45, 140, 255, 0.3); }

.aposta-item {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
}
.aposta-item:hover { background: rgba(45, 140, 255, 0.07); }
.aposta-user { color: var(--texto-suave); gap: 7px; }
.aposta-user-ico { color: var(--texto-fraco); font-size: 12px; }
.aposta-valor {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--texto);
}

@media (max-width: 768px) {
  .apostas-listas-container { flex-direction: column; gap: 12px; }
  .aposta-lista { max-height: 190px; }
}

/* ============================================================================
   FAIXA DA IA NO MONITOR — o botão sozinho numa barra larga parecia perdido.
   Em vez de espremer a faixa, o espaço vazio ganha CONTEÚDO: a marca da camada
   de IA à esquerda, o chamado pra ação à direita. A barra passa a ter dono.
   Some assim que a análise começa — dali em diante o palco é do estado.
   ============================================================================ */
.sinal-marca { display: none; }

@media (min-width: 900px) {
  .sinal-ia { max-width: 760px; }
  .sinal-ia[data-estado="idle"] {
    justify-content: space-between;
    gap: 22px;
    padding: 10px 12px 10px 20px;
  }
  .sinal-ia[data-estado="idle"] .sinal-marca {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    min-width: 0;
  }
  .sinal-marca b {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 900; letter-spacing: 0.14em;
    color: var(--texto);
  }
  .sinal-marca b i {
    font-style: normal;
    font-size: 13px;
    filter: drop-shadow(0 0 6px rgba(45, 140, 255, 0.7));
  }
  .sinal-marca em {
    font-style: normal;
    font-size: 11px;
    color: var(--texto-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sinal-btn { width: auto; min-width: 250px; flex-shrink: 0; }
}

/* sheen: um brilho que atravessa o botão de vez em quando, chamando o clique
   sem piscar. Só no repouso — durante a análise a varredura já faz esse papel. */
.sinal-btn::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: sinalSheen 3.6s ease-in-out infinite;
  pointer-events: none;
}
.sinal-btn { position: relative; overflow: hidden; }
@keyframes sinalSheen {
  0%, 62% { background-position: 170% 0; }
  100%    { background-position: -70% 0; }
}

/* Respiro entre a faixa da IA e a fita de resultados. Coladas, as duas liam como um
   bloco só — e a faixa é OUTRA camada: ela fala sobre o jogo, não faz parte da mesa.
   O padding lateral sai porque aqui o .double-wrap já dá a margem. */
#sinal-host-double { padding: 0; margin-bottom: 22px; }
@media (max-width: 560px) { #sinal-host-double { margin-bottom: 14px; } }

/* Nome do jogo como MARCA, não como rótulo de tela. O "X" carrega o dourado da
   CyberBoom — é o mesmo acento do logo, e é o que faz o nome virar identidade. */
.marca-jogo {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--texto);
  text-shadow: 0 0 18px rgba(45, 140, 255, 0.35);
}
.marca-jogo i {
  font-style: normal;
  background: linear-gradient(135deg, #ffd76a, #f0a020);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* o brilho não passa pelo texto recortado: vai atrás, num sopro dourado */
  filter: drop-shadow(0 0 9px rgba(240, 160, 32, 0.55));
}
@media (max-width: 560px) { .marca-jogo { font-size: 14px; } }

/* ── A SUA aposta na coluna ──
   'order: -1' e não prepend: um bot entra a cada ~300ms e empurraria a sua ficha
   pra baixo em meio segundo. Com order ela fica cravada no topo aconteça o que
   acontecer, que é onde o jogador procura a própria aposta. */
.aposta-item-eu {
  order: -1;
  background: linear-gradient(100deg, rgba(45, 140, 255, 0.16), rgba(45, 140, 255, 0.05));
  border: 1px solid rgba(45, 140, 255, 0.42);
  box-shadow: 0 0 16px rgba(45, 140, 255, 0.12);
}
.aposta-item-eu:hover { background: linear-gradient(100deg, rgba(45, 140, 255, 0.22), rgba(45, 140, 255, 0.07)); }
.aposta-item-eu .aposta-user { color: var(--texto); font-weight: 700; }
.aposta-item-eu .aposta-user-ico { color: var(--dourado); }
.aposta-item-eu .aposta-valor { color: #7fc0ff; }
.aposta-selo-eu {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.10em;
  padding: 2px 5px;
  border-radius: 4px;
  color: #04101f;
  background: linear-gradient(135deg, #7fc0ff, var(--azul));
  flex-shrink: 0;
}

/* "Inglês" tem acento e é a parte que distingue esta mesa das outras Futebol Studio.
   Ela ganha o dourado; o resto do nome fica branco, pra leitura não competir. */
.marca-jogo i { margin-left: 4px; }

/* ============================================================================
   OCULTAR SALDO — o olhinho na pílula do topo.
   ============================================================================ */
.olho-saldo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .15s ease, background .15s ease;
}
.olho-saldo:hover { opacity: 1; background: rgba(45, 140, 255, 0.14); }
.olho-ico { font-size: 13px; line-height: 1; }

/* olho fechado: o risco diagonal diz "escondido" melhor que trocar o emoji,
   que muda de desenho conforme o aparelho */
.olho-saldo.olho-fechado { opacity: 0.8; }
.olho-saldo.olho-fechado::after {
  content: '';
  position: absolute;
  width: 17px; height: 1.5px;
  background: var(--texto-suave);
  transform: rotate(-40deg);
  border-radius: 2px;
}
.olho-saldo { position: relative; }

/* Desfoque em vez de asteriscos: o número segue no lugar e com a mesma largura,
   então nada na barra dança quando você liga ou desliga. */
body.saldo-oculto #header-saldo {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
#header-saldo { transition: filter .2s ease; }

/* ── o que fica POR CIMA do iframe ──
   A mesa é de outro domínio: não dá pra alterar nem ler nada lá dentro. Só cobrir.

   POR QUE ERRAVA O ALVO NO MONITOR: as tampas eram filhas de #view-jogo (a tela toda),
   não do iframe. Num monitor largo a Evolution desenha 16:9 e sobra tarja preta dos
   lados — a tampa do saldo caía na tarja, a 300px do canto da TELA, enquanto o saldo
   estava a 340px, já dentro da mesa. Cobria o vazio e deixava o número à mostra.

   A correção é dar ao iframe uma moldura com o tamanho EXATO da mesa (.jogo-palco, na
   proporção 16:9 no monitor) e pendurar as tampas nela. Sem tarja dentro da moldura,
   as medidas passam a bater em qualquer largura de tela. */
/* A ÁREA é o espaço livre entre a faixa da IA e o pé da tela. O PALCO é a mesa
   dentro dela: no monitor o JS dá a ele largura e altura em pixel, já em 16:9, pra
   que o iframe seja exatamente do tamanho do vídeo — sem sobra pra Evolution
   distribuir por conta própria e desencontrar da moldura. */
.jogo-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jogo-palco {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.jogo-palco .jogo-iframe { width: 100%; height: 100%; flex: 1; }

/* O palco preenche a área toda; quem diz onde a MESA caiu dentro dele é o JS
   O palco JÁ É a mesa: ajustarTampas() dá a ele largura e altura em pixel, em 16:9,
   então tampas e moldura são porcentagem simples dele — sem deslocamento a calcular.
   (Tentei antes `aspect-ratio` no próprio palco: sem largura nem altura definidas o
   navegador não tem base pra calcular e o palco encolheu pro tamanho de um iframe.) */

/* TAMPA DO TOPO: esconde a barra da Evolution (nome da mesa, limites, chat, engrenagem).
   Ela repete o que a nossa barra já diz e ainda expõe o nome da casa dentro do produto.
   Opaca e clicável de propósito: fosca deixaria o texto legível, e sem bloquear o clique
   o usuário abriria o chat da casa sem querer. Sair do jogo é pela nossa barra. */
/* DORMENTE — a faixa preta do topo (com o "+18 | Jogue com responsabilidade") saiu do
   index.html a pedido do dono. As regras ficam aqui de propósito: ela também COBRIA os
   11% de cima do iframe, e se um dia o topo da casa precisar sumir de novo é só devolver
   a <div class="iframe-tampa-topo"> — sem remontar o CSS. */
.iframe-tampa-topo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 11%;
  min-height: 40px;
  z-index: 3;
  background: #05070d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Aviso legal na faixa que já estava lá tapando a barra da casa: some a tarja morta
   e o aviso ganha um lugar permanente sobre o jogo, sem custar altura de tela. */
.iframe-tampa-topo { align-items: flex-start; padding-top: 9px; }
.aviso-legal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(154, 176, 214, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 14px;
  user-select: none;
}
@media (max-width: 700px) { .aviso-legal { font-size: 8.5px; letter-spacing: 0.04em; padding: 0 8px; } }

/* TAMPAS DO DINHEIRO: os DOIS números da mesa — SALDO e APOSTA TOTAL.
   Cobrem só o valor, não a ficha: o rótulo fica à mostra de propósito, porque
   "SALDO" não é informação nenhuma e tapar a ficha inteira dava um borrão mais
   chamativo que o número escondido.
   Medidas em fração da MESA (nunca da tela), tiradas das proporções da Evolution.
   Se um dia escapar em algum aparelho, é aqui que se calibra — só estes números. */
.iframe-mascara-saldo {
  position: absolute;
  bottom: 0.8%;
  width: 7.6%;
  height: 2.7%;
  min-width: 62px;
  min-height: 15px;
  display: none;
  backdrop-filter: blur(6px) saturate(0.5);
  -webkit-backdrop-filter: blur(6px) saturate(0.5);
  background: rgba(4, 10, 24, 0.3);
  border-radius: 6px;
  z-index: 4;
  pointer-events: none;
}
.m-saldo  { left: 2.4%; width: 7.0%; }
.m-aposta {
  left: 13.6%;   /* começa depois do ícone de fichas, que a ficha do saldo não tem */
  width: 6.4%;
  min-width: 48px;
}

body.saldo-oculto #view-jogo .iframe-mascara-saldo { display: block; }

/* No celular a Evolution larga as fichas e imprime duas LINHAS de texto no rodapé:
   "Aposta total  R$ 0" em cima, "Saldo  R$ 205" embaixo — e os valores em amarelo são
   miúdos. Uma tampa só, cobrindo as duas linhas inteiras, virava um retângulo grande
   e feio no canto: escondia rótulo, número e um naco de mesa junto.
   Aqui são duas manchinhas, uma em cada número. A altura é em PIXEL porque a linha de
   texto tem altura fixa — não encolhe junto com a proporção da tela. */
@media (max-width: 900px) {
  .iframe-mascara-saldo {
    min-width: 0;
    min-height: 0;
    border-radius: 4px;
    /* quase sem fundo: o que esconde é o borrão, não uma caixa por cima */
    background: rgba(4, 10, 24, 0.12);
    backdrop-filter: blur(5px) saturate(0.35);
    -webkit-backdrop-filter: blur(5px) saturate(0.35);
  }
  .m-saldo  { left: 10.4%; width: 13%; bottom: 2px;  height: 18px; }
  .m-aposta { left: 16.4%; width: 11%; bottom: 19px; height: 17px; }
}

/* Arte de verdade no card: a logo ocupa o palco inteiro, com a mesma reação de hover
   que o emoji tinha (sobe e cresce um tico). Emoji continua valendo pra quem não tem
   logo — o card não precisa saber a diferença. */
.card-jogo-logo {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
}
.card-jogo:hover .card-jogo-logo { transform: translateY(-5px) scale(1.05); }
/* Poster-FOTO da mesa (jpg oficial da Pragmatic) tem canto reto, ao contrario das logos PNG
   transparentes — arredonda so ele pra nao destoar dos outros cards. */
.card-jogo-logo[src$=".jpg"] { border-radius: 14px; }

/* a marca na barra do jogo, do tamanho da linha do texto */
.marca-jogo-logo {
  height: 20px; width: 20px;
  vertical-align: -4px;
  margin-right: 7px;
  display: inline-block;
}
@media (max-width: 560px) { .marca-jogo-logo { height: 17px; width: 17px; vertical-align: -3px; margin-right: 5px; } }

/* CAPA — arte quadrada da casa. Diferente da marca recortada: aqui a imagem PREENCHE
   o palco e ganha cantos, senão ficaria boiando com tarja preta dos dois lados.
   O degradê no pé casa a borda da arte com o fundo do card, pra ela não parecer
   um adesivo colado; sem isso o corte reto brigava com o nome logo abaixo. */
.palco-capa { position: relative; }
.card-jogo-capa {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.card-jogo:hover .card-jogo-capa { transform: scale(1.06); }
/* Arte da Roleta Brasileira Pragmatic e um banner 4:3 cheio de texto — em `contain` virava
   um selo minusculo. Preenche o palco inteiro (cover) mirando a faixa do titulo + roda. */
.card-jogo-capa[src*="roletabrasileira-prag2"] { object-fit: cover; object-position: center 42%; border-radius: 14px; }
.card-jogo-palco.palco-capa { width: 100%; }
/* Celular estreito (2 colunas ~150px): "Roleta Brasileira Pragmatic/Evolution" nao cabe em
   2 linhas e virava "Roleta Brasileira…". Tres linhas so aqui; os cards da fila esticam juntos. */
@media (max-width: 560px) {
  .card-jogo-nome { -webkit-line-clamp: 3; line-clamp: 3; }
}


/* ============================================================================
   HOME NO MONITOR — largura cheia, altura com juízo.

   A primeira tentativa esticava os cards na ALTURA também (o palco era flex e comia
   todo o espaço livre). Numa tela de 1080px de altura isso produzia cards de ~700px:
   a arte virava outdoor e o botão de entrar sumia lá embaixo.

   Largura e altura não são o mesmo problema. Sobra de LARGURA é desperdício — os
   cards ocupam tudo. Sobra de ALTURA é respiro — a arte cresce com a viewport, mas
   com teto, e o que passar disso fica como margem.
   ============================================================================ */
@media (min-width: 900px) {
  .wrap-largo { max-width: min(1680px, 94vw); padding-top: 30px; }

  .destaques {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    justify-content: stretch;
  }

  /* Com 3 cards na fila, as medidas feitas pra 2 ficavam pesadas: arte gigante e
     muito ar sobrando embaixo do nome. */
  .card-jogo-g {
    min-height: clamp(190px, 23vh, 250px);
    padding: 20px 18px 16px;
  }
  /* teto pela altura da janela: cresce em tela grande, não explode em tela alta */
  .card-jogo-g .card-jogo-palco {
    height: clamp(86px, 12vh, 128px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-jogo-g .card-jogo-ico { font-size: clamp(46px, 3.6vw, 68px); }
  .card-jogo-g .card-jogo-logo { width: auto; height: auto; max-width: 86%; max-height: 100%; }
  .card-jogo-g .card-jogo-nome { font-size: clamp(15.5px, 1vw, 19px); margin-bottom: 14px; }
  .card-jogo-g .card-jogo-desc { font-size: clamp(10.5px, 0.7vw, 12px); }
  .card-jogo-g .card-jogo-seta { width: 34px; height: 34px; font-size: 14px; }

  /* a capa preenche a largura do palco; a marca recortada respira */
  .card-jogo-g .palco-capa { align-self: center; width: 100%; max-width: 260px; }
}

/* Telas muito largas: mais que 3 colunas de card gigante vira vitrine de shopping.
   Duas colunas continuam, só que com teto — a partir daí sobra margem, não card. */
@media (min-width: 2000px) {
  .wrap-largo { max-width: 1820px; }
}

/* O jogo pede a tela inteira. O teto de 1100px sobrava margem morta dos dois lados
   num monitor largo — e mesa ao vivo é vídeo: quanto maior, melhor se enxerga. */
@media (min-width: 900px) {
  #view-jogo .jogo-iframe { max-width: none; }
  #view-jogo .sinal-host { max-width: 760px; }
}

/* A logo vira botão de voltar ao início — é onde todo mundo clica por instinto.
   Some o visual de <button> pra ela continuar sendo a marca, não um controle. */
.header-marca {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: opacity .15s ease, transform .12s ease;
}
.header-marca:hover { opacity: 0.82; }
.header-marca:active { transform: translateY(1px); }
.header-marca:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* ============================================================================
   MOLDURA DA MESA (monitor) — o jogo passa a ter um LUGAR, não uma posição.

   Sem moldura, a mesa flutua no meio da tarja preta e muda de tamanho com a janela.
   Isso impede pendurar qualquer coisa em volta: cada resize moveria o alvo.
   Com o palco em 16:9 exato, a moldura encosta no vídeo e o jogo fica previsível, e o
   espaço ao redor vira área utilizável pra painel, histórico ou o que vier.
   ============================================================================ */
.jogo-moldura { display: none; }

@media (min-width: 900px) {
  .jogo-moldura {
    display: block;
    position: absolute;
    inset: 0;
    border: 1px solid rgba(45, 140, 255, 0.34);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(4, 10, 24, 0.9),
                0 18px 60px rgba(0, 0, 0, 0.6),
                0 0 44px rgba(45, 140, 255, 0.13);
    pointer-events: none;   /* é enfeite: o clique é do jogo */
    z-index: 2;
  }

  /* o vídeo encosta na moldura: cantos arredondados nos dois, senão sobra bico */
  .jogo-palco .jogo-iframe { border-radius: 14px; }
  .iframe-tampa-topo { border-radius: 14px 14px 0 0; }
}

/* ============================================================================
   CELULAR — a tela do jogo, revista.

   O erro estava em medir a faixa do topo em PORCENTAGEM. No monitor o palco é
   16:9 e 11% dá 82px, que é o tamanho da barra da Evolution. No celular o palco é
   alto e estreito: os mesmos 11% viravam ~77px de tarja preta sobre uma barra que
   ali tem menos da metade disso. Ficava um vão preto enorme antes do vídeo.

   Aqui as coberturas passam a ser PIXEL — o alvo tem tamanho fixo, não proporcional —
   e cada faixa da nossa interface é aparada, porque no celular tudo o que não é o
   jogo sai da altura dele.
   ============================================================================ */
@media (max-width: 900px) {
  /* a barra da Evolution no celular é bem mais baixa que no monitor */
  .iframe-tampa-topo {
    height: 34px;
    min-height: 0;
    padding-top: 0;
    align-items: center;
  }
  .aviso-legal { font-size: 8px; letter-spacing: 0.03em; padding: 0 6px; }

  /* barra do jogo: nome e saída, nada além disso */
  body.jogando .jogo-barra { padding: 5px 10px; }
  body.jogando .jogo-titulo { font-size: 12px; }
  body.jogando .marca-jogo-logo { height: 15px; width: 15px; margin-right: 4px; }
  body.jogando .btn-voltar { font-size: 12px; padding: 4px 2px; }

  /* faixa da IA: o botão não precisa de 100px de altura pra ser tocável */
  body.jogando .sinal-host { padding: 4px 8px; }
  body.jogando .sinal-ia { min-height: 40px; padding: 4px 8px; border-radius: 10px; }
  body.jogando .sinal-btn { padding: 8px 12px; font-size: 12px; letter-spacing: 0.06em; }
  body.jogando .sinal-etapa { font-size: 9.5px; }
  body.jogando .sinal-chip { padding: 3px 8px; font-size: 11px; }

  /* header em modo jogo: uma linha enxuta */
  body.jogando .header { padding: 5px 10px; }
  body.jogando .header-marca .header-logo-nome { height: 15px; }
  body.jogando .pill-saldo { padding: 5px 8px; }
  body.jogando .pill-saldo strong { font-size: 12px; }
  body.jogando .btn-hd { padding: 6px 10px; }
  body.jogando .header-avatar { padding: 5px 8px; }

  /* sem moldura no celular: borda em volta só rouba pixel do jogo */
  .jogo-moldura { display: none; }
}

/* ============================================================================
   AUTOMAÇÃO — porta na Home e a tela de escolha.

   A Home é a vitrine do que se joga na mão. A automação usa os MESMOS jogos de
   outro jeito, então merece uma entrada própria: mais um card no meio dos jogos
   faria parecer que existe um terceiro jogo chamado "automação".
   ============================================================================ */
.faixa-automacao {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  /* LARGURA LIMITADA E CENTRADA. O `width:100%` sozinho esticava a faixa por todo o
     container da Home, que no monitor vai até 1820px (.wrap-largo) — virava uma barra de
     ponta a ponta. O 100% fica como piso pra telas estreitas; quem manda no monitor é o
     max-width, e o `auto` nas laterais centraliza dentro do wrap. */
  width: 100%;
  max-width: 560px;
  margin: 0 auto 26px;
  padding: 16px 20px;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--texto);
  background: linear-gradient(120deg, rgba(24, 20, 56, 0.92), rgba(9, 16, 34, 0.9));
  border: 1px solid rgba(155, 120, 255, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color .2s ease, transform .14s ease, box-shadow .2s ease;
}
.faixa-automacao:hover {
  border-color: rgba(155, 120, 255, 0.55);
  box-shadow: 0 14px 38px rgba(90, 60, 200, 0.22);
}
.faixa-automacao:active { transform: translateY(1px); }

/* roxo, e não o azul dos jogos nem o dourado da IA: a automação é um MODO,
   e cor própria é o que faz o usuário perceber isso sem ler */
.faixa-automacao::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, #9b78ff, #5a3cc8);
}
.fa-ico {
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 0 12px rgba(155, 120, 255, 0.55));
}
.fa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fa-txt b { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.fa-txt em {
  font-style: normal; font-size: 12px; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fa-seta {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(155, 120, 255, 0.16);
  border: 1px solid rgba(155, 120, 255, 0.4);
  color: #c8b2ff;
  transition: background .18s ease, transform .18s ease;
}
.faixa-automacao:hover .fa-seta { background: rgba(155, 120, 255, 0.3); transform: translateX(3px); }

@media (max-width: 560px) {
  .faixa-automacao { padding: 13px 15px; gap: 11px; margin-bottom: 20px; }
  .fa-ico { font-size: 22px; }
  .fa-txt b { font-size: 13.5px; }
  .fa-txt em { font-size: 11px; }
  .fa-seta { width: 30px; height: 30px; }
}

/* ── card do jogo dentro da automação ── */

/* OPERANDO: o cliente precisa saber, de relance, qual jogo o robô já está tocando */
.card-operando { border-color: rgba(46, 224, 106, 0.5) !important; }
.card-operando::after {
  content: 'OPERANDO';
  position: absolute; top: 14px; left: 14px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px; font-weight: 900; letter-spacing: 0.1em;
  color: #04140b;
  background: linear-gradient(135deg, #6cf09b, var(--verde));
}

/* TRAVADO: o jogo está aberto na mão. Apagado e com cursor de "não dá" — some a
   dúvida antes do clique, que é melhor que um toast depois dele. */
.card-travado {
  opacity: 0.42;
  filter: grayscale(0.5);
  cursor: not-allowed;
}
.card-travado::after {
  content: 'EM USO NA MÃO';
  position: absolute; top: 14px; left: 14px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px; font-weight: 900; letter-spacing: 0.08em;
  color: #1a1206;
  background: linear-gradient(135deg, #ffd76a, #f0a020);
}

/* ── CONFIGURAÇÃO RÁPIDA DA AUTOMAÇÃO ──────────────────────────────────────
   PC: seletor em largura total (com a logo do jogo ao lado) + 4 campos lado a lado.
   Celular (<768px): os mesmos 4 campos em 2×2 e o botão ocupando a linha inteira.
   Um só bloco de regras, com a virada num @media — sem componente separado por tela. */
.auto-cfg {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(14, 26, 52, 0.72), rgba(6, 12, 28, 0.78));
  border: 1px solid rgba(120, 175, 255, 0.18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* SELETOR DO JOGO — lista própria.
   O <select> nativo continua no DOM (guarda o valor), mas escondido: o menu dele é
   desenhado pelo sistema operacional, com fundo branco e destaque azul-claro, e não aceita
   borda, cantos, cor de hover nem z-index. Tudo isso só existe numa lista nossa. */
.auto-drop { position: relative; }
.auto-drop-nativo {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.auto-drop-botao {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto);
  font-size: 15px; font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auto-drop-botao:hover { border-color: rgba(120, 175, 255, 0.36); }
.auto-drop-botao:focus-visible,
.auto-drop.aberto .auto-drop-botao {
  outline: none;
  border-color: rgba(80, 160, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(45, 140, 255, 0.14);
}
.auto-drop-botao:disabled { opacity: .55; cursor: not-allowed; }
.auto-jogo-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.auto-jogo-logo[hidden] { display: none; }
.auto-drop-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-drop-seta { flex-shrink: 0; color: var(--texto-fraco); font-size: 15px; line-height: 1; transition: transform .18s ease; }
.auto-drop.aberto .auto-drop-seta { transform: rotate(180deg); }

/* o menu: mesma largura do campo, por cima de tudo que vem depois */
.auto-drop-lista {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 50;
  margin: 0; padding: 6px;
  list-style: none;
  max-height: 292px; overflow-y: auto;
  border-radius: 13px;
  background: #101a30;
  border: 1px solid rgba(120, 175, 255, 0.28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.auto-drop-lista[hidden] { display: none; }
.auto-drop-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px;
  border-radius: 9px;
  color: rgba(226, 232, 245, 0.9);
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.auto-drop-item img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
/* destaque azul ESCURO — o azul-claro do sistema estourava sobre o tema */
.auto-drop-item:hover,
.auto-drop-item.marcado { background: rgba(45, 140, 255, 0.16); color: #fff; }
.auto-drop-item[aria-selected="true"] { background: rgba(45, 140, 255, 0.24); color: #fff; }

/* PC: os quatro campos numa linha */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.auto-campo { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.auto-campo-largo { margin-bottom: 20px; }
.auto-campo > span {
  font-size: 12.5px; font-weight: 700; color: rgba(226, 232, 245, 0.85);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.auto-dica { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--texto-fraco); }

.auto-money {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(120, 175, 255, 0.2);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auto-money > span { color: var(--texto-fraco); font-weight: 700; font-size: 13.5px; }
.auto-money input {
  flex: 1; min-width: 0; width: 100%;
  background: transparent; border: none; outline: none;
  padding: 14px 0;
  color: #fff; font-size: 15px; font-weight: 700;
  color-scheme: dark;
}
.auto-money input::placeholder { color: var(--texto-fraco); font-weight: 400; }
/* brilho azul no foco — o mesmo do seletor, pra tudo responder igual ao toque */
.auto-money:focus-within {
  border-color: rgba(80, 160, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(45, 140, 255, 0.14);
}
/* abaixo do mínimo da mesa: o campo avisa na hora, sem esperar o clique em Iniciar */
.auto-money.erro,
.auto-money.erro:focus-within {
  border-color: rgba(226, 69, 59, 0.7);
  box-shadow: 0 0 0 3px rgba(226, 69, 59, 0.14);
}
.auto-money.erro input { color: #ff9a92; }
.auto-dica-erro { color: #ff9a92 !important; font-weight: 700; }

/* método do sinal: dois cartões-botão, um marcado */
.auto-fonte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auto-fonte-btn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 13px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto); text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.auto-fonte-btn b { font-size: 14px; font-weight: 800; }
.auto-fonte-btn em { font-style: normal; font-size: 11px; color: var(--texto-fraco); }
.auto-fonte-btn:hover { border-color: rgba(120, 175, 255, 0.42); }
.auto-fonte-btn.on {
  border-color: rgba(23, 201, 100, 0.6);
  background: rgba(23, 201, 100, 0.10);
}
.auto-fonte-btn.on em { color: #7ee2a8; }
.auto-fonte-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .auto-fonte { grid-template-columns: 1fr; } }

/* até onde o bot cobre: três opções curtas, lado a lado até no celular */
.auto-gale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auto-gale-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 8px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.auto-gale-btn b { font-size: 15px; font-weight: 900; letter-spacing: 0.04em; }
.auto-gale-btn em { font-style: normal; font-size: 10.5px; color: var(--texto-fraco); }
.auto-gale-btn:hover { border-color: rgba(120, 175, 255, 0.42); }
.auto-gale-btn.on { border-color: rgba(23, 201, 100, 0.6); background: rgba(23, 201, 100, 0.10); }
.auto-gale-btn.on em { color: #7ee2a8; }
.auto-gale-btn:disabled { opacity: .5; cursor: not-allowed; }

.auto-msg {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255, 170, 40, 0.10);
  border: 1px solid rgba(255, 170, 40, 0.3);
  color: #ffcf8a;
  font-size: 12.5px;
  line-height: 1.45;
}

.auto-iniciar {
  display: block;
  width: min(340px, 100%);
  margin: 0 auto;
  padding: 15px 24px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(120deg, #17c964, #10b5a0 55%, #2d8cff);
  color: #04150c;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(23, 201, 100, 0.26);
  transition: transform .14s ease, box-shadow .2s ease, filter .18s ease;
}
.auto-iniciar:hover { filter: brightness(1.07); box-shadow: 0 18px 42px rgba(23, 201, 100, 0.34); transform: translateY(-1px); }
.auto-iniciar:active { transform: translateY(1px); }
.auto-iniciar:disabled { opacity: .6; cursor: default; transform: none; }
/* operando: o mesmo botão vira PARAR — vermelho, pra não ser lido como "ligar de novo" */
.auto-iniciar-parar {
  background: linear-gradient(120deg, #e2453b, #a82a22);
  color: #fff;
  box-shadow: 0 14px 34px rgba(226, 69, 59, 0.26);
}
.auto-iniciar-parar:hover { box-shadow: 0 18px 42px rgba(226, 69, 59, 0.34); }


/* CELULAR — 2×2 e botão de ponta a ponta. Alvos maiores: no toque, campo apertado erra. */
@media (max-width: 768px) {
  .auto-cfg { padding: 18px 16px 20px; border-radius: 16px; }
  .auto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
  .auto-campo > span { font-size: 12px; }
  .auto-money { padding: 0 12px; }
  .auto-money input { padding: 13px 0; font-size: 15.5px; }
  .auto-drop-botao { padding: 11px 12px; }
  .auto-iniciar { width: 100%; padding: 16px 20px; }
}
@media (max-width: 380px) {
  .auto-grid { grid-template-columns: 1fr; }   /* telas bem estreitas: 2 colunas espremem o valor */
}

/* VITRINE — card só de mostrar (usado na tela de Automação). Sem seta, sem clique e sem
   os efeitos que sugerem interação: cursor de mão e o levantar no hover prometeriam algo
   que o card não faz. */
.card-vitrine { cursor: default; }
.card-vitrine:hover { transform: none; border-color: rgba(120, 175, 255, 0.16); box-shadow: var(--sombra); }
.card-vitrine:hover .card-jogo-ico,
.card-vitrine:hover .card-jogo-logo { transform: none; }
.card-vitrine:hover .card-jogo-brilho { opacity: .55; }
.card-vitrine[disabled] { opacity: 1; }        /* desabilitado é semântica, não desbotado */

/* ── COMO VOCÊ QUER SER CHAMADO (primeiro acesso) ───────────────────────────── */
.apelido-tela {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(3, 6, 14, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: apFade .22s ease both;
}
.apelido-tela[hidden] { display: none !important; }
body.apelido-travado { overflow: hidden; }
@keyframes apFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes apSobe { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.apelido-caixa {
  width: min(420px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 26px 26px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(14, 26, 52, 0.98), rgba(6, 12, 28, 0.99));
  border: 1px solid rgba(120, 175, 255, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  text-align: center;
  animation: apSobe .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
.apelido-marca { height: 34px; width: auto; margin-bottom: 6px; }
.apelido-titulo { margin: 0; font-size: 21px; font-weight: 900; color: var(--texto); }
.apelido-sub { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--texto-fraco); }
.apelido-input {
  width: 100%; padding: 15px 16px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(120, 175, 255, 0.26);
  color: var(--texto); font-size: 17px; font-weight: 700; text-align: center;
  outline: none; color-scheme: dark;
}
.apelido-input:focus { border-color: rgba(80, 160, 255, 0.7); background: rgba(0, 0, 0, 0.42); }
.apelido-erro { margin: 0; font-size: 12.5px; color: #ff9a92; }
.apelido-erro[hidden] { display: none !important; }
.apelido-btn {
  width: 100%; margin-top: 6px;
  padding: 15px 20px; border-radius: 13px; border: none;
  background: linear-gradient(120deg, #17c964, #0f9c4b);
  color: #04150c; font-size: 15.5px; font-weight: 900; cursor: pointer;
  transition: filter .15s ease;
}
.apelido-btn:hover { filter: brightness(1.07); }
.apelido-btn:disabled { opacity: .7; cursor: default; }

@media (max-width: 560px) {
  .apelido-caixa { padding: 26px 20px 22px; }
  .apelido-titulo { font-size: 19px; }
}

/* ── BOLINHA DO BOT ───────────────────────────────────────────────────────────
   Filha direta do <body>, como a tela de carregamento: `.app` e `.header` têm z-index:1 e
   prendem qualquer overlay lá dentro. Aqui fora ela aparece em todas as telas, inclusive
   por cima da mesa em tela cheia. */
.bf {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9500;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.bf[hidden] { display: none !important; }

.bf-bola {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(23, 201, 100, 0.5);
  background: linear-gradient(140deg, rgba(12, 34, 24, 0.96), rgba(6, 14, 28, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px -6px rgba(23, 201, 100, 0.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  order: 2;                       /* a bolinha fica ABAIXO do painel */
  transition: transform .16s ease, box-shadow .2s ease;
}
.bf-bola:hover { transform: scale(1.06); }
.bf-bola:active { transform: scale(0.97); }
.bf-bola-ico { font-size: 25px; line-height: 1; }

/* pulso: diz "estou operando" sem precisar abrir */
.bf-pulso {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(23, 201, 100, 0.55);
  animation: bfPulso 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes bfPulso {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}
.bf-parado .bf-pulso { display: none; }
.bf-parado .bf-bola { border-color: rgba(120, 175, 255, 0.35); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }

/* contador do que aconteceu com o painel fechado */
.bf-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 100px;
  background: #e2453b; color: #fff;
  font-size: 11px; font-weight: 900; line-height: 20px; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@keyframes bfEntra { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.bf-entra .bf-bola { animation: bfEntra .35s cubic-bezier(.2, .9, .3, 1.3) both; }

/* ── painel ─────────────────────────────────────────────────────────────────── */
.bf-painel {
  order: 1;
  width: min(340px, calc(100vw - 36px));
  max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(14, 26, 52, 0.97), rgba(6, 12, 28, 0.98));
  border: 1px solid rgba(120, 175, 255, 0.22);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  animation: bfEntra .28s ease both;
}
.bf-painel[hidden] { display: none !important; }

.bf-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(120, 175, 255, 0.12);
}
.bf-topo b { font-size: 14px; font-weight: 800; }
.bf-vivo {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #17c964; box-shadow: 0 0 8px #17c964;
  animation: bfPisca 1.6s ease-in-out infinite;
}
@keyframes bfPisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bf-parado .bf-vivo { background: #7c8aa5; box-shadow: none; animation: none; }
.bf-fase { font-size: 10.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .06em; }
.bf-min {
  margin-left: auto; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid rgba(120, 175, 255, 0.2);
  background: rgba(255, 255, 255, 0.05); color: var(--texto-suave);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.bf-min:hover { background: rgba(255, 255, 255, 0.1); }

.bf-metricas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(120, 175, 255, 0.1);
}
.bf-metricas > div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 10px;
  background: rgba(6, 12, 28, 0.9);
}
.bf-metricas span { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-fraco); }
.bf-metricas b { font-size: 14px; font-weight: 900; }
.bf-pos { color: #3ddc84; }
.bf-neg { color: #ff8a80; }

.bf-metas { padding: 0 14px; }
.bf-metas:not(:empty) { padding: 12px 14px 4px; }
.bf-meta { margin-bottom: 10px; }
.bf-meta > span { display: block; font-size: 11px; color: var(--texto-fraco); margin-bottom: 5px; }
.bf-meta > span b { color: var(--texto); }
.bf-barra {
  display: block; height: 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.bf-barra u { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.bf-barra u.ok { background: linear-gradient(90deg, #17c964, #3ddc84); }
.bf-barra u.ruim { background: linear-gradient(90deg, #e2453b, #ff8a80); }

.bf-ultimos { display: flex; gap: 4px; padding: 6px 14px 10px; flex-wrap: wrap; }
.bf-ultimos:empty { display: none; }
.bf-bola-res {
  width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  /* a borda salva o preto da roleta, que sumiria no fundo escuro */
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 9.5px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Home: a porta da automação e a da planilha lado a lado. A automação cresce (é a
   principal); a planilha fica compacta pra não competir com ela. */
/* O PAR é que fica centralizado, não cada uma.
   A .faixa-automacao tem `max-width:560px; margin:0 auto` — dentro de um flex, essas margens
   automáticas comem todo o espaço livre e jogavam as duas pras pontas opostas da tela. Aqui
   as margens saem e quem centraliza é a linha. */
.faixa-linha {
  display: flex; gap: 14px; align-items: stretch;
  width: 100%; max-width: 1180px; margin: 0 auto 26px;
}
.faixa-linha .faixa-automacao { margin: 0; max-width: none; flex: 1 1 0; min-width: 0; }
.faixa-linha .faixa-planilha {
  flex: 0 1 300px;
  background: rgba(10, 18, 38, 0.6);
  border-color: rgba(120, 175, 255, 0.2);
}
.faixa-planilha .fa-txt em { opacity: .8; }
/* Aulas segue a mesma receita visual da Planilha (cor neutra, não compete com o
   roxo da Automação) — é mais um atalho de apoio, não um segundo modo de jogo. */
.faixa-linha .faixa-aulas {
  flex: 0 1 300px;
  background: rgba(10, 18, 38, 0.6);
  border-color: rgba(120, 175, 255, 0.2);
}
.faixa-aulas .fa-txt em { opacity: .8; }
/* WhatsApp segue a mesma receita neutra da Planilha/Aulas — é mais um atalho de apoio,
   com o verde da marca só no ícone pra ficar reconhecível sem virar um quarto "modo". */
.faixa-linha .faixa-whatsapp {
  flex: 0 1 300px;
  background: rgba(10, 18, 38, 0.6);
  border-color: rgba(120, 175, 255, 0.2);
}
.faixa-whatsapp .fa-txt em { opacity: .8; }
.faixa-whatsapp .fa-ico { filter: drop-shadow(0 0 4px rgba(37, 211, 102, 0.55)); }
@media (max-width: 780px) {
  /* EMPILHADO, `flex: 1 1 0` passa a valer na ALTURA — foi o que espremeu a Automação
     (base zero) enquanto a Planilha, com base `auto`, ficava do tamanho certo. Em coluna
     as duas voltam a ter a altura do próprio conteúdo. */
  .faixa-linha { flex-direction: column; gap: 12px; }
  .faixa-linha .faixa-automacao,
  .faixa-linha .faixa-planilha,
  .faixa-linha .faixa-aulas,
  .faixa-linha .faixa-whatsapp { flex: 0 0 auto; }
}

/* ── VÍDEO AULAS ──────────────────────────────────────────────────────────── */
.aulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.aula-card {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.aula-card .thumb { aspect-ratio: 16 / 9; width: 100%; background: var(--bg-elevada); display: block; }
/* Aula gravada no CELULAR é retrato: no palco 16/9 ela vira uma tirinha no meio da tela.
   O card ganha formato vertical e o vídeo aparece inteiro. */
.aula-card.aula-vert .thumb { aspect-ratio: 9 / 16; object-fit: contain; background: #05080f; }
.aula-card.aula-vert { max-width: 420px; }
.aula-card .info { padding: 13px 15px; }
.aula-card .info b { display: block; font-size: 14.5px; }
.aula-card .info em { font-style: normal; font-size: 12px; color: var(--texto-suave); }
.aulas-vazio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--texto-fraco);
  padding: 48px 10px;
  font-size: 14px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}

/* ── PLANILHA ─────────────────────────────────────────────────────────────── */
/* LANÇAMENTO MANUAL — fechado por padrão: quem vem ver o resultado é a maioria, quem vem
   lançar abre. Um formulário sempre aberto empurraria os KPIs pra baixo da dobra. */
.plan-manual {
  margin-bottom: 22px; padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10, 18, 38, 0.55);
  border: 1px solid rgba(120, 175, 255, 0.16);
}
.plan-manual summary { cursor: pointer; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-manual summary span { font-size: 11.5px; color: var(--texto-fraco); }
.plan-manual[open] summary { margin-bottom: 14px; }
.plan-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.plan-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan-campo-larga { grid-column: span 2; }
.plan-campo > span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-fraco);
}
.plan-campo input {
  width: 100%; padding: 12px 13px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto); font-size: 14.5px; outline: none; color-scheme: dark;
}
.plan-campo input:focus { border-color: rgba(80, 160, 255, 0.65); }
.plan-campo .auto-drop { width: 100%; }
.plan-campo .auto-drop-botao { width: 100%; }
.plan-campo .auto-drop-lista .auto-drop-item img { width: 22px; height: 22px; }

.plan-select {
  width: 100%; padding: 12px 13px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto); font-size: 14.5px; outline: none; cursor: pointer;
  color-scheme: dark;   /* sem isto o menu nativo abre BRANCO no Windows */
}
.plan-select:focus { border-color: rgba(80, 160, 255, 0.65); }
.plan-campo input[hidden] { display: none !important; }
.plan-campo-larga .plan-select + input { margin-top: 8px; }

.plan-money { display: flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(120, 175, 255, 0.2); }
.plan-money > span { font-size: 13px; color: var(--texto-fraco); flex-shrink: 0; }
.plan-money input { border: 0; background: transparent; padding: 12px 0; }
.plan-money:focus-within { border-color: rgba(80, 160, 255, 0.65); }

.plan-sinal { display: flex; gap: 0; border-radius: 11px; overflow: hidden; border: 1px solid rgba(120, 175, 255, 0.2); }
.plan-sinal button {
  flex: 1; padding: 12px 8px; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.3); color: var(--texto-suave);
  font-size: 13.5px; font-weight: 800;
}
.plan-sinal button.pm-on { background: rgba(23, 201, 100, 0.22); color: #7ee2a8; }
.plan-sinal.pm-perda button.pm-on { background: rgba(226, 69, 59, 0.22); color: #ff9a92; }

.plan-campo-acao { justify-content: flex-end; }
.plan-btn-salvar {
  width: 100%; padding: 13px 18px; border-radius: 11px; border: none;
  background: linear-gradient(120deg, #17c964, #0f9c4b);
  color: #04150c; font-size: 14px; font-weight: 900; cursor: pointer;
}
.plan-btn-salvar:hover { filter: brightness(1.07); }
.plan-btn-salvar:disabled { opacity: .7; cursor: default; }
.plan-msg { margin: 12px 0 0; font-size: 12.5px; }
.plan-msg[hidden] { display: none !important; }
.plan-msg-ok { color: #7ee2a8; }
.plan-msg-erro { color: #ff9a92; }
@media (max-width: 560px) {
  .plan-form { grid-template-columns: 1fr; }
  .plan-campo-larga { grid-column: span 1; }
}

.plan-intro { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--texto-fraco); max-width: 620px; }

.plan-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.plan-kpi {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 14px; border-radius: 14px;
  background: rgba(10, 18, 38, 0.6);
  border: 1px solid rgba(120, 175, 255, 0.16);
}
.pk-rot { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.plan-kpi b { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; }
.pk-sub { font-size: 11px; color: var(--texto-fraco); }
.pk-pos { color: #3ddc84; }
.pk-neg { color: #ff8a80; }

/* GRADE: gráfico à esquerda, sessões à direita. Só a partir de 900px — abaixo disso as
   14 colunas do gráfico e as linhas da lista brigariam pelo mesmo espaço. */
.plan-grade { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) {
  .plan-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; }
}
.plan-bloco { margin-bottom: 24px; min-width: 0; }
.plan-grade .plan-bloco { margin-bottom: 0; }
.plan-lbl {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
}

/* gráfico: rola no eixo X e abre em "hoje" — 14 colunas não cabem num celular */
.plan-chart {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 18px 14px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(120, 175, 255, 0.14);
  overflow-x: auto; min-height: 214px;
}
.pc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; flex: 1 0 34px; }
.pc-v { font-size: 9.5px; font-weight: 800; }
.pc-v.p { color: #3ddc84; } .pc-v.n { color: #ff8a80; } .pc-v.z { color: var(--texto-fraco); }
.pc-bar { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; }
.pc-bar.p { background: linear-gradient(180deg, #3ddc84, #0f9c4b); }
.pc-bar.n { background: linear-gradient(180deg, #ff8a80, #c0332a); }
.pc-d { font-size: 9px; color: var(--texto-fraco); white-space: nowrap; }

/* A lista é uma caixa com teto e rolagem própria: com 60 sessões salvas ela esticaria a
   página até o gráfico virar um detalhe lá em cima. */
.plan-lista {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 420px; overflow-y: auto; padding-right: 2px;
}
.plan-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 40px 22px; border-radius: 16px;
  border: 1px dashed rgba(120, 175, 255, 0.22);
  background: rgba(0, 0, 0, 0.18);
  font-size: 13px; line-height: 1.6; color: var(--texto-fraco);
}
.plan-vazio::before { content: "📈"; font-size: 30px; opacity: .8; }
.plan-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 12px;
  background: rgba(10, 18, 38, 0.55);
  border: 1px solid rgba(120, 175, 255, 0.14);
}
.pr-dia { flex-shrink: 0; font-size: 11.5px; font-weight: 800; color: var(--texto-fraco); }
.pr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-info b { font-size: 13.5px; font-weight: 800; }
.pr-info span { font-size: 11px; color: var(--texto-fraco); }
.pr-val { flex-shrink: 0; font-size: 14px; font-weight: 900; }
.pr-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid transparent; background: transparent;
  color: var(--texto-fraco); font-size: 12px; cursor: pointer;
}
.pr-del:hover { background: rgba(226, 69, 59, 0.18); color: #ff9a92; }

@media (max-width: 560px) {
  .plan-kpis { grid-template-columns: 1fr; gap: 10px; }
  .plan-kpi { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
  .plan-kpi b { margin-left: auto; }
  .pk-sub { flex-basis: 100%; }
  .plan-row { flex-wrap: wrap; }
  .pr-val { margin-left: auto; }
}

/* ── CARTÃO DE ENCERRAMENTO ───────────────────────────────────────────────────
   Fica até o cliente clicar em Fechar. É o desfecho da operação: se ele não vir isto,
   não fica sabendo que bateu a meta. */
.bf-fim {
  margin: 12px 14px 10px; padding: 16px 14px;
  border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 175, 255, 0.22);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: bfEntra .3s ease both;
}
.bf-fim[hidden] { display: none !important; }
.bf-fim-ico { font-size: 30px; line-height: 1.1; }
.bf-fim b { font-size: 15.5px; font-weight: 900; }
.bf-fim span { font-size: 12.5px; color: var(--texto-suave); }
.bf-fim i { font-style: normal; font-size: 11px; color: var(--texto-fraco); margin-top: 2px; }
.bf-fim.ok {
  background: rgba(23, 201, 100, 0.12); border-color: rgba(23, 201, 100, 0.42);
}
.bf-fim.ok b { color: #7ee2a8; }
.bf-fim.ruim {
  background: rgba(226, 69, 59, 0.12); border-color: rgba(226, 69, 59, 0.4);
}
.bf-fim.ruim b { color: #ff9a92; }
.bf-fim-acoes { margin-top: 12px; width: 100%; display: flex; flex-direction: column; gap: 7px; }
.bf-fim-btn.add {
  background: linear-gradient(120deg, #17c964, #0f9c4b);
  border-color: transparent; color: #04150c;
}
.bf-fim-btn.add:hover { filter: brightness(1.07); background: linear-gradient(120deg, #17c964, #0f9c4b); }
.bf-fim-btn:disabled { opacity: .7; cursor: default; }
.bf-fim-btn {
  width: 100%;
  padding: 11px 16px; border-radius: 11px;
  border: 1px solid rgba(120, 175, 255, 0.28);
  background: rgba(255, 255, 255, 0.06); color: var(--texto);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.bf-fim-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(120, 175, 255, 0.5); }
.bf-fim.ok .bf-fim-btn { border-color: rgba(23, 201, 100, 0.45); }
.bf-fim.ok .bf-fim-btn:hover { background: rgba(23, 201, 100, 0.2); }

.bf-aviso {
  margin: 0 14px 10px; padding: 9px 11px; border-radius: 9px;
  background: rgba(255, 170, 40, 0.1); border: 1px solid rgba(255, 170, 40, 0.3);
  color: #ffcf8a; font-size: 11.5px; line-height: 1.4;
}

.bf-diario { padding: 4px 8px 12px; overflow-y: auto; flex: 1; min-height: 0; }
.bf-linha {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 8px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.35; color: var(--texto-suave);
}
.bf-hora { flex-shrink: 0; font-size: 10px; color: var(--texto-fraco); padding-top: 1px; }
.bf-linha.ok     { background: rgba(23, 201, 100, 0.09); color: #9fe9bd; }
.bf-linha.ruim   { background: rgba(226, 69, 59, 0.09); color: #ffb3ad; }
.bf-linha.aposta { background: rgba(45, 140, 255, 0.09); color: #bcd6ff; }
.bf-linha.sinal  { background: rgba(255, 210, 63, 0.09); color: #ffe08a; }
.bf-linha.aviso  { color: #ffcf8a; }

/* celular: painel de ponta a ponta, bolinha um pouco mais alta pra não brigar com o
   polegar nem com a barra do navegador */
@media (max-width: 560px) {
  .bf { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .bf-bola { width: 52px; height: 52px; }
  .bf-bola-ico { font-size: 22px; }
  .bf-painel { width: calc(100vw - 24px); max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-pulso, .bf-vivo { animation: none; }
  .bf-painel, .bf-entra .bf-bola { animation: none; }
}

/* ── MEUS PADRÕES ─────────────────────────────────────────────────────────── */
.automacao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-padroes {
  margin-left: auto;
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(45, 140, 255, 0.10);
  border: 1px solid rgba(120, 175, 255, 0.36);
  color: #cfe0ff;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.btn-padroes:hover { background: rgba(45, 140, 255, 0.18); border-color: rgba(120, 175, 255, 0.6); }
.btn-padroes:active { transform: translateY(1px); }
/* dois gêmeos na mesma barra: só o primeiro empurra pra direita, senão eles se separariam
   nas pontas opostas */
.btn-padroes + .btn-padroes { margin-left: 0; }

.pd-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(3, 6, 14, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pd-overlay[hidden] { display: none !important; }
body.pd-travado { overflow: hidden; }   /* painel aberto não rola a página atrás */

.pd-painel {
  width: min(1040px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(14, 26, 52, 0.96), rgba(6, 12, 28, 0.98));
  border: 1px solid rgba(120, 175, 255, 0.2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.pd-cabeca {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(120, 175, 255, 0.12);
}
.pd-titulo { margin: 0; font-size: 18px; font-weight: 900; color: var(--texto); }
.pd-sub { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--texto-fraco); }
.pd-fechar {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: var(--texto-suave);
  font-size: 15px; cursor: pointer;
}
.pd-fechar:hover { background: rgba(226, 69, 59, 0.18); border-color: rgba(226, 69, 59, 0.5); color: #ff9a92; }

.pd-corpo {
  padding: 18px 22px 24px; overflow-y: auto;
  display: grid; gap: 0 26px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}
.pd-col { min-width: 0; }
/* a coluna das carteiras acompanha a rolagem: montando o 4º padrão, o cliente continua
   vendo as carteiras que já tem */
/* `align-self: stretch` é o que faz o sticky funcionar: com `align-items:start` a área do
   grid teria a altura do conteúdo e não sobraria curso pro elemento deslizar. Quem gruda é
   a section de dentro. */
.pd-col-lado {
  align-self: stretch;
  border-left: 1px solid rgba(120, 175, 255, 0.12);
  padding-left: 24px;
}
/* Grudado E com teto próprio: um elemento sticky mais alto que a janela nunca termina de
   rolar — com 8 carteiras, as últimas ficariam inalcançáveis. O teto vive na section e quem
   rola por dentro é a lista. */
.pd-bloco-carts {
  position: sticky; top: 0; margin-bottom: 0;
  max-height: calc(92vh - 150px);
  display: flex; flex-direction: column;
}
.pd-col-lado .pd-carteiras { overflow-y: auto; min-height: 0; padding-right: 2px; }
/* uma coluna estreita não comporta cards de 280px lado a lado */
.pd-col-lado .pd-carteiras { grid-template-columns: 1fr; }

/* o painel não passa de 1040px: abaixo de ~900 as duas colunas espremem os botões de cor */
@media (max-width: 900px) {
  .pd-corpo { grid-template-columns: 1fr; }
  .pd-col-lado { border-left: 0; padding-left: 0; padding-top: 6px; }
  .pd-bloco-carts { position: static; max-height: none; display: block; }
  .pd-col-lado .pd-carteiras { overflow: visible; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.pd-bloco { margin-bottom: 20px; }
.pd-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-lbl {
  font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 10px;
}
.pd-lbl-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-fraco); }

/* histórico */
.pd-trilha-topo { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; }
.pd-ultimo { font-size: 12.5px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.pd-vivo { color: #3ddc84; font-size: 11px; }
.pd-qtd { margin-left: auto; font-size: 11.5px; color: var(--texto-fraco); }
.pd-trilha {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(120, 175, 255, 0.14);
  min-height: 46px;
  /* o histórico chega com dezenas de resultados: sem teto, ele empurrava o resto do
     formulário pra fora da tela */
  max-height: 132px; overflow-y: auto;
}
.pd-bola {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 900;
  flex-shrink: 0;
}
.pd-bola.pq { width: 19px; height: 19px; font-size: 9.5px; }
/* O preto do DoubleX (#1c1f27) some no fundo do painel, e o branco engole o texto claro.
   Uma borda fina resolve os dois sem inventar cor nova. */
.pd-bola { border: 1px solid rgba(255, 255, 255, 0.16); }
.pd-bola[style*="#eef2f7"], .pd-bola[style*="#eef0f4"] { color: #1c1f27; }

/* botões de cor */
.pd-botoes { display: flex; gap: 9px; flex-wrap: wrap; }
.pd-cbtn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border-radius: 11px;
  border: 1px solid rgba(120, 175, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: var(--texto); font-size: 13px; font-weight: 800;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pd-cbtn i { width: 11px; height: 11px; border-radius: 50%; background: var(--c, #7c8aa5); display: inline-block; }
.pd-cbtn:hover { border-color: rgba(120, 175, 255, 0.5); }
.pd-cbtn.on { border-color: var(--c, var(--azul)); background: color-mix(in srgb, var(--c, #2d8cff) 18%, transparent); }
.pd-cbtn.ghost { color: var(--texto-suave); font-weight: 600; }

/* nota ao lado dos dois botões de previsão — explica por que o terceiro lado não está lá */
.pd-nota {
  display: inline-flex; align-items: center;
  font-size: 11.5px; color: var(--texto-fraco);
  padding-left: 4px;
}

.pd-gatilho {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 11px; padding: 14px;
  min-height: 54px;
  border-radius: 12px;
  border: 1px dashed rgba(120, 175, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
}
.pd-gatilho.vazio::before { content: attr(data-vazio); font-size: 12.5px; color: var(--texto-fraco); }
.pd-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.pd-item b { font-size: 11px; color: var(--dourado); }
.pd-seta { color: var(--texto-fraco); font-size: 13px; }

.pd-taxa {
  margin: 4px 0 16px; padding: 11px 14px; border-radius: 11px;
  font-size: 13px; border: 1px solid;
}
.pd-taxa b { font-size: 16px; }
.pd-taxa.boa   { background: rgba(23, 201, 100, 0.10); border-color: rgba(23, 201, 100, 0.35); color: #7ee2a8; }
.pd-taxa.media { background: rgba(255, 170, 40, 0.10); border-color: rgba(255, 170, 40, 0.32); color: #ffcf8a; }
.pd-taxa.fraca { background: rgba(226, 69, 59, 0.10); border-color: rgba(226, 69, 59, 0.32); color: #ff9a92; }
/* Poucas ocorrências = número bonito que não prova nada. Dizer isso é mais honesto do que
   deixar um 100% de 3 casos passar por padrão bom. */
.pd-poucos { color: #ffcf8a; }

/* salvar */
.pd-salvar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pd-select, .pd-input {
  padding: 12px 13px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(120, 175, 255, 0.2);
  color: var(--texto); font-size: 14px; outline: none;
  color-scheme: dark;
}
.pd-select { min-width: 190px; cursor: pointer; }
.pd-input { flex: 1; min-width: 150px; }
.pd-input[hidden] { display: none; }
.pd-select:focus, .pd-input:focus { border-color: rgba(80, 160, 255, 0.65); }
.pd-btn-salvar {
  padding: 12px 20px; border-radius: 11px; border: none;
  background: linear-gradient(120deg, #17c964, #0f9c4b);
  color: #04150c; font-size: 14px; font-weight: 900; cursor: pointer;
  transition: filter .15s ease;
}
.pd-btn-salvar:hover { filter: brightness(1.07); }

/* carteiras */
.pd-carteiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.pd-vazio { font-size: 13px; color: var(--texto-fraco); margin: 0; }
.pd-cart {
  padding: 15px; border-radius: 14px;
  background: rgba(10, 18, 38, 0.6);
  border: 1px solid rgba(120, 175, 255, 0.16);
}
.pd-cart-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pd-cart-topo b { font-size: 14.5px; }
.pd-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(120, 175, 255, 0.12); color: var(--texto-suave);
}
.pd-melhor {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(255, 210, 63, 0.16); border: 1px solid rgba(255, 210, 63, 0.4); color: #ffd23f;
}
.pd-x {
  margin-left: auto; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: var(--texto-fraco); cursor: pointer; font-size: 12px;
}
.pd-x:hover { background: rgba(226, 69, 59, 0.18); color: #ff9a92; }

.pd-cart-meio { display: flex; align-items: center; gap: 14px; }
/* anel: o gradiente cônico desenha a % sem SVG nem biblioteca */
.pd-anel {
  position: relative; flex-shrink: 0;
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--cor) calc(var(--p) * 1%), rgba(255, 255, 255, 0.07) 0);
}
.pd-anel::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: #0a1226;
  z-index: 0;                 /* o furo fica ATRÁS do número */
}
/* O <b> vinha antes do ::after no DOM e ambos são posicionados — sem z-index, o furo
   pintava por cima e a porcentagem sumia dentro do anel. */
.pd-anel b { position: relative; z-index: 1; font-size: 13px; font-weight: 900; line-height: 1; }
.pd-anel.boa   { --cor: #17c964; } .pd-anel.boa b   { color: #7ee2a8; }
.pd-anel.media { --cor: #ffaa28; } .pd-anel.media b { color: #ffcf8a; }
.pd-anel.fraca { --cor: #e2453b; } .pd-anel.fraca b { color: #ff9a92; }
.pd-anel.vazio { --p: 0; --cor: transparent; } .pd-anel.vazio b { color: var(--texto-fraco); }

.pd-cart-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pd-cart-info > span { font-size: 11.5px; color: var(--texto-fraco); }
.pd-geral { color: var(--texto); font-weight: 800; }
.pd-cart-seqs { display: flex; flex-direction: column; gap: 5px; }
.pd-resumo { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pd-gale { font-size: 9.5px; font-weight: 800; color: var(--dourado); margin-left: 3px; }
.pd-mais { font-size: 10.5px; color: var(--texto-fraco); }

.pd-det { margin-top: 12px; }
.pd-det summary { font-size: 11.5px; color: var(--texto-suave); cursor: pointer; }
.pd-det-linha {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid rgba(120, 175, 255, 0.08);
}

@media (max-width: 768px) {
  .pd-overlay { padding: 0; }
  .pd-painel { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .pd-painel { max-height: 100dvh; height: 100dvh; }
  .pd-linha { grid-template-columns: 1fr; gap: 12px; }
  /* folga embaixo pra a barra do navegador não cobrir o último campo */
  .pd-corpo { padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
  .btn-padroes { margin-left: 0; width: 100%; }
  .pd-salvar { flex-direction: column; }
  .pd-select, .pd-btn-salvar { width: 100%; }
}

/* Voltar no TOPO da automação — era o último elemento da tela, abaixo dos cards.
   A nota do "um jogo por vez" saiu junto: a regra continua valendo no servidor e a tela
   avisa quando ela bate (card travado + mensagem), então o texto fixo era só ruído. */

/* A faixa da automação avisa quando o robô está operando — é o único lugar da Home
   que continua clicável nesse estado, então precisa se destacar em vez de sumir. */
.faixa-operando { border-color: rgba(46, 224, 106, 0.5); }
.faixa-operando .fa-ico { filter: drop-shadow(0 0 12px rgba(46, 224, 106, 0.6)); }
.faixa-operando .fa-txt em::after {
  content: ' · OPERANDO AGORA';
  color: var(--verde);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* tom do Bac Bo: roxo, pra não repetir o azul do Futebol nem o vermelho do DoubleX */
.card-jogo.tom-roxo .card-jogo-palco::before,
.card-jogo.tom-roxo::before { background: radial-gradient(circle at 50% 30%, rgba(155, 120, 255, 0.22), transparent 68%); }
.card-jogo.tom-roxo:hover { border-color: rgba(155, 120, 255, 0.45); }

/* ============================================================================
   TÍTULO "INTELIGÊNCIA ARTIFICIAL" — a assinatura da seção.

   Vira o rótulo do que a casa vende: não é uma lista de jogos, é a IA operando
   neles. Por isso ganha selo, gradiente e um pulso vivo — enquanto o "Outros jogos"
   continua sendo só um título, que é o papel dele.
   ============================================================================ */
.secao-titulo-ia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* selo IA: quadradinho dourado, o mesmo acento das marcas dos jogos */
.ia-selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.04em;
  color: #1a1206;
  background: linear-gradient(135deg, #ffd76a, #f0a020);
  box-shadow: 0 3px 12px rgba(240, 160, 32, 0.35);
  flex-shrink: 0;
}

/* "Artificial" em gradiente: o recorte no texto só pega a segunda palavra, então a
   primeira segura a leitura e a segunda dá o brilho — as duas em gradiente viraria
   ruído em cima do fundo escuro. */
.ia-nome { font-weight: 800; color: var(--texto); white-space: nowrap; }
.ia-nome i {
  font-style: normal;
  background: linear-gradient(100deg, #7fc0ff, #2d8cff 55%, #9b78ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* pulso: prova de vida discreta. Dois anéis, um fixo e um que expande — diz
   "está rodando agora" sem animar nada do tamanho da caixa. */
.ia-pulso {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px rgba(46, 224, 106, 0.8);
  flex-shrink: 0;
}
.ia-pulso::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(46, 224, 106, 0.6);
  animation: iaPulso 2.1s ease-out infinite;
}
@keyframes iaPulso {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

@media (max-width: 560px) {
  .secao-titulo-ia { font-size: 15.5px; gap: 8px; }
  .ia-selo { width: 22px; height: 22px; font-size: 9.5px; border-radius: 7px; }
  .ia-pulso { width: 6px; height: 6px; }
}

/* o traço da seção some quando o título é longo demais pro celular */
@media (max-width: 400px) { .secao-titulo-ia + .secao-linha { display: none; } }

/* ============================================================================
   CONVITE DE INSTALAÇÃO — a caixa que desce do topo.

   Desce por transform, não por `top`: animar posição obriga o navegador a
   recalcular layout a cada quadro e engasga em celular fraco. Transform roda
   na GPU e desce liso mesmo com o jogo carregando atrás.
   ============================================================================ */
.pwa-caixa {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4000;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 12px;
  background: linear-gradient(180deg, rgba(10, 20, 44, 0.98), rgba(6, 12, 28, 0.96));
  border-bottom: 1px solid rgba(45, 140, 255, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateY(-110%);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.1), opacity .3s ease;
}
.pwa-caixa.aberta { transform: translateY(0); opacity: 1; }

/* fio dourado no topo: a mesma assinatura da marca, e separa a caixa da barra do sistema */
.pwa-caixa::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd76a, #f0a020, transparent);
}

.pwa-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}

.pwa-ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 11px;
  filter: drop-shadow(0 3px 10px rgba(45, 140, 255, 0.35));
}

.pwa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-txt b { font-size: 14px; font-weight: 800; color: var(--texto); letter-spacing: 0.01em; }
.pwa-txt em {
  font-style: normal; font-size: 11.5px; color: var(--texto-suave); line-height: 1.35;
}

.pwa-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px; font-weight: 900; letter-spacing: 0.09em;
  color: #04101f;
  background: linear-gradient(135deg, #7fc0ff, var(--azul));
  box-shadow: 0 5px 16px rgba(45, 140, 255, 0.35);
  transition: filter .15s ease, transform .12s ease;
}
.pwa-btn:hover { filter: brightness(1.08); }
.pwa-btn:active { transform: translateY(1px); }
.pwa-btn:disabled { opacity: 0.6; cursor: default; }

/* o "agora não" existe e é alcançável, mas não compete com o instalar */
.pwa-fechar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px; line-height: 1;
  color: var(--texto-fraco);
  background: rgba(255, 255, 255, 0.05);
  transition: color .15s ease, background .15s ease;
}
.pwa-fechar:hover { color: var(--texto); background: rgba(255, 255, 255, 0.1); }

/* ── iOS: passos em vez de botão ──
   O Safari não tem instalação por botão. Prometer um seria mentir; aqui a caixa
   ensina o caminho real, que é o único que existe naquele aparelho. */
.pwa-passos { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.pwa-passo {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--texto-suave); white-space: nowrap;
}
.pwa-passo b { color: var(--texto); font-weight: 700; }
.pwa-passo em { font-style: normal; color: var(--azul); font-size: 13px; }
.pwa-passo i {
  flex-shrink: 0;
  width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-style: normal; font-size: 9.5px; font-weight: 900;
  color: #04101f;
  background: linear-gradient(135deg, #7fc0ff, var(--azul));
}

/* No iPhone os passos ocupam a largura, então o ícone e a caixa encolhem pra caber */
@media (max-width: 560px) {
  .pwa-caixa { padding-left: 10px; padding-right: 10px; }
  .pwa-linha { gap: 10px; }
  .pwa-ico { width: 38px; height: 38px; border-radius: 9px; }
  .pwa-txt b { font-size: 13px; }
  .pwa-txt em { font-size: 10.5px; }
  .pwa-btn { padding: 9px 14px; font-size: 11px; letter-spacing: 0.06em; }
  .pwa-passo { font-size: 10.5px; }
}
/* com os passos do iOS na tela, o texto de apoio sobra — some pra nada quebrar linha */
@media (max-width: 460px) {
  .pwa-caixa:has(.pwa-passos) .pwa-txt em { display: none; }
}

/* ============================================================================
   1. RESPIRO SIMÉTRICO NO MONITOR
   ============================================================================
   O vão embaixo da faixa da IA era enorme e o de cima quase nada. A causa não era
   margem: era `.jogo-area` com align-items:center. Como a mesa é 16:9 e trava em
   1320px de largura, sobrava altura — e o centro jogava TODA essa sobra pra baixo
   da faixa, criando o desequilíbrio.

   Encostando a mesa no topo da área, a sobra vai pro rodapé e o único espaço entre
   os três elementos passa a ser o padding da faixa. Aí basta um número:

     barra do jogo  →  ESPAÇO  →  faixa da IA  →  ESPAÇO  →  mesa

   26px em cima e embaixo (era 8px). Simétrico por construção, não por ajuste fino.
   ============================================================================ */
@media (min-width: 900px) {
  #view-jogo .sinal-host { padding: 26px 12px; }
  #view-jogo .jogo-area { align-items: flex-start; }
}

/* ============================================================================
   2. ROLAGEM NO CELULAR
   ============================================================================
   O que travava: `body.jogando { overflow: hidden }` mais `#view-jogo` em
   position:fixed ocupando a tela inteira. Isso foi feito de propósito pro jogo
   caber sem rolagem — só que a mesa da Evolution no celular é mais alta que a
   tela, e o que passava do rodapé ficava inalcançável.

   Aqui a tela do jogo volta pro fluxo normal da página: a altura cresce com o
   conteúdo e a rolagem funciona como em qualquer página.

   LIMITE HONESTO: o iframe é de outro domínio e captura os toques sobre ele —
   arrastar em cima da mesa mexe na mesa, não na página. Por isso a mesa fica em
   82dvh: sobra faixa de página dos dois lados pra pegar e rolar.
   ============================================================================ */
@media (max-width: 900px) {
  body.jogando { overflow: auto; }

  #view-jogo {
    position: static;
    height: auto;
    min-height: 100dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  #view-jogo .jogo-area { height: auto; display: block; }
  #view-jogo .jogo-palco {
    height: 82dvh;
    min-height: 440px;
    width: 100%;
  }
  #view-jogo .jogo-iframe { height: 100%; }
}

/* ── barra de rolagem discreta ──
   Fina e escura, no tom do app. Existe pra dizer QUE dá pra rolar; quem rola de
   verdade no celular é o dedo. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 140, 255, 0.35) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45, 140, 255, 0.32);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 140, 255, 0.55); background-clip: content-box; }

/* ============================================================================
   DOUBLEX NO MONITOR — operação à esquerda, jogo à direita.

   A ordem no HTML é a do CELULAR (histórico, esteira, tempo, painel), porque lá é
   uma coluna só e essa é a leitura natural. No monitor a hierarquia é outra:
   quem opera fica de um lado e o jogo do outro, com o tempo em cima e o histórico
   embaixo. Em vez de duplicar markup ou reordenar no JS, o grid reposiciona por
   ÁREA — o mesmo HTML, duas composições, e nada pra manter em dobro.
   ============================================================================ */
@media (min-width: 1100px) {
  #view-double .double-wrap {
    display: grid;
    /* painel ~30% e jogo ~70%, como pedido; 340px cabe as três cores lado a lado */
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas:
      "sinal  sinal"
      "painel fase"
      "painel track"
      "painel status"
      "painel hist"
      "painel msg"
      "listas listas";
    grid-template-rows: auto auto auto auto auto auto 1fr;
    column-gap: 22px;
    align-items: start;
  }

  #sinal-host-double              { grid-area: sinal; }
  #view-double .aposta-painel     { grid-area: painel; }
  #view-double .double-fase-box   { grid-area: fase; }
  #view-double .double-track-wrap { grid-area: track; }
  #view-double .double-status     { grid-area: status; }
  #view-double .double-hist-bloco { grid-area: hist; }
  #view-double #double-resultado-msg { grid-area: msg; }
  #view-double .apostas-listas-container { grid-area: listas; margin-top: 18px; }

  /* o painel acompanha a rolagem: apostar nunca exige voltar pro topo */
  #view-double .aposta-painel {
    max-width: none;
    margin: 0;
    padding: 20px;
    gap: 14px;
    position: sticky;
    top: 16px;
  }
  #view-double .cor-btn { height: 78px; }
  #view-double .cor-btn b { font-size: 22px; }

  /* a esteira é o foco: mais alta que no celular, e o tempo logo acima dela */
  #view-double .double-fase-box { margin-bottom: 14px; }
  #view-double .double-track-wrap { margin-bottom: 12px; }
}

/* ── prova de vida da mesa ──
   Discreta de propósito: serve pra dizer que a rodada é real, não pra competir com
   ela. Fica no canto direito, alinhada com a esteira. */
.double-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: -4px 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.double-status-ponto {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px rgba(46, 224, 106, 0.8);
}
/* anel que expande: diz "vivo agora" sem animar tamanho de caixa nenhuma */
.double-status-ponto::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(46, 224, 106, 0.55);
  animation: statusPulso 2.2s ease-out infinite;
}
@keyframes statusPulso {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* mesa fechada ou sem resposta: o ponto tem que contar a verdade, não enfeitar */
.double-status[data-vivo="0"] { color: var(--texto-fraco); }
.double-status[data-vivo="0"] .double-status-ponto {
  background: var(--texto-fraco);
  box-shadow: none;
}
.double-status[data-vivo="0"] .double-status-ponto::after { display: none; }

/* ── rodadas anteriores ── */
.double-hist-bloco { margin-bottom: 16px; }
.double-hist-titulo {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
/* o mais recente é o que importa: entra pela esquerda e chega mais aceso */
.double-historico .double-hist-bola:first-child {
  box-shadow: 0 0 0 2px rgba(45, 140, 255, 0.35);
  animation: histEntra .34s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes histEntra {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (max-width: 1099px) {
  /* no celular o histórico continua onde sempre esteve: em cima, colado na esteira */
  .double-hist-bloco { margin-bottom: 10px; }
  .double-status { margin: -2px 0 10px; font-size: 10px; }
}

/* tom do Dragon Tiger: dourado, o quarto tom — nem o vermelho do DoubleX, nem o
   verde do Futebol, nem o roxo do Bac Bo. Cada jogo tem que ser reconhecível de longe. */
.card-jogo.tom-dourado .card-jogo-palco::before,
.card-jogo.tom-dourado::before { background: radial-gradient(circle at 50% 30%, rgba(240, 196, 25, 0.20), transparent 68%); }
.card-jogo.tom-dourado:hover { border-color: rgba(240, 196, 25, 0.42); }

/* ===== ARTE nos 3 botoes do topo (Automacao / Planilha / Video Aulas) =====
   A ilustracao entra como FUNDO, focada a direita, e um gradiente escuro da esquerda pro
   meio segura a leitura do titulo/subtitulo. O emoji some nesses tres (a arte faz o papel
   dele). Fica no FIM do arquivo de proposito: as variantes .faixa-planilha/.faixa-aulas
   usam `background:` (shorthand) e esta regra, vindo depois com a mesma especificidade,
   e quem manda na camada de imagem. Cards sem arte (WhatsApp) seguem como estavam. */
.faixa-linha #btn-automacao,
.faixa-linha .faixa-planilha,
.faixa-linha .faixa-aulas {
  min-height: 104px;
  background-color: #0a1226;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.faixa-linha #btn-automacao { background-image: linear-gradient(90deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.90) 38%, rgba(9,16,34,.42) 68%, rgba(9,16,34,.10) 100%), url('faixa-automacao.jpg'); }
.faixa-linha .faixa-planilha { background-image: linear-gradient(90deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.90) 38%, rgba(9,16,34,.42) 68%, rgba(9,16,34,.10) 100%), url('faixa-planilha.jpg'); }
.faixa-linha .faixa-aulas    { background-image: linear-gradient(90deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.90) 38%, rgba(9,16,34,.42) 68%, rgba(9,16,34,.10) 100%), url('faixa-aulas.jpg'); }
#btn-automacao .fa-ico, .faixa-planilha .fa-ico, .faixa-aulas .fa-ico { display: none; }
#btn-automacao .fa-txt b, .faixa-planilha .fa-txt b, .faixa-aulas .fa-txt b { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#btn-automacao .fa-txt em, .faixa-planilha .fa-txt em, .faixa-aulas .fa-txt em { text-shadow: 0 1px 8px rgba(0,0,0,.8); opacity: .95; }
@media (max-width: 560px) {
  .faixa-linha #btn-automacao, .faixa-linha .faixa-planilha, .faixa-linha .faixa-aulas { min-height: 92px; }
}
/* WhatsApp ganhou arte propria (roxo neon) — mesma receita dos tres acima. */
.faixa-linha .faixa-whatsapp {
  min-height: 104px;
  background-color: #0b0818;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, rgba(11,8,24,.97) 0%, rgba(11,8,24,.90) 38%, rgba(11,8,24,.42) 68%, rgba(11,8,24,.10) 100%), url('faixa-whatsapp.jpg');
  border-color: rgba(168, 110, 255, 0.35);
}
.faixa-whatsapp .fa-ico { display: none; }
.faixa-whatsapp .fa-txt b { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.faixa-whatsapp .fa-txt em { text-shadow: 0 1px 8px rgba(0,0,0,.8); opacity: .95; }
@media (max-width: 560px) { .faixa-linha .faixa-whatsapp { min-height: 92px; } }

/* ── HOME EM "TILES" (referencia do dono, 03/09/2026) ───────────────────────────────
   Botoes de cima: icone + titulo + subtitulo no canto superior esquerdo, arte preenchendo
   o resto por baixo (degrade vertical), seta no canto inferior direito.
   Cards da IA: tile alto com "atmosfera" de fundo por tom (glows em CSS, sem imagem),
   logo grande centralizada, nome centralizado embaixo, seta no canto inferior direito.
   Escopo por #destaques / .faixa-linha pra ganhar das regras antigas acima. */

/* ---------- botoes de cima ---------- */
.faixa-linha { max-width: none; gap: 18px; }
.faixa-linha .faixa-automacao,
.faixa-linha .faixa-planilha,
.faixa-linha .faixa-aulas,
.faixa-linha .faixa-whatsapp {
  flex: 1 1 0; min-width: 0;
  min-height: 236px;
  align-items: flex-start;
  padding: 18px 18px 60px;
  gap: 12px;
  background-color: #0a1226;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-color: rgba(120, 175, 255, 0.22);
}
.faixa-linha #btn-automacao   { background-image: linear-gradient(180deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.86) 26%, rgba(9,16,34,.30) 52%, rgba(9,16,34,.06) 100%), url('faixa-automacao.jpg'); }
.faixa-linha .faixa-planilha  { background-image: linear-gradient(180deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.86) 26%, rgba(9,16,34,.30) 52%, rgba(9,16,34,.06) 100%), url('faixa-planilha.jpg'); }
.faixa-linha .faixa-aulas     { background-image: linear-gradient(180deg, rgba(9,16,34,.97) 0%, rgba(9,16,34,.86) 26%, rgba(9,16,34,.30) 52%, rgba(9,16,34,.06) 100%), url('faixa-aulas.jpg'); }
.faixa-linha .faixa-whatsapp  { background-image: linear-gradient(180deg, rgba(11,8,24,.97) 0%, rgba(11,8,24,.86) 26%, rgba(11,8,24,.30) 52%, rgba(11,8,24,.06) 100%), url('faixa-whatsapp.jpg'); background-color: #0b0818; }
.faixa-linha #btn-automacao .fa-ico,
.faixa-linha .faixa-planilha .fa-ico,
.faixa-linha .faixa-aulas .fa-ico,
.faixa-linha .faixa-whatsapp .fa-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 13px;
  background: rgba(155, 120, 255, 0.16);
  border: 1px solid rgba(155, 120, 255, 0.38);
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(155, 120, 255, 0.5));
}
.faixa-linha .faixa-whatsapp .fa-ico { background: rgba(37, 211, 102, 0.14); border-color: rgba(37, 211, 102, 0.4); filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.5)); }
.faixa-linha .fa-txt { flex: 1 1 auto; padding-top: 3px; }
.faixa-linha .fa-txt b { font-size: 17px; text-shadow: 0 2px 10px rgba(0,0,0,.75); }
.faixa-linha .fa-txt em { font-size: 12.5px; opacity: .95; white-space: normal; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.faixa-linha .fa-seta { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; background: rgba(9,16,34,.6); backdrop-filter: blur(3px); }
@media (max-width: 780px) {
  .faixa-linha { gap: 12px; }
  .faixa-linha .faixa-automacao,
  .faixa-linha .faixa-planilha,
  .faixa-linha .faixa-aulas,
  .faixa-linha .faixa-whatsapp { flex: 0 0 auto; min-height: 172px; padding: 15px 15px 52px; }
  .faixa-linha .fa-ico { width: 40px; height: 40px; font-size: 21px; }
  .faixa-linha .fa-txt b { font-size: 15.5px; }
  .faixa-linha .fa-txt em { font-size: 11.5px; }
  .faixa-linha .fa-seta { width: 34px; height: 34px; right: 14px; bottom: 14px; }
}

/* ---------- cards da IA ---------- */
#destaques { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px)  { #destaques { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
#destaques .card-jogo,
#destaques .card-jogo-g {
  position: relative;
  flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 258px; height: auto; padding: 22px 16px 18px;
  text-align: center; overflow: hidden; isolation: isolate;
  background: #0a1226;
  border-color: rgba(120, 175, 255, 0.22);
}
#destaques .card-jogo-brilho { display: none; }
/* atmosfera por tom: glow central atras da logo + luzes nos cantos + fundo escuro da cor */
#destaques .card-jogo::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 52% at 50% 42%, var(--atm-glow) 0%, transparent 72%),
    radial-gradient(34% 30% at 10% 92%, var(--atm-canto) 0%, transparent 70%),
    radial-gradient(34% 30% at 92% 8%, var(--atm-canto) 0%, transparent 70%),
    radial-gradient(1.5px 1.5px at 22% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,.28) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 74%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(255,255,255,.2) 50%, transparent 51%),
    linear-gradient(165deg, var(--atm-a) 0%, var(--atm-b) 100%);
}
#destaques .card-jogo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,16,34,0) 0%, rgba(9,16,34,0) 48%, rgba(9,16,34,.55) 76%, rgba(9,16,34,.94) 100%);
}
#destaques .tom-ouro     { --atm-glow: rgba(255,190,60,.34);  --atm-canto: rgba(255,140,30,.22);  --atm-a: #1c1406; --atm-b: #090702; }
#destaques .tom-double   { --atm-glow: rgba(226,69,59,.42);   --atm-canto: rgba(200,30,50,.30);   --atm-a: #200a12; --atm-b: #0a0407; }
#destaques .tom-vermelho { --atm-glow: rgba(226,69,59,.36);   --atm-canto: rgba(200,30,50,.26);   --atm-a: #200a12; --atm-b: #0a0407; }
#destaques .tom-verde    { --atm-glow: rgba(46,224,106,.30);  --atm-canto: rgba(120,200,255,.26); --atm-a: #061a2b; --atm-b: #04120e; }
#destaques .tom-roxo     { --atm-glow: rgba(150,90,255,.40);  --atm-canto: rgba(90,50,200,.30);   --atm-a: #150a2a; --atm-b: #07040f; }
#destaques .tom-dourado  { --atm-glow: rgba(255,170,60,.34);  --atm-canto: rgba(255,110,40,.22);  --atm-a: #1e1206; --atm-b: #0a0602; }
#destaques .tom-azul     { --atm-glow: rgba(45,140,255,.36);  --atm-canto: rgba(30,90,220,.28);   --atm-a: #071a36; --atm-b: #040a18; }
#destaques .card-jogo-palco {
  position: relative; z-index: 2;
  flex: 1 1 auto; width: 100%; height: auto; min-height: 130px; max-width: none;
  margin: 0 0 12px; padding: 0;
  display: flex; align-items: center; justify-content: center; align-self: auto;
}
#destaques .card-jogo-logo { width: auto; height: auto; max-width: 78%; max-height: 138px; filter: drop-shadow(0 14px 28px rgba(0,0,0,.65)); }
#destaques .card-jogo-ico { position: relative; z-index: 2; font-size: 84px; }
#destaques .card-jogo:hover .card-jogo-logo { transform: translateY(-4px) scale(1.05); }
/* capa (foto): vira o fundo inteiro do tile, e o nome fica em cima do degrade */
#destaques .card-jogo-palco.palco-capa { position: absolute; inset: 0; z-index: 0; margin: 0; min-height: 0; }
#destaques .card-jogo-capa { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: 0; }
/* Light Roulette: arte em RETRATO. No tile largo do PC o `cover` corta o topo pela metade
   ("LIGHT" sumia) e escondia a roda — mira mais pra baixo, mostrando a roda inteira. */
@media (min-width: 760px) {
  #destaques .card-jogo-capa[src*="lightroulette"] { object-position: center 64%; }
}
/* a foto tem texto proprio no rodape; escurece mais embaixo pra o NOSSO nome ficar limpo */
#destaques .card-jogo:has(.palco-capa)::after {
  background: linear-gradient(180deg, rgba(9,16,34,0) 0%, rgba(9,16,34,.08) 36%, rgba(9,16,34,.80) 66%, rgba(9,16,34,.98) 100%);
}
#destaques .card-jogo:hover .card-jogo-capa { transform: scale(1.04); }
#destaques .card-jogo-nome {
  position: relative; z-index: 2; margin: 0; width: 100%; max-width: none;
  padding: 0 46px; box-sizing: border-box;
  font-size: 19px; line-height: 1.2; text-align: center;
  -webkit-line-clamp: 2; line-clamp: 2;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
#destaques .card-jogo-seta {
  position: absolute; z-index: 3; right: 16px; bottom: 16px; top: auto; transform: none;
  margin: 0; width: 38px; height: 38px; font-size: 15px;
  background: rgba(9,16,34,.6); backdrop-filter: blur(3px);
}
#destaques .card-jogo-selo { z-index: 3; top: 12px; right: 14px; }
@media (max-width: 560px) {
  /* CELULAR: card compacto. A seta some (o card inteiro ja e o botao) e o nome ganha a
     largura toda — antes a seta reservava uma faixa vazia embaixo e o card virava uma
     torre com um buraco no meio. */
  #destaques { gap: 10px; }
  #destaques .card-jogo, #destaques .card-jogo-g { min-height: 0; padding: 12px 10px 14px; border-radius: 16px; }
  #destaques .card-jogo-palco { min-height: 0; height: 104px; flex: 0 0 auto; margin-bottom: 8px; }
  #destaques .card-jogo-logo { max-height: 100%; max-width: 84%; }
  #destaques .card-jogo-nome { font-size: 14px; padding: 0 2px; line-height: 1.25; }
  #destaques .card-jogo-seta { display: none; }
  #destaques .card-jogo-selo { top: 8px; right: 8px; padding: 2px 7px; font-size: 8px; }
  /* tiles de foto (Automacao, Roleta Pragmatic) precisam de altura propria: a arte e o fundo */
  #destaques .card-jogo:has(.palco-capa) { min-height: 152px; }
  #destaques .card-jogo:has(.palco-capa) .card-jogo-palco { height: auto; }

  /* HEADER: com o selo FREE a linha nao cabia mais e o avatar saia da tela. */
  .header-dir { gap: 6px; }
  .selo-conta, .btn-hd, .header-avatar, .perfil-wrap { flex-shrink: 0; }
  .pill-saldo { flex: 1 1 auto; min-width: 0; padding: 8px 9px; gap: 5px; }
  .pill-saldo strong { font-size: 12.5px; white-space: nowrap; }
  .btn-hd { padding: 8px 10px; font-size: 10.5px; }

  /* card orfao (numero impar) vira uma faixa larga em vez de meia coluna solta */
  #destaques > .card-jogo:last-child:nth-child(odd) { grid-column: 1 / -1; width: 100%; margin: 0; }
  #destaques > .card-jogo:last-child:nth-child(odd) .card-jogo-palco { height: 92px; }
}

/* ===== MENU RODAPÉ =====
   Bottom nav fixo estilo app, substitui os 4 banners da Home (.faixa-linha). Os botões
   antigos (#btn-automacao, #btn-planilha-home, #btn-aulas-home, #btn-whatsapp-home)
   continuam no DOM — só a faixa visual some — porque o app.js ainda os localiza por id. */
/* SÓ NO CELULAR (≤780px, mesmo corte em que a faixa empilha). No monitor os botões
   de cima continuam como estavam e a barra do rodapé nem aparece. */
@media (max-width: 780px) {
  .faixa-linha { display: none; }
  /* espaço pro conteúdo não ficar escondido atrás da barra flutuante */
  .app { padding-bottom: 104px; }
}
@media (min-width: 781px) {
  .menu-rodape { display: none !important; }
}

.menu-rodape {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 560px);
  z-index: 3500; /* abaixo do toast e dos overlays (padrões, apelido, tela de carregamento — 9000+), acima do conteúdo normal */
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 30px;
  background: rgba(11, 20, 40, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--sombra-forte);
  padding: 8px 6px;
}

.menu-rodape-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.55);
  -webkit-tap-highlight-color: transparent;
}

.menu-rodape-item svg { width: 22px; height: 22px; }

.menu-rodape-item span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

.menu-rodape-item.ativo {
  color: var(--azul);
}

/* ===== SELO "CONTA FREE" (na saudação, embaixo do nome) =====
   Dourado, no lugar onde antes ficava "Escolha um jogo para começar". */
.saudacao-selos { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.saudacao-selos .selo-conta { margin-top: 0; }

/* mini card "Vagas PRO": teaser do plano pago que ainda não existe. Sem clique (é aviso,
   não botão) — vira botão no dia em que houver pra onde levar. */
.mini-card-pro {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(150, 90, 255, 0.20), rgba(45, 140, 255, 0.12));
  border: 1px solid rgba(150, 120, 255, 0.42);
  box-shadow: inset 0 0 16px rgba(150, 90, 255, 0.10);
}
.mcp-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px;
  background: rgba(150, 90, 255, 0.20);
  border: 1px solid rgba(180, 150, 255, 0.45);
  color: #c8b2ff; font-size: 12px;
}
.mcp-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.mcp-txt b { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #d9caff; }
.mcp-txt em { font-style: normal; font-size: 10.5px; color: var(--texto-suave); }
@media (max-width: 700px) {
  .mini-card-pro { padding: 6px 12px 6px 9px; gap: 8px; }
  .mcp-ico { width: 24px; height: 24px; font-size: 11px; }
  .mcp-txt b { font-size: 10.5px; }
  .mcp-txt em { font-size: 10px; }
}
.selo-conta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.16), rgba(255, 160, 40, 0.10));
  border: 1px solid rgba(255, 210, 63, 0.42);
  box-shadow: inset 0 0 14px rgba(255, 210, 63, 0.08);
  color: #ffd23f;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.selo-conta b { font-weight: 900; letter-spacing: 0.14em; }
.selo-conta-ico { font-size: 9px; opacity: .9; }
@media (max-width: 700px) {
  .selo-conta { padding: 6px 11px; font-size: 10px; gap: 5px; }
  .selo-conta-ico { font-size: 8.5px; }
}

/* ── BALÃO DE SUPORTE (JivoSite) ──────────────────────────────────────────────
   O widget do Jivo se desenha no MESMO canto da bolinha do robô, então ele fica
   escondido e só aparece quando o cliente clica no nosso balão (ver suporte.js).
   `jdiv` é a raiz que o script do Jivo cria no <body>. */
body:not(.jivo-aberto) jdiv { display: none !important; }

.sup {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9400;                  /* abaixo da bolinha do robô (9500), acima do resto */
  display: flex; align-items: center; gap: 10px;
  transition: bottom .22s ease;
}
.sup[hidden] { display: none !important; }
/* robô operando: o balão sobe pra não sentar em cima da bolinha dele */
body.com-bot-flut .sup { bottom: 88px; }

.sup-bola {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(45, 140, 255, 0.55);
  background: linear-gradient(140deg, rgba(12, 30, 62, 0.96), rgba(6, 14, 28, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px -6px rgba(45, 140, 255, 0.65);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s ease;
}
.sup-bola:hover { transform: scale(1.06); }
.sup-bola:active { transform: scale(0.97); }
.sup-bola svg { width: 26px; height: 26px; stroke: #8fc4ff; fill: none; stroke-width: 1.8; }
.sup-ponto {
  position: absolute; top: -2px; right: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #2ee06a; border: 2px solid #050b1a;
}
.sup-eti {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #cfe2ff;
  background: rgba(8, 18, 38, 0.92);
  border: 1px solid rgba(45, 140, 255, 0.35);
  padding: 9px 13px; border-radius: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* celular: sem a etiqueta (rouba espaço) e ACIMA do menu de baixo, que é fixo no rodapé */
@media (max-width: 560px) {
  .sup { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.com-bot-flut .sup { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .sup-eti { display: none; }
  .sup-bola { width: 52px; height: 52px; }
  .sup-bola svg { width: 23px; height: 23px; }
}