/* ==========================================================================
   HELIX GOLD — TEMA DE HALLOWEEN
   --------------------------------------------------------------------------
   Skin sazonal comutável. TUDO aqui está trancado atrás de
   html[data-tema="halloween"], então este arquivo é 100% inerte enquanto o
   tema estiver desligado — pode ficar carregado o ano inteiro sem efeito.

   Liga/desliga:  Admin > Site > Tema   (grava public.tema no banco)
   ou direto:     PUT /api/admin/config {"public":{"tema":"halloween"}}

   A paleta base espelha o modelo do helixdehalloween.fun (noite roxa +
   sangue), com a abóbora como cor de ação no lugar do dourado da marca.
   Para ficar idêntico à referência (vermelho como cor principal), basta
   trocar --hw-acao por var(--hw-sangue-vivo) no bloco de variáveis.
   ========================================================================== */

html[data-tema="halloween"] {
  /* ── Paleta do tema ── */
  --hw-noite: #0e061e; /* roxo-noite, fundo base       */
  --hw-roxo: #1b0733; /* roxo profundo, superfícies   */
  --hw-roxo-claro: #2d1152; /* bordas e realces             */
  --hw-sangue: #240000; /* vinho escuro, topo do fundo  */
  --hw-sangue-vivo: #ff1414; /* vermelho da referência       */
  --hw-abobora: #ff7518; /* abóbora — cor de ação        */
  --hw-abobora-clara: #ffa23c;
  --hw-abobora-escura: #d2540a;
  --hw-veneno: #39d98a; /* verde poção — sucesso        */
  --hw-osso: #f5e9ff; /* texto principal              */
  --hw-fantasma: #c3aedb; /* texto secundário             */
  --hw-acao: var(--hw-abobora);

  /* ── Reescreve as variáveis do sistema (css/style.css) ── */
  --pink: var(--hw-acao);
  --pink-light: var(--hw-abobora-clara);
  --pink-dark: var(--hw-abobora-escura);
  --green: var(--hw-veneno);
  --green-dark: #12b23f;
  --red: var(--hw-sangue-vivo);
  --orange: var(--hw-abobora);
  --blue: #8b5cf6;

  /* --dark é COR DE TEXTO na maior parte do style.css: vira claro.
     Os dois lugares em que ele é fundo (.footer, .btn-dark) estão
     corrigidos explicitamente mais abaixo. */
  --dark: var(--hw-osso);
  --dark-mid: var(--hw-fantasma);

  --card-bg: rgba(27, 7, 51, 0.82);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 16px 48px rgba(255, 117, 24, 0.22);

  /* Tinta do texto das telas montadas por JS. Uma variável só troca o texto
     inteiro (títulos, rótulos e as versões translúcidas). */
  --ink: var(--hw-osso);
  --ink-rgb: 245, 233, 255;
  /* Bordas, halos e fundos suaves acompanham a abóbora. */
  --pink-rgb: 255, 117, 24;

  /* Superfícies das telas montadas por JS (login, cadastro, painel, jogo).
     Eram brancos fixos dentro dos <style> desses arquivos — hoje passam
     por estas variáveis. */
  /* Fundo do campo em FOCO: no claro era azul-claro (#eff4ff) e o texto
     branco do tema sumia. No tema fica um roxo escuro, texto legível. */
  --surface-focus: rgba(60, 24, 105, 0.75);
  --surface-branco: rgba(27, 7, 51, 0.9);
  --surface-azulado: rgba(45, 17, 82, 0.55);
  --surface-azulado2: var(--hw-noite);
  --surface-cinza: rgba(255, 255, 255, 0.06);
  --surface-creme: rgba(45, 17, 82, 0.5);
  /* Tintas semânticas: mesma leitura (verde/âmbar/vermelho), mas
     translúcidas para funcionarem sobre o fundo escuro. */
  --tint-verde: rgba(57, 217, 138, 0.14);
  --tint-ambar: rgba(255, 162, 60, 0.15);
  --tint-vermelho: rgba(255, 20, 20, 0.14);

  color-scheme: dark;
  /* Fundo: a cena da vila assombrada (images/hw-fundo.webp) fixa, com um véu
     escuro por cima que é quase transparente no topo (deixa o cenário
     aparecer no hero) e vira quase sólido embaixo (dá legibilidade às seções
     de conteúdo). É o que dá a imersão do modelo helixhalloween.fun.
     A camada de decoração (#hw-fundo, z-index:-1) fica ENTRE este fundo e o
     conteúdo, então morcegos/abóboras aparecem sobre o cenário. */
  background:
    linear-gradient(
      180deg,
      rgba(10, 6, 18, 0.35) 0%,
      rgba(10, 6, 18, 0.68) 42%,
      rgba(10, 6, 18, 0.92) 100%
    ),
    url("../images/hw-fundo.webp") center top / cover no-repeat,
    var(--hw-noite);
  background-attachment: fixed, fixed, fixed;
}

