/* =============================================== */
/* Clickable Card Fix (ADD THIS TO category.css) */
/* =============================================== */

/* This makes the game card the positioning reference for the links inside it. */
.game-card {
    position: relative; /* This is a crucial change */
}

/* This is the new, invisible link that covers the whole card. */
.card-main-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* It sits on a lower layer. */
    /* It has no background or text, making it invisible to the eye but clickable. */
}

/* We ensure the category badge has a HIGHER z-index. */
.card-category-badge {
    position: absolute; /* This is already set from home.css, but we can be explicit */
    z-index: 2; /* This places it ON TOP of the invisible main link. */
}



/*
* GameHub: Modern Category Page Stylesheet
*
* This file creates a visually engaging 5-column grid with animations,
* a redesigned "Load More" button, and a modern loading spinner.
*/

/* =============================================== */
/* Category Grid & Card Animation                */
/* =============================================== */

.category-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}

/* We apply a fade-in animation to the game cards for a smooth loading effect */
.game-card {
    /* The animation will be named 'fadeInUp', last for 0.5 seconds, and have a gentle easing effect. */
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0; /* Start cards as invisible */
}

/* Keyframe animation for the fade-in and slide-up effect */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start 20px lower */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

/*
 * MODERN HOVER EFFECT:
 * When you hover over a game card on this page, it will get a subtle "glow"
 * using a box-shadow that matches your site's color scheme.
*/
.game-card:hover {
    transform: translateY(-5px); /* A smaller lift effect */
    box-shadow: 0 0 25px rgba(106, 13, 173, 0.5); /* Vibrant purple glow */
}


/* =============================================== */
/* Redesigned Load More Button & Loader          */
/* =============================================== */

.load-more-container {
    text-align: center;
    margin-top: 40px;
    padding: 20px 0;
}

.load-more-btn {
    /* A modern, gradient-based button design */
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem; /* Slightly larger text */
    font-weight: 500;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative; /* Needed for the icon */
    overflow: hidden;
}

.load-more-btn::before {
    /* We add a subtle download icon to the button for better UI */
    font-family: "Font Awesome 6 Free";
    content: "\f019"; /* Font Awesome download icon */
    font-weight: 900;
    margin-right: 10px;
}

.load-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(106, 13, 173, 0.4); /* Stronger glow on hover */
}

/* A sleeker, more modern loading spinner */
.loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Lighter border */
    border-radius: 50%;
    border-top-color: var(--primary-color); /* The spinning part */
    animation: spin 1s ease-in-out infinite;
}

/* The spin animation remains the same, but the easing makes it feel smoother */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.hidden {
    display: none;
}


/* =============================================== */
/* Responsive Adjustments                        */
/* =============================================== */

/* For large tablets and small laptops */
@media (max-width: 1200px) {
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* For smaller tablets */
@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For mobile phones */
@media (max-width: 576px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}
```

### **Step 3: Verify Your `header.php`**

Finally, make sure your `includes/header.php` file is correctly loading this stylesheet. The "CSS Links" section should look like this, with the last line being the most important:

```php
<!-- CSS Links - Load stylesheets based on the current page -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/header-footer.css">
<?php if (basename($_SERVER['PHP_SELF']) == 'index.php'): ?><link rel="stylesheet" href="assets/css/home.css"><?php endif; ?>
<?php if (basename($_SERVER['PHP_SELF']) == 'game.php'): ?><link rel="stylesheet" href="assets/css/single-post.css"><?php endif; ?>
<?php if (basename($_SERVER['PHP_SELF']) == 'page.php'): ?><link rel="stylesheet" href="assets/css/page.css"><?php endif; ?>
<?php if (basename($_SERVER['PHP_SELF']) == 'category.php'): ?><link rel="stylesheet" href="assets/css/category.css"><?php endif; ?>