feat(web+android): Musik-Match wird zum Duell mit Anzeigetafel

Statt eines Prozentrings ("wie aehnlich seid ihr") zeigt die Ansicht jetzt, wer
worin gewinnt: fuenf Kategorien mit je einem Sieger und ein Gesamtstand.
Hoerzeit, Vielfalt, Tiefe (Plays je Kuenstler), Nachteule (Anteil vor 5 Uhr) und
Entdeckerdrang (Anteil exklusiver Kuenstler) — bewusst Kennzahlen zur Hoerweise
statt zur Menge, sonst gewinnt immer, wer laenger dabei ist.

Am laufenden Dienst mit zwei gegensaetzlichen Nutzern geprueft: 60 Plays a 300 s
ergeben 5,0 h und Tiefe 12,0, jeder dritte Play nachts ergibt 33 %, 60 von 62
exklusiven Kuenstlern ergeben 97 % — Endstand 3:2. Das JSON-Feldschema wurde
gegen das Kotlin-Modell abgeglichen.

Dazu drei Fixes im selben Bereich:
- Die Web-Ansicht lebte nur von Inline-Stilen mit festen Flex-Verhaeltnissen und
  zerfiel am Desktop. Jetzt ein Raster mit eigenen Klassen, eine Spalte am Handy,
  zwei ab 780 px; das Fenster musste dafuer von 720 auf 940 px, sonst haette die
  zweite Spalte nie ausgeloest.
- Gemeinsame Songs wurden ueber song_id abgeglichen und fielen auseinander,
  sobald eine Datei umbenannt wurde. Jetzt normalisierter Titel+Kuenstler.
- Media-Session: die Metadaten wurden feldweise mutiert (gegen Kachel-Flackern
  unter Windows), ueber MPRIS kam davon nichts an — Plasma-Widgets zeigten
  dauerhaft den zuerst gespielten Titel. Bei echtem Titelwechsel jetzt ein neues
  MediaMetadata, sonst weiter in-place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

styles.css

@@ -1125,3 +1125,40 @@ button:focus{outline:none}
 .abs-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
 .abs-vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}
 @media(max-width:768px){.abs-mini-bar{bottom:80px;height:var(--player-h)}}
+
+/* ─── MUSIK-DUELL (Vergleich zweier Nutzer) ─────────────────────────────────
+   Vorher lebte die Ansicht ausschliesslich von Inline-Stilen mit festen Flex-Verhaeltnissen.
+   Am Handy ging das auf, am Desktop zerfiel es. Jetzt ein Raster: eine Spalte auf schmalen
+   Schirmen, zwei ab 780 px — die Anzeigetafel bleibt in beiden Faellen ueber die volle Breite. */
+.cmp-body{display:grid;grid-template-columns:1fr;gap:26px;align-content:start}
+.cmp-wide{grid-column:1/-1}
+@media(min-width:780px){
+  .cmp-body{grid-template-columns:1fr 1fr;gap:26px 30px}
+}
+.cmp-head{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
+.cmp-name{font-size:15px;font-weight:800;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cmp-score{font-size:30px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums}
+.cmp-verdict{text-align:center;font-size:13px;color:var(--text2);margin-bottom:16px}
+/* Eine Kategoriezeile: Wert · Name · Wert. Feste Aussenspalten, damit die Zahlen untereinander
+   stehen und die Mitte den Rest bekommt — genau das fehlte vorher. */
+.cmp-cat{display:grid;grid-template-columns:minmax(64px,1fr) auto minmax(64px,1fr);align-items:center;
+  gap:10px;padding:9px 10px;border-radius:10px}
+.cmp-cat+.cmp-cat{margin-top:4px}
+.cmp-cat-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;
+  font-weight:800;white-space:nowrap}
+.cmp-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
+.cmp-val.a{text-align:right}
+.cmp-val.b{text-align:left}
+.cmp-val.win{color:var(--accent)}
+.cmp-val.lose{color:var(--text3)}
+.cmp-cat.win-a{background:linear-gradient(90deg,rgba(232,160,32,.13),transparent 70%)}
+.cmp-cat.win-b{background:linear-gradient(270deg,rgba(232,160,32,.13),transparent 70%)}
+/* Tauziehen-Zeile fuer gemeinsame Kuenstler */
+.cmp-row{display:grid;grid-template-columns:34px 1fr minmax(90px,1.4fr) 1fr 34px;align-items:center;
+  gap:8px;padding:6px 0}
+.cmp-row-name{text-align:center;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
+  text-overflow:ellipsis;min-width:0}
+.cmp-num{font-size:12px;color:var(--text2);font-weight:700;font-variant-numeric:tabular-nums}
+.cmp-bar{height:6px;border-radius:3px;background:var(--accent)}
+.cmp-track{display:flex;align-items:center;gap:10px;padding:6px 0;min-width:0}
+.cmp-track img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}