/* ══════════════════════════════════════════════════════════════════
   DINO CASH — DESIGN SYSTEM OVERRIDE
   Carregado APÓS os estilos legados (Helix Copa) para sobrescrever
   o visual sem precisar reescrever os arquivos antigos.
   Aplica-se ao landing e ao dashboard.
══════════════════════════════════════════════════════════════════ */

/* ──────────────────── TOKENS — PALETA DESERTO ──────────────────── */
:root {
  /* Backgrounds — chocolate-deserto, sai do "navy frio" do Helix */
  --dc-bg-deep:    #14100A;   /* chocolate profundo */
  --dc-bg:         #1F1610;   /* umber escuro */
  --dc-bg-elev:    #2D1F15;   /* umber mid (cards) */
  --dc-bg-card:    #3A2818;   /* umber claro (cards de destaque) */

  /* Creme / areia — camadas claras (igual canvas do jogo) */
  --dc-cream:      #FEF3C7;   /* creme claro */
  --dc-cream-2:    #FDE68A;   /* areia clara */
  --dc-cream-3:    #FCD34D;   /* ouro deserto */
  --dc-cream-text: #4A2E1F;   /* texto sobre creme */

  /* Verde-dino — primário */
  --dc-primary:    #22C55E;
  --dc-primary-2:  #16A34A;
  --dc-primary-lt: #4ADE80;
  --dc-primary-dk: #166534;

  /* Sol / areia — secundários */
  --dc-gold:       #FBBF24;
  --dc-gold-2:     #F59E0B;
  --dc-sand:       #FCA855;
  --dc-sand-dk:    #C2410C;
  --dc-sunset:     #EA580C;   /* laranja crepúsculo */

  --dc-danger:     #EF4444;
  --dc-warn:       #F59E0B;

  --dc-t1:         #FFF8EB;   /* texto principal com tom quente */
  --dc-t2:         rgba(255,248,235,0.72);
  --dc-t3:         rgba(255,248,235,0.44);
  --dc-t4:         rgba(255,248,235,0.22);

  /* Superfícies com tint dourado sutil (não branco neutro) */
  --dc-surface:    rgba(251,191,36,0.05);
  --dc-surface-2:  rgba(251,191,36,0.09);
  --dc-surface-3:  rgba(251,191,36,0.14);
  --dc-border:     rgba(251,191,36,0.12);
  --dc-border-2:   rgba(251,191,36,0.22);
  --dc-border-pri: rgba(34,197,94,0.36);
  --dc-border-gold:rgba(251,191,36,0.42);

  --dc-radius-xs:  6px;
  --dc-radius-sm:  10px;
  --dc-radius-md:  16px;
  --dc-radius-lg:  22px;
  --dc-radius-xl:  28px;
  --dc-radius-full: 9999px;

  --dc-shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
  --dc-shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --dc-shadow-lg:  0 24px 60px rgba(0,0,0,0.50);
  --dc-shadow-cta: 0 10px 28px rgba(34,197,94,0.45), inset 0 1px 0 rgba(255,255,255,0.30);
  --dc-shadow-card: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  --dc-shadow-card-pri: 0 12px 40px rgba(34,197,94,0.25), 0 0 0 1px rgba(34,197,94,0.30);

  --dc-ease:       cubic-bezier(.22,1,.36,1);
  --dc-font-display: 'Plus Jakarta Sans', 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --dc-font-body:    'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ──────────────────── BODY + TYPOGRAPHY ──────────────────── */
body {
  font-family: var(--dc-font-display) !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  background: var(--dc-bg-deep) !important;
  color: var(--dc-t1) !important;
}
body::before {
  /* DESERT SUNSET — chocolate → roxo crepuscular → terracota → laranja queimado */
  background:
    /* sol no canto superior direito — bem alto pra não atrapalhar o CTA */
    radial-gradient(circle at 90% 4%, rgba(251,191,36,0.30) 0%, rgba(251,191,36,0.08) 18%, transparent 36%) !important,
    /* halo verde-dino sutil no meio */
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(34,197,94,0.06) 0%, transparent 60%) !important,
    /* glow laranja na base (chão do deserto) */
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(234,88,12,0.40) 0%, rgba(194,65,12,0.18) 30%, transparent 65%) !important,
    /* gradiente principal: chocolate → roxo → terracota → laranja */
    linear-gradient(180deg,
      #14100A 0%,
      #1F1610 18%,
      #2D1A20 38%,
      #4A1F1A 62%,
      #6B2A1F 82%,
      #8B3A1A 100%) !important;
}
body::after {
  /* textura de poeira do deserto — pontos quentes em duas escalas */
  opacity: 0.05 !important;
  background-image:
    radial-gradient(circle, rgba(251,191,36,1) 1px, transparent 1px),
    radial-gradient(circle, rgba(234,88,12,0.7) 1px, transparent 1px) !important;
  background-size: 28px 28px, 56px 56px !important;
  background-position: 0 0, 14px 14px !important;
}