html[data-tema="halloween"] body {
  background: transparent;
  color: var(--hw-osso);
}

/* ─── Superfícies claras → escuras ────────────────────────────────────────
   Cada seletor abaixo tinha fundo branco/creme fixo no style.css. */
html[data-tema="halloween"] :is(.card, .auth-card, .modal-box, .resultado-box) {
  background: linear-gradient(
    160deg,
    rgba(45, 17, 82, 0.92) 0%,
    rgba(14, 6, 30, 0.94) 100%
  );
  border: 1px solid rgba(255, 117, 24, 0.16);
  color: var(--hw-osso);
}

html[data-tema="halloween"] .navbar {
  background: rgba(14, 6, 30, 0.92);
  border-bottom: 1px solid rgba(255, 117, 24, 0.18);
  backdrop-filter: blur(10px);
}

html[data-tema="halloween"] :is(.tx-item, .notif-bubble, #lnd-live-popup) {
  background: rgba(27, 7, 51, 0.9);
  border: 1px solid rgba(255, 117, 24, 0.14);
  color: var(--hw-osso);
}

html[data-tema="halloween"] .form-input {
  background: rgba(9, 4, 20, 0.85);
  border-color: rgba(255, 117, 24, 0.28);
  color: var(--hw-osso);
}

/* Autofill do Chrome: por padrão ele pinta o campo de azul/branco e escurece
   o texto — no tema noturno isso deixava o texto ilegível. Forçamos texto
   claro e um "fundo" escuro (via box-shadow inset, único jeito de vencer o
   estilo do autofill). Cobre todos os campos das telas montadas por JS. */
html[data-tema="halloween"] :is(.form-input, .reg-input, .lgn-input, input, textarea):-webkit-autofill,
html[data-tema="halloween"] :is(.form-input, .reg-input, .lgn-input, input, textarea):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hw-osso);
  caret-color: var(--hw-osso);
  -webkit-box-shadow: 0 0 0 1000px rgba(60, 24, 105, 0.95) inset;
  transition: background-color 9999s ease-in-out 0s;
}
html[data-tema="halloween"] .form-input::placeholder {
  color: rgba(195, 174, 219, 0.55);
}
html[data-tema="halloween"] .form-input:focus {
  border-color: var(--hw-abobora);
  box-shadow: 0 0 0 3px rgba(255, 117, 24, 0.18);
}

html[data-tema="halloween"] :is(.pill-orange, .tx-icon.saque, .badge-orange) {
  background: rgba(255, 117, 24, 0.14);
  color: var(--hw-abobora-clara);
}

html[data-tema="halloween"] :is(.hero-tag, .test-section, .pills-row .pill) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--hw-osso);
}

html[data-tema="halloween"] .global-loading {
  background: rgba(14, 6, 30, 0.82);
}

html[data-tema="halloween"] .blob {
  background: rgba(255, 117, 24, 0.12);
}

html[data-tema="halloween"] .lnd-how-card:hover {
  background: rgba(45, 17, 82, 0.95);
}

/* ─── Feed "pagamentos ao vivo" ───────────────────────────────────────────
   Os cards herdavam --lnd-* (que o tema já reescreve), mas o avatar e a
   estrela tinham cor fixa no HTML e a legenda do horário era um cinza quase
   preto — sumia na noite roxa. Agora tudo passa por aqui. */
