Meters work properly, mostly

game.js

@@ -2854,6 +2854,7 @@ function update(lines = [])
 function stylePercentage(name, storage) {
   document.getElementById(name).innerHTML = name + ": " + transformNumbers(volume(storage.amount,unit,false));
   let meterPos = 150 - storage.amount / storage.limit * 150;
+  meterPos = meterPos < 0 ? 0 : meterPos;
   document.querySelector("#" + name + "Meter .fill").style.setProperty("transform", "translate(0px, " + Math.round(meterPos) + "px)");
 }
 

stroll.html

@@ -34,6 +34,9 @@
         <!-- external svg is such a pain in the ass -->
 
         <div class="meter" id="cumMeter">
+          <div class="meterLabel">
+            CUM
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
@@ -44,6 +47,9 @@
         </div>
 
         <div class="meter" id="femcumMeter">
+          <div class="meterLabel">
+            FEMCUM
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
@@ -54,6 +60,9 @@
         </div>
 
         <div class="meter" id="milkMeter">
+          <div class="meterLabel">
+            MILK
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
@@ -64,6 +73,9 @@
         </div>
 
         <div class="meter" id="gasMeter">
+          <div class="meterLabel">
+            GAS
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
@@ -74,6 +86,9 @@
         </div>
 
         <div class="meter" id="pissMeter">
+          <div class="meterLabel">
+            PISS
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
@@ -84,6 +99,9 @@
         </div>
 
         <div class="meter" id="scatMeter">
+          <div class="meterLabel">
+            SCAT
+          </div>
           <div class="fill">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
               <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4

style.css

@@ -500,6 +500,26 @@ ul {
   display: inline-block;
 }
 
+.meter .meterLabel {
+  z-index: 1;
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  background: none;
+  mix-blend-mode: exclusion;
+  transform: rotate(0deg);
+  font-size: 12px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.meter .fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .meter #waveShape {
   animation-name: waveAction;
   animation-iteration-count: infinite;