/* ============================================================
   UNIVERSE MINI — embeddable mini-map of all 90 lives,
   used on for-parents / for-teachers / for-pastors / press / etc.
   ============================================================ */

.universe-mini {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(194, 158, 70,0.12), transparent 65%),
    linear-gradient(180deg, #0F1620 0%, #1A2736 100%);
  border-top: 1px solid rgba(194, 158, 70,0.28);
  border-bottom: 1px solid rgba(194, 158, 70,0.28);
  padding: 80px 24px 90px;
  position: relative; overflow: hidden;
}
.universe-mini::before {
  /* subtle starfield */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(244, 237, 215,0.7), transparent 60%),
    radial-gradient(1px 1px at 78% 22%, rgba(244, 237, 215,0.5), transparent 60%),
    radial-gradient(1px 1px at 32% 64%, rgba(244, 237, 215,0.6), transparent 60%),
    radial-gradient(1px 1px at 58% 78%, rgba(244, 237, 215,0.5), transparent 60%),
    radial-gradient(1px 1px at 86% 56%, rgba(244, 237, 215,0.55), transparent 60%),
    radial-gradient(1px 1px at 18% 88%, rgba(244, 237, 215,0.5), transparent 60%);
  pointer-events: none; opacity: 0.85;
}
.universe-mini-inner {
  max-width: 1180px; margin: 0 auto;
  position: relative; z-index: 2;
}
.universe-mini-head {
  text-align: center; margin-bottom: 36px;
}
.universe-mini-head .label {
  font-family: 'Belda', serif; font-size: 13px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--bronze-hi, #E1CD9B);
  display: inline-block; margin-bottom: 14px;
}
.universe-mini-head h2 {
  font-family: 'Belda', serif; font-weight: 800;
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.05;
  color: var(--ivory, #F4EDD7); margin: 0 0 16px;
}
.universe-mini-head h2 em {
  font-style: italic; color: var(--bronze-hi, #E1CD9B);
}
.universe-mini-head p {
  font-family: 'Belda', serif; font-size: 16px; line-height: 1.55;
  color: rgba(244, 237, 215,0.78); max-width: 60ch; margin: 0 auto;
}

/* Era arc */
.universe-mini-arc {
  position: relative;
  margin: 30px auto 24px;
  max-width: 1100px;
}
.universe-mini-eras {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  position: relative; z-index: 2;
}
@media (max-width: 880px) {
  .universe-mini-eras { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .universe-mini-eras { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.um-era {
  background: rgba(11,18,32,0.55);
  border: 1px solid rgba(194, 158, 70,0.22);
  border-radius: 10px;
  padding: 14px 12px 16px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  min-height: 130px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.um-era:hover {
  border-color: rgba(194, 158, 70,0.55);
  transform: translateY(-2px);
}
.um-era-num {
  font-family: 'Belda', serif; font-weight: 800;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(244, 237, 215,0.85); margin-bottom: 6px;
}
.um-era-title {
  font-family: 'Belda', serif; font-weight: 700;
  font-size: 13px; line-height: 1.15;
  color: var(--ivory, #F4EDD7); margin-bottom: 10px;
  min-height: 30px;
}
.um-era-pins {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  align-items: center; margin-bottom: 10px;
}
.um-pin {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(194, 158, 70,0.42);
  display: inline-block;
  transition: transform 0.2s ease, background 0.2s ease;
}
.um-pin--hero {
  width: 11px; height: 11px;
  background: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 0 8px rgba(194, 158, 70,0.65);
}
.um-pin:hover { transform: scale(1.4); background: var(--bronze-hi, #E1CD9B); }
.um-era-count {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 12px; color: rgba(244, 237, 215,0.85);
  margin-top: auto;
}

/* Hero rail beneath — six published books */
.universe-mini-heroes {
  margin-top: 36px;
  text-align: center;
}
.universe-mini-heroes-label {
  font-family: 'Belda', serif; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(244, 237, 215,0.85);
  margin-bottom: 14px;
}
.universe-mini-hero-row {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.um-hero {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.um-hero:hover {
  background: rgba(194, 158, 70,0.12);
  transform: translateY(-2px);
}
.um-hero-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--um-dot-color, var(--bronze-hi, #E1CD9B));
  box-shadow: 0 0 10px color-mix(in srgb, var(--um-dot-color, #E1CD9B) 70%, transparent);
  margin-bottom: 8px;
  transition: box-shadow 0.4s, transform 0.4s;
}
.um-hero:hover .um-hero-dot {
  box-shadow: 0 0 18px color-mix(in srgb, var(--um-dot-color, #E1CD9B) 90%, transparent);
  transform: scale(1.15);
}
/* Hero-dot color per family (book OR Stranger) */
.um-hero[data-book="adam"]      { --um-dot-color: var(--book-adam-accent); }
.um-hero[data-book="miriam"]    { --um-dot-color: var(--book-miriam-accent); }
.um-hero[data-book="rahab"]     { --um-dot-color: var(--book-rahab-accent); }
.um-hero[data-book="david"]     { --um-dot-color: var(--book-david-glow); }
.um-hero[data-book="benaiah"]   { --um-dot-color: var(--book-benaiah-accent); }
.um-hero[data-book="zachariah"] { --um-dot-color: var(--book-zachariah-glow); }
.um-hero[data-book="stranger"]  { --um-dot-color: var(--book-stranger-glow); }
.um-hero-name {
  font-family: 'Belda', serif; font-weight: 700;
  font-size: 13px; color: var(--ivory, #F4EDD7);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.um-hero-meta {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 11px; color: rgba(244, 237, 215,0.85);
  margin-top: 2px;
}

/* CTA below */
.universe-mini-cta {
  text-align: center; margin-top: 40px;
}
.universe-mini-cta .btn {
  font-size: 15px;
}
.universe-mini-cta-note {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 13px; color: rgba(244, 237, 215,0.85);
  margin-top: 12px;
}

/* Connecting line behind eras (decorative) */
.universe-mini-thread {
  position: absolute;
  left: 24px; right: 24px;
  top: 50%; transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(194, 158, 70,0.20) 12%,
    rgba(194, 158, 70,0.40) 50%,
    rgba(194, 158, 70,0.20) 88%,
    transparent 100%);
  z-index: 1;
}
@media (max-width: 880px) {
  .universe-mini-thread { display: none; }
}