Show game over as overlay on top of game screen

- Make gameover-screen a fixed overlay with semi-transparent background
- Removed 'screen' class from gameover-screen element
- Game scene remains visible behind game over overlay
This commit is contained in:
2026-03-20 07:55:36 -07:00
parent f9cafe630c
commit 45f6d0d0c3
3 changed files with 40 additions and 3 deletions
+32
View File
@@ -281,6 +281,38 @@ button:active {
color: #0f0;
}
/* Game Over Overlay */
#gameover-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
#gameover-screen.active {
display: flex;
}
#gameover-screen h2 {
font-size: 2rem;
margin-bottom: 20px;
}
#gameover-screen h3 {
font-size: 1.5rem;
margin: 20px 0;
}
#gameover-screen #final-scores {
margin: 30px 0;
}
/* Garbage row animation */
@keyframes shake {
0%, 100% { transform: translateX(0); }