/* =========================================
   1. FONT IMPORTS
   ========================================= */
/* Rajdhani (Sci-Fi Headers) & JetBrains Mono (Code/Terminal) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Rajdhani:wght@500;600;700&display=swap');

/* =========================================
   2. GLOBAL TEXT STYLES
   ========================================= */
body {
  font-family: 'Rajdhani', sans-serif;
  /* Default UI font */
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* Force Monospace for Data & Terminal */
.cyber-field input,
.cyber-field select,
.terminal-log,
.status-text,
.val,
.metric-val,
.col-node {
  font-family: 'JetBrains Mono', monospace !important;
}

/* =========================================
   3. HEADINGS (H1 - H6)
   ========================================= */
h1,
h2,
h3,
h4 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--neon-teal);
  margin-bottom: 10px;
}

/* Deck Titles */
.deck-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 5px rgba(29, 205, 159, 0.3);
}

/* =========================================
   4. STATUS TEXT & ERROR HANDLING
   ========================================= */
/* Base Status Style */
.status-text {
  font-size: 13px;
  line-height: 1.5;
  display: block;
  margin-top: 10px;
  padding: 10px;
  border-left: 2px solid transparent;
  background: rgba(0, 0, 0, 0.2);
}

/* --- SUCCESS STATE --- */
.status-text.success {
  color: var(--neon-teal);
  border-left-color: var(--neon-teal);
  background: rgba(29, 205, 159, 0.05);
  text-shadow: 0 0 5px rgba(29, 205, 159, 0.4);
}

.status-text.success::before {
  content: ">> SUCCESS: ";
  opacity: 0.7;
}

/* --- ERROR STATE --- */
.status-text.error {
  color: #ff4444;
  /* Bright Red */
  border-left-color: #ff4444;
  background: rgba(255, 68, 68, 0.05);
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
  /* Red Glow */
  animation: glitch-text 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* Add a scary prefix for errors */
.status-text.error::before {
  content: "!! CRITICAL ERROR: ";
  font-weight: bold;
}

/* Stop the glitch animation after 0.3s so it doesn't annoy the user */
.status-text.error {
  animation-iteration-count: 2;
}

/* =========================================
   5. ANIMATIONS
   ========================================= */
@keyframes glitch-text {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}