/* ================================ */
/* SECTION: Changelog Modal – Overlay & Backdrop */
/* ================================ */
/*
 * Purpose: Full-screen overlay that centers the modal content
 * - Fixed positioning covers entire viewport
 * - Semi-transparent dark backdrop with blur effect
 * - High z-index ensures it sits above game UI
 * - Hidden by default, shown via .show class
 * - Smooth fade-in/out transition
 */
#changelogModal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    overflow-y: auto;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease-out;
}

#changelogModal.show {
    display: grid;
    opacity: 1;
}

/* ================================ */
/* SECTION: Modal Content Container */
/* ================================ */
/*
 * Purpose: Main scrollable box for changelog
 * - Responsive width/height with max limits
 * - Flex column layout for sticky header + scrollable content
 * - Inherited background and border from theme
 * - Rounded corners and subtle shadow
 * - Prevents overflow outside modal bounds
 */
#changelogModal .modal-content {
    position: relative;
    width: min(90vw, 820px);
    max-height: 90vh;
    margin: 2rem auto;
    padding: 0;
    border-radius: 10px;
    background: inherit;
    border: 1px solid currentColor;
    opacity: 0.96;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: inherit;
    font-weight: normal;
}

/* ================================ */
/* SECTION: Sticky Modal Header – Title + Close Button */
/* ================================ */
/*
 * Purpose: Fixed header that stays visible while scrolling content
 * - Title and close button on same row (flex layout)
 * - Larger, centered title with accent color
 * - Close button far right, larger hit area
 * - Subtle bottom border + shadow for "floating" effect
 * - Uses position: sticky (supported in all modern browsers)
 */
.modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(30, 30, 46, 0.65);     /* Semi-transparent dark – adjust opacity 0.5–0.8 */
    backdrop-filter: blur(12px);            /* Blurs content scrolling behind */
    -webkit-backdrop-filter: blur(12px);    /* Safari support */
    padding: 1.4rem 2.2rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    
    /* Flex row layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h1 {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 600;
    color: #4cc9f0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-align: center;
    flex: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Slight shadow for readability on blur */
}

.close-button {
    background: transparent;
    border: none;
    font-size: 2.6rem;
    line-height: 1;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease;
    padding: 0.5rem;
}

.close-button:hover,
.close-button:focus {
    opacity: 1;
    transform: scale(1.15);
}

/* ================================ */
/* SECTION: Scrollable Changelog Content */
/* ================================ */
/*
 * Purpose: Area containing all version history
 * - Fills remaining space after header
 * - Gets scrollbar only when content overflows
 * - Padding for breathing room
 * - Custom scrollbar styling to match dark theme
 */
.changelog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 2.2rem;
    padding-top: 0.5rem;
}

/* Custom scrollbar (WebKit browsers) */
.changelog-content::-webkit-scrollbar {
    width: 8px;
}

.changelog-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.changelog-content::-webkit-scrollbar-thumb {
    background: #4cc9f0;
    border-radius: 4px;
}

/* Firefox scrollbar */
.changelog-content {
    scrollbar-width: thin;
    scrollbar-color: #4cc9f0 rgba(0, 0, 0, 0.3);
}

/* ================================ */
/* SECTION: Version Heading Styles */
/* ================================ */
/*
 * Purpose: Consistent styling for <h2> version titles
 * - Medium weight, slightly smaller than h1
 * - Bottom border for visual separation
 * - Generous top margin from previous section
 */
#changelogModal .changelog-content h2 {
    font-weight: 500;
    font-size: 1.35rem;
    margin: 2.5rem 0 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid currentColor;
    opacity: 0.92;
}

/* ================================ */
/* SECTION: List Item Styling */
/* ================================ */
/*
 * Purpose: Makes changelog list items lighter and less dominant
 * - Normal weight, slightly smaller size
 * - Reduced opacity for subtlety
 * - Consistent spacing and line height
 */
#changelogModal .changelog-content li {
    font-weight: normal;
    font-size: 0.856em;
    opacity: 0.80;
    margin: 0.3rem 0;
    line-height: 1.4;
    color: #d0d0d8; /* ← duller grey-white (adjust as needed) */
}

/* ================================ */
/* SECTION: Nested List Indentation */
/* ================================ */
/*
 * Purpose: Forces visible indentation for sub-bullets
 * - Overrides any reset styles that collapse margins
 * - Uses disc bullets for second level
 * - Adjustable indent depth
 */
#changelogModal .changelog-content li > ul,
#changelogModal .changelog-content li ul {
    margin-left: 2.2em !important;
    padding-left: 1.2em !important;
    list-style-type: disc !important;
    margin-top: 0.35em !important;
    margin-bottom: 0.5em !important;
}

#changelogModal .changelog-content li > ul li {
    margin-bottom: 0.2em;
}



/* ================================ */
/* SECTION: Scrollbar Styling – Neutral white/gray appearance */
/* ================================ */
/*
 * Purpose: Custom scrollbar styling to match the frosted glass aesthetic
 * - Replaces the default blue accent with neutral white/gray tones
 * - Consistent styling across WebKit and Firefox browsers
 * - Subtle hover state for better interactivity
 */

/* WebKit (Chrome, Safari, Edge) */
.changelog-content::-webkit-scrollbar-thumb {
    /* Purpose: Scrollbar thumb appearance */
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.changelog-content::-webkit-scrollbar-thumb:hover {
    /* Purpose: Hover state brightness increase */
    background: rgba(255, 255, 255, 0.55);
}

/* Firefox */
.changelog-content {
    /* Purpose: Firefox scrollbar colour configuration */
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(0, 0, 0, 0.3);
}


/* ================================ */
/* SECTION: Modal Header Title – Heavy shadow project name display */
/* ================================ */
/*
 * Purpose: Main project title styling with multi-layer depth shadow
 * - **Overrides** existing blue h1 styles with !important flags
 * - Large typography (3.2rem) for prominent branding
 * - Multi-layer text-shadow creates 3D "lifted" effect
 * - High contrast white text for readability on dark backgrounds
 */
.modal-header .project-title {
    /* Purpose: Reset margins and sizing */
    margin: 0;
    margin-bottom: 0.25em !important;
    font-size: 3.2rem !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    
    /* Purpose: Force white text colour overriding existing blue */
    color: rgba(255, 255, 255, 0.98) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    
    /* Purpose: Heavy multi-layer shadow stack for depth */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 255, 255, 0.2) !important;
}


/* ================================ */
/* SECTION: Modal Header Subtitle – Pill-shaped changelog label */
/* ================================ */
/*
 * Purpose: "Changelog" subtitle styling as a pill badge
 * - **Uppercase** with wide letter-spacing for visual distinction
 * - Semi-transparent background with subtle border
 * - Centered beneath the project title
 * - Text shadow for depth consistency with title
 */
.modal-header .changelog-subtitle {
    /* Purpose: Typography and casing */
    font-size: 1.0rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    
    /* Purpose: Colour and transparency */
    color: rgba(255, 255, 255, 0.5) !important;
    
    /* Purpose: Pill-shaped container styling */
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    
    /* Purpose: Depth shadow for consistency */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}


/* ================================ */
/* SECTION: Header Branding Container – Flex layout for centered title stack */
/* ================================ */
/*
 * Purpose: Flexbox container for project title and subtitle alignment
 * - **Vertical stacking** with column direction
 * - Perfect centering using align-items and text-align
 * - Flexible grow to fill available header space
 * - Consistent gap spacing between title and subtitle
 */
.header-branding {
    /* Purpose: Flex container setup */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    
    /* Purpose: Layout fill */
    flex: 1;
}