/* Global Body Styles (if not already globally defined elsewhere, add/modify here) */
body {
    margin: 0; /* Reset default margin */
    /* padding-top will be handled by Navigation_Bar.css for topnav */
    font-family: 'Montserrat', sans-serif; /* Consistent font with other pages */
    background-color: #121212; /* Dark base background for the entire page */
    color: #fff; /* Default text color */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Main Content Wrapper - This div sits inside body and outside .applications-page */
#main-content {
    padding-top: 20px; /* Add some initial padding, adjust as needed */
    padding-bottom: 20px;
    transition: margin-left 0.3s ease; /* Smooth transition for sidebar */
    /* margin-left will be set by media queries */
    min-height: calc(100vh - 40px); /* Adjust if body has top/bottom padding from nav */
    box-sizing: border-box;
}

/* Media queries for #main-content to interact with the navigation bar */
@media screen and (min-width: 1200px) { /* Breakpoint from Navigation_Bar.css */
    #main-content {
        margin-left: 200px; /* Accommodate the 200px sidebar */
    }
}

@media screen and (max-width: 1199px) { /* Breakpoint from Navigation_Bar.css */
    #main-content {
        margin-left: 0; /* Full width when sidebar is hidden / topnav is active */
        /* The body will have padding-top: 50px from Navigation_Bar.css */
    }
}


/* Styles for the .applications-page container itself */
.applications-page {
    position: relative; /* z-index context if needed, but generally not required here */
    /* z-index: 1; /* Usually not needed if #main-content handles nav interaction */
    /* margin-left: 200px; /* REMOVED - Handled by #main-content */
    display: flex;
    flex-direction: column; /* To stack .container properly */
    align-items: center; /* Center .container horizontally */
    /* min-height: 900px; /* Consider if this fixed min-height is essential, or use 100% of parent or viewport units */
    width: 100%; /* Take full width of #main-content */
    box-sizing: border-box;
}

/* REMOVED .applications-page body selector as it's not standard and confusing */
/* Styles previously in .applications-page body should be applied to body globally or to .applications-page directly */

.applications-page .container {
    width: 90%;
    max-width: 1200px; /* Adjusted max-width for better general layout, 1500px can be very wide */
    /* background-color: #1a1a1a; /* Moved background to .applications-page or #main-content's parent (body) */
    border-radius: 15px;
    padding: clamp(15px, 3vw, 30px); /* Responsive padding */
    text-align: center;
    box-sizing: border-box;
}


.applications-page .content {
    padding: clamp(10px, 2vw, 20px); /* Responsive padding */
    text-align: center;
}

.applications-page .subtitle {
    font-size: clamp(1em, 2.5vw, 1.2em); /* Responsive font size */
    margin-bottom: 30px;
    color: #aaa;
}

.applications-page .title-animation {
    font-size: clamp(2em, 5vw, 3em); /* Responsive font size */
    margin-bottom: 20px;
    color: #ffcc00;
    letter-spacing: 1px; /* Reduced letter-spacing slightly for smaller screens */
    text-shadow: 2px 2px 4px #000;
    animation: title-glow 3s infinite alternate;
}

@keyframes title-glow {
    from { text-shadow: 2px 2px 4px #000, 0 0 10px #ffcc00; }
    to { text-shadow: 2px 2px 4px #000, 0 0 20px #ffd700; }
}

.applications-page .selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Adjusted minmax for better fit */
    gap: clamp(15px, 3vw, 20px); /* Responsive gap */
    margin-bottom: 30px;
    padding: clamp(10px, 2vw, 20px); /* Responsive padding */
    justify-content: center;
}

.applications-page .game-option {
    position: relative;
    background-color: #222; /* Slightly lighter than page background for definition */
    border-radius: 10px;
    padding: clamp(15px, 3vw, 20px); /* Responsive padding */
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #333; /* Subtle border */
}

.applications-page .game-option:hover {
    transform: translateY(-5px) scale(1.02); /* Added slight scale on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
}

.applications-page .game-icon {
    width: clamp(60px, 10vw, 80px); /* Responsive icon size */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px;
}

.applications-page .game-title {
    font-size: clamp(1em, 2.8vw, 1.3em); /* Responsive font size */
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #eee;
    line-height: 1.3; /* Adjusted line height */
}

.applications-page .apply-button {
    padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 24px); /* Responsive padding */
    margin: 10px 0 0 0;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: clamp(0.9em, 2vw, 1em); /* Responsive font size */
    cursor: pointer;
    background-color: #4caf50;
    color: white;
    transition: background-color 0.3s, transform 0.3s;
    font-weight: bold;
}

