Fix browser compatibility

public/src/css/songbg.css

@@ -187,16 +187,23 @@
 	top: 0;
 	width: calc(292px * var(--scale));
 	height: calc(425px * var(--scale));
+	transform: translateY(calc(360px * var(--scale)));
+}
+#tetsuo-in,
+#hana-in{
+	width: 100%;
+	height: 100%;
 	background-repeat: no-repeat;
 	background-size: calc(292px * var(--scale) * 2);
 	background-position-y: calc(-425px * var(--frame) * var(--scale));
-	transform: translateY(calc(360px * var(--scale)));
 }
 #tetsuo{
 	left: calc(173px * var(--scale));
 }
 #hana{
 	right: calc(178px * var(--scale));
+}
+#hana-in{
 	background-position-x: calc(-292px * var(--scale));
 }
 #mikoshi{
@@ -205,9 +212,13 @@
 	left: calc(390px * var(--scale));
 	width: calc(553px * var(--scale));
 	height: calc(416px * var(--scale));
+	transform: translateY(calc(461px * var(--scale)));
+}
+#mikoshi-in{
+	width: 100%;
+	height: 100%;
 	background-repeat: no-repeat;
 	background-size: contain;
-	transform: translateY(calc(461px * var(--scale)));
 }
 #flowers1,
 #flowers2{
@@ -215,11 +226,15 @@
 	top: calc(218px * var(--scale));
 	width: calc(483px * var(--scale));
 	height: calc(159px * var(--scale));
+	transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
+}
+#flowers1-in,
+#flowers2-in{
+	width: 100%;
+	height: 100%;
 	background-repeat: no-repeat;
 	background-size: calc(483px * var(--scale));
 	background-position-y: calc(-159px * var(--frame) * var(--scale));
-	transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
-	--frame: 0;
 }
 #flowers1{
 	left: 0;
@@ -239,48 +254,71 @@
 	transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
 	transform: translateY(var(--low));
 }
-@keyframes tetsuohana-dance1{
+@keyframes tetsuohana-dance{
 	0%{transform: translateY(var(--low))}
 	50%{transform: translateY(0)}
-}
+	100%{transform: translateY(0)}
-@keyframes tetsuohana-dance2{
-	50%{transform: translateY(0)}
-	100%{transform: translateY(var(--low))}
 }
 @keyframes tetsuohana-failed1{
 	0%{transform: translateY(calc(10px * var(--scale)))}
 	50%{transform: translateY(0)}
+	100%{transform: translateY(0)}
 }
 @keyframes tetsuohana-failed2{
+	0%{transform: translateY(0)}
+	49%{transform: translateY(0)}
 	50%{transform: translateY(calc(5px * var(--scale)))}
 	100%{transform: translateY(calc(15px * var(--scale)))}
 }
 @keyframes tetsuohana-flowers{
-	0%{--frame: 0}
+	0%{background-position-y: 0}
-	50%{--frame: 1}
+	50%{background-position-y: calc(-159px * var(--scale))}
-	100%{--frame: 2}
+	100%{background-position-y: calc(-318px * var(--scale))}
+}
+@keyframes tetsuohana-mikoshi{
+	0%{transform: translateY(calc(425px * var(--scale)))}
+	100%{transform: translateY(0)}
 }
 #tetsuohana.dance #tetsuo,
 #tetsuohana.dance #hana{
 	--frame: 1;
 	transform: translateY(var(--low));
-	animation: 0.5s ease-out tetsuohana-dance1 infinite, 0.5s ease-in tetsuohana-dance2 infinite;
+	animation: 0.5s ease-out tetsuohana-dance infinite forwards;
+}
+#tetsuohana.dance #tetsuo-in,
+#tetsuohana.dance #hana-in{
+	transform: translateY(0);
+	animation: 0.5s ease-out tetsuohana-dance infinite forwards reverse;
 }
 #tetsuohana.dance #flowers1,
 #tetsuohana.dance #flowers2{
 	transform: translateY(0) scaleX(var(--flip));
-	animation: 0.25s 0.4s tetsuohana-flowers both;
 	transition: 0.34s transform ease-out;
 }
+#tetsuohana.dance #flowers1-in,
+#tetsuohana.dance #flowers2-in{
+	animation: 0.25s 0.4s step-end tetsuohana-flowers both;
+}
+#tetsuohana.dance #mikoshi-out{
+	animation: 0.4s 0.4s ease-out tetsuohana-mikoshi both;
+}
 #tetsuohana.dance #mikoshi{
 	transform: translateY(var(--low));
-	transition: 0.4s 0.4s transform ease-out;
+	animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards;
-	animation: 0.5s 0.8s ease-out tetsuohana-dance1 infinite, 0.5s 0.8s ease-in tetsuohana-dance2 infinite;
+}
+#tetsuohana.dance #mikoshi-in{
+	transform: translateY(0);
+	animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards reverse;
 }
 #tetsuohana.failed #tetsuo,
 #tetsuohana.failed #hana{
 	--frame: 2;
 	top: calc(26px * var(--scale));
 	transform: translateY(calc(46px * var(--scale)));
-	animation: 1.25s ease-out tetsuohana-failed1 both infinite, 1.25s ease-in tetsuohana-failed2 both infinite;
+	animation: 1.25s ease-out tetsuohana-failed1 forwards infinite;
+}
+#tetsuohana.failed #tetsuo-in,
+#tetsuohana.failed #hana-in{
+	transform: translateY(0);
+	animation: 1.25s ease-in tetsuohana-failed2 forwards infinite;
 }

public/src/js/scoresheet.js

@@ -129,10 +129,20 @@ class Scoresheet{
 			var id = ["flowers1", "flowers2", "mikoshi", "tetsuo", "hana"]
 			var bg = [flowersBg, flowersBg, mikoshiBg, tetsuoHanaBg, tetsuoHanaBg]
 			for(var i = 0; i < id.length; i++){
+				if(id[i] === "mikoshi"){
+					var divOut = document.createElement("div")
+					divOut.id = id[i] + "-out"
+					this.tetsuoHana.appendChild(divOut)
+				}else{
+					var divOut = this.tetsuoHana
+				}
 				var div = document.createElement("div")
 				div.id = id[i]
-				div.style.backgroundImage = bg[i]
+				var divIn = document.createElement("div")
-				this.tetsuoHana.appendChild(div)
+				divIn.id = id[i] + "-in"
+				divIn.style.backgroundImage = bg[i]
+				div.appendChild(divIn)
+				divOut.appendChild(div)
 			}
 			this.game.appendChild(this.tetsuoHana)
 		}