:root {
            --primary-bg: #121212;
            --secondary-bg: #1e1e1e;
            --accent-color: #be8dff;/*#6e45e2 */
            --text-color: #ffffff;
            --text-secondary: #b0b0b0;
            --card-bg: #2a2a2a;
            --light-bg: #b0b0b0;
            --light-text: #333333;
            --select: #b100ff;
            --highlight: orange;
            --modal:rgba(0, 0, 0, 0.9);
    }

.stickman-icon {
                font-size: 1.2rem;
                color: rgba(255, 255, 255, 0.8);
                transition: all 0.25s ease-out;
                width: 40px;
                height: 38px;
                text-align: center;
                background: rgba(255, 255, 255, 0.05);
                padding: 6px;
                border-radius: 6px;
                border-left: 2px solid orange; /* Orange accent */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Hover State - Matching other categories */
            .mobile-nav-link:hover .stickman-icon {
                color: white;
                background: rgba(255, 255, 255, 0.1);
                transform: scale(1.1);
                border-left-color: #ffb74d; /* Lighter orange */
            }

            /* Active State - Matching other categories */
            .mobile-nav-link.active .stickman-icon {
                color: white;
                background: rgba(255, 255, 255, 0.15);
                border-left-color: #fb8c00; /* Darker orange */
            }

            /* SVG specific styling */
            .stickman-svg {
                width: 100%;
                height: 100%;
                fill: currentColor; /* Inherits from parent */
                transition: inherit; /* Inherits the same transition */
            }

            /* Container adjustments to match other icons */
            .mobile-nav-link[href*="stickman"] {
                padding: 10px 15px;
                gap: 12px;
            }




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth!important;
    overflow-x: hidden!important;
}

.container {
    max-width: 1700px;
    margin: 0 auto; /* REDUCE FOR  SMALL SCREEN*/
    padding: 5px 20px;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
}





/*
_---------------------------------------------------------------
Header section
----------------------------------------------------------------
*/
/* Header Fixes */
.header {
    position:fixed;
    top: 0;
    z-index: 1000;
    background-color: var(--secondary-bg);
    padding: 3px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: 100%;
}

.play {
    padding-top: 20px;
}

/* Prevent content from going under header */
main.container {
    padding-top: 70px; /* Adjust based on your header height */
}

.header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
          
        }

/*
-----------------------------------------------------------------------------------
SEARCH STYLES
----------------------------------------------------------------------------------
*/
.search-bar {
            width: 500px;
            position: relative;
            margin: 0 25px;
  
        }

.search-bar input {
            width:100%;
            padding: 10px 50px 10px 15px;
            border-radius: 25px;
            border: none;
            background-color: var(--card-bg);
            color: var(--text-color);
            font-size: 16px;
            outline: 2px solid var(--accent-color)
        }



.search-bar input:focus, .search-bar input:hover, .search-modal-input:focus, .search-modal-input:hover {
    outline: 2px solid var(--select);
}

/*
-----------------------------------------------------------------------------------
SMALL PHONE SEARCH
-----------------------------------------------------------------------------------
*/
.search-modal-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: var(--modal);
}


.search-modal-close {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}


.search-bar {
    position: relative;
}

.search-bar .clear-search {
    position: absolute;
    right:10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 16px;
    z-index:2;
}



.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-bg);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.search-modal.active {
    transform: translateY(0);
}

.search-modal-header {
    padding: 15px;
    background-color: var(--secondary-bg);
    border-bottom: 1px solid var(--card-bg);
}

.search-modal-bar {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
}



.search-modal-input {
    flex: 1;
    padding: 10px 15px 10px 40px; /* Left padding for search icon */
    border-radius: 25px;
    border: none;
    background-color: var(--card-bg);
    color: var(--text-color);
    font-size: 16px;
    outline: 2px solid var(--accent-color);
}

/* Clear button positioning in modal  */
.search-modal-bar .clear-search {
    position: absolute;
    right: 50px; /* Adjust based on your close button width */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    z-index: 2;
}

.search-modal-close {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    margin-left: 5px;
}

.search-icon-btn {
    position: absolute;
    left: 10px;
    top: 50%; /* Center vertically  */ 
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    padding: 8px;
}

/* Search icon positioning in modal  */ 
.search-modal-bar .search-icon-btn {
    position: absolute;
    left: 8px!important;
    top: 50% !important;
    transform: translateY(-50%)!important;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    padding: 8px;
}

