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>

src/views.js

@@ -46,6 +46,7 @@ export function navigate(page, data=null) {
   if(page==='artist-detail'      && data) loadArtistDetail(data);
   if(page==='artist-all-songs'   && data) loadArtistAllSongs(data);
   if(page==='album-detail'       && data) loadAlbumDetail(data);
+  if(page==='genre-detail'       && data) loadGenreDetail(data);
   if(page==='itunes-album-detail'&& data) loadItunesAlbumDetail(data);
   if(page==='new-releases')  loadNewReleases();
   if(page==='playlists')     loadPlaylists();
@@ -156,26 +157,60 @@ async function loadHeroCard() {
   } catch { /* hero is optional — silent fail */ }
 }
 
+const _GENRE_COLORS = ['#e8445a','#3b82f6','#f97316','#22c55e','#a855f7','#06b6d4','#eab308','#ec4899','#14b8a6','#f43f5e','#8b5cf6','#84cc16'];
+function _genreColor(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return _GENRE_COLORS[h % _GENRE_COLORS.length];
+}
+
+let _allGenres = [];
+let _genresExpanded = false;
+const GENRE_LIMIT = 15;
+
 async function loadGenreSection() {
-  const el = document.getElementById('home-genres');
+  const el   = document.getElementById('home-genres');
+  const more = document.getElementById('home-genres-more');
   if (!el) return;
   try {
     const r = await api('getGenres');
-    const genres = (r.genres?.genre || [])
+    _allGenres = (r.genres?.genre || [])
       .filter(g => (g.songCount || 0) > 0)
       .sort((a, b) => (b.songCount || 0) - (a.songCount || 0));
-    el.innerHTML = '';
-    genres.forEach(g => {
-      const chip = document.createElement('button');
-      chip.className = 'genre-chip';
-      chip.textContent = g.value;
-      chip.title = `${g.songCount} Titel`;
-      chip.onclick = () => playGenre(g.value);
-      el.appendChild(chip);
-    });
+    _renderGenres();
+    if (_allGenres.length > GENRE_LIMIT && more) more.style.display = '';
   } catch { el.style.display = 'none'; }
 }
 
+function _renderGenres() {
+  const el = document.getElementById('home-genres');
+  if (!el) return;
+  const list = _genresExpanded ? _allGenres : _allGenres.slice(0, GENRE_LIMIT);
+  el.innerHTML = '';
+  list.forEach(g => {
+    const card = document.createElement('div');
+    card.className = 'genre-card';
+    card.title = `${g.songCount} Titel`;
+    const color = _genreColor(g.value);
+    card.innerHTML = `
+      <div class="genre-card-bar" style="background:${color}"></div>
+      <div class="genre-card-name">${esc(g.value)}</div>
+      <button class="genre-card-play" title="Shuffle spielen">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+      </button>`;
+    card.querySelector('.genre-card-play').onclick = (e) => { e.stopPropagation(); playGenre(g.value); };
+    card.onclick = () => navigate('genre-detail', g);
+    el.appendChild(card);
+  });
+}
+
+export function toggleAllGenres() {
+  _genresExpanded = !_genresExpanded;
+  const more = document.getElementById('home-genres-more');
+  if (more) more.textContent = _genresExpanded ? 'Weniger' : 'Alle anzeigen';
+  _renderGenres();
+}
+
 async function playGenre(genre) {
   try {
     const r = await api('getSongsByGenre', `&genre=${encodeURIComponent(genre)}&count=200`);
@@ -187,6 +222,37 @@ async function playGenre(genre) {
   } catch {}
 }
 
+async function loadGenreDetail(g) {
+  const genre = g.value || g;
+  const color  = _genreColor(genre);
+  document.getElementById('genre-detail-name').textContent = genre;
+  document.getElementById('genre-detail-stats').textContent = g.songCount ? `${g.songCount} Titel` : '';
+  const coverWrap = document.getElementById('genre-cover-wrap');
+  coverWrap.style.background = `linear-gradient(135deg, ${color}33, ${color}11)`;
+  coverWrap.style.borderRadius = '10px';
+  coverWrap.style.border = `2px solid ${color}55`;
+  document.getElementById('genre-back-btn').onclick = () => _navGoBack();
+
+  const list = document.getElementById('genre-songs');
+  list.innerHTML = '<div class="spinner"></div>';
+
+  let songs = [];
+  try {
+    const r = await api('getSongsByGenre', `&genre=${encodeURIComponent(genre)}&count=500`);
+    songs = r.songsByGenre?.song || [];
+  } catch { list.innerHTML = '<p style="color:var(--danger)">Fehler beim Laden</p>'; return; }
+
+  document.getElementById('genre-detail-stats').textContent = `${songs.length} Titel`;
+  document.getElementById('btn-play-genre').onclick = () => {
+    const shuffled = [...songs].sort(() => Math.random() - 0.5);
+    playQueue(shuffled, 0);
+    navigate('now-playing');
+  };
+
+  list.innerHTML = '';
+  songs.forEach((s, i) => list.appendChild(makeSongItem(s, i, songs)));
+}
+
 export async function loadAlbumRow(id, method, extra) {
   const c = document.getElementById(id);
   if(!c) return;