:root{
  --night-1:#080820; --night-2:#140a34; --night-3:#1d0f43;
  --neon:#9ee619; --neon-dim:#6ba50c; --neon-deep:#3d6106;
  --violet:#7c3aed; --violet-lt:#a78bfa;
  --ink:#e8ecf5; --dim:#8b93ad; --line:#2a2350;
  --gold:#ffd166; --danger:#ff5d6c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--night-1); color:var(--ink); min-height:100vh;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; overflow-x:hidden;
}
.pix{font-family:"Press Start 2P","Cascadia Mono",Consolas,monospace}

/* ---------------- shell / nav ---------------- */
.bar{position:relative; z-index:3; border-bottom:2px solid var(--line);
     background:rgba(8,8,32,.86); backdrop-filter:blur(6px);}
.bar-in{max-width:1180px; margin:0 auto; padding:14px 20px;
        display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.brand{font-size:.72rem; letter-spacing:.22em; color:var(--neon); text-decoration:none;}
nav{display:flex; gap:6px; margin-left:auto;}
nav a{font-size:.58rem; letter-spacing:.14em; padding:10px 14px; text-decoration:none;
      color:var(--dim); border:2px solid transparent;}
nav a:hover{color:var(--ink);}
nav a.on{color:var(--neon); border-color:var(--neon-deep); background:rgba(158,230,25,.07);}
.netpill{font-size:.58rem; letter-spacing:.12em; padding:9px 13px; border:2px solid var(--line);
         background:rgba(8,8,32,.7); color:var(--dim); cursor:pointer;}
.netpill.ok{color:var(--neon); border-color:var(--neon-deep); cursor:default;}

/* ---------------- hero ---------------- */
.hero{position:relative; overflow:hidden; padding:0 0 40px;
  background:
    radial-gradient(120% 80% at 50% 0%, #2b1560 0%, transparent 60%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night-3) 45%, var(--night-1) 100%);
  border-bottom:3px solid var(--line);}
.hero.slim{padding-bottom:22px;}
#sky{position:absolute; inset:0; width:100%; height:100%; display:block;}
#skyline{position:absolute; left:0; right:0; bottom:0; width:100%; height:190px; display:block;}
.hero.slim #skyline{height:110px; opacity:.75;}
.hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:26px 20px 0;}

.title{text-align:center; margin:52px 0 10px;}
.hero.slim .title{margin:22px 0 6px;}
.title h1{
  font-size:clamp(2.1rem,7.4vw,5.2rem); line-height:.95; color:var(--neon); letter-spacing:.04em;
  text-shadow:
    4px 0 0 var(--night-3), -4px 0 0 var(--night-3), 0 4px 0 var(--night-3), 0 -4px 0 var(--night-3),
    4px 4px 0 var(--night-3), -4px -4px 0 var(--night-3), 4px -4px 0 var(--night-3), -4px 4px 0 var(--night-3),
    0 8px 0 #2a1f4d, 0 14px 0 rgba(0,0,0,.55), 0 0 34px rgba(158,230,25,.45);
}
.hero.slim .title h1{font-size:clamp(1.5rem,4.4vw,2.9rem);}
.tagline{margin-top:22px; color:#c8d2e8; font-size:.95rem; line-height:1.65; max-width:660px;
         margin-left:auto; margin-right:auto; text-align:center;}
.tagline b{color:var(--neon);}

.counters{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.hero.slim .counters{margin-top:20px;}
.counter{background:rgba(10,8,34,.82); border:2px solid var(--line); padding:14px 20px; min-width:150px;}
.counter .k{font-size:.52rem; letter-spacing:.18em; color:var(--dim); text-transform:uppercase;}
.counter .v{font-size:1.05rem; color:var(--neon); margin-top:9px;}

/* ---------------- layout ---------------- */
.wrap{max-width:1180px; margin:0 auto; padding:46px 20px 80px;}
section{margin-bottom:52px;}
h2.sec{font-size:.78rem; letter-spacing:.2em; color:var(--neon); margin-bottom:6px;}
.sec-sub{color:var(--dim); font-size:.85rem; margin-bottom:20px; line-height:1.6;}
.sec-sub b{color:var(--neon);}
.panel{background:linear-gradient(180deg,#100c30,#0b0824); border:2px solid var(--line); padding:24px;}
.panel.glow{border-color:var(--neon-deep); box-shadow:0 0 0 1px rgba(158,230,25,.12), 0 14px 50px rgba(158,230,25,.07);}
.rowhead{display:flex; justify-content:space-between; align-items:center; gap:14px;
         flex-wrap:wrap; margin-bottom:18px;}

/* ---------------- mint ---------------- */
.mintgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:24px;}
@media(max-width:860px){ .mintgrid{grid-template-columns:1fr;} }
.qtyrow{display:flex; align-items:center; gap:12px; margin:18px 0;}
.step{width:52px; height:52px; font-size:1.15rem; background:#171040; color:var(--neon);
      border:2px solid var(--line); cursor:pointer;}
.step:hover:not(:disabled){border-color:var(--neon); background:#1d1550;}
.step:disabled{opacity:.3; cursor:default;}
#qty{flex:1; text-align:center; font-size:1.7rem; color:#fff; background:#0a0726;
     border:2px solid var(--line); padding:12px 0;}
.lines{margin-top:18px; border-top:1px solid var(--line); padding-top:16px;}
.line{display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:.86rem;}
.line .k{color:var(--dim);} .line .v{color:var(--ink); text-align:right;}
.line.total .v{color:var(--neon); font-size:1rem;}

/* ---------------- buttons ---------------- */
button.cta{width:100%; margin-top:20px; padding:19px; font-size:.76rem; letter-spacing:.14em;
  background:var(--neon); color:#0b1400; border:none; cursor:pointer;
  box-shadow:0 6px 0 var(--neon-deep); transition:transform .06s, box-shadow .06s;}
button.cta:hover:not(:disabled){background:#b2f52a;}
button.cta:active:not(:disabled){transform:translateY(4px); box-shadow:0 2px 0 var(--neon-deep);}
button.cta:disabled{background:#2c2c46; color:#6f7590; box-shadow:0 6px 0 #1d1d30; cursor:default;}
button.ghost{background:transparent; color:var(--neon); border:2px solid var(--neon-deep); box-shadow:none;}
button.ghost:hover:not(:disabled){background:rgba(158,230,25,.08);}
.btn-sm{font-size:.55rem; letter-spacing:.1em; padding:9px 11px; cursor:pointer;
  background:#171040; color:var(--neon); border:2px solid var(--line); white-space:nowrap;}
.btn-sm:hover:not(:disabled){border-color:var(--neon); background:#1d1550;}
.btn-sm:disabled{opacity:.35; cursor:default;}
.btn-sm.buy{background:var(--neon); color:#0b1400; border-color:var(--neon);}
.btn-sm.buy:hover:not(:disabled){background:#b2f52a;}
.btn-sm.warn{color:var(--gold); border-color:#5a4a17;}

.note{margin-top:14px; font-size:.76rem; line-height:1.6; color:var(--dim);}
.note.warn{color:var(--gold);} .note.err{color:var(--danger);}

/* ---------------- art frames ---------------- */
.preview{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;}
.frame{width:100%; max-width:320px; aspect-ratio:1; background:#05040f;
       border:2px solid var(--line); display:flex; align-items:center; justify-content:center;}
.frame svg{width:100%; height:100%; image-rendering:pixelated; display:block;}
.frame .ph{color:var(--dim); font-size:.58rem; text-align:center; line-height:2; padding:20px;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:16px;}
.card{background:#0b0824; border:2px solid var(--line); overflow:hidden;}
.card:hover{border-color:var(--neon-deep);}
.card .art{width:100%; aspect-ratio:1; background:#05040f; line-height:0;}
.card .art svg{width:100%; height:100%; image-rendering:pixelated;}
.card .meta{padding:11px 12px;}
.card .id{font-size:.58rem; color:var(--neon);}
.card .rw{font-size:.72rem; color:var(--dim); margin-top:7px;}
.card .rw b{color:var(--gold);}
.card .actions{display:flex; gap:6px; margin-top:10px;}
.card input.price{flex:1; min-width:0; background:#07051c; border:2px solid var(--line);
  color:var(--ink); font-family:inherit; font-size:.74rem; padding:8px; outline:none;}
.card input.price:focus{border-color:var(--neon-deep);}
.tag{display:inline-block; font-size:.5rem; letter-spacing:.1em; padding:3px 7px;
  border:1px solid var(--neon-deep); color:var(--neon); margin-left:6px;}
.price-big{font-size:.82rem; color:var(--gold); margin-top:7px;}
.seller{font-size:.62rem; color:var(--dim); margin-top:5px;}

.empty{padding:46px 20px; text-align:center; color:var(--dim); font-size:.85rem; line-height:1.8;
       border:2px dashed var(--line);}

/* ---------------- misc ---------------- */
table.addr{width:100%; border-collapse:collapse; font-size:.78rem;}
table.addr td{padding:9px 6px; border-top:1px solid var(--line);}
table.addr td:first-child{color:var(--dim); width:190px;}
table.addr a{color:var(--violet-lt); text-decoration:none; word-break:break-all;}
table.addr a:hover{color:var(--neon);}

footer{border-top:2px solid var(--line); padding:26px 20px 60px; color:var(--dim);
       font-size:.78rem; line-height:1.85; max-width:1180px; margin:0 auto;}
footer b{color:var(--gold);}

/* Hidden means fully below the viewport: 100% of its own height clears the
   element, the +40px clears the bottom:28px offset. At 120% the top ~20px of
   the box stayed visible on every page, a mystery rectangle above the fold. */
#toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(calc(100% + 40px));
  background:#140f38; border:2px solid var(--neon-deep); color:var(--ink);
  padding:15px 22px; font-size:.8rem; max-width:88vw; z-index:99; transition:transform .28s;}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.err{border-color:#5c1b28;}
.spin{display:inline-block; width:11px; height:11px; border:2px solid var(--neon);
      border-top-color:transparent; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-1px;}
@keyframes sp{to{transform:rotate(360deg)}}