/* ============================================================
   bb-theme.css — extras especificos do Block Blast por cima da
   base (/tokens.css + /theme.css + wallet-ui.js).

   Historico: este arquivo nasceu como uma camada de REMENDO —
   theme.css e wallet-ui.js eram um tema claro (stackballpix) e
   aqui a gente escurecia tudo por cima com ~250 linhas de
   !important (texto cravado #0f2136 virando branco, etc).

   Agora theme.css e wallet-ui.js ja nascem escuros, usando os
   MESMOS tokens deste arquivo. A camada de remendo deixou de
   ser necessaria — o que sobra aqui e so o que e GENUINAMENTE
   especifico do Block Blast: a textura de blocos no fundo, o
   modal de aposta (bb-bet.js), badges/tabela do admin e os
   selos do rodape.
   ============================================================ */

/* ---------- fundo texturizado com blocos, igual as pecas do jogo ---------- */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Crect x='6' y='8' width='20' height='20' rx='6'/%3E%3Crect x='30' y='8' width='20' height='20' rx='6'/%3E%3Crect x='6' y='32' width='20' height='20' rx='6'/%3E%3Crect x='58' y='38' width='14' height='14' rx='4'/%3E%3Crect x='38' y='58' width='14' height='14' rx='4'/%3E%3Crect x='62' y='4' width='10' height='10' rx='3'/%3E%3C/g%3E%3Cg fill='%2328B8E6' fill-opacity='0.05'%3E%3Crect x='54' y='58' width='14' height='14' rx='4'/%3E%3Crect x='10' y='62' width='10' height='10' rx='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(78% 55% at 85% -12%, var(--primary-soft-strong), transparent 62%),
    radial-gradient(60% 45% at -10% 8%,  rgba(14, 55, 106, .55), transparent 58%),
    linear-gradient(180deg, var(--bg-surface-elevated) 0%, var(--bg-page) 58%, var(--bg-sunken) 100%);
  background-attachment: fixed;
}

/* ---------- banner placeholder da home: nunca um retangulo vazio ---------- */
.hBanner, .hBanner.empty {
  background: linear-gradient(120deg, var(--primary-soft-strong), rgba(14, 55, 106, .6));
  border: 1px solid var(--border-default);
}
.hBanner.empty::after { color: var(--text-muted); }

/* ---------- cards de destaque da home (.heroCard / .final / .hCashback) ---------- */
.final, .heroCard, .card.final {
  background: linear-gradient(135deg, var(--primary-soft-strong), rgba(14, 55, 106, .5));
  border: 1px solid var(--border-strong);
}
.final h2, .heroCard h1, .heroCard h2 { color: var(--text-primary); }
.final p, .heroCard p { color: var(--text-secondary); }

.hCashback {
  background: linear-gradient(120deg, var(--success-soft), var(--primary-soft));
  border: 1px solid var(--success-border);
}
.hCashback b { color: var(--text-primary); }
.hCashback span { color: var(--text-secondary); }

/* ============================================================
   MODAL DE APOSTA / RESULTADO (bb-bet.js — namespace .bbet)
   ============================================================ */
.bbet {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
}
.bbet .chips button {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-default);
  color: var(--text-primary);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.bbet .chips button:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.bbet .chips button:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--border-focus); }
.bbet .chips button.on {
  background: var(--primary-soft-strong);
  color: var(--text-primary);
  border-color: var(--primary);
  font-weight: 900;
  box-shadow: inset 0 -3px 0 var(--primary), 0 4px 14px var(--primary-glow);
}
.bbet .info { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-secondary); }
.bbet .go { background: var(--primary); color: var(--text-on-primary); }
.bbet .go:hover { background: var(--primary-hover); }
.bbet .no { background: var(--bg-surface-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }

/* HUD da partida: vidro escuro com borda de luz */
#bbHud {
  background: rgba(4, 18, 42, .92);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

/* chips de aposta / valores na home (.hBetChips) */
.hBetChips button, .betPanel button, .chips button {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-default);
  color: var(--text-primary);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hBetChips button:hover, .betPanel button:hover, .chips button:hover { background: var(--bg-surface-hover); }
.hBetChips button.on, .hBetChips button.sel, .hBetChips button[aria-pressed="true"] {
  background: var(--primary-soft-strong);
  border-color: var(--primary);
  color: var(--text-primary);
  font-weight: 900;
  box-shadow: inset 0 -3px 0 var(--primary);
}
.hBetCustom, .hBetCustom input {
  background: var(--bg-input);
  border: 1.5px solid var(--border-default);
  color: var(--text-primary);
}
.hBetCustom:focus-within { border-color: var(--border-focus); box-shadow: var(--ring); }

/* pilulas de selo (100%, Pix na hora, 100% Seguro) */
.tpill, .pill, .tag, .chip, .selo {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

/* ============================================================
   SELOS DO RODAPE — os .webp tem fundo claro proprio, entao o
   cartao ao redor precisa continuar contrastado com o site.
   ============================================================ */
.ftrSelos {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  align-items: center; max-width: 560px; margin: 0 auto 18px; padding: 0 8px;
}
.ftrSelos .selo {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md); height: 56px; min-width: 72px; padding: 8px 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.ftrSelos .selo img { max-height: 40px; max-width: 150px; width: auto; display: block; object-fit: contain; }

footer { background: transparent; color: var(--text-secondary); }
footer b, footer strong { color: var(--text-primary); }
option { background: var(--bg-surface-elevated); color: var(--text-primary); }

/* ============================================================
   ADMIN — KPIs, badges e tabela
   ============================================================ */
.val { color: var(--text-primary); }
.val.green, .stat .green, .val.g { color: var(--success); }
.val.yellow, .stat .yellow, .val.y { color: var(--warning); }
.val.red, .stat .red, .val.r { color: var(--danger); }
.val.blue, .stat .blue, .val.b { color: var(--primary); }

table th, .tbl th, thead th { color: var(--text-muted); background: var(--bg-sunken); }
table td, .tbl td { color: var(--text-primary); }
td.saldo, .saldo { color: var(--success); font-variant-numeric: tabular-nums; }

.badge.on { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
.badge.off { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-border); }