/* ===================================
  DIALOGUE RECAP - FANTASY THEME
  =================================== */

#recapContent {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.4); /* subtle magical glow */
}

.recap-scene {
  background: linear-gradient(145deg, #fdf6e3, #f5e8c7); /* parchment-like */
  border-left: 6px solid var(--color-secondary);
  padding: var(--space-md);
  border-radius: 12px;
  margin-bottom: var(--space-md);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.05), 0 4px 10px rgba(0,0,0,0.1);
  font-family: "Cinzel", serif; /* medieval/fantasy font */
}

.recap-scene-title {
  font-size: 20px;
  font-weight: 700;
  color: #6b3e1c; /* dark brown for old-scroll vibe */
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-secondary);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.recap-dialogue {
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: "Merriweather", serif; /* readable fantasy style */
}

.recap-speaker {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-shadow: 0 0 2px rgba(255,107,107,0.5); /* subtle magical glow */
}

.recap-text {
  font-size: 14px;
  color: #3a2d1a; /* dark parchment text */
  line-height: 1.6;
}

.recap-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-secondary);
  font-style: italic;
  font-family: "Merriweather", serif;
  text-shadow: 0 0 2px rgba(0,0,0,0.2);
}