Improved styling

wwwroot/app.js

@@ -482,22 +482,27 @@ function buildCard(s, { showAuthor = false, allowDelete = false, allowEdit = fal
   const visual = hasImage
     ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="${t("card.openScreenshot")}" style="background-image:url('${s.screenshotUrl}')"></button>`
     : `<div class="card-visual"></div>`;
+  const hasPlayers = (s.minPlayers || s.maxPlayers);
+  const players = hasPlayers ? `${t("card.players", { min: s.minPlayers ?? "?", max: s.maxPlayers ?? "?" })}` : "";
+  const genreAndPlayers = s.genre ? (hasPlayers ? `${s.genre} • ${players}` : s.genre) : (hasPlayers ? players : undefined);
+  const hasExtraInfo = genreAndPlayers || s.gameUrl || s.youtubeUrl;
   card.innerHTML = `
     ${visual}
     <div class="card-body">
       <div class="card-title-row">
         <h3>${s.name}</h3>
         <div class="title-meta">
-          ${s.gameUrl ? `<a class="link compact" href="${s.gameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
-          ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
           ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
           ${allowEdit ? `<button class="chip" data-edit="${s.id}" type="button">${t("card.edit")}</button>` : ""}
           ${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button">${t("card.delete")}</button>` : ""}
         </div>
       </div>
-      ${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
+      ${hasExtraInfo ? `<p class="muted">` : ""}
+      ${genreAndPlayers ? genreAndPlayers : ""}
+      ${s.gameUrl ? `<a class="link compact" href="${s.gameUrl}" target="_blank" rel="noopener">${t("card.site")}</a>` : ""}
+      ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">${t("card.youtube")}</a>` : ""}
+      ${hasExtraInfo ? `</p>` : ""}
       ${s.description ? `<p>${s.description}</p>` : ""}
-      ${(s.minPlayers || s.maxPlayers) ? `<p class="muted">${t("card.players", { min: s.minPlayers ?? "?", max: s.maxPlayers ?? "?" })}</p>` : ""}
     </div>
   `;
   if (hasImage) {

wwwroot/index.html

@@ -85,6 +85,7 @@
         </div>
         <div class="suggest-grid">
           <div class="card">
+            <h3 data-i18n="suggest.new">Add new suggestion</h2>
             <form id="suggest-form" class="stack">
               <label class="stack">
                 <span class="label" data-i18n="form.gameName">Game name *</span>

wwwroot/styles.css

@@ -107,12 +107,12 @@ textarea { min-height: 80px; resize: vertical; }
 
 button {
   cursor: pointer;
-  background: linear-gradient(135deg, #20b2aa, #159f9a);
+  background: linear-gradient(-5deg, #30afea, #80e2ff);
-  border-color: #128b88;
+  border-color: #124b88;
   font-weight: 700;
   color: #2c1c0d;
 }
-button:hover { background: linear-gradient(135deg, #2bc6bf, #16b8ae); }
+button:hover { background: linear-gradient(-5deg, #40e2ff, #e0f0ff ); }
 
 button.danger { background: #e0564f; border-color: #c54740; color: #fffaf3; }
 
@@ -158,11 +158,12 @@ h3 { margin: 0; font-size: 18px; }
 
 .card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
 .title-meta { display: flex; align-items: center; gap: 8px; }
+p { margin: 0; }
 .muted { color: #7a6a53; margin: 0; }
-.link { color: #0f8a86; text-decoration: none; font-weight: 700; }
+.link { color: #30afea; text-decoration: none; font-weight: 700; }
 .link:hover { text-decoration: underline; }
 .link.compact { font-size: 14px; }
-.chip { background: #f1dfc5; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
+.chip { background: #c5dff1; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
 .chip.danger-chip { background: #e0564f; border: 1px solid #c54740; color: #fffaf3; }
 
 .vote-controls { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 6px; }
@@ -185,7 +186,7 @@ input[type="range"].full-slider {
   width: 100%;
   height: 20px;
   border-radius: 999px;
-  background: linear-gradient(90deg, #1ea8a0, #1fc2b4, #22c55e);
+  background: linear-gradient(90deg, #c52222, #d5c522, #22c55e);
   outline: none;
   box-shadow: inset 0 0 0 1px #e3d4bd, 0 4px 12px rgba(0,0,0,0.18);
 }