@font-face{font-family:'InterX';src:url(fonts/inter-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JerseyX';src:url(fonts/jersey25.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --ui:'InterX','Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --px:'JerseyX','Jersey 25','Press Start 2P','Courier New',monospace;
  --ink:#0f1626;
  --muted:#5b6478;
  --sky-top:#5fb8ff;
  --sky-mid:#9ad4ff;
  --sky-low:#e6f4ff;
  --red:#e4000f;
  --gold:#f8c300;
  --gold-dark:#d69e00;
  --orange:#f7931a;
  --green:#3fb63a;
  --green-dark:#1f7a1c;
  --brick:#c8622a;
  --brick-dark:#8a3d14;
  --line:#e6ebf3;
  --shadow:0 20px 50px rgba(15,22,38,.14);
  --shadow-sm:0 8px 24px rgba(15,22,38,.10);
  --r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ui);font-weight:500;color:var(--ink);background:#fff;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
strong{font-weight:800}
.wrap{width:min(1180px,100%);margin:0 auto;padding:0 clamp(18px,4vw,40px);position:relative;z-index:2}
h2{font-weight:900;font-size:clamp(32px,4.6vw,56px);line-height:1.02;letter-spacing:-.025em;margin-bottom:16px}
h3{font-weight:800;font-size:22px;letter-spacing:-.01em}
.kicker{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.body{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:60ch}
.fine{font-size:13px;color:var(--muted);margin-top:18px;max-width:64ch}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* wordmark: the ONE pixel element */
.wordmark{font-family:var(--px);font-weight:400;line-height:.9;letter-spacing:.01em;
  font-size:clamp(84px,13vw,168px);color:var(--gold);
  text-shadow:0 5px 0 var(--gold-dark),0 14px 30px rgba(214,158,0,.35);margin:2px 0 8px}
.wordmark.sm{font-size:34px;text-shadow:0 3px 0 var(--gold-dark)}
.ticker-line{font-weight:800;font-size:18px;color:var(--ink);letter-spacing:.02em;margin-bottom:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;
  padding:13px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:16px 28px;font-size:17px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px rgba(228,0,15,.28)}
.btn-red:hover{background:#ff1a2a;box-shadow:0 14px 30px rgba(228,0,15,.34)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#cfd6e2}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:12px clamp(16px,3vw,32px);background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:36px;height:36px}
.brand-name{font-family:var(--px);font-size:26px;line-height:1;color:var(--ink);letter-spacing:.02em}
.links{display:flex;justify-content:center;gap:26px;font-weight:700;font-size:15px}
.links a{text-decoration:none;color:var(--muted)}
.links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:14px}
.coins{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--ink);background:#fff7d6;border:1px solid #ffe08a;border-radius:999px;padding:5px 12px 5px 6px}
.coins img{width:22px;height:22px;object-fit:contain}
.coins.bump{animation:bump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{50%{transform:scale(1.18)}}
@media (max-width:900px){.links{display:none}}
@media (max-width:520px){.nav .btn{padding:10px 14px;font-size:14px}.brand-name{display:none}}

/* ---------- WORLD pieces ---------- */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cloud{position:absolute;width:clamp(120px,14vw,220px);will-change:transform;animation:drift 18s ease-in-out infinite alternate;filter:drop-shadow(0 12px 20px rgba(15,22,38,.08))}
.cloud.c1{top:5%;left:34%;width:clamp(140px,15vw,230px);opacity:.95}
.cloud.c2{top:10%;left:56%;width:clamp(100px,11vw,170px);animation-duration:24s;animation-delay:-8s}
.cloud.c3{top:20%;left:74%;width:clamp(150px,16vw,240px);opacity:.9;animation-duration:21s;animation-delay:-4s}
.cloud.c4{top:50%;left:86%;width:clamp(90px,10vw,150px);opacity:.85;animation-duration:28s;animation-delay:-14s}
.cloud.c5{top:8%;left:8%}
.cloud.c6{top:14%;left:62%;width:clamp(140px,16vw,240px);animation-duration:26s;animation-delay:-10s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(6vw)}}
.hills{position:absolute;left:0;right:0;bottom:60px;height:24%;pointer-events:none;z-index:0;overflow:hidden}
.hill{position:absolute;bottom:-4px;will-change:transform}
.hill.h1{left:-8%;width:clamp(260px,28vw,440px)}
.hill.h2{left:36%;width:clamp(180px,20vw,320px);opacity:.9}
.hill.h3{right:-6%;width:clamp(300px,34vw,540px)}
.ground{position:relative;z-index:3;height:72px;
  background:url(img/brick-row.png) repeat-x center bottom / auto 100%;
  filter:drop-shadow(0 -6px 14px rgba(0,0,0,.08))}
.pipe{will-change:transform}
.coin-rain{position:absolute;inset:0}
.coin-rain img{position:absolute;bottom:-60px;width:34px;opacity:0;animation:rise linear forwards}
@keyframes rise{0%{transform:translateY(0) rotateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-110vh) rotateY(720deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.cloud,.coin-rain img{animation:none}}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 100%)}
.hero-in{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto;padding:clamp(40px,6vw,80px) clamp(18px,4vw,40px) 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:end;min-height:calc(100svh - 62px)}
.hero-copy{padding-bottom:clamp(64px,8vw,110px);align-self:center}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pill{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(255,255,255,.6);color:var(--muted);box-shadow:var(--shadow-sm)}
.pill-orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.headline{font-weight:900;font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.025em;margin-bottom:18px;color:var(--ink)}
.lede{font-size:clamp(17px,1.5vw,19px);color:#2b3447;max-width:52ch;margin-bottom:28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

.scene{position:relative;height:clamp(560px,60vw,720px);display:flex;align-items:flex-start;justify-content:center}
.block{position:relative;z-index:3;background:none;border:0;padding:0;cursor:pointer;margin-top:1%;height:36%;width:auto;
  filter:drop-shadow(0 30px 40px rgba(214,158,0,.35));animation:float 3.2s ease-in-out infinite;transition:transform .2s}
.block img{height:100%;width:auto}
.block picture{display:block;height:100%}
.block:hover{transform:scale(1.03)}
.block.hit{animation:hit .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hit{0%{transform:translateY(0)}35%{transform:translateY(-44px) scale(1.04)}100%{transform:translateY(0)}}
.mario{position:absolute;z-index:2;bottom:-8px;left:50%;height:58%;width:auto;transform:translateX(-58%);
  filter:drop-shadow(0 24px 30px rgba(15,22,38,.25));cursor:pointer}
.mario.jump{animation:jump .5s cubic-bezier(.2,1.2,.4,1)}
@keyframes jump{0%{transform:translateX(-58%) translateY(0)}45%{transform:translateX(-58%) translateY(-90px)}100%{transform:translateX(-58%) translateY(0)}}
.tap{position:absolute;z-index:4;top:-6px;left:50%;transform:translateX(-50%);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:#fff;border-radius:999px;padding:7px 12px;box-shadow:var(--shadow-sm);animation:nudge 1.6s ease-in-out infinite}
.tap.off{display:none}
@keyframes nudge{50%{transform:translate(-50%,6px)}}
.coin-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.pop{position:absolute;left:50%;top:12%;width:64px;height:64px;margin-left:-32px;animation:pop .8s cubic-bezier(.2,.9,.3,1) forwards}
.pop img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(214,158,0,.5))}
@keyframes pop{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}50%{transform:translateY(-160px) scale(1)}100%{transform:translateY(-90px) scale(.9);opacity:0}}
.score{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-weight:900;font-size:15px;color:var(--ink);background:#fff;border-radius:999px;padding:6px 12px;box-shadow:var(--shadow-sm);animation:up 1s ease-out forwards;white-space:nowrap}
@keyframes up{to{transform:translate(-50%,-120px);opacity:0}}
.pipe-hero{position:absolute;z-index:2;right:clamp(-40px,-2vw,0px);bottom:56px;width:clamp(120px,13vw,210px);filter:drop-shadow(0 20px 30px rgba(15,22,38,.2))}
@media (prefers-reduced-motion:reduce){.block,.tap{animation:none}}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:32px;align-items:start}
  .hero-copy{padding-bottom:8px}
  .scene{height:clamp(440px,115vw,600px);margin-top:12px}
  .block{height:34%;margin-top:4%}
  .mario{height:58%;bottom:-6px}
  .pipe-hero{width:clamp(90px,22vw,130px);right:-10px;bottom:54px}
  .hills{bottom:54px}
  .cloud.c1{display:none}
  .cloud.c3{top:42%;left:68%;width:130px}
}