.search-modal-bar .search-icon-btn {
    left: 20px; 
    top:35px;
    transform: translateY(-50%); /* PROB NOT WORKING */
}

/* Adjust input padding to prevent text overlap */
.search-modal-input {
    padding-left: 40px !important; /* Space for search icon */ 
    padding-right: 80px !important; /* Space for clear and close buttons */
}

input:not(:placeholder-shown) + .clear-search,
.search-modal-input:not(:placeholder-shown) + .clear-search {
    opacity: 1;
    visibility: visible;
}

.clear-search {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    z-index: 2;
}





/* Adjust the input padding to ensure text doesn't overlap the icon */
.search-bar input, .search-modal-input {
    width: 100%;
    padding: 10px 30px 10px 40px; /* Left padding increased to 40px*/ 
    border-radius: 25px;
    border: none;
    background-color: var(--card-bg);
    color: var(--text-color);
    font-size: 16px;
    outline: 2px solid var(--accent-color);
}



.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--secondary-bg);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.search-modal .search-results {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 10px;
    border-radius: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--card-bg);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--accent-color);
}

.search-result-thumb {
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-result-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.search-no-results {
    padding: 15px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

 
.search-modal-content {
    padding-top: 0;
}


.search-bar input:not(:placeholder-shown) + .clear-search,
.search-modal-input:not(:placeholder-shown) + .clear-search {
    opacity: 1;
    visibility: visible;
}

 
.search-icon-btn {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    padding: 8px;
}


.search-modal-bar .search-icon-btn {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}


.search-bar input, .search-modal-input {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

 .search-modal-bar .clear-search {
    right: 50px;
}

/*
------------------------------------------------------------------------------------
SEARCH PREVIEW STYLE
---------------------------------------------------------------------------------
*/
.search-results {
    position: absolute;
    top: 110%!important;
    left: 0;
    right: 0;
    background-color: var(--secondary-bg);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1000!important;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.search-modal .search-results {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 10px;
    border-radius: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid var(--card-bg);
    text-decoration: none;
    color: var(--text-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: var(--accent-color);
}

.search-result-thumb {
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    background-position: center;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
}

.search-result-info {
    flex-grow: 1;
    overflow: hidden;
}

.search-result-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.search-result-category {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.search-no-results {
    padding: 15px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

.view-all-item {
    background-color: rgba(110, 69, 226, 0.1);
    font-weight: 600;
}

.view-all-item:hover {
    background-color: var(--accent-color);
}

.view-all-item .search-result-title {
    color: var(--accent-color);
}

.view-all-item:hover .search-result-title {
    color: white;
}

/* Shared scrollbar styles for all search containers */
.search-results,
.search-modal-content {
    
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--scrollbar-track, var(--card-bg));
    
    /* WebKit scrollbar base */
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 4px;
        transition: background 0.2s ease;
    }
    
    &::-webkit-scrollbar-thumb:hover {
        background: #7d8fee; /* Lighter accent color */
    }
    
    /* Account for scrollbar width */
    padding-right: 8px;
}

/* Individual track colors */
.search-results::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.search-modal-content::-webkit-scrollbar-track {
    background: var(--primary-bg);
    border-radius: 4px;
}


.search-modal-content {
    --scrollbar-track: var(--primary-bg); 
     
}
.search-result-item {
        padding:15px 5px;
    }

/* Mobile Menu Scrollbar (separate from search) */
.mobile-menu {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--accent-color) var(--secondary-bg);
}

.mobile-menu-content {
    /* WebKit Scrollbar */
    &::-webkit-scrollbar {
        width: 10px; /* Slightly thinner than search */
    }

    &::-webkit-scrollbar-thumb {
        background: var(--highlight); /* Your orange color */
        border-radius: 3px;
        border: 1px solid rgba(255,255,255,0.1);
        transition: all 0.3s ease;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #ff9d00; /* Brighter orange on hover */
        transform: scaleX(1.1); /* Slight width increase */
    }

    &::-webkit-scrollbar-track {
        background: var(--secondary-bg);
        border-left: 1px solid rgba(0,0,0,0.2);
    }

    /* Right padding to prevent content clipping */
    padding-right: 5px;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    .mobile-menu-content {
        &::-webkit-scrollbar {
            width: 4px; /* Extra thin on small mobile */
        }
        
        &::-webkit-scrollbar-thumb {
            border-radius: 2px;
        }
        
        padding-right: 3px;
    }
}


.header-actions {
            display: flex;
            align-items: center;
            gap: 0 5px;
        }

.logo {
    max-width: 180px;
    height:auto;

   }


.btn-filter, .btn-search-mobile, .btn-hamburger  {
    padding: 8px 10px;
    border-radius: 5px;
    border: 2px solid var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-weight: 900;
   
}

.btn-search-mobile{
    display: none;
}

.btn-hamburger  {
    color: var(--text-secondary);
    background-color:  rgba(190, 141, 255, 0.8)
     
} 


.btn-hamburger i {
    font-weight: 900;
    color: white;
   
}

.btn-hamburger:hover {
    background-color:  rgba(190, 141, 255, 1)
    
}
  

.mobile-menu {
    position: fixed;
    top:0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #423e3e 0%, #1e1e1e 100%) !important;
    z-index: 100000;
    transition: left 0.5s ease !important;
    overflow-y: auto;
    font-size: 10px;
}


/*MAKE THE MENU OPEN :NOT(SEARCH) */ 
.mobile-menu.active {
    left:0; /* -100% */
    transition: left 0.5s ease-in 0s;
}

.main {
    margin-bottom: 5px;
}

.menu-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.7rem;
    cursor: pointer;
    z-index: 1001;
}
/*------------------------------*/
/* Tags Section Styling */
.tags {
    margin-top: 30px;
    border-top: 2px solid var(--card-bg);
    
}

.tags h2 {
   
    margin-bottom: 6px;
    padding-bottom: 5px;
   
}

/* Tag links styling to match other nav links */
.tags .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.tags .mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
}

.tags .mobile-nav-link:not(.all) i {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.25s ease-out;
    
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 6px;
    border-left: 2px solid #c2fd00;
    height: 30px;
    width: 40px;
}

.tags .mobile-nav-link:hover i {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    
   
}




.tags .mobile-nav-link[href="tags.html"]:hover {
    background-color: var(--accent-color);
}

.tags .mobile-nav-link[href="tags.html"] span {
    color: var(--accent-color);
}

.tags .mobile-nav-link[href="tags.html"]:hover span {
    color: white;
}

/*-----------------------------*/

.mobile-menu-content {
    padding: 55px 10px 20px 10px;
}
/* Remove all existing hover effects */
.mobile-nav-link:hover,
.category-link:hover, 
.tag-link:hover {
    outline: none!important;
    border-bottom: var(--accent-color);
    
    text-decoration: none;
    border-radius:unset!important;
    background-color: unset!important;
}

/* Simple hover line effect */
.mobile-nav-link,
.category-link,
.tag-link {
    position: relative;
    display: inline-block;
}

.mobile-nav-link:hover::after,
.category-link:hover::after,
.tag-link:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 130%;
    height: 2px; /* Line thickness */
    background-color: var(--accent-color); /* Purple line */
}

/* Adjust for links with icons */
.category-link:hover::after,
.mobile-nav-link:hover::after {
    width: calc(100% - 3px); /* Account for icon width */
    left: 2px; /* Align with text */
}

/* For 'All Categories/Tags' links */
.view-all-link:hover::after {
    content: '';
    position: absolute;
    left: 24px; /* Match icon width */
    bottom: 0;
    width: calc(100% - 24px);
    height: 1px;
    background-color: var(--accent-color);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 8px!important;
    color: var(--text-color);
    text-decoration: none;
    padding: 6px!important;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.3s;
} 

.all {
    display: block;
    width:fit-content!important;
    margin-left: 30px!important;
    background-color: unset!important
    
}

/* Unified style for both "All Categories" and "All Tags" links */
.mobile-nav-link.all {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin-top: 5px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
}



.mobile-nav-link.all span {
    color: var(--text-color);
    font-weight: 500;
}

.mobile-nav-link.all:hover span {
    color: white;
}

/* Icon styling - same for both */
.mobile-nav-link.all i,
.mobile-nav-link.all svg {
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: all 0.25s ease-out;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 6px;
}

.mobile-nav-link.all:hover i,
.mobile-nav-link.all:hover svg {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Remove any special border styling */
.mobile-nav-link.all i,
.mobile-nav-link.all svg {
    border-left: none !important;
}

/* Ensure both links have same width behavior */
.tags .mobile-nav-link.all,
.mobile-menu-section .mobile-nav-link.all {
    width: calc(100% - 30px); /* Match padding of parent */
    margin: 5px 0;
}




.mobile-menu-section {
    margin: 5px 0;
    border-top: 1px solid var(--card-bg);
    padding-top: 20px;
}



 


.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(191px, 1fr));
    gap: 20px;
    padding: 20px 0;
}
        
