@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #00ff00;
  font-family: 'VT323', 'Share Tech Mono', monospace;
  overflow: hidden;
  height: 100vh;
}

.crt {
  width: 100%;
  height: 100vh;
  background: #0a0a0a;
  position: relative;
  overflow: auto;
}

.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: scanline 8s linear infinite;
}

.terminal {
  position: relative;
  z-index: 3;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

#ascii-art {
  color: #00ff00;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #00ff00;
}

.glitch {
  animation: glitch 1s linear infinite;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 20px 0;
  font-size: 18px;
}

.status-item {
  padding: 10px;
  border: 1px solid #00ff00;
  background: rgba(0, 255, 0, 0.05);
  text-shadow: 0 0 5px #00ff00;
}

#output {
  min-height: 300px;
  max-height: 50vh;
  overflow-y: auto;
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #00ff00;
  background: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#output::-webkit-scrollbar {
  width: 8px;
}

#output::-webkit-scrollbar-track {
  background: #000;
}

#output::-webkit-scrollbar-thumb {
  background: #00ff00;
}

.prompt {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin: 20px 0;
  color: #00ff00;
}

#command {
  flex: 1;
  background: transparent;
  border: none;
  color: #00ff00;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  margin-left: 10px;
  text-shadow: 0 0 5px #00ff00;
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@keyframes scanline {
  0% { bottom: 100%; }
  100% { bottom: 0%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes glitch {
  0% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #ff00ff, -0.025em 0.05em 0 #00ffff; }
  14% { text-shadow: 0.05em 0 0 #00ff00, -0.05em -0.025em 0 #ff00ff, -0.025em 0.05em 0 #00ffff; }
  15% { text-shadow: -0.05em -0.025em 0 #ff00ff, 0.025em 0.025em 0 #00ffff, -0.05em -0.05em 0 #00ff00; }
  49% { text-shadow: -0.05em -0.025em 0 #ff00ff, 0.025em 0.025em 0 #00ffff, -0.05em -0.05em 0 #00ff00; }
  50% { text-shadow: 0.025em 0.05em 0 #ff00ff, 0.05em 0 0 #00ffff, 0 -0.05em 0 #00ff00; }
  99% { text-shadow: 0.025em 0.05em 0 #ff00ff, 0.05em 0 0 #00ffff, 0 -0.05em 0 #00ff00; }
  100% { text-shadow: -0.025em 0 0 #ff00ff, -0.025em -0.025em 0 #00ffff, -0.025em -0.05em 0 #00ff00; }
}

.crt[data-mood="punk"] {
  background: #1a0033;
}
.crt[data-mood="punk"] .terminal { color: #ff00ff; }
.crt[data-mood="punk"] #ascii-art,
.crt[data-mood="punk"] .status-item { 
  color: #ff00ff; 
  border-color: #ff00ff; 
  text-shadow: 0 0 10px #ff00ff; 
}

.crt[data-mood="matrix"] {
  background: #000;
}
.crt[data-mood="matrix"] .terminal { color: #00ff41; }
.crt[data-mood="matrix"] #ascii-art,
.crt[data-mood="matrix"] .status-item { 
  color: #00ff41; 
  border-color: #00ff41; 
  text-shadow: 0 0 10px #00ff41; 
}

.crt[data-mood="cyberpunk"] {
  background: #0d0221;
}
.crt[data-mood="cyberpunk"] .terminal { color: #00ffff; }
.crt[data-mood="cyberpunk"] #ascii-art,
.crt[data-mood="cyberpunk"] .status-item { 
  color: #00ffff; 
  border-color: #ff00ff; 
  text-shadow: 0 0 10px #00ffff; 
  background: rgba(255, 0, 255, 0.1);
}

.crt[data-mood="hacker"] {
  background: #0a0e0a;
}
.crt[data-mood="hacker"] .terminal { color: #0f0; }
.crt[data-mood="hacker"] #ascii-art,
.crt[data-mood="hacker"] .status-item { 
  color: #0f0; 
  border-color: #0f0; 
  text-shadow: 0 0 15px #0f0; 
}