/* components.css */  
.artifact-heading {  
  color: #D4AC0D; /* Golden Accent */  
  font-size: 3rem; /* Larger heading */  
  margin-bottom: 1rem;  
  text-align: center; /* Center the heading */  
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Subtle text shadow */  
}

footer {  
  color: #86efac; /* Default footer color */  
  text-align: center;  
  padding: 1.5rem; /* More padding */  
  margin-top: 3rem; /* More margin */  
  font-family: 'wolves-ruin', sans-serif; /* Apply theme font */  
}

/* Styles for the custom footer on artifact page */  
.artifact-footer p {  
  color: #3b82f6; /* Tailwind blue-500 for your custom blue */  
  font-size: 1.1rem;  
}

/* Styles for the Root Index Button - Replaces inline styles */  
.root-index-button {  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  padding: 10px 20px;  
  background: #0b0c10;  
  color: #66fcf1;  
  border: 1px solid #45a29e;  
  border-radius: 25px;  
  cursor: pointer;  
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);  
  font-family: 'Courier New', monospace;  
  font-weight: bold;  
  text-decoration: none; /* Remove underline from link */  
  transition: all 0.3s ease; /* Smooth transition for hover */  
}

.root-index-button:hover {  
  background: #1f2833;  
  box-shadow: 0 6px 20px rgba(102, 252, 241, 0.4);  
}

/* Styles for the Next Node Navigation Button (AGRE-GATI) */  
.agre-gati-button {  
  padding: 15px 35px;  
  background: #45a29e;  
  color: #0b0c10;  
  font-weight: bold;  
  border: none;  
  border-radius: 12px;  
  letter-spacing: 2px;  
  cursor: pointer;  
  text-transform: uppercase;  
  font-family: 'wolves-ruin', sans-serif; /* Use theme font */  
  transition: all 0.3s ease;  
}

.agre-gati-button:hover {  
  background: #66fcf1;  
  color: #0b0c10;  
}

/* Hidden Clue Styles */  
.hidden-clue {  
  color: rgba(226, 232, 240, 0.2); /* Use theme's light gray, with low opacity */  
  cursor: pointer;  
  transition: color 0.3s ease;  
  font-style: italic;  
}  
.hidden-clue:hover {  
  color: rgba(226, 232, 240, 0.6); /* Slightly more visible on hover */  
}  
.hidden-clue.revealed {  
  color: rgba(226, 232, 240, 0.9); /* Fully visible when revealed */  
  cursor: default;  
  font-style: normal;  
}