Minor formatting changes

.gitignore

@@ -23,3 +23,4 @@ App_Data/
 # OS cruft
 Thumbs.db
 Desktop.ini
+Properties/launchSettings.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": false
+}

Properties/launchSettings.json

@@ -16,7 +16,7 @@
       "applicationUrl": "http://localhost:5116",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development",
-        "ADMIN_PASSWORD": "changeme"
+        "ADMIN_PASSWORD": "cookiedonut"
       }
     },
     "https": {
@@ -26,7 +26,7 @@
       "applicationUrl": "https://localhost:7103;http://localhost:5116",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development",
-        "ADMIN_PASSWORD": "changeme"
+        "ADMIN_PASSWORD": "cookiedonut"
       }
     },
     "IIS Express": {

wwwroot/app.js

@@ -1,5 +1,11 @@
 import { api, adminApi } from "./js/api.js";
-import { t, setLanguage, getLanguage, initI18n, onLanguageChange } from "./js/i18n.js";
+import {
+    t,
+    setLanguage,
+    getLanguage,
+    initI18n,
+    onLanguageChange,
+} from "./js/i18n.js";
 
 initI18n();
 
@@ -15,7 +21,7 @@ const state = {
     allSuggestionsSig: null,
     myVotes: [],
     results: [],
-  votesRendered: false
+    votesRendered: false,
 };
 
 const $ = (id) => document.getElementById(id);
@@ -36,16 +42,24 @@ function setAuthUI(isAuthed) {
     const main = document.querySelector("main");
     const statusBar = document.querySelector(".status-bar");
     const authCard = $("auth-card");
-  [main, statusBar].forEach(el => el?.classList.toggle("hidden", !isAuthed));
+    [main, statusBar].forEach((el) =>
+        el?.classList.toggle("hidden", !isAuthed),
+    );
     if (authCard) authCard.classList.toggle("hidden", isAuthed);
     const adminToggle = $("admin-toggle");
-  if (adminToggle) adminToggle.classList.toggle("hidden", !isAuthed || !state.me?.isAdmin);
+    if (adminToggle)
+        adminToggle.classList.toggle("hidden", !isAuthed || !state.me?.isAdmin);
     if (!isAuthed) {
         const adminCard = $("admin-card");
         if (adminCard) adminCard.classList.add("hidden");
         const loginUser = $("login-username");
         const cachedUser = getSavedUsername();
-    if (loginUser && cachedUser && !loginUser.dataset.userEditing && !loginUser.value) {
+        if (
+            loginUser &&
+            cachedUser &&
+            !loginUser.dataset.userEditing &&
+            !loginUser.value
+        ) {
             loginUser.value = cachedUser;
         }
     }
@@ -53,16 +67,22 @@ function setAuthUI(isAuthed) {
 
 function setAuthMode(mode) {
     state.authMode = mode;
-  document.querySelectorAll(".auth-form").forEach(form => {
+    document.querySelectorAll(".auth-form").forEach((form) => {
         form.classList.toggle("hidden", form.dataset.mode !== mode);
     });
     const title = $("auth-title");
     const toggleBtn = $("auth-toggle");
     if (title) {
-    title.textContent = mode === "login" ? t("auth.loginHeading") : t("auth.registerHeading");
+        title.textContent =
+            mode === "login"
+                ? t("auth.loginHeading")
+                : t("auth.registerHeading");
     }
     if (toggleBtn) {
-    toggleBtn.textContent = mode === "login" ? t("auth.switchToRegister") : t("auth.switchToLogin");
+        toggleBtn.textContent =
+            mode === "login"
+                ? t("auth.switchToRegister")
+                : t("auth.switchToLogin");
     }
 }
 
@@ -114,7 +134,11 @@ async function loadSuggestData() {
 }
 
 async function loadRevealData() {
-  if (state.phase === "Reveal" || state.phase === "Vote" || state.phase === "Results") {
+    if (
+        state.phase === "Reveal" ||
+        state.phase === "Vote" ||
+        state.phase === "Results"
+    ) {
         const latest = await api.allSuggestions();
         const latestSig = signatureSuggestions(latest);
         const changed = latestSig !== state.allSuggestionsSig;
@@ -147,14 +171,17 @@ async function loadResults() {
 }
 
 function renderPhasePill() {
-  const phaseKey = typeof state.phase === "string" ? state.phase.toLowerCase() : null;
+    const phaseKey =
+        typeof state.phase === "string" ? state.phase.toLowerCase() : null;
     $("phase-pill").textContent = phaseKey ? "" : t("phase.loading");
-  document.querySelectorAll(".phase-view").forEach((el) => el.classList.add("hidden"));
+    document
+        .querySelectorAll(".phase-view")
+        .forEach((el) => el.classList.add("hidden"));
     const viewMap = {
         Suggest: "suggest-view",
         Reveal: "reveal-view",
         Vote: "vote-view",
-    Results: "results-view"
+        Results: "results-view",
     };
     const id = viewMap[state.phase];
     if (id) $(id).classList.remove("hidden");
@@ -169,14 +196,17 @@ function renderCounts() {
     $("counts").textContent = t("counts.format", {
         players: state.counts.players,
         suggestions: state.counts.suggestions,
-    votes: state.counts.votes
+        votes: state.counts.votes,
     });
 }
 
 function renderWelcome() {
     const el = $("welcome-text");
     if (!el) return;
-  const name = state.me?.displayName?.trim() || state.me?.username || t("auth.defaultName");
+    const name =
+        state.me?.displayName?.trim() ||
+        state.me?.username ||
+        t("auth.defaultName");
     el.textContent = t("auth.welcome", { name });
 }
 
@@ -185,7 +215,11 @@ function renderMySuggestions() {
     if (!wrap) return;
     wrap.innerHTML = "";
     const allowEdit = state.phase === "Suggest" || state.me?.isAdmin;
-  state.mySuggestions.forEach((s) => wrap.appendChild(buildCard(s, { showAuthor: false, allowDelete: true, allowEdit })));
+    state.mySuggestions.forEach((s) =>
+        wrap.appendChild(
+            buildCard(s, { showAuthor: false, allowDelete: true, allowEdit }),
+        ),
+    );
 }
 
 function renderAllSuggestions() {
@@ -193,8 +227,14 @@ function renderAllSuggestions() {
     if (!list) return;
     list.innerHTML = "";
     const allowEdit = !!state.me?.isAdmin;
-  const allowDelete = !!state.me?.isAdmin && (state.phase === "Reveal" || state.phase === "Suggest");
+    const allowDelete =
-  state.allSuggestions.forEach((s) => list.appendChild(buildCard(s, { showAuthor: true, allowEdit, allowDelete })));
+        !!state.me?.isAdmin &&
+        (state.phase === "Reveal" || state.phase === "Suggest");
+    state.allSuggestions.forEach((s) =>
+        list.appendChild(
+            buildCard(s, { showAuthor: true, allowEdit, allowDelete }),
+        ),
+    );
     renderPhaseTitles();
 }
 
@@ -202,9 +242,14 @@ function renderVotes() {
     const list = $("vote-list");
     if (!list) return;
     list.innerHTML = "";
-  const votesMap = Object.fromEntries(state.myVotes.map((v) => [v.suggestionId, v.score]));
+    const votesMap = Object.fromEntries(
+        state.myVotes.map((v) => [v.suggestionId, v.score]),
+    );
     state.allSuggestions.forEach((s) => {
-    const li = buildCard(s, { showAuthor: true, allowEdit: !!state.me?.isAdmin });
+        const li = buildCard(s, {
+            showAuthor: true,
+            allowEdit: !!state.me?.isAdmin,
+        });
         const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
         const current = hasVote ? votesMap[s.id] : 5; // start neutral when no prior vote
         const displayScore = hasVote ? current : "—";
@@ -240,9 +285,13 @@ function renderVotes() {
 }
 
 function syncVoteScores() {
-  const votesMap = Object.fromEntries(state.myVotes.map((v) => [v.suggestionId, v.score]));
+    const votesMap = Object.fromEntries(
+        state.myVotes.map((v) => [v.suggestionId, v.score]),
+    );
     Object.entries(votesMap).forEach(([id, score]) => {
-    const slider = document.querySelector(`input[type=range][data-id="${id}"]`);
+        const slider = document.querySelector(
+            `input[type=range][data-id="${id}"]`,
+        );
         const scoreLabel = $("score-" + id);
         const emoji = $("emoji-" + id);
         if (slider && score != null) {
@@ -251,9 +300,12 @@ function syncVoteScores() {
             if (emoji) emoji.textContent = scoreToEmoji(score);
         }
     });
-  document.querySelectorAll("input[type=range][data-id]").forEach((slider) => {
+    document
+        .querySelectorAll("input[type=range][data-id]")
+        .forEach((slider) => {
             const id = slider.dataset.id;
-    if (Object.prototype.hasOwnProperty.call(votesMap, Number(id))) return;
+            if (Object.prototype.hasOwnProperty.call(votesMap, Number(id)))
+                return;
             const scoreLabel = $("score-" + id);
             const emoji = $("emoji-" + id);
             if (scoreLabel) scoreLabel.textContent = "—";
@@ -286,10 +338,10 @@ function renderResults() {
         row.innerHTML = `
       <td>${idx + 1}</td>
       <td class="game-cell">
-         ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
+         ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ""}
          <div class="game-meta">
            <div class="title-line">${r.name}</div>
-           ${r.genre ? `<div class="muted small">${r.genre}</div>` : ''}
+           ${r.genre ? `<div class="muted small">${r.genre}</div>` : ""}
          </div>
       </td>
       <td class="author-cell">${r.author ?? "—"}</td>
@@ -297,8 +349,8 @@ function renderResults() {
       <td>${r.average.toFixed(1)}</td>
       <td>${r.total}</td>
       <td>
-        ${r.gameUrl ? `<a class="link compact" href="${r.gameUrl}" target="_blank" rel="noopener">${t("results.link.site")}</a><br>` : ''}
+        ${r.gameUrl ? `<a class="link compact" href="${r.gameUrl}" target="_blank" rel="noopener">${t("results.link.site")}</a><br>` : ""}
-        ${r.youtubeUrl ? `<a class="link compact" href="${r.youtubeUrl}" target="_blank" rel="noopener">${t("results.link.youtube")}</a>` : ''}
+        ${r.youtubeUrl ? `<a class="link compact" href="${r.youtubeUrl}" target="_blank" rel="noopener">${t("results.link.youtube")}</a>` : ""}
       </td>
     `;
         tbody.appendChild(row);
@@ -307,7 +359,7 @@ function renderResults() {
     frame.className = "results-frame";
     frame.appendChild(table);
     container.appendChild(frame);
-  container.querySelectorAll(".clickable-thumb").forEach(img => {
+    container.querySelectorAll(".clickable-thumb").forEach((img) => {
         img.addEventListener("click", () => openLightbox(img.src, img.alt));
     });
 }
@@ -317,10 +369,16 @@ function renderPhaseTitles() {
     const voteTitle = $("vote-title");
     const totalGames = state.allSuggestions?.length ?? 0;
     if (revealTitle) {
-    revealTitle.textContent = totalGames > 0 ? t("section.allSuggestions.count", { count: totalGames }) : t("section.allSuggestions");
+        revealTitle.textContent =
+            totalGames > 0
+                ? t("section.allSuggestions.count", { count: totalGames })
+                : t("section.allSuggestions");
     }
     if (voteTitle) {
-    voteTitle.textContent = totalGames > 0 ? t("section.vote.count", { count: totalGames }) : t("section.vote");
+        voteTitle.textContent =
+            totalGames > 0
+                ? t("section.vote.count", { count: totalGames })
+                : t("section.vote");
     }
 }
 
@@ -336,15 +394,24 @@ function setupHandlers() {
 
     const loginUser = $("login-username");
     if (loginUser) {
-    const markEditing = () => { loginUser.dataset.userEditing = "1"; };
+        const markEditing = () => {
-    ["focus", "input", "keydown"].forEach(evt => loginUser.addEventListener(evt, markEditing));
+            loginUser.dataset.userEditing = "1";
-    loginUser.addEventListener("blur", () => { delete loginUser.dataset.userEditing; });
+        };
+        ["focus", "input", "keydown"].forEach((evt) =>
+            loginUser.addEventListener(evt, markEditing),
+        );
+        loginUser.addEventListener("blur", () => {
+            delete loginUser.dataset.userEditing;
+        });
     }
 
     const langSelects = Array.from(document.querySelectorAll(".lang-select"));
-  const syncLanguageSelects = () => langSelects.forEach(sel => sel.value = getLanguage());
+    const syncLanguageSelects = () =>
+        langSelects.forEach((sel) => (sel.value = getLanguage()));
     syncLanguageSelects();
-  langSelects.forEach(sel => sel.addEventListener("change", () => setLanguage(sel.value)));
+    langSelects.forEach((sel) =>
+        sel.addEventListener("change", () => setLanguage(sel.value)),
+    );
 
     onLanguageChange(() => {
         syncLanguageSelects();
@@ -370,8 +437,10 @@ function setupHandlers() {
             e.preventDefault();
             const username = $("login-username").value.trim();
             const password = $("login-password").value;
-      if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
+            if (username.length > 24)
-      if (!username || !password) return toast(t("auth.needCredentials"), true);
+                return toast("Username must be 24 characters or fewer.", true);
+            if (!username || !password)
+                return toast(t("auth.needCredentials"), true);
             try {
                 await api.login({ username, password });
                 setSavedUsername(username);
@@ -380,7 +449,8 @@ function setupHandlers() {
                 await refreshPhaseData();
                 toast(t("toast.loggedIn"));
             } catch (err) {
-        if (err?.status === 401) return toast(t("auth.invalidCredentials"), true);
+                if (err?.status === 401)
+                    return toast(t("auth.invalidCredentials"), true);
                 if (handleAuthError(err)) return;
             }
         });
@@ -394,12 +464,28 @@ function setupHandlers() {
             const password = $("register-password").value;
             const displayName = $("register-displayName").value.trim();
             const adminKey = $("register-adminkey").value.trim();
-      if (!displayName) return toast(t("toast.displayNameRequired") || "Display name is required.", true);
+            if (!displayName)
-      if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
+                return toast(
-      if (displayName.length > 16) return toast("Display name must be 16 characters or fewer.", true);
+                    t("toast.displayNameRequired") ||
-      if (!username || !password) return toast(t("auth.needCredentials"), true);
+                        "Display name is required.",
+                    true,
+                );
+            if (username.length > 24)
+                return toast("Username must be 24 characters or fewer.", true);
+            if (displayName.length > 16)
+                return toast(
+                    "Display name must be 16 characters or fewer.",
+                    true,
+                );
+            if (!username || !password)
+                return toast(t("auth.needCredentials"), true);
             try {
-        await api.register({ username, password, displayName, adminKey });
+                await api.register({
+                    username,
+                    password,
+                    displayName,
+                    adminKey,
+                });
                 setSavedUsername(username);
                 state.isAuthenticated = true;
                 setAuthUI(true);
@@ -447,13 +533,21 @@ function setupHandlers() {
     });
 
     const phaseSelect = $("phase-select");
-  ["focus", "input", "click"].forEach(evt => {
+    ["focus", "input", "click"].forEach((evt) => {
-    phaseSelect.addEventListener(evt, () => { phaseSelect.dataset.userEditing = "1"; });
+        phaseSelect.addEventListener(evt, () => {
+            phaseSelect.dataset.userEditing = "1";
+        });
+    });
+    phaseSelect.addEventListener("blur", () => {
+        phaseSelect.dataset.userEditing = "";
     });
-  phaseSelect.addEventListener("blur", () => { phaseSelect.dataset.userEditing = ""; });
 
-  $("reset").addEventListener("click", () => adminAction(adminApi.reset, t("admin.resetDone")));
+    $("reset").addEventListener("click", () =>
-  $("factory-reset").addEventListener("click", () => adminAction(adminApi.factoryReset, t("admin.factoryResetDone")));
+        adminAction(adminApi.reset, t("admin.resetDone")),
+    );
+    $("factory-reset").addEventListener("click", () =>
+        adminAction(adminApi.factoryReset, t("admin.factoryResetDone")),
+    );
 
     const logoutBtn = $("logout");
     if (logoutBtn) {
@@ -482,8 +576,11 @@ function setupHandlers() {
     const adminCard = $("admin-card");
     const adminClose = $("admin-close");
     if (adminToggle && adminCard && adminClose) {
-    const togglePanel = (show) => adminCard.classList.toggle("hidden", !show);
+        const togglePanel = (show) =>
-    adminToggle.addEventListener("click", () => togglePanel(adminCard.classList.contains("hidden")));
+            adminCard.classList.toggle("hidden", !show);
+        adminToggle.addEventListener("click", () =>
+            togglePanel(adminCard.classList.contains("hidden")),
+        );
         adminClose.addEventListener("click", () => togglePanel(false));
     }
 }
@@ -514,16 +611,27 @@ async function refreshPhaseData() {
     }
 }
 
-function buildCard(s, { showAuthor = false, allowDelete = false, allowEdit = false }) {
+function buildCard(
+    s,
+    { showAuthor = false, allowDelete = false, allowEdit = false },
+) {
     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="${t("card.openScreenshot")}" style="background-image:url('${s.screenshotUrl}')"></button>`
         : `<div class="card-visual"></div>`;
-  const hasPlayers = (s.minPlayers || s.maxPlayers);
+    const hasPlayers = s.minPlayers || s.maxPlayers;
-  const players = hasPlayers ? `${t("card.players", { min: s.minPlayers ?? "?", max: s.maxPlayers ?? "?" })}` : "";
+    const players = hasPlayers
-  const genreAndPlayers = s.genre ? (hasPlayers ? `${s.genre} • ${players}` : s.genre) : (hasPlayers ? players : undefined);
+        ? `${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}
@@ -547,7 +655,9 @@ function buildCard(s, { showAuthor = false, allowDelete = false, allowEdit = fal
     if (hasImage) {
         const btn = card.querySelector(".card-visual");
         setupCardVisualHover(btn, s.screenshotUrl);
-    btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
+        btn.addEventListener("click", () =>
+            openLightbox(s.screenshotUrl, s.name),
+        );
     }
     if (allowEdit) {
         const editBtn = card.querySelector("[data-edit]");
@@ -627,7 +737,11 @@ function openEditModal(s) {
 
     const close = () => overlay.remove();
     overlay.addEventListener("click", (e) => {
-    if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close();
+        if (
+            e.target.classList.contains("edit-modal") ||
+            e.target.classList.contains("lightbox-close")
+        )
+            close();
     });
 
     const cancelBtn = overlay.querySelector("#edit-cancel");
@@ -666,7 +780,10 @@ function openLightbox(url, title) {
     </div>
   `;
     overlay.addEventListener("click", (e) => {
-    if (e.target.classList.contains("lightbox") || e.target.classList.contains("lightbox-close")) {
+        if (
+            e.target.classList.contains("lightbox") ||
+            e.target.classList.contains("lightbox-close")
+        ) {
             overlay.remove();
         }
     });
@@ -716,7 +833,7 @@ function setupCardVisualHover(el, url) {
         el.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
     });
 
-  ["mouseleave", "blur"].forEach(evt => el.addEventListener(evt, reset));
+    ["mouseleave", "blur"].forEach((evt) => el.addEventListener(evt, reset));
 }
 
 async function main() {
@@ -727,7 +844,7 @@ async function main() {
         toast(err.message, true);
     }
     setInterval(() => {
-    refreshPhaseData().catch(err => {
+        refreshPhaseData().catch((err) => {
             if (!handleAuthError(err)) toast(err.message, true);
         });
     }, 4000);
@@ -742,7 +859,9 @@ function isValidImageUrl(url) {
         const allowed = ["http:", "https:"];
         if (!allowed.includes(u.protocol)) return false;
         const path = u.pathname.toLowerCase();
-    return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some(ext => path.endsWith(ext));
+        return [".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif"].some((ext) =>
+            path.endsWith(ext),
+        );
     } catch {
         return false;
     }
@@ -778,7 +897,7 @@ function scoreToEmoji(score) {
 }
 
 function neutralEmoji() {
-  return "😐";
+    return "⬅️";
 }
 
 function signatureSuggestions(list) {
@@ -792,7 +911,7 @@ function signatureSuggestions(list) {
             s.youtubeUrl,
             s.gameUrl,
             s.minPlayers,
-      s.maxPlayers
+            s.maxPlayers,
-    ])
+        ]),
     );
 }

wwwroot/index.html

@@ -58,7 +58,7 @@
       <button type="submit" data-i18n="auth.registerSubmit">Create account</button>
     </form>
     <div class="stack">
-      <a class="auth-toggle-link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a>
+      <a class="auth-toggle-link link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a>
     </div>
   </section>
 

wwwroot/styles.css

@@ -1,5 +1,11 @@
 :root {
-  font-family: "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
+    font-family:
+        "Baloo 2",
+        "Nunito",
+        "Segoe UI",
+        system-ui,
+        -apple-system,
+        sans-serif;
     background: #f6e9d6;
     color: #2c1c0d;
 }
@@ -18,12 +24,20 @@
     align-items: center;
     gap: 16px;
     min-height: 100vh;
-  background: url("background.png") center/cover no-repeat fixed, #f6e9d6;
+    background:
+        url("background.png") center/cover no-repeat fixed,
+        #f6e9d6;
 }
 
-.lang-field { margin-top: 8px; }
+.lang-field {
-.lang-field select { min-width: 160px; }
+    margin-top: 8px;
-.compact-select { min-width: 120px; }
+}
+.lang-field select {
+    min-width: 160px;
+}
+.compact-select {
+    min-width: 120px;
+}
 
 .status-bar {
     display: flex;
@@ -36,8 +50,17 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
     padding: 10px 14px;
 }
-.status-left, .status-center, .status-right { display: flex; align-items: center; gap: 10px; }
+.status-left,
-.inline-link { font-size: 14px; margin-left: 5px; }
+.status-center,
+.status-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.inline-link {
+    font-size: 14px;
+    margin-left: 5px;
+}
 .logo-mark {
     height: 65px;
     margin: -10px;
@@ -49,7 +72,9 @@
     font-size: 13px;
 }
 
-.phase-bar { display: none; }
+.phase-bar {
+    display: none;
+}
 
 .grid {
     display: grid;
@@ -81,8 +106,12 @@
     justify-content: space-between;
     gap: 12px;
 }
-.phase-header h2 { margin: 0; }
+.phase-header h2 {
-.phase-header .hint { margin: 0; }
+    margin: 0;
+}
+.phase-header .hint {
+    margin: 0;
+}
 
 .card {
     background: rgba(255, 255, 255, 0.9);
@@ -93,14 +122,33 @@
     margin-bottom: 16px;
 }
 
-.card h2 { margin-top: 0; margin-bottom: 8px; }
+.card h2 {
+    margin-top: 0;
+    margin-bottom: 8px;
+}
 
-.split { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
+.split {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
 
-.stack { display: flex; flex-direction: column; gap: 8px; }
+.stack {
-.stack.horizontal { flex-direction: row; flex-wrap: wrap; }
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.stack.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
 
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
     font: inherit;
     border-radius: 8px;
     border: 1px solid #d5c7b5;
@@ -110,7 +158,10 @@ input, textarea, select, button {
     min-width: 0;
 }
 
-textarea { min-height: 80px; resize: vertical; }
+textarea {
+    min-height: 80px;
+    resize: vertical;
+}
 
 button {
     cursor: pointer;
@@ -119,16 +170,39 @@ button {
     font-weight: 700;
     color: #2c1c0d;
 }
-button:hover { background: linear-gradient(-5deg, #40e2ff, #e0f0ff ); }
 
-button.danger { background: #e0564f; border-color: #c54740; color: #fffaf3; }
+button:hover {
+    background: linear-gradient(-5deg, #40e2ff, #e0f0ff);
+}
 
-button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
+button.danger {
+    background: #e0564f;
+    border-color: #c54740;
+    color: #fffaf3;
+}
 
-.label { color: #6c5a42; font-size: 14px; }
+button.ghost {
-.hint { color: #8c7a63; font-size: 12px; margin: 8px 0 12px 0; }
+    background: transparent;
-.hint.warning { color: #c26c1a; }
+    border-color: #d5c7b5;
-.disabled-form { opacity: 0.5; pointer-events: none; }
+    color: #2c1c0d;
+}
+
+.label {
+    color: #6c5a42;
+    font-size: 14px;
+}
+.hint {
+    color: #8c7a63;
+    font-size: 12px;
+    margin: 8px 0 12px 0;
+}
+.hint.warning {
+    color: #c26c1a;
+}
+.disabled-form {
+    opacity: 0.5;
+    pointer-events: none;
+}
 
 .card-grid {
     display: grid;
@@ -139,7 +213,9 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
     max-width: 1280px;
     margin-inline: auto;
 }
-.results-grid { max-width: none; }
+.results-grid {
+    max-width: none;
+}
 
 .game-card {
     background: #fffaf3;
@@ -152,8 +228,13 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
 }
 
 @media (max-width: 1200px) {
-  .grid { min-width: auto; width: 100%; }
+    .grid {
-  .suggest-grid { grid-template-columns: 1fr; }
+        min-width: auto;
+        width: 100%;
+    }
+    .suggest-grid {
+        grid-template-columns: 1fr;
+    }
 }
 
 .card-visual {
@@ -169,30 +250,104 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
     display: block;
     padding: 0;
 }
-.card-visual.hovering { cursor: zoom-in; }
+.card-visual.hovering {
+    cursor: zoom-in;
+}
 
-.card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
+.card-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+}
 
-h3 { margin: 0; font-size: 18px; }
+h3 {
+    margin: 0;
+    font-size: 18px;
+}
 
-.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
+.card-title-row {
-.card-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    display: flex;
-.title-meta { display: flex; align-items: center; gap: 8px; }
+    justify-content: space-between;
-.title-meta .chip { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    align-items: center;
-p { margin: 0; }
+    gap: 8px;
-.muted { color: #7a6a53; margin: 0; }
+    min-width: 0;
-.link { color: #30afea; text-decoration: none; font-weight: 700; }
+}
-.link:hover { text-decoration: underline; }
+.card-title {
-.link.compact { font-size: 14px; }
+    flex: 1;
-.auth-toggle-link { text-align: center; display: inline-block; }
+    min-width: 0;
-.chip { background: #c5dff1; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
+    white-space: nowrap;
-.chip.danger-chip { background: #e0564f; border: 1px solid #c54740; color: #fffaf3; }
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.title-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.title-meta .chip {
+    max-width: 140px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+p {
+    margin: 0;
+}
+.muted {
+    color: #7a6a53;
+    margin: 0;
+}
+.link {
+    color: #30afea;
+    text-decoration: none;
+    font-weight: 700;
+}
+.link:hover {
+    text-decoration: underline;
+}
+.link.compact {
+    font-size: 14px;
+}
+.auth-toggle-link {
+    text-align: center;
+    display: inline-block;
+    margin-top: 10px;
+}
+.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; }
+.vote-controls {
-.score { font-weight: 700; min-width: 36px; text-align: center; }
+    display: flex;
-.score-emoji { font-size: 24px; text-align: center; }
+    gap: 10px;
+    align-items: center;
+    margin-top: auto;
+    padding-top: 6px;
+}
+.score {
+    font-weight: 700;
+    min-width: 36px;
+    text-align: center;
+}
+.score-emoji {
+    font-size: 24px;
+    text-align: center;
+}
 
-.results-grid .game-card { border-color: #f0c56b; }
+.results-grid .game-card {
+    border-color: #f0c56b;
+}
 
 .results-frame {
     background: rgba(255, 255, 255, 0.92);
@@ -210,7 +365,9 @@ input[type="range"].full-slider {
     border-radius: 999px;
     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);
+    box-shadow:
+        inset 0 0 0 1px #e3d4bd,
+        0 4px 12px rgba(0, 0, 0, 0.18);
 }
 input[type="range"].full-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -237,9 +394,16 @@ input[type="range"].full-slider::-moz-range-track {
     border: 1px solid #e3d4bd;
 }
 
-.score { font-weight: 700; min-width: 36px; font-size: 24px; text-align: center; }
+.score {
+    font-weight: 700;
+    min-width: 36px;
+    font-size: 24px;
+    text-align: center;
+}
 
-.hidden { display: none !important; }
+.hidden {
+    display: none !important;
+}
 
 .toast {
     position: fixed;
@@ -252,10 +416,17 @@ input[type="range"].full-slider::-moz-range-track {
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
     max-width: 320px;
 }
-.toast.error { background: #e0564f; color: #fffaf3; }
+.toast.error {
+    background: #e0564f;
+    color: #fffaf3;
+}
 
-.auth-card .active { font-weight: 700; }
+.auth-card .active {
-.auth-form { margin-top: 8px; }
+    font-weight: 700;
+}
+.auth-form {
+    margin-top: 8px;
+}
 .auth-logo {
     display: flex;
     justify-content: center;
@@ -354,19 +525,82 @@ input[type="range"].full-slider::-moz-range-track {
     gap: 12px;
     box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
 }
-.edit-modal .edit-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.edit-modal .edit-header {
-.edit-modal .edit-body { overflow: auto; max-height: 70vh; }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+.edit-modal .edit-body {
+    overflow: auto;
+    max-height: 70vh;
+}
 
-.panel-header { display: flex; justify-content: space-between; align-items: center; }
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-.results-table { width: 100%; border-collapse: collapse; }
+.results-table {
-.results-table th, .results-table td { padding: 10px; }
+    width: 100%;
-.results-table tr { border-bottom: 1px solid #e3d4bd; }
+    border-collapse: collapse;
-.results-table th { text-align: left; color: #7a6a53; font-size: 12px; letter-spacing: 0.3px; }
+}
-.results-table .game-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
+.results-table th,
-.results-table .thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e3d4bd; cursor: pointer; }
+.results-table td {
-.results-table .game-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+    padding: 10px;
-.results-table .title-line { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+}
-.results-table .author-cell { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.results-table tr {
-.results-table .muted.small { font-size: 12px; color: #7a6a53; }
+    border-bottom: 1px solid #e3d4bd;
-.thumb-open { background: #fffaf3; border: 1px solid #e3d4bd; color: #2c1c0d; border-radius: 6px; padding: 4px 8px; cursor: pointer; }
+}
+.results-table th {
+    text-align: left;
+    color: #7a6a53;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+}
+.results-table .game-cell {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    min-width: 0;
+}
+.results-table .thumb {
+    width: 72px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 1px solid #e3d4bd;
+    cursor: pointer;
+}
+.results-table .game-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+.results-table .title-line {
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.results-table .author-cell {
+    max-width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.results-table .muted.small {
+    font-size: 12px;
+    color: #7a6a53;
+}
+.thumb-open {
+    background: #fffaf3;
+    border: 1px solid #e3d4bd;
+    color: #2c1c0d;
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+}