/*
 * Veer.Game visual system
 * -----------------------
 * This file is intentionally styling-only. It is loaded last so the same
 * palette wins over page-specific legacy rules without changing markup,
 * routes, JavaScript, or component sizing.
 */

:root {
  /* Brand palette */
  --veer-bg: #020804;
  --veer-bg-deep: #06140D;
  --veer-surface: #071C12;
  --veer-surface-raised: #0A2417;
  --veer-primary: #00C853;
  --veer-neon: #00E676;
  --veer-neon-soft: #18D86E;
  --veer-highlight: #7CFF4F;
  --veer-gold: #F5B400;
  --veer-gold-bright: #FFD54A;
  --veer-gold-soft: #FFCC33;
  --veer-text: #FFFFFF;
  --veer-text-secondary: #E8E8E8;
  --veer-text-muted: #B9C2BC;

  /* Shared surfaces, borders, shadows, and gradients */
  --veer-border: rgba(0, 200, 83, .20);
  --veer-border-strong: rgba(0, 230, 118, .46);
  --veer-border-highlight: rgba(124, 255, 79, .28);
  --veer-primary-faint: rgba(0, 200, 83, .07);
  --veer-primary-glow: rgba(0, 200, 83, .24);
  --veer-neon-glow: rgba(0, 230, 118, .28);
  --veer-card-gradient: linear-gradient(160deg, #0A2417 0%, #071C12 52%, #020804 100%);
  --veer-button-gradient: linear-gradient(135deg, #7CFF4F 0%, #00E676 35%, #18D86E 68%, #00C853 100%);
  --veer-button-gradient-hover: linear-gradient(135deg, #7CFF4F 0%, #18D86E 34%, #00E676 68%, #00C853 100%);
  --veer-dark-gradient: linear-gradient(135deg, #06140D 0%, #0A2417 55%, #020804 100%);
  --veer-dark-gradient-hover: linear-gradient(135deg, #0A2417 0%, #0E2E1C 55%, #06140D 100%);
  --veer-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--veer-bg) !important;
  color: var(--veer-text) !important;
  font-family: var(--veer-font, 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep the existing page composition, but give every surface the same base. */
.page,
.section,
.content,
.legal-main,
.main,
.login-wrap {
  background-color: transparent;
}

.nav,
.veer-nav,
.legal-nav,
.topbar,
.sb,
.footer,
.legal-footer {
  background-color: var(--veer-bg-deep) !important;
  border-color: var(--veer-border) !important;
}

.mob-menu {
  background: rgba(2, 8, 4, .98) !important;
  border-color: var(--veer-border) !important;
}

.nav::after,
.footer::before,
.legal-footer::before {
  background: linear-gradient(90deg, transparent, var(--veer-primary), var(--veer-gold-bright), var(--veer-primary), transparent) !important;
}

/* Cards and panels across the public site, guides, wallet UI, and admin. */
.card,
.panel,
.grid-card,
.content-card,
.form-card,
.info-card,
.topics-card,
.cta-card,
.faq,
.legal-card,
.blog-mini-card,
.login-card,
.reach-card,
.chart-wrap,
.ps {
  background: var(--veer-card-gradient) !important;
  border-color: var(--veer-border) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(0, 200, 83, .045);
}

.card:hover,
.panel:hover,
.grid-card:hover,
.content-card:hover,
.form-card:hover,
.info-card:hover,
.topics-card:hover,
.cta-card:hover,
.faq:hover,
.faq[open],
.blog-mini-card:hover,
.ps:hover {
  border-color: var(--veer-border-strong) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .50), 0 0 24px rgba(0, 200, 83, .10);
}

/* Typography and links */
h1, h2, h3, h4, h5, h6,
.tb-title,
.card-val,
.login-logo {
  color: var(--veer-text) !important;
}

p,
li,
.intro,
.updated,
.blog-meta,
.tb-sub,
.tb-clock,
.sb-section,
.sb-foot,
.breadcrumb,
.info-item,
.faq p,
.login-sub {
  color: var(--veer-text-muted);
}

.nav-links a:hover,
.breadcrumb a:hover,
.eyebrow,
.sec-label,
.section-label,
.footer-col h4,
.live-pill,
.online-dot,
.login-logo em,
.section-label strong {
  color: var(--veer-neon) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--veer-gold-bright) !important;
  outline-offset: 3px;
}

/* Buttons: premium green primary actions, dark outlined secondary actions. */
.btn-reg,
.btn-primary,
.btn-save,
.submit-btn,
.benefit-cta,
.cat-tag,
.cta-btn,
.veer-btn-primary {
  background: var(--veer-button-gradient) !important;
  color: var(--veer-bg) !important;
  border-color: rgba(124, 255, 79, .42) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), 0 0 22px var(--veer-primary-glow);
  transition: transform .28s var(--veer-ease), box-shadow .28s var(--veer-ease), background .28s ease;
}

.btn-reg:hover,
.btn-primary:hover,
.btn-save:hover,
.submit-btn:hover,
.benefit-cta:hover,
.cat-tag:hover,
.cta-btn:hover,
.veer-btn-primary:hover {
  background: var(--veer-button-gradient-hover) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .48), 0 0 32px var(--veer-neon-glow);
}

.btn-login,
.btn-dark,
.veer-btn-outline,
.back,
.btn-sec {
  background: var(--veer-dark-gradient) !important;
  color: var(--veer-text-secondary) !important;
  border-color: var(--veer-border-strong) !important;
  transition: transform .28s var(--veer-ease), border-color .28s ease, background .28s ease;
}

.btn-login:hover,
.btn-dark:hover,
.veer-btn-outline:hover,
.back:hover,
.btn-sec:hover {
  background: var(--veer-dark-gradient-hover) !important;
  color: var(--veer-text) !important;
  border-color: var(--veer-neon) !important;
}

.btn-neon,
.btn-secondary-xl,
.veer-btn-neon {
  background: linear-gradient(135deg, var(--veer-primary), var(--veer-neon-soft) 55%, var(--veer-highlight)) !important;
  color: var(--veer-bg) !important;
  border-color: var(--veer-border-highlight) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .44), 0 0 24px rgba(124, 255, 79, .22);
}

.btn-neon:hover,
.btn-secondary-xl:hover,
.veer-btn-neon:hover {
  background: linear-gradient(135deg, var(--veer-neon-soft), var(--veer-neon) 55%, var(--veer-highlight)) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .50), 0 0 34px rgba(124, 255, 79, .32);
}

