feat: home hero+genres, fix Android queue desync via song ID verification

Home view:
- Add hero card (random pick from recent+frequent combined pool)
- Add genre browser chips (sorted by song count, tap = shuffle-play)

Android sync fix:
- Add currentId to getState() snapshot so JS can verify song identity
- onReady: reset stale localStorage queue when native song ID mismatches
- onTrackChanged: reject stale old-queue callbacks by ID verification
- onPlaybackStateChanged safety net: ID-guard prevents wrong-queue index corruption
- connectToService: call updateStateSnapshot() before onReady so getState() is never empty

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

styles.css

@@ -117,6 +117,27 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 /* ── HOME GREETING ── */
 .home-greeting{font-size:22px;font-weight:700;color:var(--text);padding:18px 0 6px;letter-spacing:-.3px}
 
+/* ── HOME HERO ── */
+.home-hero{position:relative;height:170px;border-radius:14px;overflow:hidden;margin-top:8px;background:var(--surface2);display:none}
+.home-hero.loaded{display:block}
+.home-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) blur(8px);transform:scale(1.08)}
+.home-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.88) 0%,rgba(7,7,15,.3) 100%);display:flex;align-items:center;padding:16px 20px;gap:16px}
+.home-hero-cover{width:100px;height:100px;border-radius:9px;object-fit:cover;flex-shrink:0;box-shadow:0 6px 20px rgba(0,0,0,.55);cursor:pointer;transition:transform .2s}
+.home-hero-cover:hover{transform:scale(1.04)}
+.home-hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
+.home-hero-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
+.home-hero-title{font-size:18px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.home-hero-artist{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
+.home-hero-artist:hover{color:var(--text)}
+.home-hero-play{width:42px;height:42px;border-radius:50%;background:var(--accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,opacity .15s;margin-left:auto}
+.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)}
+
 /* ── SECTION ── */
 .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:24px}
 .section-title{font-size:16px;font-weight:700}