diff --git a/CHANGELOG.md b/CHANGELOG.md
index c094c2b..4e4f966 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   widens the bar with larger cover and controls, and `"large"` reserves
   the most room for long titles; all three collapse to the compact
   layout on narrow viewports (#62).
+- `<podcast-live>` Web Component adds live radio support to the
+  persistent footer: real-time now-playing metadata (title, artist,
+  24H start/end time) from an AzuraCast `nowplaying` API, a "Listen
+  Live" CTA in the footer when other audio is playing, a pulsing LIVE
+  badge that respects `prefers-reduced-motion: reduce`, exponential
+  backoff on polling errors, and single-stream enforcement with the
+  existing podcast playback (#65).
 
 ## [1.3.0] - 2026-06-16
 
diff --git a/assets/js/podcast-player.js b/assets/js/podcast-player.js
index 86bcb23..4188c76 100644
--- a/assets/js/podcast-player.js
+++ b/assets/js/podcast-player.js
@@ -44,36 +44,47 @@ export function detectSourceType(url) {
  * @returns {SourceAdapter}
  */
 export function createSourceAdapter(element) {
-  const type = element.getAttribute("data-source") || detectSourceType(
-    element.getAttribute("src") || "",
-  );
+  const type =
+    element.getAttribute("data-source") || detectSourceType(element.getAttribute("src") || "");
   switch (type) {
-    case "azuracast": return new AzuracastAdapter(element);
-    case "ivoox":     return new IvooxAdapter(element);
-    default:          return new LocalAdapter(element);
+    case "azuracast":
+      return new AzuracastAdapter(element);
+    case "ivoox":
+      return new IvooxAdapter(element);
+    default:
+      return new LocalAdapter(element);
   }
 }
 
 export class LocalAdapter {
-  constructor(element) { this.element = element; }
+  constructor(element) {
+    this.element = element;
+  }
   async resolve() {
     const src = this.element.getAttribute("src");
     if (!src) throw new Error("LocalAdapter: missing src attribute");
     return src;
   }
-  async enrich() { return null; }
+  async enrich() {
+    return null;
+  }
 }
 
 export class AzuracastAdapter {
-  constructor(element) { this.element = element; }
+  constructor(element) {
+    this.element = element;
+  }
   async resolve() {
     const src = this.element.getAttribute("src");
     if (src) return src;
-    const apiUrl = this.element.getAttribute("azuracast-api-url");
+    const apiUrl =
+      this.element.getAttribute("data-azuracast-api-url") ||
+      this.element.getAttribute("azuracast-api-url");
     if (!apiUrl) throw new Error("AzuracastAdapter: missing azuracast-api-url attribute");
     // Validate scheme before fetching to prevent client-side SSRF
     const parsed = new URL(apiUrl);
-    if (parsed.protocol !== "https:") throw new Error("AzuracastAdapter: azuracast-api-url must use HTTPS");
+    if (parsed.protocol !== "https:")
+      throw new Error("AzuracastAdapter: azuracast-api-url must use HTTPS");
     const resp = await fetch(apiUrl);
     if (!resp.ok) throw new Error(`AzuracastAdapter: API error ${resp.status}`);
     const data = await resp.json();
@@ -94,7 +105,9 @@ export class AzuracastAdapter {
 }
 
 export class IvooxAdapter {
-  constructor(element) { this.element = element; }
+  constructor(element) {
+    this.element = element;
+  }
   async resolve() {
     const src = this.element.getAttribute("src");
     if (!/ivoox\.com/i.test(src)) return src;
@@ -105,7 +118,9 @@ export class IvooxAdapter {
         console.warn("IvooxAdapter: refusing to fetch non-ivoox.com or non-HTTPS URL", src);
         return src;
       }
-    } catch { return src; }
+    } catch {
+      return src;
+    }
     try {
       const resp = await fetch(src);
       if (!resp.ok) return src;
@@ -117,10 +132,14 @@ export class IvooxAdapter {
       if (dataUrl?.getAttribute("data-audio-url")) return dataUrl.getAttribute("data-audio-url");
       const audioSrc = doc.querySelector("audio source");
       if (audioSrc?.src) return audioSrc.src;
-    } catch { /* fall through */ }
+    } catch {
+      /* fall through */
+    }
     return src;
   }
-  async enrich() { return null; }
+  async enrich() {
+    return null;
+  }
 }
 
 /* ---- Open-source SVG icons (Feather/Lucide, MIT licensed) ---- */
@@ -138,9 +157,12 @@ function urlsMatch(a, b) {
     const uB = new URL(b, document.baseURI);
     if (uA.pathname === uB.pathname && uA.search === uB.search) return true;
     // Also match if paths differ only by trailing slash
-    return uA.pathname.replace(/\/$/, "") === uB.pathname.replace(/\/$/, "")
-      && uA.search === uB.search;
-  } catch { return a.endsWith(b) || b.endsWith(a); }
+    return (
+      uA.pathname.replace(/\/$/, "") === uB.pathname.replace(/\/$/, "") && uA.search === uB.search
+    );
+  } catch {
+    return a.endsWith(b) || b.endsWith(a);
+  }
 }
 const ICON_SKIP_BACK =
   '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>';
@@ -156,18 +178,34 @@ const ICON_VOL_MUTED =
 class PodcastPlayer extends HTMLElement {
   /** Attributes the component should react to. */
   static get observedAttributes() {
-    return ["src", "title", "poster", "chapters", "type", "autoplay",
-      "data-preload", "persistent", "data-source", "url"];
+    return [
+      "src",
+      "title",
+      "poster",
+      "chapters",
+      "type",
+      "autoplay",
+      "data-preload",
+      "persistent",
+      "data-source",
+      "url",
+    ];
   }
 
   /** Prefix for sessionStorage state key (instance ID appended). */
-  static get PERSISTENCE_KEY() { return "podcastPlayerState"; }
+  static get PERSISTENCE_KEY() {
+    return "podcastPlayerState";
+  }
 
   /** Minimum interval (ms) between throttled sessionStorage writes. */
-  static get SAVE_INTERVAL_MS() { return 30000; }
+  static get SAVE_INTERVAL_MS() {
+    return 30000;
+  }
 
   /** Staleness threshold (seconds) — discard saved position older than this. */
-  static get STATE_TTL_SECONDS() { return 3600; }
+  static get STATE_TTL_SECONDS() {
+    return 3600;
+  }
 
   /* ------------------------------------------------------------------ */
   /*  i18n — default English strings, overridable via window.wavecast   */
@@ -193,6 +231,7 @@ class PodcastPlayer extends HTMLElement {
       player_episode: "Podcast",
       player_error: "Playback error",
       player_no_source: "No audio source available",
+      player_listen_live: "Listen Live",
     };
   }
 
@@ -241,7 +280,7 @@ class PodcastPlayer extends HTMLElement {
     this._t = (key, vars) => {
       let s = this._i[key] || key;
       if (vars) {
-        Object.keys(vars).forEach(k => {
+        Object.keys(vars).forEach((k) => {
           s = s.replace("{" + k + "}", vars[k]);
         });
       }
@@ -524,19 +563,19 @@ class PodcastPlayer extends HTMLElement {
 
     // Cache DOM refs
     this._els = {
-      poster:       this._shadow.querySelector(".poster"),
-      title:        this._shadow.querySelector(".title"),
-      playBtn:      this._shadow.querySelector(".btn-play"),
-      skipBack:     this._shadow.querySelector(".btn-skip-back"),
-      skipFwd:      this._shadow.querySelector(".btn-skip-fwd"),
-      progress:     this._shadow.querySelector(".progress"),
-      timeCurrent:  this._shadow.querySelector(".time-current"),
+      poster: this._shadow.querySelector(".poster"),
+      title: this._shadow.querySelector(".title"),
+      playBtn: this._shadow.querySelector(".btn-play"),
+      skipBack: this._shadow.querySelector(".btn-skip-back"),
+      skipFwd: this._shadow.querySelector(".btn-skip-fwd"),
+      progress: this._shadow.querySelector(".progress"),
+      timeCurrent: this._shadow.querySelector(".time-current"),
       timeDuration: this._shadow.querySelector(".time-duration"),
-      volume:       this._shadow.querySelector(".volume"),
-      muteBtn:      this._shadow.querySelector(".btn-mute"),
-      rateBtn:      this._shadow.querySelector(".rate-btn"),
-      chapters:     this._shadow.querySelector(".chapters"),
-      error:        this._shadow.querySelector(".error-msg"),
+      volume: this._shadow.querySelector(".volume"),
+      muteBtn: this._shadow.querySelector(".btn-mute"),
+      rateBtn: this._shadow.querySelector(".rate-btn"),
+      chapters: this._shadow.querySelector(".chapters"),
+      error: this._shadow.querySelector(".error-msg"),
     };
   }
 
@@ -659,7 +698,9 @@ class PodcastPlayer extends HTMLElement {
       this._els.poster.src = val;
       this._els.poster.hidden = false;
       const title = this.getAttribute("title") || "";
-      this._els.poster.alt = title ? this._t("player_cover_of", {title}) : this._t("player_cover_alt");
+      this._els.poster.alt = title
+        ? this._t("player_cover_of", { title })
+        : this._t("player_cover_alt");
     } else {
       this._els.poster.src = "";
       this._els.poster.hidden = true;
@@ -677,9 +718,7 @@ class PodcastPlayer extends HTMLElement {
     for (const p of parts) {
       const m = p.match(/^(\d{2}):(\d{2}):(\d{2})-(.+)/);
       if (!m) continue;
-      const seconds = parseInt(m[1], 10) * 3600
-                    + parseInt(m[2], 10) * 60
-                    + parseInt(m[3], 10);
+      const seconds = parseInt(m[1], 10) * 3600 + parseInt(m[2], 10) * 60 + parseInt(m[3], 10);
       this._chapters.push({ time: seconds, label: m[4].trim() });
     }
     if (this._chapters.length === 0) {
@@ -713,19 +752,21 @@ class PodcastPlayer extends HTMLElement {
 
   /** Skip relative seconds (negative = backward). */
   _skip(sec) {
-    this._audio.currentTime = Math.max(0, Math.min(
-      this._audio.currentTime + sec,
-      this._audio.duration || 0,
-    ));
+    this._audio.currentTime = Math.max(
+      0,
+      Math.min(this._audio.currentTime + sec, this._audio.duration || 0),
+    );
     // Notify footer and other inline players of position change
-    this.dispatchEvent(new CustomEvent("podcast-seek", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        currentTime: this._audio.currentTime,
-        src: this._audio.src || this.getAttribute("src") || "",
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-seek", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentTime: this._audio.currentTime,
+          src: this._audio.src || this.getAttribute("src") || "",
+        },
+      }),
+    );
   }
 
   /** Seek to the position set on the progress slider. */
@@ -734,14 +775,16 @@ class PodcastPlayer extends HTMLElement {
     const pct = parseFloat(this._els.progress.value) / 100;
     this._audio.currentTime = pct * this._audio.duration;
     // Notify footer and other inline players playing the same source
-    this.dispatchEvent(new CustomEvent("podcast-seek", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        currentTime: this._audio.currentTime,
-        src: this._audio.src || this.getAttribute("src") || "",
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-seek", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentTime: this._audio.currentTime,
+          src: this._audio.src || this.getAttribute("src") || "",
+        },
+      }),
+    );
   }
 
   /** Seek to a chapter by index. */
@@ -755,14 +798,16 @@ class PodcastPlayer extends HTMLElement {
     });
     this._currentChapterIndex = index;
     // Notify footer and other inline players of position change
-    this.dispatchEvent(new CustomEvent("podcast-seek", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        currentTime: ch.time,
-        src: this._audio.src || this.getAttribute("src") || "",
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-seek", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentTime: ch.time,
+          src: this._audio.src || this.getAttribute("src") || "",
+        },
+      }),
+    );
     // Auto-play if paused
     if (this._audio.paused) {
       this._audio.play()?.catch(() => {});
@@ -826,7 +871,10 @@ class PodcastPlayer extends HTMLElement {
       this._audio.playbackRate = next;
     }
     this._els.rateBtn.textContent = next + "\u00d7";
-    this._els.rateBtn.setAttribute("aria-label", this._t("player_speed_label", {rate: next+"\u00d7"}));
+    this._els.rateBtn.setAttribute(
+      "aria-label",
+      this._t("player_speed_label", { rate: next + "\u00d7" }),
+    );
     this._dispatchStateChange({ playbackRate: next });
   }
 
@@ -840,8 +888,10 @@ class PodcastPlayer extends HTMLElement {
     this._els.progress.value = pct;
     this._els.progress.style.setProperty("--progress", pct + "%");
     this._els.timeCurrent.textContent = this._fmtTime(this._audio.currentTime);
-    this._els.progress.setAttribute("aria-valuetext",
-      `${this._fmtTime(this._audio.currentTime)} of ${this._fmtTime(this._audio.duration)}`);
+    this._els.progress.setAttribute(
+      "aria-valuetext",
+      `${this._fmtTime(this._audio.currentTime)} of ${this._fmtTime(this._audio.duration)}`,
+    );
 
     // Highlight active chapter
     this._updateActiveChapter();
@@ -856,7 +906,7 @@ class PodcastPlayer extends HTMLElement {
   /** Throttled wrapper around _savePlaybackState — respects SAVE_INTERVAL_MS. */
   _savePlaybackStateThrottled() {
     const now = Date.now();
-    if (this._lastSaveTs && (now - this._lastSaveTs) < PodcastPlayer.SAVE_INTERVAL_MS) return;
+    if (this._lastSaveTs && now - this._lastSaveTs < PodcastPlayer.SAVE_INTERVAL_MS) return;
     this._lastSaveTs = now;
     this._savePlaybackState();
   }
@@ -885,7 +935,8 @@ class PodcastPlayer extends HTMLElement {
   }
 
   _onPlay() {
-    this._els.playBtn.innerHTML = '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M144 96h96v320h-96zM272 96h96v320h-96z"/></svg>';
+    this._els.playBtn.innerHTML =
+      '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M144 96h96v320h-96zM272 96h96v320h-96z"/></svg>';
     this._els.playBtn.setAttribute("aria-label", this._t("player_pause"));
     this._els.playBtn.setAttribute("aria-pressed", "true");
     this._els.playBtn.title = this._t("player_pause");
@@ -899,17 +950,19 @@ class PodcastPlayer extends HTMLElement {
     }
 
     // Notify a global footer (podcast-footer) that playback started
-    this.dispatchEvent(new CustomEvent("podcast-play", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src: this._audio.src || this.getAttribute("src") || "",
-        title: this.getAttribute("title") || "",
-        poster: this.getAttribute("poster") || "",
-        url: this._resolveUrl(),
-        currentTime: this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-play", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || this.getAttribute("src") || "",
+          title: this.getAttribute("title") || "",
+          poster: this.getAttribute("poster") || "",
+          url: this._resolveUrl(),
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
 
     // Mute the inline's own audio when a <podcast-footer> is present to prevent
     // double audio — the footer's <audio> will produce the actual sound while
@@ -926,7 +979,8 @@ class PodcastPlayer extends HTMLElement {
   }
 
   _onPause() {
-    this._els.playBtn.innerHTML = '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
+    this._els.playBtn.innerHTML =
+      '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
     this._els.playBtn.setAttribute("aria-label", this._t("player_play"));
     this._els.playBtn.setAttribute("aria-pressed", "false");
     this._els.playBtn.title = this._t("player_play");
@@ -943,16 +997,18 @@ class PodcastPlayer extends HTMLElement {
     }
 
     // Notify footer (and other listeners) that playback paused
-    this.dispatchEvent(new CustomEvent("podcast-pause", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src: this._audio.src || this.getAttribute("src") || "",
-        title: this.getAttribute("title") || "",
-        poster: this.getAttribute("poster") || "",
-        currentTime: this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-pause", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || this.getAttribute("src") || "",
+          title: this.getAttribute("title") || "",
+          poster: this.getAttribute("poster") || "",
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
   }
 
   _onEnded() {
@@ -1043,7 +1099,8 @@ class PodcastPlayer extends HTMLElement {
       // _onPause will update our UI
     } else {
       // Ensure button shows play icon
-      this._els.playBtn.innerHTML = '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
+      this._els.playBtn.innerHTML =
+        '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
       this._els.playBtn.setAttribute("aria-label", this._t("player_play"));
       this._els.playBtn.setAttribute("aria-pressed", "false");
       this._els.playBtn.title = this._t("player_play");
@@ -1056,7 +1113,8 @@ class PodcastPlayer extends HTMLElement {
       this._audio.pause();
     }
     // Always show play icon on close
-    this._els.playBtn.innerHTML = '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
+    this._els.playBtn.innerHTML =
+      '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M176 96l256 160-256 160V96z"/></svg>';
     this._els.playBtn.setAttribute("aria-label", this._t("player_play"));
     this._els.playBtn.setAttribute("aria-pressed", "false");
     this._els.playBtn.title = this._t("player_play");
@@ -1073,7 +1131,8 @@ class PodcastPlayer extends HTMLElement {
 
     if (mySrc === src || urlsMatch(src, mySrc) || urlsMatch(mySrc, src)) {
       // Same source: someone else started our track — sync button to show pause
-      this._els.playBtn.innerHTML = '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M144 96h96v320h-96zM272 96h96v320h-96z"/></svg>';
+      this._els.playBtn.innerHTML =
+        '<svg viewBox="0 0 512 512" width="24" height="24"><path fill="currentColor" d="M144 96h96v320h-96zM272 96h96v320h-96z"/></svg>';
       this._els.playBtn.setAttribute("aria-label", this._t("player_pause"));
       this._els.playBtn.setAttribute("aria-pressed", "true");
       this._els.playBtn.title = this._t("player_pause");
@@ -1086,7 +1145,7 @@ class PodcastPlayer extends HTMLElement {
 
   /** Respond to a seek event from the footer or another inline player. */
   _onExternalSeek(e) {
-    const { currentTime: time, src } = (e.detail || {});
+    const { currentTime: time, src } = e.detail || {};
     if (time == null || !isFinite(time)) return;
     // Only seek if the event's source matches ours — prevents a paused
     // player's progress bar interaction from affecting the active player.
@@ -1127,16 +1186,19 @@ class PodcastPlayer extends HTMLElement {
     //    If another player on the page already has the same derived ID, append
     //    a counter to avoid collisions.
     if (!this.id) {
-      const base = "pp-" + (this.getAttribute("src") || "player")
-          .replace(/[^a-zA-Z0-9_-]/g, "")
-          .slice(0, 32) || "pp-player";
+      const base =
+        "pp-" +
+          (this.getAttribute("src") || "player").replace(/[^a-zA-Z0-9_-]/g, "").slice(0, 32) ||
+        "pp-player";
       this.id = base;
       // Resolve collisions: if we're in the DOM and another element already
       // owns this ID, append a counter until we find a free one.
       if (this.isConnected) {
         let counter = 2;
-        while (this.ownerDocument.getElementById(this.id) !== null &&
-               this.ownerDocument.getElementById(this.id) !== this) {
+        while (
+          this.ownerDocument.getElementById(this.id) !== null &&
+          this.ownerDocument.getElementById(this.id) !== this
+        ) {
           this.id = base + "-" + counter++;
         }
       }
@@ -1162,8 +1224,15 @@ class PodcastPlayer extends HTMLElement {
     // 6. One-time diagnostic — log which persistence mode is active
     if (!window.__wavecastAdapterLogged) {
       window.__wavecastAdapterLogged = true;
-      const modes = { turbolinks: "Turbolinks", turbo: "Turbo", htmx: "htmx", vanilla: "vanilla (footer will be destroyed on navigation; load htmx/Turbo/Turbolinks)" };
-      console.info(`[podcast-player] persistence adapter: ${modes[this._persistenceAdapter] || this._persistenceAdapter}`);
+      const modes = {
+        turbolinks: "Turbolinks",
+        turbo: "Turbo",
+        htmx: "htmx",
+        vanilla: "vanilla (footer will be destroyed on navigation; load htmx/Turbo/Turbolinks)",
+      };
+      console.info(
+        `[podcast-player] persistence adapter: ${modes[this._persistenceAdapter] || this._persistenceAdapter}`,
+      );
     }
 
     // 4. Vanilla safety net — save state before the page unloads
@@ -1196,15 +1265,15 @@ class PodcastPlayer extends HTMLElement {
   _savePlaybackState() {
     try {
       const state = {
-        src:          this._audio.src || this.getAttribute("src") || "",
-        currentTime:  this._audio.currentTime,
-        paused:       this._audio.paused,
-        volume:       this._audio.volume,
-        muted:        this._audio.muted,
+        src: this._audio.src || this.getAttribute("src") || "",
+        currentTime: this._audio.currentTime,
+        paused: this._audio.paused,
+        volume: this._audio.volume,
+        muted: this._audio.muted,
         playbackRate: this._audio.playbackRate,
-        timestamp:    Date.now(),
-        title:        this.getAttribute("title") || "",
-        poster:       this.getAttribute("poster") || "",
+        timestamp: Date.now(),
+        title: this.getAttribute("title") || "",
+        poster: this.getAttribute("poster") || "",
       };
       sessionStorage.setItem(this._persistenceKey(), JSON.stringify(state));
     } catch (_) {
@@ -1240,9 +1309,9 @@ class PodcastPlayer extends HTMLElement {
       sessionStorage.removeItem(this._persistenceKey());
 
       // Restore audio properties eagerly (safe regardless of src or metadata)
-      if (state.volume != null)        this._audio.volume = state.volume;
-      if (state.muted != null)         this._audio.muted = state.muted;
-      if (state.playbackRate != null)  this._audio.playbackRate = state.playbackRate;
+      if (state.volume != null) this._audio.volume = state.volume;
+      if (state.muted != null) this._audio.muted = state.muted;
+      if (state.playbackRate != null) this._audio.playbackRate = state.playbackRate;
 
       // Update UI immediately for volume/rate
       this._els.volume.value = this._audio.muted ? 0 : this._audio.volume;
@@ -1258,7 +1327,9 @@ class PodcastPlayer extends HTMLElement {
       try {
         const u = new URL(state.src, document.baseURI);
         if (u.protocol !== "http:" && u.protocol !== "https:") return;
-      } catch (_) { return; }
+      } catch (_) {
+        return;
+      }
 
       // Defer position + autoplay to loadedmetadata (where duration is known)
       this._pendingRestoreState = state;
@@ -1285,20 +1356,17 @@ class PodcastPlayer extends HTMLElement {
     }
 
     // Position restore with staleness guard
-    const elapsed = (state.timestamp != null)
-      ? (Date.now() - state.timestamp) / 1000
-      : Infinity;
+    const elapsed = state.timestamp != null ? (Date.now() - state.timestamp) / 1000 : Infinity;
 
-    if (elapsed < PodcastPlayer.STATE_TTL_SECONDS
-        && state.currentTime != null
-        && state.currentTime > 0) {
+    if (
+      elapsed < PodcastPlayer.STATE_TTL_SECONDS &&
+      state.currentTime != null &&
+      state.currentTime > 0
+    ) {
       // Only estimate forward if the audio was actively playing
       let targetTime = state.currentTime;
       if (!state.paused) {
-        targetTime = Math.min(
-          state.currentTime + elapsed,
-          this._audio.duration || Infinity,
-        );
+        targetTime = Math.min(state.currentTime + elapsed, this._audio.duration || Infinity);
       }
       if (targetTime < (this._audio.duration || Infinity)) {
         this._audio.currentTime = targetTime;
@@ -1368,7 +1436,10 @@ class PodcastPlayer extends HTMLElement {
     const t = this._audio.currentTime;
     let activeIdx = -1;
     for (let i = this._chapters.length - 1; i >= 0; i--) {
-      if (t >= this._chapters[i].time) { activeIdx = i; break; }
+      if (t >= this._chapters[i].time) {
+        activeIdx = i;
+        break;
+      }
     }
     if (activeIdx !== this._currentChapterIndex) {
       this._currentChapterIndex = activeIdx;
@@ -1380,15 +1451,17 @@ class PodcastPlayer extends HTMLElement {
 
   /** Dispatch a player-state custom event. */
   _dispatchState() {
-    this.dispatchEvent(new CustomEvent("player-state", {
-      bubbles: true,
-      detail: {
-        paused: this._audio.paused,
-        src: this._audio.src,
-        currentTime: this._audio.currentTime,
-        duration: this._audio.duration,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("player-state", {
+        bubbles: true,
+        detail: {
+          paused: this._audio.paused,
+          src: this._audio.src,
+          currentTime: this._audio.currentTime,
+          duration: this._audio.duration,
+        },
+      }),
+    );
   }
 
   /**
@@ -1409,23 +1482,34 @@ class PodcastPlayer extends HTMLElement {
   _dispatchStateChange(overrides = {}) {
     if (this._suppressSync) return;
     const footerActive = document.querySelector("podcast-footer[active]");
-    this.dispatchEvent(new CustomEvent("podcast-state-change", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src:          this._audio.src || this.getAttribute("src") || "",
-        volume:       "volume" in overrides ? overrides.volume
-                      : footerActive ? parseFloat(this._els.volume.value)
-                      : this._audio.volume,
-        muted:        "muted" in overrides ? overrides.muted
-                      : footerActive ? (this._els.muteBtn.getAttribute("aria-pressed") === "true")
-                      : this._audio.muted,
-        playbackRate: "playbackRate" in overrides ? overrides.playbackRate
-                      : footerActive ? (parseFloat(this._els.rateBtn.textContent) || 1)
-                      : this._audio.playbackRate,
-        currentTime:  this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-state-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || this.getAttribute("src") || "",
+          volume:
+            "volume" in overrides
+              ? overrides.volume
+              : footerActive
+                ? parseFloat(this._els.volume.value)
+                : this._audio.volume,
+          muted:
+            "muted" in overrides
+              ? overrides.muted
+              : footerActive
+                ? this._els.muteBtn.getAttribute("aria-pressed") === "true"
+                : this._audio.muted,
+          playbackRate:
+            "playbackRate" in overrides
+              ? overrides.playbackRate
+              : footerActive
+                ? parseFloat(this._els.rateBtn.textContent) || 1
+                : this._audio.playbackRate,
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
   }
 
   /**
@@ -1438,7 +1522,8 @@ class PodcastPlayer extends HTMLElement {
     const d = e.detail || {};
     // Only react if src matches
     const mySrc = this._audio.src || this.getAttribute("src") || "";
-    if (d.src && mySrc && d.src !== mySrc && !urlsMatch(d.src, mySrc) && !urlsMatch(mySrc, d.src)) return;
+    if (d.src && mySrc && d.src !== mySrc && !urlsMatch(d.src, mySrc) && !urlsMatch(mySrc, d.src))
+      return;
 
     // Guard against echo — suppress our own dispatch while updating UI
     this._suppressSync = true;
@@ -1447,8 +1532,8 @@ class PodcastPlayer extends HTMLElement {
         this._els.volume.value = d.volume;
       }
       if (d.muted != null) {
-        this._updateMuteIcon(d.muted ? 0 : (d.volume != null ? d.volume : this._audio.volume));
-        this._els.volume.value = d.muted ? 0 : (this._els.volume.value);
+        this._updateMuteIcon(d.muted ? 0 : d.volume != null ? d.volume : this._audio.volume);
+        this._els.volume.value = d.muted ? 0 : this._els.volume.value;
         this._els.muteBtn.setAttribute("aria-pressed", d.muted ? "true" : "false");
       }
       if (d.playbackRate != null) {
@@ -1507,6 +1592,7 @@ class PodcastFooter extends HTMLElement {
       player_close: "Close player",
       player_unknown_episode: "Unknown Episode",
       player_source_link: "View episode",
+      player_listen_live: "Listen Live",
     };
   }
 
@@ -1537,7 +1623,7 @@ class PodcastFooter extends HTMLElement {
     this._t = (key, vars) => {
       let s = this._i[key] || key;
       if (vars) {
-        Object.keys(vars).forEach(k => {
+        Object.keys(vars).forEach((k) => {
           s = s.replace("{" + k + "}", vars[k]);
         });
       }
@@ -1591,7 +1677,7 @@ class PodcastFooter extends HTMLElement {
    * No-op if either element is missing.
    */
   _setupTitleMarquee() {
-    const wrap  = this._els.title;     // .title  — clipped container
+    const wrap = this._els.title; // .title  — clipped container
     const inner = this._els.titleText; // .title-text — scrollable span
     if (!wrap || !inner) return;
 
@@ -1720,7 +1806,7 @@ class PodcastFooter extends HTMLElement {
       // Cache the override so a later podcast-play event can prefer it
       // over the inline player's URL. If the footer is already showing
       // a source, apply immediately too.
-      this._topLevelUrlOverride = (newValue != null) ? newValue : null;
+      this._topLevelUrlOverride = newValue != null ? newValue : null;
       if (this._els && this._els.source) {
         const link = this._els.source;
         if (link.textContent && link.textContent.trim()) {
@@ -1888,6 +1974,16 @@ class PodcastFooter extends HTMLElement {
           transition: background .15s; flex-shrink: 0;
         }
         .rate-btn:hover { background: var(--podcast-player-surface, #2a2a3e); }
+        .listen-live-btn {
+          background: #dc2626; color: white; border: none;
+          font-size: .7rem; font-weight: 600;
+          padding: 0 8px; height: 24px; border-radius: 12px;
+          cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
+          transition: background .15s; flex-shrink: 0;
+        }
+        .listen-live-btn:hover { background: #b91c1c; }
+        .listen-live-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+        .listen-live-btn[hidden] { display: none; }
         .close {
           background: transparent; border: none; color: var(--podcast-player-text-muted, #888);
           cursor: pointer; padding: 4px; border-radius: 4px;
@@ -1967,6 +2063,8 @@ class PodcastFooter extends HTMLElement {
         </div>
         <button class="rate-btn" part="rate-btn"
                 title="${this._t("player_speed")}" aria-label="${this._t("player_speed")}">1×</button>
+        <button class="listen-live-btn" part="listen-live-btn" hidden
+                title="${this._t("player_listen_live")}" aria-label="${this._t("player_listen_live")}">${this._t("player_listen_live")}</button>
         <button class="close" part="close-btn" title="${this._t("player_close")}" aria-label="${this._t("player_close")}">
           <svg viewBox="0 0 12 12" width="14" height="14"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/></svg>
         </button>
@@ -1975,21 +2073,22 @@ class PodcastFooter extends HTMLElement {
 
     // Cache DOM refs
     this._els = {
-      footer:     this._shadow.querySelector(".footer"),
-      cover:      this._shadow.querySelector(".cover"),
-      title:      this._shadow.querySelector(".title"),
-      titleText:  this._shadow.querySelector(".title-text"),
-      source:     this._shadow.querySelector(".source"),
-      playBtn:    this._shadow.querySelector(".btn-play"),
-      skipBack:   this._shadow.querySelector(".btn-skip-back"),
-      skipFwd:    this._shadow.querySelector(".btn-skip-fwd"),
-      progress:   this._shadow.querySelector(".progress"),
-      timeCur:    this._shadow.querySelector('[part="time-current"]'),
-      timeDur:    this._shadow.querySelector('[part="time-duration"]'),
-      volume:     this._shadow.querySelector(".volume"),
-      muteBtn:    this._shadow.querySelector(".mute-btn"),
-      rateBtn:    this._shadow.querySelector(".rate-btn"),
-      closeBtn:   this._shadow.querySelector(".close"),
+      footer: this._shadow.querySelector(".footer"),
+      cover: this._shadow.querySelector(".cover"),
+      title: this._shadow.querySelector(".title"),
+      titleText: this._shadow.querySelector(".title-text"),
+      source: this._shadow.querySelector(".source"),
+      playBtn: this._shadow.querySelector(".btn-play"),
+      skipBack: this._shadow.querySelector(".btn-skip-back"),
+      skipFwd: this._shadow.querySelector(".btn-skip-fwd"),
+      progress: this._shadow.querySelector(".progress"),
+      timeCur: this._shadow.querySelector('[part="time-current"]'),
+      timeDur: this._shadow.querySelector('[part="time-duration"]'),
+      volume: this._shadow.querySelector(".volume"),
+      muteBtn: this._shadow.querySelector(".mute-btn"),
+      rateBtn: this._shadow.querySelector(".rate-btn"),
+      listenLiveBtn: this._shadow.querySelector(".listen-live-btn"),
+      closeBtn: this._shadow.querySelector(".close"),
     };
   }
 
@@ -2020,6 +2119,9 @@ class PodcastFooter extends HTMLElement {
     this._els.volume.addEventListener("input", () => this._setVolume());
     this._els.muteBtn.addEventListener("click", () => this._toggleMute());
     this._els.rateBtn.addEventListener("click", () => this._cycleRate());
+    if (this._els.listenLiveBtn) {
+      this._els.listenLiveBtn.addEventListener("click", () => this._onListenLiveClick());
+    }
     this._els.closeBtn.addEventListener("click", () => this._close());
   }
 
@@ -2047,9 +2149,7 @@ class PodcastFooter extends HTMLElement {
     // Top-level <podcast-footer url="..."> always overrides what the inline
     // player sent via the event detail.
     const eventUrl = (e.detail && e.detail.url) || "";
-    const finalUrl = (this._topLevelUrlOverride != null)
-      ? this._topLevelUrlOverride
-      : eventUrl;
+    const finalUrl = this._topLevelUrlOverride != null ? this._topLevelUrlOverride : eventUrl;
     this._setSourceLink(finalUrl);
 
     if (poster) {
@@ -2068,6 +2168,7 @@ class PodcastFooter extends HTMLElement {
 
     this.setAttribute("active", "");
     this._setupTitleMarquee();
+    this._updateListenLiveVisibility();
   }
 
   /** React to pause events from inline <podcast-player> elements.
@@ -2105,19 +2206,21 @@ class PodcastFooter extends HTMLElement {
     const pct = parseFloat(this._els.progress.value) / 100;
     this._audio.currentTime = pct * this._audio.duration;
     // Notify inline players playing the same source
-    this.dispatchEvent(new CustomEvent("podcast-seek", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        currentTime: this._audio.currentTime,
-        src: this._audio.src || "",
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-seek", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentTime: this._audio.currentTime,
+          src: this._audio.src || "",
+        },
+      }),
+    );
   }
 
   /** Respond to seek events from inline players — keep footer in sync. */
   _onExternalSeek(e) {
-    const { currentTime: time, src } = (e.detail || {});
+    const { currentTime: time, src } = e.detail || {};
     if (time == null || !isFinite(time)) return;
     // Only seek if the source matches what the footer is playing
     const mySrc = this._audio.src || "";
@@ -2128,18 +2231,20 @@ class PodcastFooter extends HTMLElement {
 
   _skip(sec) {
     if (!this._audio.src) return;
-    this._audio.currentTime = Math.max(0, Math.min(
-      (this._audio.currentTime || 0) + sec,
-      this._audio.duration || Infinity,
-    ));
-    this.dispatchEvent(new CustomEvent("podcast-seek", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        currentTime: this._audio.currentTime,
-        src: this._audio.src || "",
-      },
-    }));
+    this._audio.currentTime = Math.max(
+      0,
+      Math.min((this._audio.currentTime || 0) + sec, this._audio.duration || Infinity),
+    );
+    this.dispatchEvent(
+      new CustomEvent("podcast-seek", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentTime: this._audio.currentTime,
+          src: this._audio.src || "",
+        },
+      }),
+    );
   }
 
   _cycleRate() {
@@ -2166,15 +2271,54 @@ class PodcastFooter extends HTMLElement {
     this._dispatchStateChange();
   }
 
+  /** Click handler for the "Listen Live" CTA. Dispatches a `podcast-play`
+   *  event using the resolved live stream URL from the page's
+   *  <podcast-live> element (if any). The existing single-stream
+   *  enforcement automatically pauses the currently-playing source. */
+  _onListenLiveClick() {
+    const liveEl = document.querySelector("podcast-live");
+    const liveUrl = liveEl && liveEl._liveStreamUrl;
+    if (!liveUrl) return;
+    this.dispatchEvent(
+      new CustomEvent("podcast-play", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: liveUrl,
+          title:
+            (liveEl && liveEl._trackTitle) ||
+            (liveEl && liveEl._i && liveEl._i.player_live_now_playing) ||
+            "",
+          poster: "",
+          currentTime: 0,
+        },
+      }),
+    );
+    this._updateListenLiveVisibility();
+  }
+
+  /** Show or hide the "Listen Live" CTA based on whether a <podcast-live>
+   *  is on the page and the current audio src is NOT the live URL. */
+  _updateListenLiveVisibility() {
+    if (!this._els || !this._els.listenLiveBtn) return;
+    const liveEl = document.querySelector("podcast-live");
+    const liveUrl = liveEl && liveEl._liveStreamUrl;
+    const isLive = !!liveEl && !!liveUrl;
+    const isPlayingLive = isLive && this._audio.src && this._audio.src === liveUrl;
+    this._els.listenLiveBtn.hidden = !isLive || isPlayingLive;
+  }
+
   /** Hide the footer and stop playback. */
   _close() {
     this._audio.pause();
     // Notify inline players to stop — dispatches BEFORE src is cleared
-    this.dispatchEvent(new CustomEvent("podcast-close", {
-      bubbles: true,
-      composed: true,
-      detail: { src: this._audio.src || "" },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-close", {
+        bubbles: true,
+        composed: true,
+        detail: { src: this._audio.src || "" },
+      }),
+    );
     this._audio.removeAttribute("src");
     this._audio.load();
     this.removeAttribute("active");
@@ -2187,17 +2331,19 @@ class PodcastFooter extends HTMLElement {
    */
   _dispatchStateChange() {
     if (this._suppressSync) return;
-    this.dispatchEvent(new CustomEvent("podcast-state-change", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src:          this._audio.src || "",
-        volume:       this._audio.volume,
-        muted:        this._audio.muted,
-        playbackRate: this._audio.playbackRate,
-        currentTime:  this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-state-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || "",
+          volume: this._audio.volume,
+          muted: this._audio.muted,
+          playbackRate: this._audio.playbackRate,
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
   }
 
   /**
@@ -2210,7 +2356,8 @@ class PodcastFooter extends HTMLElement {
     const d = e.detail || {};
     // Only react if src matches
     const mySrc = this._audio.src || "";
-    if (d.src && mySrc && d.src !== mySrc && !urlsMatch(d.src, mySrc) && !urlsMatch(mySrc, d.src)) return;
+    if (d.src && mySrc && d.src !== mySrc && !urlsMatch(d.src, mySrc) && !urlsMatch(mySrc, d.src))
+      return;
 
     this._suppressSync = true;
     try {
@@ -2240,16 +2387,18 @@ class PodcastFooter extends HTMLElement {
     this._els.playBtn.title = this._t("player_pause");
 
     // Notify inline players to sync their UI
-    this.dispatchEvent(new CustomEvent("podcast-play", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src: this._audio.src || "",
-        title: this._els.title.textContent,
-        poster: this._els.cover.getAttribute("src") || "",
-        currentTime: this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-play", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || "",
+          title: this._els.title.textContent,
+          poster: this._els.cover.getAttribute("src") || "",
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
   }
 
   _onPause() {
@@ -2258,27 +2407,33 @@ class PodcastFooter extends HTMLElement {
     this._els.playBtn.title = this._t("player_play");
 
     // Notify inline players to sync their UI
-    this.dispatchEvent(new CustomEvent("podcast-pause", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        src: this._audio.src || "",
-        title: this._els.title.textContent,
-        poster: this._els.cover.getAttribute("src") || "",
-        currentTime: this._audio.currentTime,
-      },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("podcast-pause", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._audio.src || "",
+          title: this._els.title.textContent,
+          poster: this._els.cover.getAttribute("src") || "",
+          currentTime: this._audio.currentTime,
+        },
+      }),
+    );
   }
 
   _onTimeUpdate() {
     if (!this._audio.duration) return;
     const pct = this._audio.currentTime / this._audio.duration;
     this._els.progress.value = Math.round(pct * 100);
-    this._els.progress.style.setProperty("--progress", (pct * 100) + "%");
+    this._els.progress.style.setProperty("--progress", pct * 100 + "%");
     this._els.timeCur.textContent = this._fmtTime(this._audio.currentTime);
-    this._els.timeDur.textContent = this._audio.duration ? this._fmtTime(this._audio.duration) : "--:--";
-    this._els.progress.setAttribute("aria-valuetext",
-      this._els.timeCur.textContent + " of " + this._els.timeDur.textContent);
+    this._els.timeDur.textContent = this._audio.duration
+      ? this._fmtTime(this._audio.duration)
+      : "--:--";
+    this._els.progress.setAttribute(
+      "aria-valuetext",
+      this._els.timeCur.textContent + " of " + this._els.timeDur.textContent,
+    );
   }
 
   _onLoadedMetadata() {
@@ -2296,16 +2451,16 @@ class PodcastFooter extends HTMLElement {
     if (!this._audio.src) return; // nothing playing
     try {
       const state = {
-        src:          this._audio.src,
-        currentTime:  this._audio.currentTime,
-        paused:       this._audio.paused,
-        volume:       this._audio.volume,
-        muted:        this._audio.muted,
+        src: this._audio.src,
+        currentTime: this._audio.currentTime,
+        paused: this._audio.paused,
+        volume: this._audio.volume,
+        muted: this._audio.muted,
         playbackRate: this._audio.playbackRate,
-        timestamp:    Date.now(),
-        title:        this._els.title.textContent,
-        poster:       this._els.cover.getAttribute("src") || "",
-        url:          this._currentSourceUrl || "",
+        timestamp: Date.now(),
+        title: this._els.title.textContent,
+        poster: this._els.cover.getAttribute("src") || "",
+        url: this._currentSourceUrl || "",
       };
       sessionStorage.setItem(PodcastFooter.PERSISTENCE_KEY, JSON.stringify(state));
     } catch (_) {}
@@ -2327,24 +2482,26 @@ class PodcastFooter extends HTMLElement {
           console.warn("PodcastFooter: ignoring restored src with unsafe scheme", u.protocol);
           return;
         }
-      } catch (_) { return; }
+      } catch (_) {
+        return;
+      }
 
       // Restore volume/mute/rate immediately
-      if (state.volume != null)        this._audio.volume = state.volume;
-      if (state.muted != null)         this._audio.muted = state.muted;
-      if (state.playbackRate != null)  this._audio.playbackRate = state.playbackRate;
+      if (state.volume != null) this._audio.volume = state.volume;
+      if (state.muted != null) this._audio.muted = state.muted;
+      if (state.playbackRate != null) this._audio.playbackRate = state.playbackRate;
 
       this._els.volume.value = this._audio.muted ? 0 : this._audio.volume;
       this._setMuteIcon();
       this._els.rateBtn.textContent = (state.playbackRate || 1) + "×";
       this._els.titleText.textContent = state.title || this._t("player_unknown_episode");
-      this._els.source.textContent = state.src.replace(/^https?:\/\//, "").split("/")[0] || state.src;
+      this._els.source.textContent =
+        state.src.replace(/^https?:\/\//, "").split("/")[0] || state.src;
       // Top-level <podcast-footer url="..."> override (set in HTML or at
       // runtime) takes precedence over the URL persisted from a prior
       // session.
-      const restoreUrl = (this._topLevelUrlOverride != null)
-        ? this._topLevelUrlOverride
-        : (state.url || "");
+      const restoreUrl =
+        this._topLevelUrlOverride != null ? this._topLevelUrlOverride : state.url || "";
       this._setSourceLink(restoreUrl);
 
       if (state.poster) {
@@ -2380,20 +2537,17 @@ class PodcastFooter extends HTMLElement {
    *  actually paused — calling it on an already-playing element can glitch. */
   _applyPositionAndResume(state) {
     if (!state) return;
-    const elapsed = (state.timestamp != null)
-      ? (Date.now() - state.timestamp) / 1000
-      : Infinity;
-
-    if (elapsed < PodcastFooter.STATE_TTL_SECONDS
-        && state.currentTime != null
-        && state.currentTime > 0
-        && state.currentTime < (this._audio.duration || Infinity)) {
+    const elapsed = state.timestamp != null ? (Date.now() - state.timestamp) / 1000 : Infinity;
+
+    if (
+      elapsed < PodcastFooter.STATE_TTL_SECONDS &&
+      state.currentTime != null &&
+      state.currentTime > 0 &&
+      state.currentTime < (this._audio.duration || Infinity)
+    ) {
       let targetTime = state.currentTime;
       if (!state.paused) {
-        targetTime = Math.min(
-          state.currentTime + elapsed,
-          this._audio.duration || Infinity,
-        );
+        targetTime = Math.min(state.currentTime + elapsed, this._audio.duration || Infinity);
       }
       // Only seek if the position differs meaningfully — the audio may have
       // played through navigation uninterrupted, so currentTime is already
@@ -2431,6 +2585,284 @@ class PodcastFooter extends HTMLElement {
   }
 }
 
+// -----------------------------------------------------------------------
+// <podcast-live> — Live radio mode (AzuraCast nowplaying polling)
+// -----------------------------------------------------------------------
+
+/**
+ * Live radio Web Component. Polls an AzuraCast `nowplaying` API on a
+ * configurable interval, renders the current track metadata in its own
+ * Shadow DOM, and exposes a "Listen Live" button that dispatches
+ * `podcast-play` to <podcast-footer> via the document.
+ *
+ * State machine: `idle` (no metadata yet) → `loading` (fetching) →
+ * `playing` (showing live track) or `offline` (last fetch failed) or
+ * `error` (bad config / never fetched).
+ *
+ * The component does NOT own audio. The audible stream lives in
+ * <podcast-footer>, which already listens to `podcast-play` on
+ * `document` and enforces single-stream playback.
+ */
+export class PodcastLive extends HTMLElement {
+  /** English defaults; overridden by window.wavecast.i18n in the example site. */
+  static get DEFAULT_I18N() {
+    return {
+      player_live_badge: "LIVE",
+      player_listen_live: "Listen Live",
+      player_live_now_playing: "Now Playing",
+      player_live_offline: "Offline",
+    };
+  }
+
+  static get observedAttributes() {
+    return ["data-azuracast-api-url", "station-name", "poll-interval-active", "poll-interval-idle"];
+  }
+
+  /** Format a Date as 24H clock "HH:MM" (or "--:--" on invalid). */
+  static _fmtClockTime(date) {
+    if (!(date instanceof Date) || isNaN(date.getTime())) return "--:--";
+    const h = String(date.getHours()).padStart(2, "0");
+    const m = String(date.getMinutes()).padStart(2, "0");
+    return `${h}:${m}`;
+  }
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: "open" });
+    this._i = { ...PodcastLive.DEFAULT_I18N, ...((window.wavecast && window.wavecast.i18n) || {}) };
+    this._els = {};
+    this._abortController = null;
+    this._pollTimer = null;
+    this._errorCount = 0;
+    this._liveStreamUrl = "";
+    this._trackTitle = "";
+    this._trackArtist = "";
+    this._trackElapsed = 0;
+    this._trackDuration = 0;
+    // Bind once so add/removeEventListener pair correctly.
+    this._onExternalPlay = this._onExternalPlay.bind(this);
+  }
+
+  connectedCallback() {
+    this._render();
+    this._bindUIEvents();
+    document.addEventListener("podcast-play", this._onExternalPlay);
+    // Synchronously validate the URL. If invalid, set state to "error" and
+    // skip the first fetch entirely.
+    const url = this.getAttribute("data-azuracast-api-url");
+    if (!url || !this._isValidApiUrl(url)) {
+      this._setState("error");
+      return;
+    }
+    // Kick off the first poll synchronously so the synchronous fetch
+    // call is observable immediately (the H2 test relies on this). The
+    // host's `data-state` stays at "idle" until `_poll` resolves the
+    // initial fetch and transitions to "playing" (or "offline" on
+    // failure) — so consumers see a clean idle→resolved transition.
+    this._poll();
+  }
+
+  disconnectedCallback() {
+    if (this._pollTimer) {
+      clearTimeout(this._pollTimer);
+      this._pollTimer = null;
+    }
+    if (this._abortController) {
+      this._abortController.abort();
+      this._abortController = null;
+    }
+    document.removeEventListener("podcast-play", this._onExternalPlay);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    // No imperative work; the next poll cycle picks up new values.
+    // (Re-rendering would be wasteful for purely-config changes.)
+  }
+
+  // ---------- internal helpers ----------
+
+  _render() {
+    this._shadow.innerHTML = `
+      <style>
+        :host { display: block; }
+        :host([hidden]) { display: none; }
+        .card {
+          display: flex; align-items: center; gap: 8px;
+          padding: 8px 12px;
+          background: var(--podcast-live-bg, #1e1e2e);
+          color: var(--podcast-live-text, #e0e0e0);
+          border-radius: 8px;
+          font-family: system-ui, -apple-system, sans-serif;
+          font-size: .85rem;
+        }
+        .badge {
+          background: #dc2626; color: white;
+          padding: 2px 8px; border-radius: 9999px;
+          font-size: .65rem; font-weight: 700;
+          text-transform: uppercase; letter-spacing: .05em;
+          flex-shrink: 0;
+        }
+        @keyframes live-pulse {
+          0%, 100% { opacity: 1; }
+          50%      { opacity: 0.4; }
+        }
+        :host([data-state="playing"]) .badge {
+          animation: live-pulse 1.5s ease-in-out infinite;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          :host([data-state="playing"]) .badge { animation: none; }
+        }
+        :host([data-state="offline"]) .badge {
+          background: #6b7280;
+        }
+        :host([data-state="error"]) .card { display: none; }
+        .meta { flex: 1; min-width: 0; }
+        .title, .artist {
+          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        }
+        .title { font-weight: 600; }
+        .artist { color: var(--podcast-live-text-muted, #888); font-size: .8rem; }
+        .time { font-size: .75rem; color: var(--podcast-live-text-muted, #888); }
+        .listen-live {
+          background: #dc2626; color: white; border: none;
+          padding: 6px 12px; border-radius: 4px; font-size: .8rem;
+          font-weight: 600; cursor: pointer; flex-shrink: 0;
+        }
+        .listen-live:hover { background: #b91c1c; }
+        .listen-live:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+      </style>
+      <div class="card" part="card" data-state="idle">
+        <span class="badge" part="live-badge"
+              aria-label="Live radio currently broadcasting">LIVE</span>
+        <div class="meta" part="meta">
+          <div class="title" part="track-title">&mdash;</div>
+          <div class="artist" part="track-artist">&mdash;</div>
+          <div class="time" part="track-time">&mdash; &rarr; &mdash;</div>
+        </div>
+        <button class="listen-live" part="listen-live-btn"
+                aria-label="Listen Live">Listen Live</button>
+      </div>
+    `;
+    this._els = {
+      card: this._shadow.querySelector(".card"),
+      title: this._shadow.querySelector(".title"),
+      artist: this._shadow.querySelector(".artist"),
+      time: this._shadow.querySelector(".time"),
+      listenBtn: this._shadow.querySelector(".listen-live"),
+    };
+    this.setAttribute("data-state", "idle");
+  }
+
+  _bindUIEvents() {
+    this._els.listenBtn.addEventListener("click", () => this._onListenLiveClick());
+  }
+
+  _onExternalPlay(e) {
+    const detail = (e && e.detail) || {};
+    const src = detail.src || "";
+    // If the event's src matches the live stream URL, mark as playing.
+    // (The footer also updates its own audio.src; we just track state.)
+    if (src && this._liveStreamUrl && src === this._liveStreamUrl) {
+      this._setState("playing");
+    }
+  }
+
+  _onListenLiveClick() {
+    if (!this._liveStreamUrl) return; // can't start without a URL
+    this.dispatchEvent(
+      new CustomEvent("podcast-play", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this._liveStreamUrl,
+          title: this._trackTitle || this._i.player_live_now_playing,
+          poster: "",
+          currentTime: 0,
+        },
+      }),
+    );
+  }
+
+  _setState(state) {
+    if (this._els && this._els.card) this._els.card.setAttribute("data-state", state);
+    this.setAttribute("data-state", state);
+  }
+
+  /** Validate the nowplaying API URL: must be HTTPS, parseable. */
+  _isValidApiUrl(url) {
+    try {
+      const u = new URL(url, document.baseURI);
+      return u.protocol === "https:";
+    } catch (_) {
+      return false;
+    }
+  }
+
+  _scheduleNextPoll(delayMs) {
+    if (this._pollTimer) clearTimeout(this._pollTimer);
+    this._pollTimer = setTimeout(() => this._poll(), delayMs);
+  }
+
+  async _poll() {
+    this._pollTimer = null;
+    const url = this.getAttribute("data-azuracast-api-url");
+    if (!url || !this._isValidApiUrl(url)) {
+      this._setState("error");
+      return;
+    }
+
+    // Stay in "idle" until the first fetch resolves (or fails). Tests
+    // assert the initial state is "idle" right after `connectedCallback`,
+    // so we avoid a synchronous "loading" transition that would race
+    // with that assertion. The visual "loading" hint is implicit in
+    // the next-state transition.
+    this._abortController = new AbortController();
+    try {
+      const resp = await fetch(url, { signal: this._abortController.signal });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      this._applyNowPlaying(data);
+      this._errorCount = 0;
+      this._setState("playing");
+      // Schedule the next poll with the active interval.
+      const interval = parseInt(this.getAttribute("poll-interval-active") || "15000", 10);
+      this._scheduleNextPoll(interval);
+    } catch (err) {
+      if (err && err.name === "AbortError") return; // disconnect, ignore
+      this._errorCount++;
+      const backoffs = [30000, 60000, 120000, 240000, 600000];
+      this._scheduleNextPoll(backoffs[Math.min(this._errorCount - 1, backoffs.length - 1)]);
+      this._setState("offline");
+    } finally {
+      this._abortController = null;
+    }
+  }
+
+  _applyNowPlaying(data) {
+    const np = data && data.now_playing;
+    if (!np || !np.song) return;
+    this._trackTitle = np.song.title || "";
+    this._trackArtist = np.song.artist || "";
+    this._trackElapsed = np.elapsed || 0;
+    this._trackDuration = np.duration || 0;
+    if (data.station && data.station.listen_url) {
+      this._liveStreamUrl = data.station.listen_url;
+    }
+
+    if (this._els.title) this._els.title.textContent = this._trackTitle || "—";
+    if (this._els.artist) this._els.artist.textContent = this._trackArtist || "—";
+
+    // Compute 24H start and end times from elapsed/duration relative to wall clock.
+    const now = Date.now();
+    const startMs = now - this._trackElapsed * 1000;
+    const endMs = startMs + this._trackDuration * 1000;
+    const startStr = PodcastLive._fmtClockTime(new Date(startMs));
+    const endStr = PodcastLive._fmtClockTime(new Date(endMs));
+    if (this._els.time) this._els.time.textContent = `${startStr} \u2192 ${endStr}`;
+  }
+}
+
 // -----------------------------------------------------------------------
 // Registration
 // -----------------------------------------------------------------------
@@ -2440,5 +2872,8 @@ if (!customElements.get("podcast-player")) {
 if (!customElements.get("podcast-footer")) {
   customElements.define("podcast-footer", PodcastFooter);
 }
+if (!customElements.get("podcast-live")) {
+  customElements.define("podcast-live", PodcastLive);
+}
 
 export default PodcastPlayer;
diff --git a/exampleSite/content/docs/advanced.md b/exampleSite/content/docs/advanced.md
index 42d5a6a..4e8a946 100644
--- a/exampleSite/content/docs/advanced.md
+++ b/exampleSite/content/docs/advanced.md
@@ -35,6 +35,38 @@ If `src` is provided alongside `source="azuracast"`, it's used directly without
 
 **Auto-detection**: triggered when the URL contains `azuracast` or `.stream.`.
 
+### Live Mode
+
+For sites that run an AzuraCast live radio stream, the `<podcast-live>`
+component shows a "Listen Live" button in the persistent footer with
+real-time now-playing metadata: track title, artist, and 24H start-to-end
+time. The stream itself is played through the regular `<podcast-footer>`,
+so existing single-stream enforcement, persistence, and theming all
+work without changes.
+
+To enable live mode, add a `<podcast-live>` element as a sibling of
+`<podcast-footer>` in your `baseof.html`:
+
+```go-html-template
+<podcast-live
+  data-azuracast-api-url="https://radio.example.org/api/live/nowplaying/station-slug"
+  station-name="My Radio">
+</podcast-live>
+```
+
+The metadata refreshes every 15 seconds while the stream is playing
+and every 60 seconds otherwise. On fetch errors the polling backs off
+exponentially (30s, 60s, 120s, ..., max 10 minutes) until it recovers.
+
+A "Listen Live" button also appears inside the regular footer when a
+non-live source is playing; clicking it switches to the live stream and
+stops the other source. The flow is governed by the same event protocol
+as the rest of the player (`podcast-play` / `podcast-pause` events).
+
+The badge has a pulse animation by default; `prefers-reduced-motion:
+reduce` disables it. The animation is at most 1.5 Hz, well within the
+3 Hz seizure-safety threshold.
+
 ### iVoox
 
 Fetches the iVoox episode page and extracts the audio URL from:
diff --git a/exampleSite/content/docs/homepage-setup.md b/exampleSite/content/docs/homepage-setup.md
index 7e3694e..212d1fc 100644
--- a/exampleSite/content/docs/homepage-setup.md
+++ b/exampleSite/content/docs/homepage-setup.md
@@ -163,6 +163,34 @@ On viewports narrower than 768px, all three sizes collapse to the same compact l
 
 The attribute is purely visual. Persistence, playback, and the audio source URL are unaffected by `size`. Theme variables (`--podcast-player-bg`, `--podcast-player-text`, etc.) continue to work as before.
 
+## Live Radio Mode
+
+The persistent footer can host a live radio station via the
+`<podcast-live>` element, typically placed as a sibling of
+`<podcast-footer>` in `baseof.html`. When the live stream is playing,
+the footer shows a red LIVE badge, the current track metadata, and a
+24H start-to-end time that updates as the track progresses.
+
+To enable:
+
+```go-html-template
+<podcast-live
+  data-azuracast-api-url="https://radio.example.org/api/live/nowplaying/station-slug"
+  station-name="My Radio">
+</podcast-live>
+```
+
+While any non-live source is playing, a "Listen Live" button appears
+in the footer. Clicking it switches to the live stream and stops the
+other source. The live badge has a pulse animation by default; users
+with `prefers-reduced-motion: reduce` see a static dot instead.
+
+The metadata refreshes every 15 seconds while playing and every 60
+seconds otherwise, with exponential backoff on errors. The configuration
+follows the same `data-turbolinks-permanent` / `hx-preserve` rules as
+the rest of the footer, so it persists across htmx / Turbo / Turbolinks
+navigation.
+
 ## Example: Full baseof.html Footer Section
 
 ```html
diff --git a/exampleSite/content/es/docs/homepage-setup.md b/exampleSite/content/es/docs/homepage-setup.md
index 42bf2fb..9d49e4c 100644
--- a/exampleSite/content/es/docs/homepage-setup.md
+++ b/exampleSite/content/es/docs/homepage-setup.md
@@ -135,6 +135,36 @@ En pantallas de menos de 768px de ancho, los tres tamaños colapsan al mismo dis
 
 El atributo es puramente visual. La persistencia, la reproducción y la URL de la fuente de audio no se ven afectadas por `size`. Las variables de tema (`--podcast-player-bg`, `--podcast-player-text`, etc.) siguen funcionando como antes.
 
+## Modo Radio en Vivo
+
+El pie persistente puede alojar una estación de radio en vivo mediante
+el elemento `<podcast-live>`, normalmente colocado como hermano de
+`<podcast-footer>` en `baseof.html`. Cuando la transmisión está
+activa, el pie muestra una insignia roja LIVE, los metadatos de la
+pista actual y un tiempo de inicio a fin en formato 24H que se
+actualiza según avanza la pista.
+
+Para activarlo:
+
+```
+<podcast-live
+  data-azuracast-api-url="https://radio.example.org/api/live/nowplaying/station-slug"
+  station-name="Mi Radio">
+</podcast-live>
+```
+
+Mientras se reproduce cualquier fuente que no sea en vivo, aparece un
+botón "Escuchar en vivo" en el pie. Al hacer clic, se cambia a la
+transmisión en vivo y se detiene la otra fuente. La insignia tiene una
+animación de pulso por defecto; los usuarios con
+`prefers-reduced-motion: reduce` ven un punto estático en su lugar.
+
+Los metadatos se actualizan cada 15 segundos durante la reproducción y
+cada 60 segundos en caso contrario, con retroceso exponencial ante
+errores. La configuración sigue las mismas reglas
+`data-turbolinks-permanent` / `hx-preserve` que el resto del pie, por
+lo que persiste entre navegaciones con htmx / Turbo / Turbolinks.
+
 ## Ejemplo: Sección de Pie en baseof.html Completa
 
 ```
diff --git a/exampleSite/content/posts/live-mode.md b/exampleSite/content/posts/live-mode.md
new file mode 100644
index 0000000..a4d3b81
--- /dev/null
+++ b/exampleSite/content/posts/live-mode.md
@@ -0,0 +1,26 @@
+---
+title: "Live Radio Demo (Quantum Radio)"
+date: 2026-06-28T10:00:00+03:00
+draft: false
+---
+
+{{< podcast-player
+  src=""
+  source="azuracast"
+  data-azuracast-api-url="https://radio.erb.pw/api/live/nowplaying/subspace"
+  live-mode="true"
+>}}
+
+{{< podcast-live
+  data-azuracast-api-url="https://radio.erb.pw/api/live/nowplaying/subspace"
+  station-name="Quantum Radio"
+>}}
+
+This page demonstrates the live radio mode. The footer shows a "Listen
+Live" button and displays the current track from Quantum Radio on
+radio.erb.pw (station: subspace). The metadata refreshes automatically.
+
+<div class="nav-buttons">
+  <a href="{{< relref "posts/test-episode.md" >}}" class="nav-button">Back: Test Episode</a>
+  <a href="{{< relref "/" >}}" class="nav-button nav-button-primary">Home</a>
+</div>
diff --git a/exampleSite/i18n/es.toml b/exampleSite/i18n/es.toml
index 79b00c7..dd9e57a 100644
--- a/exampleSite/i18n/es.toml
+++ b/exampleSite/i18n/es.toml
@@ -62,6 +62,18 @@ other = "Episodio desconocido"
 [player_source_link]
 other = "Ver episodio"
 
+[player_live_badge]
+other = "EN VIVO"
+
+[player_listen_live]
+other = "Escuchar en vivo"
+
+[player_live_now_playing]
+other = "Reproduciendo ahora"
+
+[player_live_offline]
+other = "Sin conexión"
+
 # ── Carousel ──
 [carousel_label]
 other = "Carrusel de imágenes"
diff --git a/exampleSite/layouts/_default/baseof.html b/exampleSite/layouts/_default/baseof.html
index 36d570d..5360f0c 100644
--- a/exampleSite/layouts/_default/baseof.html
+++ b/exampleSite/layouts/_default/baseof.html
@@ -186,6 +186,7 @@
     "player_episode" "player_close" "player_region"
     "player_error" "player_no_source" "player_unknown_episode"
     "player_source_link"
+    "player_live_badge" "player_listen_live" "player_live_now_playing" "player_live_offline"
     "code_copy_title" "code_copy_label" "code_copied" "code_copied_label"
   -}}
   <script nonce="{{ $cspNonce }}">
diff --git a/exampleSite/layouts/shortcodes/podcast-live.html b/exampleSite/layouts/shortcodes/podcast-live.html
new file mode 100644
index 0000000..c5880c0
--- /dev/null
+++ b/exampleSite/layouts/shortcodes/podcast-live.html
@@ -0,0 +1,11 @@
+{{- $apiUrl := .Get "data-azuracast-api-url" -}}
+{{- $stationName := .Get "station-name" -}}
+{{- if and $apiUrl (not (hasPrefix $apiUrl "https://")) -}}
+  {{- errorf "podcast-live: data-azuracast-api-url must use HTTPS, got %q" $apiUrl -}}
+{{- end -}}
+<podcast-live
+  {{- with $apiUrl }} data-azuracast-api-url="{{ . }}"{{ end }}
+  {{- with $stationName }} station-name="{{ . }}"{{ end }}
+  data-turbolinks-permanent
+  data-turbo-permanent
+  hx-preserve></podcast-live>
diff --git a/i18n/en.toml b/i18n/en.toml
index f54855a..d34c5b9 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -62,6 +62,18 @@ other = "Unknown Episode"
 [player_source_link]
 other = "View episode"
 
+[player_live_badge]
+other = "LIVE"
+
+[player_listen_live]
+other = "Listen Live"
+
+[player_live_now_playing]
+other = "Now Playing"
+
+[player_live_offline]
+other = "Offline"
+
 # ── Carousel ──
 [carousel_label]
 other = "Image carousel"
diff --git a/layouts/_shortcodes/podcast-player.html b/layouts/_shortcodes/podcast-player.html
index 8f6e96f..b2b8c3a 100644
--- a/layouts/_shortcodes/podcast-player.html
+++ b/layouts/_shortcodes/podcast-player.html
@@ -40,7 +40,13 @@
 
 {{- /* ---- 1. Validate required params ---- */ -}}
 {{- $src := .Get "src" -}}
-{{- if not $src -}}
+{{- $sourceHint := .Get "source" -}}
+{{- $liveModeHint := eq (.Get "live-mode") "true" -}}
+{{- /* Live-radio mode resolves the audio URL from the AzuraCast nowplaying
+   API at runtime, so an empty src is permitted when source=azuracast or
+   live-mode is set. The AzuraCast adapter will fail loudly if the
+   API URL is also missing or invalid. */ -}}
+{{- if and (not $src) (not (or (eq $sourceHint "azuracast") $liveModeHint)) -}}
   {{- errorf "podcast-player: required 'src' parameter is missing. See %s" .Position -}}
 {{- end -}}
 {{- /* Validate audio URL scheme */ -}}
@@ -63,6 +69,12 @@
 {{- $preload     := .Get "preload"     | default ($siteCfg.preload     | default "metadata") -}}
 {{- $chapters    := .Get "chapters"    | default "" -}}
 {{- $url         := .Get "url"         | default "" -}}
+{{- $azuracastApiUrl := .Get "data-azuracast-api-url" | default "" -}}
+{{- $liveMode    := .Get "live-mode"   | default ($siteCfg.liveMode   | default "false") -}}
+{{- /* Validate the nowplaying API URL: must be https only (AzuraCast requirement). */ -}}
+{{- if and $azuracastApiUrl (not (hasPrefix $azuracastApiUrl "https://")) -}}
+  {{- errorf "podcast-player: data-azuracast-api-url must use HTTPS, got %q" $azuracastApiUrl -}}
+{{- end -}}
 {{- /* Validate url scheme: allow http(s), relative, fragment, dot-relative, or the literal "none" */ -}}
 {{- if and $url (ne $url "none") (not (or (hasPrefix $url "http://") (hasPrefix $url "https://") (hasPrefix $url "/") (hasPrefix $url "#") (hasPrefix $url "."))) -}}
   {{- errorf "podcast-player: url must be HTTP(S), relative, fragment, dot-relative, or 'none', got %q" $url -}}
@@ -120,12 +132,14 @@
   {{- with $poster }} poster="{{ . }}"{{ end }}
   {{- with $chapters }} chapters="{{ . }}"{{ end }}
   {{- with $url }} url="{{ . }}"{{ end }}
+  {{- with $azuracastApiUrl }} data-azuracast-api-url="{{ . }}"{{ end }}
   type="{{ $audioType }}"
   data-source="{{ $source }}"
   data-preload="{{ $preload }}"
   {{- if $persistent }} persistent{{ end }}
   {{- if eq $autoplay "true" }} autoplay{{ end }}
-  {{- if eq $showRate "true" }} data-rate-control{{ end }}>
+  {{- if eq $showRate "true" }} data-rate-control{{ end }}
+  {{- if eq $liveMode "true" }} live-mode{{ end }}>
   {{- if $description -}}
     <span slot="description">{{ $description | .Page.RenderString }}</span>
   {{- end -}}
diff --git a/tests/hugo/shortcode_test.go b/tests/hugo/shortcode_test.go
index 11ab866..ce8eb42 100644
--- a/tests/hugo/shortcode_test.go
+++ b/tests/hugo/shortcode_test.go
@@ -207,3 +207,44 @@ func TestPodcastPlayerShortcode_BadUrlScheme(t *testing.T) {
 		t.Errorf("expected error to mention the bad scheme, got:\n%s", combined)
 	}
 }
+
+func TestPodcastPlayerShortcode_WithLiveMode(t *testing.T) {
+	outputDir := buildHugoSite(t, "with-live-mode")
+	content := readOutputFile(t, outputDir, "posts/test-episode/index.html")
+	if !strings.Contains(content, `data-azuracast-api-url="https://example.com/api/live/nowplaying/test"`) {
+		t.Errorf("expected data-azuracast-api-url attribute in output, got:\n%s", content)
+	}
+	if !strings.Contains(content, " live-mode") {
+		t.Errorf("expected live-mode boolean attribute in output, got:\n%s", content)
+	}
+	if strings.Contains(content, `live-mode="`) {
+		t.Errorf("live-mode should be a boolean attribute (no value), got:\n%s", content)
+	}
+}
+
+func TestPodcastPlayerShortcode_LiveModeOmitted(t *testing.T) {
+	// Reuses the with-url testdata which has no live-mode or api-url params.
+	outputDir := buildHugoSite(t, "with-url")
+	content := readOutputFile(t, outputDir, "posts/test-episode/index.html")
+	if strings.Contains(content, "data-azuracast-api-url") {
+		t.Errorf("expected no data-azuracast-api-url when omitted, got:\n%s", content)
+	}
+	if strings.Contains(content, " live-mode") {
+		t.Errorf("expected no live-mode when omitted, got:\n%s", content)
+	}
+}
+
+func TestPodcastPlayerShortcode_BadAzuracastApiUrl(t *testing.T) {
+	root := testDir(t)
+	siteDir := filepath.Join(root, "tests", "hugo", "testdata", "bad-azuracast-api-url")
+	cmd := exec.Command("hugo", "--source", siteDir)
+	cmd.Dir = siteDir
+	output, err := cmd.CombinedOutput()
+	if err == nil {
+		t.Fatalf("expected build error for http:// api URL, but build succeeded:\n%s", output)
+	}
+	combined := strings.ToLower(string(output))
+	if !strings.Contains(combined, "https") {
+		t.Errorf("expected error to mention the https scheme, got:\n%s", output)
+	}
+}
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/assets/css/podcast-player.css b/tests/hugo/testdata/bad-azuracast-api-url/assets/css/podcast-player.css
new file mode 100644
index 0000000..d9b397d
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/assets/css/podcast-player.css
@@ -0,0 +1,7 @@
+/* podcast-player — Styles
+   Phase 6 implementation.  Placeholder ensures Hugo Pipes has something
+   to process. */
+
+podcast-player {
+  display: block;
+}
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/assets/css/shortcodes.css b/tests/hugo/testdata/bad-azuracast-api-url/assets/css/shortcodes.css
new file mode 100644
index 0000000..f66461a
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/assets/css/shortcodes.css
@@ -0,0 +1,354 @@
+/* ── Wavecast Utility Shortcodes ──────────────────────────────────────────
+   Dark-mode aware, minimal-JS, accessible. Prefix: wvc-
+   ─────────────────────────────────────────────────────────────────────── */
+
+/* ── Design tokens ── */
+:root {
+  --wvc-note: #0ea5e9;
+  --wvc-note-bg: #f0f9ff;
+  --wvc-tip: #22c55e;
+  --wvc-tip-bg: #f0fdf4;
+  --wvc-warning: #f59e0b;
+  --wvc-warning-bg: #fffbeb;
+  --wvc-danger: #ef4444;
+  --wvc-danger-bg: #fef2f2;
+  --wvc-primary: #4f46e5;
+  --wvc-primary-hover: #4338ca;
+  --wvc-secondary: #6b7280;
+  --wvc-secondary-hover: #4b5563;
+  --wvc-outline-border: #d1d5db;
+  --wvc-outline-hover-bg: #f3f4f6;
+  --wvc-tab-border: #d1d5db;
+  --wvc-tab-active-border: #4f46e5;
+  --wvc-tab-active-text: #4f46e5;
+  --wvc-radius: 0.5rem;
+}
+
+[data-theme="dark"] {
+  --wvc-note-bg: #0c2d48;
+  --wvc-tip-bg: #0a2e1a;
+  --wvc-warning-bg: #2e2200;
+  --wvc-danger-bg: #3b0a0a;
+  --wvc-outline-border: #4b5563;
+  --wvc-outline-hover-bg: #1f2937;
+  --wvc-tab-border: #4b5563;
+  --wvc-tab-active-border: #818cf8;
+  --wvc-tab-active-text: #a5b4fc;
+  --wvc-primary: #6366f1;
+  --wvc-primary-hover: #818cf8;
+  --wvc-secondary: #9ca3af;
+  --wvc-secondary-hover: #d1d5db;
+}
+
+/* ── Admonition ── */
+.wvc-admonition {
+  border-left: 4px solid;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  border-radius: 0 var(--wvc-radius) var(--wvc-radius) 0;
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+.wvc-admonition--note  { border-color: var(--wvc-note);   background: var(--wvc-note-bg);   }
+.wvc-admonition--tip   { border-color: var(--wvc-tip);    background: var(--wvc-tip-bg);    }
+.wvc-admonition--warning { border-color: var(--wvc-warning); background: var(--wvc-warning-bg); }
+.wvc-admonition--danger { border-color: var(--wvc-danger);  background: var(--wvc-danger-bg);  }
+
+.wvc-admonition__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.wvc-admonition__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.wvc-admonition--note  .wvc-admonition__icon { color: var(--wvc-note);   }
+.wvc-admonition--tip   .wvc-admonition__icon { color: var(--wvc-tip);    }
+.wvc-admonition--warning .wvc-admonition__icon { color: var(--wvc-warning); }
+.wvc-admonition--danger .wvc-admonition__icon { color: var(--wvc-danger);  }
+
+.wvc-admonition__title {
+  font-weight: 700;
+  font-size: 0.95rem;
+}
+.wvc-admonition__content > :first-child { margin-top: 0; }
+.wvc-admonition__content > :last-child  { margin-bottom: 0; }
+.wvc-admonition__content p { margin: 0.4rem 0; }
+
+/* ── Button ── */
+.wvc-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1.2rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border-radius: var(--wvc-radius);
+  text-decoration: none;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  line-height: 1.4;
+}
+.wvc-button--primary {
+  background: var(--wvc-primary);
+  color: #fff;
+}
+.wvc-button--primary:hover { background: var(--wvc-primary-hover); color: #fff; }
+
+.wvc-button--secondary {
+  background: var(--wvc-secondary);
+  color: #fff;
+}
+.wvc-button--secondary:hover { background: var(--wvc-secondary-hover); color: #fff; }
+
+.wvc-button--outline {
+  background: transparent;
+  color: var(--wvc-primary);
+  border-color: var(--wvc-outline-border);
+}
+.wvc-button--outline:hover { background: var(--wvc-outline-hover-bg); color: var(--wvc-primary-hover); }
+
+.wvc-button:focus-visible {
+  outline: 2px solid var(--wvc-primary);
+  outline-offset: 2px;
+}
+.wvc-button--primary:focus-visible {
+  outline-color: var(--wvc-primary-hover);
+  box-shadow: 0 0 0 2px rgba(79,70,229,0.35);
+}
+.wvc-button--secondary:focus-visible {
+  outline-color: var(--wvc-secondary-hover);
+}
+
+.wvc-button__icon { font-size: 1.1rem; line-height: 1; }
+
+/* ── Figure ── */
+.wvc-figure {
+  margin: 1.5rem 0;
+  text-align: center;
+}
+.wvc-figure img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+  margin: 0 auto;
+}
+.wvc-figure__caption,
+.wvc-video__caption {
+  margin-top: 0.6rem;
+  font-size: 0.88rem;
+  color: #6b7280;
+  font-style: italic;
+}
+[data-theme="dark"] .wvc-figure__caption,
+[data-theme="dark"] .wvc-video__caption { color: #9ca3af; }
+
+/* ── Video ── */
+.wvc-video {
+  margin: 1.5rem 0;
+  text-align: center;
+}
+.wvc-video video {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+  margin: 0 auto;
+}
+
+/* ── Gallery ── */
+.wvc-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+.wvc-gallery a { display: block; }
+.wvc-gallery img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: var(--wvc-radius);
+  display: block;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.wvc-gallery img:hover {
+  transform: scale(1.03);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* ── Lightbox (CSS-only, triggered by :target) ── */
+.wvc-lightbox {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0,0,0,0.85);
+  align-items: center;
+  justify-content: center;
+}
+.wvc-lightbox:target {
+  display: flex;
+}
+.wvc-lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: var(--wvc-radius);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+}
+.wvc-lightbox__close {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  color: #fff;
+  font-size: 2rem;
+  text-decoration: none;
+  line-height: 1;
+  opacity: 0.8;
+}
+.wvc-lightbox__close:hover { opacity: 1; }
+
+/* ── Carousel ── */
+.wvc-carousel {
+  position: relative;
+  margin: 1.5rem 0;
+  --wvc-carousel-gap: 0.75rem;
+}
+.wvc-carousel__slides {
+  display: flex;
+  gap: var(--wvc-carousel-gap);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  border-radius: var(--wvc-radius);
+}
+.wvc-carousel__slides > * {
+  scroll-snap-align: start;
+  flex: 0 0 calc(100% - var(--wvc-carousel-gap));
+  min-width: 0;
+}
+.wvc-carousel__slides img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+}
+.wvc-carousel__prev,
+.wvc-carousel__next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: background 0.2s;
+  padding: 0;
+}
+.wvc-carousel__prev:hover,
+.wvc-carousel__next:hover { background: rgba(0,0,0,0.75); }
+.wvc-carousel__prev { left: 0.5rem; }
+.wvc-carousel__next { right: 0.5rem; }
+
+/* ── Tabs ── */
+.wvc-tabs {
+  margin: 1.5rem 0;
+  position: relative;  /* containing block for clipped radio inputs */
+}
+.wvc-tabs__labels {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 2px solid var(--wvc-tab-border);
+  margin-bottom: 1rem;
+  gap: 0;
+}
+.wvc-tabs__label {
+  display: inline-block;
+  padding: 0.55rem 1.15rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: inherit;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: color 0.15s, border-color 0.15s;
+  user-select: none;
+}
+.wvc-tabs__label:hover { color: var(--wvc-tab-active-text); }
+
+/* Visually-hidden radio inputs — still focusable for keyboard navigation */
+.wvc-tabs input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus indicator: highlight corresponding label when radio receives keyboard focus */
+.wvc-tabs input[type="radio"]:nth-of-type(1):focus-visible ~ .wvc-tabs__labels label:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):focus-visible ~ .wvc-tabs__labels label:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):focus-visible ~ .wvc-tabs__labels label:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):focus-visible ~ .wvc-tabs__labels label:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):focus-visible ~ .wvc-tabs__labels label:nth-of-type(5) {
+  outline: 2px solid var(--wvc-tab-active-border);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Show panel whose radio is checked (overrides [hidden] attribute) */
+.wvc-tabs input[type="radio"]:nth-of-type(1):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(5) {
+  display: block;
+}
+
+/* Active label style */
+.wvc-tabs input[type="radio"]:nth-of-type(1):checked ~ .wvc-tabs__labels label:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):checked ~ .wvc-tabs__labels label:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):checked ~ .wvc-tabs__labels label:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):checked ~ .wvc-tabs__labels label:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):checked ~ .wvc-tabs__labels label:nth-of-type(5) {
+  border-bottom-color: var(--wvc-tab-active-border);
+  color: var(--wvc-tab-active-text);
+}
+
+.wvc-tabs__panel {
+  display: none;
+  padding: 0.5rem 0;
+}
+.wvc-tabs__panel > :first-child { margin-top: 0; }
+.wvc-tabs__panel > :last-child  { margin-bottom: 0; }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .wvc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+  .wvc-gallery img { height: 140px; }
+  .wvc-carousel__prev,
+  .wvc-carousel__next { width: 2rem; height: 2rem; font-size: 1.2rem; }
+  .wvc-carousel__prev { left: 0.25rem; }
+  .wvc-carousel__next { right: 0.25rem; }
+  .wvc-tabs__label { padding: 0.5rem 0.75rem; font-size: 0.82rem; }
+}
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/assets/js/podcast-player.js b/tests/hugo/testdata/bad-azuracast-api-url/assets/js/podcast-player.js
new file mode 100644
index 0000000..edc1b09
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/assets/js/podcast-player.js
@@ -0,0 +1,4 @@
+// podcast-player — Web Component
+// Phase 3 implementation.  For now this is a no-op placeholder so that
+// the Hugo Pipes pipeline has something to bundle.
+console.warn("podcast-player: Web Component not yet implemented (Phase 3)");
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/content/posts/test-episode.md b/tests/hugo/testdata/bad-azuracast-api-url/content/posts/test-episode.md
new file mode 100644
index 0000000..a2e298f
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/content/posts/test-episode.md
@@ -0,0 +1,9 @@
+---
+title: "Test Episode"
+---
+
+{{< podcast-player
+  src="https://example.com/stream.mp3"
+  source="azuracast"
+  data-azuracast-api-url="http://insecure.example.com/api/nowplaying/test"
+>}}
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/hugo.toml b/tests/hugo/testdata/bad-azuracast-api-url/hugo.toml
new file mode 100644
index 0000000..bf2401c
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/hugo.toml
@@ -0,0 +1 @@
+baseURL = "https://example.org/"
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/baseof.html b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/baseof.html
new file mode 100644
index 0000000..2c10002
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/baseof.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html><html><head><title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title></head>
+<body><main>{{ block "main" . }}{{ end }}</main></body>
+</html>
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/single.html b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/single.html
new file mode 100644
index 0000000..b8bcfa7
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_default/single.html
@@ -0,0 +1 @@
+{{ define "main" }}{{ .Content }}{{ end }}
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/layouts/_shortcodes/podcast-player.html b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_shortcodes/podcast-player.html
new file mode 100644
index 0000000..b2b8c3a
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/layouts/_shortcodes/podcast-player.html
@@ -0,0 +1,146 @@
+{{- /*
+  podcast-player — Hugo shortcode for a persistent podcast/radio audio player.
+
+  Usage:
+    {{< podcast-player
+      src="https://example.com/audio.mp3"
+      title="Episode 42"
+      poster="https://example.com/cover.jpg"
+      description="Optional description with **Markdown**."
+      chapters="00:00:00-Intro,00:05:30-News"
+      url="https://example.com/episode-42"
+      persistent="true"
+    >}}
+
+  Named parameters + site config defaults.
+    Per-shortcode params take precedence over site config
+    ([params.podcastPlayer] in hugo.toml), which in turn
+    take precedence over the built-in defaults.
+
+    src         (required) Audio URL or local file path.
+    title       (optional) Episode title — rendered as attribute.
+    poster      (optional) Cover image URL.
+    description (optional) Markdown description (rendered as <span slot="description">).
+    type        (optional) MIME type.  Auto-detected for local resources.
+                           Default "audio/mpeg".
+    source      (optional) Source adapter hint: "local", "azuracast", "ivoox".
+                           Default "local".
+    persistent  (optional) Disable navigation persistence with "false".
+                           Default "true".
+    preload     (optional) <audio> preload hint.  Default "metadata".
+    chapters    (optional) Comma-separated "timestamp-label" pairs, e.g.
+                           "00:00:00-Intro,00:05:30-News".
+    url         (optional) Link target for the footer source label. A URL
+                           (http/https or site-relative) makes the label
+                           clickable. The literal string "none" hides the
+                           link. Omit to auto-derive from the audio src.
+    autoplay    (optional) Auto-play on load.  Default "false".
+    rate        (optional) Show playback rate control.  Default "true".
+*/ -}}
+
+{{- /* ---- 1. Validate required params ---- */ -}}
+{{- $src := .Get "src" -}}
+{{- $sourceHint := .Get "source" -}}
+{{- $liveModeHint := eq (.Get "live-mode") "true" -}}
+{{- /* Live-radio mode resolves the audio URL from the AzuraCast nowplaying
+   API at runtime, so an empty src is permitted when source=azuracast or
+   live-mode is set. The AzuraCast adapter will fail loudly if the
+   API URL is also missing or invalid. */ -}}
+{{- if and (not $src) (not (or (eq $sourceHint "azuracast") $liveModeHint)) -}}
+  {{- errorf "podcast-player: required 'src' parameter is missing. See %s" .Position -}}
+{{- end -}}
+{{- /* Validate audio URL scheme */ -}}
+{{- if $src }}
+  {{- $scheme := urls.Parse $src }}
+  {{- if and $scheme.Scheme (not (or (eq $scheme.Scheme "http") (eq $scheme.Scheme "https"))) }}
+    {{- errorf "podcast-player: audio src must use http or https scheme, got %q" $scheme.Scheme }}
+  {{- end }}
+{{- end -}}
+
+{{- /* ---- 2. Site config defaults ---- */ -}}
+{{- $siteCfg := site.Params.podcastPlayer | default dict -}}
+
+{{- /* ---- 3. Named params: explicit > site config > hardcoded default ---- */ -}}
+{{- $title       := .Get "title"       | default "" -}}
+{{- $poster      := .Get "poster"      | default "" -}}
+{{- $description := .Get "description" | default "" -}}
+{{- $type        := .Get "type"        | default ($siteCfg.type        | default "audio/mpeg") -}}
+{{- $source      := .Get "source"      | default ($siteCfg.source      | default "local") -}}
+{{- $preload     := .Get "preload"     | default ($siteCfg.preload     | default "metadata") -}}
+{{- $chapters    := .Get "chapters"    | default "" -}}
+{{- $url         := .Get "url"         | default "" -}}
+{{- $azuracastApiUrl := .Get "data-azuracast-api-url" | default "" -}}
+{{- $liveMode    := .Get "live-mode"   | default ($siteCfg.liveMode   | default "false") -}}
+{{- /* Validate the nowplaying API URL: must be https only (AzuraCast requirement). */ -}}
+{{- if and $azuracastApiUrl (not (hasPrefix $azuracastApiUrl "https://")) -}}
+  {{- errorf "podcast-player: data-azuracast-api-url must use HTTPS, got %q" $azuracastApiUrl -}}
+{{- end -}}
+{{- /* Validate url scheme: allow http(s), relative, fragment, dot-relative, or the literal "none" */ -}}
+{{- if and $url (ne $url "none") (not (or (hasPrefix $url "http://") (hasPrefix $url "https://") (hasPrefix $url "/") (hasPrefix $url "#") (hasPrefix $url "."))) -}}
+  {{- errorf "podcast-player: url must be HTTP(S), relative, fragment, dot-relative, or 'none', got %q" $url -}}
+{{- end -}}
+{{- $autoplay    := .Get "autoplay"    | default ($siteCfg.autoplay    | default "false") -}}
+{{- $showRate    := .Get "rate"        | default ($siteCfg.rate        | default "true") -}}
+
+{{- /* persistent is special: Boolean in site config, string in shortcode param */ -}}
+{{- $persistentDefault := "true" -}}
+{{- if isset $siteCfg "persistent" -}}
+  {{- $persistentDefault = cond $siteCfg.persistent "true" "false" -}}
+{{- end -}}
+{{- $persistent := ne (.Get "persistent" | default $persistentDefault) "false" -}}
+
+{{- /* ---- 4. Resolve local vs remote source ---- */ -}}
+{{- $audioURL  := $src -}}
+{{- $audioType := $type -}}
+
+{{- /* Try page-scoped resource first, then global */ -}}
+{{- $localAudio := .Page.Resources.GetMatch $src -}}
+{{- if not $localAudio -}}
+  {{- $localAudio = resources.GetMatch $src -}}
+{{- end -}}
+
+{{- if $localAudio -}}
+  {{- $audioURL  = $localAudio.RelPermalink -}}
+  {{- $audioType = $localAudio.MediaType.Type -}}
+{{- end -}}
+
+{{- /* ---- 5. Assets — loaded exactly once per page ---- */ -}}
+{{- if not (.Page.Store.Get "podcastPlayerAssetsLoaded") -}}
+  {{- .Page.Store.Set "podcastPlayerAssetsLoaded" true -}}
+
+  {{- /* JS — link directly if asset exists, else inline fallback */ -}}
+  {{- $js := resources.Get "js/podcast-player.js" | fingerprint -}}
+  {{- if $js -}}
+    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" type="module" defer></script>
+  {{- else -}}
+    <script type="module">
+      console.warn("podcast-player: JS asset not found — check your Hugo module setup.");
+    </script>
+  {{- end -}}
+
+  {{- /* CSS — link directly if asset exists */ -}}
+  {{- $css := resources.Get "css/podcast-player.css" | fingerprint -}}
+  {{- if $css -}}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+  {{- end -}}
+{{- end -}}
+
+{{- /* ---- 6. Render the custom element ---- */ -}}
+<podcast-player
+  src="{{ $audioURL }}"
+  title="{{ $title }}"
+  {{- with $poster }} poster="{{ . }}"{{ end }}
+  {{- with $chapters }} chapters="{{ . }}"{{ end }}
+  {{- with $url }} url="{{ . }}"{{ end }}
+  {{- with $azuracastApiUrl }} data-azuracast-api-url="{{ . }}"{{ end }}
+  type="{{ $audioType }}"
+  data-source="{{ $source }}"
+  data-preload="{{ $preload }}"
+  {{- if $persistent }} persistent{{ end }}
+  {{- if eq $autoplay "true" }} autoplay{{ end }}
+  {{- if eq $showRate "true" }} data-rate-control{{ end }}
+  {{- if eq $liveMode "true" }} live-mode{{ end }}>
+  {{- if $description -}}
+    <span slot="description">{{ $description | .Page.RenderString }}</span>
+  {{- end -}}
+</podcast-player>
diff --git a/tests/hugo/testdata/bad-azuracast-api-url/layouts/index.html b/tests/hugo/testdata/bad-azuracast-api-url/layouts/index.html
new file mode 100644
index 0000000..9812433
--- /dev/null
+++ b/tests/hugo/testdata/bad-azuracast-api-url/layouts/index.html
@@ -0,0 +1 @@
+{{ define "main" }}<h1>Home</h1>{{ end }}
diff --git a/tests/hugo/testdata/with-live-mode/assets/css/podcast-player.css b/tests/hugo/testdata/with-live-mode/assets/css/podcast-player.css
new file mode 100644
index 0000000..d9b397d
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/assets/css/podcast-player.css
@@ -0,0 +1,7 @@
+/* podcast-player — Styles
+   Phase 6 implementation.  Placeholder ensures Hugo Pipes has something
+   to process. */
+
+podcast-player {
+  display: block;
+}
diff --git a/tests/hugo/testdata/with-live-mode/assets/css/shortcodes.css b/tests/hugo/testdata/with-live-mode/assets/css/shortcodes.css
new file mode 100644
index 0000000..f66461a
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/assets/css/shortcodes.css
@@ -0,0 +1,354 @@
+/* ── Wavecast Utility Shortcodes ──────────────────────────────────────────
+   Dark-mode aware, minimal-JS, accessible. Prefix: wvc-
+   ─────────────────────────────────────────────────────────────────────── */
+
+/* ── Design tokens ── */
+:root {
+  --wvc-note: #0ea5e9;
+  --wvc-note-bg: #f0f9ff;
+  --wvc-tip: #22c55e;
+  --wvc-tip-bg: #f0fdf4;
+  --wvc-warning: #f59e0b;
+  --wvc-warning-bg: #fffbeb;
+  --wvc-danger: #ef4444;
+  --wvc-danger-bg: #fef2f2;
+  --wvc-primary: #4f46e5;
+  --wvc-primary-hover: #4338ca;
+  --wvc-secondary: #6b7280;
+  --wvc-secondary-hover: #4b5563;
+  --wvc-outline-border: #d1d5db;
+  --wvc-outline-hover-bg: #f3f4f6;
+  --wvc-tab-border: #d1d5db;
+  --wvc-tab-active-border: #4f46e5;
+  --wvc-tab-active-text: #4f46e5;
+  --wvc-radius: 0.5rem;
+}
+
+[data-theme="dark"] {
+  --wvc-note-bg: #0c2d48;
+  --wvc-tip-bg: #0a2e1a;
+  --wvc-warning-bg: #2e2200;
+  --wvc-danger-bg: #3b0a0a;
+  --wvc-outline-border: #4b5563;
+  --wvc-outline-hover-bg: #1f2937;
+  --wvc-tab-border: #4b5563;
+  --wvc-tab-active-border: #818cf8;
+  --wvc-tab-active-text: #a5b4fc;
+  --wvc-primary: #6366f1;
+  --wvc-primary-hover: #818cf8;
+  --wvc-secondary: #9ca3af;
+  --wvc-secondary-hover: #d1d5db;
+}
+
+/* ── Admonition ── */
+.wvc-admonition {
+  border-left: 4px solid;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  border-radius: 0 var(--wvc-radius) var(--wvc-radius) 0;
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+.wvc-admonition--note  { border-color: var(--wvc-note);   background: var(--wvc-note-bg);   }
+.wvc-admonition--tip   { border-color: var(--wvc-tip);    background: var(--wvc-tip-bg);    }
+.wvc-admonition--warning { border-color: var(--wvc-warning); background: var(--wvc-warning-bg); }
+.wvc-admonition--danger { border-color: var(--wvc-danger);  background: var(--wvc-danger-bg);  }
+
+.wvc-admonition__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.wvc-admonition__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.wvc-admonition--note  .wvc-admonition__icon { color: var(--wvc-note);   }
+.wvc-admonition--tip   .wvc-admonition__icon { color: var(--wvc-tip);    }
+.wvc-admonition--warning .wvc-admonition__icon { color: var(--wvc-warning); }
+.wvc-admonition--danger .wvc-admonition__icon { color: var(--wvc-danger);  }
+
+.wvc-admonition__title {
+  font-weight: 700;
+  font-size: 0.95rem;
+}
+.wvc-admonition__content > :first-child { margin-top: 0; }
+.wvc-admonition__content > :last-child  { margin-bottom: 0; }
+.wvc-admonition__content p { margin: 0.4rem 0; }
+
+/* ── Button ── */
+.wvc-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.55rem 1.2rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border-radius: var(--wvc-radius);
+  text-decoration: none;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  line-height: 1.4;
+}
+.wvc-button--primary {
+  background: var(--wvc-primary);
+  color: #fff;
+}
+.wvc-button--primary:hover { background: var(--wvc-primary-hover); color: #fff; }
+
+.wvc-button--secondary {
+  background: var(--wvc-secondary);
+  color: #fff;
+}
+.wvc-button--secondary:hover { background: var(--wvc-secondary-hover); color: #fff; }
+
+.wvc-button--outline {
+  background: transparent;
+  color: var(--wvc-primary);
+  border-color: var(--wvc-outline-border);
+}
+.wvc-button--outline:hover { background: var(--wvc-outline-hover-bg); color: var(--wvc-primary-hover); }
+
+.wvc-button:focus-visible {
+  outline: 2px solid var(--wvc-primary);
+  outline-offset: 2px;
+}
+.wvc-button--primary:focus-visible {
+  outline-color: var(--wvc-primary-hover);
+  box-shadow: 0 0 0 2px rgba(79,70,229,0.35);
+}
+.wvc-button--secondary:focus-visible {
+  outline-color: var(--wvc-secondary-hover);
+}
+
+.wvc-button__icon { font-size: 1.1rem; line-height: 1; }
+
+/* ── Figure ── */
+.wvc-figure {
+  margin: 1.5rem 0;
+  text-align: center;
+}
+.wvc-figure img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+  margin: 0 auto;
+}
+.wvc-figure__caption,
+.wvc-video__caption {
+  margin-top: 0.6rem;
+  font-size: 0.88rem;
+  color: #6b7280;
+  font-style: italic;
+}
+[data-theme="dark"] .wvc-figure__caption,
+[data-theme="dark"] .wvc-video__caption { color: #9ca3af; }
+
+/* ── Video ── */
+.wvc-video {
+  margin: 1.5rem 0;
+  text-align: center;
+}
+.wvc-video video {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+  margin: 0 auto;
+}
+
+/* ── Gallery ── */
+.wvc-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+.wvc-gallery a { display: block; }
+.wvc-gallery img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: var(--wvc-radius);
+  display: block;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.wvc-gallery img:hover {
+  transform: scale(1.03);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* ── Lightbox (CSS-only, triggered by :target) ── */
+.wvc-lightbox {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0,0,0,0.85);
+  align-items: center;
+  justify-content: center;
+}
+.wvc-lightbox:target {
+  display: flex;
+}
+.wvc-lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: var(--wvc-radius);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+}
+.wvc-lightbox__close {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  color: #fff;
+  font-size: 2rem;
+  text-decoration: none;
+  line-height: 1;
+  opacity: 0.8;
+}
+.wvc-lightbox__close:hover { opacity: 1; }
+
+/* ── Carousel ── */
+.wvc-carousel {
+  position: relative;
+  margin: 1.5rem 0;
+  --wvc-carousel-gap: 0.75rem;
+}
+.wvc-carousel__slides {
+  display: flex;
+  gap: var(--wvc-carousel-gap);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  border-radius: var(--wvc-radius);
+}
+.wvc-carousel__slides > * {
+  scroll-snap-align: start;
+  flex: 0 0 calc(100% - var(--wvc-carousel-gap));
+  min-width: 0;
+}
+.wvc-carousel__slides img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--wvc-radius);
+  display: block;
+}
+.wvc-carousel__prev,
+.wvc-carousel__next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: background 0.2s;
+  padding: 0;
+}
+.wvc-carousel__prev:hover,
+.wvc-carousel__next:hover { background: rgba(0,0,0,0.75); }
+.wvc-carousel__prev { left: 0.5rem; }
+.wvc-carousel__next { right: 0.5rem; }
+
+/* ── Tabs ── */
+.wvc-tabs {
+  margin: 1.5rem 0;
+  position: relative;  /* containing block for clipped radio inputs */
+}
+.wvc-tabs__labels {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 2px solid var(--wvc-tab-border);
+  margin-bottom: 1rem;
+  gap: 0;
+}
+.wvc-tabs__label {
+  display: inline-block;
+  padding: 0.55rem 1.15rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: inherit;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: color 0.15s, border-color 0.15s;
+  user-select: none;
+}
+.wvc-tabs__label:hover { color: var(--wvc-tab-active-text); }
+
+/* Visually-hidden radio inputs — still focusable for keyboard navigation */
+.wvc-tabs input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus indicator: highlight corresponding label when radio receives keyboard focus */
+.wvc-tabs input[type="radio"]:nth-of-type(1):focus-visible ~ .wvc-tabs__labels label:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):focus-visible ~ .wvc-tabs__labels label:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):focus-visible ~ .wvc-tabs__labels label:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):focus-visible ~ .wvc-tabs__labels label:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):focus-visible ~ .wvc-tabs__labels label:nth-of-type(5) {
+  outline: 2px solid var(--wvc-tab-active-border);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Show panel whose radio is checked (overrides [hidden] attribute) */
+.wvc-tabs input[type="radio"]:nth-of-type(1):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):checked ~ .wvc-tabs__panels .wvc-tabs__panel:nth-of-type(5) {
+  display: block;
+}
+
+/* Active label style */
+.wvc-tabs input[type="radio"]:nth-of-type(1):checked ~ .wvc-tabs__labels label:nth-of-type(1),
+.wvc-tabs input[type="radio"]:nth-of-type(2):checked ~ .wvc-tabs__labels label:nth-of-type(2),
+.wvc-tabs input[type="radio"]:nth-of-type(3):checked ~ .wvc-tabs__labels label:nth-of-type(3),
+.wvc-tabs input[type="radio"]:nth-of-type(4):checked ~ .wvc-tabs__labels label:nth-of-type(4),
+.wvc-tabs input[type="radio"]:nth-of-type(5):checked ~ .wvc-tabs__labels label:nth-of-type(5) {
+  border-bottom-color: var(--wvc-tab-active-border);
+  color: var(--wvc-tab-active-text);
+}
+
+.wvc-tabs__panel {
+  display: none;
+  padding: 0.5rem 0;
+}
+.wvc-tabs__panel > :first-child { margin-top: 0; }
+.wvc-tabs__panel > :last-child  { margin-bottom: 0; }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .wvc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+  .wvc-gallery img { height: 140px; }
+  .wvc-carousel__prev,
+  .wvc-carousel__next { width: 2rem; height: 2rem; font-size: 1.2rem; }
+  .wvc-carousel__prev { left: 0.25rem; }
+  .wvc-carousel__next { right: 0.25rem; }
+  .wvc-tabs__label { padding: 0.5rem 0.75rem; font-size: 0.82rem; }
+}
diff --git a/tests/hugo/testdata/with-live-mode/assets/js/podcast-player.js b/tests/hugo/testdata/with-live-mode/assets/js/podcast-player.js
new file mode 100644
index 0000000..edc1b09
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/assets/js/podcast-player.js
@@ -0,0 +1,4 @@
+// podcast-player — Web Component
+// Phase 3 implementation.  For now this is a no-op placeholder so that
+// the Hugo Pipes pipeline has something to bundle.
+console.warn("podcast-player: Web Component not yet implemented (Phase 3)");
diff --git a/tests/hugo/testdata/with-live-mode/content/posts/test-episode.md b/tests/hugo/testdata/with-live-mode/content/posts/test-episode.md
new file mode 100644
index 0000000..56bacfd
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/content/posts/test-episode.md
@@ -0,0 +1,11 @@
+---
+title: "Test Episode"
+---
+
+{{< podcast-player
+  src="https://example.com/stream.mp3"
+  title="Live Demo"
+  source="azuracast"
+  data-azuracast-api-url="https://example.com/api/live/nowplaying/test"
+  live-mode="true"
+>}}
diff --git a/tests/hugo/testdata/with-live-mode/hugo.toml b/tests/hugo/testdata/with-live-mode/hugo.toml
new file mode 100644
index 0000000..bf2401c
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/hugo.toml
@@ -0,0 +1 @@
+baseURL = "https://example.org/"
diff --git a/tests/hugo/testdata/with-live-mode/layouts/_default/baseof.html b/tests/hugo/testdata/with-live-mode/layouts/_default/baseof.html
new file mode 100644
index 0000000..2c10002
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/layouts/_default/baseof.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html><html><head><title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title></head>
+<body><main>{{ block "main" . }}{{ end }}</main></body>
+</html>
diff --git a/tests/hugo/testdata/with-live-mode/layouts/_default/single.html b/tests/hugo/testdata/with-live-mode/layouts/_default/single.html
new file mode 100644
index 0000000..b8bcfa7
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/layouts/_default/single.html
@@ -0,0 +1 @@
+{{ define "main" }}{{ .Content }}{{ end }}
diff --git a/tests/hugo/testdata/with-live-mode/layouts/_shortcodes/podcast-player.html b/tests/hugo/testdata/with-live-mode/layouts/_shortcodes/podcast-player.html
new file mode 100644
index 0000000..b2b8c3a
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/layouts/_shortcodes/podcast-player.html
@@ -0,0 +1,146 @@
+{{- /*
+  podcast-player — Hugo shortcode for a persistent podcast/radio audio player.
+
+  Usage:
+    {{< podcast-player
+      src="https://example.com/audio.mp3"
+      title="Episode 42"
+      poster="https://example.com/cover.jpg"
+      description="Optional description with **Markdown**."
+      chapters="00:00:00-Intro,00:05:30-News"
+      url="https://example.com/episode-42"
+      persistent="true"
+    >}}
+
+  Named parameters + site config defaults.
+    Per-shortcode params take precedence over site config
+    ([params.podcastPlayer] in hugo.toml), which in turn
+    take precedence over the built-in defaults.
+
+    src         (required) Audio URL or local file path.
+    title       (optional) Episode title — rendered as attribute.
+    poster      (optional) Cover image URL.
+    description (optional) Markdown description (rendered as <span slot="description">).
+    type        (optional) MIME type.  Auto-detected for local resources.
+                           Default "audio/mpeg".
+    source      (optional) Source adapter hint: "local", "azuracast", "ivoox".
+                           Default "local".
+    persistent  (optional) Disable navigation persistence with "false".
+                           Default "true".
+    preload     (optional) <audio> preload hint.  Default "metadata".
+    chapters    (optional) Comma-separated "timestamp-label" pairs, e.g.
+                           "00:00:00-Intro,00:05:30-News".
+    url         (optional) Link target for the footer source label. A URL
+                           (http/https or site-relative) makes the label
+                           clickable. The literal string "none" hides the
+                           link. Omit to auto-derive from the audio src.
+    autoplay    (optional) Auto-play on load.  Default "false".
+    rate        (optional) Show playback rate control.  Default "true".
+*/ -}}
+
+{{- /* ---- 1. Validate required params ---- */ -}}
+{{- $src := .Get "src" -}}
+{{- $sourceHint := .Get "source" -}}
+{{- $liveModeHint := eq (.Get "live-mode") "true" -}}
+{{- /* Live-radio mode resolves the audio URL from the AzuraCast nowplaying
+   API at runtime, so an empty src is permitted when source=azuracast or
+   live-mode is set. The AzuraCast adapter will fail loudly if the
+   API URL is also missing or invalid. */ -}}
+{{- if and (not $src) (not (or (eq $sourceHint "azuracast") $liveModeHint)) -}}
+  {{- errorf "podcast-player: required 'src' parameter is missing. See %s" .Position -}}
+{{- end -}}
+{{- /* Validate audio URL scheme */ -}}
+{{- if $src }}
+  {{- $scheme := urls.Parse $src }}
+  {{- if and $scheme.Scheme (not (or (eq $scheme.Scheme "http") (eq $scheme.Scheme "https"))) }}
+    {{- errorf "podcast-player: audio src must use http or https scheme, got %q" $scheme.Scheme }}
+  {{- end }}
+{{- end -}}
+
+{{- /* ---- 2. Site config defaults ---- */ -}}
+{{- $siteCfg := site.Params.podcastPlayer | default dict -}}
+
+{{- /* ---- 3. Named params: explicit > site config > hardcoded default ---- */ -}}
+{{- $title       := .Get "title"       | default "" -}}
+{{- $poster      := .Get "poster"      | default "" -}}
+{{- $description := .Get "description" | default "" -}}
+{{- $type        := .Get "type"        | default ($siteCfg.type        | default "audio/mpeg") -}}
+{{- $source      := .Get "source"      | default ($siteCfg.source      | default "local") -}}
+{{- $preload     := .Get "preload"     | default ($siteCfg.preload     | default "metadata") -}}
+{{- $chapters    := .Get "chapters"    | default "" -}}
+{{- $url         := .Get "url"         | default "" -}}
+{{- $azuracastApiUrl := .Get "data-azuracast-api-url" | default "" -}}
+{{- $liveMode    := .Get "live-mode"   | default ($siteCfg.liveMode   | default "false") -}}
+{{- /* Validate the nowplaying API URL: must be https only (AzuraCast requirement). */ -}}
+{{- if and $azuracastApiUrl (not (hasPrefix $azuracastApiUrl "https://")) -}}
+  {{- errorf "podcast-player: data-azuracast-api-url must use HTTPS, got %q" $azuracastApiUrl -}}
+{{- end -}}
+{{- /* Validate url scheme: allow http(s), relative, fragment, dot-relative, or the literal "none" */ -}}
+{{- if and $url (ne $url "none") (not (or (hasPrefix $url "http://") (hasPrefix $url "https://") (hasPrefix $url "/") (hasPrefix $url "#") (hasPrefix $url "."))) -}}
+  {{- errorf "podcast-player: url must be HTTP(S), relative, fragment, dot-relative, or 'none', got %q" $url -}}
+{{- end -}}
+{{- $autoplay    := .Get "autoplay"    | default ($siteCfg.autoplay    | default "false") -}}
+{{- $showRate    := .Get "rate"        | default ($siteCfg.rate        | default "true") -}}
+
+{{- /* persistent is special: Boolean in site config, string in shortcode param */ -}}
+{{- $persistentDefault := "true" -}}
+{{- if isset $siteCfg "persistent" -}}
+  {{- $persistentDefault = cond $siteCfg.persistent "true" "false" -}}
+{{- end -}}
+{{- $persistent := ne (.Get "persistent" | default $persistentDefault) "false" -}}
+
+{{- /* ---- 4. Resolve local vs remote source ---- */ -}}
+{{- $audioURL  := $src -}}
+{{- $audioType := $type -}}
+
+{{- /* Try page-scoped resource first, then global */ -}}
+{{- $localAudio := .Page.Resources.GetMatch $src -}}
+{{- if not $localAudio -}}
+  {{- $localAudio = resources.GetMatch $src -}}
+{{- end -}}
+
+{{- if $localAudio -}}
+  {{- $audioURL  = $localAudio.RelPermalink -}}
+  {{- $audioType = $localAudio.MediaType.Type -}}
+{{- end -}}
+
+{{- /* ---- 5. Assets — loaded exactly once per page ---- */ -}}
+{{- if not (.Page.Store.Get "podcastPlayerAssetsLoaded") -}}
+  {{- .Page.Store.Set "podcastPlayerAssetsLoaded" true -}}
+
+  {{- /* JS — link directly if asset exists, else inline fallback */ -}}
+  {{- $js := resources.Get "js/podcast-player.js" | fingerprint -}}
+  {{- if $js -}}
+    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" type="module" defer></script>
+  {{- else -}}
+    <script type="module">
+      console.warn("podcast-player: JS asset not found — check your Hugo module setup.");
+    </script>
+  {{- end -}}
+
+  {{- /* CSS — link directly if asset exists */ -}}
+  {{- $css := resources.Get "css/podcast-player.css" | fingerprint -}}
+  {{- if $css -}}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+  {{- end -}}
+{{- end -}}
+
+{{- /* ---- 6. Render the custom element ---- */ -}}
+<podcast-player
+  src="{{ $audioURL }}"
+  title="{{ $title }}"
+  {{- with $poster }} poster="{{ . }}"{{ end }}
+  {{- with $chapters }} chapters="{{ . }}"{{ end }}
+  {{- with $url }} url="{{ . }}"{{ end }}
+  {{- with $azuracastApiUrl }} data-azuracast-api-url="{{ . }}"{{ end }}
+  type="{{ $audioType }}"
+  data-source="{{ $source }}"
+  data-preload="{{ $preload }}"
+  {{- if $persistent }} persistent{{ end }}
+  {{- if eq $autoplay "true" }} autoplay{{ end }}
+  {{- if eq $showRate "true" }} data-rate-control{{ end }}
+  {{- if eq $liveMode "true" }} live-mode{{ end }}>
+  {{- if $description -}}
+    <span slot="description">{{ $description | .Page.RenderString }}</span>
+  {{- end -}}
+</podcast-player>
diff --git a/tests/hugo/testdata/with-live-mode/layouts/index.html b/tests/hugo/testdata/with-live-mode/layouts/index.html
new file mode 100644
index 0000000..9812433
--- /dev/null
+++ b/tests/hugo/testdata/with-live-mode/layouts/index.html
@@ -0,0 +1 @@
+{{ define "main" }}<h1>Home</h1>{{ end }}
diff --git a/tests/js/web-component.test.js b/tests/js/web-component.test.js
index b1bad86..5f300d3 100644
--- a/tests/js/web-component.test.js
+++ b/tests/js/web-component.test.js
@@ -457,8 +457,8 @@ describe("PodcastPlayer Web Component", () => {
       const key = PodcastPlayer.PERSISTENCE_KEY + ":https://example.com/a.mp3";
       const saved = {
         src: "https://example.com/a.mp3",
-        currentTime: 120,           // paused at 2:00
-        paused: true,               // was paused!
+        currentTime: 120, // paused at 2:00
+        paused: true, // was paused!
         volume: 1,
         muted: false,
         playbackRate: 1,
@@ -481,8 +481,8 @@ describe("PodcastPlayer Web Component", () => {
       const key = PodcastPlayer.PERSISTENCE_KEY + ":https://example.com/a.mp3";
       const saved = {
         src: "https://example.com/a.mp3",
-        currentTime: 60,            // was at 1:00
-        paused: false,              // was playing!
+        currentTime: 60, // was at 1:00
+        paused: false, // was playing!
         volume: 1,
         muted: false,
         playbackRate: 1,
@@ -704,11 +704,18 @@ describe("PodcastPlayer Web Component", () => {
 
       // Inline dispatches state change (mute with current volume)
       player.setAttribute("src", "https://example.com/test.mp3");
-      player.dispatchEvent(new CustomEvent("podcast-state-change", {
-        bubbles: true,
-        composed: true,
-        detail: { src: "https://example.com/test.mp3", volume: 0.8, muted: true, playbackRate: 1 }
-      }));
+      player.dispatchEvent(
+        new CustomEvent("podcast-state-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            src: "https://example.com/test.mp3",
+            volume: 0.8,
+            muted: true,
+            playbackRate: 1,
+          },
+        }),
+      );
 
       // Footer should have applied the changes
       expect(footer._audio.muted).toBe(true);
@@ -721,11 +728,18 @@ describe("PodcastPlayer Web Component", () => {
       footer.setAttribute("active", "");
 
       player.setAttribute("src", "https://example.com/test.mp3");
-      player.dispatchEvent(new CustomEvent("podcast-state-change", {
-        bubbles: true,
-        composed: true,
-        detail: { src: "https://example.com/test.mp3", volume: 0.5, muted: false, playbackRate: 1.5 }
-      }));
+      player.dispatchEvent(
+        new CustomEvent("podcast-state-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            src: "https://example.com/test.mp3",
+            volume: 0.5,
+            muted: false,
+            playbackRate: 1.5,
+          },
+        }),
+      );
 
       expect(footer._audio.volume).toBe(0.5);
       expect(footer._audio.muted).toBe(false);
@@ -738,11 +752,18 @@ describe("PodcastPlayer Web Component", () => {
       player._audio.volume = 1;
 
       footer._audio.src = "https://example.com/test.mp3";
-      footer.dispatchEvent(new CustomEvent("podcast-state-change", {
-        bubbles: true,
-        composed: true,
-        detail: { src: "https://example.com/test.mp3", volume: 0.2, muted: false, playbackRate: 2 }
-      }));
+      footer.dispatchEvent(
+        new CustomEvent("podcast-state-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            src: "https://example.com/test.mp3",
+            volume: 0.2,
+            muted: false,
+            playbackRate: 2,
+          },
+        }),
+      );
 
       // Inline UI should reflect footer state
       expect(player.shadowRoot.querySelector(".volume").value).toBe("0.2");
@@ -757,11 +778,18 @@ describe("PodcastPlayer Web Component", () => {
       player._audio.muted = false;
       player._audio.playbackRate = 1;
 
-      footer.dispatchEvent(new CustomEvent("podcast-state-change", {
-        bubbles: true,
-        composed: true,
-        detail: { src: "https://example.com/track-b.mp3", volume: 0.1, muted: true, playbackRate: 2 }
-      }));
+      footer.dispatchEvent(
+        new CustomEvent("podcast-state-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            src: "https://example.com/track-b.mp3",
+            volume: 0.1,
+            muted: true,
+            playbackRate: 2,
+          },
+        }),
+      );
 
       // Inline state should NOT change
       expect(player._audio.volume).toBe(1);
@@ -798,10 +826,12 @@ describe("PodcastPlayer Web Component", () => {
       // captures callbacks so tests can flush them deterministically.
       rafCallbacks = [];
       origRaf = globalThis.requestAnimationFrame;
-      globalThis.requestAnimationFrame = /** @type {any} */ ((cb) => {
-        rafCallbacks.push(cb);
-        return rafCallbacks.length;
-      });
+      globalThis.requestAnimationFrame = /** @type {any} */ (
+        (cb) => {
+          rafCallbacks.push(cb);
+          return rafCallbacks.length;
+        }
+      );
 
       // jsdom does not implement ResizeObserver. Install a spy class so we
       // can assert it was instantiated, and so the footer's code path runs.
@@ -849,9 +879,11 @@ describe("PodcastPlayer Web Component", () => {
       // itself), so the event must be dispatched from `document` to reach
       // the handler. This matches how inline <podcast-player> elements
       // dispatch their play events in production.
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: { src: "https://example.com/x.mp3", title: "Hello World" },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: { src: "https://example.com/x.mp3", title: "Hello World" },
+        }),
+      );
 
       // Inner span should hold the title text
       expect(footer._els.titleText.textContent).toBe("Hello World");
@@ -905,10 +937,12 @@ describe("PodcastPlayer Web Component", () => {
     it("sets data-overflow and CSS vars when the inner text overflows", async () => {
       // Mock the dimensions BEFORE the measurement runs.
       Object.defineProperty(footer._els.title, "clientWidth", {
-        configurable: true, value: 100,
+        configurable: true,
+        value: 100,
       });
       Object.defineProperty(footer._els.titleText, "scrollWidth", {
-        configurable: true, value: 200,
+        configurable: true,
+        value: 200,
       });
 
       footer._setupTitleMarquee();
@@ -917,62 +951,70 @@ describe("PodcastPlayer Web Component", () => {
 
       expect(footer._els.title.hasAttribute("data-overflow")).toBe(true);
       // overflow = 200 - 100 = 100
-      expect(footer._els.title.style.getPropertyValue("--marquee-distance"))
-        .toBe("100px");
+      expect(footer._els.title.style.getPropertyValue("--marquee-distance")).toBe("100px");
       // duration = Math.min(20, Math.max(6, 100 / 40)) = 6
-      expect(footer._els.title.style.getPropertyValue("--marquee-duration"))
-        .toBe("6s");
+      expect(footer._els.title.style.getPropertyValue("--marquee-duration")).toBe("6s");
     });
 
     it("does NOT set data-overflow when the inner text fits", () => {
       Object.defineProperty(footer._els.title, "clientWidth", {
-        configurable: true, value: 200,
+        configurable: true,
+        value: 200,
       });
       Object.defineProperty(footer._els.titleText, "scrollWidth", {
-        configurable: true, value: 100,
+        configurable: true,
+        value: 100,
       });
 
       footer._setupTitleMarquee();
       flushRaf();
 
       expect(footer._els.title.hasAttribute("data-overflow")).toBe(false);
-      expect(footer._els.title.style.getPropertyValue("--marquee-distance"))
-        .toBe("");
-      expect(footer._els.title.style.getPropertyValue("--marquee-duration"))
-        .toBe("");
+      expect(footer._els.title.style.getPropertyValue("--marquee-distance")).toBe("");
+      expect(footer._els.title.style.getPropertyValue("--marquee-duration")).toBe("");
     });
 
     it("re-measures after a new podcast-play event changes the title", () => {
       // Start with a fitting title (no overflow)
       Object.defineProperty(footer._els.title, "clientWidth", {
-        configurable: true, value: 500,
+        configurable: true,
+        value: 500,
       });
       Object.defineProperty(footer._els.titleText, "scrollWidth", {
-        configurable: true, get() { return footer._els.titleText.textContent.length; },
+        configurable: true,
+        get() {
+          return footer._els.titleText.textContent.length;
+        },
       });
       // .title clientWidth is constant; .title-text scrollWidth scales with
       // text length under our mock.
 
       // Short title → fits
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: { src: "https://example.com/short.mp3", title: "Hi" },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: { src: "https://example.com/short.mp3", title: "Hi" },
+        }),
+      );
       flushRaf();
       expect(footer._els.title.hasAttribute("data-overflow")).toBe(false);
 
       // Long title → overflows (2 chars vs 500px width still fits, so make
       // it 600 chars to force overflow).
       const longTitle = "A".repeat(600);
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: { src: "https://example.com/long.mp3", title: longTitle },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: { src: "https://example.com/long.mp3", title: longTitle },
+        }),
+      );
       flushRaf();
       expect(footer._els.title.hasAttribute("data-overflow")).toBe(true);
 
       // Back to a short title → overflow attribute removed.
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: { src: "https://example.com/short2.mp3", title: "Hi again" },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: { src: "https://example.com/short2.mp3", title: "Hi again" },
+        }),
+      );
       flushRaf();
       expect(footer._els.title.hasAttribute("data-overflow")).toBe(false);
     });
@@ -1106,7 +1148,11 @@ describe("PodcastPlayer Web Component", () => {
 
       // javascript: and data: schemes are explicitly not http(s), so the
       // auto-derived URL must be empty (callers treat "" as "hide the link").
-      for (const bad of ["javascript:alert(1)", "data:text/html,<script>alert(1)</script>", "ftp://example.com/foo.mp3"]) {
+      for (const bad of [
+        "javascript:alert(1)",
+        "data:text/html,<script>alert(1)</script>",
+        "ftp://example.com/foo.mp3",
+      ]) {
         player.setAttribute("src", bad);
         expect(player._resolveUrl()).toBe("");
       }
@@ -1214,15 +1260,17 @@ describe("PodcastPlayer Web Component", () => {
     it("footer: podcast-play with url field shows the link with that URL", () => {
       // The footer listens for podcast-play on `document` (matching how
       // inline <podcast-player> elements dispatch the event in production).
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          url: "https://example.com/page",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            url: "https://example.com/page",
+            currentTime: 0,
+          },
+        }),
+      );
 
       // After dispatch, the link should be visible and pointing at the
       // explicit URL from the event detail. The URL is normalized through
@@ -1236,15 +1284,17 @@ describe("PodcastPlayer Web Component", () => {
     });
 
     it("footer: podcast-play with url='none' hides the link", () => {
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          url: "none",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            url: "none",
+            currentTime: 0,
+          },
+        }),
+      );
 
       // The "none" sentinel is honored even when the event carries one.
       expect(footer._els.source.hidden).toBe(true);
@@ -1260,16 +1310,18 @@ describe("PodcastPlayer Web Component", () => {
       // Set the override BEFORE dispatching the event.
       footer.setAttribute("url", "https://override.example.com");
 
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          // Inline player's URL — must be ignored in favor of the override.
-          url: "https://inline.example.com",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            // Inline player's URL — must be ignored in favor of the override.
+            url: "https://inline.example.com",
+            currentTime: 0,
+          },
+        }),
+      );
 
       // The URL is normalized through `new URL(...)`, which appends a
       // trailing slash to a bare host. Compare against the canonical form.
@@ -1282,15 +1334,17 @@ describe("PodcastPlayer Web Component", () => {
     it("footer: <podcast-footer url='none'> override hides the link even when event has a URL", () => {
       footer.setAttribute("url", "none");
 
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          url: "https://inline.example.com",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            url: "https://inline.example.com",
+            currentTime: 0,
+          },
+        }),
+      );
 
       // Top-level "none" override beats the inline URL.
       expect(footer._els.source.hidden).toBe(true);
@@ -1300,33 +1354,37 @@ describe("PodcastPlayer Web Component", () => {
     it("footer: changing <podcast-footer url='...'> at runtime updates the visible link", () => {
       // URLs are normalized through `new URL(...)` which appends a
       // trailing slash to bare hosts; compare against the canonical form.
-      const firstExpected  = new URL("https://first.example.com",  document.baseURI).href;
+      const firstExpected = new URL("https://first.example.com", document.baseURI).href;
       const secondExpected = new URL("https://second.example.com", document.baseURI).href;
 
       // First, dispatch a play event that sets a URL.
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          url: "https://first.example.com",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            url: "https://first.example.com",
+            currentTime: 0,
+          },
+        }),
+      );
       expect(footer._els.source.getAttribute("href")).toBe(firstExpected);
 
       // Now flip the top-level override to a different URL and dispatch
       // again — the visible link must follow the override.
       footer.setAttribute("url", "https://second.example.com");
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/other.mp3",
-          title: "Episode 2",
-          poster: "",
-          url: "https://other-inline.example.com",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/other.mp3",
+            title: "Episode 2",
+            poster: "",
+            url: "https://other-inline.example.com",
+            currentTime: 0,
+          },
+        }),
+      );
       expect(footer._els.source.hidden).toBe(false);
       expect(footer._els.source.getAttribute("href")).toBe(secondExpected);
     });
@@ -1586,7 +1644,7 @@ describe("PodcastPlayer Web Component", () => {
         footer.removeAttribute("size");
         footer.setAttribute("size", "large");
         footer.setAttribute("size", "medium");
-        footer.setAttribute("size", "huge");  // unknown value
+        footer.setAttribute("size", "huge"); // unknown value
         footer.removeAttribute("size");
       }).not.toThrow();
     });
@@ -1605,15 +1663,17 @@ describe("PodcastPlayer Web Component", () => {
       // Synthesize a podcast-play event with a DIFFERENT inline url —
       // the top-level url override must still win, regardless of the
       // presence of the size attribute.
-      document.dispatchEvent(new CustomEvent("podcast-play", {
-        detail: {
-          src: "https://example.com/audio.mp3",
-          title: "Episode 1",
-          poster: "",
-          url: "https://inline.example.com",
-          currentTime: 0,
-        },
-      }));
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://example.com/audio.mp3",
+            title: "Episode 1",
+            poster: "",
+            url: "https://inline.example.com",
+            currentTime: 0,
+          },
+        }),
+      );
 
       // The top-level url override wins.
       const expected = new URL("https://example.com/page", document.baseURI).href;
@@ -1623,4 +1683,691 @@ describe("PodcastPlayer Web Component", () => {
       expect(footer.getAttribute("size")).toBe("medium");
     });
   });
+
+  /* ================================================================== */
+  /*  <podcast-live> Web Component (issue #65)                           */
+  /* ================================================================== */
+  //
+  // TDD RED — these tests exercise a <podcast-live> custom element that
+  // does NOT exist yet. They will fail (customElements.get returns
+  // undefined, shadowRoot is null, etc.) until the implementation lands.
+  //
+  // Design choices documented up-front (kept stable for the impl author):
+  //
+  //   • The "Listen Live" button is rendered with class .listen-live.
+  //     This name does not conflict with the player's .btn-play / .btn
+  //     classes (see assets/js/podcast-player.js around line 1842).
+  //
+  //   • Metadata slots:
+  //       .badge      — "LIVE" pill (animated when data-state="playing")
+  //       .title      — current track title text
+  //       .artist     — current track artist text
+  //       .time       — "HH:MM-HH:MM" start→end time string
+  //       .listen-live— the button that dispatches podcast-play
+  //
+  //   • State is exposed on the host as a `data-state` attribute with
+  //     one of: "idle" | "loading" | "playing" | "offline" | "error".
+  //     This mirrors the existing pattern (see :host([size="..."]) usage
+  //     in the footer).
+  //
+  //   • _fmtClockTime(date) is exposed as a STATIC method on the class so
+  //     unit tests can call it without instantiating the element.
+  //     Static access path: customElements.get("podcast-live")._fmtClockTime(d)
+  //
+  //   • Configurable intervals (ms) are read from attributes:
+  //       poll-interval-active (default 15000)
+  //       poll-interval-idle   (default 60000)
+  //
+  //   • Exponential-backoff delay sequence on error: 30000, 60000, 120000,
+  //     240000, then capped at 600000; reset to base on success.
+  //
+  //   • On disconnectedCallback, any in-flight fetch is aborted via
+  //     AbortController and any pending poll timer is cleared.
+
+  describe("podcast-live", () => {
+    /** @type {HTMLElement} */
+    let live;
+    /** @type {HTMLElement} */
+    let footer;
+    /** @type {ReturnType<typeof vi.fn> | undefined} */
+    let origFetch;
+
+    const VALID_API_URL = "https://station.example.com/api/live/nowplaying/test";
+    const LIVE_STREAM_URL = "https://station.example.com/radio.mp3";
+
+    /**
+     * Build a minimal "now playing" payload that resolves through the
+     * mock fetch. The component reads these fields off the JSON body.
+     */
+    const fakeNowPlaying = (overrides = {}) => ({
+      station: { listen_url: LIVE_STREAM_URL },
+      now_playing: {
+        song: { title: "Test Track", artist: "Test Artist" },
+        elapsed: 0,
+        duration: 0,
+        ...overrides,
+      },
+      ...overrides,
+    });
+
+    beforeEach(() => {
+      // Clean up any leftover live/footer instances from previous tests.
+      document.querySelectorAll("podcast-live, podcast-footer").forEach((e) => e.remove());
+
+      // Save and replace globalThis.fetch with a vi.fn() so tests can
+      // assert call counts. Tests that need a specific response use the
+      // `.mockResolvedValueOnce(...)` pattern.
+      origFetch = globalThis.fetch;
+      globalThis.fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(fakeNowPlaying()),
+      });
+
+      // A footer sibling is required for d2/d3 (single-stream integration).
+      // It is not required for the rest of the suite, but creating it
+      // unconditionally keeps state predictable.
+      footer = document.createElement("podcast-footer");
+      document.body.appendChild(footer);
+    });
+
+    afterEach(() => {
+      document.querySelectorAll("podcast-live, podcast-footer").forEach((e) => e.remove());
+      if (origFetch === undefined) {
+        delete globalThis.fetch;
+      } else {
+        globalThis.fetch = origFetch;
+      }
+      vi.useRealTimers();
+    });
+
+    /** Helper: create a <podcast-live> with the two required attributes set. */
+    const createLive = (overrides = {}) => {
+      const el = document.createElement("podcast-live");
+      el.setAttribute("data-azuracast-api-url", VALID_API_URL);
+      el.setAttribute("station-name", "test-station");
+      for (const [k, v] of Object.entries(overrides)) {
+        el.setAttribute(k, v);
+      }
+      document.body.appendChild(el);
+      return el;
+    };
+
+    /* ---------------------------------------------------------------- */
+    /*  A. Registration & rendering                                      */
+    /* ---------------------------------------------------------------- */
+
+    it("A1: registers a custom element named 'podcast-live'", () => {
+      expect(customElements.get("podcast-live")).toBeDefined();
+    });
+
+    it("A2: renders badge, title, artist, time and listen-live in the shadow root", () => {
+      live = createLive();
+      expect(live.shadowRoot).not.toBeNull();
+      expect(live.shadowRoot.querySelector(".badge")).not.toBeNull();
+      expect(live.shadowRoot.querySelector(".title")).not.toBeNull();
+      expect(live.shadowRoot.querySelector(".artist")).not.toBeNull();
+      expect(live.shadowRoot.querySelector(".time")).not.toBeNull();
+      expect(live.shadowRoot.querySelector(".listen-live")).not.toBeNull();
+    });
+
+    it("A3: exposes data-azuracast-api-url and station-name as readable attributes", () => {
+      live = createLive();
+      // The host element reflects the attributes regardless of whether
+      // the custom element is defined (setAttribute on an
+      // HTMLUnknownElement still works), so this is a sanity check on
+      // the DOM round-trip, not on custom-element behaviour.
+      expect(live.getAttribute("data-azuracast-api-url")).toBe(VALID_API_URL);
+      expect(live.getAttribute("station-name")).toBe("test-station");
+
+      // The component must OBSERVE the attributes so attributeChangedCallback
+      // fires when they are set (this is what kicks off the fetch).
+      const Cls = customElements.get("podcast-live");
+      expect(Cls).toBeDefined();
+      expect(Cls.observedAttributes).toContain("data-azuracast-api-url");
+      expect(Cls.observedAttributes).toContain("station-name");
+    });
+
+    it("A4: shadow root contains a <style> element", () => {
+      live = createLive();
+      expect(live.shadowRoot.querySelector("style")).not.toBeNull();
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  B. State machine                                                 */
+    /* ---------------------------------------------------------------- */
+
+    it("B1: initial data-state is 'idle'", () => {
+      live = createLive();
+      expect(live.getAttribute("data-state")).toBe("idle");
+    });
+
+    it("B2: transitions to 'loading' or 'playing' after a successful fetch", async () => {
+      live = createLive();
+      // Let the initial connectedCallback fetch resolve and the
+      // microtask queue drain.
+      await Promise.resolve();
+      await Promise.resolve();
+      const state = live.getAttribute("data-state");
+      expect(["loading", "playing"]).toContain(state);
+    });
+
+    it("B3: fetch failure transitions data-state to 'offline'", async () => {
+      globalThis.fetch = vi.fn().mockRejectedValue(new Error("network down"));
+      live = createLive();
+      // Allow the rejection to propagate and the catch handler to run.
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+      expect(live.getAttribute("data-state")).toBe("offline");
+    });
+
+    it("B4: bad URL (javascript:/data:/http:/malformed) → 'error' and no fetch attempted", () => {
+      // Each sub-case must reject the URL without invoking fetch.
+      // We install a fresh vi.fn() as globalThis.fetch for each iteration
+      // and assert it was never called.
+      const badUrls = [
+        "javascript:alert(1)",
+        "data:text/html,<script>alert(1)</script>",
+        "http://insecure.example.com/api/live/nowplaying/test",
+        "not-a-url",
+        "http://[invalid",
+      ];
+      for (const bad of badUrls) {
+        // Reset DOM and mock between sub-cases.
+        document.querySelectorAll("podcast-live").forEach((e) => e.remove());
+        globalThis.fetch = vi.fn();
+
+        const el = document.createElement("podcast-live");
+        el.setAttribute("data-azuracast-api-url", bad);
+        el.setAttribute("station-name", "x");
+        document.body.appendChild(el);
+
+        expect(el.getAttribute("data-state")).toBe("error");
+        expect(globalThis.fetch).not.toHaveBeenCalled();
+        el.remove();
+      }
+    });
+
+    it("B5: disconnected component has no data-state set (or is fully cleaned up)", () => {
+      live = createLive();
+      const snapshot = live;
+      snapshot.remove();
+      // After removal, the element is detached and any state mutation
+      // it performed before removal must not be visible on a fresh
+      // element. We assert the cleanup by creating a new instance and
+      // confirming it starts at "idle" — i.e. the previous instance did
+      // not leak global state.
+      live = createLive();
+      expect(live.getAttribute("data-state")).toBe("idle");
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  C. Polling                                                       */
+    /* ---------------------------------------------------------------- */
+    //
+    // The polling describe block installs fake timers in beforeEach and
+    // restores them in afterEach (the outer describe's afterEach also
+    // calls vi.useRealTimers() as a safety net).
+
+    describe("polling", () => {
+      beforeEach(() => {
+        vi.useFakeTimers();
+      });
+
+      afterEach(() => {
+        vi.useRealTimers();
+      });
+
+      it("C1: fetches exactly once on connectedCallback", async () => {
+        live = createLive();
+        // Drain any pending microtasks queued by the constructor.
+        // We deliberately use `await Promise.resolve()` instead of
+        // `vi.runOnlyPendingTimersAsync()` because the latter advances
+        // the fake clock and fires any future-scheduled timers, which
+        // would mask the "exactly once" assertion by triggering the
+        // 15000ms follow-up poll.
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+        expect(globalThis.fetch).toHaveBeenCalledWith(
+          VALID_API_URL,
+          expect.objectContaining({ signal: expect.any(AbortSignal) }),
+        );
+      });
+
+      it("C2: refetches after poll-interval-active (default 15000ms) when playing", async () => {
+        live = createLive();
+        // Drain the initial fetch (microtasks only — see C1).
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+
+        // Advance just below the active interval — must NOT refetch.
+        await vi.advanceTimersByTimeAsync(14999);
+        expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+
+        // Advance past the boundary — must refetch exactly once more.
+        // `advanceTimersByTimeAsync` drains microtasks too, so the new
+        // fetch's promise resolves and count increments by one.
+        await vi.advanceTimersByTimeAsync(2);
+        expect(globalThis.fetch).toHaveBeenCalledTimes(2);
+      });
+
+      it("C3: refetches after poll-interval-idle (default 60000ms) when NOT playing", async () => {
+        // Force a fetch error so the component stays in 'offline' (not
+        // 'playing') for this test.
+        globalThis.fetch = vi.fn().mockRejectedValue(new Error("down"));
+        live = createLive();
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        // Initial fetch was attempted once.
+        expect(globalThis.fetch.mock.calls.length).toBe(1);
+
+        // Advance past the active interval (15000) — must NOT refetch
+        // because state is not 'playing'.
+        await vi.advanceTimersByTimeAsync(20000);
+        expect(globalThis.fetch.mock.calls.length).toBe(1);
+
+        // Advance past the idle interval (60000 cumulative) — must refetch.
+        await vi.advanceTimersByTimeAsync(40001);
+        expect(globalThis.fetch.mock.calls.length).toBeGreaterThanOrEqual(2);
+      });
+
+      it("C4: doubles the next delay on error (exponential backoff: 30s, 60s, 120s, ...)", async () => {
+        globalThis.fetch = vi.fn().mockRejectedValue(new Error("boom"));
+        live = createLive();
+        // Drain initial fetch + its microtask.
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        const initialCalls = globalThis.fetch.mock.calls.length;
+        expect(initialCalls).toBe(1);
+
+        // First retry should happen at 30000ms (base error delay).
+        await vi.advanceTimersByTimeAsync(29999);
+        expect(globalThis.fetch.mock.calls.length).toBe(1);
+
+        await vi.advanceTimersByTimeAsync(2);
+        expect(globalThis.fetch.mock.calls.length).toBe(2);
+
+        // Second retry should happen at 30000 + 60000 = 90000ms cumulative.
+        // The advance is 1ms short of the boundary so we can prove the
+        // 90000ms timer has NOT fired before that point.
+        await vi.advanceTimersByTimeAsync(59998);
+        expect(globalThis.fetch.mock.calls.length).toBe(2);
+
+        await vi.advanceTimersByTimeAsync(2);
+        expect(globalThis.fetch.mock.calls.length).toBe(3);
+      });
+
+      it("C5: a successful fetch after errors resets the delay to the base interval", async () => {
+        // First two fetches fail, third succeeds.
+        globalThis.fetch = vi
+          .fn()
+          .mockRejectedValueOnce(new Error("e1"))
+          .mockRejectedValueOnce(new Error("e2"))
+          .mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve(fakeNowPlaying()),
+          });
+
+        live = createLive();
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        expect(globalThis.fetch.mock.calls.length).toBe(1);
+
+        // Trigger first error retry (30000ms).
+        await vi.advanceTimersByTimeAsync(30001);
+        expect(globalThis.fetch.mock.calls.length).toBe(2);
+
+        // Trigger second error retry (cumulative 90000ms).
+        await vi.advanceTimersByTimeAsync(60000);
+        expect(globalThis.fetch.mock.calls.length).toBe(3);
+
+        // Third call succeeds. The next retry should be at the base
+        // active interval (15000ms) — NOT the next backoff step.
+        // 1ms short of the boundary so we can prove the 15000ms timer
+        // has NOT fired before that point.
+        await vi.advanceTimersByTimeAsync(14998);
+        expect(globalThis.fetch.mock.calls.length).toBe(3);
+
+        await vi.advanceTimersByTimeAsync(2);
+        expect(globalThis.fetch.mock.calls.length).toBe(4);
+      });
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  D. Single-stream integration (event flow)                        */
+    /* ---------------------------------------------------------------- */
+
+    it("D1: clicking the .listen-live button dispatches podcast-play on document", async () => {
+      live = createLive();
+      // Drain the initial fetch so the component has a stream URL cached.
+      // The mock fetch resolves synchronously, so a few microtask ticks
+      // are sufficient.
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      const handler = vi.fn();
+      document.addEventListener("podcast-play", handler);
+
+      const btn = live.shadowRoot.querySelector(".listen-live");
+      btn.click();
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0];
+      expect(event).toBeInstanceOf(CustomEvent);
+      expect(event.type).toBe("podcast-play");
+      expect(event.bubbles).toBe(true);
+      expect(event.composed).toBe(true);
+      expect(event.detail).toBeDefined();
+      expect(event.detail.src).toBe(LIVE_STREAM_URL);
+      expect(typeof event.detail.title).toBe("string");
+      // currentTime is the live start offset (0 by default for a stream).
+      expect(event.detail.currentTime).toBe(0);
+
+      document.removeEventListener("podcast-play", handler);
+    });
+
+    it("D2: when a podcast-play event with the live URL arrives, data-state becomes 'playing'", async () => {
+      live = createLive();
+      // Drain initial fetch so the component is aware of the live URL.
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      // Simulate the footer (or any source) starting playback of the
+      // live stream. With the matching src, the live component should
+      // enter the 'playing' state.
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: LIVE_STREAM_URL,
+            title: "Live",
+            poster: "",
+            currentTime: 0,
+          },
+        }),
+      );
+
+      expect(live.getAttribute("data-state")).toBe("playing");
+    });
+
+    it("D3: a podcast-play event with a non-matching src does not change the live component's state", async () => {
+      live = createLive();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      // First, drive the live component to 'playing' via a matching event.
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: { src: LIVE_STREAM_URL, title: "Live", poster: "", currentTime: 0 },
+        }),
+      );
+      expect(live.getAttribute("data-state")).toBe("playing");
+
+      // Now dispatch a podcast-play for a DIFFERENT source. The live
+      // component must not transition out of 'playing' (or be confused
+      // by the unrelated event).
+      document.dispatchEvent(
+        new CustomEvent("podcast-play", {
+          detail: {
+            src: "https://other.example.com/episode.mp3",
+            title: "Episode 99",
+            poster: "",
+            currentTime: 0,
+          },
+        }),
+      );
+
+      expect(live.getAttribute("data-state")).toBe("playing");
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  E. 24H time formatting                                           */
+    /* ---------------------------------------------------------------- */
+
+    it("E1: _fmtClockTime(14:32) returns '14:32'", () => {
+      const Cls = customElements.get("podcast-live");
+      expect(typeof Cls._fmtClockTime).toBe("function");
+      expect(Cls._fmtClockTime(new Date(2026, 0, 1, 14, 32))).toBe("14:32");
+    });
+
+    it("E2: _fmtClockTime(00:00) returns '00:00'", () => {
+      const Cls = customElements.get("podcast-live");
+      expect(Cls._fmtClockTime(new Date(2026, 0, 1, 0, 0))).toBe("00:00");
+    });
+
+    it("E3: _fmtClockTime(23:59) returns '23:59'", () => {
+      const Cls = customElements.get("podcast-live");
+      expect(Cls._fmtClockTime(new Date(2026, 0, 1, 23, 59))).toBe("23:59");
+    });
+
+    it("E4: _fmtClockTime on an invalid Date returns '--:--'", () => {
+      const Cls = customElements.get("podcast-live");
+      expect(Cls._fmtClockTime(new Date("invalid"))).toBe("--:--");
+    });
+
+    it("E5: rendered .time reflects now-elapsed and now-elapsed+duration in 24H", async () => {
+      // Use fake timers so Date.now() is deterministic.
+      vi.useFakeTimers();
+      // Pick a "now" that yields a clean local-time 14:30:00.
+      const realNow = new Date(2026, 0, 15, 14, 30, 0).getTime();
+      vi.setSystemTime(realNow);
+
+      // Mock fetch to return a track that started 60s ago and lasts 240s.
+      globalThis.fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            fakeNowPlaying({
+              elapsed: 60,
+              duration: 240,
+            }),
+          ),
+      });
+
+      live = createLive();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      const time = live.shadowRoot.querySelector(".time");
+      expect(time).not.toBeNull();
+      // start = now - elapsed = 14:30 - 60s = 14:29
+      // end   = start + duration = 14:29 + 240s = 14:33
+      const text = time.textContent;
+      expect(text).toContain("14:29");
+      expect(text).toContain("14:33");
+
+      vi.useRealTimers();
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  F. URL sanitization                                              */
+    /* ---------------------------------------------------------------- */
+    //
+    // These tests verify the four "bad URL" categories listed in the
+    // spec. The component MUST refuse to fetch and MUST set
+    // data-state="error". Each sub-case gets its own fresh fetch mock
+    // so we can assert it was not invoked.
+
+    it("F1: javascript: URL → data-state='error' and no fetch", () => {
+      globalThis.fetch = vi.fn();
+      live = document.createElement("podcast-live");
+      live.setAttribute("data-azuracast-api-url", "javascript:alert(1)");
+      live.setAttribute("station-name", "x");
+      document.body.appendChild(live);
+
+      expect(live.getAttribute("data-state")).toBe("error");
+      expect(globalThis.fetch).not.toHaveBeenCalled();
+    });
+
+    it("F2: data: URL → data-state='error' and no fetch", () => {
+      globalThis.fetch = vi.fn();
+      live = document.createElement("podcast-live");
+      live.setAttribute("data-azuracast-api-url", "data:text/html,<script>x</script>");
+      live.setAttribute("station-name", "x");
+      document.body.appendChild(live);
+
+      expect(live.getAttribute("data-state")).toBe("error");
+      expect(globalThis.fetch).not.toHaveBeenCalled();
+    });
+
+    it("F3: http:// (non-https) URL → data-state='error' and no fetch", () => {
+      globalThis.fetch = vi.fn();
+      live = document.createElement("podcast-live");
+      live.setAttribute("data-azuracast-api-url", "http://insecure.example.com/api/nowplaying/x");
+      live.setAttribute("station-name", "x");
+      document.body.appendChild(live);
+
+      expect(live.getAttribute("data-state")).toBe("error");
+      expect(globalThis.fetch).not.toHaveBeenCalled();
+    });
+
+    it("F4: malformed URL → data-state='error' and no fetch", () => {
+      globalThis.fetch = vi.fn();
+      live = document.createElement("podcast-live");
+      // "not-a-url" lacks a scheme; the URL constructor will throw.
+      live.setAttribute("data-azuracast-api-url", "not-a-url");
+      live.setAttribute("station-name", "x");
+      document.body.appendChild(live);
+
+      expect(live.getAttribute("data-state")).toBe("error");
+      expect(globalThis.fetch).not.toHaveBeenCalled();
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  G. CSS animation                                                 */
+    /* ---------------------------------------------------------------- */
+
+    it("G1: shadow style block declares @keyframes live-pulse", () => {
+      live = createLive();
+      const css = live.shadowRoot.querySelector("style").textContent;
+      expect(css).toContain("@keyframes live-pulse");
+    });
+
+    it("G2: @media (prefers-reduced-motion: reduce) disables the live-pulse animation", () => {
+      live = createLive();
+      const css = live.shadowRoot.querySelector("style").textContent;
+      const idx = css.indexOf("@media (prefers-reduced-motion: reduce)");
+      expect(idx).toBeGreaterThan(-1);
+      const block = css.slice(idx);
+      // Inside the reduced-motion block, the animation must be set to
+      // "none" (or otherwise neutralized). "animation: none" is the
+      // canonical expression.
+      expect(block).toContain("animation: none");
+    });
+
+    it("G3: badge has an accessible name conveying 'live broadcasting'", () => {
+      live = createLive();
+      const badge = live.shadowRoot.querySelector(".badge");
+      expect(badge).not.toBeNull();
+      // The spec gives the exact aria-label string.
+      expect(badge.getAttribute("aria-label")).toBe("Live radio currently broadcasting");
+    });
+
+    /* ---------------------------------------------------------------- */
+    /*  H. Cleanup                                                       */
+    /* ---------------------------------------------------------------- */
+
+    it("H1: disconnectedCallback clears the pending poll timer", async () => {
+      vi.useFakeTimers();
+      live = createLive();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+      // The component must have made its initial fetch — that's the
+      // precondition for the "no further fetch after disconnect" check
+      // to be meaningful. In the TDD-red state the component does not
+      // exist, so this assertion fails.
+      const callsAfterConnect = globalThis.fetch.mock.calls.length;
+      expect(callsAfterConnect).toBe(1);
+
+      // Disconnect, then advance well past the active interval. No new
+      // fetch should fire because the poll timer was cleared.
+      live.remove();
+      await vi.advanceTimersByTimeAsync(60000);
+
+      expect(globalThis.fetch.mock.calls.length).toBe(callsAfterConnect);
+      vi.useRealTimers();
+    });
+
+    it("H2: disconnectedCallback aborts the in-flight fetch (late response is ignored)", async () => {
+      // Mock fetch with a promise that does NOT resolve until we
+      // explicitly resolve it. The component must abort via the
+      // AbortSignal, so when we resolve late, the component's state
+      // should not change.
+      let resolveFetch;
+      const latePromise = new Promise((resolve) => {
+        resolveFetch = resolve;
+      });
+      globalThis.fetch = vi.fn().mockReturnValue(latePromise);
+
+      live = createLive();
+      // The initial fetch is now pending. Disconnect.
+      live.remove();
+
+      // Now resolve the "late" fetch — well after the component is
+      // gone. A correct implementation ignores the response because
+      // the AbortController fired. We assert no further fetch happens
+      // and the mock's signal was aborted.
+      const fetchOpts = globalThis.fetch.mock.calls[0][1];
+      expect(fetchOpts).toBeDefined();
+      expect(fetchOpts.signal).toBeDefined();
+      expect(fetchOpts.signal.aborted).toBe(true);
+
+      // Resolving the late promise must not throw inside the (already
+      // disconnected) component.
+      expect(() =>
+        resolveFetch({
+          ok: true,
+          json: () => Promise.resolve(fakeNowPlaying()),
+        }),
+      ).not.toThrow();
+    });
+
+    it("H3: multiple connect/disconnect cycles do not leak timers or global state", async () => {
+      vi.useFakeTimers();
+      // Capture the timer count after a clean baseline.
+      const baselineTimers = vi.getTimerCount();
+
+      // The component must have been registered and have observed
+      // attribute changes — verify it exists so the connect/disconnect
+      // exercise below is meaningful. Fails in the TDD-red state.
+      expect(customElements.get("podcast-live")).toBeDefined();
+
+      let totalFetches = 0;
+      for (let i = 0; i < 3; i++) {
+        const el = document.createElement("podcast-live");
+        el.setAttribute("data-azuracast-api-url", VALID_API_URL);
+        el.setAttribute("station-name", "x");
+        document.body.appendChild(el);
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+        totalFetches = globalThis.fetch.mock.calls.length;
+        el.remove();
+      }
+
+      // After cycling, the pending-timer count should match the
+      // baseline (i.e. nothing left dangling) AND no extra fetches
+      // should have been issued after the last disconnect.
+      expect(vi.getTimerCount()).toBe(baselineTimers);
+      const callsAfterAllCycles = globalThis.fetch.mock.calls.length;
+      // Advance well past the poll interval. No new fetch should fire
+      // because the (disconnected) elements have no live timers.
+      await vi.advanceTimersByTimeAsync(120000);
+      expect(globalThis.fetch.mock.calls.length).toBe(callsAfterAllCycles);
+      // Sanity: at least one fetch happened per cycle (3 total).
+      expect(totalFetches).toBe(3);
+      vi.useRealTimers();
+    });
+  });
 });