.btn-telegram {
  background: var(--veer-dark-gradient) !important;
  border-color: rgba(0, 230, 118, .42) !important;
  color: var(--veer-text) !important;
}

/* Forms, selectors, search, login, register, and payment inputs. */
input,
textarea,
select,
.fi,
.fg input,
.fg textarea,
.fg select {
  background: var(--veer-bg-deep) !important;
  color: var(--veer-text-secondary) !important;
  border-color: var(--veer-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--veer-text-muted);
}

input:focus,
textarea:focus,
select:focus,
.fi:focus,
.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  border-color: var(--veer-neon) !important;
  box-shadow: 0 0 0 3px rgba(0, 200, 83, .11), 0 0 18px rgba(0, 200, 83, .08) !important;
}

.fl,
.fg label,
.card-lbl,
.reach-lbl {
  color: var(--veer-text-muted) !important;
}

/* Badges, tabs, navigation states, tables, and feedback. */
.pbadge,
.live-pill,
.veer-pill,
.topic-chip,
.page-badge,
.card-badge,
.up {
  background: var(--veer-primary-faint) !important;
  color: var(--veer-neon) !important;
  border-color: var(--veer-border) !important;
}

.ni:hover,
.ni.active,
.nav-links a.active,
.topic-chip:hover,
.topic-chip.selected {
  background: rgba(0, 200, 83, .10) !important;
  color: var(--veer-neon) !important;
  border-color: var(--veer-neon) !important;
}

.tbl th {
  color: var(--veer-neon) !important;
  border-color: var(--veer-border) !important;
}

.tbl td,
.user-row {
  border-color: rgba(255, 255, 255, .06) !important;
}

.neutral {
  background: rgba(255, 213, 74, .10) !important;
  color: var(--veer-gold-bright) !important;
  border-color: rgba(255, 213, 74, .24) !important;
}

.toast {
  background: var(--veer-surface) !important;
  color: var(--veer-neon) !important;
  border-color: var(--veer-primary) !important;
}

/* Moderated decorative glow: readable premium depth, not a neon wash. */
.page-hero,
.hero {
  background-color: transparent !important;
}

.page-hero::before,
.hero::before {
  background: radial-gradient(ellipse at center, rgba(0, 200, 83, .14), transparent 68%) !important;
}

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

/* ================================================================
   Readability + premium white/gold refinement
   ================================================================ */

:root {
  --veer-copy: #E8E8E8;
  --veer-copy-soft: #D7DED9;
  --veer-gold-ink: #FFE08A;
  --veer-link-surface: linear-gradient(135deg, rgba(0, 200, 83, .24), rgba(0, 112, 55, .18));
}

body {
  background-image:
    radial-gradient(ellipse 900px 520px at 14% -8%, rgba(0, 143, 58, .12), transparent 62%),
    radial-gradient(ellipse 760px 520px at 88% 8%, rgba(0, 200, 83, .065), transparent 58%),
    linear-gradient(180deg, #020804 0%, #06140D 56%, #020804 100%) !important;
}

/* Reduce the green cast behind the hero so white and gold copy carries the page. */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 62% at 50% -4%, rgba(0, 143, 58, .16), transparent 64%),
    radial-gradient(ellipse 55% 48% at 90% 14%, rgba(0, 200, 83, .07), transparent 60%),
    linear-gradient(180deg, #020804 0%, #06140D 100%) !important;
}

.hero-rays,
.hero-grid {
  opacity: .38 !important;
}

.hero h1,
.page-hero h1,
.legal-main h1 {
  color: var(--veer-text) !important;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .34);
}

