// Sort by rating descending filtered.sort((a,b) => b.rating - a.rating);
movieGrid.innerHTML = filtered.map(movie => ` <div class="movie-card" data-id="$movie.id"> <img class="poster" src="$movie.poster" alt="$movie.title" loading="lazy"> <div class="movie-info"> <div class="movie-title">$movie.title</div> <div class="year">$movie.year</div> <div class="rating"> <span class="star">⭐</span> <span class="rating-value">$movie.rating / 10</span> </div> <div class="synopsis">$movie.synopsis</div> </div> </div> `).join('');
.movie-title font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; top rated tamil movies
.movie-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2rem; margin-top: 1.5rem;
.movie-card:hover transform: translateY(-10px); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.6); border-color: #ff7e0555; // Sort by rating descending filtered
.hero h1 font-size: 2.8rem; background: linear-gradient(135deg, #ffb347, #ff7e05); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px;
body background: linear-gradient(145deg, #0b0b1a 0%, #10101e 100%); color: #f0f0f0; padding: 2rem 1.5rem; // Sort by rating descending filtered.sort((a
.rating display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0; font-weight: bold;