/* NEO-CITIES FRIENDLY STYLESHEET */

/* --- 1. GLOBAL VARIABLES AND RESETS --- */
:root {
    --dark-bg: #111118; /* Very dark purple-black */
    --card-bg: #222233; /* Slightly lighter purple-black for cards */
    --text-color: #f0f0f0; /* Off-white for general text */
    --accent-color-1: #00ff99; /* Neon Green/Cyan for main focus */
    --accent-color-2: #ff00ff; /* Neon Pink/Magenta for secondary focus */
    --border-style: 0.1875rem solid var(--accent-color-1); /* 3px converted to rem */
    --shadow-style: 0 0 0.9375rem rgba(0, 255, 153, 0.6); /* 15px converted to rem */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Set base font size for rem scaling (1rem = 16px by default) */
    font-size: 100%; 
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: sans-serif;
    min-height: 100vh;
    padding: 1.25rem 0; 
    
    /* ARCADE BACKGROUND PATTERN */
    background-image: 
        repeating-linear-gradient(
            -45deg, 
            #0a0a0f, 
            #0a0a0f 0.25rem, 
            var(--dark-bg) 0.25rem, 
            var(--dark-bg) 0.5rem 
        );
    background-attachment: fixed; /* Keeps the pattern stable as the user scrolls */
}

/* --- 2. HEADER STYLING --- */
.page-header {
    text-align: center;
    padding: 2.5rem 0 3.75rem 0;
}

.page-header h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem; 
    letter-spacing: 0.3125rem;
    color: var(--accent-color-1);
    text-shadow: 
        -0.125rem -0.125rem 0 var(--accent-color-2),
        0.125rem 0.125rem 0 var(--accent-color-2), 
        0 0 0.625rem var(--accent-color-1);
    border-bottom: var(--border-style);
    display: inline-block;
    padding-bottom: 0.625rem;
}

/* --- 3. AD / FREE PROMO SECTION STYLES --- */
.ad-container {
    text-align: center;
    max-width: 56.25rem; /* 900px */
    margin: 0 auto 3.125rem auto; /* Center it and add 50px margin below */
    padding: 1.25rem; /* 20px padding */
    border: 0.125rem dashed var(--accent-color-2); /* Neon pink dashed border */
    background-color: var(--card-bg);
}

.ad-placeholder {
    font-family: 'Press Start 2P', cursive;
    color: var(--accent-color-1);
    font-size: 1rem;
    padding: 0.625rem 0;
}

.free-ad-title {
    font-family: 'Oswald', sans-serif;
    color: var(--accent-color-1);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 0.5rem rgba(0, 255, 153, 0.4);
}

.free-ad-text {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 1rem;
}

/* Adjust button size for a promotional spot */
.small-button {
    font-size: 0.7rem !important;
    padding: 0.5rem 1rem !important;
}


/* --- 4. MAIN SHOWCASE LAYOUT & CARD STYLING --- */
.game-showcase {
    display: flex;
    flex-wrap: nowrap; /* Forces cards onto a single line */
    justify-content: flex-start;
    gap: 1.875rem; /* 30px converted to rem */
    max-width: 100%; /* Allows full width usage */
    margin: 0 auto;
    
    /* Horizontal Scroll Implementation */
    overflow-x: auto; /* Enables horizontal scrolling when content exceeds width */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
    padding-bottom: 1.25rem; /* Add space for the scroll bar */
    
    /* Add padding to the start/end of the scrollable area */
    padding-left: 1.25rem; 
    padding-right: 1.25rem;
}

/* Custom scrollbar track */
.game-showcase::-webkit-scrollbar {
  height: 0.625rem;
}
.game-showcase::-webkit-scrollbar-thumb {
  background: var(--accent-color-2);
  border-radius: 0.3125rem;
}
.game-showcase::-webkit-scrollbar-track {
  background: var(--card-bg);
}

.game-card {
    background-color: var(--card-bg);
    padding: 1.25rem;
    width: 18.75rem; /* 300px converted to rem */
    flex-shrink: 0; /* Prevents cards from shrinking inside the scrolling container */
    border: var(--border-style);
    border-radius: 0.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* SMOOTHNESS */
    cursor: pointer;
    box-shadow: var(--shadow-style);
}

.game-card:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 0 1.5625rem var(--accent-color-2);
}

.game-image {
    width: 100%;
    height: auto;
    border: 0.125rem dashed var(--accent-color-2);
    margin-bottom: 0.9375rem;
    display: block;
}

.game-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    color: var(--accent-color-1);
    margin-bottom: 0.625rem;
}


/* --- 5. JAVASCRIPT RELATED STYLES & BUTTONS --- */

/* SMOOTHNESS: Use max-height for smooth JS toggle */
.game-detail {
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    opacity: 0;
    transition: max-height 0.5s ease-in-out, opacity 0.4s ease;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #ccc;
}

.game-detail.visible {
    max-height: 200px; /* Needs to be larger than the content height */
    margin-bottom: 1.25rem; /* Add margin when visible */
    opacity: 1;
}

/* Style the container for the two buttons */
.card-buttons {
    display: flex;
    justify-content: space-around;
    gap: 0.625rem; /* 10px */
    width: 100%;
}