html[data-tema="halloween"] .lnd-feed-header {
  color: var(--hw-abobora-clara);
  text-shadow: 0 0 12px rgba(255, 117, 24, 0.45);
}
html[data-tema="halloween"] .lnd-win-card {
  background: rgba(26, 11, 46, 0.78);
  border-color: rgba(255, 117, 24, 0.22);
  border-left-color: var(--hw-abobora);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
html[data-tema="halloween"] .lnd-win-card:hover {
  border-left-color: var(--hw-abobora-clara);
  box-shadow: 0 12px 38px rgba(255, 117, 24, 0.3);
}
html[data-tema="halloween"] .lnd-win-avatar {
  background: linear-gradient(135deg, #ff8a2c, #c2410c);
  box-shadow: 0 0 16px rgba(255, 117, 24, 0.45);
}
html[data-tema="halloween"] .lnd-win-name {
  color: rgba(245, 233, 255, 0.66);
}
html[data-tema="halloween"] .lnd-win-amount {
  text-shadow: 0 0 14px rgba(255, 117, 24, 0.45);
}
html[data-tema="halloween"] .lnd-win-label {
  color: rgba(245, 233, 255, 0.42);
}
html[data-tema="halloween"] .lnd-win-star {
  color: var(--hw-abobora-clara);
  filter: drop-shadow(0 0 6px rgba(255, 162, 60, 0.6));
}
/* No tema a estrela vira abóbora (ver js/landing.js). O brilho por baixo é o
   que evita o emoji parecer colado no card. */
.lnd-win-abobora {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 117, 24, 0.55));
}

/* O popup de ganhos do celular (#lnd-live-popup) já é tematizado mais abaixo,
   junto com o popup do painel — procure por "Popups de prova social". */

/* ─── Depoimentos ─────────────────────────────────────────────────────────
   O CSS base foi desenhado para fundo claro (texto quase preto, aspas e
   sombras escuras). No tema, tudo isso some contra a noite roxa — aqui vai a
   versão escura, mantendo a mesma estrutura. */