/* ──────────────────── CTAs — VERDE-DINO (botões principais de ação) ──────────────────── */
/* Primário: gradient verde-dino claro → escuro. Dourado/sunset fica pra decorações. */
.copa-cta-btn,
.copa-cta-sm,
.btn-action.btn-primary,
.cta-play-big,
.result-cta,
button[type="submit"]:not(.btn-close),
.btn-primary-dino {
  background: linear-gradient(180deg, #4ADE80 0%, #22C55E 48%, #16A34A 100%) !important;
  color: #052e16 !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  border-radius: var(--dc-radius-md) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 10px 28px rgba(22,163,74,0.50),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -8px 18px rgba(6,78,30,0.22) !important;
  padding: 16px 30px !important;
  font-size: 15px !important;
  transition: transform .12s var(--dc-ease), box-shadow .15s var(--dc-ease), filter .15s !important;
  animation: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  position: relative !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.copa-cta-btn::after,
.btn-action.btn-primary::after,
.btn-primary-dino::after,
.cta-play-big::after,
.result-cta::after {
  content: '→' !important;
  display: inline-block;
  font-weight: 900;
  font-size: 1.1em;
  transition: transform .15s var(--dc-ease);
}
.copa-cta-btn:hover::after,
.btn-action.btn-primary:hover::after,
.btn-primary-dino:hover::after,
.cta-play-big:hover::after,
.result-cta:hover::after {
  transform: translateX(4px);
}
.copa-cta-btn:hover,
.copa-cta-sm:hover,
.btn-action.btn-primary:hover,
.cta-play-big:hover,
.result-cta:hover,
.btn-primary-dino:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 14px 36px rgba(22,163,74,0.65),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 18px rgba(6,78,30,0.20) !important;
}
.copa-cta-btn:active,
.btn-action.btn-primary:active,
.cta-play-big:active,
.result-cta:active {
  transform: translateY(0) scale(0.99) !important;
}

/* Pequeno CTA (header, nav, etc.) */
.copa-cta-sm {
  padding: 10px 20px !important;
  font-size: 13px !important;
  border-radius: var(--dc-radius-sm) !important;
}

/* Outline / secundário — agora com matiz dino-green (mantém o dino na paleta) */
.btn-action.btn-outline,
.btn-secondary-dino {
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(22,163,74,0.06) 100%) !important;
  color: var(--dc-primary-lt) !important;
  border: 1.5px solid rgba(34,197,94,0.40) !important;
  border-radius: var(--dc-radius-md) !important;
  font-weight: 800 !important;
  font-family: var(--dc-font-display) !important;
  padding: 14px 22px !important;
  box-shadow: var(--dc-shadow-sm) !important;
  transition: transform .12s var(--dc-ease), background .15s, border-color .15s, color .15s !important;
}
.btn-action.btn-outline:hover,
.btn-secondary-dino:hover {
  background: linear-gradient(180deg, rgba(34,197,94,0.20) 0%, rgba(22,163,74,0.12) 100%) !important;
  border-color: var(--dc-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Botão "Jogar" gigante do dashboard */
.cta-play-big {
  font-size: 17px !important;
  padding: 18px 32px !important;
  letter-spacing: 0.01em !important;
}

/* Os botões de ação do dashboard (.btn-action) já têm SVG icon próprio (↓ ↑ 👥) —
   removemos a seta → vinda do ::after pra não duplicar */
.btn-action.btn-primary::after,
.btn-action.btn-outline::after { content: none !important; }

/* ──────────────────── NAV ──────────────────── */
.copa-nav {
  background: rgba(20,16,10,0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--dc-border-gold) !important;
  height: 62px !important;
  padding: 0 20px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.40) !important;
}
.copa-nav-brand {
  font-family: var(--dc-font-display) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: -0.015em !important;
  gap: 0 !important;
}
/* Logo só PNG, sem caixa, sem texto adjacente */
.copa-nav-brand .brand-logo-icon,
.copa-nav-brand img.brand-logo-icon {
  width: auto !important;
  height: 48px !important;
  max-width: 220px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.50));
}
/* Esconde COMPLETAMENTE o texto "DinoCash" e o emoji fallback */
.copa-nav-brand-text,
.copa-nav-brand > span:not(.copa-nav-brand-emoji),
.copa-nav-brand-emoji {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
.copa-nav { height: 70px !important; }
.copa-nav-brand-text {
  display: inline !important;
  /* "Dino" verde-dino, "Cash" sunset */
  background: linear-gradient(135deg, #4ADE80 0%, #22C55E 45%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.copa-nav-brand-text span {
  background: linear-gradient(135deg, #FBBF24 0%, #EA580C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.copa-nav-brand .brand-logo-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  background: var(--dc-surface) !important;
  padding: 4px !important;
  border: 1px solid var(--dc-border) !important;
}
.copa-nav-link {
  font-family: var(--dc-font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  border-radius: var(--dc-radius-sm) !important;
  color: var(--dc-t2) !important;
}
.copa-nav-link:hover { background: var(--dc-surface-2) !important; color: var(--dc-t1) !important; }

/* ──────────────────── HERO ──────────────────── */
.copa-hero {
  padding: 90px 24px 70px !important;
}
/* HERO BG — não sobrescreve a imagem que o admin pode ter configurado.
   A landing.php tem lógica condicional: se houver custom_bg_url, usa a imagem;
   senão, cai no nosso desert sunset. Aqui só reforçamos o overlay sobre a imagem. */
body.has-custom-bg .copa-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 16%, rgba(251,191,36,0.32) 0%, rgba(251,191,36,0.10) 22%, transparent 44%),
    radial-gradient(ellipse 80% 45% at 50% 100%, rgba(234,88,12,0.30) 0%, transparent 65%),
    linear-gradient(180deg, rgba(20,16,10,0.45) 0%, rgba(20,16,10,0.10) 35%, rgba(107,42,31,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.copa-live-badge {
  background: linear-gradient(135deg, rgba(234,88,12,0.18), rgba(251,191,36,0.10)) !important;
  border: 1px solid rgba(234,88,12,0.42) !important;
  border-radius: var(--dc-radius-full) !important;
  padding: 8px 18px !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: #FED7AA !important;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(234,88,12,0.22) !important;
}
.copa-live-dot {
  background: linear-gradient(135deg, #FBBF24, #EA580C) !important;
  box-shadow: 0 0 12px rgba(234,88,12,0.65) !important;
}
.copa-live-dot::after { border-color: #EA580C !important; }

.copa-title {
  font-family: var(--dc-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}
/* Linhas do título do hero: gold = sol, neon = laranja-sunset (vai melhor com a cena do jogo) */
.copa-title .line-gold {
  background: linear-gradient(180deg, #FCD34D 0%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 60px rgba(251,191,36,0.40) !important;
}
.copa-title .line-neon {
  background: linear-gradient(180deg, #FCA855 0%, #EA580C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 60px rgba(234,88,12,0.40) !important;
}

.copa-sub {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--dc-t2) !important;
  font-weight: 500 !important;
}
.copa-sub u { color: var(--dc-gold) !important; }

/* Trust pills — todas com tonalidade verde-dino (consistência) */
.copa-trust-item {
  background: rgba(34,197,94,0.10) !important;
  border: 1px solid rgba(34,197,94,0.36) !important;
  border-radius: var(--dc-radius-sm) !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 8px 14px !important;
  letter-spacing: 0.02em !important;
  color: rgba(248,250,252,0.92) !important;
  transition: background .15s, border-color .15s, transform .15s;
}
.copa-trust-item:hover {
  background: rgba(34,197,94,0.16) !important;
  border-color: rgba(34,197,94,0.50) !important;
  transform: translateY(-1px);
}
.copa-trust-item .ck { color: var(--dc-primary-lt) !important; font-weight: 900 !important; }

/* Winner cards — warm sand tones */
.copa-win-card {
  background: linear-gradient(180deg, rgba(58,40,24,0.94), rgba(31,22,16,0.92)) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-md) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--dc-shadow-card) !important;
}
.copa-win-card.is-premium { border-color: var(--dc-border-gold) !important; box-shadow: 0 12px 32px rgba(251,191,36,0.18) !important; }
.copa-win-card.is-special { border-color: var(--dc-border-pri) !important; box-shadow: 0 12px 32px rgba(34,197,94,0.20) !important; }

/* ──────────────────── SECTIONS ──────────────────── */
.copa-sec-head h2,
#how-title,
#test-title,
.copa-cta-final-title {
  font-family: var(--dc-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

/* ──────────── "Como funciona" — cards dark warm minimalistas ──────────── */
.copa-how-card {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(34,197,94,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #221912 0%, #160E08 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 2px solid rgba(34,197,94,0.55) !important;
  border-radius: var(--dc-radius-lg) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .25s var(--dc-ease), border-color .2s, box-shadow .25s !important;
  color: var(--dc-t1) !important;
  position: relative;
  overflow: hidden;
}
.copa-how-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #22C55E 35%, #FBBF24 65%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}
.copa-how-card:hover {
  transform: translateY(-5px);
  border-color: rgba(251,191,36,0.30) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(251,191,36,0.30) !important;
}
.copa-how-card h3 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  margin-top: 14px !important;
}
.copa-how-card span:not(.copa-how-num) {
  color: var(--dc-t1) !important;
}
.copa-how-card p {
  color: rgba(255,255,255,0.62) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Números 01/02/03: GIGANTES, gold sólido, ficam atrás do ícone */
.copa-how-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #FBBF24 !important;
  color: #FBBF24 !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  opacity: 0.95 !important;
  text-shadow:
    0 4px 24px rgba(251,191,36,0.45),
    0 2px 0 rgba(0,0,0,0.40) !important;
  filter: none !important;
}

/* Ícones: badge verde-dino, contraste limpo */
.copa-how-icon {
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 60%, #15803D 100%) !important;
  border: 1.5px solid rgba(74,222,128,0.55) !important;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 8px 22px rgba(22,163,74,0.40),
    0 0 0 4px rgba(34,197,94,0.08) !important;
}
.copa-how-icon svg { stroke: #fff !important; color: #fff !important; }

/* ──────────── Testimonials — dark warm com accent dourado ──────────── */
.copa-test-card {
  background: linear-gradient(180deg, #221912 0%, #160E08 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-left: 3px solid rgba(251,191,36,0.50) !important;
  border-radius: var(--dc-radius-lg) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--dc-t1) !important;
  position: relative;
  overflow: hidden;
}
.copa-test-card::before {
  content: '"';
  position: absolute;
  top: 4px; right: 14px;
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: rgba(251,191,36,0.10);
  font-weight: 900;
  pointer-events: none;
}
.copa-test-card.featured {
  border-left: 3px solid rgba(34,197,94,0.70) !important;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,197,94,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #221912 0%, #160E08 100%) !important;
  box-shadow:
    0 16px 44px rgba(0,0,0,0.55),
    0 0 0 1px rgba(34,197,94,0.18) !important;
}
.copa-test-card p,
.copa-test-card .copa-test-text {
  color: rgba(255,255,255,0.80) !important;
  font-style: italic;
  line-height: 1.55 !important;
}
.copa-test-stars { color: #FBBF24 !important; text-shadow: 0 0 12px rgba(251,191,36,0.40); }
.copa-test-name {
  font-weight: 900 !important;
  font-family: var(--dc-font-display) !important;
  color: #FFFFFF !important;
}
.copa-test-since { color: rgba(255,255,255,0.45) !important; }
.copa-test-avatar-img {
  border: 2px solid rgba(251,191,36,0.45) !important;
  background: rgba(0,0,0,0.30) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.40);
}

/* CTA Final — sunset card */
.copa-cta-final {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(251,191,36,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(234,88,12,0.20) 0%, transparent 55%),
    linear-gradient(180deg, var(--dc-bg-elev), var(--dc-bg)) !important;
  border: 1px solid var(--dc-border-pri) !important;
  border-radius: var(--dc-radius-xl) !important;
  box-shadow: var(--dc-shadow-card-pri) !important;
}
.copa-cta-final-trophy {
  filter: drop-shadow(0 0 32px rgba(34,197,94,0.55)) !important;
}

/* Footer */
.copa-footer {
  background: linear-gradient(180deg, transparent, var(--dc-bg-deep)) !important;
  border-top: 1px solid var(--dc-border) !important;
}

/* ──────────────────── CARD CREME (igual canvas do jogo) ──────────────────── */
/* Utility: aplique .dc-cream-card em qualquer seção pra dar destaque "papel kraft do deserto" */
.dc-cream-card {
  background: linear-gradient(180deg, var(--dc-cream) 0%, var(--dc-cream-2) 60%, var(--dc-cream-3) 100%) !important;
  color: var(--dc-cream-text) !important;
  border: 2px solid rgba(74,46,31,0.25) !important;
  border-radius: var(--dc-radius-xl) !important;
  box-shadow:
    0 12px 36px rgba(74,46,31,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset 0 -8px 24px rgba(74,46,31,0.10) !important;
}
.dc-cream-card h1, .dc-cream-card h2, .dc-cream-card h3, .dc-cream-card p, .dc-cream-card span {
  color: var(--dc-cream-text) !important;
}

/* ──────────────────── DASHBOARD ──────────────────── */

/* Balance card — gradient deserto verde+sol */
.balance-card,
.bal-card,
.dashboard-balance,
.b-card {
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(251,191,36,0.18) 0%, transparent 55%),
    linear-gradient(140deg, rgba(34,197,94,0.14) 0%, rgba(58,40,24,0.94) 45%, rgba(31,22,16,0.96) 100%) !important;
  border: 1px solid var(--dc-border-pri) !important;
  border-radius: var(--dc-radius-xl) !important;
  box-shadow: var(--dc-shadow-card-pri) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Game card — gradient deserto + sol no canto */
.game-card {
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, rgba(251,191,36,0.22) 0%, transparent 55%),
    linear-gradient(155deg, rgba(34,197,94,0.12) 0%, rgba(58,40,24,0.92) 45%, rgba(31,22,16,0.96) 100%) !important;
  border: 1px solid var(--dc-border-pri) !important;
  border-radius: var(--dc-radius-xl) !important;
  box-shadow: var(--dc-shadow-card-pri) !important;
  position: relative;
  overflow: hidden;
}
.game-card::before {
  content: '';
  position: absolute;
  top: -45%; right: -12%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(251,191,36,0.28) 0%, rgba(251,191,36,0.06) 35%, transparent 65%);
  pointer-events: none;
}
.game-card::after {
  content: '';
  position: absolute;
  left: -5%; bottom: -15%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(234,88,12,0.18) 0%, transparent 60%);
  pointer-events: none;
}

/* Mode selector (Meta / Plataforma) */
.mode-btn {
  background: var(--dc-surface) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-md) !important;
  color: var(--dc-t2) !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  transition: all .15s var(--dc-ease);
}
.mode-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(234,88,12,0.10)) !important;
  border-color: var(--dc-gold) !important;
  color: var(--dc-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,0.45), 0 4px 14px rgba(234,88,12,0.22) !important;
}
/* "Corrida livre" disabled: visual destacado tipo "VIP/coming soon" — verde-dino com badge */
.mode-btn:disabled,
.mode-btn[disabled] {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.10), rgba(22,163,74,0.06)) !important;
  border-color: rgba(34,197,94,0.38) !important;
  color: var(--dc-primary-lt) !important;
  cursor: not-allowed !important;
  position: relative !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.20), 0 2px 10px rgba(22,163,74,0.18) !important;
}
.mode-btn[disabled]::after { content: none !important; }

/* ──────────── Pill "online" — verde com pulse ──────────── */
.online-pill {
  background: linear-gradient(180deg, rgba(34,197,94,0.18) 0%, rgba(22,163,74,0.10) 100%) !important;
  border: 1px solid rgba(34,197,94,0.45) !important;
  color: var(--dc-primary-lt) !important;
  font-weight: 800 !important;
  font-family: var(--dc-font-display) !important;
  box-shadow: 0 4px 14px rgba(22,163,74,0.25) !important;
}
.online-dot {
  background: var(--dc-primary-lt) !important;
  box-shadow: 0 0 12px rgba(74,222,128,0.85), 0 0 0 4px rgba(34,197,94,0.20) !important;
  animation: onlinePulse 1.6s ease-in-out infinite !important;
}
@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.18); }
}
#online-count { color: var(--dc-primary-lt) !important; font-weight: 900 !important; }

