/* --- Global and Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    /* Use a subtle pattern or texture for background if available, otherwise keep light green */
    background-image: url('assets/money_background.png'); /* Keep placeholder */
    background-color: #f4f7f6; /* Slightly off-white/very light green if image fails */
    background-repeat: repeat;
    background-size: auto; 
}

/* General Page Container */
.container {
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center container */
    padding: 0 1.5rem; /* Padding on sides */
}

/* --- Header Styles --- */
header {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    padding: 1rem 0; /* Vertical padding */
    border-bottom: 1px solid #dcedc8; /* Lighter green border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

header .container { /* Apply container styles to header content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrap on small screens */
    gap: 1rem; /* Space between logo and nav */
}

/* Logo Styles */
.logo {
    /* Styles remain largely the same, ensure animation is smooth */
    font-size: 1.8rem; 
    font-weight: bold; 
    color: #2e7d32; 
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5), 
                 -1px -1px 1px rgba(0,0,0,0.1); 
    background: linear-gradient(110deg, #a5d6a7 8%, #4caf50 18%, #a5d6a7 33%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%; 
    animation: shine 4s linear infinite; 
}

@keyframes shine {
    to {
        background-position: -200% center; 
    }
}

/* Language Switcher Styles */
.language-switcher button {
    background-color: #66bb6a; /* Slightly softer green */
    color: white;
    border: none;
    padding: 0.6rem 1.1rem;
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: 5px; 
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 500; /* Slightly bolder text */
}

.language-switcher button:hover {
    background-color: #4caf50; /* Darker on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.language-switcher button.active {
    background-color: #388e3c; /* Darkest green for active */
    font-weight: bold;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow for active */
}

/* --- Main Content Area --- */
main {
    padding-top: 2.5rem; 
    padding-bottom: 2.5rem;
}

/* --- Game Embed Area --- */
#game-section {
    /* This section is now primarily a spacing element */
     margin-bottom: 3rem; /* Increased space below game */
}

/* Game iframe Wrapper - New styles for sizing and centering */
#iframe-wrapper {
    position: relative; /* Needed for absolute positioning of button */
    width: 90%; /* Make it wider, up to max-width */
    max-width: 1000px; /* Set a max-width for large screens */
    margin: 0 auto; /* Center the wrapper */
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    background-color: #000; /* Background while loading */
    border: 4px solid #a5d6a7; /* Green border */
    border-radius: 10px; /* Slightly larger radius */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    overflow: hidden; /* Ensure content fits within border radius */
}

#iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Fullscreen Button Styles - Repositioned */
#fullscreen-btn {
    position: absolute;
    bottom: 15px; /* Position relative to wrapper */
    right: 15px;
    background-color: rgba(0, 0, 0, 0.65); 
    color: white;
    border: none;
    padding: 0.6rem 1.2rem; /* Slightly larger padding */
    cursor: pointer;
    border-radius: 5px;
    z-index: 10;
    transition: background-color 0.3s ease;
    font-size: 0.95rem; /* Adjust font size */
}

#fullscreen-btn:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

/* --- Content Sections Styling --- */
#content-section {
    /* Apply container styles to center the content area */
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem; 
}

#content-section section,
#content-section article {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly less transparent */
    padding: 2rem; /* Increased padding */
    margin-bottom: 2rem; /* Increased spacing */
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* Refined shadow */
    border: 1px solid #e0e0e0; /* Subtle border */
}

/* Content Titles */
#content-section h2 {
    color: #388e3c; 
    font-size: 2rem; /* Slightly larger H2 */
    margin-bottom: 1.2rem; 
    border-bottom: 3px solid #81c784; /* Thicker, lighter green underline */
    padding-bottom: 0.6rem; 
    font-weight: 600; /* Semi-bold */
}

#content-section h3 {
    color: #4caf50; 
    font-size: 1.6rem; /* Slightly larger H3 */
    margin-bottom: 1rem; 
    font-weight: 600;
}

/* Paragraph Styling */
#content-section p {
    margin-bottom: 1.2rem; 
    color: #424242; /* Slightly darker grey for better contrast */
    line-height: 1.7; /* Increase line height */
}

/* List Styling */
#content-section ul {
    list-style: none; 
    padding-left: 0; 
    margin-bottom: 1.2rem;
}

