/* welcomenighttir.com — editorial casino template. Red = primary CTA, green = secondary CTA, gold = accents. */
:root{
  --bg:#0e1512; --band:#121d18; --surface:#16211c; --surface2:#1b2822; --line:#25362d;
  --text:#eaf0ea; --muted:#9fb0a4; --gold:#d8b463; --gold2:#f0d38a;
  --red:#e23b2e; --red2:#ff5548; --green:#1f9d55; --green2:#27b463;
  --wrap:1080px; --radius:14px;
  --serif:"Playfair Display",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Inter",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;font-size:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:820px;margin:0 auto;padding:0 22px}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.2;letter-spacing:-.01em}
h1{font-size:2.4rem;margin:.1em 0 .3em}
h2{font-size:1.85rem;margin:.2em 0 .5em}
h3{font-size:1.25rem;margin:1.1em 0 .4em}
p{margin:.75em 0}
.muted,small{color:var(--muted)}
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section{padding:34px 0}
.accent{color:var(--gold)}

/* section eyebrow + rule */
.kick{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:600;color:var(--gold);margin-bottom:6px}
.lead-rule{width:64px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border:0;margin:0 0 18px}

/* ---------- MASTHEAD ---------- */
header.masthead{position:sticky;top:0;z-index:60;background:rgba(11,17,14,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.masthead .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-family:var(--serif);font-weight:800;font-size:1.3rem;color:var(--text);letter-spacing:-.02em}
.brand span{color:var(--gold)}
.brand img{height:38px;width:auto}
.hamburger{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:6px 11px;font-size:1.2rem;cursor:pointer}
.nav{display:flex;align-items:center;gap:4px}
.navitem{position:relative}
.navitem>a{display:inline-flex;align-items:center;gap:4px;color:var(--text);font-weight:600;font-size:.95rem;padding:10px 12px;border-radius:8px}
.navitem>a:hover{color:var(--gold2);text-decoration:none;background:var(--surface)}
.caret{font-size:.7rem;color:var(--muted)}
.submenu{position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.navitem.has-sub:hover .submenu{display:block}
.submenu a{display:block;color:var(--text);padding:8px 12px;border-radius:8px;font-size:.92rem}
.submenu a:hover{background:var(--surface2);color:var(--gold2);text-decoration:none}
@media(max-width:900px){
  .hamburger{display:block}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 14px;display:none;max-height:80vh;overflow:auto}
  .nav.open{display:flex}
  .navitem>a{padding:12px 6px;border-bottom:1px solid var(--line)}
  .submenu{position:static;display:none;border:0;box-shadow:none;padding:0 0 6px 12px;background:transparent}
  .navitem.has-sub.open .submenu{display:block}
}

/* ---------- HERO (full-bleed banded header for contrast vs body) ---------- */
main>.hero, header.hero{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:46px calc(50vw - 50%) 34px;
  background:
    radial-gradient(1100px 440px at 74% -35%, rgba(216,180,99,.16), transparent 68%),
    linear-gradient(180deg,#17271f 0%, #12201a 55%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -24px 48px -34px #000;
  position:relative;
}
main>.hero::after, header.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.65}
.hero h1{font-size:2.6rem;max-width:22ch}
.hero>p{font-size:1.14rem;color:#d3ddd4;max-width:64ch}
.lede{font-size:1.18rem;color:#cdd8cf;max-width:60ch}
/* first content block gets a little breathing room below the raised hero */
main>.hero + *{margin-top:26px}
/* affiliate-table heading (sits directly above the toplist) */
.tl-head{font-family:var(--serif);font-weight:800;font-size:1.55rem;margin:8px 0 10px}

/* Mobile: keep H1 + author + updated date + table H2 + table above the fold */
@media(max-width:820px){
  header.masthead .wrap{min-height:54px}
  main>.hero{padding-top:12px;padding-bottom:12px}
  .hero h1{font-size:1.5rem;line-height:1.18;max-width:none;margin:.1em 0 .35em}
  .hero>p,.hero .lede{display:none}          /* intro repeats in the body; hide to lift the table up */
  .crumbs{margin:0 0 4px}
  .byline{gap:6px 12px;margin-top:8px;align-items:center}
  .byline .who{gap:9px}
  .byline .who img,.avatar{width:34px;height:34px;flex:0 0 34px}
  .byline .who b{font-size:.95rem}
  .byline .who span{display:none}            /* hide the role/fact-check line; keep the author name */
  .meta-chips .chip:not(.u){display:none}    /* keep only the "Updated <date>" chip */
  .meta-chips .chip.u{font-size:.75rem;padding:2px 10px}
  .tl-head{font-size:1.25rem;margin:2px 0 8px}
  main>.hero + *{margin-top:14px}
}
.byline{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:18px}
.byline .who{display:flex;align-items:center;gap:12px}
.byline .who img,.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface2);border:1px solid var(--line)}
.avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-family:var(--sans);font-size:.95rem;flex:0 0 44px}
.byline .who b{font-size:.98rem}.byline .who a{color:var(--gold2)}
.byline .who span{display:block;font-size:.85rem;color:var(--muted)}
.meta-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.8rem;color:var(--muted)}
.chip b{color:var(--text)}
@media(max-width:600px){header.hero h1{font-size:2rem}}

