feat: scrobbling, genre grid redesign with detail view + play button

- Scrobble to Navidrome on auto-advance (Android) and track end (web)
  so type=recent and type=frequent are accurate for the hero card
- Genre section: pill chips → grid cards with colored left bars
- Top 15 genres shown by default (sorted by song count), expand toggle
- Genre card: click → genre detail page with full song list
- Genre card: hover play button → shuffle-play without navigating
- Genre detail page reuses album-detail layout (back btn, stats, song list)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

styles.css

@@ -133,10 +133,17 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .home-hero-play:hover{transform:scale(1.1)}
 @media(min-width:700px){.home-hero{height:200px}.home-hero-cover{width:130px;height:130px}.home-hero-title{font-size:22px}.home-hero-info{gap:6px}}
 
-/* ── GENRE CHIPS ── */
-.genre-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 4px}
-.genre-chip{padding:6px 13px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
-.genre-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
+/* ── GENRE GRID ── */
+.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:2px 0 4px}
+.genre-card{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:background .15s,border-color .15s;overflow:hidden}
+.genre-card:hover{background:var(--surface3,var(--surface));border-color:var(--accent)}
+.genre-card-bar{width:4px;height:32px;border-radius:3px;flex-shrink:0}
+.genre-card-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
+.genre-card-play{width:28px;height:28px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .15s,transform .15s}
+.genre-card:hover .genre-card-play{opacity:1}
+.genre-card-play:hover{transform:scale(1.1)}
+@media(max-width:600px){.genre-card-play{opacity:1}}
+@media(min-width:700px){.genre-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
 
 /* ── SECTION ── */
 .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:24px}