Playback page: show 'E{n} — episode title' line under the video

The name was only in the grid tooltip (hover-only, invisible on touch).
Add a persistent now-playing line between the player and controls:
'E1 — Ryomen Sukuna'. setNowEp() runs on every play() and refreshes
when the async Jikan name lands late. Bumped asset version to v=3.

static/app.js

@@ -300,6 +300,12 @@ async function showAnime(slug_id, opts = {}) {
   player.append(videoEl());
   main.append(player);
 
+  // "now playing" line: E-number + MAL episode title (name arrives async
+  // from Jikan, so setNowEp() refreshes it whenever the name lands)
+  const nowEp = el("div", "now-ep");
+  nowEp.id = "now-ep";
+  main.append(nowEp);
+
   const controls = el("div", "controls");
   const langBtn = el("button", null, langLabel());
   langBtn.onclick = () => {
@@ -668,7 +674,7 @@ function attachEpNames() {
   p.then(list => {
     let changed = false;
     list.forEach((t, i) => { if (t && t.title && epsList[i]) { epsList[i].name = t.title; changed = true; } });
-    if (changed) renderEps();
+    if (changed) { renderEps(); if (currentEp) setNowEp(currentEp.ep_id, currentEp.ep_no); }
   });
 }
 
@@ -798,8 +804,16 @@ function nextCountdown(nxt) {
   draw();
 }
 
+function setNowEp(ep_id, ep_no) {
+  const n = document.getElementById("now-ep");
+  if (!n) return;
+  const e = epsList.find(x => String(x.id) === String(ep_id));
+  n.textContent = "E" + ep_no + (e && e.name ? " — " + e.name : "");
+}
+
 async function play(ep_id, ep_no) {
   playerBroken = false;
+  setNowEp(ep_id, ep_no);
   localStorage.setItem("aniweb_lang_" + detail.slug_id, lang);
   try {
     const s = await api(`/api/episode/${ep_id}/stream?lang=${lang}`);

static/index.html

@@ -6,7 +6,7 @@
 <title>ani-web</title>
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23f97316'/%3E%3Ctext x='32' y='45' font-family='sans-serif' font-size='42' font-weight='700' text-anchor='middle' fill='%230e0f13'%3Ea%3C/text%3E%3C/svg%3E">
 
-<link rel="stylesheet" href="style.css?v=2">
+<link rel="stylesheet" href="style.css?v=3">
 </head>
 <body>
 <header>
@@ -30,6 +30,6 @@
      max-age=300 in browser AND possibly in your HTTPS proxy, and a stale
      copy is exactly how users keep seeing an old UI after a deploy -->
 <script src="hls.min.js"></script>
-<script src="app.js?v=2"></script>
+<script src="app.js?v=3"></script>
 </body>
 </html>

static/style.css

@@ -163,6 +163,8 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); }
 .del:hover { border-color: #f87171; color: #f87171; }
 
 .eps { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.4rem; }
+.now-ep { font-size: .95rem; color: var(--muted); margin: .1rem 0 .45rem; }
+
 .ep { position: relative; font-size: 0.9rem; }
 .ep.filler { opacity: 0.55; }
 .ep.done { opacity: 0.5; }