/* HTML background to prevent white flash */
html {
    background-color: #0f1419; /* Matches the darkest part of your body's gradient */
}

/* Font Definitions */
body {
    font-family: 'Montserrat', sans-serif; /* Smaller text */
    opacity: 0; /* Initially hidden */
    transition: opacity 1.5s ease-in-out; /* Smooth fade-in duration */
}

h1, h2, h3, h4, h5, h6,
.font-cinzel,
.navbar-brand { /* Apply to headers and specific larger/important text elements */
    font-family: 'Cinzel Decorative', serif;
}

/* Overall Page Width */
.container-overall {
    max-width: 1600px; /* Increased width */
    margin: 0 auto; /* Center the container */
    padding: 0; /* Remove default container padding if necessary */
}

/* Custom Background and Card Styles */
.fantasy-bg {
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d1b3d 50%, #1a2332 75%, #0f1419 100%);
    min-height: 100vh;
    color: #e2e8f0; /* Default text color for the body to match slate-100 */
}

.fantasy-card {
    background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    border: 2px solid #64748b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added opacity to transition */
}

/* Original hover effect for sealed realms (now all cards by default) */
.fantasy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    border-color: #94a3b8;
}

/* New "Zoom" hover effect for non-sealed realms */
.fantasy-card.active-realm:hover {
    transform: scale(1.02); /* Slightly zoom in */
    border-color: #a78bfa; /* Purplish glow on border for active */
    box-shadow: 0 0 25px rgba(167, 139, 250, 0.7); /* Purplish glow shadow */
}

/* Sealed Realms Opacity */
.fantasy-card.coming-soon {
    opacity: 0.7; /* Increased opacity slightly from 0.6 */
    filter: grayscale(0.3);
    /* pointer-events: none; -- REMOVED to re-enable hover effect */
}

/* Dice Animation */
.dice-animation {
    animation: float 3s ease-in-out infinite;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Smooth transition for hover effects */
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.dice-animation {
    filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.7)); /* A subtle glow on hover */
}

.dice-animation:hover {
    filter: drop-shadow(0 0 20px rgb(147, 197, 253, 1)); /* A subtle glow on hover */
}

/* Custom Border Styles */
.fantasy-border {
    background: linear-gradient(45deg, #64748b, #94a3b8, #64748b);
    padding: 2px;
    border-radius: 0.5rem;
}

.fantasy-border-inner {
    background: #1e293b;
    border-radius: 0.375rem;
}

/* Gradient Colors */
.bg-gradient-purple-magenta {
    background: linear-gradient(to right, #9333ea, #b473ff); /* from-purple-600 to-blue-600 */
}
.bg-gradient-emerald-teal {
    background: linear-gradient(to right, #059669, #14b8a6); /* from-emerald-600 to-teal-600 */
}

/* Specific header background for top section */
.header-bg-gradient {
    background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
}

/* Logo Glow Effect */
.logo-glow {
    filter: drop-shadow(0 0 10px rgba(113, 66, 255, 0.7)); /* Purplish glow */
    transition: filter 0.3s ease-in-out;
}
.logo-glow:hover {
    filter: drop-shadow(0 0 20px rgba(113, 66, 255, 1));
}

/* Bootstrap overrides and custom adjustments for aesthetic consistency */
.text-light { color: #e2e8f0 !important; } /* slate-100 */
.text-secondary { color: #cbd5e1 !important; } /* slate-300 */
.text-info { color: #93c5fd !important; } /* blue-400 */
.text-purple { color: #c084fc !important; } /* purple-400 */
.text-emerald { color: #34d399 !important; } /* emerald-400 */
.bg-warning { background-color: #fbbf24 !important; } /* amber-400 */
.text-dark { color: #1e293b !important; } /* dark text for badge */
.text-secondary-emphasis { color: #94a3b8 !important; } /* slate-400 for disabled buttons */

/* Responsive logo sizing */
.header-logo-size {
    height: 14rem; /* h-20 */
}

@media (max-width: 575.98px) { 
    .header-logo-size {
        height: 14rem; /* h-80 */
    }
    .font-cinzel {
        font-size: 1rem !important;
    }
}
@media (min-width: 576px) and (max-width: 1199.98px) { /* Small devices (sm) and up */
    .header-logo-size {
        height: 16rem; /* Adjusted for better visibility */
    }
    .font-cinzel {
        font-size: 1.2rem !important;
    }
}
@media (min-width: 1200px) and (max-width: 1599.98px) { /* Medium devices (md) and up */
    .header-logo-size {
        height: 18rem; /* Further adjustment for medium */
    }
    .font-cinzel {
        font-size: 1.4rem !important;
    }
}
@media (min-width: 1600px) { /* Large devices (lg) and up */
    .header-logo-size {
        height: 20rem; /* h-80 */
    }
    .font-cinzel {
        font-size: 1.6rem !important;
    }
}

/* Custom styles for app icon container */
.app-icon-container {
    width: 4rem; /* Fixed width */
    height: 4rem; /* Fixed height */
    flex-shrink: 0; /* Prevent shrinking */
}