body {
      margin: 0;
      padding: 2rem;
      font-family: 'Fredoka One', cursive;
      background: radial-gradient(ellipse at center, #3e004a, #000);
       background-size: 400% 400%;
      color: white;
      text-align: center;
    }

  .hero-image img {
    max-width: 300px;
    max-height: 300px;
    border-radius: 12px;
    border: 4px solid #ff69b4;
    box-shadow: 0 0 20px #ff69b4;
    animation: float 2s ease-in-out infinite;
  }
.name-title {
  margin: 2rem auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 0 12px #ff69b4;
  max-width: 100%;
}
  .name-title h1 {
    font-size: 3rem;
    color: #ff69b4;
    margin-bottom: 0.2rem;
    text-shadow: 2px 2px 5px black;
  }

  .name-title h2 {
    font-size: 1.5rem;
    color: #ffd700;
    margin-top: 0;
    font-family: 'Bangers', cursive;
  }

  .section {
    max-width: 100%;
    margin: 2rem auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    box-shadow: 0 0 12px #222;
  }

  .section h3 {
    margin-top: 0;
    color: #0ff;
  }

  #lore-header {
    background: linear-gradient(to bottom, #ff69b4 0%, #3e004a 100%);
    padding: 1rem;
    text-align: center;
    border-bottom: 3px solid #ff1493;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.4);
  }

  #lore-header h1 {
    font-family: 'Bangers', cursive;
    font-size: 3rem;
    margin: 0;
    color: white;
    text-shadow: 2px 2px 6px #000;
  }

  #lore-header .tagline {
    font-size: 1.2rem;
    color: #fff8f8;
    font-family: 'Fredoka One', cursive;
    margin-top: 0.5rem;
  }
    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
      100% { transform: translateY(0); }
    }

    .tbc-footer {
      margin-top: 3rem;
      font-size: 0.9rem;
      color: #999;
      text-align: center;
      font-style: italic;
      opacity: 0.7;
    }
    .tbc-footer a {
      color: #ffd700;
      text-decoration: none;
    }
    .tbc-footer a:hover {
      text-decoration: underline;
    }

.lore-nav {
  display: inline-flex;
  gap: 1rem;
  background: rgba(255, 248, 230, 0.8);
  border: 2px solid #d9c2a3;
  border-radius: 8px;
  padding: 0.4rem 1rem;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  position: relative;
  z-index: 10;
  margin: 1rem auto;
  justify-content: center;
  align-items: center;
}

.lore-nav button,
.lore-nav a {
  background: none;
  border: none;
  color: #3a2c23;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
}

.lore-nav button:hover,
.lore-nav a:hover {
  color: #ff69b4;
  text-shadow: 0 0 4px #fff2e6;
}

/* ===== Affinity Page (scoped) ===== */
.affinity-page .affinity-title {
  /* piggyback on .name-title visuals already in lore.css */
  position: relative;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px color-mix(in oklab, var(--aff-color, #ffd700), transparent 60%);
}

/* Small icon next to the title */
.affinity-page .aff-hero-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.5));
}

/* Traits row */
.affinity-page .traits {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.affinity-page .trait-chip {
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  font-family: 'Fredoka One', cursive;
}

/* Linked items grid */
.affinity-page .items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}
.affinity-page .item-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .7rem;
  text-align: center;
}
.affinity-page .item-card img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid rgba(255,105,180,.5);
}
.affinity-page .item-card a {
  display: block;
  margin-top: .5rem;
  color: #ffd700;
  text-decoration: none;
}
.affinity-page .item-card a:hover { text-decoration: underline; }

/* Existing affinity badges (already added earlier) */
.affinity-wrap {
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
}
.affinity-badge {
  --aff-color: #ffd700;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 10px color-mix(in oklab, var(--aff-color), transparent 70%);
  text-decoration:none; color:#fff; font-family:'Fredoka One', cursive; font-size:.95rem;
}
.affinity-badge:hover {
  box-shadow: 0 0 18px color-mix(in oklab, var(--aff-color), transparent 50%);
  transform: translateY(-1px);
}

.aff-badge-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}
.affinity-badge img {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}