Move competition back button onto the page with a real icon

The back button moves out of the topbar to the top-left of the page
above the competition name, and now renders an inline SVG arrow
(iconArrowLeft) instead of the "←" character.

web/competition.js

@@ -1313,6 +1313,12 @@
 
   // ---- Main render -------------------------------------------------------
 
+  function iconArrowLeft() {
+    const s = el("span", { class: "icon" });
+    s.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>';
+    return s;
+  }
+
   function wsIndicator() {
     state.wsDot = el("span", { class: "connection-status " + (state.wsOnline ? "online" : "offline") });
     state.wsText = el("span", { class: "muted" }, state.wsOnline ? t("online") : t("offline"));
@@ -1329,12 +1335,13 @@
 
   function render() {
     clearNode(root);
-    const backBtn = el("button", { class: "ghost",
+    const backBtn = el("button", { class: "ghost btn-back",
       onclick: () => { if (state.ws) { state.ws.close(); state.ws = null; } navigate("competitions"); } },
-      "← " + t("back"));
-    root.appendChild(renderTopbar(user, { extra: [wsIndicator(), backBtn] }));
+      iconArrowLeft(), t("back"));
+    root.appendChild(renderTopbar(user, { extra: wsIndicator() }));
 
     const container = el("div", { class: "container" });
+    container.appendChild(backBtn);
     container.appendChild(el("div", { class: "row", style: { justifyContent: "space-between", marginBottom: "0.5rem" } },
       el("h2", { style: { margin: 0 } },
         state.competition.name,