Luxury_Retro_Gaming_Filters

<div class="font-['Cinzel_Decorative'] bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 max-w-full mx-auto">
  <h2 class="text-2xl sm:text-3xl font-bold text-center mb-6 uppercase tracking-wider text-rose-800 dark:text-rose-400">Game Filters</h2>
  
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Platform Filter -->
    <div class="flex flex-col">
      <label for="platform-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Platform</label>
      <select id="platform-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Platforms</option>
        <option value="pc">PC</option>
        <option value="playstation">PlayStation</option>
        <option value="xbox">Xbox</option>
        <option value="nintendo">Nintendo</option>
      </select>
    </div>

    <!-- Genre Filter -->
    <div class="flex flex-col">
      <label for="genre-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Genre</label>
      <select id="genre-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Genres</option>
        <option value="rpg">RPG</option>
        <option value="action">Action</option>
        <option value="strategy">Strategy</option>
        <option value="adventure">Adventure</option>
        <option value="sports">Sports</option>
      </select>
    </div>

    <!-- Year Filter -->
    <div class="flex flex-col">
      <label for="year-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Year</label>
      <select id="year-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">All Years</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
        <option value="2021">2021</option>
        <option value="older">Older</option>
      </select>
    </div>

    <!-- Price Filter (conceptual, could be 'free', 'paid' or specific range) -->
    <div class="flex flex-col">
      <label for="price-select" class="text-sm font-semibold mb-2 text-stone-700 dark:text-stone-300">Price</label>
      <select id="price-select" class="p-2 border border-stone-400 dark:border-stone-600 rounded-md bg-stone-200 dark:bg-stone-800 text-stone-800 dark:text-stone-200 outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent transition duration-200 ease-in-out">
        <option value="all">Any Price</option>
        <option value="free">Free</option>
        <option value="paid">Paid</option>
        <option value="under-20">Under $20</option>
      </select>
    </div>

  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-rose-700 text-rose-100 dark:bg-rose-600 dark:text-rose-100 rounded-md font-bold uppercase tracking-wider shadow-lg hover:bg-rose-800 dark:hover:bg-rose-700 transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      Apply Filters
    </button>
  </div>
</div>

<!-- To use the Cinzel Decorative font, you'd typically include it via Google Fonts in your HTML head: -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet"> -->