/* Custom Styles for The Final Echoes */

/* Cosmic Nebula Background */
.background-nebula {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 50%, rgba(30, 0, 50, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(0, 40, 50, 0.5) 0%, transparent 40%),
                radial-gradient(circle at 50% 10%, rgba(50, 20, 0, 0.4) 0%, transparent 40%),
                #1a1a2e; /* Dark cosmic base */
    background-size: 200% 200%;
    animation: moveNebula 30s infinite alternate ease-in-out;
    z-index: -1;
    opacity: 0.8;
}

@keyframes moveNebula {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Base Styles (Tailwind handles most, but some custom fonts/scrolls here) */
body {
    font-family: 'Spectral', serif;
    /* Tailwind takes care of bg, text-color, min-h-screen, flex, flex-col */
}

h1, h2 {
    font-family: 'Cinzel Decorative', serif;
}

/* Custom Scrollbar (for webkit browsers) */
/* Apply to elements that scroll, e.g., the main content area with overflow-y-auto */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #2d3748; /* bg-gray-700 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #319795; /* bg-teal-600 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2c7a7b; /* bg-teal-700 */
}

/* Fade-in animation for sections/cards */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Status Messages - Base (Tailwind classes will override specific colors) */
.status-message {
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    margin-bottom: 1.5rem; /* mb-6 */
    font-size: 0.875rem; /* text-sm */
}

.success-message {
    background-color: #2f855a; /* Tailwind bg-green-700 */
    color: #f7fafc; /* Tailwind text-gray-100 */
}

.error-message {
    background-color: #c53030; /* Tailwind bg-red-700 */
    color: #f7fafc; /* Tailwind text-gray-100 */
}

.info-message {
    background-color: #2b6cb0; /* Tailwind bg-blue-700 */
    color: #f7fafc; /* Tailwind text-gray-100 */
}

.warning-message {
    background-color: #dd6b20; /* Tailwind bg-orange-600 */
    color: #f7fafc; /* Tailwind text-gray-100 */
}

/* Custom class for active navigation button */
.nav-btn.active {
    @apply bg-teal-600 text-white; /* Tailwind applies these styles directly */
}