/* ==========================================================================
   PiraNOT — Hub Jogo do Bicho · Design Kit v1 (tema bold)
   Reskin visual sobre jogo-do-bicho.css — MESMAS classes, novos tokens.
   Não mexe em lógica de dados/partials PHP. Escopado em .jogo-do-bicho
   para não vazar para o resto do site.
   Referência: page-hub-loterias.php (piloto aprovado).
   ========================================================================== */

.jogo-do-bicho {
  --color-primary: #10243a;
  --color-primary-dark: #0b1a2b;
  --color-primary-light: #eef2f8;
  --color-accent: #F08522;

  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #e7eaf0;
  --color-border-strong: #d7dce6;

  --color-text: #0e1014;
  --color-text-muted: #475061;
  --color-text-soft: #828b97;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.06);
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}

.jogo-do-bicho.page-wrapper { background: var(--color-bg); }

/* --- Aviso editorial: linha mais discreta, sem azul saturado --- */
.jogo-do-bicho ~ .editorial-notice,
.editorial-notice {
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #7c2d12;
}
.editorial-notice .icon { color: var(--color-accent); }

/* --- Hero: título serifado, subtítulo sóbrio (mesma estrutura, sem cartão escuro
   para não colidir com o card--hero logo abaixo, que já carrega o resultado) --- */
.jogo-do-bicho .hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-text);
}
.jogo-do-bicho .hero__subtitle { color: var(--color-text-muted); }

/* --- Botões: pill laranja, mesma estrutura --- */
.jogo-do-bicho .btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1b1205;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(240,133,34,.28);
}
.jogo-do-bicho .btn--primary:hover {
  background: #d9740f;
  border-color: #d9740f;
  color: #1b1205;
}

/* --- Cards: raio grande, sombra suave (linguagem dos lot-card) --- */
.jogo-do-bicho .card {
  border-radius: var(--radius-lg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.jogo-do-bicho .card--hero {
  border-top: 6px solid var(--color-primary);
  border-color: var(--color-border);
  box-shadow: var(--shadow);
}
.jogo-do-bicho .card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}
.jogo-do-bicho .section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --- Badges/tags: mesmo pill, cor de acento nova --- */
.jogo-do-bicho .extraction-tag {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: #d7e0ee;
  border-radius: 999px;
}
.jogo-do-bicho .milhar { color: var(--color-text); }
.jogo-do-bicho .badge--info { background: #fdecd8; color: #b45309; border-color: #f7d4a8; }

/* --- Extrações mobile: número em destaque, tabular --- */
.jogo-do-bicho .extractions__number { color: var(--color-primary); }

/* --- Cards de estado (hub): watermark discreto, borda de acento no hover --- */
.jogo-do-bicho .state-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.jogo-do-bicho .state-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.jogo-do-bicho .state-card--featured {
  border-color: #f4dcb8;
  background: linear-gradient(180deg, #fffaf3, #fff4e6);
}
.jogo-do-bicho .state-card__watermark { color: var(--color-primary); }

/* --- Navegação de datas: bloco "atual" com acento laranja --- */
.jogo-do-bicho .date-nav__current {
  background: #fdf1e2;
  border-color: #f4dcb8;
}
.jogo-do-bicho .date-nav__current-label { color: #b45309; }
.jogo-do-bicho .date-nav__current-date { color: var(--color-primary); }
.jogo-do-bicho .date-nav__btn:hover { border-color: var(--color-accent); }

/* --- Links relacionados / sidebar --- */
.jogo-do-bicho .related-link:hover { border-color: var(--color-accent); }
.jogo-do-bicho .sidebar-nav__link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.jogo-do-bicho .recent-results__item:hover { border-color: var(--color-accent); }

/* --- FAQ: accordion no mesmo estilo do resto do Design Kit --- */
.jogo-do-bicho .faq__item { border-radius: var(--radius); }
.jogo-do-bicho .faq__icon { color: var(--color-accent); }

/* --- Formulário de busca: foco laranja --- */
.jogo-do-bicho .search-form select:focus,
.jogo-do-bicho .search-form input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(240,133,34,.18);
}

/* --- Estados de alerta: paleta alinhada ao acento --- */
.jogo-do-bicho .alert-state--warning {
  background: #fdf1e2;
  border-color: #f4dcb8;
  color: #92400e;
}

/* Guard AdSense/Auto Ads (herdado de jogo-do-bicho.css) permanece intocado —
   nenhuma regra aqui reativa anúncio dentro de .extractions/.contest. */