:root{--edge:#1f2a24;--panel:#f4ecd6;--paper:#faf4e2;--row:#fffaf0;--line:#d9c9a3;--muted:#7a705a;--text:#1f2a24;--btn:#c8643b;--btnS:#7e3a22;--green:#4f8a5b;--greenS:#2f4a3a;--moss:#3f6b4e;--petal:#e0417a;--power:#f2b02c;--sky1:#2a1534;--sky2:#5a2754;--sky3:#a3447a;--px:4px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:"Pixelify Sans",system-ui,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;image-rendering:auto}
a{color:inherit}
.px{font-family:Silkscreen,monospace;letter-spacing:.5px}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
/* pixel frame (NES.css-style borders) */
.frame{background:var(--row);border:var(--px) solid var(--edge);box-shadow:6px 6px 0 rgba(31,42,36,.35),inset 0 0 0 3px var(--line)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:Silkscreen,monospace;font-size:15px;text-decoration:none;color:#fff;background:var(--btn);border:var(--px) solid var(--edge);padding:12px 20px;box-shadow:inset 0 -5px 0 var(--btnS),4px 4px 0 var(--edge);cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:inset 0 -5px 0 var(--btnS),6px 6px 0 var(--edge)}
.btn:active{transform:translate(2px,2px);box-shadow:inset 0 -3px 0 var(--btnS),1px 1px 0 var(--edge)}
.btn.g{background:var(--green);box-shadow:inset 0 -5px 0 var(--greenS),4px 4px 0 var(--edge)}
.btn.g:hover{box-shadow:inset 0 -5px 0 var(--greenS),6px 6px 0 var(--edge)}
.btn.ghost{background:var(--panel);color:var(--text);box-shadow:inset 0 -5px 0 var(--line),4px 4px 0 var(--edge)}
.tag{display:inline-block;font-family:Silkscreen,monospace;font-size:12px;padding:4px 10px;border:3px solid var(--edge);background:var(--power);color:var(--edge)}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,box-shadow .25s}
.nav.solid{background:rgba(31,42,36,.92);box-shadow:0 4px 0 rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:Silkscreen,monospace;font-size:22px;color:#fff;text-decoration:none;letter-spacing:1px}
.logo i{width:30px;height:30px;display:grid;place-items:center;background:var(--petal);border:3px solid var(--edge);font-style:normal;font-size:16px;box-shadow:3px 3px 0 var(--edge)}
.nav nav{display:flex;gap:18px;margin-left:auto}.nav nav a{color:#f6e3c6;text-decoration:none;font-family:Silkscreen,monospace;font-size:13px;opacity:.85}.nav nav a:hover{opacity:1;color:var(--power)}
.nav .btn{padding:9px 14px;font-size:13px}
.burger{display:none;margin-left:auto;background:none;border:3px solid #f6e3c6;color:#f6e3c6;font-size:18px;padding:4px 10px;cursor:pointer}
@media(max-width:900px){.nav nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--edge);padding:16px}.nav nav.open{display:flex}.burger{display:block}.nav .btn.navplay{display:none}}
/* hero: the island is the page */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 48%,var(--sky3) 100%);color:#fff;padding:118px 0 0;text-align:center}
#sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .intro{position:relative;z-index:3;width:min(760px,100% - 32px);margin:0 auto}
.hero h1{font-family:Silkscreen,monospace;font-size:clamp(52px,8vw,120px);line-height:.9;margin:0 0 14px;color:#ffe3ef;text-shadow:6px 6px 0 var(--edge)}
.hero h1 .ch{display:inline-block}
.hero p.lead{font-size:clamp(18px,1.8vw,22px);color:#f6dfe9;margin:0 auto 26px;max-width:600px}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cloud{position:absolute;z-index:1;width:12px;height:12px;background:#fff;box-shadow:12px 0 #fff,24px 0 #fff,36px 0 #fff,12px -12px #fff,24px -12px #fff,-12px 0 #fff,48px 0 #ffe6f0,24px 12px #ffe6f0,12px 12px #ffe6f0;opacity:.9}
.stage{position:relative;z-index:2;width:min(1240px,94vw,calc((100svh - 160px)*1.64));min-width:min(720px,100%);margin:-90px auto 0;aspect-ratio:1132/692}
.stage>img{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 74%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 74%,transparent 100%)}
.pin{position:absolute;z-index:3;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:none;cursor:pointer}
.pin:before{content:"";position:absolute;inset:8px;background:var(--power);border:3px solid var(--edge);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.pin:after{content:"";position:absolute;inset:0;border:3px solid rgba(242,176,44,.7);animation:pinPulse 2.2s ease-out infinite}
.pin.on:before,.pin:hover:before{background:#fff}
.pin:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes pinPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
.sign{position:absolute;z-index:4;width:260px;transform:translate(-50%,calc(-100% - 26px));text-align:left;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s}
.sign.on{opacity:1;transform:translate(-50%,calc(-100% - 20px))}
.sign .box{background:var(--row);color:var(--text);border:4px solid var(--edge);box-shadow:5px 5px 0 rgba(31,42,36,.45);padding:12px 14px}
.sign .box b{display:block;font-family:Silkscreen,monospace;font-size:14px;margin-bottom:4px}
.sign .box span{display:block;font-size:15px;line-height:1.4;color:var(--muted)}
.sign:after{content:"";position:absolute;left:50%;bottom:-12px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--edge);border-bottom:0}
.stagehint{position:relative;z-index:3;margin:-30px 0 0;padding-bottom:26px;font-size:15px;color:#f2c9dd}
@media(max-width:700px){.stage{width:150%;min-width:0;margin:-20px 0 0 -25%}.sign{width:210px}.sign .box span{font-size:13px}.stagehint{margin-top:-10px}}
/* hotbar (replaces the old marquee): the game's own inventory bar */
.hotbar{background:var(--edge);border-top:4px solid #000;border-bottom:4px solid #000;padding:18px 0}
.hotbar .wrap{display:flex;align-items:center;gap:22px}
.slots{display:flex;gap:8px;padding:8px;background:#2b3a32;border:4px solid #000;box-shadow:inset 0 0 0 3px #3f5246;overflow-x:auto;scrollbar-width:none;flex:0 0 auto;max-width:100%}
.slots::-webkit-scrollbar{display:none}
.slot{position:relative;flex:0 0 58px;height:58px;display:grid;place-items:center;font-size:28px;background:var(--panel);border:3px solid var(--edge);box-shadow:inset 0 -5px 0 var(--line);cursor:pointer;padding:0;transition:transform .12s}
.slot:hover{transform:translateY(-3px)}
.slot.on{background:#fff4d6;border-color:var(--power);box-shadow:inset 0 -5px 0 #f2d48a,0 0 0 3px var(--power)}
.slot:focus-visible{outline:3px solid #fff;outline-offset:2px}
.slot i{position:absolute;right:-6px;bottom:-6px;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;font-style:normal;font-family:Silkscreen,monospace;font-size:11px;background:var(--petal);color:#fff;border:2px solid var(--edge)}
.slotinfo{flex:1;min-width:0;color:#f6e3c6}
.slotinfo b{display:block;font-family:Silkscreen,monospace;font-size:16px;color:var(--power);margin-bottom:2px}
.slotinfo span{display:block;font-size:16px;line-height:1.4;color:#d9e2d6}
.slotinfo a{color:#fff;font-size:15px}
@media(max-width:900px){.hotbar .wrap{flex-direction:column;align-items:stretch;gap:14px}.slotinfo{text-align:center}}
/* sections */
section.sec{padding:110px 0}
.sec h2{font-family:Silkscreen,monospace;font-size:clamp(30px,4vw,48px);line-height:1.05;margin:12px 0 14px}
.sec .sub{color:var(--muted);max-width:640px;font-size:19px;margin:0 0 40px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.alt{background:var(--panel);border-top:4px solid var(--edge);border-bottom:4px solid var(--edge)}
.dark{background:var(--moss);color:#fbf6e6}.dark .sub{color:#d6e6d2}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps:before{content:"";position:absolute;top:58px;left:8%;right:8%;border-top:4px dashed var(--line);z-index:0}
.step{position:relative;z-index:1;padding:26px 20px;text-align:center}
.step .n{position:absolute;top:-16px;left:-12px;width:38px;height:38px;display:grid;place-items:center;background:var(--petal);color:#fff;font-family:Silkscreen,monospace;border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.step .ic{font-size:48px;line-height:1;margin:4px 0 12px;display:inline-block}
.step h3{font-family:Silkscreen,monospace;font-size:16px;margin:0 0 8px}.step p{margin:0;color:var(--muted);font-size:16px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps:before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* feature rows */
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;margin:0 0 110px}
.feat:last-child{margin-bottom:0}
.feat.rev .shot{order:2}
.shot{padding:8px;background:var(--edge);box-shadow:8px 8px 0 rgba(31,42,36,.3);overflow:hidden}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.shot:hover img{transform:scale(1.04)}
.feat h3{font-family:Silkscreen,monospace;font-size:clamp(22px,2.6vw,32px);margin:10px 0 12px}
.feat ul{list-style:none;padding:0;margin:18px 0 0}.feat li{padding:7px 0 7px 34px;position:relative}.feat li:before{content:"✦";position:absolute;left:6px;color:var(--petal)}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:26px}.feat.rev .shot{order:0}}
/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:30px}
.calc label{display:block;font-family:Silkscreen,monospace;font-size:13px;margin:16px 0 6px}
.calc input[type=range]{width:100%;accent-color:var(--petal)}
.calc .val{float:right;color:var(--petal)}
.out{background:var(--edge);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.out .k{font-family:Silkscreen,monospace;font-size:12px;color:#c9d9c9}.out .v{font-family:Silkscreen,monospace;font-size:clamp(26px,3.4vw,40px);color:var(--power)}
.out .v.p{color:#ffb3d1}
.out small{color:#a9bba9}
@media(max-width:800px){.calc{grid-template-columns:1fr}}
/* grid cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.card{padding:20px;transition:transform .15s}.card:hover{transform:translateY(-4px)}
.card .ic{font-size:34px}.card h4{font-family:Silkscreen,monospace;font-size:14px;margin:10px 0 6px}.card p{margin:0;color:var(--muted);font-size:15px}
.dark .card{color:var(--text)}
/* tokenomics */
.tok{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center}
.donut{width:300px;height:300px;border-radius:50%;background:conic-gradient(var(--petal) 0 var(--a,0%),var(--power) var(--a,0%) 100%);border:6px solid var(--edge);position:relative;box-shadow:8px 8px 0 rgba(0,0,0,.25)}
.donut:after{content:"";position:absolute;inset:70px;border-radius:50%;background:var(--panel);border:6px solid var(--edge)}
.donut span{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font-family:Silkscreen,monospace;font-size:14px;text-align:center}
.legend{display:grid;gap:16px}.legend div{display:flex;gap:14px;align-items:flex-start}.legend i{flex:0 0 22px;height:22px;border:3px solid var(--edge);margin-top:4px}
.legend b{font-family:Silkscreen,monospace;font-size:15px;display:block}
@media(max-width:800px){.tok{grid-template-columns:1fr;justify-items:center}}
/* roadmap */
.road{position:relative;margin-left:20px;border-left:4px dashed var(--line);padding-left:36px}
.ms{position:relative;margin:0 0 30px;padding:20px 22px}
.ms:before{content:"";position:absolute;left:-52px;top:22px;width:24px;height:24px;background:var(--panel);border:4px solid var(--edge)}
.ms.done:before{background:var(--green)}.ms.now:before{background:var(--power);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(242,176,44,.25)}}
.ms h4{font-family:Silkscreen,monospace;margin:0 0 6px;font-size:16px}.ms p{margin:0;color:var(--muted)}
/* faq */
details{margin:0 0 14px}details summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:Silkscreen,monospace;font-size:15px;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}details summary:after{content:"+";font-size:22px;line-height:1;transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}
details .a{padding:0 22px 20px;color:var(--muted)}
/* cta + footer */
.cta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky2),var(--sky3));color:#fff;text-align:center;padding:120px 0}
.cta h2{font-family:Silkscreen,monospace;font-size:clamp(32px,5vw,60px);margin:0 0 16px;text-shadow:4px 4px 0 var(--edge)}
footer{background:var(--edge);color:#c9d0c4;padding:44px 0;font-size:15px}
footer .wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer a{color:#f6e3c6;text-decoration:none;margin-right:18px}
.reveal{opacity:0;transform:translateY(30px)}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}