/* =========================================================
   SUPER PIXEL ($SP) — 8-bit arcade theme
   Palette sampled from the character art
   ========================================================= */
:root{
  --ink:#04083a;          /* outline / deepest night */
  --night:#06093c;
  --navy:#001975;
  --navy2:#0a1f8f;
  --blue:#0165ec;
  --blue-l:#3eb3fb;
  --blue-d:#012a9c;
  --red:#e90f17;
  --red-l:#ff5a4a;
  --red-d:#7d040f;
  --orange:#f29321;
  --orange-d:#b5591a;
  --yellow:#facb57;
  --yellow-l:#ffe9a6;
  --yellow-d:#d68a14;
  --cream:#eadec5;
  --purple:#5140aa;
  --lilac:#9a6fd6;
  --white:#fdf8ee;

  --px: clamp(4px, .42vw, 8px);   /* size of one "art pixel" for backgrounds */
  --hud-h: 64px;
  --f-pixel: "Press Start 2P", "Silkscreen", ui-monospace, monospace;
  --f-ui: "Silkscreen", "Press Start 2P", ui-monospace, monospace;
  --f-text: "VT323", ui-monospace, "Courier New", monospace;
  --notch: polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
main{overflow-x:clip}
body{
  margin:0;background:var(--night);color:var(--white);
  font-family:var(--f-text);font-size:22px;line-height:1.25;
  overflow-x:hidden;-webkit-font-smoothing:none;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.pixelated,.layer,.panel img,.world-img img,.coin img,.foot-coin,.crt-coin,.map-hero,.dialog-face img,.hud-logo img{image-rendering:pixelated}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto;position:relative;z-index:2}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* pixel icons (filled by JS) */
[data-icon]{display:inline-block;width:1em;height:1em;flex:none}
[data-icon] svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}

/* ---------------------------------------------------------
   LOADER
--------------------------------------------------------- */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink)}
#loaderCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.loader-ui{position:absolute;left:50%;bottom:clamp(28px,7vh,70px);transform:translateX(-50%);width:min(520px,86vw);text-align:center;transition:opacity .3s steps(3)}
.loader-title{font-family:var(--f-pixel);font-size:clamp(20px,3.4vw,40px);color:var(--yellow);
  text-shadow:.1em .1em 0 var(--red),.2em .2em 0 var(--ink);margin-bottom:22px;letter-spacing:.02em}
.loader-bar{height:28px;background:var(--ink);box-shadow:0 0 0 4px var(--white),0 0 0 8px var(--ink);padding:4px}
.loader-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,var(--orange) 14px 18px)}
.loader-row{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--f-pixel);font-size:12px;color:var(--white);text-shadow:2px 2px 0 var(--ink)}
#loader.fade .loader-ui{opacity:0}
#loader.gone{display:none}
.scanlines,.crt-overlay{pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px)}
.scanlines{position:absolute;inset:0;opacity:.5}
.crt-overlay{position:fixed;inset:0;z-index:9000;opacity:.18;mix-blend-mode:multiply}

/* ---------------------------------------------------------
   PIXEL BUTTONS (bevel + stepped outline via drop-shadow)
--------------------------------------------------------- */
.pxbtn,.lvl,.cheat{
  --c:var(--blue);--cl:var(--blue-l);--cd:var(--blue-d);--o:var(--ink);
  position:relative;isolation:isolate;
  filter:drop-shadow(4px 0 0 var(--o)) drop-shadow(-4px 0 0 var(--o)) drop-shadow(0 4px 0 var(--o)) drop-shadow(0 -4px 0 var(--o)) drop-shadow(0 6px 0 var(--o));
  transition:transform .12s steps(2), filter .12s steps(2);
}
.pxbtn::before,.lvl::before,.cheat::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c);clip-path:var(--notch);
  box-shadow:inset 6px 6px 0 var(--cl),inset -6px -6px 0 var(--cd);
}
.pxbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:18px 22px 17px;
  font-family:var(--f-pixel);font-size:13px;line-height:1;color:var(--white);text-shadow:2px 2px 0 var(--ink);white-space:nowrap;cursor:pointer}
