/* ---------- board 4: Forums & File-Sharing — Y2K / Flash futurism ---------- */

body.bbs {
  background: linear-gradient(160deg, #e8ecef 0%, #b8c2c9 30%, #dfe4e8 55%, #9aa5ac 100%);
  color: #2b3338;
  font-family: Verdana, Geneva, sans-serif;
  position: relative;
  overflow-x: hidden;
}

/* floating glossy orbs */
body.bbs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(3rem 3rem at 12% 18%, rgb(255 255 255 / 90%) 0%, rgb(180 200 210 / 30%) 45%, transparent 70%),
    radial-gradient(2rem 2rem at 88% 12%, rgb(255 255 255 / 85%) 0%, rgb(180 200 210 / 25%) 45%, transparent 70%),
    radial-gradient(4rem 4rem at 92% 70%, rgb(255 255 255 / 80%) 0%, rgb(160 180 190 / 25%) 45%, transparent 70%),
    radial-gradient(2.5rem 2.5rem at 6% 82%, rgb(255 255 255 / 85%) 0%, rgb(180 200 210 / 25%) 45%, transparent 70%);
  animation: orb-float 9s ease-in-out infinite alternate;
}

@keyframes orb-float {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-1rem);
  }
}

.bbs-nav {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #cfd6db 45%, #8f9aa1 100%);
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 3px 8px rgb(0 0 0 / 25%);
  padding: 0.4rem 0.9rem;
  margin: 0.75rem auto;
}

.bbs-nav a {
  color: #1c3d4a;
  border: none;
}

.board {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, rgb(255 255 255 / 65%), rgb(200 210 216 / 45%));
  border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(255 255 255 / 90%);
  backdrop-filter: blur(6px);
  clip-path: polygon(0 1.5rem, 1.5rem 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
}

.board-banner .board-name {
  color: #3a4a52;
  font-weight: bold;
}

.thread-meta {
  color: #4d5a60;
}

.board h1 {
  color: #17313a;
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%), 0 2px 6px rgb(0 0 0 / 20%);
}

.post-body h2 {
  color: #33555f;
}

.chrome-loading {
  margin: 1rem 0;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  color: #33555f;
}

.chrome-loading-track {
  position: relative;
  overflow: hidden;
  height: 1rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7b878d, #cfd6db);
  border: 1px solid #fff;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 45%);
}

.chrome-loading-fill {
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: repeating-linear-gradient(
      110deg,
      rgb(255 255 255 / 55%) 0 0.6rem,
      rgb(120 200 230 / 65%) 0.6rem 1.2rem
    ),
    linear-gradient(90deg, #5fc7e6, #8fe0c2);
  background-size: 1.7rem 100%, 100% 100%;
  animation: loading-stripes 1.1s linear infinite;
}

@keyframes loading-stripes {
  from {
    background-position: 0 0, 0 0;
  }

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

.post {
  position: relative;
  background: linear-gradient(160deg, rgb(255 255 255 / 70%), rgb(190 200 206 / 45%));
  border: 1px solid rgb(255 255 255 / 85%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 4px 12px rgb(0 0 0 / 15%);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  backdrop-filter: blur(3px);
}

.avatar {
  background: conic-gradient(from 200deg, #fff, #9aa5ac, #fff, #cfd6db, #fff);
  border: 1px solid #fff;
  color: #1c3d4a;
  box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
}

.poster .handle {
  color: #17313a;
}

.signature {
  color: #4d5a60;
}

.rainbow-rule {
  height: 4px;
  border: none;
  border-radius: 999px;
  background: conic-gradient(from 90deg, #fff, #b8c2c9, #fff, #9aa5ac, #fff);
}

.era-nav-link {
  color: #1c3d4a;
  border-color: #fff;
  background: linear-gradient(180deg, #fff, #cfd6db);
  border-radius: 999px;
}

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