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/style.css

@@ -32,7 +32,12 @@ body {
     position: absolute;
     left: 50%;
     bottom: 7vh;
-    transform: translateX(-50%) translateY(0);
+    /* Skaliert mit der Bildschirmhöhe, sonst wäre das in festen Pixeln
+       entworfene HUD auf 1440p und 4K winzig. --hud-scale setzt script.js.
+       transform-origin unten mittig, damit das Panel beim Skalieren zentriert
+       bleibt und der Abstand zum unteren Rand gleich wirkt. */
+    transform: translateX(-50%) scale(var(--hud-scale, 1));
+    transform-origin: bottom center;
     display: grid;
     grid-template-columns: auto auto auto;
     grid-template-rows: auto auto;
@@ -51,7 +56,7 @@ body {
 
 #hud.hidden {
     opacity: 0;
-    transform: translateX(-50%) translateY(14px);
+    transform: translateX(-50%) scale(var(--hud-scale, 1)) translateY(14px);
     pointer-events: none;
 }
 
@@ -65,21 +70,19 @@ body {
 
 /* --- Zeigerinstrumente --- */
 
-.dial {
-    grid-row: 1;
+.dial-face {
+    width: 96px;
+    height: 96px;
+}
+
+/* Werte stehen unter den Uhren, nicht darin: auf 96 px kollidiert eine Zahl in
+   der Skala mit Strichen, Zeiger und rotem Bereich. Zusammen mit der Lampe
+   ergeben sie eine durchgehende zweite Zeile. */
+.readout {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 5px;
-}
-
-#pressure { grid-column: 1; }
-#depth { grid-column: 3; }
-
-.dial-face {
-    position: relative;
-    width: 96px;
-    height: 96px;
+    gap: 2px;
 }
 
 .dial-face svg {
@@ -87,7 +90,7 @@ body {
     height: 100%;
 }
 
-.dial .face {
+.face {
     fill: var(--dial-face);
     stroke: rgba(148, 163, 184, 0.25);
     stroke-width: 1.5;
@@ -95,32 +98,32 @@ body {
 
 /* Skalenzahlen gibt es bewusst nicht: bei dieser Groesse liest die niemand.
    Der Zeiger zeigt die Tendenz, die Zahl in der Mitte den genauen Wert. */
-.dial .ticks line {
+.ticks line {
     stroke: #cbd5e1;
     stroke-opacity: 0.4;
     stroke-width: 1;
 }
 
-.dial .ticks line.major {
+.ticks line.major {
     stroke-opacity: 0.85;
     stroke-width: 1.6;
 }
 
-.dial .zone {
+.zone {
     fill: none;
     stroke: var(--danger);
     stroke-width: 3.5;
     stroke-opacity: 0.9;
 }
 
-.dial .needle line {
+.needle line {
     stroke: var(--text);
     stroke-width: 2.6;
     stroke-linecap: round;
     transition: stroke 260ms ease;
 }
 
-.dial .needle circle {
+.needle circle {
     fill: var(--text);
     transition: fill 260ms ease;
 }
@@ -128,21 +131,15 @@ body {
 /* Kein transform-origin hier: das rotate(winkel 50 50) im transform-Attribut
    bringt den Drehpunkt schon mit. Beides zusammen verschiebt den Zeiger aus der
    Uhr heraus - CSS rechnet die Origin nochmal obendrauf. */
-.dial .needle {
+.needle {
     transition: transform 260ms ease-out;
 }
 
-.dial-value {
-    position: absolute;
-    inset: 0;
+.value {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    /* In den offenen unteren Teil der Skala, damit die Zahl nicht am
-       Zeiger-Drehpunkt klebt - wie das Sichtfenster eines echten Instruments. */
-    padding-top: 36px;
-    font-size: 16px;
+    align-items: baseline;
+    gap: 3px;
+    font-size: 19px;
     font-weight: 700;
     font-variant-numeric: tabular-nums;
     line-height: 1;
@@ -150,31 +147,35 @@ body {
 }
 
 .unit {
-    font-size: 10px;
+    font-size: 11px;
     font-weight: 500;
     color: var(--muted);
 }
 
-/* Zeiger und Wert faerben sich, sobald der rote Bereich erreicht ist. */
-#pressure.alert .needle line,
-#depth.alert .needle line { stroke: var(--danger); }
-#pressure.alert .needle circle,
-#depth.alert .needle circle { fill: var(--danger); }
-#pressure.alert .dial-value,
-#depth.alert .dial-value { color: var(--danger); }
+/* Zeiger und Wert faerben sich, sobald der rote Bereich erreicht ist. Die
+   Klassen sitzen am HUD, weil Uhr und Wert in getrennten Grid-Zellen liegen. */
+#hud.pressure-alert #pressure-needle line { stroke: var(--danger); }
+#hud.pressure-alert #pressure-needle circle { fill: var(--danger); }
+#hud.pressure-alert #pressure-readout .value { color: var(--danger); }
 
-#depth.deep .dial-value { color: var(--warn); }
-#depth.deep .needle line { stroke: var(--warn); }
-#depth.deep .needle circle { fill: var(--warn); }
+#hud.depth-alert #depth-needle line { stroke: var(--danger); }
+#hud.depth-alert #depth-needle circle { fill: var(--danger); }
+#hud.depth-alert #depth-readout .value { color: var(--danger); }
+
+#hud.depth-deep #depth-needle line { stroke: var(--warn); }
+#hud.depth-deep #depth-needle circle { fill: var(--warn); }
+#hud.depth-deep #depth-readout .value { color: var(--warn); }
 
 /* --- Luft-Ring --- */
 
+/* Oben ausgerichtet: die 2px gleichen 96 gegen 92 Durchmesser aus, damit alle
+   drei Instrumente auf einer Achse liegen. */
 .gauge {
     position: relative;
     width: 92px;
     height: 92px;
-    grid-column: 2;
-    grid-row: 1;
+    align-self: start;
+    margin-top: 2px;
 }
 
 .gauge svg {
@@ -221,8 +222,6 @@ body {
 /* --- Lampe --- */
 
 .lamp {
-    grid-column: 2;
-    grid-row: 2;
     display: flex;
     align-items: center;
     gap: 6px;
@@ -260,7 +259,7 @@ body {
 #hud.danger .gauge { animation: pulse 1s ease-in-out infinite; }
 
 /* Tiefengrenze des Atemgases ueberschritten - Tiefenrausch laeuft. */
-#hud.overlimit #depth .dial-face { animation: pulse 1s ease-in-out infinite; }
+#hud.overlimit #depth-face { animation: pulse 1s ease-in-out infinite; }
 
 @keyframes pulse {
     0%, 100% { opacity: 1; }