fix: weggegebene Flasche beendet den Tauchgang + HUD-Feinschliff

Bug: wer die getragene Flasche im Tauchgang weggab, konnte unbegrenzt
weiteratmen. Der Client hielt nur eine Slot-Nummer, die niemand mehr
gegenpruefte, und der Sync lief ins Leere. ox_inventory feuert clientseitig bei
jeder Inventar-Aenderung - dort wird jetzt beim Server nachgefragt. Ist die
Flasche weg, kommt die Ausruestung ab; wurde sie nur umsortiert, bindet der
Client auf den neuen Slot um, damit Aufraeumen im Inventar nichts kostet.

HUD:
- Werte aus den Uhren heraus in eine zweite Zeile: Druck, Lampe und Tiefe
  liegen jetzt auf einer Linie. In der Skala kollidierte die Zahl mit
  Strichen, Zeiger und rotem Bereich
- Skaliert mit der Bildschirmhoehe (entworfen auf 1080p), sonst waere das in
  festen Pixeln gebaute HUD auf 1440p und 4K deutlich zu klein.
  config.hudScale kommt als Geschmacksregler obendrauf
- Zustandsklassen sitzen jetzt am HUD statt an den Uhren, weil Instrument und
  Wert in getrennten Grid-Zellen liegen

README-Renderings nachgezogen.

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

docs/gen-hud-svg.mjs

@@ -25,9 +25,9 @@ const F = "'Segoe UI',Roboto,system-ui,sans-serif";
 // Masse spiegeln das Grid aus style.css: padding 14/20, column-gap 20,
 // Uhr 96, Ring 92, Beschriftung darunter, Lampe in Zeile 2.
 const PAD_X = 20, PAD_Y = 14, DIAL = 96, GAUGE = 92, GAP = 20;
-const ROW1 = 112, ROW_GAP = 6, LAMP_H = 23;
+const ROW1 = 96, ROW_GAP = 6, ROW2 = 32, LAMP_H = 23;
 const PW = PAD_X * 2 + DIAL * 2 + GAUGE + GAP * 2;
-const PH = PAD_Y * 2 + ROW1 + ROW_GAP + LAMP_H;
+const PH = PAD_Y * 2 + ROW1 + ROW_GAP + ROW2;
 
 const W = 560, H = PH + 70;
 const PX = (W - PW) / 2, PY = (H - PH) / 2;
@@ -36,7 +36,8 @@ const LEFT_CX = PX + PAD_X + DIAL / 2;
 const RIGHT_CX = PX + PW - PAD_X - DIAL / 2;
 const MID_CX = PX + PW / 2;
 const DIAL_CY = PY + PAD_Y + DIAL / 2;
-const GAUGE_CY = PY + PAD_Y + ROW1 / 2;
+const GAUGE_CY = PY + PAD_Y + 2 + GAUGE / 2;
+const ROW2_Y = PY + PAD_Y + ROW1 + ROW_GAP; // Werte und Lampe auf einer Linie
 
 const n = (v) => Number(v.toFixed(2));
 const rad = (d) => ((d - 90) * Math.PI) / 180;
