fix: replace alert with inline error, extract sidebar inline style

Reviewed-on: #3
Reviewed-by: Luca Jakob <luca.jakob@stud.fhgr.ch>

frontend/game.html

@@ -97,7 +97,7 @@
 
             <div class="sidebar-card">
               <p class="sidebar-card__label">How to play</p>
-              <p style="font-size:.82rem;color:var(--ink-soft);line-height:1.55;">
+              <p class="sidebar-hint">
                 Draw the country's outline from memory. City dots are hints. Press <strong>Submit</strong> when done or wait for the timer.
               </p>
             </div>

frontend/index.html

@@ -170,6 +170,8 @@
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
             </button>
 
+            <span class="field-error" id="lobby-error" role="alert"></span>
+
             <p class="form-footer"><a href="#" style="color:var(--sea);font-weight:600;">Join a game instead</a></p>
           </form>
         </div>

frontend/scripts/index.js

@@ -21,13 +21,20 @@ document.getElementById("reg-btn")?.addEventListener("click", async () => {
 		return;
 	}
 
+	const errorEl = /** @type {HTMLElement|null} */ (
+		document.getElementById("lobby-error")
+	);
+	if (errorEl) errorEl.textContent = "";
+
 	try {
 		if (button) button.disabled = true;
 		await createLobby(lobbyName);
 		saveLobbyName(lobbyName);
 		window.location.href = "lobby.html";
 	} catch (error) {
-		alert(error instanceof Error ? error.message : "Could not create lobby.");
+		if (errorEl)
+			errorEl.textContent =
+				error instanceof Error ? error.message : "Could not create lobby.";
 		if (button) button.disabled = false;
 	}
 });

frontend/styles/game.css

@@ -265,6 +265,12 @@
 	word-break: break-word;
 }
 
+.sidebar-hint {
+	font-size: 0.82rem;
+	color: var(--ink-soft);
+	line-height: 1.55;
+}
+
 /* Controls */
 .game-controls {
 	display: flex;