/* =========================================
   1. CORE LAYOUT & VARIABLES
   ========================================= */
:root {
    --bg-dark: #121212;
    --card-bg: #1e1e1e;
    --accent: #00e676;
    /* Saudi Green */
    --accent-hover: #00c853;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    --font-main: 'Cairo', sans-serif;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    direction: rtl;
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
}

a {
    text-decoration: none;
    color: inherit;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
header {
    background: #1a1a1a;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    flex-direction: column;
}

.logo {
    height: 50px;
}

.subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.nav-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-how {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid #444;
}

.btn-how:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.btn-request {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-request:hover {
    background: var(--accent);
    color: #000;
}

.btn-buy {
    background: var(--accent);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-buy:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 230, 118, 0.3);
}

/* Dropdown */
.help-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2a2a2a;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    z-index: 101;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    overflow: hidden;
}

.dropdown-content a {
    color: var(--text-primary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--accent);
    color: #000;
}

.dropdown-content img {
    width: 20px;
}

.help-dropdown:hover .dropdown-content {
    display: block;
}

/* =========================================
   3. CONTROLS & FILTERS
   ========================================= */
.controls {
    background: #252525;
    padding: 20px 30px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.search-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
    min-width: 250px;
}

.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

input[type="text"] {
    width: 100%;
    padding: 12px 45px 12px 15px;
    border-radius: 25px;
    border: 2px solid #444;
    background: #1a1a1a;
    color: #fff;
    font-family: var(--font-main);
    font-size: 1rem;
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}

.filters-panel {
    display: flex;
    gap: 15px;
    align-items: center;
}

select {
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #fff;
    font-family: var(--font-main);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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%2300e676%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: left 15px top 50%;
    background-size: 10px;
    padding-left: 35px;
}

select:hover {
    border-color: var(--accent);
}

.random-btn {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(37, 117, 252, 0.4);
    transition: transform 0.2s;
}

.random-btn:hover {
    transform: scale(1.05);
}

.deck-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: #1a1a1a;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #444;
    transition: all 0.3s;
}

.deck-toggle input {
    display: none;
}

.deck-toggle:hover {
    border-color: var(--accent);
}

.deck-toggle.active {
    background: rgba(0, 230, 118, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

.toggle-icons {
    display: flex;
    gap: -5px;
}

.toggle-icons img {
    width: 20px;
    height: 20px;
}

.mobile-filter-btn {
    display: none;
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
}

/* =========================================
   4. GAME GRID & CARDS
   ========================================= */
.container {
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.game-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 230, 118, 0.15);
    border-color: var(--accent);
}

.game-image-container {
    position: relative;
    width: 100%;
    padding-top: 140%;
    /* Steam cover aspect ratio */
}

.game-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.game-card:hover .game-img {
    transform: scale(1.05);
}

/* Overlays */
.overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    z-index: 2;
}

.badge {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    border: 1px solid #333;
}

.badge img {
    width: 18px;
    height: 18px;
}

