/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* --- Global Reset and Background --- */
body {
    /* Use the darker purple color from your existing site */
    background-color: #6A0DAD; 
    font-family: 'Courier New', Courier, monospace; /* Retro-style font */
    color: #000;
    margin: 0;
    padding: 0;
    min-height: 100vh; 
    display: flex; 
    justify-content: center;
}

/* --- Main Layout Container (Desktop) --- */
.main-container {
    display: flex; 
    max-width: 1200px; /* Max width for the entire site */
    margin: 20px auto; 
    background-color: white; /* Background for the column area */
}

/* --- Left & Right Sidebars --- */
.left-sidebar, .right-sidebar {
    width: 200px; /* Fixed width for sidebars */
    border: 5px solid black;
    border-top: none; 
    border-bottom: none;
    padding: 10px;
    box-sizing: border-box;
    background-color: white; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    gap: 15px; 
    padding-top: 20px;
}

.left-sidebar {
    border-right: none; 
}

.right-sidebar {
    border-left: none;
    gap: 30px; 
    padding-top: 50px;
}

/* Sidebar Separator */
hr {
    width: 80%;
    border: 2px solid black;
    margin: 5px 0;
}

/* --- Sidebar Character/Show Links (Left) --- */
.character-link {
    width: 90%;
    text-align: center;
}

.character-link img {
    max-width: 100%;
    height: auto;
    display: block; 
    border: 3px solid black; 
}

.character-link a:hover img {
    border-color: red; 
}

/* --- Right Navigation Icons --- */
.nav-icon img {
    width: 64px; 
    height: auto;
    display: block;
}

/* --- Main Page Content --- */
.page-content {
    flex-grow: 1; 
    border: 5px solid black;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
}

/* --- Headings and Titles --- */

header {
    text-align: center; /* Centers everything inside the header */
    border-bottom: 5px solid black; /* Moves the black line from the sketch to the container */
    padding-bottom: 20px;
    margin-bottom: 20px;
}

header img {
    /* Adjust this percentage to make it as small as you like */
    max-width: 50%; 
    height: auto;
    display: inline-block; /* Works with text-align: center on the parent */
}

.home-title {
    font-size: 5em;
    text-align: center;
    margin: 20px 0;
    color: black; 
}

/* --- Content Area Layout --- */
.content-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.purple-blob-box {
    width: 40%;
}

.alternate-title {
    margin-top: 15px;
    margin-bottom: 5px;
}

/* --- Desktop Footer --- */
.desktop-footer {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 40px;
}

/* --- Windows 98 Info Box Style --- */
.info-window {
    width: 60%;
    /* Windows 98 3D border effect */
    border: 3px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    box-shadow: 2px 2px 0 0 #888;
}

.window-title-bar {
    background-color: #000080; /* Windows 98 blue */
    color: white;
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    cursor: default;
    border-bottom: 1px solid #000;
}

.close-button {
    background-color: #C0C0C0;
    color: black;
    /* 3D button effect */
    border: 2px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    padding: 0 5px;
    line-height: 1;
}

.window-content {
    background-color: #C0C0C0; /* Windows 98 grey */
    padding: 10px;
    min-height: 200px;
}

.window-content ul {
    list-style-type: none;
    padding-left: 0;
}


/* --- MOBILE COMING SOON SECTION (Hidden by default) --- */
.mobile-coming-soon {
    display: none; 
    width: 100%;
    text-align: center;
    background-color: black;
    padding: 20px 0;
    margin-top: 20px;
    order: 3;
}

.mobile-coming-soon-header {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
}

.coming-soon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 10px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 3px solid black;
    aspect-ratio: 1 / 1; 
}

.grid-item img {
    max-width: 80%;
    max-height: 80%;
    display: block;
}

/* Background colors for grid items (from your teaser image) */
.blue-bg { background-color: #007bff; }
.lightblue-bg { background-color: #00c0ff; }
.orange-bg { background-color: #ff8c00; }
.white-bg { background-color: white; }


/* --- MOBILE FOOTER (Hidden by default) --- */
.mobile-footer {
    display: none;
}


/* ======================================================= */
/* --- MEDIA QUERY FOR MOBILE SCREENS (768px or less) --- */
/* ======================================================= */
@media (max-width: 768px) {
    
    /* --- Main Layout Adjustments --- */
    .main-container {
        flex-direction: column; 
        width: 100%; 
        margin: 0; 
        border: none; 
    }

    .left-sidebar {
        display: none; /* Hide the desktop left sidebar */
    }

    .right-sidebar {
        width: 100%; 
        flex-direction: row; /* Icons in a row */
        justify-content: space-around; /* Spread icons out */
        border: 5px solid black; 
        border-left: none; 
        border-right: none;
        padding: 10px 0;
        gap: 10px;
        order: 1; /* Place it BEFORE the page-content */
    }

    .page-content {
        border: none;
        padding: 10px; 
        order: 2; /* Place it after the right-sidebar */
    }
    
    .desktop-footer {
        display: none; /* Hide the desktop footer */
    }

    /* --- Show Mobile Content / Hide Desktop Content --- */
    .content-row {
        display: none; /* Hide the desktop content row (logo/info box) */
    }

    .mobile-coming-soon {
        display: block; /* Show the mobile coming soon section */
    }
    
    .mobile-footer {
        display: block; /* Show the mobile footer */
        text-align: center;
        padding: 10px;
        background-color: black;
        color: white;
        font-size: 1.2em;
        font-weight: bold;
    }
    
    /* Ensure the mobile content is readable */
    .home-title {
        font-size: 3em;
        text-shadow: 
            -3px -3px 0 #000,  
             3px -3px 0 #000,
            -3px  3px 0 #000,
             3px  3px 0 #000;
        margin: 10px 0;
    }
}