Require display name before suggesting/voting and enforce in UI

wwwroot/app.js

@@ -55,6 +55,7 @@ async function loadState() {
   if ($("player-id")) {
     $("player-id").textContent = `Player ID: ${me.id}`;
   }
+  applyNameRequirementUI();
 }
 
 async function loadSuggestData() {
@@ -97,6 +98,7 @@ function renderPhasePill() {
   if (phaseSelect && !phaseSelect.dataset.userEditing) {
     phaseSelect.value = state.phase || "Suggest";
   }
+  applyNameRequirementUI();
 }
 
 function renderCounts() {
@@ -216,6 +218,7 @@ function setupHandlers() {
       state.me = me;
       nameInput.dataset.userEditing = "";
       toast("Saved name");
+      applyNameRequirementUI();
     } catch (err) {
       toast(err.message, true);
     }
@@ -335,6 +338,31 @@ function openLightbox(url, title) {
   document.body.appendChild(overlay);
 }
 
+function applyNameRequirementUI() {
+  const requiresName = !state.me?.displayName?.trim();
+  const warning = $("name-warning");
+  if (warning) warning.classList.toggle("hidden", !requiresName);
+
+  const suggestForm = $("suggest-form");
+  if (suggestForm) {
+    suggestForm.querySelectorAll("input,textarea,button").forEach(el => {
+      if (el.id === "save-name") return;
+      el.disabled = requiresName;
+    });
+    suggestForm.classList.toggle("disabled-form", requiresName);
+  }
+
+  const voteList = $("vote-list");
+  if (voteList) {
+    voteList.querySelectorAll("input[type=range]").forEach(el => el.disabled = requiresName);
+    voteList.classList.toggle("disabled-form", requiresName);
+  }
+
+  if (requiresName && state.phase !== "Suggest") {
+    toast("Enter a name to continue.", true);
+  }
+}
+
 async function main() {
   setupHandlers();
   try {

wwwroot/styles.css

@@ -106,6 +106,8 @@ button.ghost {
 
 .label { color: #9ca3af; font-size: 12px; }
 .hint { color: #9ca3af; font-size: 12px; margin: 8px 0 0; }
+.hint.warning { color: #f59e0b; }
+.disabled-form { opacity: 0.5; pointer-events: none; }
 
 .card-grid {
   display: grid;