/* --- Root Variables (Your Midnight Sky Color Palette) --- */
:root {
    --primary-bg: #1B263B; /* Deep Midnight Blue */
    --text-color: #D0D0D0; /* Soft Light Grey */
    --accent-blue-1: #415A77; /* Muted Cerulean/Steel Blue (Headings) */
    --accent-blue-2: #778DA9; /* Dusty Blue/Slate Blue (Dividers, Secondary) */
    --highlight-accent: #ADD8E6; /* Light Sky Blue (Interactive/Emphasis) */

    /* Font Families */
    --font-heading: 'Raleway', sans-serif;
    --font-body: 'Source Sans Pro', sans-serif; /* Or 'Montserrat', sans-serif; */
}

/* --- Global Styles & Body --- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--primary-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for macOS Firefox */
    overflow-x: hidden; /* Prevent horizontal scroll on small screens */
}

/* Basic box-sizing for consistent layout across elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Main Header (H1 and Profile Pic) --- */
.main-header {
    text-align: center;
    padding: 60px 20px 0; /* Adjusted padding */
    background-color: var(--primary-bg); /* Ensure header background matches body */
}

.main-header h1 {
    font-family: var(--font-heading);
    color: var(--highlight-accent); /* Use highlight color for main title */
    font-size: 2.8em;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.divider {
    width: 80px; /* Small line under the name */
    height: 2px;
    background-color: var(--accent-blue-2);
    margin: 10px auto 30px; /* Center the divider */
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Make it circular */
    object-fit: cover; /* Ensure image covers the area without distortion */
    border: 2px solid var(--accent-blue-2); /* A subtle border */
    box-shadow: 0 0 15px rgba(173, 216, 230, 0.3); /* Soft glow matching highlight color */
    margin-bottom: 50px; /* Space below the picture */
}

/* Optional: Smaller Profile Pic for Sub-pages */
.header-profile-pic-small {
    width: 180px;
    height: 180px;
    margin-top: 30px;
    margin-bottom: 40px;
    border-width: 1px;
}

/* --- Navigation Menu Styles --- */
.main-nav {
    margin-top: 40px;
    margin-bottom: 60px;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    text-decoration: none;
    color: var(--accent-blue-2);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.1em;
    padding: 8px 12px;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--primary-bg);
    background-color: var(--highlight-accent);
}

/* --- Main Content Sections --- */
main {
    max-width: 900px; /* Max width for main content */
    margin: 0 auto; /* Center the main content */
    padding: 20px;
}

.section-content {
    background-color: var(--accent-blue-1); /* Section background */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Deeper shadow */
    margin-bottom: 60px; /* Space between sections */
    position: relative; /* For vertical divider positioning */
}

h2 {
    font-family: var(--font-heading);
    color: var(--highlight-accent);
    font-size: 2em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

p {
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color);
    text-align: justify; /* Justify text for a clean look */
    line-height: 1.7;
    margin-bottom: 1.5em;
}

/* Vertical divider for 'About Me' section */
.vertical-divider {
    position: absolute;
    left: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 80%; /* Takes up 80% of section height */
    background-color: var(--accent-blue-2);
}

/* --- Gaming Preferences Section --- */
.gaming-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 700px; /* Constrain list width */
}

.gaming-list li {
    background-color: var(--primary-bg); /* Background for list items */
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: flex-start; /* Align items to the top */
    color: var(--text-color);
    font-size: 1.05em;
    font-family: var(--font-body);
}

.gaming-list li:last-child {
    margin-bottom: 0;
}

.gaming-list li .icon {
    font-size: 1.4em;
    color: var(--highlight-accent);
    margin-right: 15px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* --- Steam Section --- */
.steam-embed-container {
    background-color: var(--primary-bg);
    padding: 30px;
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4); /* Inner shadow */
    display: flex;
    justify-content: center; /* Center the embed */
    align-items: center;
    min-height: 300px; /* Ensure some height even if embed fails */
    overflow: hidden; /* Hide anything that overflows */
}

.steam-embed-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Footer --- */
.main-footer {
    text-align: center;
    padding: 40px 20px;
    color: var(--accent-blue-2);
    font-family: var(--font-body);
    font-size: 0.9em;
    margin-top: 60px;
    border-top: 1px solid rgba(119, 141, 169, 0.1);
}

.social-links a {
    color: var(--accent-blue-2);
    font-size: 1.5em;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--highlight-accent);
}

/* --- Server Guide Specific Styles (for server-guide.html) --- */
.server-guide-section p {
    font-size: 1.1em;
    margin-top: 1.5em;
    color: var(--text-color);
}

.game-guide-section {
    padding: 60px 0;
    border-bottom: 1px solid rgba(119, 141, 169, 0.1); /* Subtle divider between game guides */
}

.game-guide-section:last-of-type {
    border-bottom: none; /* No border for the last section */
}

.game-guide-section h3 {
    color: var(--highlight-accent); /* Highlight color for game titles */
    text-align: center;
    margin-bottom: 1.2em;
    font-size: 1.8em;
}

.game-guide-section ol {
    list-style: decimal; /* Numbered list for steps */
    text-align: left;
    max-width: 600px;
    margin: 1.5em auto 2.5em;
    padding-left: 25px; /* Indent for numbers */
    color: var(--text-color);
}

.game-guide-section ol li {
    margin-bottom: 0.8em;
    line-height: 1.6;
    font-size: 1.05em;
}