html[data-tema="halloween"] .lnd-test {
  background: transparent;
}
html[data-tema="halloween"] .lnd-test-card {
  background: rgba(26, 11, 46, 0.72);
  border-color: rgba(255, 117, 24, 0.18);
  backdrop-filter: blur(6px);
}
html[data-tema="halloween"] .lnd-test-card::before {
  color: rgba(255, 117, 24, 0.14); /* aspas decorativas */
}
html[data-tema="halloween"] .lnd-test-card:hover {
  border-color: rgba(255, 117, 24, 0.45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
html[data-tema="halloween"] .lnd-test-text {
  color: rgba(245, 233, 255, 0.78);
  font-style: italic;
}
html[data-tema="halloween"] .lnd-test-name {
  color: #f5e9ff;
}
html[data-tema="halloween"] .lnd-test-since {
  color: rgba(245, 233, 255, 0.5);
}
html[data-tema="halloween"] .lnd-test-stars {
  color: #fbbf24;
}

/* .footer e .btn-dark usavam --dark como FUNDO — agora seria texto claro
   sobre claro. Corrigido para o preto da referência. */
html[data-tema="halloween"] .footer {
  background: #000;
  color: rgba(245, 233, 255, 0.75);
  border-top: 1px solid rgba(255, 117, 24, 0.2);
}
html[data-tema="halloween"] .btn-dark {
  background: #000;
  color: var(--hw-abobora-clara);
  border: 1px solid rgba(255, 117, 24, 0.35);
}

/* ─── Brilho de abóbora nos elementos de ação ─────────────────────────── */
html[data-tema="halloween"] .btn-primary {
  background: linear-gradient(
    135deg,
    var(--hw-abobora) 0%,
    var(--hw-abobora-clara) 100%
  );
  color: #1a0800;
  box-shadow: 0 6px 22px rgba(255, 117, 24, 0.35);
}
html[data-tema="halloween"] .btn-primary:hover {
  box-shadow: 0 10px 30px rgba(255, 117, 24, 0.5);
}
html[data-tema="halloween"] :is(.lnd-cta-btn, .quick-btn.active) {
  box-shadow: 0 6px 24px rgba(255, 117, 24, 0.32);
}

/* Títulos com um leve halo de vela */
html[data-tema="halloween"] :is(.hero-title, .lnd-title, .brand-name) {
  text-shadow: 0 0 22px rgba(255, 117, 24, 0.28);
}

/* ─── Landing ──────────────────────────────────────────────────────────
   A landing (#page-landing / .lnd-*) tem o próprio conjunto de variáveis,
   separado do resto do site. Sem reescrevê-las, ela continuaria clara e
   dourada enquanto o restante já estava escuro. */
html[data-tema="halloween"] {
  --lnd-bg: var(--hw-noite);
  --lnd-surface: rgba(27, 7, 51, 0.88);
  --lnd-surface2: rgba(45, 17, 82, 0.72);
  --lnd-blue: var(--hw-abobora);
  --lnd-blue-d: var(--hw-abobora-escura);
  --lnd-blue-l: var(--hw-abobora-clara);
  --lnd-text: var(--hw-osso);
  --lnd-muted: rgba(245, 233, 255, 0.62);
  --lnd-border: rgba(255, 117, 24, 0.18);
  /* --lnd-green é apelido de --lnd-blue no tema padrão; mantemos o apelido
     para que os componentes "verdes" também fiquem cor de abóbora. */
  --lnd-green: var(--hw-abobora);
  --lnd-green-d: var(--hw-abobora-escura);
}

/* Deixa o gradiente do <html> e a decoração aparecerem por baixo da
   landing (que por padrão pinta um fundo sólido em cima de tudo). */
html[data-tema="halloween"] #page-landing {
  background: transparent;
}

html[data-tema="halloween"] .lnd-nav {
  background: rgba(14, 6, 30, 0.88);
}

/* .lnd-footer usa var(--lnd-text) como FUNDO (o texto dele é branco).
   Como --lnd-text virou claro no tema, o rodapé ficaria branco no branco. */
html[data-tema="halloween"] .lnd-footer {
  background: #000;
  border-top: 1px solid rgba(255, 117, 24, 0.2);
}

/* Tinta escura sobre a abóbora: lê melhor que branco (2,7:1 → 7,4:1)
   e é a combinação clássica do Halloween. */
html[data-tema="halloween"] :is(.lnd-cta-btn, .lnd-cta-sm) {
  color: #1a0800;
}

/* ─── Superfícies de vidro (branco translúcido) ────────────────────────
   Estes três são cartões/barras com branco a ~90% de opacidade, escritos
   direto no <style> das telas. Translúcidos demais para virar variável sem
   mudar o tema padrão, então são trocados aqui. */
html[data-tema="halloween"] .reg-wrap {
  background: rgba(27, 7, 51, 0.92);
  border: 1px solid rgba(255, 117, 24, 0.16);
}
html[data-tema="halloween"] .pnl-header {
  background: rgba(14, 6, 30, 0.9);
}
html[data-tema="halloween"] .pnl-bottom-nav {
  background: rgba(14, 6, 30, 0.94);
}
/* Fundo da PÁGINA do painel: era #edf3ff (quase branco) no .pnl-root — por
   isso o painel inteiro ficava claro. Passa a ser a vila assombrada, como as
   demais telas. --pnl-surface (branco) também vira escuro para os cartões. */
html[data-tema="halloween"] {
  --pnl-surface: rgba(27, 7, 51, 0.9);
  /* Texto de sucesso/aviso claro para ler sobre os cartões escuros. */
  --pnl-ok: #6ee7a0;
  --pnl-warn: #ffb15c;
}
html[data-tema="halloween"] .pnl-root {
  background:
    linear-gradient(
      180deg,
      rgba(14, 6, 30, 0.82) 0%,
      rgba(14, 6, 30, 0.92) 100%
    ),
    url("../images/hw-fundo.webp") center / cover no-repeat !important;
}
/* Chip "ALVO Meta" era amarelo-claro (#fef9c3) com texto laranja — no tema
   vira âmbar escuro para o texto claro ler. */
html[data-tema="halloween"] .pnl-chip-gold {
  background: rgba(255, 117, 24, 0.16);
  border-color: rgba(255, 117, 24, 0.32);
}

/* Login e cadastro: deixa a vila assombrada do <html> aparecer atrás (como
   no modelo), só com um leve brilho de abóbora nos cantos. Sem isto, o
   gradiente da página cobriria a imagem de fundo. */
html[data-tema="halloween"] :is(#page-cadastro.active, #page-login.active) {
  background:
    radial-gradient(
      1200px 500px at 10% -5%,
      rgba(255, 117, 24, 0.12),
      transparent 60%
    ),
    radial-gradient(
      900px 480px at 100% 0%,
      rgba(255, 20, 20, 0.1),
      transparent 58%
    );
}

/* ─── Popups de prova social no tema ──────────────────────────────────────
   Dois popups: o "ao vivo" da landing no mobile (#lnd-live-popup, dourado e
   com nome escuro por padrão — some no fundo noturno) e o do painel
   (#pnl-social-popup). Ambos ganham cartão roxo, borda/brilho de abóbora e
   texto claro, ficando bem visíveis. */

/* Popup ao vivo da landing (mobile) */
html[data-tema="halloween"] #lnd-live-popup {
  background: rgba(27, 7, 51, 0.97);
  border: 1px solid rgba(255, 117, 24, 0.32);
  border-left: 4px solid var(--hw-abobora);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 117, 24, 0.18);
}
html[data-tema="halloween"] #lnd-live-popup .lp-avatar {
  color: #1a0800; /* letra escura sobre a abóbora (fundo vem inline por var) */
}
html[data-tema="halloween"] #lnd-live-popup .lp-name {
  color: var(--hw-osso);
  font-size: 14px;
  font-weight: 700;
}
html[data-tema="halloween"] #lnd-live-popup .lp-time {
  color: rgba(245, 233, 255, 0.55);
}
html[data-tema="halloween"] #lnd-live-popup .lp-close {
  color: rgba(245, 233, 255, 0.5);
}