.category-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            text-decoration: none;
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }
        
        .category-card:hover {
            
            background-color: var(--accent-color);
        }
        
        .category-icon {
            font-size: 2rem;
            margin-bottom: 10px;
            color: var(--accent-color);
        }
        
        .category-card:hover .category-icon {
            color: white;
        }
        
        .category-title {
            font-size:1em;
            margin: 0;
            font-weight: 600;
        }
        
    
/* 
---------------------------------------------------------------------
end here
-------------------------------------------------------------------
*/


.btn-theme:hover, .btn-filter:hover, .btn-search-mobile:hover {
    background-color: var(--accent-color);
    color: white;
}


.btn-filter i, .btn-theme i {
    font-size: 17px;
}

/*
 ------------------------------------------------------------------
Back button
--------------------------------------------------------------------
*/

div.back {
    width: 100%;
    gap: 0 12px;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    height: fit-content;
}

.back a {
    color: var(--text-color);
    text-decoration: none;
    padding: 10px 9px;
    border-radius: 5px;
    background-color: var(--accent-color);
    font-weight: 600;
    text-align: center;
    
    
}

.back a:hover {
    outline:2px solid var(--select);
} 

/*------------------------------------------------------------------------*/


/* 
--------------------------------------------------------------------
NAV BAR 
--------------------------------------------------------------------
*/
mobile-nav-link
.quick-links {
            display: flex;
            justify-content:center;
            gap:0 5px;
            flex-wrap: nowrap;
            font-size:16px;
            white-space: nowrap;
            font-weight: 700;
         
        }

.quick-link {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s;
          
}
.quick-link:hover, .active {
          background-color: var(--accent-color)
}
        



/*
---------------------------------------------------------------
END HERE
----------------------------------------------------------------
*/


/*
---------------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------------
*/
.footer {
            background-color: var(--secondary-bg);
            padding: 40px 0;
            margin-top: 60px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
.footer-section h3 {
            margin-bottom: 20px;
            color: var(--accent-color);
        }


.footer-links li {
            margin-bottom: 10px;
            font-weight: 500;
            list-style: none;
        }
.footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s;
        }
.footer-links a:hover {
            color: var(--accent-color);
        }
.credits {
            margin-top: 30px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 14px;
        }
   

/* 
------------------------------------------------------------------------
Horizontal scroll bevaviour
------------------------------------------------------------------------
*/
.scroll-container-wrapper {
    position: relative;
}

.scroll-arrow {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    height:100% ;
    background-color: var(--accent-color);
    border: none;
    font-weight: 900;
    color: var(--text-color);
    font-size: 2.5em;
    cursor: pointer;
    z-index: 9!important;
    display:flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-in;
    opacity: .5;
}

.scroll-arrow:hover {
    opacity: 1;
}

.scroll-arrow-left {
    left: 0;
}
.scroll-arrow-right {
    right: 0;
}

.scroll-arrow.hidden {
    display: none!important;
}

.categories-scroll-container {
    display: flex;
    flex-direction: column;
    gap:5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;

}

.categories-scroll-container::-webkit-scrollbar {
    display: none;
}

.categories-scroll-row {
    display: flex;
    gap: 10px;
    min-width: max-content;
    padding-bottom: 10px;
}





.category-item:hover {
    outline: 2px solid var(--select);
    background-color: var(--accent-color);
  
}


.category-item {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    max-width: 200px;
    outline: 2px solid var( --card-bg);
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 15px;
    text-align: center;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    border-radius: 8px;
    background-size:100% 100%;
    background-position:center;
    background-repeat: no-repeat;
    background-color: var(--card-bg);
    text-decoration: none;
    white-space: wrap;   
}

.category-item[style*="background-image"] {
    padding: 5px;
}

.category-item[style*="background-image"] .category-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.category-item[style*="background-image"] span:not(.category-icon) {
    font-weight: 700;
    font-size: 1em;
    position: relative;
    z-index: 2;
}

  
.category-item[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: all 0.3s ease;
}

.category-item[style*="background-image"]:hover::before {
    background: rgba(0, 0, 0, .1);
}


.category-item[style*="background-image"] .category-icon {
    position: relative;
    z-index: 2;
}


.categories-scroll-row {
    display: flex;
    gap: 10px;
    min-width:max-content;
    padding-bottom: 10px;
    align-items: stretch; 
}

.category-item {
    flex: 0 0 150px;
   
}

/* Add this at the BOTTOM of your CSS file */
@media (max-width: 640px) {
    /* Horizontal scroll container adjustments */
    
}

/* 
---------------------------------------------------------------------
END HERE
---------------------------------------------------------------------
*/





/*
---------------------------------------------------------------------
GAME CARTEGORIES
---------------------------------------------------------------------
*/


        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(191px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }

.games-scroll-container {
    padding: 15px;
}

.section {
    margin: 30px 0;
}

.section-header { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

}

.section-title, .tags h2 { 
    font-size: 25px;
    color: var(--accent-color);
}

.view-all {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
    

}

.view-all:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.games-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 10px;
}

.games-scroll-container::-webkit-scrollbar {
    display: none;
}

.games-scroll-row {
    display: flex;
    gap: 6px;
    min-width: max-content;
}



/*
--------------------------------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------------------------------
*/

 .game-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
    flex: 0 0 180px;
    position: relative;
}

.game-card:hover {
    outline: 2px solid var(--select);
}

.game-thumbnail {
    height: 120px;
    position: relative;
    overflow: hidden;
}


.game-info {
    padding: 10px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 5px;
    width: 100%;
    min-height: 50vh;
    padding: 10px;
}

.game-cartegory {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
        min-height: 90vh;
        align-content: flex-start!important;
    }

.game-cartegory .game-card {
   height: 115px;
  
}

@media (min-width:281px) and (max-width:640px) {
    .game-cartegory {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap:5px;
        padding: 10px
    }
    
    
    
}

@media (max-width: 280px) {
    .game-cartegory {
        display: flex;
        flex-wrap: wrap;
        gap:5px;
        padding: 15px
        
    }
    
    .game-cartegory .game-card {
        flex-basis: 90px;
        flex-grow: 1;
        flex-shrink: 0;
    }
}


    









.placeholder .game-thumbnail {
    background: linear-gradient(90deg, var(--secondary-bg) 25%, var(--card-bg) 50%, var(--secondary-bg) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.game-info {
    padding: 10px;
}


.game-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 0 0 180px;
    height: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.featured-grid .game-card {
    height: 160px;
    width: 100%;
    min-width: 0; 
}


.game-card:hover {
    
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transition:unset ;/* TO REMOVE THE BORDER PRESS THING */
}

.game-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size:100% 100%!important;
    background-position: center;
    transition: transform 0.3s ease;
}
    

.game-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 10px;
    background-color: rgba(10, 10, 30, 0.5);
    background: linear-gradient(to top, rgba(10, 10, 30, 0.95) 0%,rgba(30, 30, 60, 0.7) 35%,rgba(70, 70, 90, 0.4) 65%,rgba(120, 120, 140, 0.2) 85%,rgba(255, 255, 255, 0) 100%);   
    color: white;
    font-size: 13px!important;
    font-weight: 600;
    transform: translateY(100%);
    text-align: center;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    
}

game-cartegory .game-card ~ .game-title-overlay {
    font-size: 2px!important;
    background:none;
}

.game-card:hover .game-title-overlay {
    transform: translateY(0);
}
















 
    
    /* Featured grid cards (from previous solution) */
    .featured-grid {
        display: grid;
       
        gap: 8px;
    }
    
    .featured-grid .game-card {
        flex: 0 0 auto;
        width: 100%;
        height: 150px;
        
    }

/* Instructions Modal - Relative Positioning */
.instructions-modal {
    position: absolute; /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.instructions-content {
    background-color: var(--secondary-bg);
    padding: 18px;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}












        .instructions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .instructions-title {
            color: var(--accent-color);
            font-size: 20px;
        }

        .close-instructions {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 20px;
            cursor: pointer;
        }

.error-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4d4d;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    z-index: 9999;
}

.category-count {
        position:absolute!important;
        background-color: rgba(0, 0, 0, .9);
        color: white;
        width: fit-content;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        padding: 0 8px;
        border-radius: 5px;
        z-index: 3;
        bottom:5px;
        left: 15px
    }
    
    .category-item {
        position: relative; /* This makes the count position relative to the card */
        min-height: 150px;
        max-width: 200px;
        outline: 2px solid var(--card-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        text-align: center;
        color: white;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        border-radius: 8px;
        background-size:100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--card-bg);
        text-decoration: none;
        white-space: wrap;
    }
    
    .category-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
        transition: all 0.3s ease;
    }
/* Home Icon - Purple Theme */
.home-icon, .categories-icon,.popular-icon, .trophy-icon, .new-games-icon  {
    width: 25px;
    height:25px;
    
    transition: all 0.1s ease-out;
}

.home-icon path {
    fill: #b388ff;
    stroke: #7c4dff;
    stroke-width: 0.5px;
}

/* New Games Icon - Gold Discovery Theme */
.new-games-icon {
    
scale: 1.2
}

.new-games-icon path {
    fill: #FFD700; /* Gold color */
    stroke: #FFA500; /* Orange stroke */
    stroke-width: 0.5px;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.7));
}

/* Hover Effects */
.mobile-nav-link:hover .home-icon {
    transform: scale(1.01);
}



.mobile-nav-link:hover .home-icon path {
    fill: #d1b3ff;
}

.mobile-nav-link:hover .new-games-icon {
    transform: scale(1);
}

.mobile-nav-link:hover .new-games-icon path {
    fill: #FFEE58; /* Brighter gold on hover */
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.9));
}

/* Active State */
.mobile-nav-link.active .home-icon path {
    fill: #7c4dff;
    filter: drop-shadow(0 0 8px rgba(124, 77, 255, 0.9));
}

.mobile-nav-link.active .new-games-icon path {
    fill: #FFC107;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.9));
}

/* Popular Games Link Container */
.mobile-nav-link[href="popular.html"] {
    display: flex;
    align-items: center;
    height: 48px; /* Fixed height for perfect alignment */
    
}

.mobile-nav-link {
    width:100%;
    padding: 15px 10px;
    
}

.mobile-nav-link:hover {
   outline: 2px solid var(--select);
   transition: unset;
}

/* Popular Games Link - Match other menu items */
.mobile-nav-link[href="popular.html"] {
    padding: 15px 10px; /* Match other links */
    display: flex;
    align-items: center;
    height: auto; /* Remove fixed height */
}

/* Popular Icon adjustments */
.popular-icon {
   
    filter: drop-shadow(0 0 2px rgba(255, 100, 0, 0.7));
    transform: translateY(1px); /* Fine-tune vertical alignment */
}

/* Fire colors */
.popular-icon path:first-child {
    fill: #ff5e00; /* Base fire orange */
}

.popular-icon path:last-child {
    fill: #ffbb00; /* Flame tip yellow */
    opacity: 0.9;
}

/* Hover state - match other icons */
.mobile-nav-link:hover .popular-icon {
    transform: scale(1.05) translateY(1px);
    filter: drop-shadow(0 0 4px rgba(255, 69, 0, 0.9));
}

/* Active state - match other icons */
.mobile-nav-link.active .popular-icon {
    filter: drop-shadow(0 0 8px rgba(255, 50, 0, 0.9));
}

/* Make fire glow on hover */
.mobile-nav-link:hover .popular-icon path:first-child {
    fill: #ff4500;
}

.mobile-nav-link:hover .popular-icon path:last-child {
    fill: #ffcc00;
    opacity: 1;
}


/* Trophy Icon - Best Games */
.trophy-icon {
    

    transition: all 0.1s ease-out;
    filter: drop-shadow(0 0 2px rgba(255, 180, 0, 0.7));
}

.trophy-base {
    fill: #F39D00; /* Trophy base color */
}

.trophy-cup {
    fill: #F8B705; /* Trophy cup color */
    opacity: 0.9;
}

.trophy-star {
    fill: #FFFFFF; /* Star color */
}

/* Hover Effects */
.mobile-nav-link:hover .trophy-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 0 4px rgba(255, 180, 0, 0.9));
}

/* Make trophy "shine" on hover */
.mobile-nav-link:hover .trophy-base {
    fill: #FFA500;
}

.mobile-nav-link:hover .trophy-cup {
    fill: #FFC107;
    opacity: 1;
}

/* Active State */
.mobile-nav-link.active .trophy-icon {
    filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.9));
}

