/* Enhanced Rabbit Colors */
.rabbit-color-1 {
    background-color: white;
}
.rabbit-color-1 .ears, 
.rabbit-color-1 .leg,
.rabbit-color-1 .tail {
    background-color: white;
}

.rabbit-color-2 {
    background-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}
.rabbit-color-2 .ears, 
.rabbit-color-2 .leg,
.rabbit-color-2 .tail {
    background-color: #FFD700;
}

.rabbit-color-3 {
    background-color: #00BFFF;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.7);
}
.rabbit-color-3 .ears, 
.rabbit-color-3 .leg,
.rabbit-color-3 .tail {
    background-color: #00BFFF;
}

.rabbit-color-4 {
    background-color: #FF69B4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7);
}
.rabbit-color-4 .ears, 
.rabbit-color-4 .leg,
.rabbit-color-4 .tail {
    background-color: #FF69B4;
}

/* Powerup Visual Enhancements */
.shield-active {
    box-shadow: 0 0 20px rgba(65, 105, 225, 0.8);
    animation: pulsing-shield 1s infinite alternate;
}

@keyframes pulsing-shield {
    0% { box-shadow: 0 0 20px rgba(65, 105, 225, 0.5); }
    100% { box-shadow: 0 0 30px rgba(65, 105, 225, 0.9); }
}

.multiplier-active {
    animation: multiplier-flash 0.5s infinite alternate;
}

@keyframes multiplier-flash {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.speedboost-active {
    animation: speedboost-motion 0.2s infinite alternate;
}

@keyframes speedboost-motion {
    0% { transform: translateX(-2px); }
    100% { transform: translateX(2px); }
}

/* Enhanced trail effects */
.trail-gold {
    background-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
}

.trail-blue {
    background-color: rgba(0, 191, 255, 0.7);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.9);
}

/* Powerup Timer Displays */
.powerup-timer {
    position: absolute;
    height: 4px;
    background-color: #4CAF50;
    transition: width 0.1s linear;
    bottom: -7px;
    left: 0;
    border-radius: 2px;
}

#shield-timer {
    width: 100%;
    background-color: #4169E1;
}

#multiplier-timer {
    width: 100%;
    background-color: #9932CC;
}

#boost-timer {
    width: 100%;
    background-color: #32CD32;
}

/* Color unlock notification */
.color-unlock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 150;
    animation: popup 0.5s ease-out;
}

.color-unlock h2 {
    margin-top: 0;
    color: gold;
}

.color-sample {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    margin: 15px auto;
}

.color-gold {
    background-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.color-blue {
    background-color: #00BFFF;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.8);
}

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