/* =======================================================================
   PUMP CAT — "ISSUE #01" comic book stylesheet
   Ink borders + halftone + hard shadows + 3D page perspective
   ======================================================================= */

:root{
  --ink:#05070a;
  --ink-2:#0b120f;
  --paper:#f4eedb;
  --acid:#5cff9d;
  --acid-2:#0fd968;
  --cyan:#3ce7f2;
  --magenta:#ff3ea5;
  --gold:#ffd93d;
  --line:4px;
  --shadow:10px 10px 0 var(--ink);
  --shadow-sm:6px 6px 0 var(--ink);
  --shadow-acid:10px 10px 0 rgba(15,217,104,.55);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Comic Neue", system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--acid); color:var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#03060a; }
::-webkit-scrollbar-thumb{ background:var(--acid-2); border:3px solid #03060a; border-radius:8px; }

.container-x{ width:min(1240px, 92vw); margin-inline:auto; }

/* ---------------- global film effects ---------------- */
.fx-grain,.fx-scan{ position:fixed; inset:0; pointer-events:none; z-index:60; }
.fx-grain{
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}
.fx-scan{
  opacity:.22;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 1px, transparent 1px 4px);
}

/* ---------------- typography ---------------- */
.sec-title{
  font-family:"Bangers", cursive;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:.95;
  letter-spacing:2px;
  margin:0 0 .5rem;
  color:var(--paper);
  text-shadow:
     3px 3px 0 var(--ink),
     6px 6px 0 rgba(92,255,157,.85),
     9px 9px 0 rgba(0,0,0,.55);
}
.sec-title .hl{ color:var(--acid); }
.sec-title--center{ text-align:center; }
.sec-sub{
  text-align:center; font-family:"Press Start 2P", monospace;
  font-size:.62rem; letter-spacing:1px; color:#bff5d6; opacity:.85;
  margin:0 0 2.6rem;
}
.lead{ font-size:1.08rem; color:#e9e3cf; }

/* =======================================================================
   SPINE RAIL
   ======================================================================= */
.spine{
  position:fixed; left:0; top:0; bottom:0; width:64px; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:110px 0 28px;
  background:linear-gradient(180deg,#04070b,#0a1410);
  border-right:var(--line) solid #000;
  box-shadow:6px 0 0 rgba(92,255,157,.15);
}
.spine-title{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:"Press Start 2P", monospace; font-size:.52rem;
  color:var(--acid); letter-spacing:2px; opacity:.9;
}
.spine-dots{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.spine-dots a{ display:flex; align-items:center; position:relative; }
.spine-dots span{
  width:13px; height:13px; background:#0d1a15;
  border:3px solid var(--acid); transform:rotate(45deg);
  transition:.25s;
}
.spine-dots a.is-active span{ background:var(--acid); box-shadow:0 0 14px var(--acid); }
.spine-dots em{
  position:absolute; left:26px; white-space:nowrap; font-style:normal;
  font-family:"Press Start 2P", monospace; font-size:.5rem;
  background:var(--acid); color:#04180d; padding:6px 8px; border:2px solid #000;
  opacity:0; transform:translateX(-6px); pointer-events:none; transition:.2s;
}
.spine-dots a:hover em{ opacity:1; transform:translateX(0); }
@media (max-width:1100px){ .spine{ display:none; } }

/* =======================================================================
   NAV
   ======================================================================= */
.nav{ position:fixed; top:0; left:0; right:0; z-index:70; }
.nav-inner{
  display:flex; align-items:center; gap:18px;
  padding:12px clamp(16px,3vw,34px) 12px calc(64px + clamp(16px,3vw,34px));
  background:rgba(4,7,11,.86);
  backdrop-filter:blur(9px);
  border-bottom:var(--line) solid #000;
}
@media (max-width:1100px){ .nav-inner{ padding-left:clamp(16px,3vw,34px); } }
.nav-rip{
  height:10px;
  background:var(--acid);
  clip-path:polygon(0 0,100% 0,100% 40%,97% 100%,94% 30%,90% 90%,86% 25%,82% 85%,78% 20%,74% 92%,70% 30%,66% 80%,62% 22%,58% 88%,54% 28%,50% 95%,46% 26%,42% 84%,38% 18%,34% 90%,30% 24%,26% 86%,22% 20%,18% 92%,14% 30%,10% 82%,6% 22%,3% 88%,0 35%);
  opacity:.9;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-frame{
  width:46px; height:46px; display:grid; place-items:center; overflow:hidden;
  border:3px solid #000; background:#04150c;
  box-shadow:4px 4px 0 var(--acid-2);
  transform:rotate(-3deg);
}
.brand-frame img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.brand-frame--lg{ width:86px; height:86px; box-shadow:6px 6px 0 var(--acid-2); }
.brand-text b{
  display:block; font-family:"Bangers",cursive; font-size:1.5rem; letter-spacing:2px;
  line-height:1; color:var(--paper); text-shadow:2px 2px 0 var(--acid-2);
}
.brand-text i{ font-style:normal; font-family:"Press Start 2P",monospace; font-size:.48rem; color:var(--acid); }

.nav-links{ display:flex; gap:6px; margin-left:auto; }
.nav-links a{
  font-family:"Bangers",cursive; letter-spacing:1.4px; font-size:1.12rem;
  padding:6px 13px; border:3px solid transparent; transition:.18s; color:#dff7e8;
}
.nav-links a:hover{ border-color:#000; background:var(--acid); color:#03170c; transform:rotate(-2deg); }

.nav-cta{ display:flex; align-items:center; gap:9px; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; font-size:1.05rem;
  border:3px solid #000; background:#0d1a15; color:var(--paper);
  box-shadow:4px 4px 0 #000; transition:.15s;
}
.icon-btn:hover{ transform:translate(3px,3px); box-shadow:1px 1px 0 #000; }
.icon-btn--x:hover{ background:#fff; color:#000; }
.icon-btn--dex:hover{ background:var(--cyan); color:#03242a; }
.btn-buy{
  display:flex; align-items:center; gap:8px; padding:10px 18px;
  font-family:"Bangers",cursive; letter-spacing:1.6px; font-size:1.16rem;
  background:var(--acid); color:#04180d; border:3px solid #000; box-shadow:5px 5px 0 #000;
  transition:.15s;
}
.btn-buy:hover{ transform:translate(3px,3px); box-shadow:1px 1px 0 #000; background:#8affbb; }
.burger{
  display:none; width:42px; height:42px; font-size:1.3rem; cursor:pointer;
  background:#0d1a15; color:var(--paper); border:3px solid #000; box-shadow:4px 4px 0 #000;
}
@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:grid; place-items:center; }
  .btn-buy span{ display:none; }
  .btn-buy{ padding:10px 13px; }
}

/* drawer */
.drawer{
  position:fixed; z-index:69; top:70px; left:0; right:0;
  display:grid; gap:2px; padding:14px; background:rgba(4,7,11,.97);
  border-bottom:var(--line) solid #000;
  transform:translateY(-130%); transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.drawer.open{ transform:translateY(0); }
.drawer a{
  font-family:"Bangers",cursive; font-size:1.35rem; letter-spacing:1.5px;
  padding:11px 14px; border:3px solid #000; background:#0d1a15;
}
.drawer .drawer-buy{ background:var(--acid); color:#04180d; text-align:center; }

/* =======================================================================
   PAGE (section) SHELL
   ======================================================================= */
.page{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(90px,11vh,150px) 0 clamp(90px,11vh,150px);
  padding-left:clamp(16px,3vw,26px);
  border-bottom:var(--line) solid #000;
}
@media (min-width:1101px){ .page{ padding-left:64px; } }

.page-bg{
  position:absolute; inset:-14% 0 -14% 0; z-index:-3;
  background-size:cover; background-position:center;
  image-rendering:pixelated;
  will-change:transform;
}
.page-bg--banner{ background-size:cover; background-position:center; }
.page-bg-ink{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(3,8,6,.35), rgba(2,5,4,.9) 78%),
    linear-gradient(180deg, rgba(2,6,5,.94), rgba(2,6,5,.62) 22%, rgba(2,6,5,.66) 74%, rgba(2,6,5,.96));
}
.page-bg-ink--deep{
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(4,14,26,.4), rgba(2,5,10,.92) 76%),
    linear-gradient(180deg, rgba(2,6,10,.95), rgba(2,8,14,.7) 25%, rgba(2,6,10,.97));
}
.page-halftone{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.3;
  background-image:radial-gradient(rgba(0,0,0,.85) 1.2px, transparent 1.3px);
  background-size:6px 6px;
  mask-image:radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 92%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 92%);
}
.speedlines{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.2;
  background:repeating-conic-gradient(from 0deg at 50% 46%,
     rgba(255,255,255,.55) 0deg .35deg, transparent .35deg 3.6deg);
  mask-image:radial-gradient(closest-side, transparent 42%, #000 92%);
  -webkit-mask-image:radial-gradient(closest-side, transparent 42%, #000 92%);
}

/* caption box */
.caption-box{
  position:absolute; z-index:5;
  font-family:"Press Start 2P",monospace; font-size:.58rem; letter-spacing:.5px;
  background:var(--gold); color:#1a1200;
  border:3px solid #000; box-shadow:5px 5px 0 #000;
  padding:10px 14px; max-width:min(78vw,420px);
}
.caption-box--tl{ top:26px; left:clamp(16px,4vw,60px); transform:rotate(-1.6deg); }
@media (min-width:1101px){ .caption-box--tl{ left:clamp(80px,7vw,120px); } }

/* SFX bursts */
.sfx{
  position:absolute; z-index:6; font-family:"Bangers",cursive;
  font-size:clamp(2rem,5vw,3.6rem); letter-spacing:3px; color:var(--gold);
  -webkit-text-stroke:3px #000; text-shadow:6px 6px 0 rgba(0,0,0,.7);
  pointer-events:none; animation:sfxPop 3.4s ease-in-out infinite;
}
.sfx--hero{ right:5%; top:20%; transform:rotate(11deg); }
.sfx--buy{ left:6%; bottom:9%; transform:rotate(-9deg); color:var(--magenta); }
@media (max-width:900px){ .sfx{ display:none; } }
@keyframes sfxPop{ 0%,100%{ transform:scale(1) rotate(9deg);} 50%{ transform:scale(1.12) rotate(4deg);} }

/* =======================================================================
   3D STAGE + TILT
   ======================================================================= */
.stage{ perspective:1600px; perspective-origin:50% 42%; }
.tilt{
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.25,1), box-shadow .3s;
}
.tilt[data-tilt="left"]{ transform:rotateY(6deg) rotateX(1.6deg) translateZ(0); }
.tilt[data-tilt="right"]{ transform:rotateY(-6deg) rotateX(1.6deg) translateZ(0); }
.tilt:hover{ transform:rotateY(0) rotateX(0) translateZ(34px); }
@media (max-width:900px){
  .tilt[data-tilt]{ transform:none !important; }
}

/* reveal */
.reveal{ opacity:0; transform:translateY(46px) rotate(-1.2deg); transition:opacity .7s, transform .7s cubic-bezier(.2,.9,.3,1.2); }
.reveal.in{ opacity:1; transform:translateY(0) rotate(0); }

/* =======================================================================
   HERO
   ======================================================================= */
.page--hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:150px; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,4vw,64px); align-items:center;
  width:min(1240px,92vw); margin-inline:auto;
}
@media (max-width:1000px){ .hero-grid{ grid-template-columns:1fr; } }

.badge-strip{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px; }
.chip{
  font-family:"Press Start 2P",monospace; font-size:.5rem; letter-spacing:.6px;
  padding:8px 11px; border:3px solid #000; box-shadow:4px 4px 0 #000; color:#04180d;
  display:inline-flex; align-items:center; gap:7px;
}
.chip--acid{ background:var(--acid); transform:rotate(-1.5deg); }
.chip--cyan{ background:var(--cyan); transform:rotate(1.5deg); }

.hero-title{
  font-family:"Bangers",cursive; margin:0 0 6px; line-height:.82;
  font-size:clamp(4.2rem,13vw,9.5rem); letter-spacing:4px;
}
.hero-title .line{ display:block; }
.hero-title .line-1{
  color:var(--paper);
  text-shadow:4px 4px 0 #000, 10px 10px 0 var(--acid-2), 14px 14px 0 rgba(0,0,0,.6);
  transform:rotate(-2deg);
}
.hero-title .line-2{
  color:var(--acid); margin-left:.32em;
  text-shadow:4px 4px 0 #000, 10px 10px 0 var(--magenta), 14px 14px 0 rgba(0,0,0,.6);
  transform:rotate(1.4deg);
}

/* speech bubble */
.bubble{
  position:relative; background:var(--paper); color:#141008;
  border:var(--line) solid #000; border-radius:22px; padding:16px 20px;
  box-shadow:var(--shadow-sm); max-width:560px; margin:22px 0;
  font-weight:700;
}
.bubble p{ margin:0; }
.bubble-tail{
  position:absolute; bottom:-20px; left:44px; width:0; height:0;
  border-left:20px solid transparent; border-right:6px solid transparent;
  border-top:22px solid #000;
}
.bubble-tail::after{
  content:""; position:absolute; top:-24px; left:-15px;
  border-left:14px solid transparent; border-right:4px solid transparent;
  border-top:16px solid var(--paper);
}
.bubble--comm{ background:var(--gold); }
.bubble--comm .bubble-tail::after{ border-top-color:var(--gold); }

/* CA strip */
.ca-strip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#0a1410; border:var(--line) solid #000; box-shadow:var(--shadow-sm);
  padding:10px 12px; max-width:620px; margin:20px 0;
}
.ca-label{
  font-family:"Press Start 2P",monospace; font-size:.55rem; background:var(--acid);
  color:#04180d; padding:8px 10px; border:2px solid #000;
}
.ca-text{
  font-family:"Press Start 2P",monospace; font-size:.58rem; color:var(--acid);
  word-break:break-all; flex:1; min-width:120px; line-height:1.7;
}
.ca-copy{
  cursor:pointer; background:var(--paper); color:#000; border:3px solid #000;
  width:38px; height:38px; display:grid; place-items:center; box-shadow:3px 3px 0 #000; transition:.14s;
}
.ca-copy:hover{ background:var(--acid); transform:translate(2px,2px); box-shadow:1px 1px 0 #000; }
.ca-strip--sm{ margin:12px 0 0; padding:8px; }
.ca-strip--sm .ca-text{ font-size:.5rem; }
.ca-strip--lg{ margin:0; background:#04120c; }
.ca-strip--lg .ca-text{ font-size:clamp(.5rem,1.4vw,.78rem); color:var(--gold); }

/* comic buttons */
.hero-actions,.comm-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.cbtn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Bangers",cursive; letter-spacing:1.6px; font-size:1.22rem;
  padding:13px 22px; border:var(--line) solid #000; box-shadow:7px 7px 0 #000;
  transition:.15s; position:relative;
}
.cbtn:hover{ transform:translate(4px,4px); box-shadow:2px 2px 0 #000; }
.cbtn--acid{ background:var(--acid); color:#04180d; }
.cbtn--cyan{ background:var(--cyan); color:#022a30; }
.cbtn--dark{ background:#12100f; color:var(--paper); }
.cbtn--dark:hover{ background:#fff; color:#000; }
.cbtn--sm{ font-size:1rem; padding:9px 15px; box-shadow:5px 5px 0 #000; margin-top:14px; }

/* hero art */
.hero-art{ position:relative; display:grid; place-items:center; min-height:360px; }
.portal-ring{
  position:absolute; width:min(430px,80vw); aspect-ratio:1; border-radius:50%;
  border:6px dashed rgba(92,255,157,.55); animation:spin 26s linear infinite;
  box-shadow:0 0 70px rgba(92,255,157,.28) inset;
}
.portal-ring--2{ width:min(340px,66vw); border:4px solid rgba(60,231,242,.4); animation-direction:reverse; animation-duration:18s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.logo-frame{
  position:relative; margin:0; width:min(330px,72vw);
  border:var(--line) solid #000; background:#04150c;
  box-shadow:12px 12px 0 #000, 0 0 60px rgba(92,255,157,.35);
  transform:rotate(-3deg);
}
.logo-frame img{ width:100%; image-rendering:pixelated; }
.logo-frame figcaption{
  font-family:"Press Start 2P",monospace; font-size:.5rem; text-align:center;
  background:var(--acid); color:#04180d; padding:9px; border-top:var(--line) solid #000;
}
.float-y{ animation:floaty 5.5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-18px) rotate(-1deg);} }

.star{ position:absolute; color:var(--paper); font-size:1.6rem; text-shadow:0 0 12px var(--acid); animation:twinkle 2.6s infinite; }
.star--a{ top:8%; left:12%; }
.star--b{ bottom:14%; right:10%; animation-delay:.8s; }
.star--c{ top:26%; right:4%; animation-delay:1.5s; font-size:1.1rem; }
@keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.25);} }

.scroll-cue{
  margin:54px auto 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:"Press Start 2P",monospace; font-size:.5rem; color:var(--acid);
}
.scroll-cue i{ font-size:1.2rem; animation:bob 1.6s infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* =======================================================================
   TICKER
   ======================================================================= */
.ticker{
  background:var(--acid); border-block:var(--line) solid #000;
  overflow:hidden; transform:rotate(-1.2deg) scale(1.03); margin:-22px 0 -18px; position:relative; z-index:8;
}
.ticker-track{ display:flex; align-items:center; gap:28px; padding:11px 0; width:max-content; animation:slide 26s linear infinite; }
.ticker-track span{ font-family:"Bangers",cursive; font-size:1.4rem; letter-spacing:2.4px; color:#04180d; white-space:nowrap; }
.ticker-track i{ font-style:normal; font-size:1.1rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =======================================================================
   PANELS (about)
   ======================================================================= */
.panel{
  position:relative; background:rgba(6,14,11,.9); border:var(--line) solid #000;
  box-shadow:var(--shadow); padding:clamp(22px,3vw,38px);
  backdrop-filter:blur(3px);
}
.panel::before{
  content:""; position:absolute; inset:6px; border:2px solid rgba(92,255,157,.28); pointer-events:none;
}
.panel-tag{
  position:absolute; top:-18px; left:22px;
  font-family:"Press Start 2P",monospace; font-size:.52rem;
  background:var(--magenta); color:#fff; border:3px solid #000; padding:7px 10px;
  box-shadow:4px 4px 0 #000; transform:rotate(-2deg);
}
.about-layout{ display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(24px,3.2vw,44px); align-items:start; }
@media (max-width:1000px){ .about-layout{ grid-template-columns:1fr; } }
.about-side{ display:grid; gap:22px; }
.panel--mini{ padding:22px; }
.panel--mini h3{
  font-family:"Bangers",cursive; font-size:1.5rem; letter-spacing:1.4px; margin:10px 0 6px; color:var(--acid);
}
.panel--mini p{ margin:0; font-size:.98rem; color:#dcd8c6; }
.mini-ico{
  width:46px; height:46px; display:grid; place-items:center; font-size:1.2rem;
  background:var(--acid); color:#04180d; border:3px solid #000; box-shadow:4px 4px 0 #000;
  transform:rotate(-4deg);
}

.fact-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:620px){ .fact-list{ grid-template-columns:1fr; } }
.fact-list li{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  background:#04120c; border:3px solid #000; box-shadow:4px 4px 0 rgba(0,0,0,.8);
}
.fact-list i{ color:var(--acid); }
.fact-list b{ font-family:"Press Start 2P",monospace; font-size:.48rem; color:#9ff0c1; }
.fact-list span{ margin-left:auto; font-weight:700; color:var(--paper); }

/* double page spread */
.spread{
  margin:clamp(40px,6vw,72px) 0 0; position:relative;
  border:var(--line) solid #000; box-shadow:var(--shadow);
  background:#04120c; transform:rotate(-.8deg);
}
.spread img{ width:100%; image-rendering:pixelated; }
.spread::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:12px; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.6));
  pointer-events:none;
}
.spread figcaption{
  font-family:"Press Start 2P",monospace; font-size:.55rem; letter-spacing:.5px;
  background:var(--gold); color:#1a1200; padding:11px 14px; border-top:var(--line) solid #000;
  display:flex; align-items:center; gap:9px;
}

/* =======================================================================
   WORLDS RAIL (3D carousel row)
   ======================================================================= */
.worlds-rail{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,36px);
  transform-style:preserve-3d;
}
@media (max-width:1000px){ .worlds-rail{ grid-template-columns:1fr; } }

.world-card{
  position:relative; margin:0; background:#04120c;
  border:var(--line) solid #000; box-shadow:var(--shadow);
  transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
}
.world-card[data-world="1"]{ transform:rotateY(15deg) rotateX(2deg) translateZ(-40px); }
.world-card[data-world="2"]{ transform:translateZ(40px) scale(1.04); }
.world-card[data-world="3"]{ transform:rotateY(-15deg) rotateX(2deg) translateZ(-40px); }
.world-card:hover{ transform:rotateY(0) rotateX(0) translateZ(70px) scale(1.05); box-shadow:16px 16px 0 rgba(15,217,104,.5); z-index:3; }
@media (max-width:1000px){
  .world-card,.world-card:hover{ transform:none !important; }
}
.world-num{
  position:absolute; top:-20px; left:-14px; z-index:4;
  font-family:"Bangers",cursive; font-size:2.1rem; line-height:1;
  background:var(--acid); color:#04180d; border:var(--line) solid #000;
  padding:6px 14px; box-shadow:5px 5px 0 #000; transform:rotate(-6deg);
}
.world-img{ overflow:hidden; border-bottom:var(--line) solid #000; }
.world-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; image-rendering:pixelated; transition:transform .6s; }
.world-card:hover .world-img img{ transform:scale(1.08); }
.world-card figcaption{ padding:18px 20px 22px; }
.world-card h3{
  font-family:"Bangers",cursive; font-size:1.75rem; letter-spacing:1.6px; margin:0 0 6px; color:var(--acid);
}
.world-card p{ margin:0; font-size:.96rem; color:#d8d4c2; }

/* =======================================================================
   HOW TO BUY — staircase deck
   ======================================================================= */
.steps-deck{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px);
  transform-style:preserve-3d;
}
@media (max-width:1080px){ .steps-deck{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .steps-deck{ grid-template-columns:1fr; } }

.step-panel{
  position:relative; background:rgba(5,13,20,.92); border:var(--line) solid #000;
  box-shadow:var(--shadow); padding:30px 22px 24px;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .3s;
}
.step-panel[data-step="1"]{ transform:rotateY(9deg) translateY(0) translateZ(-30px); }
.step-panel[data-step="2"]{ transform:rotateY(4deg) translateY(24px) translateZ(-10px); }
.step-panel[data-step="3"]{ transform:rotateY(-4deg) translateY(48px) translateZ(-10px); }
.step-panel[data-step="4"]{ transform:rotateY(-9deg) translateY(72px) translateZ(-30px); }
.step-panel:hover{ transform:rotateY(0) translateY(0) translateZ(50px); box-shadow:14px 14px 0 rgba(60,231,242,.45); }
@media (max-width:1080px){
  .step-panel,.step-panel:hover{ transform:none !important; }
}
.step-panel .step-no{
  position:absolute; top:-24px; right:-14px;
  font-family:"Bangers",cursive; font-size:2.3rem; line-height:1;
  width:58px; height:58px; display:grid; place-items:center;
  background:var(--magenta); color:#fff; border:var(--line) solid #000;
  box-shadow:5px 5px 0 #000; transform:rotate(7deg);
  clip-path:polygon(50% 0,62% 14%,79% 8%,82% 26%,100% 33%,89% 47%,100% 63%,82% 71%,79% 90%,61% 85%,50% 100%,39% 85%,21% 90%,18% 71%,0 63%,11% 47%,0 33%,18% 26%,21% 8%,38% 14%);
}
.step-ico{
  width:52px; height:52px; display:grid; place-items:center; font-size:1.35rem;
  background:var(--cyan); color:#022a30; border:3px solid #000; box-shadow:4px 4px 0 #000;
  transform:rotate(-4deg); margin-bottom:14px;
}
.step-panel h3{ font-family:"Bangers",cursive; font-size:1.5rem; letter-spacing:1.3px; margin:0 0 8px; color:var(--paper); }
.step-panel p{ margin:0; font-size:.95rem; color:#d3dbe0; }
.step-panel b{ color:var(--acid); }

/* buy link cards */
.buy-links{
  margin-top:clamp(110px,12vw,150px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:1000px){ .buy-links{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .buy-links{ grid-template-columns:1fr; } }
.link-card{
  display:grid; gap:2px; padding:20px 18px; background:#050e0b;
  border:var(--line) solid #000; box-shadow:var(--shadow-sm); transition:.16s;
}
.link-card i{ font-size:1.5rem; margin-bottom:6px; }
.link-card b{ font-family:"Bangers",cursive; font-size:1.42rem; letter-spacing:1.4px; }
.link-card small{ font-size:.86rem; opacity:.78; }
.link-card:hover{ transform:translate(4px,4px) rotate(-1deg); box-shadow:1px 1px 0 #000; }
.link-card--acid{ border-color:#000; } .link-card--acid i{ color:var(--acid); } .link-card--acid:hover{ background:var(--acid); color:#04180d; } .link-card--acid:hover i{ color:#04180d; }
.link-card--cyan i{ color:var(--cyan); } .link-card--cyan:hover{ background:var(--cyan); color:#022a30; } .link-card--cyan:hover i{ color:#022a30; }
.link-card--gold i{ color:var(--gold); } .link-card--gold:hover{ background:var(--gold); color:#1a1200; } .link-card--gold:hover i{ color:#1a1200; }
.link-card--magenta i{ color:var(--magenta); } .link-card--magenta:hover{ background:var(--magenta); color:#fff; } .link-card--magenta:hover i{ color:#fff; }

/* =======================================================================
   COMMUNITY
   ======================================================================= */
.comm-layout{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(26px,3.4vw,52px); align-items:center; }
@media (max-width:1000px){ .comm-layout{ grid-template-columns:1fr; } }
.comm-copy{ background:rgba(5,13,10,.86); border:var(--line) solid #000; box-shadow:var(--shadow); padding:clamp(22px,3vw,38px); }
.comm-cards{ display:grid; gap:18px; }
.social-card{
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:16px; align-items:center; padding:20px 22px;
  background:#050e0b; border:var(--line) solid #000; box-shadow:var(--shadow-sm); transition:.18s;
}
.social-card i:first-child{ grid-row:1/3; font-size:1.9rem; }
.social-card b{ font-family:"Bangers",cursive; font-size:1.5rem; letter-spacing:1.5px; }
.social-card small{ opacity:.75; font-size:.88rem; }
.social-go{ position:absolute; top:12px; right:14px; opacity:.5; }
.social-card:hover{ transform:translate(4px,4px); box-shadow:1px 1px 0 #000; }
.social-card--x:hover{ background:#fff; color:#000; }
.social-card--buy i:first-child{ color:var(--acid); }
.social-card--buy:hover{ background:var(--acid); color:#04180d; }
.social-card--buy:hover i{ color:#04180d; }
.social-card--dex i:first-child{ color:var(--cyan); }
.social-card--dex:hover{ background:var(--cyan); color:#022a30; }
.social-card--dex:hover i{ color:#022a30; }

.final-ca{
  margin-top:clamp(38px,5vw,64px); background:rgba(3,10,7,.92);
  border:var(--line) solid #000; box-shadow:var(--shadow); padding:24px;
  display:grid; gap:14px; transform:rotate(-.6deg);
}
.final-ca-label{
  font-family:"Press Start 2P",monospace; font-size:.55rem; color:var(--gold);
  display:flex; align-items:center; gap:9px;
}

/* =======================================================================
   FOOTER
   ======================================================================= */
.foot{ background:#03060a; padding:52px 0 26px; border-top:var(--line) solid var(--acid-2); }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:18px; max-width:620px; }
.foot-brand b{ font-family:"Bangers",cursive; font-size:1.9rem; letter-spacing:2px; color:var(--acid); }
.foot-brand p{ margin:2px 0 0; font-size:.95rem; color:#cfd8d2; }
.foot-links{ display:flex; gap:10px; }
.foot-links a{
  width:46px; height:46px; display:grid; place-items:center; font-size:1.1rem;
  background:#0b1410; border:3px solid #000; box-shadow:4px 4px 0 var(--acid-2); transition:.15s;
}
.foot-links a:hover{ background:var(--acid); color:#04180d; transform:translate(3px,3px); box-shadow:1px 1px 0 var(--acid-2); }
.foot-note{
  width:min(1240px,92vw); margin:34px auto 0; padding-top:18px; border-top:2px dashed #1d2b24;
  font-size:.82rem; color:#8fa79a; text-align:center;
}

/* =======================================================================
   TOAST
   ======================================================================= */
.toast{
  position:fixed; z-index:90; left:50%; bottom:34px; transform:translate(-50%,140%);
  display:flex; align-items:center; gap:10px;
  background:var(--acid); color:#04180d; border:var(--line) solid #000; box-shadow:7px 7px 0 #000;
  padding:13px 20px; font-family:"Bangers",cursive; font-size:1.2rem; letter-spacing:1.2px;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.toast.show{ transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}