Server-Seite ueberarbeitet, und die Spielauswahl kommt jetzt aus gamedig

LS25 fehlte, aber nicht nur LS25: die Auswahl im Panel war eine von Hand
gepflegte Liste mit neunzehn Eintraegen, und fuenf davon gab es bei gamedig
gar nicht — "arkse", "ark", "sevendaystodie", "minecraftbe" und "terraria".
Wer eines davon auswaehlte, bekam einen Server, der dauerhaft offline stand,
ohne dass irgendwo ein Grund stand. Die echten IDs heissen ase, sdtd, mbe und
terrariatshock.

Also nicht LS25 nachtragen, sondern die Liste abschaffen: sie kommt jetzt aus
gamedig selbst, 360 Eintraege, sortiert, mit Suche. Jedes Update bringt neue
Spiele automatisch mit. Dazu der Standard-Query-Port als Vorschlag, sobald man
ein Spiel waehlt. Bestehende Eintraege mit den toten IDs werden beim Start
einmalig umgebogen.

Farming Simulator hat noch eine zweite Huerde: der Server antwortet nur mit
Zugangs-Code, und den hat queryServer nie durchgereicht. LS25 waere also auch
mit richtiger ID offline geblieben. Jetzt gibt es eine Spalte dafuer, das Feld
erscheint nur bei Spielen, die einen brauchen (Farming Simulator, Terraria —
bei Satisfactory optional), und Speichern ohne Code wird abgelehnt statt
stillschweigend hingenommen. Der Code steht nicht in der oeffentlichen API.

Nebenbei aufgefallen: input[type=password] war im CSS nirgends erfasst. Das
erste solche Feld kam voellig ungestylt daher.

Die /server-Seite dazu:

- Auslastungs-Balken mit eigener Farbe statt des XP-Balkens vom Level-System.
  Gruen frei, gelb ab 80 Prozent, rot voll — die Zahl steht rechtsbuendig,
  mittig laege sie bei 50 Prozent genau auf der Fuellkante.
- Map, Version und Ping als Chips. Vorher standen sie mit Punkten getrennt in
  der Statuszeile und wurden auf dem Handy zu Brei.
- Wer gerade drauf ist. Die Namen holt der Monitor ohnehin schon fuers Embed,
  auf der Seite standen sie nur nirgends.
- Welches Spiel es ueberhaupt ist. Das stand nirgends ausser im Emoji.
- Offline-Karten waren bisher leer bis auf das Wort. Jetzt steht dort, seit
  wann — soweit der Verlauf reicht, sonst gar nichts statt einer Schaetzung.
- Zeitachse und Peak-Linie am Verlauf. Eine Flaeche ohne Bezugspunkt sagt
  nicht, wie hoch hoch ist.
- Plaetze insgesamt in der Uebersicht oben.

Geprueft: Token speichern und aendern, Spielnamen inklusive unbekannter ID,
Token-Bedarf pro Protokoll, Liste ohne Doppler, alle Icon-Schluessel gegen
gamedig, "zuletzt online" ignoriert Offline-Proben, und die Migration mit einer
Datenbank im alten Stand. Beide Seiten am laufenden Frontend angesehen, auch
auf Handybreite.

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

frontend/src/style.css

@@ -1063,7 +1063,7 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
 }
 .field textarea:focus { border-color: var(--neon); }
 
