/**
 * base.css
 * Tokens de design (cores, fontes) e componentes GENÉRICOS reutilizados por
 * várias telas: botões, cards, campos de formulário, tags, estado vazio,
 * espaço de anúncio. Estilos específicos de UMA funcionalidade ficam no CSS
 * daquela funcionalidade, não aqui.
 */
:root {
  --campo: #234D35;
  --campo-escuro: #15301F;
  --grama: #7FB069;
  --giz: #F5F2E7;
  --terra: #C77B3E;
  --preto: #171512;
  --amarelo: #E8B93B;
  --vermelho: #B84A3E;
  --branco: #FFFDF8;
  --linha: rgba(245, 242, 231, 0.18);
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.25);
  --radius: 14px;
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(127, 176, 105, 0.10), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(200, 123, 62, 0.08), transparent 45%),
    var(--campo-escuro);
  color: var(--branco);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--amarelo); color: var(--preto); }
a { color: inherit; }

.field-lines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 78px, var(--giz) 78px, var(--giz) 80px);
}

main#app-main {
  position: relative; z-index: 2;
  max-width: 980px; margin: 0 auto; padding: 32px 24px 80px;
}

footer {
  position: relative; z-index: 2;
  text-align: center; padding: 24px; color: rgba(245, 242, 231, 0.35); font-size: 0.78rem;
  font-family: 'JetBrains Mono', monospace;
}

.view-fade { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

h2.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}
p.section-desc {
  color: rgba(245, 242, 231, 0.6);
  font-size: 0.92rem;
  margin: 0 0 20px;
}

/* ---- cards / cartões genéricos ---- */
.card {
  background: var(--giz);
  color: var(--preto);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 22px;
}

/* ---- campos de formulário ---- */
.field label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(245, 242, 231, 0.55); margin-bottom: 6px;
}
.card .field label, .draw-panel .field label { color: rgba(23, 21, 18, 0.55); }
.field input[type=text], .field input[type=date], .field input[type=time], .field select {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--linha);
  color: var(--branco);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
}
.card .field input, .card .field select, .draw-panel .field input, .draw-panel .field select {
  background: rgba(23, 21, 18, 0.06);
  border: 1px solid rgba(23, 21, 18, 0.18);
  color: var(--preto);
}
.field select { cursor: pointer; }
.mini-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(23, 21, 18, 0.55);
  display: block;
}
.hint { font-size: 0.82rem; color: rgba(23, 21, 18, 0.45); }

/* ---- botões ---- */
.btn {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  font-size: 1rem;
  border: none; border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  transition: transform .1s ease, filter .1s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--amarelo); color: var(--preto); }
.btn-secondary { background: var(--campo); color: var(--branco); }
.btn-outline { background: transparent; border: 1px solid rgba(23, 21, 18, 0.25); color: var(--preto); }
/* botão para fundos ESCUROS (cabeçalho, hub, admin) — ex.: Sair / Voltar */
.btn-ghost {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(245, 242, 231, 0.4);
  color: var(--giz);
}
.btn-ghost:hover { background: rgba(0, 0, 0, 0.42); border-color: var(--amarelo); color: var(--branco); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- tag de placar (usada no cabeçalho e no sorteio) ---- */
.score-tag {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--giz);
  display: inline-block;
}
.score-tag b { color: var(--amarelo); font-size: 1rem; }
.score-tag-light {
  background: rgba(23, 21, 18, 0.06);
  border-color: rgba(23, 21, 18, 0.15);
  color: var(--preto);
}
.score-tag-light b { color: var(--terra); }

.empty-state { text-align: center; padding: 34px 20px; color: rgba(23, 21, 18, 0.5); font-size: 0.9rem; }

/* ---- toast (avisos rápidos de erro/sucesso — Patota.Router.toast) ---- */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--preto); color: var(--branco);
  border: 1px solid rgba(245, 242, 231, 0.15);
  border-radius: 10px; padding: 12px 18px;
  font-size: 0.88rem; max-width: 90vw; text-align: center;
  box-shadow: var(--sombra); z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* divulgação dos apps da FLA (FLA Ads) */
.fla-ad { margin-top: 18px; }
.fla-faixa-box { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 24px; }