/* ============================================================================
   LIL FREAKS — site stylesheet
   Theme: dark neon pixel. Gritty, high-contrast, arcade-cabinet energy.
   Deliberately NOT pastel/cream — the art is dark, so the site is dark.
   ========================================================================== */

:root{
  --bg:        #0B0A14;
  --bg2:       #100E1C;
  --panel:     #161327;
  --panel2:    #1C1832;
  --line:      #2A2544;
  --line-hi:   #3D3560;

  --ink:       #EDEBF7;
  --ink-soft:  #B9B3D4;
  --muted:     #7E7799;

  --acid:      #B4FF39;   /* primary accent — "free", CTAs */
  --acid-dk:   #7FD400;
  --pink:      #FF2E88;   /* hot accent — alerts, "hot" chips */
  --blue:      #6096E0;   /* pulled from the art */
  --orange:    #F68C4E;   /* pulled from the art */
  --gold:      #F4C44A;   /* mythic */

  --display: "Archivo Black", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 4px;                 /* pixel-hard corners, not soft */
  --maxw: 1180px;
  --glow-a: 0 0 22px rgba(180,255,57,.28);
  --glow-p: 0 0 22px rgba(255,46,136,.30);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint pixel-grid texture */
  background-image:
    linear-gradient(rgba(96,150,224,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,150,224,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--acid); color:#0B0A14; }
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 18px; }
@media(min-width:720px){ .wrap{ padding:0 30px; } }

.mono{ font-family: var(--mono); }
.dim{ color: var(--muted); }

/* ─────────────────────────────── ticker ─────────────────────────────── */
.ticker{
  background: var(--acid); color:#0B0A14;
  border-bottom: 2px solid #000;
  overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight:700;
  letter-spacing: .12em; padding: 7px 0;
  position: relative; z-index: 60;
}
.ticker-track{
  display:inline-block;
  animation: slide 42s linear infinite;
}
.ticker-track span{ padding: 0 10px; }
.ticker-track .dot{ color:#0B0A14; opacity:.45; padding:0; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ─────────────────────────────── nav ─────────────────────────────── */
.nav{
  position: sticky; top:0; z-index:50;
  background: rgba(11,10,20,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:18px; height:64px; }

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-mark{
  width:30px; height:30px; display:grid; place-items:center;
  background: var(--acid); color:#0B0A14;
  font-family: var(--display); font-size:13px;
  border:2px solid #000; box-shadow: 3px 3px 0 #000;
}
.brand-txt{
  font-family: var(--display); font-size:15px; letter-spacing:.06em;
}

.nav-links{ display:none; gap:22px; margin-left:auto; }
.nav-links a{
  font-size:13.5px; font-weight:500; color: var(--ink-soft);
  letter-spacing:.02em; transition: color .15s;
  position:relative;
}
.nav-links a:hover{ color: var(--acid); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px;
  height:2px; background: var(--acid); transition: right .2s;
}
.nav-links a:hover::after{ right:0; }

/* Marketplace — not built yet. Rendered as a span (not a link) so it cannot be
   clicked, focused, or crawled. Greyed out so it reads as unavailable. */
.nav-soon{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color: #5B5578;                       /* dimmed vs the --ink-soft links */
  cursor: not-allowed;
  user-select: none;
  -webkit-user-select: none;
}
.nav-soon-tag{
  font-family: var(--mono); font-style: normal;
  font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 5px; border-radius:2px;
  color:#5B5578; border:1px solid #322D4A;
  background: rgba(50,45,74,.28);
  line-height:1.25;
}
@media(min-width:900px){ .nav-links{ display:flex; } }

/* ─────────────────────────── rarity bands ─────────────────────────── */
.band-wrap{ margin-top:38px; }
.band-h{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin-bottom:8px; color:var(--ink); }
.band-sub{ font-size:14px; color:var(--ink-soft); max-width:62ch; line-height:1.6; margin-bottom:20px; }
.band-sub i{ color:var(--acid); font-style:italic; }
.band-sub b{ color:var(--ink); }

.band-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:760px){ .band-grid{ grid-template-columns:1fr 1fr; } }

.band-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:20px;
}
.band-card-hi{ border-color:rgba(180,255,57,.34); background:linear-gradient(180deg,rgba(180,255,57,.045),transparent 60%),var(--panel); }
.band-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.band-name{ font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--ink); }
.band-ids{ font-size:11.5px; color:var(--acid); letter-spacing:.04em; }
.band-note{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.5; }

.band-list{ list-style:none; padding:0; margin:0; }
.band-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px dashed var(--line);
  font-size:13px; color:var(--ink-soft);
}
.band-list li:last-child{ border-bottom:0; }
.band-list li b{ color:var(--ink); font-family:var(--mono); font-size:12.5px; }
.band-list li.hl span{ color:var(--acid); font-weight:700; }
.band-list li.hl b{ color:var(--acid); }

