/* --- Root Colors & Basic Setup --- */
:root { 
    --gold: #d4af37; 
    --mystic-purple: #1d0d2e; 
    --deep-blue: #080e1c;
}

body { 
    background-color: var(--mystic-purple);
    background-image: 
        /* --- Layer 1: Fine White Specks (9 Stars) --- */
        radial-gradient(1px 1px at 20px 50px, #ffffff, transparent),
        radial-gradient(1.1px 1.1px at 150px 10px, #ffffff, transparent),
        radial-gradient(1px 1px at 280px 180px, #ffffff, transparent),
        radial-gradient(1px 1px at 80px 250px, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 320px 80px, #ffffff, transparent),
        radial-gradient(1px 1px at 120px 320px, #ffffff, transparent),
        radial-gradient(1.1px 1.1px at 40px 130px, #ffffff, transparent),
        radial-gradient(1px 1px at 200px 360px, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 350px 240px, #ffffff, transparent),

        /* --- Layer 2: Fine Gold Specks (9 Stars) --- */
        radial-gradient(1px 1px at 50px 150px, #ffd700, transparent),
        radial-gradient(1.2px 1.2px at 220px 40px, #ffd700, transparent),
        radial-gradient(1px 1px at 110px 280px, #ffd700, transparent),
        radial-gradient(1px 1px at 300px 350px, #ffd700, transparent),
        radial-gradient(1.2px 1.2px at 180px 200px, #ffd700, transparent),
        radial-gradient(1px 1px at 350px 300px, #ffd700, transparent),
        radial-gradient(1px 1px at 10px 380px, #ffd700, transparent),
        radial-gradient(1.3px 1.3px at 260px 110px, #ffd700, transparent),
        radial-gradient(1px 1px at 380px 50px, #ffd700, transparent);
    
    background-size: 383px 401px, 409px 383px; 
    
    min-height: 100vh;
    color: white; 
    font-family: 'Garamond', serif; 
    text-align: center; 
    margin: 0;
    padding: 0;
}

h1 { 
    color: var(--gold); 
    margin-top: 30px; 
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* --- Control Buttons (Top) --- */
.controls { 
    margin: 20px; 
}

button { 
    background: transparent; 
    border: 2px solid var(--gold); 
    color: var(--gold); 
    padding: 10px 20px; 
    cursor: pointer; 
    margin: 5px; 
    border-radius: 5px; 
    font-weight: bold;
    transition: 0.3s ease;
}

button:hover { 
    background: var(--gold); 
    color: var(--mystic-purple); 
}

/* --- Question Area --- */
#question-area {
    margin: 20px auto;
}

#user-question {
    padding: 10px;
    width: 280px;
    background: var(--deep-blue);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
}

/* --- The Card Deck Layout --- */
.deck { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin: 40px auto; 
    min-height: 250px; 
    flex-wrap: wrap; 
}

.card-container { 
    width: 140px; 
    opacity: 0; /* JS triggers animation to 1 */
    animation: dealCard 0.6s ease-out forwards; 
}

.card-img { 
    width: 100%; 
    border-radius: 8px; 
    border: 1px solid var(--gold); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
}

.reversed-card { 
    transform: rotate(180deg); 
}

.card-label { 
    color: var(--gold); 
    margin-top: 10px; 
    font-size: 0.9em; 
}

/* --- The Reading Text --- */
#reading-display { 
    max-width: 700px; 
    margin: 20px auto; 
    text-align: left; 
    padding: 20px; 
    border-top: 1px solid var(--gold); 
    min-height: 50px; 
    line-height: 1.6;
}

/* --- Action Buttons (Copy/PDF) --- */
.action-buttons { 
    display: none; /* Initially hidden, JS will set to 'flex' */
    justify-content: center; 
    gap: 10px; 
    margin-bottom: 50px; 
}

/* --- Animations & Shimmer --- */
@keyframes dealCard { 
    from { transform: translateY(20px); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

.loading-shimmer { 
    font-style: italic; 
    color: var(--gold); 
    animation: pulse 1.5s infinite; 
}

@keyframes pulse { 
    0% { opacity: 0.5; } 
    50% { opacity: 1; } 
    100% { opacity: 0.5; } 
}

/* --- Footer Styling --- */
.site-footer {
    max-width: 700px;
    margin: 80px auto 40px;
    padding: 20px;
    border-top: 1px solid var(--gold);
    font-size: 0.85em;
    opacity: 0.7;
    text-align: left;
}

.site-footer h3 {
    color: var(--gold);
    text-align: center;
}

/* Legal Disclaimer Box */
.disclaimer-box {
    margin-top: 30px;
    padding: 15px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 5px;
    background: var(--deep-blue);
}

.disclaimer-box strong {
    color: var(--gold);
    display: inline;
    margin-bottom: 5px;
}

.footer-links {
    text-align: center;
    margin-top: 20px;
}

.footer-links a {
    color: var(--gold);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.comments-wrapper {
    max-width: 700px; /* Matches your reading-display and footer */
    margin: 40px auto 80px; /* Centers it and adds space at the bottom */
    padding: 20px;
    background: rgba(22, 33, 62, 0.4); /* Subtle background to separate it from the sky */
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2); /* Very faint gold border */
    text-align: left; /* Ensures comment text is easy to read */
}

.mission-callout {
    max-width: 700px;
    margin: 30px auto;
    padding: 20px;
    background: rgba(212, 175, 55, 0.05); /* Even fainter glow */
    border: 1px solid rgba(212, 175, 55, 0.4); /* Softer gold border */
    border-radius: 8px;
    color: var(--gold);
    font-style: italic;
    font-weight: normal; /* Removes the bold */
    text-align: center;
    line-height: 1.5;
}