/* NPCAT! — the crowd. Dark ground, one accent. */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:300 800;font-display:swap;src:url(../assets/fonts/unbounded.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../assets/fonts/geist-mono.woff2) format("woff2")}

:root{
  --bg:#131312; --bg-2:#1c1c1a; --line:#2c2c29;
  --text:#efeee9; --muted:#8f8e88; --dim:#5a5955;
  --cat:#a1a1a1; --bang:#ffc71a; --bang-2:#ffd75c; --paper:#f5f5f2;
  --display:"Unbounded",Impact,'Arial Black',sans-serif;
  --body:"Geist",system-ui,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --max:1280px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--bang);color:#131312}
.skip{position:absolute;left:-999px;top:8px;background:var(--bang);color:#131312;padding:8px 12px;border-radius:4px;font-family:var(--mono);font-size:12px;z-index:100}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 28px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav.hide{transform:translateY(-120%)}
.nav__brand{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
.nav__brand em{font-style:normal;color:var(--bang);margin-left:-.1em}
.nav__links{display:flex;gap:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--text)}
.nav__right{display:flex;align-items:center;gap:10px}
.snd{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--dim);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.snd i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.snd.on{color:var(--text);border-color:var(--muted)}
.snd.on i{background:var(--bang);box-shadow:0 0 0 3px rgba(255,199,26,.3)}
.snd:focus-visible{outline:2px solid var(--bang);outline-offset:2px}
.lang{all:unset;cursor:pointer;padding:9px 11px;border:1px solid var(--dim);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.lang:hover{color:var(--text);border-color:var(--muted)}
.lang:focus-visible{outline:2px solid var(--bang);outline-offset:2px}
@media (max-width:760px){.nav__links{display:none}.nav{padding:16px 18px}.snd span{display:none}.snd{padding:9px 10px}}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:13px 20px;border:1px solid var(--dim);border-radius:4px;color:var(--text);cursor:pointer;background:transparent;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn:hover{border-color:var(--text);transform:translateY(-1px)}
.btn--bang{background:var(--bang);color:#131312;border-color:var(--bang)}
.btn--bang:hover{background:var(--bang-2)}
.btn:focus-visible{outline:2px solid var(--bang);outline-offset:3px}
.btn[data-soon]{position:relative}
.btn[data-soon]::after{content:attr(data-soon);position:absolute;left:0;top:calc(100% + 6px);font-size:10.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}

/* ---------- swarm hero (pinned) ---------- */
.swarm{position:relative;height:100vh;height:100svh;overflow:hidden}
.swarm canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.swarm__fallback{position:absolute;left:50%;top:50%;width:min(60vw,320px);transform:translate(-50%,-56%)}
.js .swarm__fallback{display:none}
.swarm__ui{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-rows:1fr auto;padding:0 28px 34px}
.chapters{position:relative;height:210px;max-width:640px}
.ch{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.ch.on{opacity:1;transform:none}
.ch small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--bang);margin-bottom:14px}
.ch h1,.ch h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.ch h1 em,.ch h2 em{font-style:normal;color:var(--bang)}
.ch p{margin:0;color:var(--muted);max-width:44ch;font-size:18px}
.ch .btn{pointer-events:auto;margin-top:22px}
.meter{position:absolute;right:28px;bottom:34px;display:grid;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-align:right}
.meter b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.meter .bar{width:140px;height:2px;background:var(--line);justify-self:end;position:relative}
.meter .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bang)}
.hint{position:absolute;left:28px;top:96px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim);display:grid;gap:4px;transition:opacity .5s}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--bang),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(6px);opacity:.5}}
@media (max-width:760px){.meter,.scrollcue,.hint{display:none}.swarm__ui{padding:0 20px 28px}.chapters{max-width:none}}

