document.addEventListener('DOMContentLoaded', () => {
  if (!window.mwTideData) return;

  window.mwTideData.forEach(card => {
    if (!card.selector.includes('card-')) return;

    const fillEls = document.querySelectorAll(`${card.selector} svg #mw-tide-fill`);
    if (!fillEls.length) return;

    const rawPercent = Math.min(Math.max(card.percentBetweenTides, 0), 1);
    let visualPercent = rawPercent;
    if (card.type !== 'dial') {
      visualPercent = 1 - rawPercent;
    }

    const baseY = 517.59;
    const maxHeight = 89;

    const fillHeight = visualPercent * maxHeight;
    const newY = baseY - fillHeight;

    fillEls.forEach(fillEl => {
      fillEl.setAttribute('y', newY.toFixed(2));
      fillEl.setAttribute('height', fillHeight.toFixed(2));
    });

    console.log(`🌊 [TIDE-FILL] Card ${card.selector} updated: Raw=${(rawPercent*100).toFixed(1)}% ➔ Visual=${(visualPercent*100).toFixed(1)}%`);
  });
});