/* Modais — fundo umber warm */
.modal,
[id*="modal"][class*="modal"],
.profile-modal,
.deposit-modal,
.withdraw-modal,
.referral-modal,
.support-modal,
.notifications-modal {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251,191,36,0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--dc-bg-elev) 0%, var(--dc-bg) 100%) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-xl) !important;
  box-shadow: var(--dc-shadow-lg) !important;
}
.btn-close {
  background: var(--dc-surface-2) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-sm) !important;
  color: var(--dc-t1) !important;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.btn-close:hover { background: var(--dc-surface-3) !important; transform: rotate(90deg); }

/* Deposit cards */
.dep-card,
.dep-card-amount,
.dep-card-bonus-top,
.dep-card-pct {
  font-family: var(--dc-font-display) !important;
}
.dep-card {
  background: linear-gradient(180deg, var(--dc-surface), var(--dc-surface)) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-md) !important;
  transition: transform .15s var(--dc-ease), border-color .15s !important;
}
.dep-card:hover {
  transform: translateY(-2px);
  border-color: var(--dc-border-gold) !important;
}
.dep-card.selected,
.dep-card[data-selected="true"] {
  background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(234,88,12,0.06)) !important;
  border-color: var(--dc-gold) !important;
  box-shadow: 0 10px 28px rgba(234,88,12,0.30), inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
