Add an option to make the ground opaque

macrovision.css

@@ -538,4 +538,18 @@ body.toggle-height-bars .height-bar,
     overflow: hidden;
     clip: rect(0,0,0,0);
     border: 0;
-  }
+}
+
+.bottom-cover {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 10vh;
+    left: 0%;
+    top: calc(100% - 51px);
+    background: black;
+}
+
+body.toggle-bottom-cover .bottom-cover {
+    display: inline-block;
+}

macrovision.html

@@ -159,6 +159,10 @@
           <input type="checkbox" id="options-world-show-scale-sliders">
           <label for="options-world-show-entity-glow">Scale sliders</label>
         </div>
+        <div class="options-row">
+          <input type="checkbox" id="options-world-show-bottom-cover">
+          <label for="options-world-show-bottom-cover">Opaque ground</label>
+        </div>
 
         <div class="options-label">
           Auto-sizing mode
@@ -221,6 +225,7 @@
       </div>
       <canvas id="display">
       </canvas>
+      <div class="bottom-cover"></div>
     </div>
   </div>
   <a href="https://docs.google.com/forms/d/e/1FAIpQLScRC-okDZ3FtzDTkbqSrpj5_OGD-1Vl-VYizOK3QM6quus11g/viewform?usp=sf_link" class="corner-ribbon bottom-right">Submit your<br>character</a>

macrovision.js

@@ -1022,6 +1022,10 @@ document.addEventListener("DOMContentLoaded", () => {
         document.body.classList[e.target.checked ? "add" : "remove"]("toggle-scale-sliders");
     });
 
+    document.querySelector("#options-world-show-bottom-cover").addEventListener("input", e => {
+        document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-cover");
+    });
+
     document.querySelector("#options-order-forward").addEventListener("click", e => {
         if (selected) {
             entities[selected.dataset.key].priority += 1;