/* ===========================
   🔥 Base Theme
=========================== */
body.bbs-theme {
  background-color: #000;
  color: #FF6F61;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* prevent horizontal scrollbars */
}

body { font-family: sans-serif; }

h1, h2, .bbs-title { font-family: 'C64 Pro', sans-serif; }

.bbs-header, .rof-footer {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

/* ===========================
   🔥 Typography Effects
=========================== */
.flame-flicker {
  animation: flicker 1.2s infinite alternate;
  color: orange;
  text-shadow: 0 0 5px red, 0 0 10px yellow;
}

.neon-glow {
  color: cyan;
  animation: glow 2s ease-in-out infinite alternate;
}

.neon-icon {
  font-size: 1em;
  color: #FF6F61;
  animation: flicker 1.2s infinite alternate;
}

.neon-tm {
  font-size: 0.8em;
  vertical-align: super;
  color: #ffcc00;
  text-shadow: 0 0 5px #f60;
}

@keyframes flicker { 0%,100%{opacity:1;} 50%{opacity:.6;} }
@keyframes glow {
  from { text-shadow:0 0 5px #0ff,0 0 10px #0ff; }
  to   { text-shadow:0 0 20px #0ff,0 0 30px #0ff; }
}

/* ===========================
   🔥 Header Styling
=========================== */
.bbs-header-wrap { background:#000; padding:0; }

.bbs-header,
.bbs-header h1,
.bbs-header p,
.bbs-header .bbs-title,
.bbs-header .bbs-subtitle,
.bbs-header .bbs-subsubtitle {
  font-family: 'C64 Pro Mono', monospace;
}

.bbs-header {
  text-align: center;
  padding: 1em 0;
  background: radial-gradient(circle at top, #1a1a1a, #000);
}

.banner-img {
  width: 440px; max-width:100%; height:auto;
  margin-bottom: .5em;
  filter: drop-shadow(0 0 8px #FF6F61);
  transition: transform .3s ease;
}
.banner-img:hover { transform: scale(1.05); }

.bbs-title {
  font-size: 2.2em; margin:0;
  color:#FF6F61; text-shadow:0 0 6px #FF6F61;
}
.bbs-subtitle {
  font-size:1.2em; margin-top:.5em;
  color:#0ff; text-shadow:0 0 4px #0ff;
}
.bbs-subsubtitle {
  font-size:1em; margin-top:.5em;
  color:#f00; text-shadow:0 0 4px #f00;
}

/* ===========================
   🔥 Navigation Menu
=========================== */
.main-nav { width:100%; margin:0; padding:.5em 0; }

.main-nav ul {
  display:flex; justify-content:center; align-items:center;
  gap:20px; padding:0; margin:0; list-style:none; flex-wrap:wrap;
}
.main-nav li { display:inline-block; }

.main-nav a {
  color:#ffcc00; font-family:'C64ProMono', monospace;
  text-decoration:none; text-shadow:0 0 5px #ff6600;
  transition:color .3s ease, text-shadow .3s ease;
}
.main-nav a:hover,
.main-nav a.active {
  color:#fff; text-shadow:0 0 10px #ff3300;
  border-bottom:2px solid #ff6600;
}

/* ===========================
   🔥 Footer Styling
=========================== */
.rof-footer-wrap { background:#000; padding:0; }

.rof-footer {
  font-family: Verdana, sans-serif !important;
  font-size:100%; text-align:center;
  background:#000; color:#ffcc00;
  text-shadow:0 0 5px #f60;
  padding:0; /* no global padding */
}
.footer-info { padding:20px; }

/* Links */
.rof-footer a {
  color: #ff6;
  text-decoration: none;
  text-shadow: 0 0 5px #f60;
}

.rof-footer a:hover {
  color: #fff;
  text-shadow: 0 0 10px #ff3300;
}

/* ===========================
   🔥 Flame Lines
=========================== */
.flame-line {
  display: block;
  height: 4px;
  background: linear-gradient(to right, #ff3300, #ff6600, #ffcc00);
  box-shadow: 0 0 10px #ff6600;
  width: 100%;
  max-width: 100vw;   /* prevent overflow */
  margin: 0 auto;
  line-height: 0;
  animation: emberPulse 2s infinite alternate;
}

@keyframes emberPulse {
  0%, 100% { box-shadow: 0 0 10px #ff6600; }
  50%      { box-shadow: 0 0 20px #ff3300; }
}

/* Footer nav spacing tightened */
.rof-footer .main-nav {
  margin: 0;
  padding: 0.5em 0;
}

/* Footer info block spacing */
.footer-info {
  padding: 20px;
  text-align: center;
}

/* ===========================
   🔥 Responsive Layout (Header/Footer Only)
=========================== */
@media screen and (max-width: 600px) {
  .banner-img {
    width: 160px;
  }

  .bbs-title {
    font-size: 1.6em;
  }

  .bbs-subtitle,
  .bbs-subsubtitle {
    font-size: 1em;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .rof-footer {
    font-size: 0.9em;
  }

  .main-nav a {
    font-size: 1em;
  }
}