/* RAIN POOL */
#rainContainer {
    margin: 0 5px 5px 5px;
    position: relative;
    z-index: 10;
    overflow: visible;
}

#rainBox {
    background: linear-gradient(135deg, #2a1f00 0%, #1a1200 100%);
    border: 1px solid #f0ad4e44;
    border-radius: 6px;
    overflow: visible;
    position: relative;
}

#rainHeader {
    background: #1a1200;
    padding: 6px 10px;
    font-size: 12px;
    border-bottom: 1px solid #f0ad4e33;
    display: flex;
    align-items: center;
    border-radius: 6px 6px 0 0;
}

#rainBody {
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#rainPool, #rainPlayers {
    display: flex;
    align-items: center;
    gap: 4px;
}

#rainAvatars {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

#rainAvatars img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #f0ad4e66;
}

#rainFooter {
    padding: 4px 8px;
}

#rainJoinBtn {
    transition: all 0.2s;
    font-size: 12px;
    padding: 4px 0;
}

#rainJoinBtn:hover {
    background: #ec971f;
    transform: scale(1.02);
}

#rainJoinBtn:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
    transform: none;
}

#rainJoinBtn.rain-joined {
    background: #5cb85c;
    color: #fff;
    cursor: default;
}

/* Rain progress bar */
#rainTimerBar {
    height: 3px;
    background: #f0ad4e;
    transition: width 1s linear;
    border-radius: 0 0 6px 6px;
}

/* Rain results overlay */
#rainResults {
    margin: 0 5px 5px 5px;
    position: relative;
    z-index: 10;
    overflow: visible;
}

#rainResultsBox {
    background: linear-gradient(135deg, #1a2f00 0%, #0f1a00 100%);
    border: 1px solid #5cb85ccc;
    border-radius: 6px;
    overflow: visible;
    position: relative;
    box-shadow: 0 0 15px #5cb85caa, 0 0 30px #5cb85c77, 0 0 60px #5cb85c44, 0 0 90px #5cb85c22, inset 0 0 15px #5cb85c22;
    animation: rainGlow 2s ease-in-out infinite;
}

@keyframes rainGlow {
    0% {
        box-shadow: 0 0 15px #5cb85caa, 0 0 30px #5cb85c77, 0 0 60px #5cb85c44, 0 0 90px #5cb85c22, inset 0 0 15px #5cb85c22;
        border-color: #5cb85ccc;
    }
    25% {
        box-shadow: 0 0 25px #5cb85cee, 0 0 50px #5cb85caa, 0 0 80px #5cb85c66, 0 0 120px #5cb85c33, inset 0 0 20px #5cb85c33;
        border-color: #5cb85cff;
    }
    50% {
        box-shadow: 0 0 10px #5cb85c88, 0 0 20px #5cb85c55, 0 0 40px #5cb85c33, 0 0 60px #5cb85c11, inset 0 0 10px #5cb85c11;
        border-color: #5cb85c99;
    }
    75% {
        box-shadow: 0 0 30px #7fff7fff, 0 0 60px #5cb85cbb, 0 0 90px #5cb85c77, 0 0 130px #5cb85c44, inset 0 0 25px #5cb85c44;
        border-color: #7fff7fff;
    }
    100% {
        box-shadow: 0 0 15px #5cb85caa, 0 0 30px #5cb85c77, 0 0 60px #5cb85c44, 0 0 90px #5cb85c22, inset 0 0 15px #5cb85c22;
        border-color: #5cb85ccc;
    }
}

#rainResultsList .rain-winner {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    color: #ccc;
    gap: 6px;
}

#rainResultsList .rain-winner img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

#rainResultsList .rain-winner .rain-win-amount {
    color: #5cb85c;
    font-weight: bold;
    margin-left: auto;
}

/* Rain pool active glow */
#rainBox.rain-active {
    border: 1px solid #f0ad4ecc;
    overflow: visible;
    box-shadow: 0 0 15px #f0ad4eaa, 0 0 30px #f0ad4e77, 0 0 60px #f0ad4e44, 0 0 90px #f0ad4e22, inset 0 0 15px #f0ad4e22;
    animation: rainPoolGlow 2s ease-in-out infinite;
}

@keyframes rainPoolGlow {
    0% {
        box-shadow: 0 0 15px #f0ad4eaa, 0 0 30px #f0ad4e77, 0 0 60px #f0ad4e44, 0 0 90px #f0ad4e22, inset 0 0 15px #f0ad4e22;
        border-color: #f0ad4ecc;
    }
    25% {
        box-shadow: 0 0 25px #f0ad4eee, 0 0 50px #f0ad4eaa, 0 0 80px #f0ad4e66, 0 0 120px #f0ad4e33, inset 0 0 20px #f0ad4e33;
        border-color: #f0ad4eff;
    }
    50% {
        box-shadow: 0 0 10px #f0ad4e88, 0 0 20px #f0ad4e55, 0 0 40px #f0ad4e33, 0 0 60px #f0ad4e11, inset 0 0 10px #f0ad4e11;
        border-color: #f0ad4e99;
    }
    75% {
        box-shadow: 0 0 30px #ffd700ff, 0 0 60px #f0ad4ebb, 0 0 90px #f0ad4e77, 0 0 130px #f0ad4e44, inset 0 0 25px #f0ad4e44;
        border-color: #ffd700ff;
    }
    100% {
        box-shadow: 0 0 15px #f0ad4eaa, 0 0 30px #f0ad4e77, 0 0 60px #f0ad4e44, 0 0 90px #f0ad4e22, inset 0 0 15px #f0ad4e22;
        border-color: #f0ad4ecc;
    }
}

/* Override parent overflow to allow glow to bleed */
#pullout {
    overflow: visible !important;
}

#tab1.tab-group {
    overflow: visible !important;
}

.divchat {
    position: relative;
    z-index: 1;
}

#rainAmount {
    animation: rainAmountPulse 3s ease-in-out infinite;
}

@keyframes rainAmountPulse {
    0%, 100% { 
        text-shadow: 0 0 20px #f0ad4e66;
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 40px #f0ad4eaa, 0 0 60px #f0ad4e44;
        transform: scale(1.05);
    }
}