*{box-sizing:border-box}
body{
  margin:0;padding:0;
  font-family:'Courier New',monospace;
  background:#000;color:#00ff9d;
  overflow-x:hidden;
}
h1,h2,p{margin:0 0 1rem 0;text-shadow:0 0 6px #00ff9d}
h2{
  color:#00ffaa;
  font-size:clamp(1.3rem,2.5vw,2rem);
  animation:crt 3s infinite alternate;
}
@keyframes crt{
  0%{text-shadow:0 0 5px #00ff9d}
  100%{text-shadow:0 0 10px #00ffaa}
}
p{max-width:800px;line-height:1.6;font-size:clamp(1rem,2vw,1.2rem)}
img{
  width:100%;
  max-width:600px;
  display:block;
  margin:1rem auto;
  border-radius:8px;
  border:none;
  box-shadow:none;
}

.panel{
  min-height:100vh;
  padding:10vh 6vw;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.panel.visible h2,.panel.visible p,.panel.visible img{opacity:1;transform:none}
.panel h2,.panel p,.panel img{opacity:0;transform:translateY(20px);transition:1s ease}

#neural-bg,#waves{position:fixed;inset:0;z-index:-3}
#waves{z-index:-2;opacity:.4;mix-blend-mode:screen}

#glitch{
  position:fixed;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,255,128,.05) 2px 4px),
             repeating-linear-gradient(90deg,#000 0 1px,rgba(0,255,128,.05) 1px 3px);
  mix-blend-mode:overlay;
  opacity:0;pointer-events:none;
}
body.glitching #glitch{animation:glitchFlash .25s ease-in-out 3;opacity:.3}
@keyframes glitchFlash{
  0%{opacity:.2;transform:skewX(5deg)}
  30%{opacity:.5;transform:skewX(-5deg)}
  60%{opacity:.1;transform:skewY(3deg)}
  100%{opacity:0;transform:none}
}

#preloader,#shutdown{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  z-index:9999;background:#000;color:#00ff9d;
  text-shadow:0 0 6px #00ff9d;font-size:1.1rem;
  transition:opacity 1s ease;
}
#shutdown{color:#ff5555;text-shadow:0 0 8px #ff5555;opacity:0;pointer-events:none}
#shutdown.active{opacity:1;pointer-events:auto}

.line{opacity:0;transform:translateY(10px);animation:appear .5s ease forwards}
.line:nth-child(1){animation-delay:.5s}
.line:nth-child(2){animation-delay:1.5s}
.line:nth-child(3){animation-delay:2.8s}
.line:nth-child(4){animation-delay:4.2s}
@keyframes appear{to{opacity:1;transform:none}}
.blink::after{content:"_";animation:blink .8s step-start infinite}
@keyframes blink{50%{opacity:0}}

body.loaded #preloader{opacity:0;pointer-events:none}
header.full.hidden{opacity:0}
body.loaded header.full.hidden{opacity:1;transition:opacity 1s ease .5s}

button{
  border:1px solid #00ffcc;
  background:#002b29;
  color:#00ffaa;
  padding:.6rem .9rem;
  border-radius:8px;
  cursor:pointer;
  text-shadow:0 0 5px #00ffcc;
  margin:.3rem;
}
button:hover{background:#004040}
#restart-btn{margin-top:2rem;font-size:1.1rem;animation:pulse 2s infinite alternate}
@keyframes pulse{from{box-shadow:0 0 10px #00ffaa}to{box-shadow:0 0 20px #00ffaa}}

@media(max-width:768px){
  .panel{padding:8vh 4vw}
  p{font-size:clamp(.9rem,2vw,1rem)}
  img{max-width:90%}
}

/* === Línea de progreso lateral === */
#progress-container{
  position:fixed;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:60%;
  background:rgba(255,255,255,0.1);
  border-radius:4px;
  z-index:50;
  overflow:visible;
}
#progress-bar{
  position:absolute;
  bottom:0;
  width:100%;
  height:0%;
  background:linear-gradient(180deg,#00ffcc,#00ffaa);
  border-radius:4px;
  transition:height .2s ease-out;
  box-shadow:0 0 6px #00ffaa;
}
#synapses{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.synapse{
  position:relative;
  width:10px;height:10px;
  background:rgba(0,255,128,0.2);
  border-radius:50%;
  box-shadow:0 0 5px rgba(0,255,128,0.1);
  transition:all .3s ease;
  cursor:pointer;
}
.synapse.active{
  background:#00ffaa;
  box-shadow:0 0 12px #00ffaa,0 0 25px #00ffaa;
  transform:scale(1.2);
  animation:spark 0.7s ease-out;
}
@keyframes spark{
  0%{transform:scale(1);box-shadow:0 0 6px #00ffaa;}
  50%{transform:scale(1.6);box-shadow:0 0 25px #00ffaa,0 0 40px #00ffaa;}
  100%{transform:scale(1.1);box-shadow:0 0 12px #00ffaa;}
}

/* Tooltip retro */
.synapse::after{
  content:attr(data-label);
  position:absolute;
  right:140%;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.8);
  color:#00ff9d;
  font-size:0.75rem;
  padding:4px 6px;
  border:1px solid #00ff9d;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  text-shadow:0 0 5px #00ff9d;
}
.synapse:hover::after{
  opacity:1;
  transform:translateY(-50%) scale(1.05);
}