Improve metronome mobile fit and modal-driven pause/resume lifecycle

[Copilot]

Metronome UI was overflowing on phone-sized screens, and opening metronome modals did not reliably pause/resume playback with updated settings.
This PR tightens the mobile metronome layout and adds deterministic modal lifecycle handling so playback state remains coherent without duplicate timers/players.

• Mobile metronome layout fit

  • Added focused @media overrides for small screens (max-width: 430px) and short viewports (max-height: 760px).
  • Reduced visual block height, pendulum dimensions/offsets, beats/meta spacing, and action button footprint so core controls remain visible on mobile.

• Modal-aware playback lifecycle

  • Added modal playback guards:
    • pauseMetronomeForModal()
    • isAnyMetroModalOpen()
    • resumeMetronomeAfterModal()
  • Opening metronome settings/help now auto-pauses when running.
  • Closing modals resumes only if playback was active before opening.

• State consistency and no duplicate runtime loops

  • Introduced modal session flags:
    • metroWasRunningBeforeModal
    • metroPausedByModal
  • Resume path checks both prior running state and current runtime state before startMetronome(), preventing duplicate timer/audio loop startup.

function resumeMetronomeAfterModal(){
  if (isAnyMetroModalOpen()) return;
  const shouldResume = metroPausedByModal && metroWasRunningBeforeModal;
  metroPausedByModal = false;
  metroWasRunningBeforeModal = false;
  if (shouldResume && !metroRunning) startMetronome();
}

[Copilot]

Pull request overview

This PR improves the metronome experience on small mobile screens and makes metronome playback pause/resume deterministically around metronome settings/help modals to avoid inconsistent state and duplicate runtime loops.

Changes:

• Added mobile-focused @media overrides to reduce metronome layout footprint on narrow/short screens.
• Introduced modal-aware metronome lifecycle helpers (pauseMetronomeForModal, isAnyMetroModalOpen, resumeMetronomeAfterModal) plus session flags to resume only when appropriate.
• Wired modal open/close handlers to pause on open and conditionally resume on close.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
styles.css	Adds small-screen metronome layout overrides to prevent overflow and keep core controls visible on mobile.
app.js	Adds modal pause/resume guards and state flags to keep metronome playback coherent across settings/help modal interactions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.