/* Base System Reset Protocols */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "MS Sans Serif", Arial, sans-serif;
    background-color: #690808; /* Red */
    color: #000;
    padding-top: 70px; /* Forces page content to sit under the top navigation bar */
}

/* 1. Header Layout Rules */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #000000; /* Absolute black top display container */
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw; /* Scales horizontal padding with window width */
    z-index: 1000;
}

.site-title {
    font-size: 1.4rem;
    font-weight: bold;
}

/* 2. Menu Navigation Interactions */
.menu-container {
    position: relative;
    display: inline-block;
}

.menu-toggle {
    background-color: #c0c0c0; /* Retro gray button block background color */
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff; /* Classic 3D raised border shadow style */
    color: #000;
    font-size: 20px;
    padding: 2px 10px;
    cursor: pointer;
}

.menu-toggle:active {
    border-color: #808080 #fff #fff #808080; /* Sunken button click physical simulation */
}

/* Dropdown list hidden until user hovers the container menu area */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    flex-direction: column;
}

.dropdown-menu.active {
    display: flex;
}


.dropdown-menu a {
    color: #000;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid #808080;
}

.dropdown-menu a:hover {
    background-color: #000080; /* Dark blue retro select accent highlighted color */
    color: #fff;
}

/* Update the Main Page Flex container into a Two-Column CSS Grid */
.content-container {
    width: 100%;
    max-width: 95vw; /* Scales cleanly with extreme wide viewports */
    margin: 20px auto;
    padding: 0 2vw;
    display: grid;
    /* Replaced fixed 1400px/350px with proportional fractional layout space */
    grid-template-columns: 4fr 1.5fr; 
    justify-content: space-between;
    gap: 3vw;
}

/* Let the left column stack its internal boxes natively */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%; /* Spans full proportional width allocated by the grid above */
}

