/* Reset + Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111;
  color: #eee;
}

/* Layout: left nav, middle, right sidebar */
#app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  min-height: 100vh;
  background: #4b8b9b;
}

/* ========== LEFT SIDEBAR ========== */

#sidebar {
  padding: 16px;
  background: #151515;
  border-right: 1px solid #333;
  position: sticky;
  top: 0;
  min-height: 100vh;
}

.site-title {
  margin: 0 0 16px;
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid #333;
  padding-bottom: 6px;
}

#navList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: transparent;
  color: #eee;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  font-size: 0.95rem;
}

.nav-link:hover {
  background: #2a2a2a;
}

.nav-link.active {
  background: #444;
}

.nav-header {
  margin: 12px 0 4px;
  padding: 4px;
  text-align: center;
  color: #ddd;
  font-size: 0.85rem;
  font-weight: 700;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

/* ========== RIGHT SIDEBAR ========== */

#rightbar {
  padding: 16px;
  background: #151515;
  border-left: 1px solid #333;
  position: sticky;
  top: 0;
  height: 100vh;           /* full column height */
  display: flex;
  flex-direction: column;
}

/* Social icons row */
.right-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
  margin-bottom: 10px;
}

/* Icon sizes */
#discord-logo,
#subscribstar-logo,
#patreon-logo {
  width: 45px;
  height: auto;
  object-fit: contain;
  transition: transform 0.15s ease, filter 0.15s ease;
  cursor: pointer;
}

/* Discord looks visually a bit smaller, boost slightly */
#discord-logo {
  width: 60px;
}

/* Hover */
#discord-logo:hover,
#subscribstar-logo:hover,
#patreon-logo:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
}

/* Highlight card fills remaining height */
.highlight-box {
  flex: 1 1 auto;
  background: #101010;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.highlight-box h2 {
  text-align: center;
  margin: 0 0 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
  font-size: 1.15rem;   /* slightly smaller Highlight title */
}

/* Highlight “New in …” */
.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.highlight-list li {
  text-align: center;
}

/* Word-style clickable highlight/filter */
.highlight-option {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #eee;
  font-size: 0.95rem;
  cursor: pointer;
}

.highlight-option:hover {
  text-decoration: underline;
}

/* New in 0.6.0.2 – smaller, not bold */
.highlight-option-new {
  font-size: 0.93rem;   /* a little smaller */
  font-weight: 400;     /* not bold */
}

.highlight-option-new.active {
  color: #4edf6d;
}

/* Current Storylines – bold, turns blue ONLY when active */
.highlight-option-current {
  font-size: 0.95rem;
  font-weight: 700;
  color: #eee;
}

.highlight-option-current.active {
  color: #3bafd9;
}

/* Pregnancy – bold, pink when active */
.highlight-option-pregnancy {
  font-size: 0.95rem;
  font-weight: 700;
}

.highlight-option-pregnancy.active {
  color: #ffa3e2;
}

/* NTR – bold, red when active */
.highlight-option-ntr {
  font-size: 0.95rem;
  font-weight: 700;
}

.highlight-option-ntr.active {
  color: #de5050;
}

/* ===== Green pulse for "New in 0.6.1.0" content ===== */

