:root{
  --ink:#0d0d10; --coal:#17171c; --slate:#2c2c34; --stone:#55555f; --ash:#9a9aa3;
  --fog:#c9c9c6; --paper:#eeede9; --white:#fbfbf8;
  --lilac:#b9aef2; --pink:#f29bb0; --gold:#f4c44c; --mint:#8fe3a8;
  --r:18px;
  --pix:"Press Start 2P", ui-monospace, monospace;
  --body:"VT323", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:22px;line-height:1.3;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.pix{font-family:var(--pix);letter-spacing:.02em}

/* ---------- buttons ---------- */
.btn{font-family:var(--pix);font-size:11px;padding:12px 16px;background:var(--paper);color:var(--ink);border-radius:12px;
  box-shadow:0 4px 0 var(--stone);transition:transform .08s, box-shadow .08s;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--stone)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--stone)}
.btn.dark{background:var(--coal);color:var(--paper);box-shadow:0 4px 0 #000;border:2px solid var(--slate)}
.btn.lilac{background:var(--lilac);box-shadow:0 4px 0 #6b5fb0}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- playground hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#play{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#play.grabbing{cursor:grabbing}
.hud{position:absolute;left:0;right:0;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;gap:12px}
.hud *{pointer-events:auto}
.hud.top{top:0;align-items:center}
.logo b{line-height:1}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .zero{width:44px;height:44px;border-radius:50%;border:6px solid var(--paper);display:grid;place-items:center;box-shadow:0 0 24px rgba(185,174,242,.35)}
.logo .zero i{width:8px;height:8px;background:var(--lilac);border-radius:2px}
.logo b{font-family:var(--pix);font-size:16px;letter-spacing:.06em}
.hud .right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-family:var(--pix);font-size:10px;padding:10px 12px;border-radius:12px;background:rgba(23,23,28,.72);border:2px solid var(--slate);backdrop-filter:blur(6px);color:var(--paper)}
.day .chip{background:rgba(251,251,248,.75);border-color:var(--fog);color:var(--ink)}
.hero-title{position:absolute;top:13%;left:0;right:0;text-align:center;pointer-events:none;padding:0 16px}
.hero-title h1{font-family:var(--pix);font-size:clamp(28px,7vw,76px);letter-spacing:.04em;line-height:1.1;color:var(--white);text-shadow:0 6px 0 rgba(0,0,0,.45)}
.hero-title h1 span{color:var(--lilac)}
.hero-title p{margin-top:14px;font-size:clamp(20px,2.6vw,28px);color:var(--fog)}
.day .hero-title h1{color:var(--ink);text-shadow:0 6px 0 rgba(0,0,0,.08)}
.day .hero-title p{color:var(--stone)}
.dock{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;border-radius:18px;
  background:rgba(13,13,16,.7);border:2px solid var(--slate);backdrop-filter:blur(8px);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.day .dock{background:rgba(251,251,248,.8);border-color:var(--fog)}
.dock button{font-family:var(--pix);font-size:9px;padding:10px 12px;border-radius:12px;background:var(--slate);color:var(--paper);white-space:nowrap;transition:transform .1s}
.dock button:active{transform:scale(.92)}
.dock button.on{background:var(--lilac);color:var(--ink)}
.day .dock button{background:var(--fog);color:var(--ink)}
.day .dock button.on{background:var(--lilac)}
.boops{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);font-family:var(--pix);font-size:10px;color:var(--ash);pointer-events:none;text-align:center;white-space:nowrap}
.boops b{color:var(--white);font-size:13px}
.day .boops b{color:var(--ink)}
.hint{position:absolute;top:calc(13% + clamp(120px,16vw,190px));left:0;right:0;text-align:center;font-size:20px;color:var(--ash);pointer-events:none;transition:opacity .6s}
.scrollcue{position:absolute;right:20px;bottom:24px;font-family:var(--pix);font-size:9px;color:var(--ash);text-decoration:none;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (max-width:640px){.scrollcue{display:none}.logo b{font-size:12px}.logo .zero{width:36px;height:36px;border-width:5px}.boops{bottom:84px}}

/* ---------- sections ---------- */
section{padding:90px 20px;position:relative}
.wrap{max-width:1120px;margin:0 auto}
.kicker{font-family:var(--pix);font-size:10px;color:var(--lilac);letter-spacing:.12em}
h2{font-family:var(--pix);font-size:clamp(20px,3.6vw,34px);margin:14px 0 18px;line-height:1.3}
.lead{font-size:26px;color:var(--fog);max-width:720px}
.paper{background:var(--paper);color:var(--ink)}
.paper .lead{color:var(--stone)}
.paper .kicker{color:#6b5fb0}
.coal{background:var(--coal)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:36px}
.stat{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:0 6px 0 var(--ink)}
.stat small{font-family:var(--pix);font-size:9px;color:var(--stone)}
.stat div{font-family:var(--pix);font-size:18px;margin-top:10px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:34px}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--slate);border:3px solid #000;box-shadow:0 6px 0 #000;cursor:pointer;transition:transform .15s}
.card:hover{transform:translateY(-4px) rotate(-1deg)}
.card .pic{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.card .pic img{width:100%;height:100%;display:block}
.card .meta{padding:10px 12px 12px;background:var(--coal)}
.card .meta b{font-family:var(--pix);font-size:10px;display:block}
.card .meta span{font-size:18px;color:var(--ash)}
.card .power{position:absolute;top:8px;left:8px;font-family:var(--pix);font-size:8px;padding:6px 7px;border-radius:8px;background:rgba(13,13,16,.75);color:var(--paper)}
.anim-jump .pic img{animation:a-jump .6s cubic-bezier(.3,1.6,.5,1)}
.anim-spin .pic img{animation:a-spin .7s ease}
.anim-puff .pic img{animation:a-puff .9s ease}
.anim-float .pic img{animation:a-float 1.4s ease}
.anim-shake .pic img{animation:a-shake .5s linear}
.anim-glitch .pic img{animation:a-glitch .6s steps(6)}
@keyframes a-jump{30%{transform:translateY(-22%) scale(.92,1.08)}60%{transform:translateY(0) scale(1.12,.88)}}
@keyframes a-spin{50%{transform:translateY(-10%) rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes a-puff{60%{transform:scale(1.5)}70%{transform:scale(.2);opacity:0}85%{transform:scale(1.15);opacity:1}}
@keyframes a-float{40%{transform:translateY(-28%) rotate(-4deg)}70%{transform:translateY(-20%) rotate(4deg)}}
@keyframes a-shake{20%,60%{transform:translateX(-5%)}40%,80%{transform:translateX(5%)}}
@keyframes a-glitch{20%{transform:translate(8%,-4%);filter:invert(1)}40%{transform:translate(-6%,3%)}60%{transform:translate(4%,0);filter:hue-rotate(90deg)}}

/* powers */
.powers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:30px}
.power-card{background:var(--slate);border-radius:var(--r);padding:18px;border:2px solid #3a3a44}
.power-card b{font-family:var(--pix);font-size:11px;color:var(--white)}
.power-card p{color:var(--ash);margin-top:8px;font-size:20px}
.power-card em{font-style:normal;color:var(--lilac)}

/* traits */
.traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:30px}
.trait{background:var(--white);border:3px solid var(--ink);border-radius:var(--r);padding:16px;box-shadow:0 6px 0 var(--ink)}
.trait h4{font-family:var(--pix);font-size:11px;margin-bottom:10px}
.trait ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.trait li{font-size:19px;padding:2px 9px;border-radius:9px;background:var(--fog)}

/* faq */
.faq{margin-top:28px;display:grid;gap:10px;max-width:820px}
details{background:var(--slate);border-radius:14px;padding:16px 18px;border:2px solid #3a3a44}
summary{font-family:var(--pix);font-size:11px;cursor:pointer;list-style:none;line-height:1.6}
summary::after{content:"+";float:right;color:var(--lilac)}
details[open] summary::after{content:"-"}
details p{margin-top:10px;color:var(--fog)}

footer{padding:50px 20px 70px;text-align:center;background:var(--ink);border-top:2px solid var(--slate)}
footer .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
footer small{display:block;margin-top:26px;color:var(--stone)}

/* marquee of frens */
.marquee{overflow:hidden;padding:18px 0;background:var(--ink);border-top:2px solid var(--slate);border-bottom:2px solid var(--slate)}
.marquee .track{display:flex;gap:18px;width:max-content;animation:mq 60s linear infinite}
.marquee img{width:72px;height:72px;border-radius:14px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- register ---------- */
.reg-body{background:var(--ink);min-height:100vh}
.reg-top{display:flex;justify-content:space-between;align-items:center;padding:18px 20px}
.reg-stage{position:relative;height:150px;overflow:hidden;border-bottom:2px solid var(--slate);
  background:radial-gradient(ellipse at 50% 120%,#2c2c34 0,transparent 60%)}
.reg-stage .walker{position:absolute;bottom:0;width:96px;height:96px;cursor:pointer}
.reg-wrap{max-width:760px;margin:0 auto;padding:36px 18px 80px}
.panel{background:var(--coal);border:2px solid var(--slate);border-radius:22px;padding:22px;margin-top:18px;position:relative}
.panel.done{border-color:#4b4870}
.panel .num{font-family:var(--pix);font-size:10px;color:var(--lilac)}
.panel h3{font-family:var(--pix);font-size:14px;margin:10px 0 8px;line-height:1.5}
.panel p{color:var(--ash)}
.panel .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.addr{font-family:var(--pix);font-size:10px;padding:10px 12px;border-radius:10px;background:var(--slate)}
.field{width:100%;margin-top:12px;font:inherit;font-size:22px;padding:12px 14px;border-radius:12px;border:2px solid var(--slate);background:var(--ink);color:var(--paper);outline:none}
.field:focus{border-color:var(--lilac)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;margin-top:14px;max-height:300px;overflow:auto;padding:4px}
.picker button{border-radius:12px;overflow:hidden;border:3px solid transparent;transition:transform .1s}
.picker button img{width:100%;display:block}
.picker button.sel{border-color:var(--lilac);transform:scale(1.06)}
.msg{margin-top:12px;font-size:20px;min-height:24px}
.msg.err{color:var(--pink)} .msg.ok{color:var(--mint)}
.banner{font-family:var(--pix);font-size:9px;line-height:1.7;padding:12px 14px;border-radius:12px;background:#2a2640;color:var(--lilac);margin-bottom:6px}
.counter{font-family:var(--pix);font-size:10px;color:var(--ash);margin-top:12px}
.counter b{color:var(--white)}

.pass{margin-top:22px;border-radius:24px;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:150px 1fr;overflow:hidden;border:3px solid #000;box-shadow:0 8px 0 #000;animation:passin .7s cubic-bezier(.3,1.5,.5,1)}
.pass .pp{display:grid;place-items:center}
.pass .pp{overflow:hidden}.pass .pp img{width:100%;height:100%;display:block;object-fit:contain}
.pass .info{padding:18px;border-left:3px dashed var(--ink);position:relative}
.pass .info small{font-family:var(--pix);font-size:8px;color:var(--stone)}
.pass .info h4{font-family:var(--pix);font-size:16px;margin:8px 0 10px}
.pass .info div{font-size:20px}
.pass .stamp{position:absolute;right:14px;top:14px;width:46px;height:46px;border-radius:50%;border:6px solid var(--ink);transform:rotate(-12deg)}
@keyframes passin{from{transform:translateY(30px) scale(.9);opacity:0}}
@media (max-width:520px){.pass{grid-template-columns:1fr}.pass .info{border-left:none;border-top:3px dashed var(--ink)}.pass .pp{height:220px}.pass .pp img{width:220px;height:220px}}
.hidden{display:none!important}

/* plain pixel zero used in the 0 FRENS name */
.z0{display:inline-block;width:.75em;height:1em;vertical-align:-.06em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM0 1h2v6H0zM4 1h2v6H4zM1 7h4v1H1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM0 1h2v6H0zM4 1h2v6H4zM1 7h4v1H1z'/%3E%3C/svg%3E") center/contain no-repeat}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo b{display:inline-flex;align-items:center;gap:.5em}
.hero-title h1 .z0{background:var(--white)}
.day .hero-title h1 .z0{background:var(--ink)}

/* Cloudflare Turnstile box: blends into the dark panel and stretches with the screen */
.captcha{margin-top:16px;width:100%;min-height:69px;border-radius:14px;background:#232327;border:2px solid var(--slate);
  overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .2s}
.captcha.ok{border-color:#4b4870}
.captcha #turnstile{width:100%;line-height:0}
.captcha #turnstile iframe{width:100%!important;display:block}
.captcha-wait{position:absolute;font-family:var(--pix);font-size:9px;color:var(--ash);pointer-events:none}
@media (max-width:420px){.reg-wrap{padding-left:12px;padding-right:12px}.panel{padding:16px 12px}}

/* tasks with NO / YES switch */
.task{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-top:14px;padding:12px;border-radius:14px;background:var(--ink);border:2px solid var(--slate)}
.task.done{border-color:#4b4870}
.task-txt b{font-family:var(--pix);font-size:10px;display:block;line-height:1.5}
.task-txt span{color:var(--ash);font-size:19px}
.task-go{font-size:9px;padding:10px 12px}
.yn{position:relative;display:flex;border-radius:12px;background:var(--slate);padding:4px;font-family:var(--pix);font-size:9px}
.yn span{padding:8px 9px;border-radius:9px;color:var(--ash);transition:background .15s,color .15s}
.yn span:first-child{background:#3d2a33;color:var(--pink)}
.yn[aria-pressed="true"] span:first-child{background:transparent;color:var(--ash)}
.yn[aria-pressed="true"] span:last-child{background:var(--mint);color:var(--ink)}
.lbl{display:block;margin-top:16px;font-family:var(--pix);font-size:9px;color:var(--fog)}
.lbl i{font-style:normal;color:var(--pink)}
.field.bad{border-color:var(--pink)}
@media (max-width:480px){.task{grid-template-columns:1fr auto}.task-go{grid-column:1/-1;justify-content:center;order:3}}