Huge Movies Collection ✧

.title font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, #e6b800, #ff4d4d); -webkit-background-clip: text; background-clip: text; color: transparent;

.movie-year font-size: 0.8rem; color: #aaa; margin: 0.3rem 0; HUGE MOVIES COLLECTION

<!-- Movie Modal --> <div id="movieModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2 id="modalTitle"></h2> <p id="modalDetails"></p> <button id="modalWatchlistBtn" style="margin-top: 1rem; background:#f5c518; border:none; padding:0.5rem 1rem; border-radius:30px;">➕ Add to My Vault</button> </div> </div> .title font-size: 3rem

function toggleWatchlist(movie) if (!movie) return; const exists = watchlist.some(w => w.id === movie.id); if (exists) watchlist = watchlist.filter(w => w.id !== movie.id); else watchlist.push( id: movie.id, title: movie.title, year: movie.year ); .movie-year font-size: 0.8rem

.watchlist-badge margin-top: 8px; font-size: 0.7rem; background: #2a2a3a; display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px;

// User watchlist (localStorage) let watchlist = JSON.parse(localStorage.getItem('movieVault')) || [];