.hero h1 em,
.section-wrap h2 em,
.faq-strip h2 em,
.cta-section h2 em,
.page-hero h1 em,
.legal-main h1 em {
  color: var(--veer-gold-bright) !important;
  text-shadow: 0 0 22px rgba(245, 180, 0, .18);
}

.hero-sub,
.section-wrap > p,
.section-wrap p,
.page-hero p,
.page-content p,
.page-content li,
.content-card p,
.content-card li,
.legal-card p,
.legal-card li,
.faq details p,
.faq p,
.intro,
.blog-mini-card p,
.benefit-desc,
.age-notice,
.info-item,
.steps-list li {
  color: var(--veer-copy) !important;
  font-size: 15px;
  line-height: 1.82;
}

.section-wrap h2,
.faq-strip h2,
.content-card h2,
.legal-card h2 {
  color: var(--veer-text) !important;
}

.section-wrap h3,
.content-card h3,
.legal-card h3,
.benefit-card h3,
.info-card h3,
.topics-card h3,
.benefit-value,
.gift-tag,
.sec-label strong,
.eyebrow,
.page-badge {
  color: var(--veer-gold-bright) !important;
}

.sec-label::after,
.eyebrow::before {
  background: var(--veer-gold-bright) !important;
  box-shadow: 0 0 10px rgba(245, 180, 0, .28);
}

.section.alt {
  background: rgba(6, 20, 13, .55) !important;
  border-top: 1px solid rgba(255, 213, 74, .055);
  border-bottom: 1px solid rgba(255, 213, 74, .055);
}

/* Keep the existing card geometry while making surfaces quieter and clearer. */
.card,
.panel,
.grid-card,
.benefit-card,
.gift-wrap,
.content-card,
.form-card,
.info-card,
.topics-card,
.cta-card,
.faq,
.legal-card,
.blog-mini-card,
.reach-card,
.chart-wrap,
.login-card {
  background: linear-gradient(145deg, #0A2417 0%, #071C12 100%) !important;
  border-color: rgba(255, 213, 74, .16) !important;
}

.card:hover,
.panel:hover,
.grid-card:hover,
.benefit-card:hover,
.gift-wrap:hover,
.content-card:hover,
.form-card:hover,
.info-card:hover,
.topics-card:hover,
.cta-card:hover,
.faq:hover,
.faq[open],
.legal-card:hover,
.blog-mini-card:hover,
.reach-card:hover {
  border-color: rgba(0, 230, 118, .48) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .50), 0 0 22px rgba(0, 200, 83, .10);
}

.gift-code-box {
  color: var(--veer-gold-bright) !important;
  background: rgba(0, 200, 83, .11) !important;
  border-color: rgba(255, 213, 74, .48) !important;
}

.card-badge.neutral,
.neutral {
  color: var(--veer-gold-bright) !important;
}

/* Internal backlinks and related links are now visible green callouts. */
.section-wrap p a:not(.btn-primary):not(.btn-dark):not(.btn-neon):not(.btn-telegram),
.section-wrap li a:not(.btn-primary):not(.btn-dark):not(.btn-neon):not(.btn-telegram),
.content-card p a,
.content-card li a,
.legal-card p a,
.legal-card li a,
.faq p a,
.intro a,
.page-content p a,
.page-content li a {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(0, 230, 118, .38);
  border-radius: 6px;
  background: var(--veer-link-surface);
  color: var(--veer-gold-ink) !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s var(--veer-ease);
}

.section-wrap p a:hover,
.section-wrap li a:hover,
.content-card p a:hover,
.content-card li a:hover,
.legal-card p a:hover,
.legal-card li a:hover,
.faq p a:hover,
.intro a:hover,
.page-content p a:hover,
.page-content li a:hover {
  background: linear-gradient(135deg, #00C853, #008F3A);
  border-color: var(--veer-neon);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.footer-col a,
.legal-footer a {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid rgba(0, 230, 118, .24);
  border-radius: 6px;
  background: rgba(0, 200, 83, .08);
  color: var(--veer-copy-soft) !important;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.footer-col a:hover,
.legal-footer a:hover {
  background: rgba(0, 200, 83, .22);
  border-color: var(--veer-neon);
  color: #FFFFFF !important;
}

.nav-links a,
.mob-menu > a {
  color: var(--veer-copy-soft) !important;
}

.nav-links a:hover,
.mob-menu > a:hover {
  color: var(--veer-gold-bright) !important;
}

.footer-brand p,
.footer-col p,
.legal-footer {
  color: var(--veer-copy-soft) !important;
}

@media (max-width: 600px) {
  .hero-sub,
  .section-wrap > p,
  .section-wrap p,
  .page-content p,
  .page-content li,
  .content-card p,
  .content-card li,
  .legal-card p,
  .legal-card li,
  .faq p,
  .intro,
  .blog-mini-card p,
  .benefit-desc,
  .age-notice,
  .steps-list li {
    font-size: 14px;
    line-height: 1.75;
  }
}