function showOnlyWatchlist() const watchlistMovies = masterMovies.filter(m => watchlist.some(w => w.id === m.id)); if (watchlistMovies.length === 0) alert("Your vault is empty — add movies from the gallery!"); return;

.poster width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #0b0b12;

currentFiltered = filtered; visibleCount = 30; renderGrid();

let currentModalMovie = null; function openModal(movie) currentModalMovie = movie; const modal = document.getElementById('movieModal'); document.getElementById('modalTitle').innerText = movie.title; document.getElementById('modalDetails').innerHTML = <strong>$movie.year</strong> • $movie.genre<br> ⭐ $movie.rating/10<br><br> 📖 $movie.synopsis<br> 🎬 Part of the HUGE MOVIES COLLECTION. ; const btn = document.getElementById('modalWatchlistBtn'); const isIn = watchlist.some(w => w.id === movie.id); btn.innerText = isIn ? '❌ Remove from My Vault' : '➕ Add to My Vault'; modal.style.display = 'flex';

select, .sort-btn background: #0f0f17; border: 1px solid #333344; color: white; padding: 0.4rem 0.8rem; border-radius: 30px; cursor: pointer; font-size: 0.85rem;

@media (max-width: 640px) .movie-grid grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; .title font-size: 2rem;

.close-modal position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; cursor: pointer;