/* /founder — a place, not a page */
body.founder{--ember:#c084fc;overflow:hidden;height:100svh;background:#04040b;touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:0}
#gl.on{display:block}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;cursor:crosshair}
.veil{position:fixed;inset:0;background:#04040b;opacity:0;pointer-events:none;z-index:5;transition:opacity .55s var(--ease)}
.veil.on{opacity:1}
.veil.flash{background:#fff3df}

.fbar{position:fixed;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:20;pointer-events:none}
.fbar>*{pointer-events:auto}
.fbar .brand img{width:26px;height:26px}
.fbar-r{display:flex;gap:8px}
.chip{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(10,10,14,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#d8d8e0;transition:border-color .3s,color .3s}
.chip:hover,.chip[aria-pressed="true"]{border-color:var(--ember);color:#fff}

.hud{position:fixed;left:50%;top:70px;transform:translateX(-50%);text-align:center;z-index:10;pointer-events:none;width:min(680px,calc(100% - 32px))}
.hud-title{font:400 clamp(22px,3.2vw,34px)/1.1 var(--serif);letter-spacing:-.01em;color:#fff;opacity:0;transition:opacity .8s}
.hud-msg{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-top:8px;opacity:0;transition:opacity .8s}
.hud.show .hud-title,.hud.show .hud-msg{opacity:1}
.hud-bar{height:2px;background:rgba(255,255,255,.12);margin:14px auto 0;width:min(320px,70%);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .5s}
.hud-bar.on{opacity:1}
.hud-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#a855f7,#38bdf8,var(--ember))}

.shards{position:fixed;bottom:22px;left:22px;display:flex;gap:10px;z-index:10}
.shards span{width:12px;height:12px;transform:rotate(45deg);border:1px solid rgba(255,255,255,.3);transition:background .6s,box-shadow .6s,border-color .6s}
.shards span.got[data-w="race"]{background:#e9a23b;border-color:#e9a23b;box-shadow:0 0 14px #e9a23b}
.shards span.got[data-w="sea"]{background:#a855f7;border-color:#a855f7;box-shadow:0 0 14px #a855f7}
.shards span.got[data-w="ice"]{background:#38bdf8;border-color:#38bdf8;box-shadow:0 0 14px #38bdf8}
.back{position:fixed;bottom:16px;right:16px;z-index:12}
.hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;font:400 13px/1.4 var(--sans);color:#9ca3af;text-align:center;
  width:min(560px,calc(100% - 140px));pointer-events:none;transition:opacity .6s}

/* the gate */
.gate{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;max-width:none;margin:0;
  padding:0 clamp(16px,8vw,120px);background:radial-gradient(120% 90% at 50% 110%,rgba(233,162,59,.18),transparent 60%),rgba(4,4,11,.72);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.gate h1{font:300 clamp(44px,8.5vw,120px)/.95 var(--serif);letter-spacing:-.04em;margin-bottom:28px}
.gate-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.gate-note{margin-top:22px;font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.gate.gone{opacity:0;transform:scale(1.06);pointer-events:none}

/* finale */
.finale{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding:0 16px}
.finale[hidden]{display:none}
.fin-lines{position:relative;width:100%;list-style:none;text-align:center;max-width:720px;min-height:6em}
.fin-lines li{font:300 clamp(24px,3.6vw,44px)/1.2 var(--serif);letter-spacing:-.015em;color:#fff;text-shadow:0 0 30px rgba(0,0,0,.9);
  opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease);position:absolute;left:16px;right:16px;margin:auto;max-width:760px}
.fin-lines li.on{opacity:1;transform:none;filter:none}
.fin-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:46vh;opacity:0;transition:opacity 1.5s;pointer-events:none}
.fin-cta.on{opacity:1;pointer-events:auto}

/* the letter (also the no-JS / screen-reader version) */
.letter{position:fixed;inset:0;z-index:40;overflow-y:auto;padding:110px clamp(16px,8vw,120px) 80px;background:#05050c;
  opacity:0;pointer-events:none;transition:opacity .6s;user-select:text;-webkit-user-select:text;touch-action:auto}
.letter h2{max-width:900px}
.letter-body{max-width:640px}
.letter-body p{font:400 clamp(19px,1.7vw,23px)/1.6 var(--serif);color:#d7d9de;margin-bottom:1.1em}
.sig{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin:30px 0}
.letter-cta{display:flex;flex-wrap:wrap;gap:12px}
body.reading .letter{opacity:1;pointer-events:auto}
body.reading .gate{opacity:0;pointer-events:none}
.no-js .letter,.no-canvas .letter{opacity:1;pointer-events:auto}
.no-js .gate,.no-js .hud,.no-js .shards,.no-js .fbar-r,.no-canvas .gate{display:none}

@media (max-width:620px){
  .fbar .brand span{display:none}
  .hud{top:64px}
  .hint{bottom:58px;width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .gate,.veil,.fin-lines li{transition-duration:.01s}
}

/* brand violet for every control on this page */
body.founder .btn.primary{background:linear-gradient(180deg,#c084fc,#7c3aed);color:#fff;box-shadow:0 10px 40px -10px rgba(168,85,247,.7),inset 0 1px 0 rgba(255,255,255,.35)}
body.founder .btn.primary:hover{box-shadow:0 14px 60px -8px rgba(168,85,247,.95),inset 0 1px 0 rgba(255,255,255,.35)}
body.founder .btn.ghost:hover{border-color:#a855f7}
body.founder ::selection{background:#a855f7;color:#fff}
body.founder .gate{background:radial-gradient(120% 90% at 50% 110%,rgba(124,58,237,.28),transparent 60%),rgba(4,4,11,.72)}
body.founder .eyebrow,body.founder .sig{color:#c084fc}body.founder .eyebrow::before{display:none}

/* how to play */
.hint.off{opacity:0}
.how{position:fixed;left:0;right:0;bottom:0;z-index:14;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.how[hidden]{display:none}
.how-tab{pointer-events:auto;position:fixed;bottom:16px;right:16px}
.back:not([hidden])~.how .how-tab{bottom:62px}
.how-card{pointer-events:auto;width:min(560px,calc(100% - 24px));margin-bottom:16px;padding:22px 22px 18px;border-radius:24px;
  background:linear-gradient(180deg,rgba(28,14,48,.86),rgba(10,6,20,.92));border:1px solid rgba(192,132,252,.28);
  box-shadow:0 30px 80px -20px rgba(124,58,237,.55),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateY(calc(100% + 40px));opacity:0;transition:transform .7s var(--ease),opacity .5s}
.how-card.on{transform:none;opacity:1}
.how-title{font:400 26px/1.1 var(--serif);color:#fff}
.how-sub{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c084fc;margin:6px 0 14px}
.how-steps{list-style:none;display:grid;gap:8px}
.step{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:background .3s,border-color .3s}
.step:hover,.step:focus-visible{background:rgba(168,85,247,.1);border-color:rgba(192,132,252,.35)}
.txt{font:400 15px/1.45 var(--sans);color:#e6e1ee}
.txt b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#7c3aed;color:#fff;font:600 11px/1 var(--mono);vertical-align:1px}
.how-go{margin-top:14px;width:100%;justify-content:center}

/* tiny demos, one per step */
.demo{position:relative;flex:none;width:64px;height:64px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 60%,rgba(124,58,237,.35),rgba(10,6,20,.9));border:1px solid rgba(192,132,252,.25)}
.demo i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 10px #c084fc}
.demo i:nth-child(n+2){opacity:0}
.demo.play i{animation-duration:1s!important;animation-iteration-count:3!important}
.d-drag i:nth-child(1){animation:dDrag 2.4s var(--ease) infinite}
.d-drag i:nth-child(2){opacity:1;width:18px;height:18px;margin:-9px;background:none;border:1.5px solid rgba(255,255,255,.6);box-shadow:none;animation:dDrag 2.4s var(--ease) infinite,dPress 2.4s infinite}
@keyframes dDrag{0%,10%{transform:translate(-14px,10px)}50%{transform:translate(14px,-12px)}90%,100%{transform:translate(-14px,10px)}}
@keyframes dPress{0%,100%{opacity:0}20%,80%{opacity:1}}
.d-listen i,.d-still i{width:10px;height:10px;margin:-5px;background:none;border:1.5px solid #d8b4fe;box-shadow:none;opacity:1!important;animation:dRing 2.4s ease-out infinite}
.d-listen i:nth-child(2),.d-still i:nth-child(2){animation-delay:.8s}.d-listen i:nth-child(3),.d-still i:nth-child(3){animation-delay:1.6s}
@keyframes dRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(5);opacity:0}}
.d-still i{border-radius:50%/20%;top:60%;animation-name:dCalm}
@keyframes dCalm{0%{transform:scale(1,3);opacity:1}100%{transform:scale(6,.4);opacity:0}}
.d-enter i:nth-child(1){animation:dEnter 2.4s var(--ease) infinite}
.d-enter i:nth-child(2){opacity:1;width:30px;height:30px;margin:-15px;background:none;border:2px solid #38bdf8;box-shadow:0 0 12px #38bdf8;animation:dSpin 3s linear infinite}
@keyframes dEnter{0%{transform:translate(-26px,20px);opacity:1}70%{transform:none;opacity:1}100%{transform:scale(.2);opacity:0}}
@keyframes dSpin{to{transform:rotate(360deg) scaleY(.6)}}
.d-steer i:nth-child(1){width:22px;height:12px;margin:-6px -11px;top:72%;border-radius:4px;background:#2a2140;box-shadow:0 0 0 1px #ff9a4c,0 2px 10px #ff7a3c;animation:dSteer 2s ease-in-out infinite}
.d-steer i:nth-child(2){opacity:.5;width:2px;height:64px;margin:0;top:0;border-radius:0;background:#ffd79a;box-shadow:none}
@keyframes dSteer{0%,100%{transform:translateX(-14px) rotate(-6deg)}50%{transform:translateX(14px) rotate(6deg)}}
.d-collect i,.d-brake i{animation:dCome 1.8s linear infinite;background:#ffd79a;box-shadow:0 0 10px #e9a23b;opacity:1!important}
.d-collect i:nth-child(2){animation-delay:.6s;background:#1a0f2c;box-shadow:0 0 0 1.5px #a855f7;border-radius:2px}
.d-collect i:nth-child(3){animation-delay:1.2s}
@keyframes dCome{0%{transform:translateY(-22px) scale(.2)}100%{transform:translateY(26px) scale(1.6);opacity:0}}
.d-brake i:nth-child(1){width:36px;height:6px;margin:-3px -18px;border-radius:3px;background:#ff9a4c;animation:dBrake 1.6s ease-in-out infinite}
.d-brake i:nth-child(n+2){display:none}
@keyframes dBrake{0%,100%{transform:scaleX(1);box-shadow:0 0 4px #ff7a3c}50%{transform:scaleX(.7);box-shadow:0 0 22px #ff3c1c}}
.d-tap i:nth-child(1){animation:dTap 1.6s ease-out infinite}
.d-tap i:nth-child(2){opacity:1!important;width:12px;height:12px;margin:-6px;left:30%;top:35%;background:#d8b4fe;animation:dGlow 1.6s infinite .4s}
.d-tap i:nth-child(3){opacity:1!important;width:12px;height:12px;margin:-6px;left:70%;top:62%;background:#d8b4fe;animation:dGlow 1.6s infinite 1s}
@keyframes dTap{0%{transform:scale(.5);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes dGlow{0%,100%{box-shadow:0 0 0 #c084fc;transform:scale(.8)}20%{box-shadow:0 0 18px #fff;transform:scale(1.3)}}
.d-release i:nth-child(1){animation:dFly 2s cubic-bezier(.3,.1,.6,1) infinite}
.d-release i:nth-child(2),.d-release i:nth-child(3){opacity:.6;width:3px;height:3px;margin:-1.5px;box-shadow:none}
.d-release i:nth-child(2){transform:translate(-8px,2px)}.d-release i:nth-child(3){transform:translate(2px,-8px)}
@keyframes dFly{0%{transform:translate(-22px,18px)}100%{transform:translate(30px,-26px) scale(.5);opacity:0}}
.d-orbit i:nth-child(1){width:16px;height:16px;margin:-8px;background:radial-gradient(circle at 35% 35%,#f2fbff,#2b6a8c);box-shadow:none}
.d-orbit i:nth-child(2){opacity:1;width:6px;height:6px;margin:-3px;animation:dOrbit 2s linear infinite}
@keyframes dOrbit{from{transform:rotate(0) translateX(20px)}to{transform:rotate(360deg) translateX(20px)}}
@media (prefers-reduced-motion:reduce){.demo i{animation-iteration-count:1!important}}
@media (max-width:620px){.how-card{padding:16px}.demo{width:52px;height:52px}.txt{font-size:14px}}
@media (max-width:620px){.hint{display:none}}

/* the signature */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sign{display:block;width:150px;height:auto;overflow:visible}
.sign path{fill:none;stroke:url(#inkA);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(168,85,247,.55))}
@keyframes ink{to{stroke-dashoffset:0}}
.gate-sign{position:absolute;right:clamp(16px,6vw,90px);bottom:clamp(20px,6vh,60px);width:120px;opacity:.85}
.gate-sign path{animation:ink 3.2s cubic-bezier(.6,.05,.3,1) 1.2s forwards}
body.reading .letter .sign path{animation:ink 3.2s cubic-bezier(.6,.05,.3,1) .5s forwards}
.fin-cta.on .sign path{animation:ink 3.2s cubic-bezier(.6,.05,.3,1) .2s forwards}
.no-js .letter .sign path,.no-canvas .letter .sign path{stroke-dashoffset:0}
.sig-wrap{margin:34px 0 30px}
.sig-wrap .sig{margin:6px 0 0}
.fin-sign{width:100%;display:flex;justify-content:center;margin-bottom:6px}
.sign:hover path{filter:drop-shadow(0 0 12px rgba(192,132,252,.9))}
@media (max-width:620px){.gate-sign{width:96px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.sign path{animation:none!important;stroke-dashoffset:0}}
.sig-wrap .sig{white-space:nowrap}