/* === Retro-Wave Terminal Popup === */
#terminal-popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw; max-width: 600px;
  height: 60vh; max-height: 400px;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  border: 2px solid #ff0080;
  border-radius: 8px;
  box-shadow:
    0 0 12px rgba(255,0,128,0.6),
    0 0 24px rgba(0,255,255,0.4),
    inset 0 0 8px rgba(255,0,128,0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.4s ease-out;
}

/* Fade-in */
// optional
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* === Header Bar with Neon Accents === */
#terminal-popup .term-header {
  background: rgba(255, 0, 128, 0.15);
  backdrop-filter: blur(4px);
  color: #00ffff;
  padding: 0.5rem 0.75rem;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-shadow: 0 0 4px #00ffff;
}

#terminal-popup .term-header .close-btn {
  cursor: pointer;
  font-weight: bold;
  color: #ff0080;
  padding: 0 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
}
#terminal-popup .term-header .close-btn:hover {
  background: rgba(255, 0, 128, 0.3);
}

/* === Body: Grid + Glowing Text + Flicker === */
#terminal-popup .term-body {
  position: relative;
  background-color: #1a1a2e;
  /* subtle grid */
  background-image:
    linear-gradient(#2c2c52 1px, transparent 1px),
    linear-gradient(90deg, #2c2c52 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
  line-height: 1.4;
  text-shadow:
    0 0 2px #ff0080,
    0 0 4px #00ffff;
  animation: flicker 1.5s infinite;
}

/* Flicker effect */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.8;
  }
}

/* === Prompt & Cursor in Neon Purple === */
#terminal-popup .prompt {
  color: #ff0080;
  font-family: 'VT323', monospace;
  text-shadow: 0 0 4px #ff0080;
}

#terminal-popup .cursor {
  display: inline-block;
  width: 0.6ch;
  background: none;
  color: #00ffff;
  animation: blink 1s step-start infinite;
  text-shadow: 0 0 4px #00ffff;
}

/* Blinking cursor */
@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* === Banana Easter-Egg Styling === */
.banana {
  color: #FFD700;
  text-shadow: 0 0 2px #FFD700;
  font-family: 'VT323', monospace;
}