.game-title font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem;

.download-btn:hover background: #27ae60;

name: "The Binding of Isaac: Rebirth", image: "https://placehold.co/400x150/5a2e2e/white?text=Isaac", ram: 2, storageMB: 450, gpu: "Integrada", tier: "low", description: "Roguelike viciante" ,

container.innerHTML = filtered.map(game => const compat = (pcTier !== "all") ? getCompatibility(game, pcTier) : "green"; let compatText = ""; if (compat === "green") compatText = "🟢 Roda perfeitamente"; else if (compat === "yellow") compatText = "🟡 Pode lagar levemente"; else compatText = "🔴 Não recomendado";

name: "Undertale", image: "https://placehold.co/400x150/ffcc00/black?text=Undertale", ram: 1, storageMB: 150, gpu: "Qualquer", tier: "potato", description: "RPG único, 200MB apenas" ,

.game-card background: #24282f; border-radius: 20px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 8px 20px rgba(0,0,0,0.3);

return ` <div class="game-card"> <div class="game-img" style="background-image: url('$game.image');"> <div class="compatibility-badge $compat">$compatText</div> </div> <div class="game-info"> <div class="game-title">$game.name</div> <div class="specs"> <span>💾 $game.storageMBMB</span> <span>🧠 $game.ramGB RAM</span> <span>🖥️ $game.gpu</span> </div> <div style="font-size:0.8rem; margin: 8px 0;">$game.description</div> <a href="#" class="download-btn">⬇️ Baixar Jogo</a> </div> </div> `; ).join("");

name: "Need for Speed: Most Wanted (2005)", image: "https://placehold.co/400x150/black/blue?text=NFS+MW", ram: 1, storageMB: 2300, gpu: "GeForce FX", tier: "low", description: "Corrida lendária para PCs antigos"

.green color: #2ecc71; .yellow color: #f1c40f; .red color: #e74c3c;

<div class="filter-bar"> <div class="filter-group"> <label>⚡ Nível do seu PC</label> <select id="pcTier"> <option value="all">Todos os jogos</option> <option value="potato">🥔 PC Batata (1GB RAM, sem GPU)</option> <option value="low">💻 PC Fraco (2-4GB RAM, integrada)</option> <option value="office">📀 Office PC (4GB RAM, HD 4000+)</option> </select> </div> <div class="filter-group"> <label>📦 Tamanho máximo</label> <select id="maxSize"> <option value="9999">Qualquer tamanho</option> <option value="200">Até 200MB</option> <option value="500">Até 500MB</option> <option value="1000">Até 1GB</option> </select> </div> <button id="applyFilter">🔍 Filtrar Jogos</button> </div>

// Event handlers document.getElementById("applyFilter").addEventListener("click", () => const pcTier = document.getElementById("pcTier").value; const maxSize = parseInt(document.getElementById("maxSize").value); renderGames(pcTier, maxSize); );

];

function renderGames(pcTier, maxSizeMB) const container = document.getElementById("gamesContainer"); const filtered = gamesDatabase.filter(game => if (maxSizeMB !== 9999 && game.storageMB > maxSizeMB) return false; if (pcTier === "all") return true; const compat = getCompatibility(game, pcTier); return compat !== "red"; // hide red games for the chosen tier );

.compatibility-badge position: absolute; bottom: 10px; right: 10px; padding: 5px 12px; border-radius: 40px; font-size: 0.75rem; font-weight: bold; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);