Mobile UI: tighten spacing, panel styling, and resume audio on visibility

[jeromepotter]

Motivation

• Improve the mobile UX by reducing excessive vertical whitespace below the sequencer and keeping the NOTES/GATES/ORBS header buttons inside their containers.
• Ensure dark mode surfaces for panels and planet chips are visibly dark instead of leaving light containers.
• Restore the audio engine when the page is returned to (visibility/focus/interaction) so sound resumes reliably on mobile after backgrounding.

Description

• Add new CSS variables and switch side panels / planet list to use them (--panel-surface, --panel-surface-strong, --panel-border-soft) so panels render appropriately in light and dark modes.
• Align panel headers left and allow header rows to wrap on narrow viewports by changing .panel-title to left alignment and adding wrapping rules for summary.panel-header-row on mobile.
• Tighten mobile spacing by reducing the canvas minimum height from window.innerHeight * 0.8 to window.innerHeight * 0.68 and reducing gaps/padding for #controls-footer, #side-controls, and #planet-list-wrap so the planet chips and submenus sit closer under the sequencer.
• Add an AudioEngine.resume helper and a resumeAudioEngineIfNeeded caller wired to visibilitychange, pageshow, focus, touchstart, and pointerdown events so the audio context is reinitialized or resumed when the app regains focus.

Testing

• Launched a local static server (python -m http.server 8000) and ran a Playwright script to load the page at a mobile viewport (390x844) and capture a screenshot (artifacts/mobile-layout.png), and the page loaded successfully and produced the screenshot.
• No unit tests were added; visual/interactive smoke test via Playwright succeeded.

---

Codex Task

[netlify]

✅ Deploy Preview for les-cercles ready!

Name	Link
🔨 Latest commit	6326e86
🔍 Latest deploy log	https://app.netlify.com/projects/les-cercles/deploys/6969de7a8d39f600088f1a73
😎 Deploy Preview	https://deploy-preview-14--les-cercles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.