/* ─── Promoção em destaque ────────────────────────────────────────────────
   A arte já é escura; aqui só trocamos a moldura e o brilho para casar com a
   noite roxa, sem mexer na imagem em si. */
html[data-tema="halloween"] .lnd-promo {
  background: transparent;
}
html[data-tema="halloween"] .lnd-promo-link {
  border-color: rgba(255, 117, 24, 0.35);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(255, 117, 24, 0.16);
}
html[data-tema="halloween"] .lnd-promo-link:hover {
  border-color: rgba(255, 117, 24, 0.6);
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.65),
    0 0 34px rgba(255, 117, 24, 0.3);
}
html[data-tema="halloween"] .lnd-promo-cta {
  color: var(--hw-abobora-clara);
}

/* ─── Termos de Uso ───────────────────────────────────────────────────────
   O documento herda as variáveis --lnd-* (já temáticas). Aqui só entram os
   valores que estavam fixos para fundo claro. */
html[data-tema="halloween"] .trm {
  background: transparent;
}
html[data-tema="halloween"] .trm-intro,
html[data-tema="halloween"] .trm-rodape-aviso {
  background: rgba(26, 11, 46, 0.72);
  border-color: rgba(255, 117, 24, 0.2);
  backdrop-filter: blur(6px);
}
html[data-tema="halloween"] .trm-box code {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hw-abobora-clara);
}

/* ─── Modal de bônus de boas-vindas ───────────────────────────────────────
   O card usava var(--dark) como FUNDO, e no tema essa variável é clara (no
   resto do CSS ela é cor de texto) — o cartão saía esbranquiçado, com o
   "Oferta exclusiva" laranja sumindo por cima. Agora é noite roxa com brilho
   de abóbora, e o texto do botão volta a ser escuro sobre laranja. */
