Merge pull request #700 from DynamiteBob17/fix-speech-bubble-hidden-in-background

Fix/ speech bubble no longer hidden behind background

Author: tonybaloney

media/pets.css

@@ -1,14 +1,12 @@
-/*
- * z-index values:
- * 1: backgroundEffectCanvas
- * 2: background
- * 3: petCanvasContainer canvas, ballCanvas, img.pet
- * 4: foregroundEffectCanvas
- * 5: foreground
- * 999: collision
- */
-
 :root {
+	--background-effect-canvas-z-index: 1;
+	--background-z-index: 2;
+	--pet-canvas-container-z-index: 3; /* petCanvasContainer canvas, ballCanvas, img.pet */
+	--bubble-z-index: 4;
+	--foreground-effect-canvas-z-index: 5;
+	--foreground-z-index: 6;
+	--collision-z-index: 999;
+
 	--container-paddding: 20px;
 	--input-padding-vertical: 6px;
 	--input-padding-horizontal: 4px;
@@ -37,7 +35,7 @@ body {
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 5;
+	z-index: var(--foreground-z-index);
 	background-attachment: fixed;
 	background-repeat: repeat-x;
 	background-position: bottom left;
@@ -49,7 +47,7 @@ body {
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 2;
+	z-index: var(--background-z-index);
 	background-attachment: fixed;
 	background-repeat: repeat-x;
 	background-position: bottom left;
@@ -140,17 +138,17 @@ textarea::placeholder {
 	position: fixed;
 	bottom: 0;
 	left: 0;
-	z-index: 3;
+	z-index: var(--pet-canvas-container-z-index);
 }
 
 #ballCanvas {
-	z-index: 3;
+	z-index: var(--pet-canvas-container-z-index);
 }
 #foregroundEffectCanvas {
-	z-index: 4 !important;
+	z-index: var(--foreground-effect-canvas-z-index) !important;
 }
 #backgroundEffectCanvas {
-	z-index: 1 !important;
+	z-index: var(--background-effect-canvas-z-index) !important;
 }
 
 img.pet {
@@ -160,15 +158,15 @@ img.pet {
 	left: 0px;
 	right: 0px;
 	bottom:0px;
-	z-index: 3;
+	z-index: var(--pet-canvas-container-z-index);
 }
 
 .collision {
 	position: absolute;
 	left: 0px;
 	right: 0px;
 	bottom:0px;
-	z-index: 999;
+	z-index: var(--collision-z-index);
 }
 
 .bubble {
@@ -182,6 +180,7 @@ img.pet {
 	border: 2px solid #333;
 	border-radius: 10px;
 	padding: 10px 0;
+	z-index: var(--bubble-z-index);
 }
 
 .bubble-nano {