.band-foot{
  margin-top:16px; font-size:10.5px; color:var(--muted);
  letter-spacing:.04em; text-align:center; line-height:1.7;
}

/* ─────────────────────────────── buttons ─────────────────────────────── */
.btn{
  font-family: var(--sans); font-weight:700; font-size:14px;
  padding: 12px 20px;
  background: var(--panel2); color: var(--ink);
  border: 2px solid var(--line-hi);
  border-radius: var(--r);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space: nowrap;
}
.btn:hover{ border-color: var(--acid); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; border-color: var(--line); }

.btn-primary{
  background: var(--acid); color:#0B0A14;
  border-color:#000;
  box-shadow: 4px 4px 0 #000;
}
.btn-primary:hover{ box-shadow: 5px 5px 0 #000; background:#C6FF5E; }

.btn-sm{ padding:9px 15px; font-size:13px; }
.btn-xs{ padding:6px 11px; font-size:11.5px; font-family:var(--mono); }
.btn-wide{ width:100%; padding:16px; font-size:15px; }
.btn-connect{ margin-left:auto; }
@media(min-width:900px){ .btn-connect{ margin-left:0; } }

/* ─────────────────────────────── hero ─────────────────────────────── */
.hero{ padding: 62px 0 76px; position:relative; }
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 380px at 78% 18%, rgba(96,150,224,.13), transparent 70%),
    radial-gradient(520px 320px at 8% 78%, rgba(255,46,136,.10), transparent 70%);
}
.hero-in{
  display:grid; gap:52px; position:relative;
  grid-template-columns: 1fr;
}
@media(min-width:940px){
  .hero-in{ grid-template-columns: 1.15fr .85fr; align-items:center; gap:44px; }
}

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{
  font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--line-hi); border-radius:2px;
  color: var(--ink-soft); background: rgba(22,19,39,.7);
}
.chip-hot{ border-color: var(--pink); color: var(--pink); box-shadow: 0 0 14px rgba(255,46,136,.22); }

.hero-title{
  font-family: var(--display);
  font-size: clamp(52px, 12vw, 108px);
  line-height: .88; margin:0 0 22px; letter-spacing:-.01em;
}
.hero-title .l1{ display:block; color: var(--ink); }
.hero-title .l2{
  display:block;
  color: var(--acid);
  text-shadow: 5px 5px 0 rgba(96,150,224,.30);
}
@media(min-width:940px){ .hero-title .l2{ text-shadow: 7px 7px 0 rgba(96,150,224,.32); } }

.hero-lede{
  font-size: 17px; color: var(--ink-soft); max-width: 52ch; margin: 0 0 28px;
}
.hero-lede b{ color: var(--acid); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px; }

.facts{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
@media(min-width:560px){ .facts{ grid-template-columns: repeat(4,1fr); } }
.fact{ background: var(--bg2); padding:15px 14px; }
.fact-n{
  display:block; font-family: var(--display); font-size:23px; color: var(--ink);
  line-height:1.1;
}
.fact-l{
  display:block; font-family: var(--mono); font-size:10.5px; color: var(--muted);
  letter-spacing:.11em; text-transform:uppercase; margin-top:5px;
}

/* hero art */
.hero-art{ position:relative; justify-self:center; max-width:440px; width:100%; }
.art-frame{
  position:relative; border:2px solid var(--line-hi); border-radius:var(--r);
  background: var(--panel); padding:14px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.55), var(--glow-a);
}
.art-frame img{
  width:100%; height:auto;
  image-rendering: pixelated;
  border-radius:2px;
}
.art-tag{
  position:absolute; left:14px; bottom:14px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.1em;
  background: var(--gold); color:#0B0A14; padding:5px 9px;
  border:2px solid #000; font-weight:700;
}
.art-shadow{
  position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border:2px solid var(--blue); border-radius:var(--r); opacity:.35;
}

/* ─────────────────────────────── sections ─────────────────────────────── */
.sec{ padding: 74px 0; border-top:1px solid var(--line); }
.sec-alt{ background: var(--bg2); }
.sec-head{ margin-bottom: 34px; }
.sec-head h2{
  font-family: var(--display); font-size: clamp(28px, 5vw, 42px);
  margin:0 0 10px; letter-spacing:-.01em;
}
.sec-sub{ color: var(--muted); font-size:15.5px; margin:0; max-width:62ch; }

