/* The Blind Rhythm */

.rhythm-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 24px auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px inset #808080;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.target-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 4px solid #00ffff;
    border-radius: 50%;
    box-shadow: 0 0 20px #00ffff;
    z-index: 2;
}

.rhythm-circle {
    position: absolute;
    border: 3px solid #ff69b4;
    border-radius: 50%;
    box-sizing: border-box;
    animation: shrink linear forwards;
    z-index: 1;
}

@keyframes shrink {
    from {
        width: 200px;
        height: 200px;
        margin: -100px;
        opacity: 1;
    }
    to {
        width: 50px;
        height: 50px;
        margin: -25px;
        opacity: 1;
    }
}

.game-score {
    font-family: "Impact", "Arial Black", sans-serif;
    font-size: 16px;
    color: #ffff00 !important;
    text-shadow: 2px 2px 2px #000;
}

/* Screenshake pour combo parfait */
body.screenshake {
    animation: shake 0.15s ease-in-out 2;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, -4px); }
    50% { transform: translate(4px, 4px); }
    75% { transform: translate(-4px, 4px); }
}

.feedback-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: bold;
    color: #ffff00 !important;
    text-shadow: 0 0 10px #ff00ff;
    z-index: 10;
    pointer-events: none;
    animation: feedback-pop 0.4s ease-out;
}

.feedback-text.perfect { color: #00ff00 !important; font-size: 32px; }
.feedback-text.good { color: #ffff00 !important; }

@keyframes feedback-pop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
    font-weight: bold;
    color: #00ffff !important;
    z-index: 20;
    text-shadow: 0 0 20px #00ffff;
}

.countdown.hidden { display: none !important; }