:root {
  --bg: #0b0b0b;
  --text: #ffffff;
  --accent: #B86BFF;
}

/* Reset + Base */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  text-align: left;
}

/* Navigation */
nav {
  margin-bottom: 2rem;
  font-size: 1rem;
}

nav a {
  color: var(--accent);
  text-decoration: none;
  margin-right: 10px;
}

nav a:hover {
  text-shadow: 0 0 4px var(--accent);
}

/* Title + crosses */
.title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;   /* centers all horizontally */
  gap: 20px;                 /* space between crosses and text */
  margin-bottom: 1rem;
}

.vcr-header {
  font-family: 'VCR OSD Mono', monospace;
  font-size: 3.5em;
  letter-spacing: 5px;
  color: var(--accent);
  margin: 0;
}

.cross-gif {
  width: 45px;
  height: auto;
  opacity: 0.9;
}

/* Lead + Cards */
.lead {
  margin: 0.5rem 0 1.5rem;
  font-size: 1.1rem;
  color: #dcdcdc;
  font-family: 'Times New Roman', Georgia, serif;
}

.card {
  background: rgba(20,20,20,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 6px;
}

/* Dispatch feed */
.feed {
  background: #111;
  border: 1px solid rgba(184,107,255,0.2);
  padding: 1rem;
  border-radius: 4px;
  height: 220px;
  overflow-y: auto;
  font-size: 0.95rem;
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1.4;
}

/* Inputs + buttons */
input, button {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(20,20,20,0.6);
  color: #fff;
}

button {
  cursor: pointer;
  background-color: var(--accent);
  border: none;
  color: #0b0b0b;
  transition: background 0.3s;
}

button:hover {
  background-color: #9a4bff;
}

/* Eyeball */
.eyeball-wrap {
  text-align: center;
  margin-bottom: 1rem;
}

.eyeball-gif {
  max-width: 60px;
  opacity: 0.85;
}

/* Rose */
.rose-wrap {
  text-align: center;
  margin-top: 1rem;
}

.rose-gif {
  max-width: 80px;
  opacity: 0.9;
}

/* Bat */
.bat-gif {
  float: right;
  margin-left: 1rem;
  max-width: 120px;
  opacity: 0.85;
  image-rendering: pixelated;
}

/* Footer */
footer {
  margin-top: 3rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-align: left;
  clear: both;
}

.system-status {
  text-align: center;
  font-size: 1.1rem;
  color: var(--accent);
  margin: 2rem 0;
  letter-spacing: 1px;
  font-family: 'Times New Roman', Georgia, serif; /* serif, like the body text */
}
.title-image {
  text-align: center;
  margin: 1rem 0;
}

.title-gif {
  max-width: 200px;
  height: auto;
  opacity: 0.9;