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"));
+      iconArrowLeft(), t("back"));
-    root.appendChild(renderTopbar(user, { extra: [wsIndicator(), backBtn] }));
+    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,

web/style.css

@@ -403,6 +403,16 @@ tbody tr.transferred { background: #f3f6fb; }
    unused descender space, so its glyphs sit above the flex centre line. */
 .ws-indicator .connection-status { position: relative; top: 1px; }
 
+.btn-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
+  padding-left: 0.3rem;
+}
+.icon { display: inline-flex; }
+.icon svg { display: block; }
+
 textarea { resize: vertical; min-height: 60px; }
 
 @media (max-width: 700px) {