.dep-card-amount { color: var(--dc-t1) !important; font-weight: 900 !important; }
.dep-card-bonus-top {
  background: linear-gradient(135deg, var(--dc-gold), var(--dc-sunset)) !important;
  color: #2D1A0A !important;
  font-weight: 900 !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  box-shadow: 0 4px 12px rgba(234,88,12,0.32) !important;
}
.dep-card-pct { color: var(--dc-sunset) !important; font-weight: 900 !important; }

/* Inputs — contraste forte (escuros sólidos) p/ não sumir em modais coloridos */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select,
.input {
  background: rgba(6,9,18,0.65) !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--dc-radius-sm) !important;
  color: #FFFFFF !important;
  font-family: var(--dc-font-body) !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35) !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover,
.input:hover {
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(6,9,18,0.78) !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.input:focus {
  outline: none !important;
  border-color: var(--dc-primary-lt) !important;
  background: rgba(6,9,18,0.85) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(34,197,94,0.22) !important;
}
input::placeholder,
textarea::placeholder,
.input::placeholder { color: rgba(255,255,255,0.50) !important; }

/* Labels */
label {
  font-family: var(--dc-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--dc-t2) !important;
}

/* Tabelas */
table {
  background: var(--dc-surface) !important;
  border-radius: var(--dc-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--dc-border) !important;
}
th {
  background: var(--dc-surface-2) !important;
  color: var(--dc-t2) !important;
  font-family: var(--dc-font-display) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px !important;
}
td {
  color: var(--dc-t1) !important;
  font-family: var(--dc-font-body) !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--dc-border) !important;
}

