:root{--ink:#000;--paper:#fff;--neon:#ccff00;--gray:#8fc400;--soft:#e4ff66;--b:3px;--f:'Silkscreen','Press Start 2P',ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#ccff00;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.7;letter-spacing:.04em;min-height:100vh;overflow-x:hidden;animation:enter .7s ease both;image-rendering:pixelated}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% 108%,#b4e600 0,#c2f500 38%,#ccff00 70%)}
body::after{content:"";position:fixed;left:0;right:0;bottom:12vh;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.25) 20%,rgba(0,0,0,.25) 80%,transparent);z-index:-1}
@keyframes enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
a{color:inherit}
img{image-rendering:pixelated;max-width:100%;display:block}
.wrap{width:min(1120px,100% - 32px);margin:0 auto;position:relative;z-index:2}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(204,255,0,.94);backdrop-filter:blur(4px);border-bottom:var(--b) solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;font-weight:700}
.brand i{width:26px;height:22px;border:var(--b) solid var(--ink);position:relative;background:#fff;display:block}
.brand i::before,.brand i::after{content:"";position:absolute;top:6px;width:4px;height:5px;background:var(--ink)}
.brand i::before{left:4px}.brand i::after{right:4px}
.links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.links a,.snd{font:inherit;font-size:12px;text-decoration:none;padding:6px 10px;border:var(--b) solid transparent;background:none;cursor:pointer;color:var(--ink)}
.links a:hover,.snd:hover{border-color:var(--ink)}
.links a.on{border-color:var(--ink)}
.links a.cta{background:var(--ink);color:#fff}.links a.cta:hover{background:#fff;color:var(--ink)}
.snd{border-color:var(--ink)}
.menu{display:none;margin-left:auto;font:inherit;background:#fff;border:var(--b) solid var(--ink);padding:6px 10px;cursor:pointer}
@media(max-width:860px){.menu{display:block}.links{display:none;width:100%;margin:0 0 12px;flex-direction:column;align-items:stretch}.links.open{display:flex}.links a,.snd{border-color:var(--gray);text-align:left}}
/* type + blocks */
h1,h2,h3{font-weight:700;line-height:1.15;text-transform:uppercase}
h1{font-size:clamp(34px,7vw,72px)}h2{font-size:clamp(22px,3.6vw,38px);margin-bottom:22px}h3{font-size:16px}
p{max-width:62ch}.mut{color:#333}
section{padding:clamp(56px,10vw,120px) 0}
.tag{display:inline-block;border:var(--b) solid var(--ink);padding:2px 10px;font-size:12px;margin-bottom:18px;background:#fff}
.box{border:var(--b) solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink);padding:22px}
.btn{display:inline-block;font:inherit;font-size:14px;padding:14px 22px;border:var(--b) solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;box-shadow:5px 5px 0 var(--gray);transition:transform .08s,box-shadow .08s}
.btn:hover{background:#fff;color:var(--ink)}.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--gray)}
.btn.alt{background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}.btn.alt:hover{background:var(--ink);color:#fff}
.row{display:flex;gap:16px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
/* hero */
.hero{min-height:calc(100vh - 67px);display:flex;flex-direction:column;justify-content:center;padding:0;position:relative}
.hero .wrap{padding-top:4vh;padding-bottom:70px}
.hero h1{font-size:clamp(56px,16vw,190px);letter-spacing:.02em;line-height:.95;margin:6px 0 20px}
.hero p{font-size:15px;margin-bottom:28px}
.floor{position:relative;height:clamp(150px,22vw,230px);width:min(1180px,100%);margin:0 auto;z-index:3}
.char{position:absolute;bottom:2.5vh;cursor:pointer;-webkit-tap-highlight-color:transparent}
.char img{height:clamp(96px,14vw,168px);width:auto;position:relative;z-index:2}
.char::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:8px;background:rgba(0,0,0,.16);border-radius:50%;z-index:1}
.bubble{position:absolute;left:50%;bottom:100%;transform:translate(-50%,6px);background:#fff;border:var(--b) solid var(--ink);padding:3px 9px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.char:hover .bubble,.char.talk .bubble{opacity:1;transform:translate(-50%,-4px)}
.char.hop img{animation:hop .45s steps(6) 1}
@keyframes hop{50%{transform:translateY(-36px)}}
.c-fly{left:8%;bottom:34px}.c-fly .w{animation:fly 3.4s ease-in-out infinite}
.c-fly .w::before,.c-fly .w::after{content:"";position:absolute;left:-26px;width:22px;height:4px;background:var(--ink);top:55%;animation:lines .5s steps(3) infinite}
.c-fly .w::after{top:35%;width:14px;left:-18px;animation-delay:.2s}
@keyframes fly{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-34px) rotate(-10deg)}}
@keyframes lines{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-14px)}}
.c-fly::after{animation:shadow 3.4s ease-in-out infinite}
@keyframes shadow{50%{transform:scaleX(.55);opacity:.5}}
.c-wiz{left:24%}.zap{position:absolute;right:-18px;top:-96px;width:46px;height:100px;opacity:0;animation:zap 3.2s steps(1) infinite;z-index:3;pointer-events:none}
@keyframes zap{0%,70%,80%,90%{opacity:0}72%,85%,95%{opacity:1}}
.c-king{left:41%}.c-king .w{animation:bob 1.2s steps(2) infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.c-fire{left:55%}.c-fire .w{animation:flick .5s steps(2) infinite;transform-origin:50% 100%}
@keyframes flick{50%{transform:scale(1.03,.98) skewX(1deg)}}
.c-skel{left:69%}.c-skel .w{animation:rattle 2.4s steps(1) infinite}
@keyframes rattle{0%,60%,100%{transform:none}62%{transform:translateX(-4px)}64%{transform:translateX(4px)}66%{transform:translateX(-4px)}68%{transform:translateX(4px)}70%{transform:translateX(-3px)}72%{transform:translateX(3px)}74%{transform:none}}
.c-ninja{left:78%;animation:sneak 9s ease-in-out infinite}.c-ninja .w{animation:bob .5s steps(2) infinite}
@keyframes sneak{0%{transform:translateX(0) scaleX(1)}44%{transform:translateX(70px) scaleX(1)}50%{transform:translateX(70px) scaleX(-1)}94%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
.w{position:relative}
@media(max-width:700px){.hero .wrap{padding-bottom:90px}.c-ninja,.c-fire{display:none}.c-fly{left:4%}.c-wiz{left:30%}.c-king{left:54%}.c-skel{left:76%}}
/* eyes */
#eyes{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.eyes{position:absolute;display:flex;gap:7px}
.eye{width:20px;height:20px;border:var(--b) solid var(--ink);background:#fff;position:relative;transition:transform .12s}
.eye i{position:absolute;width:8px;height:8px;background:var(--ink);left:5px;top:5px}
.eyes.blink .eye{transform:scaleY(.12)}
@media(max-width:700px){.eye{width:15px;height:15px}.eye i{width:6px;height:6px;left:3px;top:3px}}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px}
.stat b{display:block;font-size:clamp(26px,4vw,40px);line-height:1.1}.stat span{font-size:12px;color:#555}
/* video */
.vid{border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--neon)}
.vid video{width:100%;display:block;aspect-ratio:16/9;background:var(--neon)}
/* gallery */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px}
.card{border:var(--b) solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .1s,box-shadow .1s;font:inherit;text-align:left;padding:0;color:inherit}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.card img{width:100%;aspect-ratio:1;border-bottom:var(--b) solid var(--ink)}
.card div{padding:9px 12px;font-size:12px;display:flex;justify-content:space-between;gap:8px}
#lb{position:fixed;inset:0;background:rgba(204,255,0,.97);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:16px}
#lb.open{display:flex;animation:enter .3s both}
#lb img{width:min(76vmin,620px);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}
#lb .cap{text-align:center;font-size:13px}
#lb .ctl{display:flex;gap:12px}
/* ladder / traits */
.ladder{display:grid;gap:18px}
.rung{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;border:var(--b) solid var(--ink);padding:12px 16px;background:#fff}
.rung img{width:70px;height:70px;border:2px solid var(--ink)}
.rung b{font-size:16px}.rung small{display:block;font-size:12px;color:#555}
.rung .n{font-size:20px;text-align:right}
.rung.top{box-shadow:6px 6px 0 var(--ink)}
details{border:var(--b) solid var(--ink);background:#fff;margin-bottom:14px}
summary{cursor:pointer;padding:14px 18px;font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:12px;text-transform:uppercase}
summary span:first-child{flex:1}summary::-webkit-details-marker{display:none}summary::after{content:"+";font-size:18px}details[open] summary::after{content:"-"}
details[open] summary{border-bottom:var(--b) solid var(--ink);background:var(--soft)}
details .in{padding:16px 18px}
.trow{display:grid;grid-template-columns:minmax(90px,170px) 1fr 70px;gap:10px;align-items:center;font-size:12px;margin:6px 0}
.bar{height:10px;border:2px solid var(--ink);background:#fff}.bar i{display:block;height:100%;background:var(--ink)}
/* roadmap */
.road{display:grid;gap:26px;position:relative;padding-left:34px}
.road::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:var(--b);background:var(--ink)}
.road .box{position:relative}
.road .box::before{content:"";position:absolute;left:-34px;top:24px;width:20px;height:20px;border:var(--b) solid var(--ink);background:#fff}
/* form */
form{display:grid;gap:18px;max-width:640px}
label{display:grid;gap:6px;font-size:12px;text-transform:uppercase}
input,textarea,select{font:inherit;font-size:14px;border:var(--b) solid var(--ink);padding:12px;background:#fff;color:var(--ink);border-radius:0;width:100%;letter-spacing:.03em}
input:focus,textarea:focus{outline:0;box-shadow:5px 5px 0 var(--gray)}
.chk{display:flex;gap:12px;align-items:flex-start;text-transform:none;font-size:13px}.chk input{width:22px;height:22px;flex:none;accent-color:#000}
.hp{position:absolute;left:-9999px;opacity:0}
#msg{min-height:26px;font-size:13px}
footer{border-top:var(--b) solid var(--ink);background:var(--neon);padding:34px 0;margin-top:40px;position:relative;z-index:2}
footer .wrap{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;align-items:center;font-size:12px}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
.pagehead{padding:clamp(60px,9vw,110px) 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:760px){.two{grid-template-columns:1fr}.rung{grid-template-columns:56px 1fr}.rung .n{grid-column:2;text-align:left}.rung img{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff}
.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;aspect-ratio:auto}
#wake,#wheel,#skip{display:none}#wheel{opacity:0;transition:opacity .6s}
#apply{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:3;font-size:clamp(14px,2.2vw,22px);padding:clamp(12px,1.6vw,20px) clamp(24px,4vw,56px)}
#apply:active{transform:translate(calc(-50% + 4px),4px)}
#skip{position:absolute;right:12px;bottom:12px;z-index:3;font:inherit;font-size:12px;background:#fff;border:var(--b) solid var(--ink);padding:5px 12px;cursor:pointer}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 0;font-size:12px}
.legend span{display:flex;align-items:center;gap:8px}.legend i{width:20px;height:20px;border:var(--b) solid var(--ink);display:block}
.result{margin-top:34px;max-width:640px}.result h2{margin-bottom:12px}.result p{margin-bottom:16px}.result .big{font-size:clamp(24px,4vw,40px);line-height:1.2}
.result.gtd{background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--gray)}.result.gtd input{color:#000}.result.gtd .btn{background:#fff;color:#000;border-color:#fff}.result.gtd .btn:hover{background:#000;color:#fff}.result.gtd label{color:#fff}
.result .mut{color:#777}
.wlh{padding-top:clamp(24px,4vw,44px)}.wlh .stage{width:min(100%,calc((100vh - 310px)*16/9));min-width:min(100%,480px)}
.nav .xl{font-family:inherit;border:var(--b) solid var(--ink);background:#fff;color:var(--ink);padding:6px 12px;text-decoration:none;font-size:12px}
.nav .xl:hover{background:var(--ink);color:#fff}
.stage.vid,.stage.vid video{background:#fff}