/* NEW: Styles for the main image in each section (e.g., corekeeper-main.png) */
.section-main-image {
    max-width: 80%; /* Slightly reduced from 90% to make it less dominant */
    height: auto; /* Crucial for maintaining aspect ratio */
    display: block; /* Makes it take its own line */
    margin: 25px auto 40px auto; /* Center image with generous top/bottom margin */
    border-radius: 8px; /* Consistent rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Slightly stronger shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: zoom-in; /* Indicate it's clickable */
}

.section-main-image:hover {
    transform: translateY(-5px) scale(1.01); /* Lift and slightly enlarge on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Styles for multiple screenshots within the container */
.screenshot-container {
    display: flex;
    flex-wrap: wrap; /* Allows screenshots to wrap to the next line */
    justify-content: center; /* Centers screenshots horizontally */
    gap: 30px; /* Increased space between screenshots */
    margin-top: 2.5em;
    padding: 0 10px;
    align-items: flex-start; /* Aligns items to the top if they have different heights */
}

.screenshot-container img {
    /* Adjusted flex-basis for more flexible sizing. This targets a base width of 300px,
       allowing 1, 2, or 3 images per row depending on screen size and image content. */
    flex: 1 1 300px; /* Grow, Shrink, Basis */
    max-width: 100%; /* Ensure images don't overflow their container */
    height: auto; /* Maintain aspect ratio - CRITICAL for readability and avoiding distortion */
    border: 2px solid var(--accent-blue-2); /* Subtle border for screenshots */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: contain; /* Ensures the whole image is visible, no cropping */
    cursor: zoom-in; /* Indicate it's clickable */
}

.screenshot-container img:hover {
    transform: translateY(-5px); /* Lift slightly on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* --- Image Modal Styles --- */
.image-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 50px; /* Location of the box (from the top) */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    backdrop-filter: blur(5px); /* Optional: blur background for modern browsers */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
}

/* Modal Content (The Image) */
.modal-content {
    margin: auto;
    display: block;
    max-width: 72vw; /* Reduced from 90vw by 20% */
    max-height: 72vh; /* Reduced from 90vh by 20% */
    object-fit: contain; /* Ensures the whole image is visible, no cropping */
    border: 3px solid var(--highlight-accent); /* A border that matches your theme */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(173, 216, 230, 0.4); /* Stronger glow for enlarged image */
    animation: zoomIn 0.3s ease-out; /* Simple animation for appearance */
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: var(--text-color);
    padding: 10px 0;
    height: 150px; /* Give it some space */
    font-size: 1.1em;
    font-family: var(--font-body);
}

/* The Close Button */
.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--text-color);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above the modal image */
}

.close-button:hover,
.close-button:focus {
    color: var(--highlight-accent);
    text-decoration: none;
    cursor: pointer;
}

/* Animation for the modal content */
@keyframes zoomIn {
    from {transform: scale(0.7); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* Optional: Prevent scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    main {
        padding: 15px;
    }

    .section-content {
        padding: 30px;
        margin-bottom: 40px;
    }

    h2 {
        font-size: 1.8em;
    }

    p {
        font-size: 0.95em;
    }
}

@media (max-width: 768px) {
    .main-header {
        padding-top: 40px;
    }

    .main-header h1 {
        font-size: 2.2em;
    }

    .profile-pic {
        width: 150px;
        height: 150px;
        margin-bottom: 30px;
    }

    .main-nav {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .main-nav li {
        margin: 0 10px;
    }

    .main-nav a {
        font-size: 1em;
        padding: 6px 10px;
    }

    main {
        padding: 10px;
    }

    .section-content {
        padding: 25px;
        margin-bottom: 30px;
    }

    h2 {
        font-size: 1.6em;
    }

    .gaming-list li {
        padding: 10px 15px;
    }

    .gaming-list li .icon {
        font-size: 1.2em;
        margin-right: 10px;
    }

    .steam-embed-container {
        padding: 20px;
        min-height: 250px;
    }

    /* Server Guide Specific adjustments */
    .game-guide-section {
        padding: 40px 0;
    }

    .game-guide-section h3 {
        font-size: 1.6em;
    }

    .section-main-image {
        max-width: 90%; /* Allow larger on smaller screens */
        margin: 20px auto 30px auto;
    }

    .screenshot-container {
        gap: 20px;
    }

    .screenshot-container img {
        flex: 1 1 100%; /* Stack screenshots vertically on smaller screens */
        min-width: unset; /* Remove min-width override when stacking */
    }

    .modal-content {
        max-width: 95vw; /* Revert to a larger size on mobile for better viewing */
        max-height: 95vh;
    }

    .close-button {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2em; /* Further reduce heading size for mobile */
    }

    h2 {
        font-size: 1.5em;
    }

    .section-content {
        padding: 20px; /* Less vertical padding on smaller screens */
    }

    .section-content p {
        font-size: 0.9em;
    }

    .vertical-divider {
        display: none; /* Hide vertical divider on smaller screens to save space */
    }

    .gaming-list {
        text-align: center; /* Center list items for better mobile layout */
        max-width: 100%; /* Allow list to take full width */
    }

    .gaming-list li {
        padding-left: 0; /* Remove padding if icons are centered or removed */
        position: static; /* Reset positioning */
    }

    .gaming-list li .icon {
        display: block; /* Make icon appear on its own line above text */
        margin-bottom: 5px;
        position: static;
    }

    .main-header {
        padding-top: 40px;
    }

    .steam-embed-container {
        padding: 15px; /* Reduce padding for the embed container */
        min-height: 200px;
    }
}