discoverability: version→changelog, status pill→status (0.54.0)

- topbar version (vX.Y.Z) is now a button linking to the changelog — the
  natural 'what's new' entry point (moved out of the logo button)
- footer 'All systems operational' pill now links to the status page, with
  a hover lift
- both new utility pages are now reachable from natural entry points
- also audited the full home page on mobile (390px): hero CTAs wrap, flow
  diagram stacks vertically, session preview stacks, live screen renders,
  and zero horizontal overflow — no regressions from recent additions
- verified live: both links route correctly

index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0e0a14" />
     <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
-    <meta name="version" content="0.53.0-livescreen" />
+    <meta name="version" content="0.54.0-discover" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.53.0-livescreen",
+  "version": "0.54.0-discover",
   "private": true,
   "type": "module",
   "scripts": {

src/Scene2D.jsx

@@ -7,7 +7,7 @@ import Account from './Account.jsx';
 import TavernGame from './TavernGame.jsx';
 import { api } from './api.js';
 
-const RELEASE = '0.53.0-livescreen';
+const RELEASE = '0.54.0-discover';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },
@@ -61,8 +61,9 @@ function PixelTopbar({ route, setRoute, auth }) {
   return (
     <header className="px-topbar">
       <button className="px-logo" onClick={() => go('home')} type="button" aria-label="amerc home">
-        <span className="px-logo-gem" aria-hidden="true" /><strong>amerc</strong><small>agent mercenary tavern</small><em>v{RELEASE}</em>
+        <span className="px-logo-gem" aria-hidden="true" /><strong>amerc</strong><small>agent mercenary tavern</small>
       </button>
+      <button className="px-ver" onClick={() => go('changelog')} type="button" title="What's new — changelog">v{RELEASE}</button>
       <nav className="px-nav" aria-label="Primary">{nav}</nav>
       <button className="px-menu" onClick={() => setOpen((v) => !v)} type="button" aria-label="Toggle menu">{open ? <X size={20} /> : <Menu size={20} />}</button>
       {open && <div className="px-mobile">{nav}</div>}
@@ -262,9 +263,9 @@ function Footer({ setRoute }) {
         <div className="ft-brand">
           <div className="ft-logo"><span className="px-logo-gem" aria-hidden="true" /><strong>amerc</strong></div>
           <p>Hire, run, and deliver AI agents across software boundaries — no infrastructure, just skills.</p>
-          <span className={`ft-status${ok === false ? ' down' : ''}`}>
+          <button className={`ft-status${ok === false ? ' down' : ''}`} onClick={() => setRoute('status')} title="View system status">
             <i /> {ok === null ? 'checking…' : ok ? 'All systems operational' : 'Service degraded'}{stats ? ` · ${stats.online} online · ${stats.sessions} live` : ''}
-          </span>
+          </button>
         </div>
         <div className="ft-col"><h5>Product</h5>
           <button onClick={() => setRoute('agents')}>Browse Agents</button>

src/styles.css

@@ -1387,3 +1387,9 @@ button {
 .cl-date { margin-left: auto; color: #7a6a98; font-size: 12px; }
 .cl-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
 .cl-card li { color: #b6a7d4; font-size: 13px; line-height: 1.5; }
+
+/* clickable version pill + status pill (0.54) */
+.px-ver { font-family: inherit; font-size: 7px; color: #6f5736; background: none; border: 0; cursor: pointer; letter-spacing: 0.5px; padding: 2px 5px; align-self: center; transition: color .15s; white-space: nowrap; }
+.px-ver:hover { color: var(--cyan); }
+.ft-status { font-family: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
+.ft-status:hover { transform: translateY(-1px); border-color: rgba(54,240,176,0.6); }