.game-link-button {
    display: inline-block;
    text-decoration: none;
    color: var(--dark-bg);
    background-color: var(--accent-color-1);
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.1s; /* SMOOTHNESS */
    box-shadow: 0 0.3125rem 0 var(--accent-color-2);
}

.game-link-button:hover {
    background-color: var(--accent-color-2);
    color: var(--text-color);
    box-shadow: 0 0.3125rem 0 var(--accent-color-1);
}

.game-link-button:active {
    transform: translateY(0.1875rem);
    box-shadow: 0 0.125rem 0 var(--accent-color-2);
}

/* Button-specific styles */
.card-buttons .game-link-button {
    flex-grow: 1;
    margin: 0; 
    padding: 0.625rem 0.5rem;
}

.info-button {
    background-color: var(--accent-color-2);
    box-shadow: 0 0.3125rem 0 var(--accent-color-1);
    color: var(--text-color);
}

.info-button:hover {
    background-color: var(--accent-color-1);
    box-shadow: 0 0.3125rem 0 var(--accent-color-2);
}

/* --- Toggle Icon Styling for JS Enhancement --- */
.toggle-icon {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    vertical-align: middle;
}


/* --- 6. FEATURED INFO SECTION STYLES --- */
.featured-info-section {
    max-width: 56.25rem;
    margin: 5rem auto 2.5rem auto;
    padding: 1.875rem;
    background-color: var(--card-bg);
    border: 0.1875rem double var(--accent-color-2);
    border-radius: 0.75rem;
    text-align: center;
    box-shadow: 0 0 1.25rem rgba(255, 0, 255, 0.4);
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    color: var(--accent-color-2);
    margin-bottom: 1.25rem;
    border-bottom: 0.1875rem dashed var(--accent-color-2);
    display: inline-block;
    padding-bottom: 0.3125rem;
}

.featured-info-section p {
    font-size: 1.1rem;
    margin-bottom: 1.5625rem;
}

.feature-steps {
    list-style: none;
    text-align: left;
    margin: 0 auto 1.875rem auto;
    padding: 0;
    max-width: 37.5rem;
}

.feature-steps li {
    background-color: #333344;
    padding: 0.9375rem;
    margin-bottom: 0.625rem;
    border-left: 0.3125rem solid var(--accent-color-1);
    border-radius: 0.25rem;
    line-height: 1.4;
    font-size: 1rem;
}

.step-number {
    font-family: 'Press Start 2P', cursive;
    color: var(--accent-color-1);
    margin-right: 0.625rem;
    font-size: 0.9rem;
}

.feature-steps a {
    color: var(--accent-color-1);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}

/* --- 7. FOOTER SECTION STYLES --- */
.site-footer {
    background-color: #000000;
    color: var(--text-color);
    text-align: center;
    padding: 1.25rem 0;
    border-top: 0.125rem solid var(--accent-color-1);
    margin-top: 3.125rem;
    font-size: 0.8rem;
}

.copyright {
    /* Need position relative for absolute positioning of the span inside */
    position: relative; 
    padding-right: 7rem; /* Add padding to make space for the tag on the right */
    margin-top: 0.625rem;
    color: #888;
}

.social-links {
    margin-bottom: 0.625rem;
}

.social-icon {
    color: var(--accent-color-2);
    text-decoration: none;
    margin: 0 0.9375rem;
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease; /* SMOOTHNESS */
    text-shadow: 0 0 0.5rem rgba(255, 0, 255, 0.6); 
}

.social-icon:hover {
    color: var(--accent-color-1);
    text-shadow: 0 0 0.5rem rgba(0, 255, 153, 0.8);
}

.partner-links {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.partner-title {
    font-weight: bold;
    color: var(--accent-color-1);
    margin-bottom: 0.3125rem;
}

.partner-links a {
    color: var(--accent-color-2);
    text-decoration: none;
    transition: color 0.2s;
}

.partner-links a:hover {
    color: var(--accent-color-1);
}

/* --- BETA TAG STYLES (Bottom Right) --- */
.beta-tag {
    position: absolute;
    right: 1.25rem; /* 20px from the right edge of the footer */
    bottom: 0.625rem; /* 10px from the bottom edge of the footer */
    font-size: 0.7rem;
    font-family: 'Press Start 2P', cursive;
    color: var(--accent-color-1); /* Use neon green for visibility */
    text-shadow: 0 0 0.3rem rgba(0, 255, 153, 0.7);
}


/* --- 8. RESPONSIVENESS MEDIA QUERIES --- */

/* Tablet and Large Mobile View (up to 700px) */
@media (max-width: 43.75rem) { /* 700px */
    .ad-container, .featured-info-section {
        margin: 2rem 0.5rem;
    }
    .copyright {
        padding-right: 0; /* Remove padding when stacked on mobile */
    }
    .beta-tag {
        position: static; /* Make it stack naturally */
        display: block;
        margin-top: 0.5rem;
        text-align: center;
        right: auto;
        bottom: auto;
    }
}

/* Smallest Mobile View (up to 400px) */
@media (max-width: 25rem) { /* 400px */
    .card-buttons {
        flex-direction: column; /* Stack buttons vertically if they get too squished */
        gap: 0.5rem;
    }
    .game-link-button {
        font-size: 0.7rem;
        padding: 0.6rem 0.5rem;
    }
    .social-icon {
        margin: 0 0.5rem;
    }
}