Enhance cards: larger screenshots, lightbox, full-width styled vote slider

wwwroot/app.js

@@ -128,7 +128,7 @@ function renderVotes() {
     const footer = document.createElement("div");
     footer.className = "vote-controls";
     footer.innerHTML = `
-      <input type="range" min="0" max="10" value="${current}" data-id="${s.id}">
+      <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
       <span class="score" id="score-${s.id}">${current}</span>`;
     li.querySelector(".card-body").appendChild(footer);
     list.appendChild(li);
@@ -263,8 +263,11 @@ function buildCard(s, { showAuthor }) {
   const card = document.createElement("article");
   card.className = "game-card";
   const hasImage = !!s.screenshotUrl;
+  const visual = hasImage
+    ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="Open screenshot" style="background-image:url('${s.screenshotUrl}')"></button>`
+    : `<div class="card-visual"></div>`;
   card.innerHTML = `
-    <div class="card-visual" style="${hasImage ? `background-image:url('${s.screenshotUrl}')` : ''}"></div>
+    ${visual}
     <div class="card-body">
       <div class="card-title-row">
         <h3>${s.name}</h3>
@@ -275,9 +278,31 @@ function buildCard(s, { showAuthor }) {
       ${s.youtubeUrl ? `<a class="link" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
     </div>
   `;
+  if (hasImage) {
+    const btn = card.querySelector(".card-visual");
+    btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
+  }
   return card;
 }
 
+function openLightbox(url, title) {
+  const overlay = document.createElement("div");
+  overlay.className = "lightbox";
+  overlay.innerHTML = `
+    <div class="lightbox-content">
+      <button class="lightbox-close" aria-label="Close">✕</button>
+      <img src="${url}" alt="${title}" />
+      <p>${title || ""}</p>
+    </div>
+  `;
+  overlay.addEventListener("click", (e) => {
+    if (e.target.classList.contains("lightbox") || e.target.classList.contains("lightbox-close")) {
+      overlay.remove();
+    }
+  });
+  document.body.appendChild(overlay);
+}
+
 async function main() {
   setupHandlers();
   try {