-.field select, .field input[type="text"] {
+.field select, .field input[type="text"], .field input[type="password"] {
     width: 100%;
     background: #0d0d0d;
     border: 1px solid rgba(255, 255, 255, .12);
@@ -1074,9 +1074,9 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
     outline: none;
     transition: border-color .2s;
 }
-.field select:focus, .field input[type="text"]:focus { border-color: var(--neon); }
+.field select:focus, .field input[type="text"]:focus, .field input[type="password"]:focus { border-color: var(--neon); }
 /* Auf breiten Schirmen sollen Eingabefelder nicht über die halbe Seite laufen */
-.field select, .field input[type="text"], .field input[type="number"] { max-width: 44rem; }
+.field select, .field input[type="text"], .field input[type="password"], .field input[type="number"] { max-width: 44rem; }
 .field select option { background: #0d0d0d; }
 
 /* Schalter links, Beschriftung und Hinweis rechts gestapelt — vorher klebten
@@ -1242,7 +1242,7 @@ label.toggle {
 .settings-section + .settings-section,
 .settings-content > .settings-section { margin-bottom: 1.25rem; }
 
-.btn, .btn-login, .field select, .field input[type="text"], .field textarea,
+.btn, .btn-login, .field select, .field input[type="text"], .field input[type="password"], .field textarea,
 .search, .user-chip, .feedback-float, .sha, .card-project, .card-delete,
 .commits th:first-child, .commits th:last-child {
     border-radius: 8px;
@@ -1257,14 +1257,14 @@ label.toggle {
 .card-images.n1 a { border-radius: 10px; }
 
 /* Inputs: ruhigerer Grundzustand, klarer Fokus */
-.field select, .field input[type="text"], .field textarea {
+.field select, .field input[type="text"], .field input[type="password"], .field textarea {
     background: rgba(0, 0, 0, .35);
     border-color: rgba(255, 255, 255, .09);
 }
-.field select:hover, .field input[type="text"]:hover, .field textarea:hover {
+.field select:hover, .field input[type="text"]:hover, .field input[type="password"]:hover, .field textarea:hover {
     border-color: rgba(255, 255, 255, .2);
 }
-.field select:focus, .field input[type="text"]:focus, .field textarea:focus {
+.field select:focus, .field input[type="text"]:focus, .field input[type="password"]:focus, .field textarea:focus {
     border-color: var(--neon);
     box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
 }
@@ -1539,6 +1539,15 @@ label.toggle {
 .gamesel-item:hover, .gamesel-item.active { background: var(--bg3); color: var(--neon); }
 .gamesel-id { color: var(--muted2); font-family: var(--mono); font-size: .75rem; }
 .gamesel-item:hover .gamesel-id { color: var(--muted); }
+.gamesel-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Schluessel = das Spiel antwortet nur mit Zugangs-Code */
+.gamesel-key { margin-left: .35rem; font-size: .8em; }
+/* Die Liste hat ueber 350 Eintraege — wer nichts findet, soll wissen, dass
+   noch mehr da ist, statt die Auswahl fuer vollstaendig zu halten. */
+.gamesel-rest {
+    padding: .4rem .7rem; border-top: 1px solid var(--border);
+    font-family: var(--mono); font-size: .68rem; color: var(--muted2);
+}
 
 /* Durchsuchbare Kanal-/Rollen-Auswahl (ersetzt die nativen Dropdowns) */
 .picksel { position: relative; max-width: 44rem; }
@@ -1787,10 +1796,81 @@ label.toggle {
 .srv-status.on { color: var(--success); }
 .srv-status.off { color: #f23f43; }
 .srv-ping, .srv-map { color: var(--muted2); }
+/* Das Spiel gehoert zum Server, nicht zum Zustand — deshalb neutral, damit es
+   die gruene/rote Statusfarbe nicht mitnimmt. Bewusst ohne Trennstrich: die
+   Zeile bricht auf schmalen Schirmen um, und dann staende der Strich als
+   einzelnes Zeichen am Zeilenanfang. Abstand und Farbe trennen genug. */
+.srv-spiel { color: var(--muted2); margin-left: .5rem; }
 .srv-count { font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--neon); white-space: nowrap; }
 .srv-count-max { font-size: 1.1rem; color: var(--muted2); }
 .srv-bar { margin-top: .9rem; }
-.srv-chart { width: 100%; height: 90px; margin-top: 1rem; display: block; }
+
+/* Auslastung: eigener Balken statt des XP-Balkens vom Level-System. Die Farbe
+   sagt, ob noch jemand reinkommt — gruen frei, gelb eng, rot voll. */
+.srv-cap {
+    position: relative; height: 22px; margin-top: .9rem;
+    border: 1px solid var(--border); border-radius: 6px;
+    background: var(--bg3); overflow: hidden;
+}
+.srv-cap-fill { height: 100%; transition: width .5s ease; }
+.srv-cap.frei .srv-cap-fill { background: linear-gradient(90deg, #1f7a4d, var(--success)); }
+.srv-cap.eng  .srv-cap-fill { background: linear-gradient(90deg, #8a6a10, var(--neon)); }
+.srv-cap.voll .srv-cap-fill { background: linear-gradient(90deg, #8a2326, #f23f43); }
+.srv-cap-pct {
+    /* Rechtsbuendig, nicht mittig: mittig laege die Zahl bei 50 % genau auf der
+       Fuellkante und waere halb hell, halb dunkel unterlegt. Rechts steht sie
+       fast immer auf dem ruhigen Grund. */
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
+    padding-right: .55rem;
+    font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
+    color: #fff; font-weight: 600;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8);
+}
+
+/* Map, Version, Ping — was der Server ueber sich verraet */
+.srv-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
+.srv-chip {
+    display: inline-flex; align-items: center; gap: .3rem;
+    font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
+    color: var(--muted); background: var(--bg3);
+    border: 1px solid var(--border); border-radius: 5px; padding: .22rem .5rem;
+}
+.srv-weg {
+    font-family: var(--mono); font-size: .7rem; color: #f23f43;
+    margin-top: .9rem; letter-spacing: .04em;
+}
+
+/* Spielerliste — dieselben Namen, die auch im Discord-Embed stehen */
+.srv-spieler { margin-top: 1rem; }
+.srv-spieler-kopf {
+    display: inline-flex; align-items: center; gap: .4rem;
+    font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
+    text-transform: uppercase; color: var(--muted2);
+}
+.srv-namen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
+.srv-name-chip {
+    font-family: var(--mono); font-size: .68rem; color: var(--text);
+    background: var(--bg3); border: 1px solid var(--border);
+    border-radius: 5px; padding: .2rem .5rem;
+    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.srv-mehr {
+    font-family: var(--mono); font-size: .68rem; color: var(--neon);
+    background: none; border: 1px dashed var(--border); border-radius: 5px;
+    padding: .2rem .5rem; cursor: pointer;
+}
+.srv-mehr:hover { border-color: var(--neon); }
+
+.srv-chart { width: 100%; height: 100px; margin-top: 1rem; display: block; }
+/* Ohne non-scaling-stroke zieht preserveAspectRatio="none" den Strich mit in
+   die Breite und aus dem Strichmuster wird ein durchgezogener Balken. */
+.srv-chart-peak { stroke: var(--muted2); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
+/* Zeitachse unter dem Verlauf: ohne die weiss man nicht, welche Seite jetzt ist */
+.srv-achse {
+    display: flex; justify-content: space-between;
+    font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
+    text-transform: uppercase; color: var(--muted2); margin-top: .15rem;
+}
 .srv-stats {
     display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
     font-family: var(--mono); font-size: .62rem; letter-spacing: .15em;