.pxbtn [data-icon]{font-size:20px}
.pxbtn:hover{transform:translateY(-3px)}
.pxbtn:active{transform:translateY(5px);filter:drop-shadow(4px 0 0 var(--o)) drop-shadow(-4px 0 0 var(--o)) drop-shadow(0 4px 0 var(--o)) drop-shadow(0 -4px 0 var(--o))}
.pxbtn--xl{font-size:clamp(14px,1.35vw,18px);padding:24px 30px 23px}
.pxbtn--xl [data-icon]{font-size:28px}
.pxbtn--red{--c:var(--red);--cl:var(--red-l);--cd:var(--red-d)}
.pxbtn--yellow{--c:var(--yellow);--cl:var(--yellow-l);--cd:var(--yellow-d);color:var(--ink);text-shadow:none}
.pxbtn--blue{--c:#2a9df4;--cl:#8ad4ff;--cd:#0b5fb0}
.pxbtn--cyan{--c:#18b8a8;--cl:#7cf0de;--cd:#0b6f67}
.pxbtn--dark{--c:#1b1f3f;--cl:#3d4577;--cd:#0a0c22}
.pxbtn--red.pulse{animation:pulse 1.2s steps(2) infinite}
@keyframes pulse{50%{--o:var(--yellow)}}

/* CA "cheat code" field */
.cheat{--c:var(--ink);--cl:#1a2a8a;--cd:#000;--o:var(--white);display:flex;align-items:stretch;width:100%;max-width:560px;text-align:left;cursor:pointer}
.cheat::before{box-shadow:inset 4px 4px 0 #000,inset -4px -4px 0 #1a2a8a}
.cheat-label{display:flex;align-items:center;padding:0 14px 0 18px;font-family:var(--f-pixel);font-size:11px;color:var(--blue-l)}
.cheat-code{flex:1;min-width:0;display:flex;align-items:center;padding:16px 4px;font-family:var(--f-text);font-size:24px;color:var(--yellow);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cheat-code::after{content:"_";animation:blink 1s steps(1) infinite;margin-left:2px}
.cheat-btn{display:flex;align-items:center;gap:8px;margin:6px;padding:0 14px;background:var(--yellow);color:var(--ink);font-family:var(--f-pixel);font-size:11px;
  box-shadow:inset 3px 3px 0 var(--yellow-l),inset -3px -3px 0 var(--yellow-d)}
.cheat-btn [data-icon]{font-size:16px}
.cheat:hover{transform:translateY(-2px)}
.cheat:active{transform:translateY(3px)}
.cheat.copied .cheat-btn{background:#35d07f;box-shadow:inset 3px 3px 0 #8ff5bd,inset -3px -3px 0 #16864b}

/* icon buttons in HUD */
.icobtn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;font-family:var(--f-pixel);font-size:10px;color:var(--white);
  background:var(--c,#2a9df4);box-shadow:inset 3px 3px 0 var(--cl,#8ad4ff),inset -3px -3px 0 var(--cd,#0b5fb0),0 0 0 3px var(--ink),0 5px 0 3px var(--ink);
  transition:transform .1s steps(2)}
.icobtn [data-icon]{font-size:16px}
.icobtn:hover{transform:translateY(-2px)}
.icobtn:active{transform:translateY(3px)}
.icobtn--x{--c:#1b1f3f;--cl:#3d4577;--cd:#0a0c22}
.icobtn--dex{--c:#18b8a8;--cl:#7cf0de;--cd:#0b6f67}
.is-soon{opacity:.55}

/* ---------------------------------------------------------
   HUD HEADER
--------------------------------------------------------- */
#hud{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(4,8,58,.94);box-shadow:0 4px 0 var(--ink)}
.hud-inner{height:var(--hud-h);width:min(1320px,100% - 32px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hud-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-pixel);font-size:13px;white-space:nowrap}
.hud-logo img{width:32px;height:32px}
.hud-logo-tick{color:var(--ink);background:var(--yellow);padding:5px 6px 4px;font-size:10px;box-shadow:inset -2px -2px 0 var(--yellow-d)}
.hud-nav{display:flex;align-items:center;gap:26px}
.hud-nav>a{font-family:var(--f-pixel);font-size:10px;color:var(--cream);position:relative;padding:6px 0}
.hud-nav>a::before{content:"▶";position:absolute;left:-14px;color:var(--yellow);opacity:0}
.hud-nav>a:hover{color:var(--yellow)}
.hud-nav>a:hover::before{opacity:1;animation:blink .6s steps(1) infinite}
.hud-nav-social{display:flex;gap:12px;margin-left:8px}
.hud-burger{display:none;width:44px;height:40px;position:relative;z-index:2;background:var(--red);box-shadow:inset 3px 3px 0 var(--red-l),inset -3px -3px 0 var(--red-d),0 0 0 3px var(--ink)}
.hud-burger span{position:absolute;left:11px;right:11px;height:4px;background:var(--white)}
.hud-burger span:nth-child(1){top:10px}.hud-burger span:nth-child(2){top:18px}.hud-burger span:nth-child(3){top:26px}
.hud-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hud-burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.hud-burger[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}
.exp{display:flex;align-items:center;gap:10px;height:18px;width:min(1320px,100% - 32px);margin:0 auto 6px;font-family:var(--f-pixel);font-size:8px;color:var(--blue-l)}
.exp-lv b{color:var(--yellow)}
.exp-bar{flex:1;height:8px;background:#0b1560;box-shadow:0 0 0 2px var(--ink)}
.exp-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#35d07f 0 10px,#1fa564 10px 12px)}
.exp-lives{display:flex;gap:3px;font-size:12px;color:var(--red)}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:calc(var(--hud-h) + 60px) 0 110px;background:var(--ink)}
.hero-world{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:-6%;right:-6%;will-change:transform}
.l-sky{top:-6%;bottom:-6%;background:url(../img/sky.png) center/cover no-repeat}
.l-stars{top:-6%;height:112%;width:112%}
.l-cloud-far{bottom:22%;height:calc(60 * var(--px));background:url(../img/clouds-far.png) 0 0/calc(300 * var(--px)) 100% repeat-x;opacity:.85;animation:drift 90s linear infinite}
.l-cloud-near{bottom:3%;height:calc(70 * var(--px));background:url(../img/clouds-near.png) 0 0/calc(300 * var(--px)) 100% repeat-x;opacity:.55;animation:drift 60s linear infinite reverse}
.l-city-far{bottom:-2%;height:calc(70 * var(--px));background:url(../img/city-far.png) 0 100%/calc(360 * var(--px)) 100% repeat-x}
.l-city-near{bottom:-4%;height:calc(60 * var(--px));background:url(../img/city-near.png) 30% 100%/calc(360 * var(--px)) 100% repeat-x}
@keyframes drift{to{background-position-x:calc(-300 * var(--px))}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,8,58,.75) 0%,rgba(4,8,58,.25) 45%,transparent 70%),linear-gradient(0deg,rgba(4,8,58,.7),transparent 30%)}

.hero-inner{position:relative;z-index:3;width:min(1320px,100% - 40px);margin-inline:auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.p1{font-family:var(--f-pixel);font-size:12px;color:var(--blue-l);margin-bottom:22px;text-shadow:2px 2px 0 var(--ink)}
.p1 .blink{color:var(--yellow)}
.title{margin:0;font-family:var(--f-pixel);font-weight:400;line-height:1.02;font-size:clamp(44px,7.4vw,118px);letter-spacing:-.02em}
.title span{display:block}
.title-a{color:var(--yellow);text-shadow:.05em .05em 0 var(--red),.1em .1em 0 var(--red-d),.15em .15em 0 var(--ink)}
.title-b{color:var(--white);text-shadow:.05em .05em 0 var(--blue),.1em .1em 0 var(--blue-d),.15em .15em 0 var(--ink);margin-top:.12em}
.ticker-chip{display:inline-block;margin:34px 0 34px;padding:12px 18px 10px;font-family:var(--f-pixel);font-size:clamp(20px,2.2vw,30px);color:var(--white);background:var(--red);transform:rotate(-4deg);
  box-shadow:inset 5px 5px 0 var(--red-l),inset -5px -5px 0 var(--red-d),0 0 0 5px var(--ink),8px 10px 0 5px var(--ink);text-shadow:3px 3px 0 var(--red-d)}
.ticker-chip.in{animation:chipbob 2s steps(2) infinite}
@keyframes chipbob{50%{transform:rotate(-4deg) translateY(-6px)}}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:26px}

.hero-stage{position:relative;perspective:1100px;display:flex;justify-content:center}
.card3d{position:relative;width:min(520px,100%);aspect-ratio:1;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(4deg);transition:transform .25s ease-out;will-change:transform}
.card3d-glow{position:absolute;inset:-10%;transform:translateZ(-80px);background:radial-gradient(closest-side,rgba(62,179,251,.45),rgba(81,64,170,.25) 55%,transparent 72%)}
.card3d-frame{position:absolute;inset:0;padding:14px;background:var(--yellow);clip-path:polygon(0 16px,8px 16px,8px 8px,16px 8px,16px 0,calc(100% - 16px) 0,calc(100% - 16px) 8px,calc(100% - 8px) 8px,calc(100% - 8px) 16px,100% 16px,100% calc(100% - 16px),calc(100% - 8px) calc(100% - 16px),calc(100% - 8px) calc(100% - 8px),calc(100% - 16px) calc(100% - 8px),calc(100% - 16px) 100%,16px 100%,16px calc(100% - 8px),8px calc(100% - 8px),8px calc(100% - 16px),0 calc(100% - 16px));
  box-shadow:inset 8px 8px 0 var(--yellow-l),inset -8px -8px 0 var(--orange-d)}
.card3d-frame img{width:100%;height:100%;object-fit:cover;box-shadow:0 0 0 6px var(--ink)}
.card3d-shine{position:absolute;inset:14px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 55%);background-size:250% 100%;background-position:var(--shine,120%) 0;mix-blend-mode:screen}
.card3d-tag{position:absolute;top:-22px;right:-18px;transform:translateZ(90px) rotate(8deg);font-family:var(--f-pixel);font-size:clamp(18px,2vw,26px);padding:14px 16px 12px;background:var(--red);color:var(--white);
  box-shadow:inset 4px 4px 0 var(--red-l),inset -4px -4px 0 var(--red-d),0 0 0 4px var(--ink),6px 8px 0 4px var(--ink)}
.card3d-hp{position:absolute;left:-26px;bottom:34px;transform:translateZ(70px);display:flex;align-items:center;gap:4px;padding:10px 12px;background:var(--ink);font-family:var(--f-pixel);font-size:10px;color:var(--yellow);box-shadow:0 0 0 4px var(--white),0 0 0 8px var(--ink)}
.card3d-hp i{width:10px;height:14px;background:#35d07f;box-shadow:inset -2px -2px 0 #16864b}
.card3d-hp b{margin-left:6px;color:var(--white);font-weight:400;font-size:14px}
.card3d-lv{position:absolute;right:-14px;bottom:-16px;transform:translateZ(50px);font-family:var(--f-pixel);font-size:11px;padding:9px 10px;background:var(--blue);color:var(--white);box-shadow:inset 3px 3px 0 var(--blue-l),inset -3px -3px 0 var(--blue-d),0 0 0 4px var(--ink)}

.coin{position:absolute;left:-2%;top:-6%;width:clamp(78px,8vw,120px);aspect-ratio:1;perspective:600px;z-index:4;animation:coinfloat 3s ease-in-out infinite}
.coin-spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:spin 3.2s linear infinite}
.coin-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
.coin-back{transform:rotateY(180deg)}
.coin-edge{position:absolute;inset:0;width:100%;height:100%;filter:brightness(.55) saturate(1.3)}
@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes coinfloat{50%{transform:translateY(-14px)}}
.float-head{position:absolute;right:-3%;top:44%;width:clamp(56px,6vw,90px);filter:drop-shadow(4px 4px 0 var(--ink));animation:headbob 2.4s steps(4) infinite;z-index:4}
@keyframes headbob{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-16px) rotate(-4deg)}}

.press-start{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;font-family:var(--f-pixel);font-size:12px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
.press-start [data-icon]{font-size:18px;animation:headbob 1.2s steps(2) infinite}

/* ---------------------------------------------------------
   MARQUEE
--------------------------------------------------------- */
.marquee{position:relative;z-index:5;background:var(--red);overflow:hidden;transform:rotate(-1.4deg) scale(1.03);margin:-18px 0;
  box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink),inset 0 6px 0 var(--red-l),inset 0 -6px 0 var(--red-d)}
.marquee-track{display:flex;align-items:center;gap:26px;width:max-content;padding:22px 0 20px;animation:marq 26s linear infinite;font-family:var(--f-pixel);font-size:clamp(14px,1.6vw,20px);color:var(--yellow);text-shadow:3px 3px 0 var(--red-d)}
.marquee-track [data-icon]{color:var(--white);font-size:20px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */
.sec{position:relative;padding:clamp(90px,11vw,150px) 0;overflow:hidden;
  background-color:var(--night);
  background-image:linear-gradient(45deg,rgba(26,42,138,.18) 25%,transparent 25%,transparent 75%,rgba(26,42,138,.18) 75%),linear-gradient(45deg,rgba(26,42,138,.18) 25%,transparent 25%,transparent 75%,rgba(26,42,138,.18) 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
.sec-bg{position:absolute;inset:0;background:url(../img/sky.png) center/cover;image-rendering:pixelated;opacity:.55}
.sec-bg--tall{background-image:url(../img/sky-tall.png);opacity:.45}
.sec-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night),transparent 22%,transparent 78%,var(--night))}
.sec-head{text-align:center;margin-bottom:clamp(44px,6vw,72px)}
.sec-kicker{display:inline-block;font-family:var(--f-pixel);font-size:11px;color:var(--ink);background:var(--blue-l);padding:8px 10px 6px;box-shadow:inset -3px -3px 0 #1a7fc7,0 0 0 3px var(--ink)}
.sec-title{margin:22px 0 0;font-family:var(--f-pixel);font-weight:400;font-size:clamp(26px,4.4vw,56px);color:var(--yellow);line-height:1.15;
  text-shadow:.06em .06em 0 var(--red),.12em .12em 0 var(--ink)}

/* ---- STORY ---- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px);perspective:1000px}
.panel{margin:0;background:var(--cream);padding:10px 10px 0;transform-style:preserve-3d;
  box-shadow:inset 5px 5px 0 #fff,inset -5px -5px 0 #b7a98c,0 0 0 5px var(--ink),10px 12px 0 5px var(--ink)}
.panel:nth-child(2){margin-top:26px}
.panel img,.panel canvas{width:100%;aspect-ratio:1;object-fit:cover;display:block;box-shadow:0 0 0 4px var(--ink);background:var(--navy)}
.panel figcaption{font-family:var(--f-pixel);font-size:11px;color:var(--ink);padding:16px 4px 14px;display:flex;gap:10px;align-items:center}
.panel figcaption b{background:var(--red);color:var(--white);padding:5px 6px 4px;font-weight:400}

.dialog{margin-top:clamp(56px,7vw,90px);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:stretch}
.dialog-face{width:clamp(96px,12vw,150px);aspect-ratio:1;background:url(../img/sky.png) 60% 30%/cover;image-rendering:pixelated;padding:10px;display:flex;align-items:flex-end;justify-content:center;
  box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--ink),0 0 0 4px var(--ink)}
.dialog-face img{width:92%}
.dialog-box{position:relative;background:var(--ink);padding:36px 28px 28px;min-height:150px;
  box-shadow:inset 0 0 0 4px var(--white),inset 0 0 0 8px var(--ink),inset 0 0 0 12px var(--blue),0 0 0 4px var(--ink)}
.dialog-name{position:absolute;top:-16px;left:22px;font-family:var(--f-pixel);font-size:11px;background:var(--red);color:var(--white);padding:9px 10px 7px;box-shadow:0 0 0 4px var(--ink)}
.dialog-text{margin:0;font-family:var(--f-pixel);font-size:clamp(12px,1.35vw,17px);line-height:2;color:var(--white);min-height:4em}
.dialog-next{position:absolute;right:22px;bottom:14px;font-family:var(--f-pixel);font-size:16px;color:var(--yellow);animation:blink .8s steps(1) infinite}

/* ---- HOW TO BUY ---- */
.sec-tutorial{background-color:#050a47}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);perspective:1000px}
.step{position:relative;padding:44px 22px 26px;text-align:center;background:var(--navy);transform-style:preserve-3d;
  box-shadow:inset 6px 6px 0 var(--navy2),inset -6px -6px 0 #000c4a,0 0 0 5px var(--ink),0 10px 0 5px var(--ink)}
.step-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%) translateZ(30px);font-family:var(--f-pixel);font-size:11px;background:var(--red);padding:8px 10px 6px;box-shadow:inset -3px -3px 0 var(--red-d),0 0 0 4px var(--ink)}
.step-ico{font-size:64px;margin:6px auto 18px;display:block;transform:translateZ(40px);filter:drop-shadow(4px 4px 0 var(--ink))}
.step h3{margin:0 0 12px;font-family:var(--f-pixel);font-weight:400;font-size:clamp(11px,1.05vw,14px);color:var(--yellow);line-height:1.5}
.step p{margin:0;color:var(--cream);font-size:22px;line-height:1.1}
.step--boss .step-ico{color:var(--yellow)}
.step--boss{background:#2a1a6e;box-shadow:inset 6px 6px 0 #5140aa,inset -6px -6px 0 #150b44,0 0 0 5px var(--yellow),0 10px 0 5px var(--yellow-d)}
.step:hover .step-ico{animation:headbob .8s steps(2) infinite}
.tut-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin-top:60px}

/* ---- CHART / CRT ---- */
.sec-arena{background-color:var(--ink)}
.crt{position:relative;background:#262b5c;padding:18px 18px 22px;clip-path:var(--notch);
  box-shadow:inset 8px 8px 0 #3d4577,inset -8px -8px 0 #11143a}
.crt-top{display:flex;align-items:center;gap:10px;padding:4px 6px 16px;font-family:var(--f-pixel);font-size:11px}
.led{width:14px;height:14px;background:var(--red);box-shadow:inset -3px -3px 0 var(--red-d)}
.led--y{background:var(--yellow);box-shadow:inset -3px -3px 0 var(--yellow-d)}
.led--g{background:#35d07f;box-shadow:inset -3px -3px 0 #16864b;animation:blink 1.4s steps(1) infinite}
.crt-label{margin-left:10px;color:var(--cream)}
.crt-open{margin-left:auto;color:var(--yellow)}
.crt-open:hover{color:var(--white)}
.crt-screen{position:relative;height:min(640px,70vh);min-height:440px;background:#000;box-shadow:0 0 0 6px #000,inset 0 0 60px rgba(62,179,251,.25)}
.crt-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.crt-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:var(--f-pixel);color:var(--yellow);font-size:clamp(16px,2vw,24px);text-align:center;
  background:url(../img/sky.png) center/cover;image-rendering:pixelated}
.crt-empty::before{content:"";position:absolute;inset:0;background:rgba(4,8,58,.55)}
.crt-empty>*{position:relative}
.crt-empty small{font-size:10px;color:var(--cream)}
.crt-coin{width:110px;animation:spinflat 1.6s steps(8) infinite}
@keyframes spinflat{50%{transform:scaleX(.1)}}
.crt-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px)}
.crt-screen.live .crt-scan{opacity:.35}

/* ---- ROADMAP / WORLD MAP (pinned horizontal) ---- */
.sec-map{position:relative;height:420vh;background:var(--ink)}
.map-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.map-bg{position:absolute;inset:0;background:url(../img/sky.png) center/cover;image-rendering:pixelated}
.map-bg::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(60 * var(--px));background:url(../img/city-near.png) 0 100%/calc(360 * var(--px)) 100% repeat-x;image-rendering:pixelated;opacity:.9}
.map-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,58,.85),rgba(4,8,58,.2) 40%,rgba(4,8,58,.55))}
.map-head{position:absolute;top:calc(var(--hud-h) + 34px);left:0;right:0;z-index:3;margin:0}
.map-head .sec-title{margin-top:14px}
.map-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:clamp(60px,9vw,160px);padding:calc(var(--hud-h) + 130px) 12vw 120px 10vw;z-index:2;will-change:transform}
.map-path{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-hero{position:absolute;left:0;top:0;width:72px;z-index:5;filter:drop-shadow(4px 4px 0 var(--ink));pointer-events:none;will-change:transform}
.world{position:relative;z-index:3;flex:none;width:clamp(240px,22vw,320px);background:var(--cream);padding:10px;
  box-shadow:inset 5px 5px 0 #fff,inset -5px -5px 0 #b7a98c,0 0 0 5px var(--ink),10px 12px 0 5px var(--ink);
  transition:transform .3s steps(3),filter .3s steps(3)}
.world:nth-of-type(odd){transform:translateY(-5vh)}
.world:nth-of-type(even){transform:translateY(5vh)}
.world:not(.active){filter:saturate(.35) brightness(.7)}
.world.active{filter:none}
.world-img{aspect-ratio:1/.72;overflow:hidden;box-shadow:0 0 0 4px var(--ink)}
.world-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.world-body{padding:18px 8px 8px;color:var(--ink)}
.world-no{font-family:var(--f-pixel);font-size:10px;background:var(--blue);color:var(--white);padding:6px 8px 5px;box-shadow:inset -2px -2px 0 var(--blue-d)}
.world h3{margin:16px 0 10px;font-family:var(--f-pixel);font-weight:400;font-size:clamp(14px,1.4vw,19px);color:var(--red)}
.world ul{margin:0;padding:0;list-style:none;font-size:22px;line-height:1.15}
.world li::before{content:"■ ";color:var(--orange)}
.world--gold{background:var(--yellow);box-shadow:inset 5px 5px 0 var(--yellow-l),inset -5px -5px 0 var(--yellow-d),0 0 0 5px var(--ink),10px 12px 0 5px var(--ink)}
.world--gold .world-no{background:var(--red)}

/* ---- LEVEL SELECT ---- */
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 26px;perspective:1000px}
.lvl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:170px;padding:22px 12px;text-align:center;color:var(--white);cursor:pointer;transform-style:preserve-3d}
.lvl [data-icon]{font-size:48px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45))}
.lvl b{font-family:var(--f-pixel);font-weight:400;font-size:clamp(10px,1vw,13px);text-shadow:2px 2px 0 var(--ink);line-height:1.4}
.lvl small{font-family:var(--f-ui);font-size:13px;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvl:hover{--o:var(--white)}
.lvl:active{transform:translateY(5px)!important}
.lvl--red{--c:var(--red);--cl:var(--red-l);--cd:var(--red-d)}
.lvl--yellow{--c:var(--yellow);--cl:var(--yellow-l);--cd:var(--yellow-d);color:var(--ink)}
.lvl--yellow b{text-shadow:none}
.lvl--cyan{--c:#18b8a8;--cl:#7cf0de;--cd:#0b6f67}
.lvl--blue{--c:#2a9df4;--cl:#8ad4ff;--cd:#0b5fb0}
.lvl--dark{--c:#1b1f3f;--cl:#3d4577;--cd:#0a0c22}
.lvl--sky{--c:var(--blue);--cl:var(--blue-l);--cd:var(--blue-d)}
.lvl--purple{--c:var(--purple);--cl:var(--lilac);--cd:#2b1f6b}
.lvl--orange{--c:var(--orange);--cl:#ffc070;--cd:var(--orange-d)}
.lvl--green{--c:#27a95f;--cl:#7deaa8;--cd:#136b3a}
.lvl--gold{--c:#d6a21c;--cl:var(--yellow-l);--cd:#8a5a07}
.lvl.copied{--c:#35d07f;--cl:#8ff5bd;--cd:#16864b}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.foot{position:relative;background:var(--ink);padding:calc(60 * var(--px) + 30px) 0 50px;text-align:center;overflow:hidden}
.foot-city{position:absolute;left:0;right:0;top:0;height:calc(60 * var(--px));background:url(../img/city-near.png) 0 100%/calc(360 * var(--px)) 100% repeat-x,url(../img/sky.png) center/cover;image-rendering:pixelated}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:28px}
.foot-coin{width:90px;animation:spinflat 1.6s steps(8) infinite}
.foot-title{font-family:var(--f-pixel);font-size:clamp(13px,2.6vw,32px);color:var(--yellow);text-shadow:.1em .1em 0 var(--red),.2em .2em 0 #000}
.foot-continue{font-family:var(--f-pixel);font-size:14px;color:var(--white)}
.foot-continue b{color:var(--red);font-weight:400;display:inline-block;min-width:1.2em}
.foot-social{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:6px}
.cheat--foot{max-width:640px}
.foot-legal{margin:10px 0 0;max-width:640px;font-size:18px;color:#8b93c9}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;z-index:9500;transform:translate(-50%,160%);font-family:var(--f-pixel);font-size:12px;background:var(--yellow);color:var(--ink);padding:16px 18px 14px;
  box-shadow:inset 4px 4px 0 var(--yellow-l),inset -4px -4px 0 var(--yellow-d),0 0 0 4px var(--ink),0 8px 0 4px var(--ink);transition:transform .3s steps(4),visibility 0s .3s;visibility:hidden}
.toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .3s steps(4)}

/* +1 popups & pixel particles */
.pop{position:fixed;z-index:9600;pointer-events:none;font-family:var(--f-pixel);font-size:14px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);animation:popup .9s steps(6) forwards}
@keyframes popup{to{transform:translateY(-60px);opacity:0}}
.spark{position:fixed;z-index:9600;width:8px;height:8px;pointer-events:none}

/* ---------------------------------------------------------
   REVEAL (stepped pixel wipe)
--------------------------------------------------------- */
.js [data-reveal]{opacity:0;clip-path:inset(0 0 100% 0);translate:0 30px;transition:opacity .15s steps(2),clip-path .65s steps(7),translate .65s steps(7)}
.js [data-reveal].in{opacity:1;clip-path:inset(-60px -60px -60px -60px);translate:0 0}
.panels [data-reveal]:nth-child(2),.steps [data-reveal]:nth-child(2){transition-delay:.12s}
.panels [data-reveal]:nth-child(3),.steps [data-reveal]:nth-child(3){transition-delay:.24s}
.steps [data-reveal]:nth-child(4){transition-delay:.36s}
.levels [data-reveal]:nth-child(5n+2){transition-delay:.06s}
.levels [data-reveal]:nth-child(5n+3){transition-delay:.12s}
.levels [data-reveal]:nth-child(5n+4){transition-delay:.18s}
.levels [data-reveal]:nth-child(5n+5){transition-delay:.24s}
/* the hero title / cta keep their drop-shadows visible when revealed */
.js .hero [data-reveal].in{clip-path:none}
.js .levels [data-reveal].in,.js .tut-cta.in,.js .cta.in{clip-path:none}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:1100px){
  .hud-nav{gap:18px}
  .hud-nav-social .icobtn b{display:none}
  .levels{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  :root{--hud-h:58px}
  body{font-size:20px}
  .hud-burger{display:block}
  .hud-nav{position:fixed;left:0;right:0;top:calc(var(--hud-h) + 24px);bottom:0;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:26px 24px 40px;background:#04083a;
    transform:translateX(100%);transition:transform .35s steps(5);overflow-y:auto}
  .hud-nav.open{transform:none}
  .hud-nav>a{font-size:14px;padding:22px 8px;border-bottom:4px dashed #1a2a8a}
  .hud-nav>a::before{display:none}
  .hud-nav-social{margin:30px 0 0;justify-content:center;flex-wrap:wrap;gap:18px}
  .hud-nav-social .icobtn{font-size:12px;padding:14px 16px}
  .hud-nav-social .icobtn b{display:inline}
  .hud-logo-name{font-size:11px}

  .hero{padding-top:calc(var(--hud-h) + 50px);padding-bottom:100px}
  .hero::after{background:linear-gradient(0deg,rgba(4,8,58,.85),rgba(4,8,58,.3) 55%,rgba(4,8,58,.5))}
  .hero-inner{grid-template-columns:1fr;gap:38px;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .cta{align-items:center;width:100%}
  .hero-stage{order:-1;width:min(360px,74vw);margin:0 auto}
  .card3d-hp{left:-8px;bottom:20px;padding:8px 9px}
  .card3d-hp i{width:7px;height:11px}
  .ticker-chip{margin:24px 0 26px}
  .p1{margin-bottom:16px}
  .card3d{transform:rotateY(-6deg) rotateX(3deg)}
  .coin{left:-6%}
  .panels{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .panel:nth-child(2){margin-top:0}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .dialog{grid-template-columns:1fr;justify-items:center}
  .dialog-box{width:100%}

  .sec-map{height:auto}
  .map-sticky{position:relative;height:auto;overflow:visible;padding:120px 0 90px}
  .map-head{position:relative;top:0;margin-bottom:60px}
  .map-track{position:relative;flex-direction:column;height:auto;padding:0 20px;transform:none!important;gap:60px}
  .map-path,.map-hero{display:none}
  .world,.world:nth-of-type(odd),.world:nth-of-type(even){transform:none;width:min(380px,100%);filter:none}
  .levels{grid-template-columns:repeat(2,1fr);gap:22px}
  .lvl{min-height:140px}
}
@media (max-width:520px){
  .hud-logo-name{display:none}
  .title{font-size:clamp(38px,12.5vw,60px)}
  .pxbtn--xl{width:100%;padding:22px 16px;font-size:13px}
  .cheat-code{font-size:20px}
  .cheat-label{padding:0 8px 0 14px}
  .steps{grid-template-columns:1fr}
  .crt-screen{min-height:420px;height:70vh}
  .foot-social .pxbtn{padding:16px 16px}
  .press-start{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}