feat(shop): animated backgrounds — system-wide cosmetic + picker

A new cosmetic family: a fixed-position overlay painted behind every
page of the app, switchable from the profile shop. 4 free presets + 6
paid (250-1200 coins) so the new economy has another sink. Every
animation respects prefers-reduced-motion and falls back to its static
gradient.

Catalogue (migration 035):
  free:   none, gradient-soft, dots, dark
  paid:   gradient-flow, grid, bubbles, stars (mid)
          aurora, nebula                       (premium)

Backend:
  • migration 035 adds users.active_background + rebuilds shop_items
    CHECK to include 'background' (standard SQLite 'new + copy + swap')
    and seeds 10 items
  • shopController.getMyActive returns { background: { slug } } and
    activateItem handles type='background' (stores bare slug in
    active_background) + skips the user_purchases check for price=0
    so free presets work for everyone without per-user rows
  • routes/shop validate schema lets 'background' through

Frontend:
  • api.js applyCosmetics injects <div id='ls-bg-fx'> at body start
    and toggles class to bg-<slug>. Cleared backgrounds remove the
    element so dark→light transitions don't leave artifacts.
  • ls.css gains a self-contained 'ANIMATED BACKGROUNDS' block:
    keyframes per animated slug (ls-bg-flow, ls-bg-grid-scan,
    ls-bg-bubble-rise, ls-bg-stars-twinkle, ls-bg-aurora-spin,
    ls-bg-nebula-pan) wrapped in a prefers-reduced-motion kill-switch.
    Same .bg-<slug> classes are reused for the .bg-preview swatches.
  • profile.html shop:
    - new 'Фоны' filter button between Рамки and Титулы
    - _renderItemPreview type='background' draws a real 56-aspect swatch
      (same CSS as the page bg — what you see is what you apply)
    - _isItemActive matches by slug for background type
    - free items (price===0) treated as auto-owned in render so users
      can apply them without a fake 'purchase' step

Verified: getMyActive returns { background: { slug: 'nebula' } } after
flipping users.active_background; activate path updates the row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

js/api.js

@@ -1078,6 +1078,23 @@ async function applyCosmetics() {
     const c = await getMyActiveCosmetics();
     if (!c) return;
 
+    // ── Background: paint a fixed div behind the whole UI ──
+    // The element is created on demand and reused on subsequent calls
+    // so swapping backgrounds doesn't flash.
+    if (c.background && c.background.slug && c.background.slug !== 'none') {
+      let bgEl = document.getElementById('ls-bg-fx');
+      if (!bgEl) {
+        bgEl = document.createElement('div');
+        bgEl.id = 'ls-bg-fx';
+        document.body.insertBefore(bgEl, document.body.firstChild);
+      }
+      bgEl.className = 'bg-' + String(c.background.slug).replace(/[^a-z0-9_-]/gi, '');
+    } else {
+      // Active bg was cleared — remove the element if present.
+      const bgEl = document.getElementById('ls-bg-fx');
+      if (bgEl) bgEl.remove();
+    }
+
     // ── Frame: apply CSS to sidebar avatar on every page ──
     if (c.frame && c.frame.css) {
       const navAv = document.getElementById('nav-avatar');