.applications-page .apply-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

/* Option Grids Styles */
.applications-page .options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjusted min for better fit */
    gap: clamp(10px, 2vw, 15px); /* Responsive gap */
    margin-top: 20px; /* Added margin-top for spacing */
    margin-bottom: 20px;
    justify-content: center;
    padding: clamp(15px, 3vw, 20px); /* Responsive padding */
    background-color: #2a2a2a; /* Slightly different from game-option background */
    border-radius: 10px;
    border: 1px solid #444; /* Subtle border */
}

/* Button Styles */
.applications-page .button {
    position: relative;
    padding: clamp(12px, 2.5vw, 15px) clamp(15px, 4vw, 30px); /* Responsive padding */
    border: none;
    border-radius: 8px; /* Slightly more rounded */
    text-decoration: none;
    font-size: clamp(0.9em, 2.2vw, 1em); /* Responsive font size */
    cursor: pointer;
    text-transform: uppercase;
    margin: 5px; /* Keep margin for grid spacing if auto-fit doesn't perfectly fill */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    background-size: 200% auto;
    color: white;
    display: inline-block; /* Or flex for more control over content inside */
    font-weight: bold;
    line-height: 1.4;
}


.applications-page .button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent, transparent);
    transition: all 0.5s ease;
    z-index: 0;
}
.applications-page .button > * { /* Ensure button text is above ::before pseudo-element */
    position: relative;
    z-index: 1;
}


.applications-page .button:hover {
    transform: scale(1.03) translateY(-2px); /* Adjusted hover transform */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    background-position: right center; /* For gradient transitions */
}

/* Specific Button Colors - these seem fine, ensure text contrast */
/* eSports */
.applications-page .button.opsters-esports,
.applications-page .button.opsters-esportscr,
.applications-page .button.opsters-esportsbs {
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    color: white;
}

