/* Carta Futebol — base: tokens, tipografia, botoes, anuncios. Tema escuro de proposito
   (noite de estadio; a mesa e um gramado sob refletores). */
:root {
  --bg-0: #050b09;
  --bg-1: #0a1512;
  --bg-2: #0f1f1a;
  --vidro: rgba(16, 32, 27, .62);
  --vidro-forte: rgba(10, 22, 18, .86);
  --borda: rgba(255, 255, 255, .09);
  --borda-forte: rgba(255, 255, 255, .18);
  --texto: #ecf5ef;
  --texto-2: #9fb7aa;
  --texto-3: #6b8578;
  --neon: #c8ff3d;          /* destaque principal (lima de refletor) */
  --neon-2: #8ff04a;
  --ciano: #3de0ff;
  --ouro: #ffc83d;
  --perigo: #ff5a4f;
  --ok: #3ee08f;
  --atq: #ff6a3d;
  --def: #3d9bff;
  --grama-1: #1f7a43;
  --grama-2: #1a6b3a;
  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .55);
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-t: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  /* altura do anchor da NitroPay embaixo (medida pelo ads.js; 0 sem anuncio) */
  --anchor-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; color: var(--texto); background: var(--bg-0);
  font: 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased;
}
a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--fonte-t); font-weight: 800; letter-spacing: .01em; line-height: 1.05; margin: 0; }
.escondido { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botoes ---------- */
.btn {
  --c: var(--neon); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 800;
  font-family: var(--fonte-t); font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  color: #07110b; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 100%, #fff 18%), var(--c));
  box-shadow: 0 8px 26px color-mix(in srgb, var(--c) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .2s, filter .2s; text-decoration: none !important; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; transform: none; box-shadow: none; }
.btn small { display: block; font: 600 11px/1 var(--fonte); letter-spacing: 0; text-transform: none; opacity: .75; }
.btn .pilha-txt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.btn.grande { min-height: 58px; font-size: 23px; padding: 0 30px; }
.btn.ciano { --c: var(--ciano); }
.btn.ouro { --c: var(--ouro); }
.btn.perigo { --c: var(--perigo); color: #fff; }
.btn.fantasma {
  color: var(--texto); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--borda-forte);
}
.btn.fantasma:hover { background: rgba(255,255,255,.1); }
.btn-icone {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--borda); font-size: 18px; transition: background .2s;
}
.btn-icone:hover { background: rgba(255,255,255,.12); }
.btn-icone.off { opacity: .4; }

/* ---------- vidro / paineis ---------- */
.vidro {
  background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--raio);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--borda); font-size: 12px; font-weight: 600; color: var(--texto-2); }
.pill.neon { color: #07110b; background: var(--neon); border-color: transparent; }

.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35), 0 0 8px currentColor; }

input[type=text] {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--borda-forte);
  background: rgba(0,0,0,.3); outline: none; transition: border-color .2s, box-shadow .2s;
}
input[type=text]:focus { border-color: var(--neon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--neon) 18%, transparent); }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(var(--anchor-h) + var(--safe-b) + 20px); transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 999px; background: var(--vidro-forte); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra); font-weight: 600; animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- anuncios (NitroPay) ----------
   Espaco com altura reservada: o anuncio que chega depois nao empurra nada.
   O anchor (barra flutuante embaixo) e da NitroPay; o --anchor-h guarda a
   altura dele para a mesa e a pagina nunca ficarem por baixo. */
.ad-caixa { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ad-caixa > small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.ad-slot { display: flex; justify-content: center; align-items: center; width: 100%; }
.ad-slot.banner { min-height: 100px; }
.ad-slot.retangulo { min-height: 250px; min-width: 300px; }
body.sem-ads .ad-caixa { display: none; }
.reserva-anchor { height: calc(var(--anchor-h) + var(--safe-b)); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 900 22px/1 var(--fonte-t); letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto); text-decoration: none !important; }
.logo-marca { width: 34px; height: 34px; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--neon) 50%, transparent)); }
.logo b { color: var(--neon); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}