html[data-tema="halloween"] .bonus-card {
  background: linear-gradient(
    160deg,
    #2d1152 0%,
    #1b0733 55%,
    #0e061e 100%
  );
  border-color: rgba(255, 117, 24, 0.55);
  box-shadow:
    0 0 60px rgba(255, 117, 24, 0.28),
    0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
html[data-tema="halloween"] .bonus-cta {
  background: linear-gradient(
    135deg,
    var(--hw-abobora),
    var(--hw-abobora-clara)
  );
  color: #1a0800; /* escuro sobre a abóbora: é o que dá contraste */
}

/* Popup de saques/depósitos do painel */
html[data-tema="halloween"] #pnl-social-popup {
  background: rgba(27, 7, 51, 0.96);
  border: 1px solid rgba(255, 117, 24, 0.35);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 117, 24, 0.16);
}
html[data-tema="halloween"] #pnl-social-popup .psp-verbo {
  color: rgba(245, 233, 255, 0.6);
}

/* ─── Camadas de decoração (montadas por js/tema.js) ──────────────────── */
#hw-fundo,
#hw-frente {
  position: fixed;
  inset: 0;
  pointer-events: none; /* nunca rouba clique */
  overflow: hidden;
  contain: strict;
}
#hw-fundo {
  z-index: -1;
}
#hw-frente {
  /* Abaixo dos cabeçalhos/navbars (z-index:100) para nunca cobrir a logo,
     o saldo ou os menus — mas acima do conteúdo comum. */
  z-index: 90;
}

.hw-item {
  position: absolute;
  line-height: 1;
  user-select: none;
  will-change: transform;
}

/* Morcegos cruzando a tela */
.hw-morcego {
  animation: hw-voar linear infinite;
}
@keyframes hw-voar {
  from {
    transform: translateX(-12vw) translateY(0) rotate(-6deg);
  }
  50% {
    transform: translateX(50vw) translateY(-26px) rotate(6deg);
  }
  to {
    transform: translateX(114vw) translateY(0) rotate(-6deg);
  }
}

/* Fantasmas subindo devagar */
.hw-fantasma {
  animation: hw-flutuar ease-in-out infinite alternate;
}
@keyframes hw-flutuar {
  from {
    transform: translateY(0) scale(1);
    opacity: 0.16;
  }
  to {
    transform: translateY(-38px) scale(1.06);
    opacity: 0.34;
  }
}

/* Abóboras pulsando no rodapé do fundo */
.hw-abobora {
  animation: hw-brilho ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px rgba(255, 117, 24, 0.55));
}
@keyframes hw-brilho {
  from {
    opacity: 0.35;
    transform: scale(1);
  }
  to {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

/* Aranha descendo do topo por um fio */
.hw-aranha-fio {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(245, 233, 255, 0.35),
    rgba(245, 233, 255, 0.05)
  );
  transform-origin: top center;
  animation: hw-descer ease-in-out infinite alternate;
}
.hw-aranha-fio span {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
}
@keyframes hw-descer {
  from {
    height: 8vh;
  }
  to {
    height: 24vh;
  }
}

/* Teias fixas nos cantos */
.hw-teia {
  position: absolute;
  font-size: clamp(38px, 7vw, 72px);
  opacity: 0.22;
}
.hw-teia.cima-esq {
  top: -6px;
  left: -6px;
}
.hw-teia.cima-dir {
  top: -6px;
  right: -6px;
  transform: scaleX(-1);
}

/* Névoa sutil no rodapé */
#hw-fundo .hw-nevoa {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40px;
  height: 220px;
  background: radial-gradient(
    60% 100% at 50% 100%,
    rgba(255, 117, 24, 0.16) 0%,
    rgba(255, 117, 24, 0) 70%
  );
}

/* ─── Hero da landing: a vila assombrada, como no modelo ──────────────────
   Três correções sobre a base (que era clara e tinha o jogo ao vivo atrás):
     1) o fundo do hero passa a ser a vila (hw-fundo.webp) com véu escuro;
     2) o preview do jogo ao vivo some (poluía com "toque para jogar");
     3) o overlay quase-branco da base some (era o que "lavava" a tela). */