.ridge{height:4px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
main{display:block}

/* ---------- FACTS ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 22px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.fact .n{font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--gold)}
.fact .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
/* mobile: keep all 4 facts in a single compact row */
@media(max-width:640px){
  .facts{grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 12px}
  .fact{padding:9px 4px;border-radius:9px}
  .fact .n{font-size:1.05rem}
  .fact .l{font-size:.56rem;letter-spacing:.01em;line-height:1.18}
}

/* ---------- TOPLIST (ccard) ---------- */
.toplist-mobile{display:none}
.toplist-desktop{display:block}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:12px 0;padding:16px 18px}
.toplist-desktop .ccard{display:grid;grid-template-columns:64px 132px 1.3fr 1.5fr 168px;gap:16px;align-items:center}
.ccard.top1{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 14px 34px rgba(0,0,0,.35)}
.crest-wrap{text-align:center;position:relative}
.ribbon{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;color:#1a1200;background:var(--gold);border-radius:6px;padding:2px 0;margin-bottom:6px}
.crest{width:46px;height:46px;margin:0 auto;border-radius:50%;background:var(--surface2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.crest span{font-family:var(--serif);font-weight:800;font-size:1.2rem;color:var(--gold)}
.top1 .crest{background:var(--gold);border-color:var(--gold2)}
.top1 .crest span{color:#1a1200}
.clogo .chip{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:10px;height:64px}
.clogo img{max-height:44px;max-width:100%;object-fit:contain}
.cname{font-family:var(--serif);font-weight:800;font-size:1.15rem;margin:0}
.crate{margin:.2em 0;font-size:.9rem;color:var(--muted)}
.stars{color:var(--gold);letter-spacing:1px}
.ctag{display:inline-block;font-size:.78rem;color:var(--gold2);background:rgba(216,180,99,.1);border:1px solid rgba(216,180,99,.25);border-radius:6px;padding:2px 8px;margin:4px 0}
.cpills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pill{font-size:.72rem;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted)}
.pill.ok{color:var(--green2);border-color:#1f5b39}
.cbonus .lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--muted)}
.cbonus .amt{font-weight:700;font-size:1.02rem;color:var(--text)}
.cbonus .spd{font-size:.82rem;color:var(--muted);margin-top:2px}
.cact{text-align:center}
.claimline{font-size:.74rem;color:var(--muted);margin-top:6px}

/* CTA buttons */
.banner-cta{display:block;width:100%;font-weight:800;text-align:center;padding:13px 16px;border-radius:11px;color:#fff;border:0;cursor:pointer;font-size:.98rem;letter-spacing:.01em;transition:transform .1s,filter .15s}
.banner-cta:hover{text-decoration:none;filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.banner-cta.red{background:linear-gradient(180deg,var(--red2),var(--red))}
.banner-cta.green{background:linear-gradient(180deg,var(--green2),var(--green))}
.cta{display:inline-block;background:linear-gradient(180deg,var(--red2),var(--red));color:#fff;font-weight:800;padding:12px 22px;border-radius:11px;text-align:center}
.cta:hover{color:#fff;text-decoration:none;filter:brightness(1.08)}
.cta.sm{padding:9px 15px;font-size:.9rem}

/* Mobile toplist card */
@media(max-width:820px){
  .toplist-desktop{display:none}
  .toplist-mobile{display:block}
  .toplist-mobile .ccard{text-align:center;position:relative;padding:20px 16px}
  .toplist-mobile .rank{position:absolute;top:12px;left:14px;font-family:var(--serif);font-weight:800;color:var(--gold);font-size:1.1rem}
  .toplist-mobile .clogo .chip{display:inline-flex;height:66px;padding:12px 18px;margin:4px auto}
  .toplist-mobile .cname{font-size:1.25rem;margin-top:4px}
  .toplist-mobile .cpills{justify-content:center}
  .toplist-mobile .cbonus{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}
  .toplist-mobile .amt{font-size:1.1rem}
  .wm{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  .wm div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px}
  .wm span{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase}
  .wm b{font-size:.86rem}
  .nocode{font-size:.75rem;color:var(--muted);margin-top:8px}
  .cdesc{font-size:.9rem;text-align:left}
}

/* ---------- BOX CALLOUTS ---------- */
.box{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:18px 0;background:var(--surface)}
.box h3{margin:.1em 0 .3em;font-size:1.1rem}
.box.warn{border-left:4px solid var(--red);background:rgba(226,59,46,.06)}
.box.info{border-left:4px solid var(--gold);background:rgba(216,180,99,.06)}
.note{border-left:4px solid var(--gold);background:var(--surface);padding:12px 18px;border-radius:0 10px 10px 0;margin:16px 0}
.note.warn{border-color:var(--red)}
.disclosure{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:.85rem;color:var(--muted);margin:16px 0}
.disclosure b{color:var(--text)}
.keyfacts{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin:18px 0;font-size:.92rem}

/* ---------- VERTICAL TILES / grid ---------- */
.vgrid,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0}
.vtile,.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;color:var(--text);display:block}
.vtile:hover,.gcard:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-2px);transition:.15s}
.vtile .ico{font-size:1.7rem}
.vtile h3,.gcard b{font-family:var(--serif);font-size:1.15rem;margin:.3em 0}
.gcard b{display:block}
.vtile p,.gcard span{color:var(--muted);font-size:.92rem}
.more{color:var(--gold2);font-weight:600;font-size:.9rem;display:inline-block;margin-top:8px}

/* ---------- DATA TABLE ---------- */
.tablewrap,.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{border:1px solid var(--line);padding:10px 12px;text-align:left}
table.data thead th{background:var(--surface2);color:var(--text);font-family:var(--cond);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}
table.data td.brand,table.data th.brand{font-weight:700}
table.data tbody tr:nth-child(even){background:var(--surface)}
.bmini{font-size:.88rem}

/* ---------- REVIEWS (mini) ---------- */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:18px 0}
.review .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.review .head .chiplogo,.review .head img{background:#fff;border-radius:10px;padding:8px;height:58px;max-width:150px;object-fit:contain}
.review .head .r{margin-left:auto;text-align:right}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.proscons ul{margin:6px 0;padding-left:20px}
.pros li{color:#bfe9c9}.cons li{color:#f0c3bd}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:2px 18px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;font-family:var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding-bottom:6px}

/* step-by-step guidelines */
ol.steps{list-style:none;counter-reset:step;padding:0;margin:16px 0}
ol.steps li{counter-increment:step;position:relative;padding:14px 18px 14px 62px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0}
ol.steps li::before{content:counter(step);position:absolute;left:14px;top:13px;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1a1200;font-family:var(--serif);font-weight:800;display:flex;align-items:center;justify-content:center}
ol.steps li b{display:block;margin-bottom:3px;font-size:1.02rem}

.crumbs{font-size:.82rem;color:var(--muted);margin:0 0 6px}
.crumbs a{color:var(--muted)}
.badgeno{font-weight:800;font-size:.72rem;color:#1a1200;background:var(--gold);border-radius:6px;padding:2px 8px;display:inline-block}

/* RG block (legacy) styled as info box */
.rg{background:var(--surface2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:16px 20px;margin:24px 0;font-size:.92rem}
.rg h3{margin-top:.2em;font-size:1.15rem}
.rg .lines{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rg .lines span{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.85rem}

/* ---------- FOOTER ---------- */
footer.site{background:var(--surface);border-top:1px solid var(--line);margin-top:40px;padding:34px 0 26px;font-size:.92rem}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
footer.site .brand img{height:34px;margin-bottom:8px}
footer.site h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--text);font-size:.9rem;margin:0 0 8px}
footer.site a{color:var(--muted);display:block;margin:6px 0}
footer.site a:hover{color:var(--gold2)}
.rgline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:22px;padding-top:16px;font-size:.85rem;color:var(--muted)}
.rgline a{color:var(--gold2);display:inline}
.b21{background:var(--red);color:#fff;font-weight:800;border-radius:5px;padding:1px 8px}
.sep{color:var(--line)}
.disc{color:var(--muted);font-size:.8rem;margin-top:14px;line-height:1.6}
.disc .ad{background:var(--surface2);border:1px solid var(--line);border-radius:5px;padding:1px 7px;color:var(--text);font-weight:700;margin-right:6px}
@media(max-width:700px){footer.site .cols{grid-template-columns:1fr 1fr}}

/* ---------- COOKIE CONSENT ---------- */
#cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;z-index:80;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#cookie-consent.hide{display:none}
#cookie-consent h4{margin:0 0 6px;font-size:1.05rem}
#cookie-consent p{font-size:.86rem;color:var(--muted);margin:0 0 12px}
.cc-btns{display:flex;flex-wrap:wrap;gap:8px}
.cc-btn{border-radius:9px;padding:9px 16px;font-weight:700;cursor:pointer;border:1px solid var(--line);font-size:.88rem}
.cc-btn.primary{background:var(--gold);color:#1a1200;border-color:var(--gold)}
.cc-btn.ghost{background:transparent;color:var(--text)}