diff --git a/index.html b/index.html index d2a541a..6d1f5db 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,74 @@ color: #ff4444 !important; text-shadow: 0 0 10px rgba(255, 68, 68, 0.5) !important; } + + .game-over-screen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.9); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + backdrop-filter: blur(10px); + } + + .game-over-content { + text-align: center; + color: white; + font-family: 'Courier New', monospace; + } + + .game-over-content h1 { + font-size: 4rem; + color: #ff4444; + text-shadow: 0 0 20px rgba(255, 68, 68, 0.8); + margin-bottom: 30px; + animation: pulse 2s infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } + } + + .score-display { + font-size: 1.5rem; + margin-bottom: 40px; + } + + .score-display div { + margin: 10px 0; + } + + .score-display span { + color: #00ff88; + text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); + } + + .restart-btn { + background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%); + border: none; + color: white; + padding: 15px 30px; + font-size: 1.2rem; + font-family: 'Courier New', monospace; + font-weight: bold; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s ease; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); + box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3); + } + + .restart-btn:hover { + background: linear-gradient(135deg, #ff6666 0%, #ff0000 100%); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 68, 68, 0.5); + }
@@ -80,6 +148,17 @@ + +