Render roofs below current elevation level in different color

public/assets/css/map.css

@@ -393,7 +393,7 @@ g[data-y="76"] { --i: 76; }
 }
 
 .floor {
-  fill: white;
+  /* fill: white; */
   /* fill: inherit; */
 }
 

public/assets/css/radial.css

@@ -37,7 +37,7 @@ use[href="#hex"] {
 .terrain .floor {
   display: inline;
   opacity: 1;
-  fill: #ffffff;
+  /* fill: #ffffff; */
   /* fill-opacity: 0.5; */
   /* fill: url(#asterisk); */
   stroke: none;
@@ -63,6 +63,11 @@ use[href="#hex"] {
   display: none;
 }
 
+.building use.floor {
+  fill: gray;
+  display: inline;
+}
+
 [data-view-elevation="-1"] [class*="elevation"] {
   display: none;
 }
@@ -79,21 +84,43 @@ use[href="#hex"] {
   display: inline;
 }
 
+[data-view-elevation="-1"] .building use.floor {
+  display: none;
+}
+
+[data-view-elevation="-1"] .building use.floor.elevation-basement {
+  fill: white;
+  display: inline;
+}
+
+[data-view-elevation="0"] .building use.floor.elevation-0 {
+  fill: white;
+}
+
 [data-view-elevation="1"] .building .elevation-1 {
   display: inline;
 }
 
-[data-view-elevation="2"] .building .elevation-2,
-[data-view-elevation="2"] .building .elevation-1:last-child {
+[data-view-elevation="1"] .building use.floor.elevation-1 {
+  fill: white;
+}
+
+[data-view-elevation="2"] .building .elevation-2 {
   display: inline;
 }
 
-[data-view-elevation="3"] .building .elevation-3,
-[data-view-elevation="3"] .building .elevation-1:last-child,
-[data-view-elevation="3"] .building .elevation-2:last-child {
+[data-view-elevation="2"] .building use.floor.elevation-2 {
+  fill: white;
+}
+
+[data-view-elevation="3"] .building .elevation-3 {
   display: inline;
 }
 
+[data-view-elevation="3"] .building use.floor.elevation-3 {
+  fill: white;
+}
+
 #tree .trunk {
   fill: brown;
 }