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>

nui/script.js

@@ -10,20 +10,32 @@ const DIAL_SWEEP = 270;
 const DIAL_R = 42;
 
 const hud = document.getElementById('hud');
+
+// Das HUD ist auf 1080p entworfen. Ohne Nachskalieren waere es auf 1440p und 4K
+// deutlich zu klein, weil FiveM das NUI in der echten Bildschirmaufloesung
+// rendert. Der Faktor aus der Config kommt obendrauf.
+const DESIGN_HEIGHT = 1080;
+let configScale = 1;
+
+function applyScale() {
+    const scale = Math.min(2.5, Math.max(0.6, (window.innerHeight / DESIGN_HEIGHT) * configScale));
+    document.documentElement.style.setProperty('--hud-scale', scale.toFixed(3));
+}
+
+applyScale();
+window.addEventListener('resize', applyScale);
 const gaugeFill = document.getElementById('gauge-fill');
 const airValue = document.getElementById('air-value');
 const lamp = document.getElementById('lamp');
 
 const dials = {
     pressure: {
-        root: document.getElementById('pressure'),
         needle: document.getElementById('pressure-needle'),
         zone: document.getElementById('pressure-zone'),
         ticks: document.getElementById('pressure-ticks'),
         value: document.getElementById('pressure-value')
     },
     depth: {
-        root: document.getElementById('depth'),
         needle: document.getElementById('depth-needle'),
         zone: document.getElementById('depth-zone'),
         ticks: document.getElementById('depth-ticks'),
@@ -127,14 +139,14 @@ function render(state) {
     dials.pressure.value.textContent = String(Math.round(state.pressure ?? 0));
     setNeedle(dials.pressure, state.pressure ?? 0, maxPressure);
     setZone(dials.pressure, 0, state.reservePressure ?? 0, maxPressure);
-    dials.pressure.root.classList.toggle('alert', !!state.reserve);
+    hud.classList.toggle('pressure-alert', !!state.reserve);
 
     const depthScale = state.depthScale || 100;
     dials.depth.value.textContent = state.depth.toFixed(1);
     setNeedle(dials.depth, state.depth, depthScale);
     setZone(dials.depth, state.depthLimit, depthScale, depthScale);
-    dials.depth.root.classList.toggle('alert', !!state.overLimit);
-    dials.depth.root.classList.toggle('deep', !state.overLimit && !!state.deep);
+    hud.classList.toggle('depth-alert', !!state.overLimit);
+    hud.classList.toggle('depth-deep', !state.overLimit && !!state.deep);
 
     lamp.classList.toggle('hidden', !state.hasLamp);
     lamp.classList.toggle('on', !!state.lamp);
@@ -146,6 +158,11 @@ window.addEventListener('message', (event) => {
     if (!data) return;
 
     if (data.action === 'labels') {
+        if (typeof data.scale === 'number' && data.scale !== configScale) {
+            configScale = data.scale;
+            applyScale();
+        }
+
         labels.air.textContent = data.air;
         labels.depth.textContent = data.depth;
         labels.pressure.textContent = data.pressure;