/* ---------- ORIGINAL ---------- */
.original{position:relative;padding:clamp(64px,9vw,120px) 0 clamp(48px,7vw,90px);background:#fff;overflow:hidden}
.deco.cloud-deco{position:absolute;right:-40px;top:40px;width:clamp(160px,18vw,280px);opacity:.9;pointer-events:none}
.original .body{margin-bottom:28px}
.tv{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#000;border:1px solid var(--line)}
.mario-video{width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- LORE : the level ---------- */
.lore{position:relative;padding:clamp(56px,8vw,110px) 0 0;background:linear-gradient(180deg,#fff 0%,var(--sky-low) 30%,var(--sky-mid) 100%);overflow:hidden}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 0 26px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card.reveal:nth-child(2){transition-delay:.1s}.card.reveal:nth-child(3){transition-delay:.2s}
.card-art{height:240px;display:grid;place-items:center;overflow:hidden;padding:18px}
.card-art img{max-height:100%;width:auto;object-fit:contain}
.art-1985{background:linear-gradient(180deg,#dff0ff,#f6fbff)}
.art-1985 img{height:100%}
.art-2009{background:linear-gradient(180deg,#fff2df,#fff9f0)}
.art-2009 img{height:82%}
.art-now{background:linear-gradient(180deg,#fff3c2,#fffaf0)}
.art-now img{height:100%}
.card .year,.card h3,.card p{padding:0 24px}
.year{display:inline-block;margin:20px 24px 8px;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}
.card-gold{border-color:#ffe08a;background:#fffdf3}
.history{margin:40px 0 0;text-align:center;font-weight:900;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em}
.history span{color:var(--red)}
.level-strip{position:relative;height:clamp(220px,26vw,340px);margin-top:56px}
.level-strip .hill{bottom:66px}
.level-strip .lh1{left:-4%;width:clamp(240px,30vw,480px)}
.level-strip .lh2{right:10%;width:clamp(180px,22vw,360px)}
.pipe-lore{position:absolute;right:clamp(0px,3vw,60px);bottom:66px;width:clamp(100px,11vw,170px);filter:drop-shadow(0 16px 26px rgba(15,22,38,.18))}
.shelf-img{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(120px,15vw,200px);width:clamp(280px,42vw,620px);filter:drop-shadow(0 18px 26px rgba(15,22,38,.18));animation:float 4s ease-in-out infinite}
.level-strip .ground{position:absolute;left:0;right:0;bottom:0}
@media (max-width:900px){.timeline{grid-template-columns:1fr}.level-strip{height:220px}.shelf-img{width:70vw;bottom:120px}.level-strip .lh2{display:none}}

/* ---------- REWARDS : underground ---------- */
.rewards{position:relative;padding:clamp(56px,8vw,110px) 0;background:#0b1633;color:#fff;overflow:hidden}
.rewards::before,.rewards::after{content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(90deg,#24346a 0 52px,#0b1633 52px 56px),linear-gradient(#24346a,#24346a)}
.rewards::before{top:0}
.rewards::after{bottom:0}
.rewards .kicker{color:var(--gold)}
.rewards .body{color:rgba(255,255,255,.72)}
.rewards .fine{color:rgba(255,255,255,.5)}
.rewards-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.flow{list-style:none;counter-reset:s;display:grid;gap:10px;margin-top:26px}
.flow li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.flow li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--ink);background:var(--gold);grid-row:1/span 2}
.flow b{font-weight:800;font-size:16px}
.flow span{color:rgba(255,255,255,.65);font-size:14px}
.flow li:last-child{background:rgba(247,147,26,.14);border-color:rgba(247,147,26,.5)}
.flow li:last-child::before{background:var(--orange);color:#fff}
.rewards-art{display:grid;gap:18px;justify-items:center}
.render-panel{width:min(100%,460px);padding:28px 40px 12px;border-radius:28px;background:linear-gradient(180deg,#fff7d6,#fffdf6);box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08)}
.render-panel img{width:100%}
.tracker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.tile.big{grid-column:1 / -1;background:rgba(247,147,26,.12);border-color:rgba(247,147,26,.45)}
.tile.big .t-v{font-size:clamp(28px,3vw,40px)}
.t-sub{font-size:13px;color:rgba(255,255,255,.6)}
.tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.t-k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.t-v{font-weight:900;font-size:22px;color:#fff}
.t-v.orange{color:var(--orange)}
@media (max-width:900px){.rewards-grid{grid-template-columns:1fr}.tracker{grid-template-columns:repeat(2,1fr)}}

/* ---------- BUY : the pipe ---------- */
.buy{position:relative;padding:clamp(56px,8vw,110px) 0 0;background:linear-gradient(180deg,var(--sky-top),var(--sky-low));overflow:hidden}
.buy-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:end;padding-bottom:0}
.buy-copy{padding-bottom:clamp(40px,6vw,80px)}
.buy .body{color:#2b3447}
.ca{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-sm);margin-top:22px}
.ca-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.ca code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;word-break:break-all;color:var(--ink)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.door[hidden]{display:none}
.door{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.door:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#ffd54a}
.door b{font-weight:900;font-size:18px}
.door span{font-size:13.5px;color:var(--muted)}
.buy-art{position:relative;height:clamp(320px,34vw,520px)}
.pipe-buy{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:clamp(200px,24vw,360px);filter:drop-shadow(0 24px 34px rgba(15,22,38,.22))}
.mario-2{position:absolute;left:50%;bottom:clamp(180px,20vw,300px);transform:translateX(-40%);width:clamp(120px,14vw,200px);filter:drop-shadow(0 20px 26px rgba(15,22,38,.25));animation:hover 3s ease-in-out infinite}
@keyframes hover{50%{transform:translateX(-40%) translateY(-14px)}}
@media (max-width:900px){.buy-grid{grid-template-columns:1fr}.buy-art{height:300px}.doors{grid-template-columns:1fr 1fr}.ca{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{padding:44px 0 40px;text-align:center;background:#0f1626;color:#fff}
.foot-mark{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.foot-ticker{font-weight:800;font-size:18px;color:rgba(255,255,255,.7)}
.disc{font-size:13px;color:rgba(255,255,255,.5);max-width:72ch;margin:0 auto}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:60;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:11px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}