x; margin-bottom: 2rem; }
        .search-box { width: 100%; padding: 1.1rem 1.8rem; background: var(--dark-card); border: 2px solid var(--border); border-radius: 30px; color: var(--text-main); font-size: 1.15rem; outline: none; transition: all 0.3s; margin-bottom: 1.5rem; }
        .search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 5px rgba(139,92,246,0.2), 0 20px 50px rgba(139,92,246,0.3); transform: translateY(-4px); }
        .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }
        .filter-group { display: flex; flex-direction: column; text-align: left; }
        label { font-weight: 600; margin-bottom: 0.6rem; color: var(--primary-light); font-size: 0.9rem; }
        select, input[type="range"] { padding: 0.9rem 1.2rem; background: var(--dark-card); border: 2px solid var(--border); border-radius: 15px; color: var(--text-main); font-size: 1rem; outline: none; transition: all 0.3s; font-family: inherit; }
        select:focus, input[type="range"]:focus { border-color: var(--primary); box-shadow: 0 0 15px rgba(139,92,246,0.3); }
        .range-value { text-align: center; margin-top: 0.5rem; font-weight: bold; color: var(--primary-light); }
        .clear-filters { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #000; border: none; padding: 1rem 1.8rem; border-radius: 50px; cursor: pointer; font-size: 1rem; font-weight: 700; transition: all 0.3s; box-shadow: 0 8px 25px rgba(139,92,246,0.4); justify-self: center; grid-column: 1 / -1; }
        .clear-filters:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 35px rgba(139,92,246,0.6); }

        /* Resultados */
        .results-info { width: 100%; max-width: 1200px; padding: 1.2rem 2rem; background: var(--dark-card); border-radius: 20px; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border: 1px solid var(--border); backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0,0,0,0.6); }
        .favorites-link { color: var(--primary-light); cursor: pointer; font-weight: bold; text-decoration: underline; transition: all 0.3s; }
        .favorites-link:hover { color: var(--primary); text-shadow: 0 0 10px var(--primary-light); }

        /* Grid de juegos */
        .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; width: 100%; max-width: 1400px; }
        .game-card { background: var(--dark-card); border-radius: 25px; overflow: hidden; border: 2px solid var(--border); backdrop-filter: blur(10px); box-shadow: 0 15px 40px rgba(0,0,0,0.6); transition: all 0.3s; position: relative; }
        .game-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 60px rgba(139,92,246,0.4); border-color: var(--primary-light); }
        .game-image { width: 100%; height: 200px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; font-weight: 700; }
        .favorite-btn { position: absolute; top: 15px; right: 15px; background: rgba(10,10,15,0.8); border: 2px solid var(--primary); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; transition: all 0.3s; display: flex; align-items: center; justify-content: center; z-index: 2; }
        .favorite-btn:hover { transform: scale(1.2) rotate(15deg); background: rgba(139,92,246,0.2); }
        .favorite-btn.active { color: #e74c3c; border-color: #e74c3c; background: rgba(231, 76, 60, 0.2); text-shadow: 0 0 15px #e74c3c; }
        .game-content { padding: 1.8rem; text-align: left; }
        .game-title { font-size: 1.4rem; margin-bottom: 1rem; color: var(--text-main); font-weight: 600; }
        .game-details { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
        .tag { background: rgba(139,92,246,0.15); color: var(--primary-light); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); backdrop-filter: blur(5px); }
        .tag.players { background: rgba(167,139,250,0.15); color: var(--primary-light); }
        .tag.platform { background: rgba(79,172,254,0.15); color: #4facfe; }
        .tag.duration { background: rgba(67,233,123,0.15); color: #43e97b; }
        .tag.age-tag { background: rgba(243,156,18,0.15); color: #f39c12; border-color: #f39c12; }
        .description { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.2rem; }
        .no-results { text-align: center; padding: 4rem; background: var(--dark-card); border-radius: 25px; grid-column: 1 / -1; border: 2px solid var(--border); backdrop-filter: blur(10px); }

        @media (max-width: 768px) {
            .filters-grid { grid-template-columns: 1fr; }
            .game-grid { grid-template-columns: 1fr; }
            .results-info { flex-direction: column; }
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>

    <header>
        <a href="#" onclick="alert('💡 Prueba: Acción, Party, Cooperativo')">Sugerencias</a>
        <a href="#" onclick="alert('🎲 Recomendación IA: It Takes Two')">IA</a>
    </header>

    <main class="main-content">
        <h1 class="logo">GameFinder+</h1>
        <p class="logo-sub">SELECTOR DE JUEGOS</p>

        <div class="filters-section">
            <input type="text" class="search-box" id="searchBox" placeholder="🔍 Busca juegos...">
            
            <div class="filters-grid">
                <div class="filter-group"><label>Género</label><select id="genreFilter"><option value="">Todos</option><option value="accion">Acción</option><option value="estrategia">Estrategia</option><option value="rol">RPG</option><option value="puzzle">Puzzle</option><option value="terror">Terror</option><option value="cooperativo">Cooperativo</option><option value="party">Party</option><option value="simulacion">Simulación</option></select></div>
                <div class="filter-group"><label>Jugadores</label><select id="playersFilter"><option value="">Cualquier número</option><option value="1">1 jugador</option><option value="2">2 jugadores</option><option value="2-4">2-4 jugadores</option><option value="4+">4+ jugadores</option></select></div>
                <div class="filter-group"><label>Plataforma</label><select id="platformFilter"><option value="">Todas</option><option value="pc">PC</option><option value="ps5">PlayStation 5</option><option value="switch">Nintendo Switch</option><option value="movil">Móvil</option><option value="multi">Multiplataforma</option></select></div>
                <div class="filter-group"><label>Duración</label><select id="durationFilter"><option value="">Cualquier duración</option><option value="15min">15 min</option><option value="30min">30 min</option><option value="1h">1 hora</option><option value="2h+">2+ horas</option><option value="varios">Varios días</option></select></div>
                <div class="filter-group"><label>Edad mínima</label><input type="range" id="ageFilter" min="3" max="18" value="3"><div class="range-value">Desde <span id="ageValue">3</span> años</div></div>
                <button class="clear-filters" onclick="clearAllFilters()">🗑️ Limpiar filtros</button>
            </div>
        </div>

        <div class="results-info">
            <div><strong id="resultsCount">0</strong> juegos encontrados <span id="favoritesInfo"></span></div>
            <div><span class="favorites-link" onclick="toggleShowFavorites()">❤️ Ver <span id="favoritesCount">0</span> favoritos</span></div>
        </div>

        <div class="game-grid" id="gameGrid"></div>
    </main>

    <script>
        const games = [{ id: 1, name: "Zelda: Breath of the Wild", genre: "accion", players: "1", platform: "switch", duration: "2h+", minAge: 10, description: "Aventura épica de mundo abierto.", isFavorite: localStorage.getItem('fav-1') === 'true' }, { id: 2, name: "Mario Kart 8", genre: "party", players: "2-4", platform: "switch", duration: "30min", minAge: 3, description: "Juego de carreras para fiestas.", isFavorite: localStorage.getItem('fav-2') === 'true' }, { id: 3, name: "Among Us", genre: "cooperativo", players: "4+", platform: "multi", duration: "15min", minAge: 7, description: "Descubre al impostor.", isFavorite: localStorage.getItem('fav-3') === 'true' }, { id: 4, name: "Civilization VI", genre: "estrategia", players: "1", platform: "multi", duration: "varios", minAge: 12, description: "Construye un imperio eterno.", isFavorite: localStorage.getItem('fav-4') === 'true' }, { id: 5, name: "It Takes Two", genre: "cooperativo", players: "2", platform: "multi", duration: "1h", minAge: 12, description: "Aventura cooperativa para dos.", isFavorite: localStorage.getItem('fav-5') === 'true' }, { id: 6, name: "The Witcher 3", genre: "rol", players: "1", platform: "multi", duration: "2h+", minAge: 18, description: "RPG épico con decisiones morales.", isFavorite: localStorage.getItem('fav-6') === 'true' }, { id: 7, name: "Tetris Effect", genre: "puzzle", players: "1", platform: "multi", duration: "30min", minAge: 3, description: "Tetris meditativo y visual.", isFavorite: localStorage.getItem('fav-7') === 'true' }, { id: 8, name: "Phasmophobia", genre: "terror", players: "2-4", platform: "pc", duration: "1h", minAge: 16, description: "Terror paranormal cooperativo.", isFavorite: localStorage.getItem('fav-8') === 'true' }, { id: 9, name: "Stardew Valley", genre: "simulacion", players: "1", platform: "multi", duration: "2h+", minAge: 7, description: "Granja y vida rural relajante.", isFavorite: localStorage.getItem('fav-9') === 'true' }, { id: 10, name: "Overcooked! 2", genre: "party", players: "2-4", platform: "multi", duration: "30min", minAge: 7, description: "Cocina caótica en equipo.", isFavorite: localStorage.getItem('fav-10') === 'true' }];

        let currentFilters = { search: '', genre: '', players: '', platform: '', duration: '', minAge: 3 };
        let showingFavoritesOnly = false;

        document.getElementById('searchBox').addEventListener('input', (e) => { currentFilters.search = e.target.value.toLowerCase(); renderGames(); });
        ['genreFilter', 'playersFilter', 'platformFilter', 'durationFilter'].forEach(id => document.getElementById(id).addEventListener('change', (e) => { currentFilters[id.replace('Filter', '')] = e.target.value; renderGames(); }));
        document.getElementById('ageFilter').addEventListener('input', (e) => { currentFilters.minAge = parseInt(e.target.value); document.getElementById('ageValue').textContent = e.target.value; renderGames(); });

        function clearAllFilters() { currentFilters = { search: '', genre: '', players: '', platform: '', duration: '', minAge: 3 }; ['searchBox', 'genreFilter', 'playersFilter', 'platformFilter', 'durationFilter', 'ageFilter'].forEach(id => document.getElementById(id).value = id === 'ageFilter' ? '3' : ''); document.getElementById('ageValue').textContent = '3'; showingFavoritesOnly = false; renderGames(); }
        function toggleShowFavorites() { showingFavoritesOnly = !showingFavoritesOnly; document.querySelector('.favorites-link').innerHTML = showingFavoritesOnly ? '🎮 Ver todos los juegos' : `❤️ Ver <span id="favoritesCount">0</span> favoritos`; renderGames(); }
        function toggleFavorite(gameId) { const game = games.find(g => g.id === gameId); game.isFavorite = !game.isFavorite; localStorage.setItem(`fav-${gameId}`, game.isFavorite); updateFavoritesCount(); renderGames(); }
        function updateFavoritesCount() { const count = games.filter(g => g.isFavorite).length; document.getElementById('favoritesCount').textContent = count; document.getElementById('favoritesInfo').innerHTML = count > 0 ? ` | <span style="color: var(--primary-light);">❤️ ${count}</span>` : ''; }
        function filterGames() { let filtered = [...games]; if (showingFavoritesOnly) filtered = filtered.filter(g => g.isFavorite); return filtered.filter(game => { if (currentFilters.search && !game.name.toLowerCase().includes(currentFilters.search) && !game.description.toLowerCase().includes(currentFilters.search)) return false; if (currentFilters.genre && game.genre !== currentFilters.genre) return false; if (currentFilters.players && game.players !== currentFilters.players) return false; if (currentFilters.platform && game.platform !== currentFilters.platform) return false; if (currentFilters.duration && game.duration !== currentFilters.duration) return false; if (game.minAge < currentFilters.minAge) return false; return true; }); }
        function renderGames() { const filtered = filterGames(); document.getElementById('resultsCount').textContent = filtered.length; document.getElementById('gameGrid').innerHTML = filtered.map(game => `<div class="game-card"><div class="game-image">${game.name.split(':')[0]}</div><button class="favorite-btn ${game.isFavorite ? 'active' : ''}" onclick="toggleFavorite(${game.id})">❤️</button><div class="game-content"><h3 class="game-title">${game.name}</h3><div class="game-details"><span class="tag">${getGenreName(game.genre)}</span><span class="tag players">${getPlayersName(game.players)}</span><span class="tag platform">${getPlatformName(game.platform)}</span><span class="tag duration">${getDurationName(game.duration)}</span></div><p class="description">${game.description}</p><div class="tag age-tag">👤 Edad mínima: ${game.minAge} años</div></div></div>`).join(''); }
        function getGenreName(genre) { const names = { accion: 'Acción', estrategia: 'Estrategia', rol: 'RPG', puzzle: 'Puzzle', terror: 'Terror', cooperativo: 'Cooperativo', party: 'Party', simulacion: 'Simulación' }; return names[genre] || genre; }
        function getPlayersName(players) { const names = { '1': '1 jugador', '2': '2 jugadores', '2-4': '2-4 jugadores', '4+': '4+ jugadores' }; return names[players] || players; }
        function getPlatformName(platform) { const names = { pc: 'PC', ps5: 'PS5', switch: 'Switch', movil: 'Móvil', multi: 'Multiplataforma' }; return names[platform] || platform; }
        function getDurationName(duration) { const names = { '15min': '15 min', '30min': '30 min', '1h': '1 hora', '2h+': '2+ horas', 'varios': 'Varios días' }; return names[duration] || duration; }

        // Generar partículas
        const generateParticles = () => { const container = document.getElementById('particles'); const count = window.matchMedia('(max-width: 768px)').matches ? 12 : 25; for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.className = 'particle'; const size = Math.random() * 5 + 2; particle.style.cssText = `width: ${size}px; height: ${size}px; left: ${Math.random() * 100}%; top: ${Math.random() * 100}%; animation-delay: ${Math.random() * 20}s; animation-duration: ${Math.random() * 15 + 20}s;`; container.appendChild(particle); } };

        // Inicializar
        generateParticles();
        renderGames();
        updateFavoritesCount();
    </script>
</body>
</html>