@font-face{font-family:"Pricedown";src:url(../fonts/pricedown-bl.woff) format("woff");font-display:swap}
@font-face{font-family:"STM";src:url(../fonts/share-tech-mono-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow C";src:url(../fonts/barlow-condensed-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow C";src:url(../fonts/barlow-condensed-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--red:#d6121a;--red2:#ff2a2a;--ink:#070707;--g1:#0e0e10;--g2:#18181b;--g3:#2a2a2e;--fg:#ececec;--mut:#9a9aa0;--sat:1;--blur:0px;--pd:"Pricedown",Impact,sans-serif;--mono:"STM",ui-monospace,monospace;--bc:"Barlow C","Arial Narrow",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font:500 18px/1.5 var(--bc);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
.pd{font-family:var(--pd);font-weight:400;letter-spacing:.01em}
.wred{color:var(--red);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 0 1px #000,4px 4px 0 rgba(0,0,0,.65)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* WORLD CANVAS */
#world{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;filter:saturate(var(--sat)) blur(var(--blur));transition:filter .9s ease}
body.dead #world{filter:grayscale(1) blur(2.5px) brightness(.62) contrast(1.15)!important}
#vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
main{position:relative;z-index:2}
/* BOOT */
#boot{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s}
#boot.gone{opacity:0;visibility:hidden}
#boot .bg{position:absolute;inset:0;background:url(../img/logo.webp) center/cover;filter:grayscale(1) blur(8px) brightness(.35);transform:scale(1.1)}
#boot .in{position:relative;text-align:center;padding:24px}
#boot .w{font-size:clamp(84px,22vw,260px);line-height:.9;opacity:0;transform:scale(2.4);filter:blur(8px)}
#boot.flash .w{animation:wIn 1.1s cubic-bezier(.2,.9,.2,1) forwards}
#boot .bar{width:min(420px,70vw);height:6px;background:#222;margin:26px auto 10px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:var(--red);transition:width .25s}
#boot .tip{font:15px var(--mono);color:var(--mut);min-height:1.5em}
#boot button{margin-top:18px;background:none;border:1px solid #444;color:#ddd;font:14px var(--mono);padding:8px 16px;cursor:pointer;letter-spacing:.1em}
@keyframes wIn{0%{opacity:0;transform:scale(2.4);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
/* HUD */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;font-family:var(--pd)}
#hud .tr{position:absolute;top:14px;right:16px;text-align:right}
#hud .clock{font:22px var(--pd);color:#fff;-webkit-text-stroke:1px #000;paint-order:stroke fill}
#hud .money{font-size:30px;color:#7ed957;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;line-height:1}
#hud .stars{font-size:22px;color:#333;letter-spacing:2px;-webkit-text-stroke:1px #000}
#hud .stars b{color:#fff;font-weight:400}
#hud .stars.flash b{animation:blink .35s steps(2) infinite}
#hud .kills{font:12px var(--mono);color:#ddd;text-shadow:0 1px 2px #000;margin-top:4px}
#hud .bl{position:absolute;left:16px;bottom:16px;width:150px}
#mini{width:150px;height:110px;border:3px solid #111;background:#0d0d0d;display:block;border-radius:4px}
#hud .bars{display:flex;gap:3px;margin-top:3px}
#hud .bars span{height:7px;background:#123012;flex:1;position:relative;overflow:hidden}
#hud .bars span i{position:absolute;inset:0;background:#58b146;transform-origin:left;transition:transform .3s}
#hud .bars span.ar i{background:#4a90d9}
#hud .ctrl{position:absolute;left:180px;bottom:18px;font:12px var(--mono);color:#bbb;text-shadow:0 1px 2px #000;max-width:260px}
#hud.hidden{opacity:0;transition:opacity .4s}
@media(max-width:700px){#hud .bl{width:104px}#mini{width:104px;height:78px}#hud .ctrl{display:none}#hud .money{font-size:22px}#hud .stars{font-size:16px}}
/* WASTED OVERLAY */
#wasted{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .4s}
#wasted.on{opacity:1}
#wasted .band{width:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.72) 20%,rgba(0,0,0,.72) 80%,transparent);text-align:center;padding:2vh 0 1vh}
#wasted .t{font-size:clamp(80px,17vw,220px);line-height:.95;display:inline-block}
#wasted.on .t{animation:wIn .9s cubic-bezier(.2,.9,.2,1) both}
#wasted .sub{font:16px var(--mono);color:#ddd;margin-top:4px;letter-spacing:.08em}
#toast{position:fixed;top:16px;left:16px;z-index:60;background:rgba(0,0,0,.82);border-left:4px solid var(--red);font:15px var(--mono);padding:10px 14px;max-width:320px;transform:translateX(-120%);transition:transform .35s}
#toast.on{transform:none}
/* NAV */
nav.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px;pointer-events:none}
nav.top .brand{pointer-events:auto;display:flex;align-items:center;gap:10px;text-decoration:none}
nav.top .brand img{width:40px;height:40px;border:2px solid #000;object-fit:cover}
nav.top .brand span{font:28px var(--pd);color:var(--red);-webkit-text-stroke:1px #000}
nav.top .links{pointer-events:auto;display:flex;gap:4px;margin:0 auto;background:rgba(0,0,0,.55);padding:4px;backdrop-filter:blur(6px)}
nav.top .links a{font:700 15px var(--bc);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:6px 10px;color:#ccc}
nav.top .links a:hover{color:#fff;background:var(--red)}
@media(max-width:900px){nav.top .links{display:none}}
/* SECTIONS */
section{position:relative;padding:110px 20px;overflow:hidden}
.wrap{max-width:1180px;margin:0 auto;position:relative}
.kick{font:15px var(--mono);letter-spacing:.2em;color:var(--red2);text-transform:uppercase;margin-bottom:10px}
h2{font:clamp(48px,8vw,104px)/.95 var(--pd);font-weight:400;margin-bottom:22px}
h2 .wh{color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.lead{font-size:clamp(19px,2.2vw,24px);max-width:720px;color:#ddd}
.reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .9s,transform .9s,filter .9s}
.reveal.in{opacity:1;transform:none;filter:none}
/* HERO */
#hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:90px;padding-bottom:160px}
#hero .wrap{width:100%}
#hero .chip{display:inline-flex;gap:8px;align-items:center;font:14px var(--mono);background:rgba(0,0,0,.6);padding:6px 12px;border:1px solid #333;letter-spacing:.12em}
#hero .chip i{width:8px;height:8px;border-radius:50%;background:var(--red2);box-shadow:0 0 8px var(--red2);animation:blink 1s steps(2) infinite}
#hero h1{font-size:clamp(110px,24vw,330px);line-height:.82;margin:10px 0 0;cursor:crosshair;user-select:none}
#hero h1 .g{display:inline-block;position:relative}
#hero h1:hover .g{animation:glitch .35s steps(2) infinite}
#hero .tick{font:clamp(34px,5vw,62px) var(--pd);color:#fff;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;margin-top:4px}
#hero .tag{font:700 clamp(20px,2.6vw,30px) var(--bc);text-transform:uppercase;letter-spacing:.14em;margin:10px 0 24px;text-shadow:0 2px 6px #000}
#hero .tag b{color:var(--red2)}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 18px var(--bc);text-transform:uppercase;letter-spacing:.1em;padding:13px 20px;border:2px solid #000;text-decoration:none;background:#f1f1f1;color:#000;cursor:pointer;position:relative;box-shadow:4px 4px 0 #000;transition:transform .12s,box-shadow .12s}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.btn.red{background:var(--red);color:#fff}
.btn.dark{background:rgba(10,10,10,.85);color:#eee;border-color:#444}
.btn.off{opacity:.62;cursor:not-allowed}
.btn.off:hover{transform:none;box-shadow:4px 4px 0 #000}
.btn em{font:12px var(--mono);font-style:normal;background:#000;color:#ffd200;padding:2px 6px;margin-left:4px}
.ca{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;background:rgba(0,0,0,.72);border:1px solid #333;padding:10px 14px;max-width:640px;font-family:var(--mono)}
.ca .lbl{color:var(--red2);font-size:13px;letter-spacing:.14em}
.ca code{font:15px var(--mono);color:#fff;word-break:break-all;flex:1}
.ca button{font:13px var(--mono);background:#222;color:#888;border:1px solid #444;padding:5px 10px}
#hero .hint{margin-top:22px;font:14px var(--mono);color:#bbb;text-shadow:0 1px 3px #000}
#hero .hint kbd{border:1px solid #666;background:#111;padding:1px 6px;font:13px var(--mono)}
#sellBtn{background:#000;color:var(--red2);border-color:var(--red)}
/* about w/ video bg */
.vbg{position:absolute;inset:0;z-index:0}
.vbg video,.vbg img{width:100%;height:100%;object-fit:cover}
.vbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(7,7,7,.55) 25%,rgba(7,7,7,.55) 75%,var(--ink) 100%)}
.vbg.grey video{filter:grayscale(1) contrast(1.1) brightness(.75)}
#about{min-height:90vh;display:flex;align-items:center}
#about .wrap{z-index:1}
#about .big{font:clamp(44px,8vw,110px)/.95 var(--pd);margin:18px 0}
.bio p{max-width:740px;font-size:clamp(19px,2.1vw,24px);margin-bottom:14px;text-shadow:0 2px 8px #000}
.disc{font:14px var(--mono);color:var(--mut);margin-top:20px;max-width:740px}
/* history */
#history{background:linear-gradient(#070707,#0c0c0e)}
.tl{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 22px;margin-top:26px;scrollbar-color:var(--red) #111}
.era{flex:0 0 min(78vw,420px);scroll-snap-align:start;background:#111;border:1px solid #262626;position:relative;cursor:zoom-in}
.era .im{background:#000;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden}
.era img{width:100%;height:100%;object-fit:contain}
.era .yr{position:absolute;top:10px;left:10px;font:26px var(--pd);color:#fff;background:var(--red);padding:2px 10px;-webkit-text-stroke:1px #000}
.era .tx{padding:14px 16px 18px}
.era h3{font:28px var(--pd);font-weight:400;color:#fff;line-height:1.05;margin-bottom:6px}
.era p{font-size:17px;color:#bbb}
.era:hover img{filter:grayscale(1) contrast(1.2)}
.tlnav{display:flex;gap:8px;margin-top:6px}
.tlnav button{font:20px var(--pd);background:#151515;color:#fff;border:1px solid #333;width:46px;height:40px;cursor:pointer}
.crt{margin-top:60px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.crt .scr{position:relative;border:10px solid #1b1b1b;border-radius:14px;background:#000;box-shadow:0 0 0 2px #333,0 30px 60px rgba(0,0,0,.6);overflow:hidden}
.crt .scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px)}
.crt video{width:100%;height:auto;aspect-ratio:16/9}
.crt .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);border:0;cursor:pointer;z-index:2;color:#fff;font:40px var(--pd)}
.crt .play span{background:var(--red);padding:8px 24px;border:3px solid #000}
.crt.playing .play{display:none}
.credit{font:13px var(--mono);color:var(--mut);margin-top:10px}
@media(max-width:860px){.crt{grid-template-columns:1fr}}
/* token / mission */
#token{min-height:80vh}
#token .wrap{z-index:1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px}
.tile{background:rgba(8,8,8,.82);border:1px solid #2c2c2c;padding:20px;position:relative;backdrop-filter:blur(4px);transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--red);transform:translateY(-3px)}
.tile .k{font:13px var(--mono);letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.tile .v{font:40px var(--pd);color:#fff;line-height:1.1;margin-top:6px;-webkit-text-stroke:1px #000;word-break:break-word}
.tile .v.r{color:var(--red2)}
.tile .s{font:14px var(--mono);color:#aaa;margin-top:6px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:40px}
.steps li{list-style:none;background:rgba(8,8,8,.82);border-left:4px solid var(--red);padding:16px 18px;font-size:18px}
.steps li::before{counter-increment:s;content:"0" counter(s);font:30px var(--pd);color:var(--red2);display:block}
/* memes */
#memes{background:#0a0a0b}
.wall{columns:3 320px;column-gap:14px;margin-top:26px}
.meme{break-inside:avoid;margin-bottom:14px;position:relative;cursor:zoom-in;background:#000;border:1px solid #222;overflow:hidden;display:block;width:100%;padding:0;color:inherit;text-align:left}
.meme img{width:100%;height:auto;transition:filter .3s,transform .3s}
.meme .stamp{position:absolute;inset:0;display:grid;place-items:center;font:clamp(48px,7vw,84px) var(--pd);color:var(--red);-webkit-text-stroke:2px #000;opacity:0;transform:scale(1.6);transition:opacity .25s,transform .25s;pointer-events:none;text-shadow:3px 3px 0 #000}
.meme:hover img,.meme:focus-visible img{filter:grayscale(1) blur(1.5px) brightness(.6)}
.meme:hover .stamp,.meme:focus-visible .stamp{opacity:1;transform:scale(1)}
.meme:hover{animation:glitch .3s steps(2) 1}
.meme .cap{position:absolute;left:0;right:0;bottom:0;font:14px var(--mono);padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .25s}
.meme:hover .cap{opacity:1}
/* VI */
#next{min-height:80vh;display:flex;align-items:center}
#next .wrap{z-index:1}
/* join */
#join{padding:90px 0 40px;background:#070707;text-align:center}
#join .ban{width:min(98vw,2172px);margin:0 auto;border-top:3px solid var(--red);border-bottom:3px solid var(--red);background:#000}
#join .ban img{width:100%;height:auto}
#join .ctas{justify-content:center;margin-top:30px}
#join h2{margin-top:24px}
footer{text-align:center;padding:40px 20px 60px;font:14px var(--mono);color:var(--mut);background:#070707;position:relative;z-index:2}
footer p{max-width:800px;margin:6px auto}
/* lightbox */
#lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:4vh 4vw;flex-direction:column;gap:12px}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain}
#lb p{font:15px var(--mono);color:#ccc;text-align:center}
#lb button{position:absolute;background:#111;color:#fff;border:1px solid #444;font:28px var(--pd);width:50px;height:50px;cursor:pointer}
#lb .x{top:14px;right:14px}#lb .p{left:10px;top:50%}#lb .n{right:10px;top:50%}
/* marquee */
.marq{background:var(--red);color:#000;font:30px var(--pd);white-space:nowrap;overflow:hidden;border-top:3px solid #000;border-bottom:3px solid #000;position:relative;z-index:2}
.marq div{display:inline-block;padding:6px 0;animation:mq 30s linear infinite}
.marq span{padding:0 24px}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:0}}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-3px,2px);text-shadow:-3px 0 #0ff,3px 0 #f00}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(0)}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none}.marq div{animation:none}}
/* fixes */
#hud .tr{top:64px}
.era{text-align:left;color:inherit;font:inherit;padding:0}
body.dead main,body.dead nav.top{opacity:.08;filter:blur(3px);transition:opacity .5s,filter .5s}
main,nav.top{transition:opacity .6s,filter .6s}
@media(min-width:1000px){#hero .wrap{max-width:1180px}#hero .wrap>*{max-width:640px}#hero h1{font-size:clamp(120px,15vw,230px);max-width:none}}
@media(max-width:700px){#hero h1{font-size:19vw}#hero .chip{font-size:11px}#hud .tr{top:62px;right:10px}#hud .kills{display:none}}
#toast{top:70px}
@media(max-width:700px){#hud .tr{top:auto;bottom:14px;right:12px}}
/* v2: hero = video bg only; 3D world lives in #drive */
#hero{background:#050505}
#hero .wrap{z-index:1}
.hero-v video{filter:saturate(var(--sat)) blur(var(--blur)) contrast(1.05);transition:filter .9s}
.hero-v::after{background:linear-gradient(90deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.55) 45%,rgba(5,5,5,.15) 100%),linear-gradient(180deg,rgba(5,5,5,.35) 0%,transparent 30%,transparent 70%,var(--ink) 100%)}
body.dead .hero-v video{filter:grayscale(1) blur(2.5px) brightness(.62) contrast(1.15)!important}
#hero .hint a{color:#fff}
#drive{padding-bottom:0;background:#070707}
#drive kbd{border:1px solid #666;background:#111;padding:0 6px;font:14px var(--mono)}
#drive .stage{position:relative;height:min(82vh,760px);min-height:460px;margin-top:30px;border-top:3px solid var(--red);border-bottom:3px solid var(--red);overflow:hidden;touch-action:pan-y}
#world{position:absolute;inset:0;width:100%;height:100%;filter:none}
#vign{position:absolute}
#hud{position:absolute}
#hud .tr{top:14px}
@media(max-width:700px){#hud .tr{top:auto;bottom:14px}}