.spacer{height:1250vh;position:relative;z-index:1}
.hud-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:22px;padding:14px 22px;background:linear-gradient(180deg,rgba(2,3,10,.8),transparent)}
.hud-top .logo{height:28px;margin:0 auto}
.stat,.clock{font-size:10px;display:flex;flex-direction:column;gap:2px}
.stat b,.clock b{font-family:var(--head);font-size:20px;color:#fff;letter-spacing:.06em}
.stat b.q{color:var(--red)}
.sig{display:flex;gap:3px;align-items:flex-end;height:18px}.sig i{width:5px;background:var(--mint);transition:.3s}
.sig i:nth-child(1){height:30%}.sig i:nth-child(2){height:55%}.sig i:nth-child(3){height:80%}.sig i:nth-child(4){height:100%}
body.nosig .sig i{background:#3a3f58}
.banner{position:fixed;top:78px;left:50%;transform:translate(-50%,-30px);z-index:50;padding:10px 22px;background:rgba(255,77,106,.16);border:1px solid var(--red);color:var(--red);font-size:12px;opacity:0;transition:.4s}
body.nosig .banner{opacity:1;transform:translate(-50%,0)}
.erp{position:fixed;top:84px;right:26px;z-index:40;font-size:12px;color:var(--mint);text-align:center;padding:10px 14px;border:1px solid var(--line);background:rgba(2,12,48,.6);transition:.3s}
.erp span{display:block;font-size:26px;line-height:1}
.erp.flash{box-shadow:0 0 40px var(--mint);background:rgba(0,248,187,.25);transform:scale(1.12)}
.card{position:fixed;z-index:40;bottom:104px;left:clamp(16px,5vw,80px);width:min(430px,calc(100% - 32px));opacity:0;transform:translateY(30px);transition:.6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.card.show{opacity:1;transform:none}
.card h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(20px,2.6vw,32px);line-height:1.1;margin-bottom:10px}
.card p{color:#b9c5e3;font-size:14px}
.card.r{left:auto;right:clamp(16px,5vw,80px)}
.route{position:fixed;left:50%;transform:translateX(-50%);bottom:34px;z-index:50;width:min(760px,calc(100% - 40px));height:34px;display:flex;align-items:center}
.route::before{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.14)}
.route .fill{position:absolute;left:0;height:2px;background:linear-gradient(90deg,var(--elec),var(--mint));box-shadow:0 0 12px var(--mint);width:0}
.route a{position:absolute;width:14px;height:14px;margin-left:-7px;border:1px solid var(--dim);transform:rotate(45deg);background:var(--bg);transition:.3s}
.route a.done{background:var(--mint);border-color:var(--mint);box-shadow:0 0 12px var(--mint)}
.route a.tun{border-color:var(--red)}.route a.tun.done{background:var(--red);box-shadow:0 0 12px var(--red)}
.route a::after{content:attr(data-n);position:absolute;top:18px;left:50%;transform:rotate(-45deg) translateX(-30%);font:9px var(--mono);color:var(--dim)}
.route .me{position:absolute;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 30px var(--mint)}
.cue{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:40;font-size:11px;color:var(--mint);animation:bob 1.6s infinite;transition:opacity .5s}
@keyframes bob{50%{transform:translate(-50%,6px)}}
.finale{position:fixed;inset:0;z-index:45;display:grid;place-content:center;justify-items:center;text-align:center;gap:20px;background:radial-gradient(ellipse at 50% 60%,rgba(0,51,255,.4),transparent 70%);opacity:0;pointer-events:none;transition:opacity 1s}
.finale.show{opacity:1;pointer-events:auto}
.finale h2{font-family:var(--head);font-size:clamp(30px,6vw,84px);letter-spacing:.05em;line-height:1.05;padding:0 20px}
.finale p{color:#b9c5e3;text-transform:none;letter-spacing:.02em;font-size:16px}
@media(max-width:820px){.hud-top .stat:nth-of-type(1),.clock{display:none}.hud-top{gap:12px}.erp{top:70px}.card{bottom:90px}}