/* --- Core Layout --- */
html, body { height: 100%; margin: 0; overflow: hidden; background-color: #0c0c1e; }
body { font-family: 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; }
#game-container { position: relative; width: clamp(300px, 90vmin, 600px); height: clamp(300px, 90vmin, 600px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 15px; }
#game-canvas, #background-canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 15px;
}
#game-canvas { z-index: 10; background-color: transparent; cursor: pointer; }
#background-canvas { z-index: 1; background-color: #16213e; }

/* --- UI Elements --- */
#score-display { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; color: white; font-size: clamp(1.2em, 4vmin, 2em); font-weight: bold; z-index: 10; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
#combo-display { font-size: 1.5em; color: #f1c40f; font-style: italic; }
.combo-pulse { animation: pulse-combo 0.3s ease-out; }
@keyframes pulse-combo { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* --- Overlays --- */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(22, 33, 62, 0.95); border-radius: 15px; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: fade-in 0.5s; z-index: 20; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.overlay h2 { font-size: 3em; color: #00ffff; margin: 0; }
.overlay p { font-size: 1.2em; max-width: 80%; color: #e0fbfc; }
.overlay button { margin-top: 20px; padding: 15px 30px; font-size: 1.2em; border: none; border-radius: 10px; background-color: #00ffff; color: #16213e; cursor: pointer; transition: all 0.2s; font-weight: bold; }
.overlay button:hover { transform: scale(1.05); box-shadow: 0 0 20px #00ffff; }
.hidden { display: none !important; pointer-events: none; }

/* --- Visual Feedback Animations --- */
.miss-shake { animation: shake-effect 0.4s ease-in-out; }
@keyframes shake-effect { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.perfect-hit-pulse {
    position: absolute; border-radius: 50%; border: 5px solid #f1c40f;
    animation: perfect-pulse 0.5s ease-out forwards; z-index: 5; pointer-events: none;
}
@keyframes perfect-pulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }