/* Scrollbar styles for the main content area, mirroring the settings panel */
  /* --- START Games Hub Specific Styles --- */
  /* ... your existing styles for settings, etc. ... */

  /* Scrollbar styles for the main content area */
  main.hub-container::-webkit-scrollbar {
    width: 10px; /* Adjust the width of the vertical scrollbar */
  }
  main.hub-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); /* A subtle, dark background for the track */
    border-radius: 5px; /* Optional: round the corners of the track */
  }
  main.hub-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2); /* A semi-transparent white/grey thumb */
    border-radius: 5px; /* Round the corners of the thumb */
    border: 2px solid transparent; /* Gives padding */
    background-clip: padding-box; /* Ensures background respects padding */
  }
  main.hub-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly more opaque on hover */
  }
  main.hub-container {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05); /* Firefox: thumb track */
    /* Ensure overflow-y is set for the scrollbar to appear */
    overflow-y: auto; /* Already in your code, but double-check */
  }
    header .header-container {
        display: flex !important;
        justify-content: space-between !important; /* Likely already present to separate logo and nav */
        align-items: center !important;
        /* Other container styles */
    }

    header nav ul {
        display: flex !important; /* Likely already present to lay out nav items */
        align-items: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 15px !important; /* Adjust gap as needed, handles space between ALL list items */
        /* Other ul styles */
    }


    /* Add this rule to push the button group to the right */
    /* Selects the list item with the class 'push-right' */
    header nav ul li.push-right {
        margin-left: auto !important;
    }

/* Define CSS Variables for colors */
:root {
    --overlay-background: rgba(0, 0, 0, 0.95); /* Default overlay color - Made darker */
    --cursor-border-color: rgba(255, 255, 255, 0.5); /* Default cursor border color (rgba with transparency for default look) */
    --cursor-hover-border-color: #007bff; /* Default cursor hover border color */
}

/* --- Base Styles --- */
/* Ensure custom cursor is the ONLY cursor */
body { cursor: none !important; }
a, button, [role="button"], [onclick], label, [tabindex]:not([tabindex="-1"]),
input, textarea, select { cursor: none !important; }
 p, span, div, h1, h2, h3, h4, h5, h6, [contenteditable] {
      cursor: none !important; /* No I-beam on text or editable fields */
 }
#custom-cursor { cursor: none !important; } /* Ensure the custom cursor element itself has none */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
}

html, body {
    scroll-behavior: smooth; /* For page jumps like #links */
    height: 100%; /* Ensure height for fixed background */
    overflow-x: hidden; /* Prevent horizontal scroll on body */
    color: #eee; /* Default text color */
}

body {
    background: url('../free-photo/abstract-luxury-blur-dark-grey-black-gradient-used-as-background-studio-wall-display-your-products_1258-63996_semt-ais_hybrid.jpg') no-repeat center center fixed; /* From Code #3 */
    background-size: cover;
    position: relative; /* Needed for ::before */
    min-height: 100vh; /* Ensure body takes full height */
    overflow-y: auto; /* Allow vertical scrolling */
}

/* Dark overlay */
body::before {
    content: '';
    position: fixed; /* Fixed overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use the CSS variable for background */
    background: var(--overlay-background);
    z-index: -11; /* Behind content */
    pointer-events: none; /* Allow clicks to pass through overlay */

}

/* Particles.js Container */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* From Code #3, puts particles above overlay, below content */
    display: block;
}

/* Custom Cursor */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    /* Use the CSS variable for border color */
    border: 2px solid var(--cursor-border-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(var(--mouse-x, 0), var(--mouse-y, 0), 0) translate(-50%, -50%) scale(var(--cursor-scale, 1));
    /* DEFAULT: Performance mode ON - snappy movement (transform: 0s) */
    transition: transform 0s, border-color 0.2s ease-out, background-color 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
}

/* Performance mode OFF: Add smooth transition back */
body:not(.performance-cursor-on) #custom-cursor {
     transition: transform 0.1s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
}

#custom-cursor.clicked {
    --cursor-scale: 0.85;
    /* Keep clicked state using a fixed white for visibility */
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
}

#custom-cursor.on-interactive {
    width: 30px;
    height: 30px;
    /* Use the CSS variable for hover border color */
    border: 2px solid var(--cursor-hover-border-color);
    /* Keep the background semi-transparent blue for the interactive state */
    background-color: rgba(0, 123, 255, 0.2);
}

.version-text {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    z-index: 110;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}


/* --- Header --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px; /* From Code #3 */
    backdrop-filter: blur(12px); /* From Code #3 */
    -webkit-backdrop-filter: blur(12px);
    position: fixed;
    width: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7); /* Kept from previous result */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* From Code #3 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* From Code #3 */

    /* Initial state for animation - Kept from previous result */
    opacity: 0;
    transform: translateY(-50px);
    animation: headerEntrance 0.5s ease-out forwards;
}

/* Add .no-animations class to body to disable CSS animations */
body.no-animations header {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}
 body.no-animations .header-logo {
     animation: none;
     opacity: 1;
     transform: translateX(0);
 }
 body.no-animations nav ul li {
     animation: none !important; /* Use !important to override staggered delays */
     opacity: 1;
     transform: translateY(0);
 }
 body.no-animations .hero .button-container {
     animation: none !important; /* Use !important to override staggered delays */
     opacity: 1;
     transform: translateY(0);
 }


@keyframes headerEntrance {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.header-logo {
    height: 45px; /* From Code #3 */
    width: auto;
    display: block;
     /* Initial state for animation - Kept from previous result */
    opacity: 0;
    transform: translateX(-30px);
    animation: logoEntrance 0.5s ease-out forwards 0.1s;
}

@keyframes logoEntrance {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

nav ul {
    display: flex;
    list-style: none;
    gap: 20px; /* From Code #3 */
    align-items: center;
    margin: 0; /* From Code #3 */
    padding: 0; /* From Code #3 */
}

nav ul li {
    margin: 0; /* From Code #3 */
    padding: 0; /* From Code #3 */
     /* Initial state for staggered animation - Kept from previous result */
    opacity: 0;
    transform: translateY(-20px);
    animation: navItemEntrance 0.4s ease-out forwards;
}

 /* Staggering navigation items - Delays adjusted (Buttons link removed) */
nav ul li:nth-child(1) { animation-delay: 0.2s; } /* Home */
nav ul li:nth-child(2) { animation-delay: 0.25s; } /* Games */
nav ul li:nth-child(3) { animation-delay: 0.3s; } /* Apps */
nav ul li:nth-child(4) { animation-delay: 0.35s; } /* AI */
nav ul li:nth-child(5) { animation-delay: 0.4s; } /* DMCA */
nav ul li:nth-child(6) { animation-delay: 0.45s; } /* Settings */
nav ul li:nth-child(7) { animation-delay: 0.5s; } /* Built With Pulsar */
nav ul li:nth-child(8) { animation-delay: 0.55s; } /* Join Discord */


@keyframes navItemEntrance {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navigation Links - Merged visual styles from Code #3, kept specific selector and active state from previous result */
nav ul li a.nav-link {
    text-decoration: none;
    font-size: 1.1rem; /* From Code #3 */
    color: white; /* From Code #3 */
    padding: 10px 20px; /* From Code #3 */
    border-radius: 8px; /* From Code #3 */
    transition: all 0.3s ease;
    display: inline-block; /* From Code #3 */
}
 /* Navigation Link Hover - Merged visual styles from Code #3 */
nav ul li a.nav-link:hover {
    background: rgba(255, 255, 255, 0.3); /* From Code #3 */
    transform: scale(1.05); /* From Code #3 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* From Code #3 */
    color: white; /* Already present */
}
 /* Navigation Link Active - Kept from previous result */
nav ul li a.nav-link.active {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

 /* Discord/Special Buttons in Nav - Merged visual styles from Code #3, kept selector from previous result */
nav ul li .discord-btn {
    display: inline-block;
    background: linear-gradient(90deg, #7289da, #5a70d2); /* From Code #3 */
    color: white;
    text-decoration: none;
    padding: 12px 25px; /* From Code #3 */
    border-radius: 8px; /* From Code #3 */
    font-weight: bold;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); /* From Code #3 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* From Code #3 */
}
 /* Discord Button Hover - Merged visual styles from Code #3 */
nav ul li .discord-btn:hover {
    transform: scale(1.1); /* From Code #3 */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* From Code #3 */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.8); /* From Code #3 */
    background: linear-gradient(90deg, #6a7fcc, #566cc0); /* From Code #3 */
}

/* --- Generic Content Section Padding (applies to sections other than full-height hero) --- */
/* Kept from previous result */
.content-section {
    padding-top: 100px; /* To clear fixed header */
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    min-height: 100vh;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: none; /* Hidden by JS by default */
}


/* --- Hero Section --- */
 /* Kept from previous result */
.hero {
    height: 100vh; /* Maintain full viewport height for initial landing effect */
    display: flex; /* Set to flex by JS when active */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    flex-direction: column;
    /* Other styles inherited from .content-section or specific overrides */
    /* Padding-top handled by the wrapper div */
    box-sizing: border-box; /* Include padding in height */
}

 /* Wrapper for hero content to handle padding below header - Kept from previous result */
 .hero-content-wrapper {
      padding-top: 100px; /* Space for fixed header */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; /* Center content vertically within the wrapper */
      flex-grow: 1; /* Allow wrapper to take available space in the hero flex container */
      width: 100%; /* Ensure wrapper takes full width */
 }

 /* Hero h2 - Kept from previous result */
.hero h2 {
    font-size: 6rem;
    background: linear-gradient(45deg, #ffffff, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    white-space: nowrap;
    position: relative;
    margin-bottom: 40px;
    text-shadow: none;
    overflow: visible;
}
 /* Ensure visibility is initially controlled by JS - Kept from previous result */
 #home h2 { visibility: hidden; }

 /* Typing cursor - Kept from previous result */
.hero h2::after {
    content: '';
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: white;
    animation: none; /* JS handles visibility and potentially blink */
    visibility: hidden;
    /* Removed transition here as JS sets left/right directly */
     transition: none;
}

 .hero h2.typing::after {
     visibility: visible;
     /* No blink while typing */
     animation: none;
     right: 0; /* Cursor is at the right edge of text */
     left: auto;
 }

 .hero h2.typing-done::after {
    visibility: visible;
    animation: cursorBlink 1s infinite step-end;
    left: 100%; /* Cursor is past the text */
    right: auto;
 }

 /* Glow animation - Kept from previous result */
@keyframes cursorBlink {
    0%, 100% { background-color: transparent; }
    50% { background-color: white; }
}
@keyframes glow {
  0% { text-shadow: none; }
  100% { text-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 50px rgba(255, 255, 255, 0.8); }
}
@keyframes glowRepeat {
    0% { text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }
    100% { text-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 50px rgba(255, 255, 255, 0.8); }
}
.hero h2.glow {
    animation: glow 1s ease-out forwards, glowRepeat 1.5s infinite alternate 1s;
}


/* Container for buttons - Kept from previous result */
.hero .button-container {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(30px);
    animation: buttonEntrance 0.5s ease-out forwards;
}
 body.no-animations .hero .button-container {
      animation: none;
      opacity: 1;
      transform: translateY(0);
 }

 /* Staggering buttons - Kept from previous result */
.hero .button-container .get-started-btn:nth-child(1) { animation-delay: 0.9s; }
.hero .button-container .get-started-btn:nth-child(2) { animation-delay: 1.0s; }
.hero .button-container .get-started-btn:nth-child(3) { animation-delay: 1.1s; }
.hero .button-container .get-started-btn:nth-child(4) { animation-delay: 1.2s; }

 /* Disable staggering delay if animations are off - Kept from previous result */
 body.no-animations .hero .button-container .get-started-btn {
      animation-delay: 0s !important;
 }

@keyframes buttonEntrance {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Get Started Button - Kept from previous result */
.get-started-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: bold;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.get-started-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
 body.no-animations .get-started-btn:hover {
     transform: none; /* Disable hover transform if animations off */
 }

 /* Ripple effect - Kept from previous result */
.get-started-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}
 body.no-animations .get-started-btn::before {
      display: none; /* Disable ripple if animations off */
 }
.get-started-btn:hover::before {
    width: 200px;
    height: 200px;
    opacity: 1;
}

/* Moving Phrases Container - Kept from previous result */
.moving-phrases {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  display: none; /* Hidden by JS by default */
}

/* Moving Phrase - Kept from previous result */
.moving-phrase {
  position: absolute;
  font-size: 1.5rem;
  color: #ffffff; /* Fallback */
  background: linear-gradient(45deg, #ffffff, #cccccc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

/* --- Main Hub Container (From Code #3) --- */
main.hub-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 100px 40px 20px 40px; /* Space for fixed header */
    position: relative;
    z-index: 10; /* Above particles */
    display: none; /* Hidden by JS by default */
}


/* --- Hub Controls (Search, Toggle) (From Code #3) --- */
.hub-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    gap: 20px;
    flex-wrap: wrap;
     /* Entrance Animation (From previous result) */
    opacity: 0;
    transform: translateY(20px);
    animation: controlsEntrance 0.6s ease-out forwards 0.7s;
}
 @keyframes controlsEntrance {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 body.no-animations .hub-controls { animation: none; opacity: 1; transform: translateY(0); }


.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0px 5px 0px 15px;
    flex-grow: 1;
    max-width: 500px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

#myInput {
    flex-grow: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    outline: none;
}
#myInput::placeholder {
    color: #aaa;
}

.search-icon-btn {
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 1.1rem;
    padding: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.search-icon-btn:hover {
    color: #fff;
}

.toggle-categories-btn {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15));
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.toggle-categories-btn:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.2));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    color: #fff;
}

/* --- Game Categories (From Code #3) --- */
.game-category {
    margin-bottom: 40px;
    /* Ensure category section can be flex-column for header/button container */
    display: flex;
    flex-direction: column;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-header h6 {
    font-size: 1.8rem;
    background: linear-gradient(45deg, #ffffff, #cccccc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
     /* Entrance Animation (From previous result) */
     opacity: 0;
     transform: translateX(-20px);
     animation: categoryHeaderEntrance 0.5s ease-out forwards;
     animation-delay: 1.2s; /* Base delay */
}
 @keyframes categoryHeaderEntrance {
     from { opacity: 0; transform: translateX(-20px); }
     to { opacity: 1; transform: translateX(0); }
 }
 body.no-animations .category-header h6 { animation: none; opacity: 1; transform: translateX(0); }


.category-header h6 i {
    font-size: 0.9em;
    background: linear-gradient(45deg, #ffffff, #cccccc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.scroll-arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}
 /* Removed incomplete button[style*="display: none"] rule from Code #3 */

.scroll-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* Hidden by default, JS will show/hide based on scroll position */
    display: none;
}
.scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Arrow animations (From previous result / Code #2) */
.scroll-arrow {
    opacity: 1; /* Base state */
    transform: scale(1) translateZ(0); /* Add translateZ for GPU acceleration */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transition properties */
    pointer-events: auto; /* Allow clicks */
    will-change: opacity, transform; /* Optimize for animation */
    /* Removed duplicate width/height/background/color/radius/cursor */
}
.scroll-arrow.hidden {
    opacity: 0;
    transform: scale(0.8) translateZ(0);
    pointer-events: none;
}
 /* Re-added hover for consistency */
.scroll-arrow:hover {
    transform: scale(1.1) translateZ(0);
    background: rgba(0, 0, 0, 0.7); /* Slightly darker hover background */
}
.scroll-arrow:active {
    transform: scale(0.95) translateZ(0);
    transition: transform 0.1s ease;
}
@keyframes arrowPulse {
    0% { transform: scale(1) translateZ(0); }
    50% { transform: scale(1.15) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}
.scroll-arrow.show-pulse {
    animation: arrowPulse 0.4s ease;
}


/* --- Game Button Containers (From Code #3) --- */
.btn-container,
.favorite-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px 20px 5px;
    gap: 20px;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    flex-wrap: nowrap; /* Prevent wrapping to new lines */
     /* Entrance Animation (From previous result) */
    opacity: 0;
    transform: translateY(20px);
    animation: categoriesEntrance 0.6s ease-out forwards 0.9s; /* Animation with delay */
    will-change: scroll-position; /* Optimize for scrolling (From previous result) */
    transform: translateZ(0); /* Force GPU rendering (From previous result) */
}
.btn-container::-webkit-scrollbar,
.favorite-container::-webkit-scrollbar {
    display: none;
}

/* Grid container for the "All Games" section (From Code #3) */
.btn-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 10px 0;
     /* No explicit entrance animation here, often part of parent or staggered JS */
     /* But adding the same opacity/transform as horizontal containers for consistency if needed */
      opacity: 0;
      transform: translateY(20px);
      animation: categoriesEntrance 0.6s ease-out forwards 0.9s; /* Apply same anim */
}

 /* Entrance Animation Keyframe (From previous result) */
  @keyframes categoriesEntrance {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
  }
  body.no-animations .btn-container,
  body.no-animations .favorite-container,
  body.no-animations .btn-container-grid { animation: none; opacity: 1; transform: translateY(0); }


/* --- Game Button Styling (From Code #3) --- */
.btn {
    display: flex;
    flex-direction: column; /* Stack image and info bar vertically */
    align-items: center;
    justify-content: flex-start; /* Start layout from the top */
    width: 180px;
    height: 150px; /* Define a fixed height for consistency */
    background: linear-gradient(135deg, rgba(45, 45, 45, 0.65), rgba(60, 60, 60, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0;
    overflow: hidden; /* Crucial to hide the info bar when it's translated down */
    color: #ddd;
    text-decoration: none;
    cursor: pointer;
    position: relative; /* Needed for positioning the info bar and heart */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    vertical-align: top;
    flex-shrink: 0;
    transform: translateZ(0); /* GPU acceleration for buttons (From previous result) */

    /* --- Animation Properties --- (From Code #3 - these look like BASE/HOVER related) */
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-out,
                transform 0.3s ease-out,
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease;
    will-change: opacity, transform;
    /* Entrance animation would be added here or by JS */
}

/* Ensure grid buttons have auto width (From Code #3) */
.btn-container-grid .btn {
    width: auto;
    height: 150px; /* Keep consistent height */
}

/* Hover state for the button (From Code #3) */
.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, rgba(55, 55, 55, 0.75), rgba(70, 70, 70, 0.85));
}
 body.no-animations .btn:hover { transform: none; } /* Disable hover transform if animations off */


/* Functional hidden class for search results (From Code #3) */
.btn.hidden {
    display: none !important; /* Hide buttons not matching search */
}

/* Style for the image - should always be visible (From Code #3) */
.btn .imgg {
    display: block;
    width: 100%;
    flex-grow: 1; /* Allow image to take available space */
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #222;
}

/* Style for the game info bar container (From Code #3) */
.game-info-bar {
    position: absolute; /* Position relative to the button */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Example height, adjust as needed */
    background-color: rgba(0, 0, 0, 0.7); /* Dark background for the bar */
    color: #ddd; /* Text color */
    display: flex; /* Use flexbox to center text inside */
    align-items: center;
    justify-content: center;
    padding: 0 10px; /* Padding inside the bar */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* --- Hide by default using transform --- */
    transform: translateY(100%); /* Move the bar down by its own height */
    transition: transform 0.3s ease-out; /* Smooth slide-up transition */
    z-index: 2; /* Ensure it's above the image but below the heart */
}

/* Style for the game name text inside the bar (From Code #3) */
.game-info-bar .game-name {
    display: block; /* Ensure span behaves as a block */
    font-size: 0.95rem;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping inside the bar */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
    width: 100%; /* Take full width of the bar */
    text-align: center; /* Center the text */
}

/* On button hover, show the game info bar (From Code #3) */
.btn:hover .game-info-bar {
    transform: translateY(0); /* Slide the bar up into view */
}

/* Style for the heart icon (From Code #3) */
.btn .heart-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 4px 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 5; /* Ensure it's above everything else */
    cursor: pointer;
    pointer-events: auto; /* Ensure clicks are registered */
}
.btn:hover .heart-icon {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.6);
}
.btn .heart-icon.hearted {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.8);
}
.btn .heart-icon.hearted:hover {
     color: #ff4747;
}

/* Keep Favorites Section Styling (From Code #3) */
.favorites-section {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    /* display: none; -- Controlled by JS */
}

/* Message for no search results (From Code #3) */
#noResultsMessage {
    text-align: center;
    margin-top: 30px;
    font-size: 1.3em;
    color: #ccc;
}

/* --- Settings Section --- */
 /* Kept from previous result */
#settings {
     padding-top: 100px; /* Space for fixed header */
     padding-bottom: 40px;
     width: 100%;
     max-width: 800px; /* Optional: Max width for content */
     margin: 0 auto; /* Center the content block */
     min-height: 100vh; /* Ensure it takes at least full viewport height */
     position: relative;
     z-index: 10;
     color: #eee; /* Text color */
     padding-left: 20px; /* Add some padding */
     padding-right: 20px; /* Add some padding */
     display: none; /* Hidden by JS by default */
}

#settings h2 {
     font-size: 2.5rem;
     margin-bottom: 30px;
     background: linear-gradient(45deg, #ffffff, #cccccc);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
     text-align: center;
}

.settings-group {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.settings-group h3 {
    font-size: 1.4rem;
    color: #ccc;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

/* Updated setting-item structure for layout control */
.setting-item {
    display: flex; /* Use flexbox */
    align-items: flex-start; /* Align items to the start (top) */
    margin-bottom: 20px; /* Increased margin */
    font-size: 1rem;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px 20px; /* row-gap column-gap */
    /* border-bottom: 1px dashed rgba(255,255,255,0.1); */ /* Optional separator */
     padding-bottom: 10px; /* Optional padding below */
}
 .settings-group .setting-item:last-child {
      margin-bottom: 0; /* No bottom margin for the last item */
      border-bottom: none; /* No border for the last item */
      padding-bottom: 0;
 }

.setting-label-wrapper {
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 150px; /* Keep minimum label width */
     /* Adjust width/basis for wrapping */
    flex-basis: 180px; /* Allow label to take more space if needed */
    margin-right: 10px; /* Keep space between label and control wrapper */
}

.setting-item label {
     display: block; /* Ensure label takes full width of its wrapper */
     color: #bbb;
     line-height: 35px; /* Match height of buttons/inputs for alignment */
}

 .setting-control-wrapper {
      flex-grow: 1; /* Allow control wrapper to take remaining space */
      flex-shrink: 1;
      /* min-width: 0; */ /* Allow shrinking below content size */
 }


 /* Controls container - Color Buttons List (now acts as a grid within the setting item) */
 .settings-group .color-button-list {
     display: grid; /* Use grid for layout */
     grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* Responsive grid of buttons, min size 40px */
     gap: 8px; /* Gap between color buttons */
     width: 100%; /* Take full width of its control wrapper */
     /* Removed flex-grow: 1; as grid handles layout within its container */
     align-items: center; /* Vertically center buttons in their grid cells */
     padding-top: 5px; /* Add some space above the grid */
 }

 /* Individual Color Buttons (now larger, used IN settings) */
 .settings-color-button {
     display: flex; /* Use flex to center content (checkmark) */
     align-items: center;
     justify-content: center;
     width: 40px; /* Fixed size, closer to old .colored-button */
     height: 40px; /* Fixed size */
     border-radius: 8px; /* Slightly rounded */
     border: 2px solid transparent; /* Default transparent border */
     cursor: pointer;
     padding: 0; /* Remove padding */
     background-color: #555; /* Fallback background */
     transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     position: relative; /* Needed for checkmark/indicator */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Added subtle shadow */
     text-align: center; /* Center text if any */
     /* Actual color set via inline style or data-color */
 }

 /* Active (Selected) Color Button (in settings) */
 .settings-color-button.active {
     border-color: #007bff; /* Highlight active button */
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* More prominent shadow */
     transform: scale(1.05); /* Slightly larger */
 }
  /* Optional: Add a checkmark indicator for active button */
 .settings-color-button.active::after {
      content: '\f00c'; /* Font Awesome checkmark icon */
      font-family: 'Font Awesome 6 Free'; /* Ensure correct font */
      font-weight: 900; /* Solid icon style */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white; /* Color of the checkmark */
      font-size: 0.9rem; /* Slightly larger checkmark */
      text-shadow: 0 0 4px rgba(0,0,0,0.7); /* More prominent shadow */
 }

 /* Hover state for the color buttons in settings */
 .settings-color-button:hover:not(.active) { /* Hover effect only if not already active */
     border-color: rgba(255, 255, 255, 0.4);
     transform: scale(1.05);
 }


 /* Other Controls within settings-item (not color buttons) */
 .setting-item .setting-control-wrapper > button:not(.settings-color-button), /* Exclude the color buttons */
 .setting-item .setting-control-wrapper > input[type="text"],
 .setting-item .setting-control-wrapper > select { /* Apply consistent styling to controls */
     flex-grow: 0;
     flex-shrink: 0;
     min-width: 120px; /* Standard minimum width for controls */
     text-align: center;
     padding: 8px 15px; /* Match button padding */
     border: 1px solid rgba(255, 255, 255, 0.2); /* Match button border */
     border-radius: 4px; /* Match button border-radius */
     background: rgba(255, 255, 255, 0.1); /* Match button background */
     color: #eee; /* Ensure text inputs have color */
     font-size: 1rem; /* Ensure text inputs/selects have font size */
     outline: none;
     transition: all 0.3s ease; /* Add transition for consistency */
     height: 35px; /* Ensure height matches buttons roughly */
     box-sizing: border-box; /* Include padding/border in height/width */
     display: block; /* Ensure they take full width of their wrapper on wrap */
     width: 100%; /* Ensure they take full width of their wrapper */
 }

   /* Specific adjustments for text inputs/selects */
  .setting-item input[type="text"],
  .setting-item select {
       background-color: #333; /* Slightly different background for inputs */
       padding: 8px 10px; /* Adjust padding for text inputs */
       text-align: left; /* Align text left in inputs */
  }


 /* Special style for the Reset button */
 .settings-group #reset-settings-btn {
      min-width: auto; /* Reset button doesn't need standard min-width */
      flex-grow: 0;
      margin-top: 0; /* Adjust margin if wrapped */
      background: rgba(255, 99, 71, 0.1); /* Tomato color background */
      border-color: rgba(255, 99, 71, 0.3);
      color: #ff6b6b;
 }
  .settings-group #reset-settings-btn:hover {
       background: rgba(255, 99, 71, 0.2);
       border-color: rgba(255, 99, 71, 0.5);
       color: #fff;
       box-shadow: 0 0 8px rgba(255, 99, 71, 0.2);
  }


 .settings-group button {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #e0e0e0;
     /* Padding, border-radius, font-size, cursor, transition are in the common rule above */
 }
  .settings-group button:hover {
       background: rgba(255, 255, 255, 0.2);
       color: #fff;
       border-color: rgba(255, 255, 255, 0.3);
       box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
  }


 /* Specific style for disabled select */
#theme-select:disabled {
    cursor: not-allowed !important; /* Use custom cursor */
    opacity: 0.6;
    background-color: #222;
    border-color: #444;
    color: #aaa;
}


/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
     /* Hub Adjustments (From Code #3) */
    main.hub-container { padding: 90px 30px 20px 30px; }
    .btn-container-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .btn { width: 160px; height: 140px; }
    .game-info-bar { height: 35px; font-size: 0.9em; }
    .game-info-bar .game-name { font-size: 0.9em; }

     /* Settings Adjustments */
     .setting-item label { min-width: 120px; flex-basis: 150px;} /* Adjust label basis */
     .settings-group .color-button-list { grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); gap: 6px; } /* Adjust color button grid */
     .settings-color-button { width: 35px; height: 35px; } /* Adjust color button size */
     .setting-item .setting-control-wrapper > button:not(.settings-color-button),
     .setting-item .setting-control-wrapper > input[type="text"],
     .setting-item .setting-control-wrapper > select { min-width: 100px; }
}

@media (max-width: 768px) {
     header {
         flex-direction: column;
         padding: 10px 20px;
         align-items: center; /* Centered items on mobile header */
         /* Animation delays - Kept from previous result */
         animation-delay: 0s !important;
     }
     .header-logo {
         height: 40px;
         margin-bottom: 10px;
         /* Animation delays - Kept from previous result */
         animation-delay: 0.1s !important;
     }
     header nav { /* Added margin-top for nav when stacked */
         margin-top: 10px;
     }
     nav ul {
         margin-top: 10px; /* Adjust based on header margin-bottom */
         gap: 8px; /* From previous result */
         flex-wrap: wrap;
         justify-content: center;
     }
     nav ul li a.nav-link { font-size: 0.9rem; padding: 8px 12px; } /* Adjusted from Code #3 */
     nav ul li .discord-btn { padding: 8px 16px; font-size: 0.9rem; } /* Adjusted from Code #3 */

     /* Animation delays for nav items - Adjusted (Buttons link removed) */
     nav ul li:nth-child(1) { animation-delay: 0.4s !important; } /* Home */
     nav ul li:nth-child(2) { animation-delay: 0.45s !important; } /* Games */
     nav ul li:nth-child(3) { animation-delay: 0.5s !important; } /* Apps */
     nav ul li:nth-child(4) { animation-delay: 0.55s !important; } /* AI */
     nav ul li:nth-child(5) { animation-delay: 0.6s !important; } /* DMCA */
     nav ul li:nth-child(6) { animation-delay: 0.65s !important; } /* Settings */
     nav ul li:nth-child(7) { animation-delay: 0.7s !important; } /* Built With Pulsar */
     nav ul li:nth-child(8) { animation-delay: 0.75s !important; } /* Join Discord */


     /* Content Section Adjustments - Kept from previous result */
     .content-section {
         padding-top: 120px; /* Adjust based on header height */
         padding-left: 15px;
         padding-right: 15px;
         padding-bottom: 30px;
     }

     /* Hero Adjustments - Kept from previous result */
     .hero {
         padding-top: 0;
         justify-content: center;
         align-items: center;
         overflow: visible !important;
         height: auto;
         min-height: 100vh;
     }
     .hero-content-wrapper {
          padding-top: 120px; /* Apply padding here on small screens */
     }
     .hero h2 { font-size: 3.5rem; margin-bottom: 30px; }
     .hero h2::after { width: 2px; }
     .hero .button-container {
         flex-direction: column;
         gap: 10px;
         margin-top: 20px;
         width: 80%;
         max-width: 300px;
         margin-left: auto;
         margin-right: auto;
     }
     .hero .button-container .get-started-btn { width: 100%; }
     .moving-phrases { height: 80px; bottom: 30px; }
     .moving-phrase { font-size: 1rem; }

     /* Settings Section Adjustments - Updated layout handling */
     #settings h2 { font-size: 2rem; margin-bottom: 20px; }
     .settings-group { padding: 15px; }
     .settings-group h3 { font-size: 1.2rem; margin-bottom: 10px; padding-bottom: 8px; }
     .setting-item {
         flex-direction: column; /* Stack items vertically */
         align-items: flex-start; /* Align items to the left */
         margin-bottom: 15px;
         gap: 5px; /* Reduced gap when stacked */
     }
     .setting-label-wrapper {
         width: 100%; /* Label wrapper takes full width */
         min-width: auto; /* Remove min-width restriction */
         margin-right: 0; /* Remove margin */
     }
     .setting-item label {
          margin-bottom: 5px; /* Add margin below label */
          line-height: normal; /* Reset line height */
     }
      .setting-control-wrapper {
          width: 100%; /* Control wrapper takes full width */
          flex-grow: 0; /* Do not grow */
      }

     /* Controls within settings-item (take full width of control wrapper) */
     .settings-group .color-button-list,
     .setting-item .setting-control-wrapper > button:not(.settings-color-button),
     .setting-item .setting-control-wrapper > input[type="text"],
     .setting-item .setting-control-wrapper > select {
          width: 100%;
          min-width: auto;
          box-sizing: border-box; /* Include padding/border in width */
     }
     /* Color button list grid */
     .settings-group .color-button-list {
         grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); /* Adjust color button grid */
         gap: 6px; /* Adjust color button grid gap */
         padding-top: 0; /* Remove padding top when stacked */
     }
      .settings-color-button { width: 35px; height: 35px;} /* Adjust color button size */

     .setting-item #reset-settings-btn { width: 100%; min-width: auto; }


     /* Hub Adjustments (From Code #3) */
     main.hub-container { padding-top: 140px; } /* Adjusted padding-top from Code #3 for hub */
     .hub-controls { flex-direction: column; align-items: stretch; padding: 10px; gap: 10px; }
     .search-wrapper { max-width: none; padding: 0px 5px 0px 10px; }
     #myInput { padding: 8px; font-size: 0.9rem; }
     .search-icon-btn { padding: 8px; }
     .category-header h6 { font-size: 1.6rem; gap: 8px;}
     .scroll-arrow { width: 30px; height: 30px; font-size: 0.9rem; }
     .btn-container, .favorite-container { gap: 15px; padding: 8px 5px 15px 5px; }
     .btn-container-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
     .btn { width: 140px; height: 130px; }
     .game-info-bar { height: 30px; font-size: 0.85em; }
     .game-info-bar .game-name { font-size: 0.85em; }
     .btn .heart-icon { font-size: 1rem; top: 6px; right: 6px; padding: 3px 4px; }
}

@media (max-width: 480px) {
     header { padding: 8px 10px; }
     nav ul { gap: 6px; }
     nav ul li a.nav-link, .discord-btn { font-size: 0.8rem; padding: 5px 8px; }

     /* Content Section Adjustments - Kept from previous result, updated padding-top */
     .content-section {
         padding-top: 120px; /* Adjust padding-top */
         padding-left: 10px;
         padding-right: 10px;
         padding-bottom: 20px;
     }
     .hero { padding-top: 0; }
     .hero-content-wrapper {
           padding-top: 120px; /* Apply padding here on small screens */
      }

     .hero h2 { font-size: 2.5rem; }
     .hero .button-container { width: 90%; }
     .moving-phrases { height: 60px; bottom: 20px; }
     .moving-phrase { font-size: 0.8rem; }

     /* Settings Section Adjustments - Keep stacking, adjust grid */
     #settings h2 { font-size: 1.8rem; }
     .setting-item { gap: 5px; } /* Keep reduced gap */
     .settings-group .color-button-list { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 5px; } /* Adjust color button grid */
     .settings-color-button { width: 30px; height: 30px;} /* Smaller color buttons on smaller mobile */


     /* Hub Adjustments (From Code #3) */
     main.hub-container { padding-top: 120px; } /* Adjusted padding-top to match content-section */
     .category-header h6 { font-size: 1.4rem; gap: 6px; }
     .scroll-arrow { width: 28px; height: 28px; font-size: 0.8rem; }
     .btn-container, .favorite-container { gap: 10px; padding: 6px 4px 12px 4px; }
     .btn-container-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
     .btn { width: 110px; height: 120px; }
     .game-info-bar { height: 25px; font-size: 0.75em; }
     .game-info-bar .game-name { font-size: 0.75em; }
     .btn .heart-icon { font-size: 0.9rem; top: 5px; right: 5px; padding: 3px; }
}

 /* Specific style for disabled select */
#theme-select:disabled {
    cursor: not-allowed !important; /* Use custom cursor */
    opacity: 0.6;
    background-color: #222;
    border-color: #444;
    color: #aaa;
}