/* ---------- board 2: The Web Is Born — cyberdelic infohighway ---------- */

body.bbs {
  background: radial-gradient(120% 100% at 50% 0%, #2a0a4a 0%, #10021f 55%, #05000c 100%);
  color: #d6b9ff;
  font-family: Verdana, Geneva, sans-serif;
  position: relative;
  overflow-x: hidden;
  perspective: 60rem;
}

/* receding Tron-style grid floor */
body.bbs::before {
  content: "";
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 60vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgb(0 255 242 / 55%) 0 2px, transparent 2px 6rem),
    repeating-linear-gradient(0deg, rgb(180 0 255 / 45%) 0 2px, transparent 2px 4rem);
  transform: rotateX(72deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, rgb(0 0 0 / 90%), transparent 90%);
  animation: grid-crawl 5s linear infinite;
}

@keyframes grid-crawl {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 0, 0 4rem;
  }
}

.bbs-nav,
.board {
  position: relative;
  z-index: 1;
}

.bbs-nav a {
  color: #00fff2;
  border-color: #7b2ff7;
  text-shadow: 0 0 6px rgb(0 255 242 / 70%);
}

.board {
  background: linear-gradient(160deg, rgb(123 47 247 / 18%), rgb(0 255 242 / 10%));
  border: 1px solid #7b2ff7;
  box-shadow: 0 0 30px rgb(123 47 247 / 35%), inset 0 0 40px rgb(0 255 242 / 8%);
  backdrop-filter: blur(2px);
}

.board-banner .board-name {
  color: #39ff14;
  text-shadow: 0 0 6px #39ff14, 0 0 14px rgb(57 255 20 / 60%);
}

.board h1 {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #00fff2;
  text-shadow:
    0 0 8px #00fff2,
    0 0 20px rgb(0 255 242 / 70%),
    0 0 40px rgb(123 47 247 / 60%);
}

.post-body h2 {
  color: #ff5cf7;
  text-shadow: 0 0 8px rgb(255 92 247 / 70%);
}

.thread-meta,
.post-body p {
  color: #e4d4ff;
}

.poster .handle {
  color: #39ff14;
  text-shadow: 0 0 6px rgb(57 255 20 / 60%);
}

.post {
  background: linear-gradient(160deg, rgb(255 255 255 / 6%), rgb(123 47 247 / 12%));
  border: 1px solid rgb(0 255 242 / 45%);
  box-shadow: 0 0 18px rgb(123 47 247 / 25%);
}

.avatar {
  background: conic-gradient(from 180deg, #7b2ff7, #00fff2, #39ff14, #7b2ff7);
  color: #05000c;
  text-shadow: none;
  box-shadow: 0 0 12px rgb(0 255 242 / 60%);
}

.signature {
  color: #ff5cf7;
  text-shadow: 0 0 6px rgb(255 92 247 / 50%);
}

.rainbow-rule {
  background: linear-gradient(90deg, #7b2ff7, #00fff2, #39ff14, #ff5cf7);
  box-shadow: 0 0 10px rgb(0 255 242 / 60%);
}

.era-nav-link {
  color: #00fff2;
  border-color: #7b2ff7;
  text-shadow: 0 0 6px rgb(0 255 242 / 60%);
}

@media (prefers-reduced-motion: reduce) {
  body.bbs::before {
    animation: none;
  }
}