/* ============================================================================
   TIPERO NIGHT — the site-wide look of the 2026-09-26 homepage redesign
   (night court, gold floodlights, optic-yellow accents).

   Loaded LAST on every page (after the page's own <style>), so it restyles the
   three older families without touching their markup or scripts:
     1. tipero-shell.css pages   (body.tipero-shell: SEO pages, guides, vs, pricing…)
     2. styles.css pages         (login, register, account, picks, tools, business…)
     3. the "pixel world" pages  (track-record.html, premium.html: --pix / --face tokens)
   Rule: only visual properties here. No display:none on anything a script fills,
   no content, no layout that a script measures.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Martian+Mono:wght@400;600&display=swap');

:root{
  --nt-night:#08080b; --nt-stand:#111117; --nt-card:#15151c; --nt-card2:#0e0e13; --nt-line:#26262f;
  --nt-gold:#e9b949; --nt-gold-hi:#ffe7a3; --nt-gold-deep:#a47a22; --nt-optic:#dcf23a;
  --nt-chalk:#f4f0e6; --nt-soft:#d3cec1; --nt-mute:#a29e93; --nt-dim:#6f6b62;
  --nt-win:#8fd694; --nt-loss:#ef8a7a;
  --nt-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --nt-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --nt-mono:"Martian Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
  --nt-gold-grad:linear-gradient(180deg,#ffeab0,#e9b949 58%,#c7962e);

  /* shared token names (all three families) */
  --bg:var(--nt-night); --bg2:var(--nt-card2); --text:var(--nt-chalk);
  --gold:var(--nt-gold); --gold2:var(--nt-gold-hi);
  --muted:var(--nt-mute); --muted2:var(--nt-dim);
  --green:var(--nt-win); --red:var(--nt-loss);
  --border:rgba(255,255,255,.08); --border-gold:rgba(233,185,73,.32);
  /* shell family */
  --card:var(--nt-card); --card2:rgba(255,255,255,.03); --gold-glow:rgba(233,185,73,.18); --blue:#c9d27a;
  /* styles.css family (its --gold-dim is a SOLID colour) */
  --surface:rgba(17,17,23,.92); --surface-light:rgba(23,23,31,.86);
  --gold-dim:#c7962e; --gold-glow-md:rgba(233,185,73,.24);
  --cyan:var(--nt-optic); --cyan-dim:rgba(220,242,58,.16);
  --text-muted:rgba(244,240,230,.6); --text-faint:rgba(244,240,230,.34);
  --border-light:rgba(244,240,230,.13); --red-dim:rgba(239,138,122,.18);
  /* pixel family */
  --violet:var(--nt-gold); --violet2:var(--nt-gold-hi);
  --pix:var(--nt-mono); --face:var(--nt-body);
}
/* the shell family's --gold-dim is a TRANSLUCENT tint - same name, other meaning */
body.tipero-shell{--gold-dim:rgba(233,185,73,.12)}