/* ──────────────────── ANIMAÇÕES ──────────────────── */
@keyframes dcGlow {
  0%, 100% {
    box-shadow:
      0 10px 28px rgba(22,163,74,0.45),
      inset 0 1px 0 rgba(255,255,255,0.42),
      inset 0 -8px 18px rgba(6,78,30,0.20),
      0 0 0 0 rgba(74,222,128,0.0);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 14px 38px rgba(22,163,74,0.65),
      inset 0 1px 0 rgba(255,255,255,0.60),
      inset 0 -8px 18px rgba(6,78,30,0.18),
      0 0 0 8px rgba(74,222,128,0.10);
    transform: scale(1.02);
  }
}

/* "Jogar Agora" do dashboard: pulse suave */
.cta-play-big:not(:disabled) {
  animation: dcGlow 2.4s ease-in-out infinite !important;
}
.cta-play-big:not(:disabled):hover {
  animation: none !important;
}

/* ─── CTA PRINCIPAL "JOGAR RODADA GRATIS" — flashy: shimmer + pulse + ring dourado ─── */
@keyframes ctaFlashy {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 10px 28px rgba(22,163,74,0.55),
      inset 0 1px 0 rgba(255,255,255,0.42),
      inset 0 -8px 18px rgba(6,78,30,0.18),
      0 0 0 0 rgba(252,211,77,0.55),
      0 0 28px rgba(74,222,128,0.20);
  }
  50% {
    transform: scale(1.028);
    box-shadow:
      0 18px 44px rgba(22,163,74,0.80),
      inset 0 1px 0 rgba(255,255,255,0.70),
      inset 0 -8px 18px rgba(6,78,30,0.20),
      0 0 0 14px rgba(252,211,77,0.0),
      0 0 48px rgba(74,222,128,0.55);
  }
}
@keyframes ctaShine {
  0%, 28%  { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  40%      { opacity: 1; }
  68%, 100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
}
.copa-cta-btn {
  animation: ctaFlashy 1.8s ease-in-out infinite !important;
  border: 1.5px solid rgba(252,211,77,0.55) !important;
  overflow: hidden !important;
  isolation: isolate;
}
.copa-cta-btn > * { position: relative; z-index: 2; }
.copa-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0.0) 25%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0.0) 75%,
    transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: ctaShine 2.6s ease-in-out infinite;
  animation-delay: 0.6s;
  pointer-events: none;
  z-index: 1;
}
.copa-cta-btn:hover {
  animation: none !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 22px 50px rgba(22,163,74,0.85),
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 0 60px rgba(74,222,128,0.65) !important;
}
.copa-cta-btn:hover::before { animation-duration: 1.2s; }