.applications-page .button.opsters-academy,
.applications-page .button.opsters-academycr {
    background-image: linear-gradient(to right, #ff8a00 0%, #e52e71 100%);
    color: white;
}

.applications-page .button.opsters-esports-Man,
.applications-page .button.opsters-esports-Mancr,
.applications-page .button.opsters-esports-Manbs {
    background-image: linear-gradient(to right, #43cea2 0%, #185a9d 100%);
    color: black; /* If using light background, ensure text is black */
}

/* eSports Game Selection Buttons */
.applications-page .button.esports-game-select.show-esports-cr-options {
    background-image: linear-gradient(to right, #305CDE 0%, #e52e71 100%);
    color: white;
}

.applications-page .button.esports-game-select.show-esports-bs-options {
    background-image: linear-gradient(to right, #FFB921 0%, #96c93d 100%);
    color: white;
}


/* Clans */
.applications-page .button.clash-royale {
    background-image: linear-gradient(to right, #305CDE 0%, #ec6ead 100%);
    color: white;
}

.applications-page .button.clash-royale-war {
    background-image: linear-gradient(to right, #0000FF 0%, #FFD700 100%);
    color: white;
}

.applications-page .button.clash-royale-pol {
    background-image: linear-gradient(to right, #7600bc 0%, #66a103 100%);
    color: white;
}

.applications-page .button.brawl-stars {
    background-image: linear-gradient(to right, #fc4a1a 0%, #f7b733 100%);
    color: white;
}

.applications-page .button.clash-of-clans {
    background-image: linear-gradient(to right, #FFD700 0%, #f12711 100%);
    color: black;
}

.applications-page .button.hayday {
    background-image: linear-gradient(to right, #008000 0%, #182848 100%);
    color: white;
}

/* Affiliation */
.applications-page .button.affiliation-affiliate {
    background-image: linear-gradient(to right, #fbd786 0%, #f7797d 100%);
    color: black;
}

.applications-page .button.affiliation-partnership {
    background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
    color: black;
}

.applications-page .button.affiliation-create-clan {
    background-image: linear-gradient(to right, #c31432 0%, #240b36 100%);
    color: white;
}


/* Back Buttons */
.applications-page .button.back-button-level-1,
.applications-page .button.back-button-level-2 {
    background-image: linear-gradient(to right, #4a4a4a 0%, #6b6b6b 100%); /* Darker grey gradient */
    color: white;
    margin-top: 15px;
    /* width: calc(100% - 10px); /* Adjusted to account for margin on button itself. Grid gap handles overall spacing */
    /* text-align: center; /* Buttons are inherently centered by text-align on their parent or grid */
    /* Ensure it spans the full grid column if it's the only item */
    grid-column: 1 / -1; /* Make back buttons span all columns in the grid */
}

/* Iframe Styles */
.applications-page .iframe-container {
    margin-top: 30px; /* Increased margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ensure iframe container takes available width */
}

.applications-page iframe {
    width: 100%; /* Take full width of its parent .iframe-container */
    max-width: 900px; /* But not more than this */
    height: 70vh; /* Use viewport height for iframe, allows more content visibility */
    min-height: 500px; /* Minimum height for the iframe */
    max-height: 800px; /* Maximum height for the iframe */
    border: 1px solid #555; /* More visible border for iframe */
    border-radius: 10px;
    display: block;
    margin-bottom: 20px;
}

.applications-page .iframe-container .back-button { /* Target back button specifically within iframe-container */
    margin-top: 0; /* Remove top margin if already spaced by iframe's margin-bottom */
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    animation: button-pulse 2s infinite;
}

@keyframes button-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); } /* Reduced pulse intensity slightly */
    100% { transform: scale(1); }
}

/* Hide and Show Elements */
.applications-page .hidden {
    display: none !important; /* Use !important to ensure override if JS also toggles display */
}

/* Responsive adjustments - existing media query. Sync breakpoint for consistency if needed. */
/* The nav bar switches at 1199px. This media query is at 768px. */
/* Consider if you need changes at the 1199px breakpoint as well for finer control. */
@media (max-width: 768px) {
    /* .applications-page { */
    /* margin-left: 0; /* This is now handled by #main-content and the 1199px breakpoint */
    /* width: 100%; /* This is now handled by #main-content and the 1199px breakpoint */
    /* align-items: flex-start; /* If .container should not be centered at this breakpoint */
    /* } */

    .applications-page .container {
        padding: 15px; /* Already uses clamp */
        width: 95%; /* Good for small screens */
    }
    /* .applications-page .title-animation uses clamp */
    /* .applications-page .selection-grid uses clamp for gap/padding */
    /* .applications-page .options-grid uses clamp for gap/padding */

    .applications-page .game-option {
        padding: 15px; /* Already uses clamp */
    }
    .applications-page .game-title{
        font-size: 1em; /* Already uses clamp */
    }
    .applications-page .apply-button {
        font-size: 0.9em; /* Already uses clamp */
        padding: 10px 15px; /* Adjusted padding */
    }
    .applications-page .button{
        padding: 10px 10px; /* Already uses clamp */
        font-size: 0.85em; /* Slightly smaller on very small screens */
    }
    .applications-page iframe {
        height: 60vh; /* Adjust iframe height for smaller screens */
        min-height: 400px;
    }
}

/* Additional breakpoint for very small devices if needed */
@media (max-width: 480px) {
    .applications-page .title-animation {
        font-size: 1.8em; /* Further reduce for very small screens */
        letter-spacing: 0.5px;
    }
    .applications-page .selection-grid, .applications-page .options-grid {
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 10px;
    }
    .applications-page .button, .applications-page .apply-button {
        width: 100%; /* Make buttons full width in single column */
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    .applications-page .button.back-button-level-1,
    .applications-page .button.back-button-level-2 {
        width: auto; /* Allow back button to not be 100% if it's in a grid */
    }
    .applications-page .game-icon {
        width: 50px;
    }
}