:root {
    /* Default (Day) - White/Red */
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #d32f2f; /* Material Red 700 */
    --secondary-color: #f44336; /* Material Red 500 */
    --border-color: #d32f2f;
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    --nav-text: #333333;
    --nav-border: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --button-hover: rgba(211, 47, 47, 0.04);
}

[data-theme="night"] {
    /* Night - Dark Grey/Silver (Google Dark Theme Style) */
    --bg-color: #202124; /* Google Dark Background */
    --text-color: #e8eaed; /* Google Dark Text */
    --primary-color: #8ab4f8; /* Google Blue (Light) for accents */
    --secondary-color: #9aa0a6; /* Secondary Grey */
    --border-color: #5f6368;
    --card-bg: #303134; /* Google Dark Surface */
    --nav-bg: #202124;
    --nav-text: #e8eaed;
    --nav-border: #3c4043;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --button-hover: rgba(255, 255, 255, 0.1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Top Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--nav-bg);
    box-shadow: 0 2px 4px var(--shadow-color);
    padding: 0.5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    color: var(--nav-text);
    height: 64px;
    box-sizing: border-box;
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.navbar-brand img {
    margin-right: 12px;
    border-radius: 4px;
}

.navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.nav-item a {
    color: var(--nav-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0 16px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    transition: background-color 0.2s, color 0.2s;
}

.nav-item a:hover, .nav-item a.active {
    color: var(--primary-color);
    background-color: var(--button-hover);
}

/* Material Design Buttons (Google Style) */
.btn-theme, .select-lang {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0 16px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.btn-theme:hover, .select-lang:focus {
    background-color: var(--primary-color);
    color: var(--bg-color); /* Contrast text color */
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}

[data-theme="night"] .btn-theme:hover, 
[data-theme="night"] .select-lang:focus {
    color: #000000; /* Black text on Neon Green background */
}

.select-lang {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d32f2f%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
}

[data-theme="night"] .select-lang {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2339ff14%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* Controls Container */
.navbar-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Navbar Search */
.nav-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.nav-search-input {
    background: rgba(0,0,0,0.05);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 8px 16px 8px 40px; /* space for icon */
    font-size: 14px;
    color: var(--text-color);
    width: 200px;
    transition: all 0.2s;
    outline: none;
}

.nav-search-input:focus {
    background: var(--card-bg);
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    width: 240px; /* Expand on focus */
}

.nav-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-color);
    opacity: 0.6;
    pointer-events: none;
}

[data-theme="night"] .nav-search-input {
    background: rgba(255,255,255,0.1);
}

/* Default hide mobile controls in navbar list */
.navbar-controls-mobile {
    display: none;
}

/* Game Grid & Cards - Responsive Defaults */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.game-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
    border: 1px solid transparent;
}

/* Mobile Optimization Media Queries */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
}

@media (max-width: 768px) {
    .navbar-toggle {
        display: block;
    }
    
    .navbar-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Below navbar */
        left: 0;
        right: 0;
        background-color: var(--nav-bg);
        box-shadow: 0 4px 6px var(--shadow-color);
        padding: 8px 0;
        gap: 0; /* Stack items closely */
    }
    
    .navbar-nav.show {
        display: flex;
    }
    
    .nav-item a {
        height: 48px; /* Larger touch target */
        padding: 0 24px;
        width: 100%; /* Full width */
        box-sizing: border-box;
    }
    
    .navbar-controls {
        display: none; /* Will be shown inside menu in JS or simplified */
    }
    
    /* Show search in mobile menu too if needed, or hide it. 
       For now, we hide the main nav search on mobile and could add it to mobile controls 
       but the user request didn't specify. Let's keep it simple.
    */

    /* Mobile Controls inside Nav */
    .navbar-nav.show .navbar-controls-mobile {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        border-top: 1px solid var(--nav-border);
    }
}

@media (max-width: 600px) {
    .games-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 16px;
        padding: 0 10px 40px 10px;
    }

    .search-input {
        font-size: 16px; /* Prevent zoom on focus on iOS */
    }
}

/* Iframe Container */
.content-wrapper {
    height: calc(100vh - 64px);
    overflow: hidden;
    background-color: var(--bg-color);
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

[data-theme="night"] ::-webkit-scrollbar-track {
    background: #111;
}
[data-theme="night"] ::-webkit-scrollbar-thumb {
    background: #333;
}
[data-theme="night"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}