#content-section li {
    margin-bottom: 0.9rem; 
    padding-left: 2rem; /* Increased indent for icon */
    position: relative; 
}

/* Custom List Icon */
#content-section li::before {
    content: '💰'; 
    position: absolute; 
    left: 0; 
    top: 2px; /* Adjust vertical alignment */
    font-size: 1.1rem; /* Slightly larger icon */
    color: #4caf50;
}

/* Screenshot Gallery */
.screenshot-gallery {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Adjust min size if needed */
    gap: 1.2rem; /* Increased gap */
}

.screenshot-gallery img {
    width: 100%; 
    height: auto; 
    border: 4px solid #c8e6c9; /* Slightly thicker border */
    border-radius: 6px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    object-fit: cover; 
    aspect-ratio: 16 / 9; 
    background-color: #e0e0e0; 
    color: #999; 
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-style: italic;
}

/* Review Styling */
.review {
    border-left: 5px solid #66bb6a; /* Softer green border */
    padding: 1.2rem 1.8rem; 
    margin-bottom: 1.5rem; 
    font-style: italic; 
    background-color: #f1f8e9; 
    border-radius: 0 6px 6px 0; 
}

.review p {
    margin-bottom: 0.7rem; 
    color: #555; /* Slightly lighter text for reviews */
}

.review span {
    display: block; 
    margin-top: 0.8rem; 
    font-style: normal; 
    text-align: right; 
    color: #388e3c; /* Green name */
    font-weight: bold; 
}

/* --- Footer Styles --- */
footer {
    background-color: #2e7d32; /* Darker green footer */
    color: #e8f5e9; 
    text-align: center; 
    padding: 1.5rem 0; /* Increased padding */
    margin-top: 3rem; 
    border-top: 4px solid #66bb6a; /* Lighter green top border */
}

footer .footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-content p {
    margin-bottom: 0.6rem; 
    font-size: 0.9rem; /* Slightly smaller footer text */
}

.footer-content a {
    color: #ffffff; 
    text-decoration: none; 
    transition: color 0.3s ease;
}

.footer-content a:hover {
    color: #c8e6c9; 
    text-decoration: underline;
}

/* --- Responsive Design Adjustments --- */

/* Medium Screens (Tablets) */
@media (max-width: 992px) { 
    #iframe-wrapper {
        width: 95%; /* Slightly wider on tablets */
    }
    #content-section {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-direction: column; 
        align-items: center; 
        gap: 0.8rem;
    }

    .language-switcher {
        margin-top: 0.5rem;
        justify-content: center;
        width: 100%;
    }
    .language-switcher button {
         margin-left: 0.3rem;
         margin-right: 0.3rem;
     }

    .logo {
        font-size: 1.6rem; 
        text-align: center; 
    }

    #content-section h2 {
        font-size: 1.8rem;
    }
    #content-section h3 {
        font-size: 1.4rem;
    }
    
    #iframe-wrapper {
        width: 98%; /* Almost full width on smaller tablets */
    }
}

/* Small Screens (Mobiles) */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Readjust base font for mobile */
    }

    .container {
        padding: 0 1rem; /* Reduce side padding */
    }
    
    #content-section {
         padding: 0 1rem; 
    }

    .logo {
        font-size: 1.5rem; 
    }

    .language-switcher button {
        padding: 0.5rem 0; /* Adjust padding */
        flex-basis: 45%; /* Roughly two buttons per row */
        margin: 0.2rem;
        font-size: 0.8rem;
    }
    .language-switcher {
        gap: 0.4rem;
    }

    #iframe-wrapper {
        width: 100%; /* Full width on mobile */
        border-width: 3px;
        border-radius: 6px;
    }

    #fullscreen-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        bottom: 10px;
        right: 10px;
    }

     #content-section section,
     #content-section article {
        padding: 1.5rem 1rem; /* Adjust padding */
     }

    #content-section h2 {
        font-size: 1.5rem;
    }
    #content-section h3 {
        font-size: 1.25rem;
    }
    
    #content-section li {
        padding-left: 1.5rem; /* Adjust list padding */
    }
    #content-section li::before {
         font-size: 1rem; /* Adjust list icon size */
    }

    .screenshot-gallery {
         grid-template-columns: 1fr; /* Single column */
         gap: 1rem;
    }

    .footer-content {
         font-size: 0.8rem;
    }
    .footer-content p {
        margin-bottom: 0.4rem;
    }
}