/* Mark any title that should pulse when New is active */
.v0610-new {
  padding: 2px 3px;
  border-radius: 4px;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Slow, soft green pulse – same green as New in 0.6.1.0 */
@keyframes v0610PulseGreen {
  0%,
  100% {
    background-color: rgba(78, 223, 109, 0);       /* transparent */
    box-shadow: 0 0 0 rgba(78, 223, 109, 0);
  }
  50% {
    background-color: rgba(78, 223, 109, 0.18);    /* gentle tint */
    box-shadow: 0 0 14px rgba(78, 223, 109, 0.6);  /* soft glow */
  }
}

/* Only pulse when New in 0.6.1.0 is active */
body.v0610-new-active .content-section .v0610-new {
  color: #4edf6d !important;                      /* same green as New button */
  animation: v0610PulseGreen 3.5s ease-in-out infinite;
}

/* Text color helpers to match filter colors (for info section text) */
.filter-color-new {
  color: #4edf6d;
  font-weight: bold;
}

.filter-color-current {
  color: #3bafd9;
  font-weight: bold;
}

.filter-color-ntr {
  color: #de5050;
  font-weight: bold;
}

/* Pregnancy helper if you want to mention it in the Info text */
.filter-color-pregnancy {
  color: #ffa3e2;
  font-weight: bold;
}

/* NTR + Pregnancy combo halo — exact NTR color */
.nav-link.ntr-preg-glow {
  text-shadow:
    0 0 6px #de5050,
    0 0 14px #de5050,
    0 0 22px #de5050,
    0 0 32px #de5050;
}

/* Filters sub-header pinned toward bottom */
.highlight-subheader {
  margin-top: auto;
  padding: 6px 0 4px;
  border-bottom: 1px solid #333;
  text-align: center;
  font-size: 1.05rem; /* slightly smaller */
  font-weight: 700;
}

/* Filter list */
.highlight-filters {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}

.highlight-filters li {
  text-align: center;       /* centers Current Storylines and NTR */
}

/* removed separator line between Current Storylines and NTR */
.highlight-filters li + li {
  margin-top: 4px;
  padding-top: 4px;
}

/* Bottom button (under filters, near bottom) */
.manage-hidden-link {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #101010;
  text-align: center;
  font-size: 0.8rem;        /* a bit smaller so it fits */
  color: #eee;
  text-decoration: none;
  white-space: nowrap;      /* keep "Manage Hidden Sections" on one line inside the box */
}

.manage-hidden-link:hover {
  background: #222;
}

/* ========== MIDDLE CONTENT ========== */

#content {
  padding: 0 24px 40px;
  background: #4b8b9b;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  min-height: 100vh;
}

.center-banner {
  margin: 0 -24px 16px;
}

.center-banner img {
  width: 100%;
  border-radius: 6px;
  border: 5px solid rgba(0, 0, 0, 0.7);
}

.content-section {
  display: none;
  background: #1a1a1a;
  padding: 16px 18px;
  border-radius: 4px;
  border: 1px solid #333;
  margin-bottom: 24px;
}

.content-section.visible {
  display: block;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hide + Back buttons share this style */
.hide-section-btn {
  padding: 2px 8px;
  font-size: 0.8rem;
  background: #262626;
  border-radius: 4px;
  border: 1px solid #555;
  color: #eee;
  cursor: pointer;
}

.hide-section-btn:hover {
  background: #333;
}

/* ⭐ NEW: Stack Hide + Back vertically, right aligned */
.section-header-buttons {
  display: flex;
  flex-direction: column;   /* Hide on top, Back below */
  align-items: flex-end;    /* Right-align both buttons */
  gap: 4px;                 /* Space between Hide + Back */
}

/* ⭐ Make Hide + Back identical width */
.section-header-buttons .hide-section-btn {
  width: 100%;        /* Both buttons match the widest one */
  text-align: center; /* Center text inside */
}

/* ⭐ NEW: Bottom Back button positioned bottom-right */
.section-footer {
  display: flex;
  justify-content: flex-end; /* Align Back to the right */
  margin-top: 16px;          /* Space above the bottom button */
}

/* ⭐ Keep bottom Back button text centered */
.section-footer .hide-section-btn {
  text-align: center;
}

/* Hidden list in Manage Hidden page */
#hiddenList {
  list-style: none;
  padding: 0;
}

#hiddenList li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  padding: 6px 0;
}

/* Info section support links (SubscribeStar / Patreon) */
#info a {
  color: #4b8b9b;      /* match middle background color */
}

#info a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 800px) {
  #app {
    grid-template-columns: 1fr;
  }
  #rightbar {
    display: none;
  }
  .center-banner {
    margin: 0 0 16px;
  }
}