@@ -45,7 +46,7 @@ const pt = (cx, cy, r, d) => [cx + r * Math.cos(rad(d)), cy + r * Math.sin(rad(d
 const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
 
 /** Zeigerinstrument. 270-Grad-Skala, unten offen - wie ein echtes Finimeter. */
-function dial(cx, cy, { value, max, unit, label, zoneFrom, zoneTo, needleColour, valueColour, decimals = 0 }) {
+function dial(cx, cy, { value, max, zoneFrom, zoneTo, needleColour }) {
     // 96px Uhr, Geometrie aus dem viewBox 0 0 100 100 skaliert
     const k = DIAL / 100;
     const R = 42 * k, A0 = -135, SWEEP = 270;
@@ -72,12 +73,15 @@ function dial(cx, cy, { value, max, unit, label, zoneFrom, zoneTo, needleColour,
     s += `<line x1="${n(tailX)}" y1="${n(tailY)}" x2="${n(tipX)}" y2="${n(tipY)}" stroke="${needleColour}" stroke-width="2.6" stroke-linecap="round"/>`;
     s += `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(3.4 * k)}" fill="${needleColour}"/>`;
 
-    s += `<text x="${n(cx)}" y="${n(cy + 22)}" text-anchor="middle" font-size="16" font-weight="700" fill="${valueColour}" font-family="${F}">${value.toFixed(decimals)}<tspan font-size="10" font-weight="500" fill="${C.muted}" dx="2">${unit}</tspan></text>`;
-    s += `<text x="${n(cx)}" y="${n(cy + DIAL / 2 + 13)}" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}" font-family="${F}">${label}</text>`;
-
     return s;
 }
 
+/** Beschriftung und Wert unter der Uhr - eine Zeile mit der Lampe. */
+function readout(cx, label, value, unit, colour) {
+    return `<text x="${n(cx)}" y="${n(ROW2_Y + 9)}" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}" font-family="${F}">${label}</text>
+  <text x="${n(cx)}" y="${n(ROW2_Y + 28)}" text-anchor="middle" font-size="19" font-weight="700" fill="${colour}" font-family="${F}">${value}<tspan font-size="11" font-weight="500" fill="${C.muted}" dx="3">${unit}</tspan></text>`;
+}
+
 function build({ file, title, oxygen, capacity, level, depth, depthLimit, pressure, reservePressure, lamp, deep }) {
     const ratio = Math.max(0, Math.min(1, oxygen / capacity));
     const ringColour = level === 'danger' ? C.danger : level === 'warn' ? C.warn : C.accent;
@@ -101,11 +105,8 @@ function build({ file, title, oxygen, capacity, level, depth, depthLimit, pressu
   <rect width="${W}" height="${H}" fill="url(#water)"/>
   <rect x="${n(PX)}" y="${n(PY)}" width="${PW}" height="${PH}" rx="16" fill="${C.panel}" fill-opacity="0.72" stroke="${C.muted}" stroke-opacity="0.18"/>
 
-  ${dial(LEFT_CX, DIAL_CY, {
-        value: pressure, max: 300, unit: 'bar', label: 'DRUCK',
-        zoneFrom: 0, zoneTo: reservePressure,
-        needleColour: pressureColour, valueColour: pressureColour
-    })}
+  ${dial(LEFT_CX, DIAL_CY, { value: pressure, max: 300, zoneFrom: 0, zoneTo: reservePressure, needleColour: pressureColour })}
+  ${readout(LEFT_CX, 'DRUCK', Math.round(pressure), 'bar', pressureColour)}
 
   <g transform="rotate(-90 ${n(MID_CX)} ${n(GAUGE_CY)})">
     <circle cx="${n(MID_CX)}" cy="${n(GAUGE_CY)}" r="${n(R)}" fill="none" stroke="${C.muted}" stroke-opacity="0.16" stroke-width="${n(SW)}" stroke-linecap="round"/>
@@ -114,15 +115,12 @@ function build({ file, title, oxygen, capacity, level, depth, depthLimit, pressu
   <text x="${n(MID_CX)}" y="${n(GAUGE_CY - 1)}" text-anchor="middle" font-size="21" font-weight="600" fill="${ringColour}" font-family="${F}">${fmt(oxygen)}</text>
   <text x="${n(MID_CX)}" y="${n(GAUGE_CY + 15)}" text-anchor="middle" font-size="9" font-weight="600" letter-spacing="1.4" fill="${C.muted}" font-family="${F}">LUFT</text>
 
-  ${dial(RIGHT_CX, DIAL_CY, {
-        value: depth, max: 100, unit: 'm', label: 'TIEFE', decimals: 1,
-        zoneFrom: depthLimit, zoneTo: 100,
-        needleColour: depthColour, valueColour: depthColour
-    })}
+  ${dial(RIGHT_CX, DIAL_CY, { value: depth, max: 100, zoneFrom: depthLimit, zoneTo: 100, needleColour: depthColour })}
+  ${readout(RIGHT_CX, 'TIEFE', depth.toFixed(1), 'm', depthColour)}
 
-  <rect x="${n(MID_CX - 43)}" y="${n(PY + PAD_Y + ROW1 + ROW_GAP)}" width="86" height="${LAMP_H}" rx="8" fill="${lampColour}" fill-opacity="${lamp ? 0.15 : 0.1}"/>
-  <circle cx="${n(MID_CX - 29)}" cy="${n(PY + PAD_Y + ROW1 + ROW_GAP + LAMP_H / 2)}" r="4" fill="${lampColour}"/>
-  <text x="${n(MID_CX - 19)}" y="${n(PY + PAD_Y + ROW1 + ROW_GAP + LAMP_H / 2 + 3.5)}" font-size="10" font-weight="600" letter-spacing="1.2" fill="${lampColour}" font-family="${F}">LAMPE</text>
+  <rect x="${n(MID_CX - 43)}" y="${n(ROW2_Y + (ROW2 - LAMP_H) / 2)}" width="86" height="${LAMP_H}" rx="8" fill="${lampColour}" fill-opacity="${lamp ? 0.15 : 0.1}"/>
+  <circle cx="${n(MID_CX - 29)}" cy="${n(ROW2_Y + ROW2 / 2)}" r="4" fill="${lampColour}"/>
+  <text x="${n(MID_CX - 19)}" y="${n(ROW2_Y + ROW2 / 2 + 3.5)}" font-size="10" font-weight="600" letter-spacing="1.2" fill="${lampColour}" font-family="${F}">LAMPE</text>
 </svg>
 `;