.neon-street { position:fixed; inset:0; z-index:2; pointer-events:none; user-select:none; overflow:hidden; }
.neon-sign {
 --neon:#ff39be; --neon-core:#ffd3f3;
 position:absolute; box-sizing:border-box; width:clamp(158px,19vw,265px); margin:0; padding:17px 12px 15px;
 text-align:center; font-family:'Bahnschrift','Arial Narrow',sans-serif; font-size:clamp(24px,2.65vw,40px);
 font-weight:300; letter-spacing:.065em; line-height:1.23; text-transform:uppercase;
 color:#fff3; -webkit-text-stroke:1px var(--neon-core);
 text-shadow:0 0 5px var(--neon),0 0 13px var(--neon),0 0 29px var(--neon);
 background:#191b20a3; border:1px solid var(--neon-core); border-radius:8px;
 box-shadow:0 0 4px var(--neon),inset 0 0 10px #0005,0 0 24px color-mix(in srgb,var(--neon) 22%,transparent);
 transform:rotate(var(--tilt,-5deg));
}
.neon-line { display:block; }
.neon-sign::before { content:''; position:absolute; width:25px; height:33px; top:-35px; left:19px; border-top:2px solid #202124; border-left:2px solid #202124; border-radius:10px 0 0 0; }
.neon-sign::after { content:''; position:absolute; top:7px; left:7px; width:3px; height:3px; border-radius:50%; background:#74737a; box-shadow:calc(clamp(158px,19vw,265px) - 19px) 0 #74737a; }
.neon-secret { top:19%; left:5%; --tilt:-7deg; }
.neon-keep { --neon:#ff603d; --neon-core:#ffd3b2; top:29%; right:5%; --tilt:6deg; }
.neon-daniel { --neon:#35e7ff; --neon-core:#c4fbff; top:72%; left:5%; --tilt:-6deg; font-size:clamp(21px,2.25vw,34px); }
.neon-signal { --neon:#b08aff; --neon-core:#e7d8ff; top:46%; left:3.5%; --tilt:4deg; }
.neon-after { --neon:#62f6b3; --neon-core:#ceffe7; top:62%; right:4%; --tilt:-5deg; }
/* Tubos muertos: conservan su silueta oscura sin resplandor. */
.neon-dead { display:inline-block; color:#1b2028; -webkit-text-stroke:1px #59606b; text-shadow:none; transform:translateY(2px) rotate(7deg); }
/* Fallos aislados, con ritmos diferentes para cada letra. */
.neon-broken { animation:neon-letter-fault var(--period,9s) linear var(--delay,0s) infinite; }
@keyframes neon-letter-fault {
 0%,58%,60%,63%,75%,77%,100% { color:#fff3; -webkit-text-stroke-color:var(--neon-core); text-shadow:0 0 5px var(--neon),0 0 13px var(--neon),0 0 29px var(--neon); }
 58.4%,59.5%,60.6%,62.5%,75.5%,76.6% { color:#1b2028; -webkit-text-stroke-color:#59606b; text-shadow:none; }
}
@media(max-width:1000px) and (min-width:701px) {
 .neon-sign { width:150px; font-size:22px; padding:12px 8px; }
 .neon-sign::after { box-shadow:131px 0 #74737a; }
 .neon-secret { top:12%; left:3%; } .neon-keep { top:19%; right:3%; }
 .neon-signal { top:41%; left:2%; } .neon-after { top:64%; right:2%; }
 .neon-daniel { top:76%; left:3%; font-size:19px; }
}
@media(max-width:700px) {
 .neon-sign { width:133px; font-size:20px; padding:10px 7px; }
 .neon-sign::before { height:19px; top:-21px; } .neon-sign::after { box-shadow:114px 0 #74737a; }
 .neon-secret { top:5%; left:6%; } .neon-keep { top:5%; right:6%; }
 .neon-signal { top:18%; left:auto; right:3%; width:112px; font-size:16px; --tilt:4deg; }
 .neon-signal::after { box-shadow:93px 0 #74737a; }
 .neon-after { top:auto; bottom:10%; right:5%; }
 .neon-daniel { top:auto; bottom:10%; left:5%; font-size:17px; }
}
@media(max-height:500px) and (min-width:701px) {
 .neon-sign { width:140px; font-size:19px; padding:8px; } .neon-sign::after { box-shadow:121px 0 #74737a; }
 .neon-secret { top:12%; } .neon-signal { top:44%; } .neon-daniel { top:auto; bottom:6%; font-size:17px; }
 .neon-keep { top:22%; } .neon-after { top:64%; }
}
@media(prefers-reduced-motion:reduce) { .neon-broken { animation:none; } }