/* --- Styles for the page background (copied from index-style.css) --- */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--bg-color); /* Fallback color */
    color: var(--text-color); /* Use variable */

    /* Assumes you have a GIF at this path in your repo */
    background-image: url('../images/treeflo-background.gif');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}

/* This pseudo-element creates the translucent overlay */
body::before {
    content: '';
    position: fixed; /* Covers the entire viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Sits behind the main content but over the GIF */
    background-color: var(--bg-color); /* Base color from theme */
    opacity: 0.8; /* Adjust transparency here (0.9 = 90% opaque) */
}


/* --- Styles for the characters page --- */
main {
    padding: 20px;
    transition: margin-left 0.3s ease;
}

main.shifted {
    margin-left: 250px;
}

.content-container {
    width: 100%;
    max-width: 1200px; /* Or whatever max-width you prefer */
    margin: 0 auto;
    text-align: center;
}

/* --- UPDATED HEADER STYLE --- */
.content-container h1 {
    font-family: 'Cinzel', serif;
    font-size: 3.5em; /* Adjusted font size */
    letter-spacing: 5px; /* Added letter spacing for style */
    text-shadow: 0 1px 5px var(--bg-color); /* Added text shadow for depth */
    margin-bottom: 40px; /* Kept existing margin */
    padding-bottom: 0; /* Removed the old border */
    border-bottom: none; /* Removed the old border */
    display: block; /* Changed from inline-block */
}

/* --- Character Card Grid --- */
.card-grid {
    display: grid;
    /* --- UPDATED --- */
    /* Increased minmax value to favor 4 columns instead of 5 on larger screens */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px; /* Slightly increased gap for better spacing */
    justify-items: center;
}

/* --- Character Card Styling --- */
.character-card {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--sidebar-bg);
    border: 2px solid var(--separator-color);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    /* --- UPDATED --- */
    max-width: 260px; /* Allows the card to be a bit larger */
}

.character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-image {
    background-color: var(--bg-color);
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

.card-name {
    font-weight: bold;
    text-align: center;
    padding: 8px;
    margin: 10px 15px 5px; /* Margin top/bottom, left/right */
    background-color: var(--bg-color);
    border: 1px solid var(--separator-color);
    border-radius: 8px;
}

.card-description {
    padding: 0 15px 15px;
    font-size: 0.9em;
}

/* This media query is now effectively redundant due to auto-fill, but we can keep it */
@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 600px) {
    .card-grid {
        /* On very small screens, go to 2 columns */
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
     main.shifted {
        margin-left: 0;
    }
}