/* Ensure same padding as other icons */
.mobile-nav-link[href="best.html"] {
    padding: 15px 10px;
    display: flex;
    align-items: center;
}


/* Clean Icon Styling for Dark Theme */
.mobile-nav-link i.bi {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8); /* Soft white */
    transition: all 0.25s ease-out;
    width: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 6px;
}

/* Hover State */
.mobile-nav-link:hover i.bi {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* Active State */
.mobile-nav-link.active i.bi {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}


.mobile-nav-link i.bi {
    border-left: 2px solid #ff9800;
}
/* Continue with unique left borders for other categories */

/* Keep your existing spacing */
.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    transition: all 0.2s ease;
}

/* Subtle hover effect */
.mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 400px) {
     .featured-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Smaller width */
        gap: 3px; /* Reduce gap between cards */
    }

    .featured-grid .game-card {
        height: 100px; /* Smaller height */
    }

    .featured-grid .game-title-overlay {
        font-size: 7px; /* Smaller text */
        padding: 3px; /* Less padding */
    }

    /* Horizontal Scroll Games - Smaller Cards */
    .games-scroll-row {
        gap: 3px; /* Reduce gap between cards */
    }

    .game-card {
        flex: 0 0 80px; /* Smaller width */
        height: 80px; /* Smaller height */
    }

    .game-title-overlay {
        font-size: 8px; /* Smaller text */
        padding: 4px; /* Less padding */
    }
    

    /* Recently Played Section */
.desktop-recently-played {
    display: none!important;
}

@media (min-width: 641px) {
    .desktop-recently-played {
        display: block !important;
    }
}

#recently-played .games-scroll-container {
    position: relative;
}

#recently-played .games-scroll-row {
    display: flex;
    gap: 10px;
    min-width: max-content;
    
}

#recently-played .game-card {
    flex: 0 0 120px; /* Smaller width for recently played */
    height: 120px; /* Smaller height for recently played */
}


#recently-played:not(:has(.game-card)) {
    display: none !important;
}}

#recently-played .game-card {
    flex: 0 0 95px;   /* Very narrow width */
    height: 80px;     /* Square cards */
    margin: 0 2px;    /* Reduce gap between cards */
}

#recently-played .game-title-overlay {
   display: none;
}

.tags-alphabetical {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alphabet-header {
    font-size: 2rem;
    color: var(--accent-color);
    margin: 20px 0 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--accent-color);
}

.tags-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.tag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--card-bg);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.tag-item:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px);
}

.tag-name {
    font-weight: 600;
}

.tag-count {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.tag-item:hover .tag-count {
    color: white;
}

/* Tag Page Styles */
.tag-games-container {
    padding: 20px 0;
}

.tag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.back-to-tags {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tag-games-view {
    padding: 20px;
}

#back-to-tags {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 20px;
}

#back-to-tags:hover {
    background: var(--highlight);
}

.tag-games-view h2 {
    color: var(--accent-color);
    margin-bottom: 20px;
    font-size: 1.8rem;
}



.categories-icon path {
    fill: #d0d0d0; /* Rich purple */
    opacity: 0.9;
    transition: all 0.2s ease;
}

/* Hover State - More vibrant */
.mobile-nav-link:hover .categories-icon path {
    fill: #ffffff;
    opacity: 1;
    filter: 
        drop-shadow(0 0 2px rgba(138, 108, 255, 0.7)) 
        brightness(1.1);
}

/* Active State - Deep purple glow */
.mobile-nav-link.active .categories-icon path {
    fill: #7c4dff;
    filter: 
        drop-shadow(0 0 4px rgba(124, 77, 255, 0.9)) 
        brightness(1.2);
}



.mobile-nav-link[href="categories.html"] svg {
    margin-right: 0; /* Remove extra spacing */
    transform: translateY(1px); /* Pixel-perfect vertical align */
}

.mobile-menu-section:nth-last-child(1) {  /* Targets last section (Information) */
    margin-top: 10px !important;  /* Reduce from original 30px */
    padding-top: 10px !important; /* Reduce from original 20px */
    border-top: 2px solid var(--card-bg); /* Keep border but thinner if needed */
}

/* Add this to your CSS file */
#back-to-tags {
    margin-bottom: 30px; /* Increased from 20px to give more space */
    display: inline-block; /* Makes it only take needed width */
}

.tag-games-view h2 {
    margin-top: 0; /* Remove any default top margin */
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: var(--accent-color);
}