html[data-tema="halloween"] .lnd-hero {
  background:
    linear-gradient(
      180deg,
      rgba(14, 6, 30, 0.5) 0%,
      rgba(14, 6, 30, 0.72) 55%,
      rgba(14, 6, 30, 0.92) 100%
    ),
    url("../images/hw-fundo.webp") center / cover no-repeat;
}
html[data-tema="halloween"] .lnd-hero-game,
html[data-tema="halloween"] .lnd-hero-overlay {
  display: none;
}

/* ─── Abóbora do hero ──────────────────────────────────────────────────────
   Injetada por js/landing.js. Fica no alto à direita; os cards do feed de
   ganhos (mantidos, como no modelo) passam por cima da borda inferior dela. */
.hw-hero-abobora {
  position: absolute;
  top: clamp(48px, 9vh, 104px);
  /* Ancorada na COLUNA DE CONTEÚDO, não na borda da tela. O .lnd-hero-inner
     tem max-width:1120px e é centralizado, então a borda direita dele fica a
     calc(50vw - 560px) da borda da tela — alinhar por aqui deixa a abóbora
     bem em cima do feed "pagamentos ao vivo", como no modelo. Antes ela
     grudava na quina da tela e cobria a placa do cenário.
     O max() segura tudo dentro da tela quando a janela é menor que 1120px. */
  right: max(12px, calc(50vw - 560px));
  width: clamp(150px, 19vw, 262px);
  z-index: 1; /* atrás do .lnd-hero-inner (z-index:2), que traz o feed */
  pointer-events: none;
  filter: drop-shadow(0 16px 48px rgba(157, 92, 255, 0.5))
    drop-shadow(0 0 28px rgba(255, 117, 24, 0.35));
  /* Pivô ACIMA da imagem (o -28% é fora dela), como se a abóbora estivesse
     pendurada por um barbante invisível. É o que dá o balanço lateral largo:
     quanto mais longe o pivô, maior o arco que o mesmo ângulo percorre.
     Com o pivô no cabinho (50% 8%) ela girava no lugar, quase sem sair do
     eixo — parecia tremer, não balançar. */
  transform-origin: 50% -28%;
  /* Duas animações somadas — uma mexe no transform, a outra no filter, então
     não brigam: o balanço do pêndulo e o pulsar do brilho, como uma vela
     acesa dentro dela. */
  animation:
    hw-abobora-balanca 4.5s ease-in-out infinite,
    hw-abobora-brilho 3.2s ease-in-out infinite;
}
/* Pêndulo puro: só rotação, de um extremo ao outro. O ease-in-out é o que faz
   parecer física de verdade — desacelera nas pontas e acelera no meio, igual
   a um objeto pendurado. A subida e a descida saem de graça da geometria do
   arco, sem precisar de translateY. */
@keyframes hw-abobora-balanca {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}
@keyframes hw-abobora-brilho {
  0%,
  100% {
    filter: drop-shadow(0 16px 48px rgba(157, 92, 255, 0.5))
      drop-shadow(0 0 24px rgba(255, 117, 24, 0.3));
  }
  50% {
    filter: drop-shadow(0 16px 48px rgba(157, 92, 255, 0.5))
      drop-shadow(0 0 44px rgba(255, 137, 44, 0.6));
  }
}

/* ─── Títulos ─────────────────────────────────────────────────────────────
   Sem fonte decorativa: o modelo usa um sans pesado e limpo (o mesmo Space
   Grotesk da base). Só damos o brilho de vela e acendemos as palavras <em>
   em abóbora. */
html[data-tema="halloween"] :is(.lnd-title, .lnd-section-head h2, .hero-title) {
  text-shadow: 0 0 22px rgba(255, 117, 24, 0.3), 0 2px 3px rgba(0, 0, 0, 0.55);
}
html[data-tema="halloween"] .lnd-title em {
  color: var(--hw-abobora);
  font-style: normal;
}

