body{
  margin:0;
  background:#050008;
  color:#c77dff;
  font-family:monospace;
  overflow-x:hidden;
  transition:0.4s;
}

body.minimal{
  background:#111;
  color:#eee;
}

canvas{
  position:fixed;
  top:0;
  left:0;
  z-index:-2;
}

.hud{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

.scan{
  position:absolute;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,#a855f7,transparent);
  animation:scan 4s linear infinite;
}

@keyframes scan{
  from{top:0}
  to{top:100%}
}

.corner{
  position:absolute;
  width:80px;
  height:80px;
  border:1px solid rgba(168,85,247,0.5);
}

.tl{top:10px;left:10px;border-right:none;border-bottom:none}
.tr{top:10px;right:10px;border-left:none;border-bottom:none}
.bl{bottom:10px;left:10px;border-right:none;border-top:none}
.br{bottom:10px;right:10px;border-left:none;border-top:none}

header{
  text-align:center;
  padding:60px 20px;
}

.title{
  font-size:3rem;
  text-shadow:0 0 15px #a855f7;
}

.btn{
  margin-top:15px;
  padding:8px 15px;
  background:#a855f7;
  border:none;
  color:white;
  cursor:pointer;
}

.nav{
  margin-top:20px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

.nav button{
  background:transparent;
  border:1px solid #a855f7;
  color:#a855f7;
  padding:6px 12px;
  cursor:pointer;
}

.nav button:hover{
  background:#a855f7;
  color:black;
}

.scroll-hint{
  margin-top:20px;
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

section{
  max-width:900px;
  margin:60px auto;
  padding:25px;
  background:rgba(10,0,20,0.6);
  border:1px solid rgba(168,85,247,0.4);
}

.console{
  background:black;
  color:#00ff9c;
  padding:20px;
  min-height:200px;
}

input, textarea{
  width:100%;
  margin-top:10px;
  padding:10px;
  background:#140a24;
  border:none;
  color:white;
}

footer{
  text-align:center;
  padding:40px;
}

/* ============================= */
/* BOTONES LATERALES IZQUIERDA  */
/* ============================= */

.side-buttons{
  position:fixed;
  top:50%;
  left:14px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:9999;
}

.side-buttons a{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:12px;
  letter-spacing:1px;

  color:#a855f7;
  border:1px solid #a855f7;
  background:rgba(10,0,20,0.7);

  position:relative;
  transition:all .25s ease;
}

/* doble marco cuadrado cyber */
.side-buttons a::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(168,85,247,0.3);
}

/* hover glow */
.side-buttons a:hover{
  background:#a855f7;
  color:black;
  box-shadow:
    0 0 12px #a855f7,
    0 0 25px #a855f7;
  transform:translateX(3px) scale(1.05);
}

/* modo minimal */
body.minimal .side-buttons a{
  background:#1a1a1a;
  border-color:#555;
  color:#ddd;
}

body.minimal .side-buttons a:hover{
  background:#ddd;
  color:black;
  box-shadow:none;
}