/* ─────────────────────────────── grid / gallery ─────────────────────────────── */
.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(2, 1fr);
}
@media(min-width:560px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media(min-width:820px){ .grid{ grid-template-columns: repeat(5,1fr); } }

.tok{
  background: var(--panel); border:2px solid var(--line); border-radius:var(--r);
  padding:9px; transition: transform .14s, border-color .16s, box-shadow .16s;
  cursor:default;
}
.tok:hover{ transform: translateY(-4px); border-color: var(--acid); box-shadow: var(--glow-a); }
.tok img{
  width:100%; height:auto; image-rendering: pixelated;
  border-radius:2px; background:#000;
}
.tok-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:6px; }
.tok-id{ font-family: var(--mono); font-size:11.5px; color: var(--ink-soft); }
.tok-tier{
  font-family: var(--mono); font-size:9.5px; letter-spacing:.08em;
  padding:3px 6px; border-radius:2px; border:1px solid currentColor;
}
.t-common   { color:#8B84A8; }
.t-uncommon { color: var(--acid); }
.t-rare     { color: var(--blue); }
.t-epic     { color:#B585FF; }
.t-legendary{ color: var(--orange); }
.t-mythic   { color: var(--gold); box-shadow:0 0 12px rgba(244,196,74,.35); }

.grid-ctl{ display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap; }
.grid-hint{ font-size:12px; }

/* ─────────────────────────────── eligibility ─────────────────────────────── */
.check-wrap{ max-width: 680px; }
.check-in{ display:flex; gap:10px; flex-wrap:wrap; }
.input{
  flex:1 1 300px; min-width:0;
  padding:14px 16px; font-size:14px;
  background: var(--bg); color: var(--ink);
  border:2px solid var(--line-hi); border-radius: var(--r);
}
.input:focus{ outline:none; border-color: var(--acid); box-shadow: var(--glow-a); }
.input::placeholder{ color: var(--muted); }
.hint{ font-size:13.5px; color: var(--ink-soft); margin:12px 0 0; }
.hint.dim{ color: var(--muted); font-size:12.5px; }

.res{
  margin-top:20px; border:2px solid var(--line-hi); border-radius:var(--r);
  background: var(--panel); overflow:hidden;
}
.res-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-size:14px;
}
.res-row:last-child{ border-bottom:0; }
.res-row span{ color: var(--muted); }
.res-row b{ font-family: var(--mono); font-size:13.5px; color: var(--ink); }
.res-hi{ background: rgba(180,255,57,.05); }
.res-hi b{ color: var(--acid); }

/* ─────────────────────────────── pricing ─────────────────────────────── */
.lad{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:640px){ .lad{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:980px){ .lad{ grid-template-columns: repeat(4,1fr); } }

.lad-card{
  background: var(--panel); border:2px solid var(--line); border-radius:var(--r);
  padding:24px 20px; display:flex; flex-direction:column;
}
.lad-tag{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--muted); margin-bottom:12px;
}
.lad-price{
  font-family: var(--display); font-size:40px; line-height:1; margin-bottom:14px; color: var(--ink);
}
.lad-card p{ font-size:14px; color: var(--ink-soft); margin:0; }
.lad-card b{ color: var(--ink); }

.lad-free{ border-color: var(--acid); box-shadow: var(--glow-a); }
.lad-free .lad-price{ color: var(--acid); }
.lad-cap{ border-color: var(--pink); }
.lad-cap .lad-price{ color: var(--pink); font-size:32px; }

.note{
  margin-top:28px; padding:16px 18px; font-size:14px;
  background: var(--panel); border-left:3px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0; color: var(--ink-soft);
}
.note b{ color: var(--ink); }
.note-warn{ border-left-color: var(--orange); font-size:13.5px; }
.note code{ font-size:12.5px; color: var(--acid); }

/* ─────────────────────────────── rewards ─────────────────────────────── */
.rew{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:800px){ .rew{ grid-template-columns: repeat(2,1fr); } }

.rew-card{
  background: var(--panel); border:2px solid var(--line); border-radius:var(--r);
  padding:28px 24px;
}
.rew-card-hi{ border-color: var(--acid); box-shadow: var(--glow-a); }
.rew-ico{
  font-size:26px; color: var(--acid); margin-bottom:14px; line-height:1;
}
.rew-card-hi .rew-ico{ color: var(--gold); }
.rew-card h3{
  font-family: var(--display); font-size:22px; margin:0 0 12px;
}
.rew-card p{ font-size:14.5px; color: var(--ink-soft); margin:0 0 16px; }
.rew-card p b{ color: var(--ink); }
.rew-line{
  font-size:13px; color: var(--ink-soft); padding:5px 0;
  display:flex; align-items:center; gap:9px;
}
.rew-line.dim{ color: var(--muted); }
.dotmark{
  width:6px; height:6px; background: var(--acid); flex:0 0 auto; display:block;
}
.rew-card-hi .dotmark{ background: var(--gold); }

/* ─────────────────────────────── mint ─────────────────────────────── */
.mint-wrap{ display:grid; gap:24px; grid-template-columns:1fr; }
@media(min-width:900px){ .mint-wrap{ grid-template-columns: 1.05fr .95fr; } }

.mint-panel{
  background: var(--panel); border:2px solid var(--line-hi); border-radius:var(--r);
  padding:28px 24px;
}
.mint-top{ margin-bottom:22px; }
.mint-lbl{
  display:block; font-family: var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--muted); margin-bottom:11px;
}
.qty{ display:flex; gap:8px; flex-wrap:wrap; }
.qty-b{
  width:52px; height:52px;
  background: var(--bg); color: var(--ink-soft);
  border:2px solid var(--line-hi); border-radius:var(--r);
  font-family: var(--display); font-size:17px; cursor:pointer;
  transition: all .14s;
}
.qty-b:hover{ border-color: var(--acid); color: var(--ink); }
.qty-b.on{
  background: var(--acid); color:#0B0A14; border-color:#000;
  box-shadow: 3px 3px 0 #000;
}