/* ---------- sections ---------- */
section.block{max-width:var(--max);margin:0 auto;padding:130px 28px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--bang);margin:0 0 20px}
h2.t{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,60px);line-height:1;letter-spacing:-.02em;margin:0 0 26px;text-wrap:balance}
h2.t em{font-style:normal;color:var(--bang)}
.lead{font-size:20px;color:var(--muted);max-width:58ch}
.lead b{color:var(--text);font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:36px}}
.rule{height:1px;background:var(--line);max-width:var(--max);margin:0 auto}

.npcs{display:grid;border-top:1px solid var(--line)}
.npc{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);font-size:17px}
.npc small{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em}
.npc em{font-style:normal;color:var(--muted)}
.npc b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--bang)}
@media (max-width:640px){.npc{grid-template-columns:1fr;gap:6px}}

.pairviz{position:relative;border:1px solid var(--line);border-radius:8px;padding:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;background:linear-gradient(180deg,var(--bg-2),var(--bg));margin-top:36px}
.pairviz .tok{text-align:center}
.pairviz .tok b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,54px);letter-spacing:-.02em;line-height:1}
.pairviz .tok small{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:12px;letter-spacing:.06em}
.pairviz .tok--ncat b{color:var(--bang)}
.pairviz .eq{font-family:var(--display);font-weight:300;font-size:44px;color:var(--dim)}
.pairviz .catimg{width:130px;margin:0 auto 18px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.fact{background:var(--bg);padding:22px 22px 20px}
.fact small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);margin-bottom:12px}
.fact b{display:block;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;overflow-wrap:anywhere}
.fact span{display:block;font-size:13.5px;color:var(--muted);margin-top:8px}
.fact button{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--bang);margin-top:10px;display:inline-block}
.fact button:focus-visible{outline:2px solid var(--bang);outline-offset:2px}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.pairviz{grid-template-columns:1fr;padding:32px}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;counter-reset:s}
.step{background:var(--bg);padding:26px 24px 30px;min-height:220px;display:flex;flex-direction:column;transition:background .3s}
.step:hover{background:var(--bg-2)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--bang);margin-bottom:auto;letter-spacing:.1em}
.step h3{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.01em;margin:38px 0 10px;line-height:1.15}
.step p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.community{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;border-top:1px solid var(--line);padding-top:60px}
.community .cta{display:flex;flex-wrap:wrap;gap:12px 12px;padding-bottom:22px}
.community .big{font-family:var(--display);font-weight:800;font-size:clamp(44px,9vw,140px);line-height:.9;letter-spacing:-.03em;margin:0 0 30px}
.community .big span{color:var(--bang)}
.sticker{background:var(--paper);border-radius:28px;padding:22px 26px 18px;width:190px}
.sticker img{width:100%}
@media (max-width:900px){.community{grid-template-columns:1fr}.sticker{width:150px}}
footer{max-width:var(--max);margin:0 auto;padding:60px 28px;font-family:var(--mono);font-size:12px;color:var(--dim);display:grid;gap:12px;letter-spacing:.02em}
footer p{margin:0;max-width:90ch}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){.scrollcue i{animation:none}.ch{transition:none}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.marquee__track{display:flex;gap:56px;width:max-content;animation:mq 32s linear infinite}
.marquee__track span{display:flex;gap:56px;white-space:nowrap}
.marquee__track b{color:var(--bang);font-weight:800}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- quest log ---------- */
.questlog{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.q{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;padding:22px 24px;background:var(--bg)}
.q--main{background:var(--bg-2)}
.q__mark{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--bang);color:#131312;font-family:var(--display);font-weight:800;font-size:22px}
.q__mark--dim{background:transparent;border:1px solid var(--line);color:var(--dim)}
.q b{display:block;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.01em}
.q .q__desc{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.q em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bang);white-space:nowrap}
@media (max-width:640px){.q{grid-template-columns:44px 1fr}.q em{grid-column:2}}

.fine{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--dim);margin:16px 0 0;max-width:80ch}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:10px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--bang);font-size:20px;flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--bang);outline-offset:4px}
.faq p{margin:0 0 20px;color:var(--muted);max-width:70ch}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}