body{

margin:0;
min-height:100vh;
font-family:'VT323', monospace;
color:#e6d0ff;
text-align:center;

background:linear-gradient(180deg,#050008,#0c0012,#050008);

overflow-x:hidden;
position:relative;

}


header{
padding-top:20px;
}


h1{

font-family:'Orbitron', sans-serif;

letter-spacing:8px;

font-size:clamp(32px,6vw,55px);

color:#d3a9ff;

text-shadow:0 0 10px #7b00ff,0 0 25px #3b0066;

animation:crtFlicker 0.09s infinite;

}


@keyframes crtFlicker{

0%{opacity:1;}
50%{opacity:0.96;}
100%{opacity:1;}

}


nav{
margin-top:15px;
}


nav button{

background:none;
border:1px solid #7b00ff;

color:#d8b8ff;

padding:8px 15px;

margin:5px;

font-family:'VT323', monospace;

font-size:22px;

cursor:pointer;

}


nav button:hover{

background:#7b00ff;
color:black;

}


.seccion{
margin-top:30px;
}


.oculto{
display:none;
}


.player{

display:flex;

flex-wrap:wrap;

gap:30px;

justify-content:center;

align-items:flex-start;

margin-top:30px;

}


.playlist{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}


.player-disc{

width:min(300px,90vw);

padding:16px;

background:#12001f;

border:2px solid #7b00ff;

}


.disc{

width:120px;

height:120px;

margin:auto;

border-radius:50%;

background:black;

box-shadow:0 0 12px #7b00ff;

animation:spin 6s linear infinite;

animation-play-state:paused;

}


.spin{
animation-play-state:running;
}


@keyframes spin{

from{transform:rotate(0deg);}
to{transform:rotate(360deg);}

}


.controls button{

font-family:'VT323';

font-size:22px;

background:black;

color:#c59cff;

border:1px solid #7b00ff;

padding:7px 12px;

cursor:pointer;

}


.descargar{

display:inline-block;

margin-top:10px;

color:#c59cff;

border:1px solid #7b00ff;

padding:6px 12px;

text-decoration:none;

}


footer{

margin-top:55px;

opacity:0.7;

font-size:13px;

}


.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:0.18;

background-image:
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.06) 0px,
rgba(255,255,255,0.06) 1px,
transparent 1px,
transparent 3px
);

z-index:1000;

}


.crt{

pointer-events:none;

position:fixed;

inset:0;

background:linear-gradient(rgba(255,255,255,0.03) 50%, rgba(0,0,0,0.35) 50%);

background-size:100% 4px;

mix-blend-mode:overlay;

z-index:999;

}


.fog{

position:fixed;

inset:0;

pointer-events:none;

background:
radial-gradient(circle at 15% 20%, rgba(110,0,200,0.30), transparent 40%),
radial-gradient(circle at 80% 24%, rgba(70,0,150,0.22), transparent 38%);

filter:blur(36px);

opacity:0.95;

z-index:0;

}


.glitch-flash{
animation:glitchFlash 0.15s;
}

@keyframes glitchFlash{

0%{filter:hue-rotate(0deg);}
40%{filter:hue-rotate(90deg);}
100%{filter:hue-rotate(0deg);}

}

.guestbook-box{
  width:min(760px, 92vw);
  margin:30px auto 0;
  padding:18px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(18,0,31,0.98), rgba(8,0,14,0.98));
  border:1px solid #7b00ff;
  box-shadow:
    0 0 18px rgba(123,0,255,0.6),
    inset 0 0 20px rgba(0,0,0,0.9);
}

.guestbook-box::before{
  content:"registro de señal";
  position:absolute;
  top:10px;
  right:14px;
  font-size:14px;
  letter-spacing:2px;
  color:#8f56ff;
  opacity:0.7;
  pointer-events:none;
  text-transform:uppercase;
}

.guestbook-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}

.guestbook-form input,
.guestbook-form textarea{
  font-family:'VT323', monospace;
  font-size:22px;
  background:
    linear-gradient(180deg, rgba(11,0,19,0.96), rgba(6,0,12,0.98));
  color:#e6d0ff;
  border:1px solid #7b00ff;
  padding:10px;
  outline:none;
  resize:none;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.7);
}

.guestbook-form input:focus,
.guestbook-form textarea:focus{
  border-color:#d3a9ff;
  box-shadow:
    0 0 0 1px rgba(123,0,255,0.35),
    inset 0 0 12px rgba(0,0,0,0.7),
    0 0 12px rgba(123,0,255,0.25);
}

.guestbook-form textarea{
  min-height:110px;
}

.guestbook-form button{
  align-self:flex-start;
  background:black;
  color:#c59cff;
  border:1px solid #7b00ff;
  font-family:'VT323', monospace;
  font-size:22px;
  padding:7px 14px;
  cursor:pointer;
  box-shadow:0 0 10px rgba(123,0,255,0.2);
}

.guestbook-form button:hover{
  background:#7b00ff;
  color:black;
  box-shadow:0 0 10px #7b00ff;
}

.guestbook-entries{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.guestbook-entry {
  background: #120018;
  border: 1px solid #7a00ff;
  box-shadow: 0 0 10px #7a00ff55;
  padding: 10px;
  margin-bottom: 10px;
}

.guestbook-entry .meta{
  color:#c59cff;
  font-size:18px;
  margin-bottom:4px;
}

.guestbook-entry .msg{
  font-size:22px;
}

.guestbook-entry::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, #d3a9ff, #7b00ff);
  opacity:0.9;
}

.guestbook-entry .meta{
  font-size:18px;
  color:#cfa7ff;
  margin-bottom:6px;
  letter-spacing:1px;
}

.guestbook-entry .msg{
  font-size:22px;
  color:#e6d0ff;
  white-space:pre-wrap;
  line-height:1.35;
}
.track-item {
  border: 1px solid #7a00ff;
  background: #120018;
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  transition: all 0.2s;
}

.track-item:hover {
  background: #1d0028;
  box-shadow: 0 0 8px #7a00ff;
}

.track-item.active {
  background: #2a0038;
  box-shadow: 0 0 12px #ff00ff;
}
#guestbook input,
#guestbook textarea {
  background: #120018;
  border: 1px solid #7a00ff;
  color: #fff;
  font-family: 'VT323', monospace;
}

#guestbook button {
  background: #1d0028;
  border: 1px solid #7a00ff;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}

#guestbook button:hover {
  box-shadow: 0 0 10px #ff00ff;
}
@media (max-width: 768px){

body{
font-size:22px;
padding:10px;
}

h1{
font-size:clamp(36px,9vw,48px);
letter-spacing:4px;
}

nav button{
font-size:24px;
padding:10px 16px;
margin:6px;
}

.player{
flex-direction:column;
align-items:center;
gap:20px;
}

.playlist{
width:95%;
}

.track-item{
font-size:24px;
padding:12px;
}

.player-disc{
width:95%;
padding:20px;
}

.disc{
width:110px;
height:110px;
}

.controls button{
font-size:26px;
padding:10px 16px;
margin:6px;
}

.descargar{
font-size:22px;
padding:10px 14px;
}

.guestbook-box{
width:95%;
padding:20px;
}

.guestbook-form input,
.guestbook-form textarea{
font-size:24px;
padding:12px;
}

.guestbook-form button{
font-size:24px;
padding:10px 16px;
}

.guestbook-entry .meta{
font-size:20px;
}

.guestbook-entry .msg{
font-size:24px;
}

footer{
font-size:16px;
}

}