styling: emdgame notif

src/css/game.css

@@ -131,6 +131,7 @@
     display: flex;
     flex-direction: column;
     border: 10px solid white;
+    border-radius: 10px;
 }
 
 .container-first .content .quiz h2 {
@@ -141,16 +142,23 @@
 }
 
 .container-first #scoreAlert {
-    margin-bottom: 30px;
+    text-align: center;
     padding: 10px;
     color: #ffdf12;
     font-size: 40px;
-    bottom: 40px;
+    bottom: 22px;
+    background-color: #101010f5;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
 }
 
+.container-first #scoreAlert.border {
+    width: 550px;
+    border: 6px solid white;
+    border-radius: 10px;
+}
+
 .container-first .content .quiz #btn-answer {
     color: #ffdf12;
     display: flex;

src/css/style.css

@@ -132,15 +132,11 @@ input:-webkit-autofill {
     justify-content: space-around;
     align-items: center;
     height: 100dvh;
-    /* Hapus properti background dari sini dan pindahkan ke ::before */
-
-    /* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
     position: relative;
-    /* Pastikan konten di dalam container ada di atas latar */
     z-index: 1;
 }
 
-/* Pseudo-element untuk menampung gambar latar transparan */
+
 .container-board::before {
     content: "";
     position: absolute;
@@ -148,19 +144,12 @@ input:-webkit-autofill {
     left: 0;
     right: 0;
     bottom: 0;
-
-    /* Pindahkan properti background Anda ke sini */
     background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     image-rendering: pixelated;
-
-    /* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
     opacity: 1;
-    /* Contoh nilai 40% transparan */
-
-    /* Pindahkan latar ini ke lapisan paling bawah */
     z-index: -1;
 }
 

src/js/firstperson.js

@@ -129,6 +129,7 @@ function showScore(){
     bgm.play()
     setTimeout(()=> {
         const alerts = document.getElementById("scoreAlert")
+        alerts.classList.add("border")
         alerts.textContent = `you scored ${score} out of 200 !`;
     }, 200);
     setTimeout(()=> {