.mint-cost{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 0; margin-bottom:20px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.mint-cost span{ font-family: var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.mint-cost b{ font-family: var(--display); font-size:34px; color: var(--acid); }

.mint-side{
  background: var(--bg2); border:2px solid var(--line); border-radius:var(--r);
  padding:26px 22px;
}
.side-h{ font-family: var(--display); font-size:17px; margin:0 0 8px; }
.mint-side > p{ margin:0 0 14px; font-size:13.5px; }
.code{
  background:#000; border:1px solid var(--line); border-radius:var(--r);
  padding:14px; font-size:11.5px; line-height:1.7; color: var(--ink-soft);
  overflow-x:auto; margin:0 0 12px; white-space:pre;
}
.side-facts{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.sf{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13px; padding:6px 0;
}
.sf span{ color: var(--muted); }
.sf b{ font-family: var(--mono); font-size:12.5px; color: var(--ink); }

/* ─────────────────────────────── contract ─────────────────────────────── */
.con{ display:grid; gap:28px; grid-template-columns:1fr; }
@media(min-width:900px){ .con{ grid-template-columns: .9fr 1.1fr; } }

.con-facts{
  display:grid; grid-template-columns:1fr; gap:1px;
  background: var(--line); border:1px solid var(--line); align-content:start;
}
.cf{
  background: var(--bg2); padding:13px 16px;
  display:flex; justify-content:space-between; gap:14px; font-size:13.5px;
}
.cf-k{ color: var(--muted); font-family: var(--mono); font-size:11.5px; letter-spacing:.06em; }
.cf-v{ color: var(--ink); font-weight:500; text-align:right; }

.con-list ul{ margin:0 0 20px; padding:0; list-style:none; }
.con-list li{
  font-size:14.5px; color: var(--ink-soft);
  padding:9px 0 9px 22px; position:relative; border-bottom:1px solid var(--line);
}
.con-list li::before{
  content:'▸'; position:absolute; left:0; color: var(--acid);
}
.con-list li b{ color: var(--ink); }
.con-list code{ font-size:12.5px; color: var(--acid); }

.con-addr{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; background: var(--panel); border:1px solid var(--line-hi);
  border-radius: var(--r);
}
.addr{
  font-size:12.5px; color: var(--acid); word-break:break-all;
  border-bottom:1px dashed rgba(180,255,57,.4);
}
.addr:hover{ border-bottom-style:solid; }

/* ─────────────────────────────── footer ─────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding:44px 0 34px; }
.foot-word{
  font-family: var(--display); font-size: clamp(38px, 11vw, 104px);
  line-height:.9; letter-spacing:-.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-hi);
  margin-bottom:22px;
}
.foot-row{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color: var(--muted);
}

/* ─────────────────────────────── toasts ─────────────────────────────── */
.toasts{
  position:fixed; right:16px; bottom:16px; z-index:200;
  display:flex; flex-direction:column; gap:10px; max-width: min(400px, calc(100vw - 32px));
}
.toast{
  background: var(--panel2); border:2px solid var(--line-hi); border-left-width:4px;
  border-radius: var(--r); padding:13px 16px; font-size:13.5px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: pop .22s ease-out;
}
.toast.ok{ border-left-color: var(--acid); }
.toast.err{ border-left-color: var(--pink); }
.toast.info{ border-left-color: var(--blue); }
.toast b{ display:block; margin-bottom:3px; }
@keyframes pop{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* ─────────────────────────────── misc ─────────────────────────────── */
.skeleton{
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%);
  background-size: 200% 100%; animation: shim 1.4s infinite;
  aspect-ratio: 1; border-radius:2px;
}
@keyframes shim{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}