/* 1 & 4. Black Sidebar Box stretching to the bottom limit of the view */
/* Base Desktop Sidebar Ruleset - Only targets the main layout instance */
main .right-navigation-bar {
    background-color: #000000;
    border: 2px solid #ffffff;
    padding: 15px;
    width: 100%;
    height: calc(100vh - 110px); 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* New Rule: Keeps the mobile copy completely invisible on desktop resolutions */
nav .right-navigation-bar {
    display: none;
}

/* 2. Image Frame with Smart Cropping and Auto-Fit properties */
.sidebar-image-frame {
    width: 100%;                  /* Lets it expand fluidly with the layout column */
    max-width: 350px;             /* Caps the container width at your ideal 350px limit */
    aspect-ratio: 1 / 1;          /* Locks it into a perfect retro square shape natively */
    margin: 0 auto;               /* Keeps the entire square centered in the black block */
    background-color: #333;       /* Dark fallback block color if image is missing */
    border: 1px solid #444;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-image-frame img {
    width: 100%;                  /* Forces the image to fill the fluid square container */
    height: 100%;
    object-fit: cover;            /* Crops clean into frame without pulling proportions */
}

/* 3. Centered Typography Containers */
.sidebar-text-group {
    text-align: center;
    color: #ffffff; /* Forces all interior sub-elements to pure white layout */
}

.sidebar-headline {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.sidebar-subtext {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* 4. Geocities Scrolling Banner Image Area */
.sidebar-scroll-zone {
    flex-grow: 1; /* Automatically stretches to take up remaining height */
    background-color: #111; /* Slightly lighter black tone for visual layer break */
    border: 1px solid #333;
    padding: 10px;
    overflow-y: auto; /* Vertically scrollable when content overflows standard box */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Adds uniform spacing gaps natively between linked images */
}

/* Ensure retro banner button links style properly inside the column */
.sidebar-scroll-zone a {
    display: inline-block;
    max-width: 100%;
}

.sidebar-scroll-zone img {
    display: block;
    max-width: 100%;
    height: auto; /* Maintains proportional scaling for individual link items */
}

/* 4. Retro Window Object Frames */
.win98-box {
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 3px;
    display: flex;
    flex-direction: column;
}

.win98-title-bar {
    background: linear-gradient(90deg, #000000, #000000, #444444); /* Black to gray. */
    color: #fff;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 0.9rem;
}

.win98-body {
    background-color: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080; /* Recessed interior panel simulation */
    padding: 15px;
    margin-top: 3px;
    font-size: 0.65rem;
    word-break: break-word; /* Prevents long titles or URLs from blowing up box columns */
    overflow-wrap: anywhere;
}

/* Scroll area limits applied directly to changelog content panel */
.win98-body.scrollable {
    height: 30vh; /* Scaled relative to the height of the window */
    overflow-y: scroll;
}

/* Responsive Mobile Layout Override Breakpoints */
@media (max-width: 950px) {
    /* 1. Turns the 2-column desktop grid into a single-column layout stack */
    .content-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    
    .left-column {
        width: 100%;
    }

    /* 2. Keeps the sidebar visible on the website but scales it fluidly under text boxes */
    .right-navigation-bar {
        width: 100%;
        height: auto; /* Fixes the massive desktop layout stretch bug on mobile screens */
        padding: 15px;
    }

    /* 3. Reconfigures the mobile dropdown container overlay details natively */
    .dropdown-menu {
        position: fixed;
        top: 50px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 50px);
        background-color: #c0c0c0;
        overflow-y: auto;
    }

    /* Displays the menu natively when active without touching or altering sidebar codes */
    .dropdown-menu.active {
        display: flex;
    }
}

/* Windows 98 Style Classic Hyperlinks */
.win98-body a {
    color: #0000ee; /* Classic internet blue */
    text-decoration: underline;
}

.win98-body a:visited {
    color: #551a8b; /* Vintage visited link purple */
}

/* ==========================================================================
   New Grid, Content Grid, & Character Layout Sub-Systems 
   ========================================================================== */

/* Left column modified to implement a strict 2x2 grid layout */
.left-column-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

/* 3-Column Scrollable Listing Workspace Layout */
.left-column-scroll-3col {
    display: grid;
    /* FIX: Prevents internal text scaling footprints from expanding the third column track */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
    /* Clips excess content vertically so your custom panel scroll rules engage */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-right: 5px;
}

/* Shared Thumbnail Box Component for Link Tiles */
.content-thumbnail-card {
    display: block;
    text-decoration: none;
    color: #000;
}

.content-thumbnail-card:hover .win98-title-bar {
    background: linear-gradient(90deg, #444444, #000000, #000000);
}

.content-image-wrapper {
    width: 100%; /* Stretches dynamically to match the container layout column size */
    aspect-ratio: 1 / 1; /* Maintains a perfect retro square shape natively without fixed px sizes */
    background-color: #000;
    border: 1px solid #808080;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
}

.content-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-card-label {
    text-align: center;
    font-size: 0.85rem;
    font-weight: bold;
}

/* Download Engine Panel Specifics */
.download-showcase-frame {
    width: 100%;
    max-width: 100%; /* Removes old 400px restriction */
    aspect-ratio: 8 / 5; /* Maintains proportional 400x250 scale dynamically */
    margin: 15px auto;
    border: 2px solid #808080;
    background-color: #000;
    overflow: hidden;
}

.download-showcase-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.download-action-row {
    display: flex;
    justify-content: center;
    margin: 20px 0 10px 0;
}

/* Native Win98 Call To Action Download Buttons */
.win98-download-btn {
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    color: #000;
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.8vh 2.5vw; /* Scales button padding fluidly with window dimensions */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.win98-download-btn:active {
    border-color: #808080 #fff #fff #808080;
    /* Shifts padding slightly on click while respecting fluid scaling constraints */
    padding: calc(0.8vh + 1px) calc(2.5vw - 1px) calc(0.8vh - 1px) calc(2.5vw + 1px);
}

/* Responsive Mobile Ruleset Extensions */
@media (max-width: 60rem) { /* Converted fixed 950px breakpoint to a fluid rem-based bound */
    .left-column-grid-2x2 {
        grid-template-columns: 1fr;
    }
    .left-column-scroll-3col {
        grid-template-columns: 1fr;
        max-height: none;
    }
}