/* Coming Soon Overlay */
/* Coming Soon Overlay */
/* --- CLEAN COUNTDOWN STYLES --- */
.game-card.locked {
    pointer-events: auto !important;
    /* Allow clicking! */
    opacity: 1;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Remove old precision HUD stuff */
.locked-overlay.nearest-active,
.locked-overlay.nearest-active::before,
.locked-overlay.nearest-active::after,
.hype-label,
.countdown-timer {
    display: none !important;
}

.release-capsule {
    background: rgba(20, 20, 20, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    border: 1px solid #333;
    color: #ccc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.lock-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

.release-capsule {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Date Added Tag */
.date-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--accent);
    color: #000;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 2;
}

/* Card Info */
.game-info {
    padding: 15px;
    background: linear-gradient(0deg, #1e1e1e 80%, rgba(30, 30, 30, 0));
}

.game-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.metacritic-score {
    color: #66cc33;
    font-weight: bold;
    border: 1px solid #66cc33;
    padding: 0 4px;
    border-radius: 2px;
}

.game-genre {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.steam-link {
    display: block;
    text-align: center;
    background: #2a2a2a;
    color: #fff;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.steam-link:hover {
    background: #333;
    color: var(--text-primary);
}

.game-card:hover .steam-link {
    background: var(--accent);
    color: #000;
}

/* =========================================
   5. PRECISION HUD COUNTDOWN (LATEST)
   ========================================= */
/* --- CLEAN COUNTDOWN STYLES --- */
.locked-overlay.nearest-active {
    /* Simple dark overlay, no green borders/grids */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Remove the corners/brackets */
.locked-overlay.nearest-active::before,
.locked-overlay.nearest-active::after {
    display: none;
}



/* =========================================
   6. PREMIUM REQUEST MODAL
   ========================================= */
.request-overlay,
.random-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.request-overlay.active,
.random-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.request-card {
    background: linear-gradient(135deg, #1e1e1e, #141414);
    width: 500px;
    max-width: 90%;
    border-radius: 16px;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.request-close,
.roulette-close {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    color: #666;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.request-close:hover {
    color: #fff;
}

.request-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(90deg, #fff, #999);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.2);
    outline: none;
}

.form-hint {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 0.8rem;
}

.request-submit {
    width: 100%;
    background: var(--accent);
    color: #000;
    font-weight: 800;
    padding: 15px;
    border-radius: 10px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.request-submit:hover {
    background: #00c853;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 230, 118, 0.3);
}

/* =========================================
   7. RANDOM MODAL STYLES
   ========================================= */
.roulette-card {
    background: var(--card-bg);
    width: 400px;
    max-width: 90%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.roulette-image-container {
    height: 250px;
    overflow: hidden;
    background: #000;
}

.roulette-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.roulette-info {
    padding: 25px;
}

.roulette-title {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.roulette-btn {
    display: inline-block;
    background: var(--accent);
    color: #000;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: bold;
}

/* =========================================
   8. UTILITIES
   ========================================= */
.load-more-container {
    text-align: center;
    margin: 40px 0;
}

.btn-load {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 10px 40px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-load:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.scroll-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: var(--accent);
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 90;
    transition: transform 0.2s;
}

.scroll-top:hover {
    transform: translateY(-3px);
}

footer {
    text-align: center;
    padding: 40px;
    background: #111;
    color: #666;
    border-top: 1px solid #222;
}

.footer-request-btn {
    color: var(--text-secondary);
    border-bottom: 1px dashed #666;
    margin-top: 10px;
    font-size: 0.9rem;
}

.back-link {
    display: inline-block;
    margin: 20px 40px 0 0;
    color: var(--text-secondary);
    font-weight: bold;
    border-bottom: 1px solid transparent;
}

.back-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* =========================================
   9. MOBILE OPTIMIZATIONS
   ========================================= */

/* Tablets (601px - 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 20px;
    }

    .game-card {
        width: 100%;
        /* Grid handles width */
    }
}

/* Mobile Devices (600px and below) */
@media (max-width: 600px) {

    /* 1. Header Navigation */
    header {
        flex-direction: column;
        gap: 15px;
        padding: 10px 15px;
    }

    .header-content {
        align-items: center;
        text-align: center;
    }

    .logo {
        height: 40px;
        /* Scale down logo */
    }

    .nav-group {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-btn {
        font-size: 12px;
        /* Reduce font size */
        padding: 8px 12px;
        /* Reduce padding */
    }

    /* 2. Controls (Search & Filter) */
    .controls {
        flex-direction: column;
        padding: 15px;
    }

    .search-wrapper {
        width: 95%;
        margin: 0 auto;
        max-width: none;
    }

    .mobile-filter-btn {
        display: block;
        width: 95%;
        margin: 10px auto 0;
    }

    /* Filters Panel */
    .filters-panel {
        display: none;
        /* Hidden by default */
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
        gap: 10px;
        background: #2a2a2a;
        padding: 15px;
        border-radius: 10px;
        margin-top: 10px;
    }

    .filters-panel.active {
        display: flex;
        /* Show when active */
    }

    /* Full width inputs in panel */
    .filters-panel select,
    .filters-panel .deck-toggle,
    .filters-panel .random-btn {
        width: 100%;
    }

    /* 3. Card Grid */
    .container {
        grid-template-columns: 1fr;
        /* 1 card per row */
        gap: 10px;
        /* 10px margin between cards */
        padding: 10px;
    }

    .game-card {
        width: 100%;
        margin: 0 auto;
    }

    /* 4. Coming Soon Cards */
    .lock-icon {
        font-size: 40px;
        /* Down from 2rem approx */
    }

    .release-capsule span:first-child {
        font-size: 14px;
        /* COMING SOON text */
    }

    .release-capsule span:last-child {
        font-size: 12px;
        /* Date text */
    }

    /* 5. Metacritic Badges */
    .metacritic-score {
        font-size: 10px;
        padding: 0 2px;
    }

    /* Adjust Badge size and position if needed, 
       but strictly keeping to user request about "badge size" usually refers to the Verified badge? 
       The user said "Metacritic Badges ... Reduce badge size to 30px x 30px".
       Metacritic score is text. Verified badge is an image. 
       I will assume they meant the Verified Badge in the overlay.
    */
    .badge {
        width: 30px;
        height: 30px;
        justify-content: center;
        /* Position closer to bottom-right? 
           User said: "Position closer to bottom-right corner".
           Currently it is top-right. Let's move it for mobile.
        */
        position: absolute;
        top: auto;
        bottom: 10px;
        right: 10px;
        z-index: 5;
    }

    .badge img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Adjust overlay to not conflict if badge moves */
    .overlay {
        position: static;
        /* Let children position themselves absolute relative to container */
        display: block;
    }

    /* Move date tag to not overlap with bottom-right badge if needed, 
       Date tag is bottom-left. Should be fine.
    */

    /* Disable hover effects on mobile */
    .game-card:hover {
        transform: none;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        border-color: #2a2a2a;
    }
}

/* Ensure minimum touch target size */
button,
a,
select,
input {
    min-height: 44px;
    min-width: 44px;
}