Podcast — Mini Player

:root {
  --bg: #0c0c10;
  --surface: #15151c;
  --surface-2: #1d1d27;
  --violet: #8b5cf6;
  --violet-d: #7c3aed;
  --cyan: #22d3ee;
  --pink: #f472b6;
  --ink: #f4f4f8;
  --muted: #9a9aab;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --white: #fff;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --grad: linear-gradient(90deg, var(--violet), var(--cyan));
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 180px;
}

/* ---------- masthead ---------- */
.masthead { margin-bottom: 28px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.7);
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-tag {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- feed ---------- */
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.feed-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.feed-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
}

.episodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.ep:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.ep.is-active {
  border-color: rgba(139, 92, 246, 0.6);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), var(--surface));
}

.ep-art {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: none;
}

.ep-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ep-art::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-sm);
}

.ep-body { min-width: 0; }

.ep-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-sub {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.25);
  flex: none;
}

.ep-badge.new {
  color: var(--pink);
  background: rgba(244, 114, 182, 0.12);
  border-color: rgba(244, 114, 182, 0.28);
}

.ep-dur { flex: none; }

.ep-play {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ep-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ep-play .ic-pause { display: none; margin-left: 0; }

.ep-play:hover {
  background: var(--grad);
  color: #0c0c10;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.55);
  transform: scale(1.06);
}

.ep.is-active.is-playing .ep-play .ic-play { display: none; }
.ep.is-active.is-playing .ep-play .ic-pause { display: block; }

.ep.is-active .ep-play {
  background: var(--grad);
  color: #0c0c10;
  border-color: transparent;
}

/* focus */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- sticky player ---------- */
.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(21, 21, 28, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  animation: slideUp 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.player[hidden] { display: none; }

@keyframes slideUp {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

.player-progress {
  height: 3px;
  background: var(--line);
  cursor: pointer;
}

.player-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
}

.player-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

/* compact bar */
.mini {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
}

.mini-art {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: none;
}

.mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mini-wave {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 4px;
  background: linear-gradient(180deg, transparent, rgba(12, 12, 16, 0.75));
}

.mini-wave span {
  width: 3px;
  border-radius: 2px;
  background: var(--grad);
  height: 30%;
}

.player.is-playing .mini-wave span { animation: wave 0.9s ease-in-out infinite; }
.mini-wave span:nth-child(2) { animation-delay: 0.15s; }
.mini-wave span:nth-child(3) { animation-delay: 0.3s; }
.mini-wave span:nth-child(4) { animation-delay: 0.45s; }
.mini-wave span:nth-child(5) { animation-delay: 0.6s; }

@keyframes wave {
  0%, 100% { height: 25%; }
  50% { height: 90%; }
}

.mini-meta { min-width: 0; }

.mini-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-show {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-scrub {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.t {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex: none;
  min-width: 34px;
}
.t-cur { text-align: right; color: var(--ink); }

.scrub {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}

.scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--grad);
  border-radius: 999px;
}

.scrub-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
}

.scrub:hover .scrub-thumb,
.scrub:focus-visible .scrub-thumb,
.player.is-scrubbing .scrub-thumb { transform: translate(-50%, -50%) scale(1); }

.mini-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.ctrl {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.ctrl svg { width: 20px; height: 20px; }
.ctrl:hover { background: var(--surface-2); }
.ctrl:active { transform: scale(0.92); }

.ctrl-skip em {
  position: absolute;
  bottom: 6px;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 800;
  color: var(--muted);
}

.ctrl-play {
  width: 46px;
  height: 46px;
  background: var(--grad);
  color: #0c0c10;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
.ctrl-play:hover {
  background: var(--grad);
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.65);
  transform: scale(1.05);
}
.ctrl-play svg { width: 22px; height: 22px; }
.ctrl-play .ic-pause { display: none; }
.player.is-playing .ctrl-play .ic-play { display: none; }
.player.is-playing .ctrl-play .ic-pause { display: block; }

.ctrl-expand svg { transition: transform 0.3s ease; }
.player[data-expanded="true"] .ctrl-expand svg { transform: rotate(180deg); }

/* ---------- expanded ---------- */
.expanded {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 22px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.4s ease;
}

.player[data-expanded="true"] .expanded {
  max-height: 340px;
  opacity: 1;
  padding: 4px 0 28px;
}

.expanded-art {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.expanded-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.expanded-body { min-width: 0; display: flex; flex-direction: column; }

.badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--violet);
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.expanded-body h2 {
  margin: 10px 0 2px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.expanded-show { margin: 0; color: var(--cyan); font-weight: 600; font-size: 0.85rem; }

.expanded-notes {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expanded-transport {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctrl-play-lg { width: 56px; height: 56px; }
.ctrl-play-lg svg { width: 26px; height: 26px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 20px);
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .mini-scrub { min-width: 0; }
}

@media (max-width: 520px) {
  .page { padding: 24px 14px 190px; }

  .ep { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .ep-art { width: 48px; height: 48px; }
  .ep-sub .ep-dur { display: none; }

  .mini { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 8px 12px; padding: 10px 0; }
  .mini-scrub { grid-column: 1 / -1; order: 3; }
  .mini-controls { grid-row: 1; }
  .ctrl-skip { display: none; }

  .expanded { grid-template-columns: 1fr; gap: 14px; }
  .player[data-expanded="true"] .expanded { max-height: 460px; }
  .expanded-art { width: 140px; }
  .expanded-transport { flex-wrap: wrap; }

  .toast { bottom: 130px; }
}

(function () {
  "use strict";

  // ---------- data ----------
  const EPISODES = [
    {
      id: "e1",
      title: "The Quiet Economy of Attention",
      show: "Signal & Static",
      badge: "New",
      badgeType: "new",
      duration: 2714, // seconds
      art: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=200&q=80&auto=format&fit=crop",
      notes: "Host Mara Ndiaye unpacks how attention became the scarcest resource of the decade, and what indie creators are doing to reclaim it from the feed.",
    },
    {
      id: "e2",
      title: "Building in the Open, Failing in Public",
      show: "Ship It Weekly",
      badge: "Episode 84",
      badgeType: "",
      duration: 3182,
      art: "https://images.unsplash.com/photo-1506157786151-b8491531f063?w=200&q=80&auto=format&fit=crop",
      notes: "Two founders trade war stories about launching half-finished products and letting the audience watch every mistake in real time.",
    },
    {
      id: "e3",
      title: "Field Recordings from the Deep North",
      show: "Wander Frequencies",
      badge: "New",
      badgeType: "new",
      duration: 1965,
      art: "https://images.unsplash.com/photo-1483000805330-4eaf0a0d82da?w=200&q=80&auto=format&fit=crop",
      notes: "A sound diary stitched together from a month spent chasing silence above the Arctic Circle. Headphones strongly recommended.",
    },
    {
      id: "e4",
      title: "Why Your Sleep Schedule Lies to You",
      show: "The Body Clock",
      badge: "Episode 12",
      badgeType: "",
      duration: 2438,
      art: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=200&q=80&auto=format&fit=crop",
      notes: "Dr. Priya Venkat explains circadian drift, social jetlag, and the small habit that quietly resets your internal clock overnight.",
    },
    {
      id: "e5",
      title: "The Last Great Radio Drama",
      show: "Analog Hours",
      badge: "Episode 47",
      badgeType: "",
      duration: 3560,
      art: "https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=200&q=80&auto=format&fit=crop",
      notes: "A love letter to the golden age of audio storytelling, and a scrappy collective trying to revive it one serialized episode at a time.",
    },
    {
      id: "e6",
      title: "Money, Meaning, and the Side Hustle Trap",
      show: "Off the Ledger",
      badge: "New",
      badgeType: "new",
      duration: 2251,
      art: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&q=80&auto=format&fit=crop",
      notes: "When does a passion project stop being a joy and start being a second job? A candid look at burnout in the creator economy.",
    },
  ];

  // ---------- els ----------
  const $ = (s, r = document) => r.querySelector(s);
  const list = $("#episodeList");
  const player = $("#player");
  const miniArt = $("#miniArt");
  const bigArt = $("#bigArt");
  const miniTitle = $("#miniTitle");
  const miniShow = $("#miniShow");
  const bigTitle = $("#bigTitle");
  const bigShow = $("#bigShow");
  const bigNotes = $("#bigNotes");
  const bigBadge = $("#bigBadge");
  const scrub = $("#scrub");
  const scrubFill = $("#scrubFill");
  const scrubThumb = $("#scrubThumb");
  const scrubTopFill = $("#scrubTopFill");
  const curTime = $("#curTime");
  const durTime = $("#durTime");
  const toastEl = $("#toast");

  $("#feedCount").textContent = EPISODES.length + " shows";

  // ---------- state ----------
  let currentIndex = -1;
  let playing = false;
  let position = 0; // seconds
  let ticker = null;

  // ---------- helpers ----------
  function fmt(sec) {
    sec = Math.max(0, Math.floor(sec));
    const m = Math.floor(sec / 60);
    const s = sec % 60;
    return m + ":" + String(s).padStart(2, "0");
  }

  let toastTimer;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toastEl.classList.remove("show"), 1900);
  }

  // ---------- render list ----------
  const iconPlay = '<svg class="ic-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>';
  const iconPause = '<svg class="ic-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zM14 5h4v14h-4z" fill="currentColor"/></svg>';

  EPISODES.forEach((ep, i) => {
    const li = document.createElement("li");
    li.className = "ep";
    li.dataset.index = String(i);
    li.innerHTML =
      '<div class="ep-art"><img src="' + ep.art + '" alt="Cover art for ' + ep.title + '" loading="lazy" /></div>' +
      '<div class="ep-body">' +
        '<p class="ep-title">' + ep.title + '</p>' +
        '<p class="ep-sub">' +
          '<span class="ep-badge ' + (ep.badgeType || "") + '">' + ep.badge + '</span>' +
          '<span>' + ep.show + '</span>' +
          '<span class="ep-dur">· ' + fmt(ep.duration) + '</span>' +
        '</p>' +
      '</div>' +
      '<button class="ep-play" type="button" aria-label="Play ' + ep.title + '">' + iconPlay + iconPause + '</button>';

    li.querySelector(".ep-play").addEventListener("click", () => onRowPlay(i));
    list.appendChild(li);
  });

  const rows = Array.from(list.querySelectorAll(".ep"));

  // ---------- playback engine ----------
  function loadEpisode(i) {
    const ep = EPISODES[i];
    currentIndex = i;
    position = 0;

    miniArt.src = ep.art;
    bigArt.src = ep.art;
    miniArt.alt = bigArt.alt = "Cover art for " + ep.title;
    miniTitle.textContent = bigTitle.textContent = ep.title;
    miniShow.textContent = bigShow.textContent = ep.show;
    bigNotes.textContent = ep.notes;
    bigBadge.textContent = ep.badge;
    durTime.textContent = fmt(ep.duration);
    scrub.setAttribute("aria-valuetext", "0:00 of " + fmt(ep.duration));

    if (player.hidden) {
      player.hidden = false;
      // retrigger slide-up animation
      player.style.animation = "none";
      void player.offsetWidth;
      player.style.animation = "";
    }
    updateProgress();
    highlightRow();
  }

  function highlightRow() {
    rows.forEach((r, idx) => {
      r.classList.toggle("is-active", idx === currentIndex);
      r.classList.toggle("is-playing", idx === currentIndex && playing);
      const btn = r.querySelector(".ep-play");
      btn.setAttribute("aria-label", (idx === currentIndex && playing ? "Pause " : "Play ") + EPISODES[idx].title);
    });
  }

  function setPlaying(state) {
    playing = state;
    player.classList.toggle("is-playing", playing);
    ["#playToggle", "#playToggle2"].forEach((sel) => {
      const b = $(sel);
      b.setAttribute("aria-pressed", String(playing));
      b.setAttribute("aria-label", playing ? "Pause" : "Play");
    });
    highlightRow();
    if (playing) startTicker();
    else stopTicker();
  }

  function startTicker() {
    stopTicker();
    ticker = setInterval(() => {
      const ep = EPISODES[currentIndex];
      position += 1;
      if (position >= ep.duration) {
        position = ep.duration;
        updateProgress();
        setPlaying(false);
        toast("Episode finished");
        return;
      }
      updateProgress();
    }, 1000);
  }

  function stopTicker() {
    if (ticker) { clearInterval(ticker); ticker = null; }
  }

  function updateProgress() {
    const ep = EPISODES[currentIndex];
    if (!ep) return;
    const pct = (position / ep.duration) * 100;
    scrubFill.style.width = pct + "%";
    scrubThumb.style.left = pct + "%";
    scrubTopFill.style.width = pct + "%";
    curTime.textContent = fmt(position);
    scrub.setAttribute("aria-valuenow", String(Math.round(pct)));
    scrub.setAttribute("aria-valuetext", fmt(position) + " of " + fmt(ep.duration));
  }

  // ---------- actions ----------
  function onRowPlay(i) {
    if (i === currentIndex) {
      togglePlay();
      return;
    }
    loadEpisode(i);
    setPlaying(true);
    toast("Now playing · " + EPISODES[i].show);
  }

  function togglePlay() {
    if (currentIndex < 0) { onRowPlay(0); return; }
    setPlaying(!playing);
  }

  function seekBy(delta) {
    if (currentIndex < 0) return;
    const ep = EPISODES[currentIndex];
    position = Math.min(ep.duration, Math.max(0, position + delta));
    updateProgress();
  }

  function step(dir) {
    if (currentIndex < 0) return;
    let next = (currentIndex + dir + EPISODES.length) % EPISODES.length;
    loadEpisode(next);
    setPlaying(true);
    toast((dir > 0 ? "Next · " : "Previous · ") + EPISODES[next].show);
  }

  function toggleExpand() {
    const open = player.dataset.expanded === "true";
    player.dataset.expanded = String(!open);
    $("#expandToggle").setAttribute("aria-expanded", String(!open));
    $("#expanded").setAttribute("aria-hidden", String(open));
  }

  // ---------- scrubbing ----------
  function seekFromEvent(e) {
    if (currentIndex < 0) return;
    const rect = scrub.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    const ratio = Math.min(1, Math.max(0, x / rect.width));
    position = ratio * EPISODES[currentIndex].duration;
    updateProgress();
  }

  let dragging = false;
  scrub.addEventListener("pointerdown", (e) => {
    if (currentIndex < 0) return;
    dragging = true;
    player.classList.add("is-scrubbing");
    scrub.setPointerCapture(e.pointerId);
    seekFromEvent(e);
  });
  scrub.addEventListener("pointermove", (e) => { if (dragging) seekFromEvent(e); });
  scrub.addEventListener("pointerup", (e) => {
    if (dragging) { dragging = false; player.classList.remove("is-scrubbing"); toast("Jumped to " + fmt(position)); }
  });
  scrub.addEventListener("pointercancel", () => { dragging = false; player.classList.remove("is-scrubbing"); });

  // top thin progress bar also seekable
  $("#scrubTop").addEventListener("click", (e) => {
    if (currentIndex < 0) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
    position = ratio * EPISODES[currentIndex].duration;
    updateProgress();
  });

  // keyboard on slider
  scrub.addEventListener("keydown", (e) => {
    if (currentIndex < 0) return;
    const ep = EPISODES[currentIndex];
    let handled = true;
    switch (e.key) {
      case "ArrowRight": position = Math.min(ep.duration, position + 15); break;
      case "ArrowLeft": position = Math.max(0, position - 15); break;
      case "Home": position = 0; break;
      case "End": position = ep.duration; break;
      case " ":
      case "Enter": togglePlay(); break;
      default: handled = false;
    }
    if (handled) { e.preventDefault(); updateProgress(); }
  });

  // ---------- wiring ----------
  $("#playToggle").addEventListener("click", togglePlay);
  $("#playToggle2").addEventListener("click", togglePlay);
  $("#expandToggle").addEventListener("click", toggleExpand);
  $("#skipBack").addEventListener("click", () => { seekBy(-15); toast("Back 15s"); });
  $("#skipBack2").addEventListener("click", () => { seekBy(-15); toast("Back 15s"); });
  $("#skipFwd").addEventListener("click", () => { seekBy(15); toast("Forward 15s"); });
  $("#prevEp").addEventListener("click", () => step(-1));
  $("#nextEp").addEventListener("click", () => step(1));

  // global keyboard: space toggles when not typing in a control
  document.addEventListener("keydown", (e) => {
    if (e.key === " " && !player.hidden && e.target === document.body) {
      e.preventDefault();
      togglePlay();
    }
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Podcast — Mini Player</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="page">
    <header class="masthead">
      <div class="brand">
        <span class="brand-dot" aria-hidden="true"></span>
        <span class="brand-name">Frequency</span>
      </div>
      <p class="brand-tag">Fresh episodes, ready to stream</p>
    </header>

    <main class="feed">
      <div class="feed-head">
        <h1>Latest episodes</h1>
        <span class="feed-count" id="feedCount">6 shows</span>
      </div>

      <ul class="episodes" id="episodeList" aria-label="Episode list">
        <!-- rows injected by script.js -->
      </ul>
    </main>
  </div>

  <!-- Sticky mini player -->
  <section class="player" id="player" aria-label="Now playing" data-expanded="false" hidden>
    <div class="player-progress" id="scrubTop" role="presentation">
      <div class="player-progress-fill" id="scrubTopFill"></div>
    </div>

    <div class="player-inner">
      <!-- compact bar -->
      <div class="mini">
        <div class="mini-art">
          <img id="miniArt" alt="" src="" />
          <div class="mini-wave" aria-hidden="true">
            <span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>
        <div class="mini-meta">
          <p class="mini-title" id="miniTitle">Nothing playing</p>
          <p class="mini-show" id="miniShow">Pick an episode below</p>
        </div>

        <div class="mini-scrub" id="miniScrub">
          <time class="t t-cur" id="curTime">0:00</time>
          <div class="scrub" id="scrub" role="slider" tabindex="0"
               aria-label="Seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="scrub-fill" id="scrubFill"></div>
            <div class="scrub-thumb" id="scrubThumb"></div>
          </div>
          <time class="t t-dur" id="durTime">0:00</time>
        </div>

        <div class="mini-controls">
          <button class="ctrl ctrl-skip" id="skipBack" type="button" aria-label="Skip back 15 seconds">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z" fill="currentColor"/></svg>
            <em>15</em>
          </button>
          <button class="ctrl ctrl-play" id="playToggle" type="button" aria-label="Play" aria-pressed="false">
            <svg class="ic-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
            <svg class="ic-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zM14 5h4v14h-4z" fill="currentColor"/></svg>
          </button>
          <button class="ctrl ctrl-expand" id="expandToggle" type="button" aria-label="Expand player" aria-expanded="false">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 14l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
        </div>
      </div>

      <!-- expanded now-playing panel -->
      <div class="expanded" id="expanded" aria-hidden="true">
        <div class="expanded-art">
          <img id="bigArt" alt="" src="" />
        </div>
        <div class="expanded-body">
          <span class="badge badge-live" id="bigBadge">Episode</span>
          <h2 id="bigTitle">Nothing playing</h2>
          <p class="expanded-show" id="bigShow"></p>
          <p class="expanded-notes" id="bigNotes"></p>
          <div class="expanded-transport">
            <button class="ctrl" id="prevEp" type="button" aria-label="Previous episode">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" fill="currentColor"/></svg>
            </button>
            <button class="ctrl ctrl-skip" id="skipBack2" type="button" aria-label="Skip back 15 seconds">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5V2L7 6l5 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z" fill="currentColor"/></svg>
              <em>15</em>
            </button>
            <button class="ctrl ctrl-play ctrl-play-lg" id="playToggle2" type="button" aria-label="Play" aria-pressed="false">
              <svg class="ic-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
              <svg class="ic-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zM14 5h4v14h-4z" fill="currentColor"/></svg>
            </button>
            <button class="ctrl ctrl-skip" id="skipFwd" type="button" aria-label="Skip forward 15 seconds">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5V2l5 4-5 4V7a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7z" fill="currentColor"/></svg>
              <em>15</em>
            </button>
            <button class="ctrl" id="nextEp" type="button" aria-label="Next episode">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 6h2v12h-2zM6 6l8.5 6L6 18z" fill="currentColor"/></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>