script.js

(() => {
  const STORAGE_KEYS = {
    picks: 'oscars2026_picks',
    winners: 'oscars2026_winners',
  };

  const categories = [
    {
      id: 'best-picture',
      name: 'Best Picture',
      nominees: [
        { id: 'bugonia', title: 'Bugonia', subtitle: 'Ed Guiney & Andrew Lowe, Yorgos Lanthimos, Emma Stone, Lars Knudsen' },
        { id: 'f1', title: 'F1', subtitle: 'Chad Oman, Brad Pitt, Dede Gardner, Jeremy Kleiner, Joseph Kosinski, Jerry Bruckheimer' },
        { id: 'frankenstein', title: 'Frankenstein', subtitle: 'Guillermo del Toro, J. Miles Dale, Scott Stuber' },
        { id: 'hamnet', title: 'Hamnet', subtitle: 'Liza Marshall, Pippa Harris, Nicolas Gonda, Steven Spielberg, Sam Mendes' },
        { id: 'marty-supreme', title: 'Marty Supreme', subtitle: 'Eli Bush, Ronald Bronstein, Josh Safdie, Anthony Katagas, Timothée Chalamet' },
        { id: 'one-battle-after-another', title: 'One Battle After Another', subtitle: 'Adam Somner, Sara Murphy, Paul Thomas Anderson' },
        { id: 'the-secret-agent', title: 'The Secret Agent', subtitle: 'Emilie Lesclaux' },
        { id: 'sentimental-value', title: 'Sentimental Value', subtitle: 'Maria Ekerhovd, Andrea Berentsen Ottmar' },
        { id: 'sinners', title: 'Sinners', subtitle: 'Zinzi Coogler, Sev Ohanian, Ryan Coogler' },
        { id: 'train-dreams', title: 'Train Dreams', subtitle: 'Marissa McMahon, Teddy Schwarzman, Will Janowitz, Ashley Schlaifer, Michael Heimler' },
      ],
    },
    {
      id: 'actor-leading',
      name: 'Actor in a Leading Role',
      nominees: [
        { id: 'timothee-chalamet', title: 'Timothée Chalamet', subtitle: 'Marty Supreme' },
        { id: 'leonardo-dicaprio', title: 'Leonardo DiCaprio', subtitle: 'One Battle After Another' },
        { id: 'ethan-hawke', title: 'Ethan Hawke', subtitle: 'Blue Moon' },
        { id: 'michael-b-jordan', title: 'Michael B. Jordan', subtitle: 'Sinners' },
        { id: 'wagner-moura', title: 'Wagner Moura', subtitle: 'The Secret Agent' },
      ],
    },
    {
      id: 'actor-supporting',
      name: 'Actor in a Supporting Role',
      nominees: [
        { id: 'benicio-del-toro', title: 'Benicio Del Toro', subtitle: 'One Battle After Another' },
        { id: 'jacob-elordi', title: 'Jacob Elordi', subtitle: 'Frankenstein' },
        { id: 'delroy-lindo', title: 'Delroy Lindo', subtitle: 'Sinners' },
        { id: 'sean-penn', title: 'Sean Penn', subtitle: 'One Battle After Another' },
        { id: 'stellan-skarsgard', title: 'Stellan Skarsgård', subtitle: 'Sentimental Value' },
      ],
    },
    {
      id: 'actress-leading',
      name: 'Actress in a Leading Role',
      nominees: [
        { id: 'jessie-buckley', title: 'Jessie Buckley', subtitle: 'Hamnet' },
        { id: 'rose-byrne', title: 'Rose Byrne', subtitle: "If I Had Legs I'd Kick You" },
        { id: 'kate-hudson', title: 'Kate Hudson', subtitle: 'Song Sung Blue' },
        { id: 'renate-reinsve', title: 'Renate Reinsve', subtitle: 'Sentimental Value' },
        { id: 'emma-stone', title: 'Emma Stone', subtitle: 'Bugonia' },
      ],
    },
    {
      id: 'actress-supporting',
      name: 'Actress in a Supporting Role',
      nominees: [
        { id: 'elle-fanning', title: 'Elle Fanning', subtitle: 'Sentimental Value' },
        { id: 'inga-ibsdotter-lilleaas', title: 'Inga Ibsdotter Lilleaas', subtitle: 'Sentimental Value' },
        { id: 'amy-madigan', title: 'Amy Madigan', subtitle: 'Weapons' },
        { id: 'wunmi-mosaku', title: 'Wunmi Mosaku', subtitle: 'Sinners' },
        { id: 'teyana-taylor', title: 'Teyana Taylor', subtitle: 'One Battle After Another' },
      ],
    },
    {
      id: 'animated-feature-film',
      name: 'Animated Feature Film',
      nominees: [
        { id: 'arco', title: 'Arco' },
        { id: 'elio', title: 'Elio' },
        { id: 'kpop-demon-hunters', title: 'Kpop Demon Hunters' },
        { id: 'little-amelie', title: 'Little Amélie or the Character of Rain' },
        { id: 'zootopia-2', title: 'Zootopia 2' },
      ],
    },
    {
      id: 'animated-short-film',
      name: 'Animated Short Film',
      nominees: [
        { id: 'butterfly', title: 'Butterfly' },
        { id: 'forevergreen', title: 'Forevergreen' },
        { id: 'girl-who-cried-pearls', title: 'The Girl Who Cried Pearls' },
        { id: 'retirement-plan', title: 'Retirement Plan' },
        { id: 'three-sisters', title: 'The Three Sisters' },
      ],
    },
    {
      id: 'casting',
      name: 'Casting',
      nominees: [
        { id: 'hamnet-casting', title: 'Hamnet', subtitle: 'Nina Gold' },
        { id: 'marty-supreme-casting', title: 'Marty Supreme', subtitle: 'Jennifer Venditti' },
        { id: 'one-battle-casting', title: 'One Battle After Another', subtitle: 'Cassandra Kulukundis' },
        { id: 'the-secret-agent-casting', title: 'The Secret Agent', subtitle: 'Gabriel Domingues' },
        { id: 'sinners-casting', title: 'Sinners', subtitle: 'Francine Maisler' },
      ],
    },
    {
      id: 'cinematography',
      name: 'Cinematography',
      nominees: [
        { id: 'frankenstein-cine', title: 'Frankenstein', subtitle: 'Dan Laustsen' },
        { id: 'marty-supreme-cine', title: 'Marty Supreme', subtitle: 'Darius Khondji' },
        { id: 'one-battle-cine', title: 'One Battle After Another', subtitle: 'Michael Bauman' },
        { id: 'sinners-cine', title: 'Sinners', subtitle: 'Autumn Durald Arkapaw' },
        { id: 'train-dreams-cine', title: 'Train Dreams', subtitle: 'Adolpho Veloso' },
      ],
    },
    {
      id: 'costume-design',
      name: 'Costume Design',
      nominees: [
        { id: 'avatar-fire-and-ash', title: 'Avatar: Fire and Ash', subtitle: 'Deborah L. Scott' },
        { id: 'frankenstein-costume', title: 'Frankenstein', subtitle: 'Kate Hawley' },
        { id: 'hamnet-costume', title: 'Hamnet', subtitle: 'Malgosia Turzanska' },
        { id: 'marty-supreme-costume', title: 'Marty Supreme', subtitle: 'Miyako Bellizzi' },
        { id: 'sinners-costume', title: 'Sinners', subtitle: 'Ruth E. Carter' },
      ],
    },
    {
      id: 'directing',
      name: 'Directing',
      nominees: [
        { id: 'chloe-zhao', title: 'Hamnet', subtitle: 'Chloé Zhao' },
        { id: 'josh-safdie', title: 'Marty Supreme', subtitle: 'Josh Safdie' },
        { id: 'paul-thomas-anderson', title: 'One Battle After Another', subtitle: 'Paul Thomas Anderson' },
        { id: 'joachim-trier', title: 'Sentimental Value', subtitle: 'Joachim Trier' },
        { id: 'ryan-coogler', title: 'Sinners', subtitle: 'Ryan Coogler' },
      ],
    },
    {
      id: 'documentary-feature',
      name: 'Documentary Feature Film',
      nominees: [
        { id: 'the-alabama-solution', title: 'The Alabama Solution', subtitle: 'Andrew Jarecki, Charlotte Kaufman' },
        { id: 'come-see-me', title: 'Come See Me in the Good Light', subtitle: 'Ryan White, Jessica Hargrave, Tig Notaro, Stef Willen' },
        { id: 'cutting-through-rocks', title: 'Cutting Through Rocks', subtitle: 'Sara Khaki, Mohammadreza Eyni' },
        { id: 'mr-nobody-against-putin', title: 'Mr. Nobody Against Putin', subtitle: 'Nominees TBD' },
        { id: 'the-perfect-neighbor', title: 'The Perfect Neighbor', subtitle: 'Geeta Gandbhir, Alisa Payne, Nikon Kwantu, Sam Bisbee' },
      ],
    },
    {
      id: 'documentary-short',
      name: 'Documentary Short Film',
      nominees: [
        { id: 'all-the-empty-rooms', title: 'All the Empty Rooms', subtitle: 'Joshua Seftel, Conall Jones' },
        { id: 'armed-only-with-a-camera', title: 'Armed Only with a Camera: The Life and Death of Brent Renaud', subtitle: 'Craig Renaud, Juan Arredondo' },
        { id: 'children-no-more', title: 'Children No More: “Were and Are Gone”', subtitle: 'Hilla Medalia, Sheila Nevins' },
        { id: 'the-devil-is-busy', title: 'The Devil Is Busy', subtitle: 'Christalyn Hampton, Geeta Gandbhir' },
        { id: 'perfectly-a-strangeness', title: 'Perfectly a Strangeness', subtitle: 'Alison McAlpine' },
      ],
    },
    {
      id: 'film-editing',
      name: 'Film Editing',
      nominees: [
        { id: 'f1-editing', title: 'F1', subtitle: 'Stephen Mirrione' },
        { id: 'marty-supreme-editing', title: 'Marty Supreme', subtitle: 'Ronald Bronstein, Josh Safdie' },
        { id: 'one-battle-editing', title: 'One Battle After Another', subtitle: 'Andy Jurgensen' },
        { id: 'sentimental-value-editing', title: 'Sentimental Value', subtitle: 'Olivier Bugge Coutté' },
        { id: 'sinners-editing', title: 'Sinners', subtitle: 'Michael P. Shawver' },
      ],
    },
    {
      id: 'international-feature',
      name: 'International Feature Film',
      nominees: [
        { id: 'the-secret-agent-intl', title: 'The Secret Agent', subtitle: 'Brazil' },
        { id: 'it-was-just-an-accident', title: 'It Was Just an Accident', subtitle: 'France' },
        { id: 'sentimental-value-intl', title: 'Sentimental Value', subtitle: 'Norway' },
        { id: 'sirat', title: 'Sirāt', subtitle: 'Spain' },
        { id: 'voice-of-hind-rajab', title: 'The Voice of Hind Rajab', subtitle: 'Tunisia' },
      ],
    },
    {
      id: 'live-action-short',
      name: 'Live Action Short Film',
      nominees: [
        { id: 'butchers-stain', title: "Butcher's Stain", subtitle: 'Meyer Levinson-Blount, Oron Caspi' },
        { id: 'friend-of-dorothy', title: 'A Friend of Dorothy', subtitle: 'Lee Knight, James Dean' },
        { id: 'jane-austen-period-drama', title: "Jane Austen's Period Drama", subtitle: 'Julia Aks, Steve Pinder' },
        { id: 'the-singers', title: 'The Singers', subtitle: 'Sam A. Davis, Jack Piatt' },
        { id: 'two-people-exchanging-saliva', title: 'Two People Exchanging Saliva', subtitle: 'Alexandre Singh, Natalie Musteata' },
      ],
    },
    {
      id: 'makeup-hairstyling',
      name: 'Makeup and Hairstyling',
      nominees: [
        { id: 'frankenstein-makeup', title: 'Frankenstein', subtitle: 'Mike Hill, Jordan Samuel, Cliona Furey' },
        { id: 'kokuho', title: 'Kokuho', subtitle: 'Kyoko Toyokawa, Naomi Hibino, Tadashi Nishimatsu' },
        { id: 'sinners-makeup', title: 'Sinners', subtitle: 'Ken Diaz, Mike Fontaine, Shunika Terry' },
        { id: 'the-smashing-machine', title: 'The Smashing Machine', subtitle: 'Kazu Hiro, Glen Griffin, Bjoern Rehbein' },
        { id: 'the-ugly-stepsister', title: 'The Ugly Stepsister', subtitle: 'Thomas Foldberg, Anne Cathrine Sauerberg' },
      ],
    },
    {
      id: 'original-score',
      name: 'Music (Original Score)',
      nominees: [
        { id: 'bugonia-score', title: 'Bugonia', subtitle: 'Jerskin Fendrix' },
        { id: 'frankenstein-score', title: 'Frankenstein', subtitle: 'Alexandre Desplat' },
        { id: 'hamnet-score', title: 'Hamnet', subtitle: 'Max Richter' },
        { id: 'one-battle-score', title: 'One Battle After Another', subtitle: 'Jonny Greenwood' },
        { id: 'sinners-score', title: 'Sinners', subtitle: 'Ludwig Göransson' },
      ],
    },
    {
      id: 'original-song',
      name: 'Music (Original Song)',
      nominees: [
        { id: 'dear-me', title: '“Dear Me”', subtitle: 'from Diane Warren: Relentless — Music/Lyric by Diane Warren' },
        { id: 'golden', title: '“Golden”', subtitle: 'from Kpop Demon Hunters — Music/Lyric by EJAE, Mark Sonnenblick, Joong Gyu Kwak, Yu Han Lee, Hee Dong Nam, Jeong Hoon Seo, Teddy Park' },
        { id: 'i-lied-to-you', title: '“I Lied To You”', subtitle: 'from Sinners — Music/Lyric by Raphael Saadiq, Ludwig Göransson' },
        { id: 'sweet-dreams-of-joy', title: '“Sweet Dreams Of Joy”', subtitle: 'from Viva Verdi! — Music/Lyric by Nicholas Pike' },
        { id: 'train-dreams-song', title: '“Train Dreams”', subtitle: 'from Train Dreams — Music by Nick Cave, Bryce Dessner; Lyric by Nick Cave' },
      ],
    },
    {
      id: 'production-design',
      name: 'Production Design',
      nominees: [
        { id: 'frankenstein-production', title: 'Frankenstein', subtitle: 'Tamara Deverell; Set Decoration: Shane Vieau' },
        { id: 'hamnet-production', title: 'Hamnet', subtitle: 'Fiona Crombie; Set Decoration: Alice Felton' },
        { id: 'marty-supreme-production', title: 'Marty Supreme', subtitle: 'Jack Fisk; Set Decoration: Adam Willis' },
        { id: 'one-battle-production', title: 'One Battle After Another', subtitle: 'Florencia Martin; Set Decoration: Anthony Carlino' },
        { id: 'sinners-production', title: 'Sinners', subtitle: 'Hannah Beachler; Set Decoration: Monique Champagne' },
      ],
    },
    {
      id: 'sound',
      name: 'Sound',
      nominees: [
        { id: 'f1-sound', title: 'F1', subtitle: 'Gareth John, Al Nelson, Gwendolyn Yates Whittle, Gary A. Rizzo, Juan Peralta' },
        { id: 'frankenstein-sound', title: 'Frankenstein', subtitle: 'Greg Chapman, Nathan Robitaille, Nelson Ferreira, Christian Cooke, Brad Zoern' },
        { id: 'one-battle-sound', title: 'One Battle After Another', subtitle: 'José Antonio García, Christopher Scarabosio, Tony Villaflor' },
        { id: 'sinners-sound', title: 'Sinners', subtitle: 'Chris Welcker, Benjamin A. Burtt, Felipe Pacheco, Brandon Proctor, Steve Boeddeker' },
        { id: 'sirat-sound', title: 'Sirāt', subtitle: 'Amanda Villavieja, Laia Casanovas, Yasmina Praderas' },
      ],
    },
    {
      id: 'visual-effects',
      name: 'Visual Effects',
      nominees: [
        { id: 'avatar-fire-and-ash-vfx', title: 'Avatar: Fire and Ash', subtitle: 'Joe Letteri, Richard Baneham, Eric Saindon, Daniel Barrett' },
        { id: 'f1-vfx', title: 'F1', subtitle: 'Ryan Tudhope, Nicolas Chevallier, Robert Harrington, Keith Dawson' },
        { id: 'jurassic-world-rebirth', title: 'Jurassic World Rebirth', subtitle: 'David Vickery, Stephen Aplin, Charmaine Chan, Neil Corbould' },
        { id: 'the-lost-bus', title: 'The Lost Bus', subtitle: 'Charlie Noble, David Zaretti, Russell Bowen, Brandon K. McLaughlin' },
        { id: 'sinners-vfx', title: 'Sinners', subtitle: 'Michael Ralla, Espen Nordahl, Guido Wolter, Donnie Dean' },
      ],
    },
    {
      id: 'adapted-screenplay',
      name: 'Writing (Adapted Screenplay)',
      nominees: [
        { id: 'bugonia-adapted', title: 'Bugonia', subtitle: 'Will Tracy' },
        { id: 'frankenstein-adapted', title: 'Frankenstein', subtitle: 'Guillermo del Toro' },
        { id: 'hamnet-adapted', title: 'Hamnet', subtitle: 'Chloé Zhao, Maggie O\'Farrell' },
        { id: 'one-battle-adapted', title: 'One Battle After Another', subtitle: 'Paul Thomas Anderson' },
        { id: 'train-dreams-adapted', title: 'Train Dreams', subtitle: 'Clint Bentley, Greg Kwedar' },
      ],
    },
    {
      id: 'original-screenplay',
      name: 'Writing (Original Screenplay)',
      nominees: [
        { id: 'blue-moon', title: 'Blue Moon', subtitle: 'Robert Kaplow' },
        { id: 'it-was-just-an-accident', title: 'It Was Just an Accident', subtitle: 'Jafar Panahi; Script collaborators: Nader Saïvar, Shadmehr Rastin, Mehdi Mahmoudian' },
        { id: 'marty-supreme-original', title: 'Marty Supreme', subtitle: 'Ronald Bronstein, Josh Safdie' },
        { id: 'sentimental-value-original', title: 'Sentimental Value', subtitle: 'Eskil Vogt, Joachim Trier' },
        { id: 'sinners-original', title: 'Sinners', subtitle: 'Ryan Coogler' },
      ],
    },
  ];

  const els = {
    categories: document.getElementById('categories'),
    statMatches: document.getElementById('stat-matches'),
    statPicks: document.getElementById('stat-picks'),
    statWinners: document.getElementById('stat-winners'),
    statOpen: document.getElementById('stat-open'),
    jump: document.getElementById('jump-select'),
    saveNote: document.getElementById('save-note'),
    progress: document.getElementById('match-progress'),
    summaryBar: document.querySelector('.summary-bar'),
  };

  let picks = loadState(STORAGE_KEYS.picks);
  let winners = loadState(STORAGE_KEYS.winners);

  function loadState(key) {
    try {
      const raw = localStorage.getItem(key);
      return raw ? JSON.parse(raw) : {};
    } catch (e) {
      console.warn('Could not parse stored state', e);
      return {};
    }
  }

  function persist() {
    localStorage.setItem(STORAGE_KEYS.picks, JSON.stringify(picks));
    localStorage.setItem(STORAGE_KEYS.winners, JSON.stringify(winners));
    flashSave();
  }

  function flashSave() {
    if (!els.saveNote) return;
    const now = new Date();
    els.saveNote.textContent = `Saved · ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
    els.saveNote.classList.add('show');
    setTimeout(() => els.saveNote.classList.remove('show'), 2000);
  }

  function getStatus(catId) {
    const pick = picks[catId];
    const win = winners[catId];
    if (pick && win) {
      return pick === win ? { label: 'Match', className: 'match' } : { label: 'No match', className: 'miss' };
    }
    if (pick || win) return { label: 'In progress', className: 'pending' };
    return { label: 'Not set', className: 'pending' };
  }

  let topbarRaf = null;

  function setStickyOffsetVar() {
    if (!els.summaryBar) return;
    const h = Math.ceil(els.summaryBar.getBoundingClientRect().height);
    document.documentElement.style.setProperty('--sticky-offset', `${h}px`);
  }

  function setCurrentCategory(catId) {
    const nameEl = document.getElementById('current-category-name');
    if (!nameEl) return;

    const section = document.getElementById(catId);
    const catName = section?.dataset?.catName || '—';
    nameEl.textContent = catName;
  }

  function updateActiveCategoryFromScroll() {
    setStickyOffsetVar();

    const sections = Array.from(document.querySelectorAll('.category'));
    if (!sections.length) return;

    const offset = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sticky-offset')) || 0;
    const threshold = offset + 12;

    let active = sections[0];
    for (const sec of sections) {
      if (sec.getBoundingClientRect().top - threshold <= 0) active = sec;
      else break;
    }
    setCurrentCategory(active.id);
  }

  function scheduleTopbarSync() {
    if (topbarRaf) return;
    topbarRaf = requestAnimationFrame(() => {
      topbarRaf = null;
      updateActiveCategoryFromScroll();
    });
  }

  function renderCategories() {
    els.categories.innerHTML = '';
    categories.forEach((cat) => {
      const status = getStatus(cat.id);
      const section = document.createElement('section');
      section.className = 'category';
      section.id = cat.id;
      section.dataset.catName = cat.name;
      section.innerHTML = `
        <div class="category-header">
          <h2>${cat.name}</h2>
          <div class="chip ${status.className}"><span class="status-dot ${status.className}"></span>${status.label}</div>
        </div>
        <div class="nominee-grid">
          ${cat.nominees.map((nom) => nomineeCard(cat, nom)).join('')}
        </div>
      `;
      els.categories.appendChild(section);
    });
    wireInputs();
    scheduleTopbarSync();
  }

  function nomineeCard(cat, nom) {
    const pickChecked = picks[cat.id] === nom.id ? 'checked' : '';
    const winnerChecked = winners[cat.id] === nom.id ? 'checked' : '';
    const isMatch = picks[cat.id] && winners[cat.id] && picks[cat.id] === nom.id && winners[cat.id] === nom.id;
    const cardClass = isMatch ? 'nominee-card match-card' : 'nominee-card';
    return `
      <article class="${cardClass}" data-cat="${cat.id}" data-nominee="${nom.id}">
        <div class="titles">
          <h3>${nom.title}</h3>
          ${nom.subtitle ? `<p>${nom.subtitle}</p>` : ''}
        </div>
        <div class="choice-row">
          <label class="pill">
            <input type="radio" name="pick-${cat.id}" value="${nom.id}" data-cat="${cat.id}" data-kind="pick" ${pickChecked} />
            <span>Your pick</span>
          </label>
          <label class="pill winner">
            <input type="radio" name="winner-${cat.id}" value="${nom.id}" data-cat="${cat.id}" data-kind="winner" ${winnerChecked} />
            <span>Winner</span>
          </label>
        </div>
      </article>
    `;
  }

  function wireInputs() {
    els.categories.querySelectorAll('input[data-kind]').forEach((input) => {
      input.addEventListener('click', (event) => {
        const { cat, kind } = event.target.dataset;
        const value = event.target.value;

        // Allow unselecting a selected radio by clicking it again.
        if (kind === 'pick') {
          if (picks[cat] === value) {
            delete picks[cat];
            event.target.checked = false;
          } else {
            picks[cat] = value;
          }
        } else {
          if (winners[cat] === value) {
            delete winners[cat];
            event.target.checked = false;
          } else {
            winners[cat] = value;
          }
        }

        persist();
        renderCategories();
        updateSummary();
        scheduleTopbarSync();
      });
    });
  }

  function updateSummary() {
    const total = categories.length;
    const picksCount = categories.filter((c) => picks[c.id]).length;
    const winnersCount = categories.filter((c) => winners[c.id]).length;
    const matches = categories.filter((c) => picks[c.id] && winners[c.id] && picks[c.id] === winners[c.id]).length;
    const open = total - winnersCount;

    els.statMatches.textContent = matches;
    els.statPicks.textContent = `${picksCount}/${total}`;
    els.statWinners.textContent = `${winnersCount}/${total}`;
    els.statOpen.textContent = open;

    const pct = Math.round((matches / total) * 100);
    els.progress.style.width = `${pct}%`;
    els.progress.parentElement.setAttribute('aria-valuenow', pct.toString());
  }

  function populateJump() {
    if (!els.jump) return;
    els.jump.innerHTML = '<option value="">— Jump to category —</option>' +
      categories.map((c) => `<option value="${c.id}">${c.name}</option>`).join('');
    els.jump.addEventListener('change', (e) => {
      const targetId = e.target.value;
      if (!targetId) return;
      const node = document.getElementById(targetId);
      if (node) {
        node.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  }

  function wireControls() {
    window.addEventListener('storage', (evt) => {
      if (evt.key === STORAGE_KEYS.picks || evt.key === STORAGE_KEYS.winners) {
        picks = loadState(STORAGE_KEYS.picks);
        winners = loadState(STORAGE_KEYS.winners);
        renderCategories();
        updateSummary();
        scheduleTopbarSync();
      }
    });

    window.addEventListener('scroll', scheduleTopbarSync, { passive: true });
    window.addEventListener('resize', scheduleTopbarSync);
    scheduleTopbarSync();
  }

  populateJump();
  renderCategories();
  updateSummary();
  wireControls();
})();