/* ===================================================
   Family Synastry / Eltern-Kind Vergleich
   Cosmic Family Dynamics Visual Experience
   CI-Aligned: Brand Purple, Gold, Cyan, Nebula
   =================================================== */

/* --- Hero Section --- */
.fam-hero {
  text-align: center;
  padding: 40px 20px 30px;
  padding-top: calc(var(--nav-height, 68px) + 30px);
  position: relative;
}
.fam-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,92,255,0.14) 0%, rgba(94,45,110,0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.fam-hero h1 {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand, #7C5CFF), var(--gold, #D4A04A), var(--accent, #22D3EE));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.fam-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.fam-hero-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 8px rgba(124,92,255,0.3));
}
.fam-hero p {
  color: var(--text-subtle, #a0a0b8);
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* --- Role Selector --- */
.fam-role-group {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fam-role-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  background: var(--bg-surface, #0C1220);
  color: var(--text-subtle, #a0a0b8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.fam-role-btn.active {
  background: rgba(124,92,255,0.12);
  border-color: var(--brand, #7C5CFF);
  color: var(--brand-light, #9B7AFF);
}
.fam-role-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.2);
  color: var(--text, #fff);
}

/* --- Person Cards: Family-specific colors --- */
.fam-person-card.parent-card {
  border-top: 3px solid var(--brand, #7C5CFF);
  z-index: 3;
}
.fam-person-card.child-card {
  border-top: 3px solid var(--gold, #D4A04A);
  z-index: 1;
}
.parent-card .syn-person-label { color: var(--brand-light, #9B7AFF); }
.parent-card .syn-person-label .icon {
  background: rgba(124,92,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.parent-card .syn-person-label .icon img {
  display: block;
  width: 16px;
  height: 16px;
}
.child-card .syn-person-label { color: var(--gold-light, #E8B960); }
.child-card .syn-person-label .icon {
  background: rgba(212,160,74,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.child-card .syn-person-label .icon img {
  display: block;
  width: 16px;
  height: 16px;
}

/* --- Result Hero --- */
.fam-result-hero {
  text-align: center;
  padding: 30px 20px 30px;
  padding-top: calc(var(--nav-height, 68px) + 16px);
  position: relative;
  z-index: 1;
}
.fam-result-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(124,92,255,0.10) 0%, rgba(94,45,110,0.06) 40%, transparent 70%);
  pointer-events: none;
}

/* --- Names: Family version --- */
.fam-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.fam-name-badge {
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
}
.fam-name-badge.parent {
  background: rgba(124,92,255,0.12);
  color: var(--brand-light, #9B7AFF);
  border: 1px solid rgba(124,92,255,0.3);
}
.fam-name-badge.child {
  background: rgba(212,160,74,0.12);
  color: var(--gold-light, #E8B960);
  border: 1px solid rgba(212,160,74,0.3);
}
.fam-connector {
  font-size: 22px;
  animation: famPulse 1.8s ease-in-out infinite;
}
@keyframes famPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* --- Score Ring - Family Gradient --- */
.fam-score-ring-fill.excellent { stroke: url(#famGradientExcellent); }
.fam-score-ring-fill.good { stroke: url(#famGradientGood); }
.fam-score-ring-fill.moderate { stroke: url(#famGradientModerate); }
.fam-score-ring-fill.low { stroke: url(#famGradientLow); }

.fam-score-value {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--brand, #7C5CFF), var(--gold, #D4A04A));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Element Dynamic Card --- */
.fam-element-dynamic {
  max-width: 700px;
  margin: 30px auto;
  padding: 0 20px;
}
.fam-dynamic-card {
  background: var(--bg-card, rgba(21,16,42,0.82));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.fam-dynamic-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(212,160,74,0.08));
  z-index: -1;
  animation: famElementPulse 5s ease-in-out infinite;
}
@keyframes famElementPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
.fam-dynamic-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fam-dynamic-el {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fam-dynamic-emoji { font-size: 36px; }
.fam-dynamic-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
}
.fam-dynamic-badge {
  padding: 6px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
}
.fam-dynamic-badge.nurturing    { background: rgba(124,92,255,0.12);  color: var(--brand-light, #9B7AFF); border: 1px solid rgba(124,92,255,0.3); }
.fam-dynamic-badge.stimulating  { background: rgba(212,160,74,0.12);  color: var(--gold-light, #E8B960);  border: 1px solid rgba(212,160,74,0.3); }
.fam-dynamic-badge.grounding    { background: rgba(34,211,238,0.12);  color: var(--accent, #22D3EE);      border: 1px solid rgba(34,211,238,0.3); }
.fam-dynamic-badge.challenging  { background: rgba(239,68,68,0.12);   color: #ef4444;                     border: 1px solid rgba(239,68,68,0.3); }
.fam-dynamic-badge.harmonious   { background: rgba(94,45,110,0.15);   color: #8B3A8B;                     border: 1px solid rgba(139,58,139,0.3); }

.fam-dynamic-desc {
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(210,210,230,0.9);
  max-width: 500px;
  margin: 0 auto;
}

/* --- Key Themes Cards --- */
.fam-themes {
  max-width: 700px;
  margin: 30px auto;
  padding: 0 20px;
}
.fam-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fam-theme-card {
  background: var(--bg-card, rgba(21,16,42,0.82));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.3s;
}
.fam-theme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.fam-theme-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.fam-theme-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.fam-theme-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.fam-theme-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(200,200,220,0.85);
}
.fam-theme-strength {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fam-theme-strength.strong     { background: rgba(74,222,128,0.12);  color: var(--green, #4ADE80); }
.fam-theme-strength.moderate   { background: rgba(124,92,255,0.12);  color: var(--brand-light, #9B7AFF); }
.fam-theme-strength.developing { background: rgba(212,160,74,0.12);  color: var(--gold-light, #E8B960); }

/* --- Category Bars: Family colors (CI-aligned) --- */
.syn-cat-bar-fill.emotional_bond { background: linear-gradient(90deg, var(--brand, #7C5CFF), var(--brand-dark, #5A3CD4)); }
.syn-cat-bar-fill.communication  { background: linear-gradient(90deg, var(--accent, #22D3EE), #0EA5E9); }
.syn-cat-bar-fill.parenting      { background: linear-gradient(90deg, #5E2D6E, #8B3A8B); }
.syn-cat-bar-fill.talent         { background: linear-gradient(90deg, var(--gold, #D4A04A), var(--gold-light, #E8B960)); }
.syn-cat-bar-fill.conflict       { background: linear-gradient(90deg, #f97316, #ef4444); }
.syn-cat-bar-fill.karmic         { background: linear-gradient(90deg, var(--brand-light, #9B7AFF), var(--brand, #7C5CFF)); }

/* --- Aspect item person colors --- */
.syn-aspect-planets .parent-color { color: var(--brand-light, #9B7AFF); }
.syn-aspect-planets .child-color  { color: var(--gold-light, #E8B960); }

/* --- Profile Cards: Family --- */
.fam-profile-card.parent::before { background: linear-gradient(90deg, var(--brand, #7C5CFF), var(--brand-dark, #5A3CD4)); }
.fam-profile-card.child::before  { background: linear-gradient(90deg, var(--gold, #D4A04A), var(--gold-dark, #C4943A)); }

/* --- Submit Button: Family --- */
.fam-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  background: var(--gold-gradient, linear-gradient(135deg, #C4943A, #E8B960, #D4A04A));
  color: var(--text-on-gold, #1A1A2E);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(212,160,74,0.35);
}
.fam-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212,160,74,0.50);
}
.fam-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* --- Deep Analysis: Family Bundle --- */
.fam-deep-bundle {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 12, 35, 0.95), rgba(20, 15, 40, 0.95));
  border: 2px solid rgba(212,160,74,0.30);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  margin-bottom: 32px;
  overflow: hidden;
}
.fam-deep-bundle::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(212,160,74,0.15), transparent, rgba(124,92,255,0.12));
  z-index: -1;
  animation: conclusionPulse 4s ease-in-out infinite;
}
.fam-deep-bundle__title {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold, #D4A04A), var(--brand-light, #9B7AFF));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.fam-deep-bundle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  background: var(--gold-gradient, linear-gradient(135deg, #C4943A, #E8B960, #D4A04A));
  color: var(--text-on-gold, #1A1A2E);
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(212,160,74,0.35);
}
.fam-deep-bundle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(212,160,74,0.50);
}

/* --- Radar Chart Labels --- */
.fam-radar-label {
  fill: var(--text-subtle, rgba(255,255,255,0.55));
  font-size: 11px;
  font-weight: 600;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .fam-hero h1 { font-size: 22px; }
  .fam-hero-icon { width: 26px; height: 26px; }
  .fam-hero-title { gap: 8px; }
  .fam-theme-grid { grid-template-columns: 1fr; }
  .fam-names { gap: 10px; }
  .fam-name-badge { font-size: 13px; padding: 6px 16px; }
  .fam-dynamic-header { gap: 10px; }
  .fam-dynamic-emoji { font-size: 28px; }
  .fam-result-hero { padding-top: calc(var(--nav-height, 68px) + 10px); }
}
@media (max-width: 480px) {
  .fam-score-value { font-size: 40px; }
  .fam-theme-card { padding: 16px 14px; }
  .fam-dynamic-card { padding: 18px; }
}