/* ──────────────────── DECORAÇÕES DINO ──────────────────── */
/* Pegadas de dinossauro sutis no fundo do landing (apenas visuais) */
.copa-hero::after {
  content: '';
  position: absolute;
  bottom: 8%; left: -2%;
  width: 80px; height: 80px;
  background:
    radial-gradient(ellipse 16px 22px at 28% 38%, var(--dc-sand-dk) 60%, transparent 65%),
    radial-gradient(ellipse 12px 16px at 70% 28%, var(--dc-sand-dk) 60%, transparent 65%),
    radial-gradient(ellipse 12px 16px at 68% 64%, var(--dc-sand-dk) 60%, transparent 65%);
  opacity: 0.18;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
}

/* ──────────────────── RESPONSIVO ──────────────────── */
@media (max-width: 720px) {
  .copa-hero { padding: 80px 18px 50px !important; }
  .copa-cta-btn { width: 100% !important; justify-content: center !important; }
  .copa-cta-final { padding: 32px 22px !important; }
  .game-card { padding: 18px !important; }
}

/* ──────────────────── PEQUENOS RETOQUES ──────────────────── */
::selection { background: rgba(34,197,94,0.32); color: #fff; }
* { scrollbar-color: var(--dc-primary-2) var(--dc-bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--dc-bg); }
*::-webkit-scrollbar-thumb { background: var(--dc-primary-2); border-radius: 99px; border: 2px solid var(--dc-bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--dc-primary); }