/* ==========================================================================
   Recarga Free Fire — "HUD Tático"
   Identidade nova, carregada depois de app.css (theme.css vence a cascata).
   Conceito: grafite quase-preto + verde-sinal único, cantos cortados,
   números em monoespaçado (efeito contador de munição), título em fonte
   condensada. Referencia o HUD/tela de vitória do próprio Free Fire sem
   copiar neon genérico de revenda.

   Identidade única, sem alternância clara/escuro — por isso sobrescreve
   TODAS as variantes de paleta/tema existentes com os mesmos valores.
   ========================================================================== */

:root,
html[data-palette="mono"],
html[data-palette="brand"],
html[data-palette="orange"],
html[data-theme="dark"],
html[data-theme="dark"][data-palette="brand"],
html[data-theme="dark"][data-palette="orange"] {
  color-scheme: dark;

  --bg: #12151a;
  --bg-pure: #1a1f27;
  --ink: #eef1f5;
  --ink-2: #ffffff;
  --muted: #8b93a1;
  --faint: #7a8390; /* era #5f6773 (3.2:1 em --bg, falha AA) — 4.77:1, passa AA em texto normal */
  --line: #262c35;
  --line-strong: #38414d;

  --accent: #39ff8f;
  --accent-hover: #5cffa3;
  --accent-soft: #10241a;
  --accent-line: #1f5a3a;

  --cta: #39ff8f;
  --cta-hover: #5cffa3;
  --cta-fg: #0a0d10;

  --ok: #22c55e;
  --ok-bg: #0f2417;
  --ok-fg: #86efac;
  --ok-line: #1e5631;
  --warn: #fbbf24;
  --warn-bg: #2a2005;
  --warn-fg: #fde68a;
  --warn-line: #7a5c0c;
  --err: #ff5470;
  --err-bg: #2b0e14;
  --err-fg: #ffb3c1;
  --err-line: #7a1f2e;

  --surface-muted: #1d222b;
  --hover-bg: rgba(57, 255, 143, 0.06);
  --nav-bg: rgba(18, 21, 26, 0.9);
  --nav-drawer-bg: rgba(18, 21, 26, 0.98);
  --sticky-bg: rgba(18, 21, 26, 0.92);
  --media-placeholder: linear-gradient(145deg, #172018, #12151a);

  --band-bg: #0a0d10;
  --band-fg: #eef1f5;
  --band-muted: rgba(238, 241, 245, 0.68);
  --band-btn-bg: #39ff8f;
  --band-btn-fg: #0a0d10;
  --band-btn-hover: #5cffa3;
  --band-line: rgba(238, 241, 245, 0.18);
  --band-line-hover: rgba(238, 241, 245, 0.32);
  --band-ghost-hover: rgba(238, 241, 245, 0.06);

  /* QR Pix precisa continuar claro pra escanear — não inverter */
  --pix-qr-bg: #ffffff;
  --theme-color: #12151a;
  --text: var(--ink);
  --text-2: var(--muted);

  --font-display: "Rajdhani", var(--font);
  --mono: "Chakra Petch", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  /* Cantos retos em vez de arredondados/pílula — base do visual "cortado" */
  --r: 2px;
  --r-lg: 2px;
  --r-full: 2px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 42px rgba(0, 0, 0, 0.55);
  --focus: 0 0 0 3px rgba(57, 255, 143, 0.35);
}

/* O toggle de tema não faz mais sentido — identidade única */
#theme-toggle { display: none !important; }

/* ── Tipografia: display condensada nos títulos/CTA, mono nos números ── */
h1, h2, h3,
.page-title, .card-title, .hprod-title,
.btn, .brand-text, .tab, .badge,
.store-header__user-txt strong {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
.price, .price-old, code, .mono,
.store-search input, input[type="text"], input[type="search"], input[type="tel"] {
  font-variant-numeric: tabular-nums;
}
.price {
  font-family: var(--mono);
  font-weight: 700;
}

/* ── Cantos cortados nos elementos de maior destaque ── */
.btn-primary, .btn-secondary, .cta-band .btn, .btn.btn-lg {
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 0 100%);
}
.card {
  clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 0 100%);
  background: var(--bg-pure);
}
.panel {
  clip-path: polygon(0 0, 100% 0, 100% 97%, 97% 100%, 0 100%);
}
.badge {
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0% 100%);
  text-transform: uppercase;
}
.tab.active {
  clip-path: polygon(0 0, 100% 0, 100% 60%, 88% 100%, 0 100%);
}
.brand-mark {
  clip-path: polygon(0 0, 100% 0, 100% 68%, 68% 100%, 0 100%);
}

/* ── Header/nav: linha de baixo mais firme, sem blur suave demais ── */
.store-header, .store-header--ad {
  border-bottom: 1px solid var(--line);
}
.store-topbar {
  background: #0a0d10;
  color: var(--muted);
}
.store-topbar a:not(.store-topbar__soc) { color: var(--muted); }

/* ── Card placeholder: ícone com leve glow verde, igual "item no radar" ── */
.card-media--placeholder {
  background: var(--media-placeholder);
  position: relative;
}
.card-placeholder-emoji {
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(57, 255, 143, 0.35));
}

/* ── Textura sutil de scanline no fundo da página (HUD) ── */
body.store-shell {
  background-image:
    linear-gradient(var(--bg), var(--bg)),
    repeating-linear-gradient(
      0deg,
      rgba(57, 255, 143, 0.018) 0px,
      rgba(57, 255, 143, 0.018) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* ── Micro-interação: botão "recua" ao clicar, hover com leve avanço ── */
.btn-primary, .btn-secondary {
  transition: transform 0.12s var(--ease), background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

/* ── Eyebrow / rótulos estilo HUD (mono, com marcador quadrado) ── */
.section-eyebrow, .hero-eyebrow {
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}