/* ─── Acessibilidade e telas pequenas ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Quem pediu ao sistema para reduzir animações não leva o balanço inteiro —
     amplitude grande é o que causa desconforto. Em vez de cortar tudo (o que
     deixava a cena morta e parecia bug), fica uma versão bem contida: 2,5° em
     vez de 7°, e mais lenta. O brilho continua igual. */
  html[data-tema="halloween"] .hw-hero-abobora {
    animation:
      hw-abobora-balanca-suave 7s ease-in-out infinite,
      hw-abobora-brilho 4s ease-in-out infinite !important;
  }
  @keyframes hw-abobora-balanca-suave {
    0%,
    100% {
      transform: rotate(-2.5deg);
    }
    50% {
      transform: rotate(2.5deg);
    }
  }
  html[data-tema="halloween"] .hw-item,
  html[data-tema="halloween"] .hw-aranha-fio {
    animation: none !important;
  }
}

/* ─── Abóbora no celular e no tablet ──────────────────────────────────────
   A partir de 820px o hero empilha e centraliza (ver css/style.css), então a
   abóbora sai da lateral e vai para o TOPO, centralizada. Ali sobravam quase
   190px vazios entre o menu e o texto — ela preenche esse espaço e vira a
   imagem de abertura, em vez de brigar com o título como brigaria se ficasse
   pendurada no canto de uma tela estreita.

   A centralização é por `left: calc(50% - metade da largura)`, e NÃO por
   translateX(-50%): o transform pertence ao balanço, e um sobrescreveria o
   outro. */
@media (max-width: 820px) {
  .hw-hero-abobora {
    display: block;
    top: 24px;
    left: calc(50% - 90px);
    right: auto;
    width: 180px;
    /* Pivô ainda mais alto: em tamanho pequeno, é o que mantém o balanço
       visível sem precisar aumentar o ângulo. */
    transform-origin: 50% -34%;
  }

  /* A abóbora é absoluta, então não empurra nada — o espaço dela precisa ser
     reservado na mão. Sem isto, em tela baixa (um 320x720, por exemplo) o
     conteúdo sobe e passa por baixo dela.
     Só no tema: no visual padrão não existe abóbora para acomodar. */
  html[data-tema="halloween"] .lnd-hero {
    padding-top: 232px;
  }

  /* Com promoção no ar, a arte dela é que abre a página no celular: a
     abóbora sai e o hero devolve o espaço reservado. As duas no topo
     brigariam pelo mesmo lugar. A classe é posta por js/landing.js quando a
     promoção carrega, e retirada quando ela vence ou é desligada. */
  html.tem-promo .hw-hero-abobora {
    display: none;
  }
  /* Precisa repetir aqui: as regras de padding do tema (172/200/232px, que
     reservam espaço para a abóbora) têm a mesma especificidade da regra
     equivalente no style.css e vêm depois no carregamento. Sem esta, elas
     venceriam e o vão voltaria. */
  html.tem-promo[data-tema="halloween"] .lnd-hero {
    min-height: 0;
    padding-top: 16px;
  }
}

@media (max-width: 640px) {
  /* Menos poluição visual no celular — o js já reduz a quantidade,
     aqui garantimos que nada encoste no conteúdo. */
  .hw-teia {
    opacity: 0.14;
  }
  #hw-frente .hw-item {
    display: none;
  }
  /* background-attachment: fixed trava/pisca em muitos navegadores móveis;
     no celular o fundo rola junto com a página. */
  html[data-tema="halloween"] {
    background-attachment: scroll, scroll, scroll;
  }
}

/* Telefone: a mesma abóbora do topo, um pouco menor. Este bloco fica por
   ÚLTIMO de propósito — media query não muda especificidade, quem vem depois
   é que vence. Mantenha a ordem 820 → 640 → 480 → 360 ao mexer aqui. */
@media (max-width: 480px) {
  .hw-hero-abobora {
    left: calc(50% - 74px);
    width: 148px;
  }
  html[data-tema="halloween"] .lnd-hero {
    padding-top: 200px;
  }
}

/* Telas bem estreitas (iPhone SE e similares): tudo um pouco menor, para o
   título continuar cabendo em duas linhas. */
@media (max-width: 360px) {
  .hw-hero-abobora {
    top: 18px;
    left: calc(50% - 62px);
    width: 124px;
  }
  html[data-tema="halloween"] .lnd-hero {
    padding-top: 172px;
  }
}