/* ============================================================
   databallr.css — faithful clean recreation of a databallr.com page
   Real brand facts: databallr.com is a React/Vite SPA (curl only
   yields the JS shell), so tokens are pulled from its own shipped
   CSS bundle and JSON-LD. Dark theme is the site's only theme
   (html class="dark", meta theme-color #1b212c). Gold primary
   hsl(42 100% 67%), DM Sans body/UI face, Bebas Neue/Oswald/Saira
   Condensed reserved for the site's own "2K-style" ranked export
   cards — borrowed here for the gate's numerals. Logo is the site's
   own web-app-manifest-512x512.png (JSON-LD organization.logo).
   ============================================================ */
body.databallr {
  --brand: #ffcd57;            /* --primary: 42 100% 67% */
  --brand-deep: #eb8d0a;       /* --impact-gold-deep: 35 92% 48% */
  --brand-ink: #131720;        /* --primary-foreground: 220 24% 10% */
  --paper: #1b212c;            /* --background: 220 24% 14% (matches meta theme-color) */
  --ink: #fafafa;              /* --foreground: 0 0% 98% */
  --muted: #b0b5bf;            /* --muted-foreground: 220 10% 72% */
  --rule: #2e3542;             /* --border: 220 18% 22% */
  --db-card: #232a39;          /* --card: 220 24% 18% */
  --db-surface: #1f2633;       /* --impact-surface: 220 24% 16% */
  --db-sans: "DM Sans", system-ui, sans-serif;
  --db-display: "Bebas Neue", "Oswald", sans-serif;
  font-family: var(--db-sans);
  font-size: 17px;
  line-height: 1.65;
  background: var(--paper);
  color: var(--ink);
}

/* ---- header ---- */
.db-top {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--rule);
}
.db-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.db-logo img { display: block; height: 30px; width: 30px; }
.db-logo span { font-family: var(--db-sans); font-weight: 800; font-size: 20px; color: var(--brand); letter-spacing: -.01em; }
.db-nav { display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.db-nav::-webkit-scrollbar { display: none; }
.db-nav a { text-decoration: none; color: var(--muted); white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.db-nav a:hover, .db-nav a.active { color: var(--ink); }
.db-spacer { flex: 1; }
.db-search { width: 19px; height: 19px; color: var(--muted); flex: none; }
.db-signin {
  flex: none; text-decoration: none; color: var(--brand-ink); background: var(--brand);
  font-family: var(--db-sans); font-weight: 800; font-size: 13px;
  padding: 9px 16px; border-radius: 999px;
}
.db-signin:hover { filter: brightness(1.05); }

/* ---- article ---- */
.db-main { max-width: 780px; margin: 0 auto; padding: 34px 24px 90px; }
.db-tag { margin: 0 0 16px; }
.db-tag a {
  display: inline-block; text-decoration: none;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand);
  font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.db-h1 {
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 44px); line-height: 1.14; letter-spacing: -.01em;
  margin: 0 0 14px; color: var(--ink);
}
.db-stand { margin: 0 0 22px; font-size: 18px; line-height: 1.5; color: var(--muted); font-weight: 500; }

.db-byline { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 0 22px; }
.db-byline .who { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.db-byline .dot { color: var(--muted); }
.db-byline .tag2 { font-size: 13px; color: var(--muted); }
.db-share { display: flex; gap: 9px; }
.db-share i {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--db-card); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.db-share i:hover { color: var(--brand); }
.db-share svg { width: 15px; height: 15px; }

.db-hero { margin: 0 0 8px; }
.db-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; background: var(--db-surface); border-radius: 10px; }
.db-hero figcaption { padding: 10px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.db-hero .credit { color: #7d8390; white-space: nowrap; }

/* ---- body ---- */
.db-body { padding-top: 14px; }
.db-body p { margin: 0 0 20px; }
.db-body p.lead { font-weight: 500; font-size: 18.5px; color: var(--ink); }
.db-body .xhead {
  font-weight: 800;
  font-size: 25px; line-height: 1.2; letter-spacing: -.005em; margin: 30px 0 14px;
  color: var(--ink);
}
.db-pull {
  margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--brand);
  font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--ink);
}
.db-more {
  margin: 26px 0; padding: 20px 22px;
  background: var(--db-card); border: 1px solid var(--rule); border-radius: 14px;
}
.db-more h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.db-more a { display: block; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.5; padding: 8px 0; border-top: 1px solid var(--rule); }
.db-more a:first-of-type { border-top: 0; padding-top: 0; }
.db-more a:hover { color: var(--brand); }

/* ---- rewarded gate, skinned to databallr's dark design system ---- */
body.databallr .gate-screen { background: rgba(15,18,26,.72); }
body.databallr .gate-eyebrow { color: var(--brand); font-family: var(--db-sans); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
body.databallr .reward-locker {
  background: var(--db-card); border-color: var(--rule); border-radius: 16px;
  box-shadow: 0 44px 100px -34px rgba(0,0,0,.7), 0 14px 34px -18px rgba(0,0,0,.5);
}
body.databallr .reward-locker .lock-badge { display: none; }
body.databallr .reward-locker h3 {
  font-family: var(--db-display); font-weight: 400; letter-spacing: .01em;
  font-size: clamp(30px, 3.6vw, 38px); line-height: 1.1;
  color: var(--ink); margin: 2px 0 10px;
}
body.databallr .reward-locker p { font-family: var(--db-sans); font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: none; margin: 0 0 20px; }
body.databallr .rv-cta {
  background: var(--brand); color: var(--brand-ink); border-radius: 999px;
  padding: 16px 26px; font-family: var(--db-sans);
  font-weight: 800; font-size: 15px; letter-spacing: .01em;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand) 60%, transparent);
}
body.databallr .rv-cta:hover { filter: brightness(1.05); }
body.databallr .rv-later { font-family: var(--db-sans); color: var(--muted); font-weight: 600; font-size: 13.5px; }
body.databallr .rv-later:hover { color: var(--ink); }
body.databallr .reward-locker .rv-foot { display: none; }
body.databallr .reward-locker.has-included .lk-side { border-left-color: var(--rule); }
body.databallr .lk-side h4 { font-family: var(--db-sans); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 800; color: var(--brand); }
body.databallr .lk-side li { font-family: var(--db-sans); font-size: 14.5px; color: var(--ink); }
body.databallr .lk-side li svg { color: var(--brand); }
body.databallr .gate-fine { font-family: var(--db-sans); color: #7d8390; font-size: 12px; }
body.databallr .rv-floating { background: var(--db-surface); box-shadow: 0 -10px 30px -12px rgba(0,0,0,.6); }
body.databallr .rv-floating .txt, body.databallr .rv-floating button { font-family: var(--db-sans); }
body.databallr .rv-floating .txt span { color: var(--muted); }
body.databallr .rv-floating button { background: var(--brand); color: var(--brand-ink); border-radius: 999px; font-weight: 800; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .db-nav { display: none; }
}