/* Pixel Goons — site styles */
:root{--bg:#0f1014;--bg2:#171922;--card:#1c1f2a;--line:#2b2f3d;--ink:#f2f1ea;--mut:#9a9fb3;--green:#4fbf3a;--green2:#2e8a26;--gold:#f0c24b;--red:#e34a4a;--pink:#ee6ca8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--green)}
img{max-width:100%}
.pix{font-family:"Pixelify Sans","IBM Plex Sans",sans-serif;letter-spacing:.5px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* nav */
nav.top{position:sticky;top:0;z-index:20;background:rgba(15,16,20,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:22px;height:60px}
nav.top .brand{font-size:24px;color:var(--gold);text-decoration:none;display:flex;align-items:center;gap:10px}
nav.top .brand img{width:32px;height:32px;image-rendering:pixelated}
nav.top .links{display:flex;gap:18px;margin-left:auto}
nav.top .links a{color:var(--ink);text-decoration:none;font-weight:500;opacity:.85}
nav.top .links a:hover,nav.top .links a.on{color:var(--green);opacity:1}
/* buttons */
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 16px;border-radius:6px}
button:hover,.btn:hover{border-color:var(--green)}
button.primary,.btn.primary{background:var(--green);border-color:var(--green);color:#08130a;font-weight:600}
button.primary:hover{background:#63d24d}
button.gold{background:var(--gold);border-color:var(--gold);color:#1a1300;font-weight:600}
button:disabled{opacity:.45;cursor:not-allowed}
button.small{padding:6px 10px;font-size:14px}
/* hero */
.hero{padding:56px 0 30px;text-align:center}
.hero h1{font-size:64px;margin:0 0 8px;color:var(--gold);line-height:1}
.hero h1 span{color:var(--green)}
.hero p.lead{font-size:20px;color:var(--mut);max-width:640px;margin:0 auto 26px}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);padding:14px 0}
.marquee .track{display:flex;gap:14px;width:max-content;animation:roll 60s linear infinite}
.marquee img{width:128px;height:128px;border-radius:8px;border:1px solid var(--line);background:#000}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* cards / grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.card h3{margin:0 0 6px;font-size:16px;color:var(--mut);font-weight:500}
.card .big{font-size:32px;font-weight:600}
.card .sub{color:var(--mut);font-size:14px}
section{padding:40px 0}
section h2{font-size:34px;margin:0 0 14px;color:var(--gold)}
section p{max-width:70ch}
.muted{color:var(--mut)}
/* mint box */
.mintbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;max-width:520px;margin:0 auto;text-align:left}
.mintbox .row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:64px;text-align:center;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px}
.bar{height:12px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green2),var(--green));width:0%}
.status{font-size:14px;color:var(--mut);min-height:20px;margin-top:8px;word-break:break-all}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;border:1px solid var(--line);color:var(--mut)}
.pill.on{border-color:var(--green);color:var(--green)}
/* flow */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.flow .step{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:16px}
.flow .step>b:first-child{display:block;font-size:24px;color:var(--gold)} .flow .step b{color:var(--gold)}
/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:8px 0}
summary{cursor:pointer;font-weight:600}
/* gallery */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}
.toolbar select,.toolbar input{font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,256px);justify-content:center;gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer}
.tile:hover{border-color:var(--green)}
.tile img{display:block;width:256px;height:256px;background:#000}
.tile .cap{padding:6px 8px;font-size:13px;display:flex;justify-content:space-between}
.tile .cap b{color:var(--gold)}
/* modal */
.modal[hidden]{display:none}
.pg-modal,.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.pg-modal-box,.modal .box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:760px;width:100%;max-height:92vh;overflow:auto}
.pg-wallets{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.pg-wallet{display:flex;align-items:center;gap:10px}
.pg-wallet img{width:24px;height:24px}
.modal .detail{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.modal .detail img{width:512px;max-width:100%;height:auto;border-radius:8px;background:#000}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:14px}
.attrs div{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.attrs div span{display:block;color:var(--mut);font-size:12px}
@media (max-width:640px){.modal .detail{grid-template-columns:1fr}.hero h1{font-size:44px}}
/* table */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:500;font-size:14px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* toast */
#pg-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--line);padding:12px 18px;border-radius:8px;opacity:0;transition:.25s;z-index:60;max-width:90vw}
#pg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#pg-toast.err{border-color:var(--red)}
#pg-toast.ok{border-color:var(--green)}
footer{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:14px}
footer code{color:var(--ink)}
.soon{background:var(--bg2);border:1px dashed var(--line);border-radius:10px;padding:16px;text-align:center;color:var(--mut)}

/* Ponks promo slide */
.promo{padding:10px 0 0}
.promo-box{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,var(--bg2),var(--card));border:1px solid var(--gold);border-radius:14px;padding:22px}
.promo-art{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.promo-art img{width:100%;aspect-ratio:1;image-rendering:pixelated;border-radius:8px;border:1px solid var(--line);background:#000;animation:bob 3s ease-in-out infinite}
.promo-art img:nth-child(2n){animation-delay:.6s}.promo-art img:nth-child(3n){animation-delay:1.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.promo-text h2{margin:8px 0 6px;font-size:34px;color:var(--gold)}.promo-text h2 span{color:var(--green)}
.promo-text p{margin:0 0 12px;color:var(--mut)}.promo-text p b{color:var(--ink)}
@media (max-width:760px){.promo-box{grid-template-columns:1fr}}
.promo-box.one{grid-template-columns:1fr;text-align:center}.promo-box.one .promo-text p{max-width:720px;margin:0 auto 12px}
@media (max-width:600px){.grid{grid-template-columns:repeat(auto-fill,128px)}.tile img{width:128px;height:128px}.modal .detail img{width:256px}}
/* GIFs are 512 px = 64 px art x 8. Show them only at 512/256/128/32 so every art pixel stays a whole number of screen pixels and stays crisp while animating. */