/* ── base ─────────────────────────────────────────────────────────────── */
html{background:var(--nt-night)}
body,body.tipero-shell{
  font-family:var(--nt-body);
  color:var(--nt-chalk);
  background-color:var(--nt-night);
  background-image:
    radial-gradient(90% 60% at 72% -8%,rgba(233,185,73,.13),transparent 60%),
    radial-gradient(60% 50% at 0% 100%,rgba(220,242,58,.04),transparent 60%);
  background-attachment:fixed;
}
::selection{background:rgba(233,185,73,.35);color:#fff}
:focus-visible{outline:2px solid var(--nt-gold);outline-offset:3px}

/* floodlight + faint court lines behind shell pages */
body.tipero-shell .shell-bg{
  background:
    radial-gradient(70% 55% at 80% -5%,rgba(233,185,73,.12),transparent 60%),
    radial-gradient(50% 40% at 10% 0%,rgba(255,231,163,.05),transparent 60%),
    linear-gradient(180deg,rgba(8,8,11,0),var(--nt-night) 85%);
}
body.tipero-shell .shell-grid{
  background-image:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(244,240,230,.05) calc(50% - 1px),rgba(244,240,230,.05) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(0deg,transparent calc(40% - 1px),rgba(244,240,230,.04) calc(40% - 1px),rgba(244,240,230,.04) calc(40% + 1px),transparent calc(40% + 1px));
  background-size:100% 100%;
}
/* styles.css background blobs: warm them to the floodlight palette */
.bg-blob{opacity:.5!important;filter:blur(90px) saturate(.6)}
.blob-b,.blob-c{background:radial-gradient(circle,rgba(233,185,73,.16),transparent 65%)!important}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,body.tipero-shell h1,body.tipero-shell h2{
  font-family:var(--nt-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.95;
  text-wrap:balance;
}
h1,body.tipero-shell h1{font-weight:900}
h3,body.tipero-shell h3{font-family:var(--nt-body);font-weight:800;letter-spacing:-.005em}
body.tipero-shell h1 .accent,.gw,.hero-copy h1 span,h1 .glow{
  background:linear-gradient(180deg,#fff1c4 0%,#ffe7a3 18%,#e9b949 58%,#a47a22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
code,kbd,.mono{font-family:var(--nt-mono)}

/* kickers / tags */
body.tipero-shell .page-tag,.section-tag,.pill,.zone-tag,.final-tag,.seat-kick,.sw-head,.tr-share-kicker{
  font-family:var(--nt-mono)!important;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nt-gold)!important;
  background:rgba(233,185,73,.08)!important;
  border:1px solid rgba(233,185,73,.32)!important;
  border-radius:999px;
}
.zone-tag,.final-tag{font-size:.66rem!important;padding:.45rem .8rem!important}

/* ── buttons ──────────────────────────────────────────────────────────── */
body.tipero-shell .btn-primary,.btn-primary,.btn-gold,.nav-cta,.final-actions .btn-gold,
.tr-capture form button,#nl-tr-btn{
  font-family:var(--nt-body)!important;font-weight:800!important;letter-spacing:0!important;text-transform:none;
  color:#17120a!important;
  background:var(--nt-gold-grad)!important;
  border:0!important;border-radius:13px!important;
  box-shadow:0 10px 30px rgba(233,185,73,.26),inset 0 1px 0 rgba(255,255,255,.5)!important;
}
.nav-cta{font-size:.9rem!important;padding:.7rem 1.05rem!important}
body.tipero-shell .btn-primary:hover,.btn-primary:hover,.btn-gold:hover,.nav-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
body.tipero-shell .btn-ghost,body.tipero-shell .btn-secondary,.btn-ghost,.btn-secondary{
  font-family:var(--nt-body);font-weight:800;
  color:var(--nt-chalk)!important;background:transparent!important;
  border:1px solid #3d3d49!important;border-radius:13px!important;box-shadow:none!important;
}
body.tipero-shell .btn-ghost:hover,body.tipero-shell .btn-secondary:hover,.btn-ghost:hover,.btn-secondary:hover{
  border-color:var(--nt-gold)!important;background:rgba(233,185,73,.08)!important;
}

/* ── launch bar ───────────────────────────────────────────────────────── */
.launch-bar{
  background:linear-gradient(90deg,#1a150a,#2a2110,#1a150a)!important;
  border-bottom:1px solid rgba(233,185,73,.25)!important;
  color:var(--nt-gold-hi)!important;font-family:var(--nt-body)!important;
}
.launch-bar strong{color:var(--nt-gold-hi)!important}
.launch-bar .lb-dot,.launch-bar .lb-pulse{background:var(--nt-optic)!important;box-shadow:0 0 8px var(--nt-optic)!important}

/* ── header / nav (all families) ──────────────────────────────────────── */
body.tipero-shell .site-header,.site-header,.nav{
  background:rgba(8,8,11,.78)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(233,185,73,.14)!important;
}
body.tipero-shell .brand-text,.brand-text,.logo b,.foot-brand b,.footer-logo{
  font-family:var(--nt-display)!important;font-weight:900!important;
  letter-spacing:.12em!important;text-transform:uppercase;color:var(--nt-chalk)!important;
}
body.tipero-shell .main-nav a,.main-nav a,.nav-links a{font-family:var(--nt-body);font-weight:600;color:#cfcabd!important}
body.tipero-shell .main-nav a:hover,.main-nav a:hover,.nav-links a:hover{color:var(--nt-gold-hi)!important}
/* a CTA that lives inside a nav list keeps the dark-on-gold button text (the link rule above is more specific) */
.nav-links a.nav-cta,.main-nav a.nav-cta,.nav-links a.btn-primary,.main-nav a.btn-primary,.nav-actions a.btn-primary,
body.tipero-shell .nav-actions a.btn-primary,body.tipero-shell .main-nav a.btn-primary,.nav-links a.btn-gold{color:#17120a!important}
.logo-svg{width:28px;height:28px;color:var(--nt-gold);flex:none}

/* ── cards & surfaces ─────────────────────────────────────────────────── */
body.tipero-shell .card,.glass,.stat-card,.hero-card,.pricing-card,.plan-card,
.scorewall,.tr-card,.tr-chart-card,.tr-capture,.tr-methodology,.tr-share-card,.final-box,
.seat-panel,.gate-panel,.board-locked-card,.kpi,.pick-card,.performance-list > *{
  background:linear-gradient(180deg,rgba(21,21,28,.95),rgba(12,12,16,.95))!important;
  border:1px solid var(--nt-line)!important;
  border-radius:20px!important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)!important;
}
body.tipero-shell .card:hover{border-color:rgba(233,185,73,.4)!important}
.scorewall,.final-box,.gate-panel{border-color:rgba(233,185,73,.35)!important}
.scorewall{background:radial-gradient(120% 100% at 50% 0%,#17140c,#0b0a08 70%)!important}

/* numbers read like a scoreboard */
.stat-value,.hstat .val,.kpi-value,.mini-value,.stat-number,.tr-card-row b,.price-amount,.price{
  font-family:var(--nt-mono)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.hstat .val.gold,.kpi-value{color:var(--nt-gold-hi)!important;text-shadow:0 0 26px rgba(233,185,73,.3)}
.hstat .val.green,.val.green{color:var(--nt-win)!important}
.hstat .lbl,.kpi-label,.stat-label,.mini-label,.tr-card-head{
  font-family:var(--nt-mono)!important;font-size:.66rem!important;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--nt-gold)!important;
}

/* filters */
.filter-btn{
  font-family:var(--nt-mono)!important;font-size:.7rem!important;letter-spacing:.1em!important;
  color:var(--nt-soft)!important;background:transparent!important;
  border:1px solid var(--nt-line)!important;border-radius:999px!important;
}
.filter-btn.active,.filter-btn:hover{color:#17120a!important;background:var(--nt-gold)!important;border-color:var(--nt-gold)!important}
.search-input,input[type=email],input[type=text],input[type=password],input[type=search]{
  font-family:var(--nt-body);color:var(--nt-chalk);
  background:rgba(12,12,17,.9)!important;border:1px solid var(--nt-line)!important;border-radius:12px!important;
}
.search-input:focus,input:focus{border-color:rgba(233,185,73,.7)!important;outline:none}

/* tables (track record) */
.results-table{font-family:var(--nt-body)}
.results-table th{
  font-family:var(--nt-mono)!important;font-size:.64rem!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nt-gold)!important;background:#0f0f14!important;
  border-bottom:1px solid rgba(233,185,73,.25)!important;
}
.results-table td{border-bottom:1px solid rgba(255,255,255,.05)!important}
.results-table tbody tr:hover td{background:rgba(233,185,73,.05)!important}
.table-shell,.table-wrap{border-radius:18px;border-color:var(--nt-line)!important}

/* LED strip + chalk line in the palette */
canvas#ledstrip{border:1px solid rgba(233,185,73,.2);border-radius:10px;background:#050506}
.chalk{background:repeating-linear-gradient(90deg,rgba(233,185,73,.35) 0 10px,transparent 10px 18px)!important}

/* ── footer ───────────────────────────────────────────────────────────── */
body.tipero-shell .site-footer,.site-footer,footer{
  border-top:1px solid var(--nt-line)!important;background:transparent!important;color:var(--nt-mute);
}
body.tipero-shell .footer-nav a,.footer-nav a,.foot-nav a{color:var(--nt-mute)!important}
body.tipero-shell .footer-nav a:hover,.footer-nav a:hover,.foot-nav a:hover{color:var(--nt-gold-hi)!important}

/* ── floating responsible-gambling / record widget (injected by rg-floating-widget.js) ── */
#rg-floating-widget{
  font-family:var(--nt-body)!important;
  background:linear-gradient(160deg,rgba(24,23,30,.97),rgba(12,12,16,.97))!important;
  border:1px solid rgba(233,185,73,.38)!important;border-radius:18px!important;
}
#rg-floating-widget .rgw-cta.primary{background:var(--nt-gold-grad)!important;color:#17120a!important;border:0!important}
#rg-floating-widget .rgw-cta.secondary{background:transparent!important;border:1px solid rgba(233,185,73,.45)!important;color:var(--nt-gold-hi)!important}

/* sitewide profit ticker (injected by utm-tracker.js; it appends its own <style> later, hence !important) */
#tipero-profit-ticker{
  background:linear-gradient(160deg,rgba(24,23,30,.97),rgba(12,12,16,.97))!important;
  border:1px solid rgba(233,185,73,.4)!important;border-radius:16px!important;font-family:var(--nt-body)!important;
}
#tipero-profit-ticker .tpt-kicker{color:var(--nt-gold)!important;font-family:var(--nt-mono)!important;font-weight:600!important;letter-spacing:.12em!important}
#tipero-profit-ticker .tpt-main strong{color:var(--nt-gold-hi)!important}
#tipero-profit-ticker .tpt-cta{background:var(--nt-gold-grad)!important;color:#17120a!important;border-radius:10px!important}

/* ── pixel pages (track record, premium): headline + header spacing ───── */
.page-head h1{font-size:clamp(3rem,8vw,6.2rem)!important;line-height:.88!important}
.page-head .page-sub{color:var(--nt-soft)!important}
.zone-head h2,.seat-panel h2,.final-box h2{font-size:clamp(2.2rem,5vw,3.8rem)!important;line-height:.92!important}

@media (prefers-reduced-motion:reduce){
  body.tipero-shell .btn-primary:hover,.btn-primary:hover,.btn-gold:hover,.nav-cta:hover{transform:none}
}