/* page & background */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'VT323', monospace;
  background: linear-gradient(270deg, #1A0C00, #2B1200, #1A0C00);
  background-size: 700% 700%;
  animation: gradientShift 18s ease infinite, flicker 0.12s infinite;
  color: #ffb300;
  overflow: hidden;
  position: relative;
}

@keyframes gradientShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;} 20%,24%,55%{opacity:0.95;} }

/* screen & text */
#screen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1rem 2rem;
  width: 100%;
  height: 100%;
  animation: screenShake 0.08s infinite;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
@keyframes screenShake { 0%{transform:translate(0,0);} 25%{transform:translate(-0.3px,0.3px);} 50%{transform:translate(0.3px,-0.3px);} 75%{transform:translate(-0.2px,0.2px);} 100%{transform:translate(0,0);} }

.boot-screen {
  font-size: 1.4rem;
  white-space: pre;
  color: #ffb300;
  text-shadow: 0 0 6px #ffb300;
  width: 100%;
  line-height: 1.4;
  transition: opacity 0.6s ease;
}

.final-line {
  color: #ffb300;
  text-shadow: 0 0 6px #ffb300;
  font-size: 1.3rem;
  margin: 0.2rem 0;
  line-height: 1.4;
  opacity: 0;
  animation: fadeInLine 0.8s ease-out forwards;
}
@keyframes fadeInLine { from { opacity:0; transform:translateY(5px);} to {opacity:1; transform:translateY(0);} }

.cursor {
  display: inline-block;
  width: 8px;
  height: 1.2em;
  background-color: #ffb300;
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
  vertical-align: bottom;
}
@keyframes blink { 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} }

/* CRT layers */
.noise, .crt-lines, .crt-scanline {
  pointer-events: none;
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:1;
}

/* pixel noise */
.noise {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="black" fill-opacity="0.02"/></svg>');
  animation: noiseShift 0.2s steps(2) infinite;
}
@keyframes noiseShift { 0%{transform:translate(0,0);}50%{transform:translate(1px,1px);}100%{transform:translate(0,0);} }

/* scanlines */
.crt-lines {
  background-image: repeating-linear-gradient(to bottom, rgba(255,179,0,0.05) 0, rgba(255,179,0,0.05) 1px, transparent 1px, transparent 2px);
  animation: crtMove 1.5s linear infinite;
}
@keyframes crtMove { 0%{background-position-y:0;} 100%{background-position-y:2px;} }

/* optional bright scanline */
.crt-scanline {
  background: linear-gradient(to bottom, rgba(255,255,200,0.1) 0%, rgba(255,255,200,0.3) 50%, rgba(255,255,200,0.1) 100%);
  background-size: 100% 4px;
  animation: scanlineMove 2s linear infinite;
}
@keyframes scanlineMove { 0%{background-position-y:0;} 100%{background-position-y:100%;} }

/* CRT flash + degauss */
.crt-flash, .crt-degauss {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none; z-index:10;
}

.crt-flash {
  background: radial-gradient(circle, rgba(255,180,80,0.25) 0%, rgba(255,160,60,0.12) 40%, transparent 80%);
  opacity:0;
  animation: crtFlash 0.5s ease-out forwards;
}
@keyframes crtFlash { 0%{opacity:0;} 15%{opacity:0.35; filter:blur(1px);} 35%{opacity:0.25;} 60%{opacity:0.12;} 100%{opacity:0;} }

.crt-degauss {
  background:black;
  animation: crtDegauss 0.8s ease-in-out forwards;
}
@keyframes crtDegauss { 0%{opacity:1;transform:scale(1);filter:contrast(1) saturate(1);} 20%{transform:scale(1.1,0.9) rotate(0.5deg); filter:contrast(1.2) saturate(1.3);} 40%{transform:scale(0.9,1.1) rotate(-0.5deg);} 60%{transform:scale(1.05,0.95);filter:contrast(1.1) saturate(1.1);} 100%{opacity:0;transform:scale(1);filter:none;} }

/* responsive */
@media (max-width:480px){
  .boot-screen{font-size:1rem;}
  .final-line{font-size:1rem;}
}