body {
  background:black;
  color:white;
  font-family: monospace;
  overflow:hidden;
}

/* NOISE */
.noise {
  position:fixed;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.07;
  pointer-events:none;
}

/* SCANLINES */
.scanlines {
  position:fixed;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events:none;
}

/* RGB SHIFT */
.rgb-shift {
  position:fixed;
  inset:0;
  animation: rgb 0.1s infinite alternate;
  pointer-events:none;
}

@keyframes rgb {
  0% { transform: translate(0); }
  100% { transform: translate(-4px,4px); }
}

.container, .intro {
  max-width:420px;
  margin:30px auto;
  padding:20px;
  border:1px solid red;
  background:rgba(0,0,0,0.85);
}

.glitch-global {
  animation: globalShake 0.6s infinite;
}

@keyframes globalShake {
  0% { transform:translate(0); }
  25% { transform:translate(-3px,2px); }
  50% { transform:translate(3px,-2px); }
  75% { transform:translate(-2px,1px); }
  100% { transform:translate(0); }
}

.glitch-text {
  position:relative;
  font-size:48px;
  text-shadow:2px 0 red,-2px 0 cyan;
}

.glitch-text::before,
.glitch-text::after {
  content:attr(data-text);
  position:absolute;
  left:0;
}

.glitch-text::before {
  color:red;
  animation: glitch1 0.15s infinite;
}

.glitch-text::after {
  color:cyan;
  animation: glitch2 0.18s infinite;
}

@keyframes glitch1 {
  0% { clip-path: inset(0 0 65% 0); transform:translate(-3px); }
  100% { clip-path: inset(65% 0 0 0); transform:translate(3px); }
}

@keyframes glitch2 {
  0% { clip-path: inset(45% 0 35% 0); transform:translate(3px); }
  100% { clip-path: inset(35% 0 45% 0); transform:translate(-3px); }
}

.glitch-flicker {
  animation:flicker 0.8s infinite;
}

@keyframes flicker {
  0%,100%{opacity:1}
  50%{opacity:0.3}
}

.glitch-btn {
  width:100%;
  background:black;
  color:white;
  border:1px solid red;
  padding:14px;
  margin:6px 0;
}

.glitch-btn:hover {
  background:red;
}

.glitch-btn-danger {
  background:darkred;
  border:2px solid red;
}

.glitch-box {
  border:1px dashed red;
  padding:10px;
  margin-bottom:12px;
}

.terminal {
  max-width:420px;
  margin:20px auto;
  height:140px;
  overflow:hidden;
  border:1px solid red;
  background:black;
  color:#0f0;
  font-size:12px;
  padding:8px;
  box-shadow:0 0 15px red;
}

.red { color:red; }

.flash {
  position:fixed;
  inset:0;
  background:white;
  opacity:0.05;
  pointer-events:none;
}

.error-popup {
  position:fixed;
  bottom:20px;
  right:20px;
  background:black;
  border:1px solid red;
  padding:10px;
  color:white;
  font-size:12px;
  box-shadow:0 0 12px red;
  animation: glitchPop 0.5s infinite;
  z-index:9999;
}

@keyframes glitchPop {
  0% { transform:translate(0); }
  50% { transform:translate(-3px,2px); }
  100% { transform:translate(0); }
}