@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
body {
  background-color: rgb(0, 0, 0);
  font-family: "Share Tech Mono";
  color: #00ff66;
  text-shadow: 0 0 2px #00ff66, 0 0 5px #00ff66, 0 0 10px rgba(0, 255, 102, 0.4),
    0 0 20px rgba(0, 255, 102, 0.2);
  filter: contrast(1.05) brightness(1.05) saturate(110%);
}

/* links styled like selectors */
.selector-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
a {
  color: #00ff66;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}
a:focus {
  outline: none;
}

/* show keyboard highlight when in keyboard mode */
.selector-list a.keyboard-highlight {
  background-color: rgba(0, 255, 100, 0.15);
  outline: none;
}
/* only show hover effect when NOT in keyboard mode */
body:not(.keyboard-mode) .selector-list a:hover {
  background-color: rgba(0, 255, 100, 0.15);
}

div.prompt-field {
  position: sticky;
  z-index: 2;
  bottom: 10px;
}
div.empty-space {
  position: sticky;
  z-index: 1;
  padding-top: 10px;
  padding-bottom: 30px;
  bottom: 0;
}
.log-entry a,
.term-link {
  color: #00ffc3;
  display: inline;
}
.log-entry a:hover,
.term-link:hover {
  color: #00ffc3;
  background-color: rgba(0, 255, 100, 0.15);
}

@keyframes flicker {
  0%,
  3%,
  5%,
  8%,
  10%,
  13%,
  20%,
  35%,
  55%,
  75%,
  100% {
    opacity: 1;
  }
  4%,
  9%,
  12%,
  22%,
  36%,
  56%,
  78%,
  95% {
    opacity: 0.85;
  }
  6%,
  11%,
  21%,
  33%,
  57%,
  80%,
  94% {
    opacity: 0.9;
  }
}

@keyframes softPulse {
  0%,
  100% {
    filter: blur(0.2px) brightness(1.03);
  }
  50% {
    filter: blur(0.4px) brightness(1.06);
  }
}

.terminal {
  position: relative;
  max-width: 700px;
  margin: 2rem auto;
  background: rgba(0, 0, 0, 0.3);
  /*border: 2px solid #00ff9c33;*/
  padding: 1.5rem;
  /* box-shadow: 0 0 15px #00ff9c11;*/
  animation: flicker 8s infinite, softPulse 6s ease-in-out infinite;
}

h1,
h2,
h3 {
  color: #42ff8e;
  font-weight: bold;
}

strong {
  color: #aaffc3;
  text-shadow: 0 0 2px #aaffc3, 0 0 5px #aaffc3, 0 0 10px rgba(0, 255, 102, 0.4),
    0 0 20px rgba(0, 255, 102, 0.2);
}

.terminal-image {
  text-align: center;
  border: 1px solid #00ff9c33;
  background: rgba(0, 255, 156, 0.05);
  padding: 0.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 0 10px #00ff9c11;
}

.terminal-image img {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 1.2em auto;
  filter: grayscale(100%) contrast(120%) sepia(40%) hue-rotate(90deg) saturate(250%);
}

.terminal-caption {
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 0.5rem;
  color: #aaffc3;
}

.cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}

/* CRT overlay */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 3px;
  z-index: 80;
  pointer-events: none;
  mix-blend-mode: multiply; /* keeps color depth consistent */
  animation: crtScan 4s linear infinite, crtRoll 10s ease-in-out infinite;
}

/* repeating micro movement to simulate flicker flow */
@keyframes crtScan {
  0%,
  100% {
    background-position: 0 0;
  }
  50% {
    background-position: 0 3px;
  }
}

/* gentle vertical drift, like the screen refreshing */
@keyframes crtRoll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  border: none;
  border-top: dashed 1px;
  box-shadow: 0 0 4px -0.2px #00ff66;
}

.separator:not(:empty)::before {
  margin-right: 0.25em;
}

.separator:not(:empty)::after {
  margin-left: 0.25em;
}

#loading-container {
  margin-top: 0.5em;
}

.loading-line {
  opacity: 0;
  white-space: pre;
  animation: appear 0.3s forwards;
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

.terminal-content {
  opacity: 0; /* start hidden */
  transition: opacity 0.8s ease;
}