/* ===========================
   RAIN CARD
=========================== */

.rain-card{
    width:100%;
    max-width:300px;
    margin:0 auto 8px;

    position:relative;
    overflow:hidden;

    opacity:0;
    transform:translateY(8px) scale(.98);

    border-radius:8px;

    background:linear-gradient(
        180deg,
        rgba(28,28,40,.98) 0%,
        rgba(20,20,30,.98) 100%
    );

    border:1px solid rgba(255,255,255,.045);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 4px 12px rgba(0,0,0,.18);

    transition:
        opacity .25s ease,
        transform .25s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.rain-card.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

.rain-card.hide{

    opacity:0;

    transform:translateY(80px) scale(.98);

    pointer-events:none;

    transition:
        opacity .5s ease,
        transform .5s ease;

}


.rain-card:hover{
    border-color:rgba(141,92,255,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 18px rgba(0,0,0,.28);

    transform:translateY(-1px);
}

/* ===========================
   HEADER
=========================== */

.rain-header{
    position:relative;
    z-index:1000;

    display:flex;
    align-items:center;
    gap:6px;

    padding:6px 8px;

    border-bottom:1px solid rgba(255,255,255,.045);

    background:linear-gradient(
        180deg,
        rgba(28,28,40,.98),
        rgba(20,20,30,.98)
    );
}
.rain-left{
    display:flex;
    align-items:center;
    gap:6px;

    flex:1;
    min-width:0;
}

.rain-cloud{
    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.rain-cloud svg{
    width:16px;
    height:16px;

    filter:drop-shadow(0 0 5px rgba(141,92,255,.18));
}

.rain-info{
    flex:1;
    min-width:0;
}

.rain-title{
    color:#fff;

    font-size:7px;
    font-weight:900;

    letter-spacing:.5px;
    text-transform:uppercase;
}

.rain-sub{
    margin-top:1px;

    color:#9c73ff;

    font-size:5px;
    font-weight:800;

    letter-spacing:.4px;
    text-transform:uppercase;
}

.rain-live{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;

    min-width:40px;
    height:18px;

    padding:0 5px;

    border-radius:5px;

    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.04);

    color:#f1f1f1;

    font-size:6px;
    font-weight:900;
}

.rain-live-dot{
    width:3px;
    height:3px;

    border-radius:50%;

    background:#35dd7d;

    box-shadow:0 0 6px rgba(53,221,125,.45);

    animation:rainPulse 1.6s infinite;

    flex-shrink:0;
}

.rain-live-text{
    color:#f1f1f1;

    font-size:6px;
    font-weight:900;

    line-height:1;
}

/* ===========================
   BODY
=========================== */

.rain-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:8px 10px;

    border-bottom:1px solid rgba(255,255,255,.04);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.rain-body.switching{
    opacity:0;
    transform:translateY(8px);
}

.rain-label{
    color:#9a9aac;

    font-size:7px;
    font-weight:800;

    letter-spacing:.5px;
    text-transform:uppercase;
}

.rain-value{
    margin-top:4px;

    color:#fff;

    font-size:22px;
    font-weight:900;

    line-height:1;
}

.rain-value-row{
    width:100%;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:4px;
}

.rain-time{
    position:absolute;

    right:0;

    top:50%;
    transform:translateY(-50%);

    color:#b3b3c7;

    font-size:8px;
    font-weight:800;

    letter-spacing:.4px;

    white-space:nowrap;
}

.rain-progress{
    width:100%;
    height:3px;

    margin-top:8px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.05);
}

.rain-progress-fill{
    width:100%;
    height:100%;

    border-radius:inherit;

    background:linear-gradient(
        90deg,
        #7d4dff,
        #9c73ff
    );
}

.rain-actions{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:4px;

    height:46px;

}

/* ===========================
   ROLL
=========================== */

.rain-roll{
    display:none;

    position:relative;

    padding:10px 0;

    overflow:hidden;

    border-bottom:1px solid rgba(255,255,255,.04);
}

.rain-roll-window{
    width:100%;
    overflow:hidden;
}

.rain-roll-track{
    display:flex;
    flex-direction:row;

    gap:6px;

    width:max-content;

    padding:0 12px;

    transform:translateX(0);

    will-change:transform;

    transition:transform 8s cubic-bezier(.08,.82,.25,1);
}

.rain-roll-item{
    width:44px;
    height:44px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:8px;

    background:linear-gradient(
        180deg,
        #47475f,
        #2b2b39
    );

    border:1px solid rgba(255,255,255,.06);

    transition:
        opacity .35s ease,
        filter .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.rain-roll-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.rain-roll-item.loser{

    opacity:.35;

    filter:
        grayscale(100%)
        blur(1.5px)
        brightness(.55);

    transform:scale(.96);

}

.rain-roll-item.winner{

    transform:translateY(-2px);

    opacity:1;

    filter:none;

    box-shadow:
        0 0 10px rgba(80,255,140,.35),
        0 0 20px rgba(80,255,140,.18);

    z-index:20;

}

.rain-roll-item{
    transition:
        transform .08s linear,
        filter .08s linear,
        box-shadow .08s linear;
}

.rain-roll-item.hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}



.rain-pointer{
    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:2px;
    height:100%;

    background:#9c73ff;

    box-shadow:0 0 10px rgba(156,115,255,.6);

    z-index:10;
}

.rain-pointer::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-2px;

    transform:translateX(-50%);

    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:8px solid #9c73ff;
}


/* ===========================
   EGG ROLL
=========================== */

.rain-egg-roll{
    display:none;

    position:relative;

    padding:10px 0;

    overflow:hidden;

    border-bottom:1px solid rgba(255,255,255,.04);
}

.rain-egg-window{
    width:100%;
    overflow:hidden;
}

.rain-egg-track{
    display:flex;
    flex-direction:row;

    gap:6px;

    width:max-content;

    padding:0 12px;

    transform:translateX(0);

    will-change:transform;

    transition:transform 8s cubic-bezier(.08,.82,.25,1);
}

.rain-egg-item{
    width:44px;
    height:44px;

    flex-shrink:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;

    overflow:visible;

    transform:translateY(0) scale(1);

    will-change:transform;

    transition:
        opacity .35s ease,
        filter .35s ease;
}
.rain-egg-item img{
    width:40px;
    height:40px;

    display:block;

    object-fit:contain;
    object-position:center;
}

.rain-egg-item.loser{

    opacity:.2 !important;

    filter:grayscale(100%) blur(3px) brightness(.25) !important;

    transform:scale(.9) !important;

}

.rain-egg-item.winner{

    opacity:1 !important;

    filter:none !important;

    z-index:999;

}
.rain-egg-item.hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

/* ===========================
   EGG OPEN
=========================== */

.rain-egg-open{

    display:none;

    position:absolute;

    left:50%;
    top:55%;

    transform:translate(-50%,-50%);

    justify-content:center;
    align-items:center;

    overflow:visible;

    z-index:50;

    pointer-events:none;

}
/* البيضة الكاملة */

.rain-egg-closed{
    position:absolute;

    left:0;
    top:0;

    width:78px;
    height:auto;

    transform:translate(-50%,-50%) scale(1);

    opacity:1;

    z-index:5;

    user-select:none;
    pointer-events:none;

    will-change:transform,opacity;
}

/* النصف السفلي */

.rain-egg-bottom{
    position:absolute;

    left:0;
    top:0;

    width:78px;
    height:auto;

    transform:translate(-50%,-50%);

    opacity:0;

    z-index:4;

    user-select:none;
    pointer-events:none;

    will-change:transform,opacity;
}

/* النصف العلوي */

.rain-egg-top{
    position:absolute;

    left:0;
    top:0;

    width:78px;
    height:auto;

    transform:translate(-50%,-50%);

    opacity:0;

    z-index:6;

    user-select:none;
    pointer-events:none;

    will-change:transform,opacity;
}

/* الجلد */

.rain-egg-skin{
    position:absolute;

    left:0;
    top:0;

    width:60px;
    height:auto;

    transform:translate(-50%,-50%) scale(.6);

    opacity:0;

    z-index:3;

    user-select:none;
    pointer-events:none;

    will-change:transform,opacity;
}

.rain-egg-shake{
    animation:rainEggShake .5s ease-in-out;
    transform-origin:center center;
    will-change:transform;
}

@keyframes rainEggShake{

    0%{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    12%{
        transform:translate(-50%,-50%) rotate(-5deg);
    }

    25%{
        transform:translate(-50%,-50%) rotate(5deg);
    }

    38%{
        transform:translate(-50%,-50%) rotate(-4deg);
    }

    50%{
        transform:translate(-50%,-50%) rotate(4deg);
    }

    62%{
        transform:translate(-50%,-50%) rotate(-3deg);
    }

    75%{
        transform:translate(-50%,-50%) rotate(3deg);
    }

    88%{
        transform:translate(-50%,-50%) rotate(-1deg);
    }

    100%{
        transform:translate(-50%,-50%) rotate(0deg);
    }

}


/* ===========================
   BUTTON
=========================== */

.rain-join{
    position:relative;
    overflow:hidden;

    width:100%;

    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:none;
    outline:none;

    border-radius:8px;

    background:#8250ff;

    color:#fff;

    font-size:10px;
    font-weight:900;

    letter-spacing:.6px;
    text-transform:uppercase;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 4px 12px rgba(130,80,255,.28);

    transition:
        background .18s,
        box-shadow .18s,
        transform .18s,
        opacity .18s;
}

.rain-join:hover:not(:disabled){
    background:#8d5cff;

    transform:translateY(-1px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 16px rgba(130,80,255,.38);
}

.rain-join:active:not(:disabled){
    transform:translateY(0);

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.18),
        0 2px 6px rgba(130,80,255,.20);
}

.rain-join:disabled{
    cursor:not-allowed;

    opacity:.65;

    background:#4b3b75;

    box-shadow:none;
}

.rain-join::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;
}

.rain-join svg{
    width:12px;
    height:12px;

    fill:#fff;

    position:relative;
    z-index:2;
}

.rain-join span{
    position:relative;
    z-index:2;
}


.rain-winner{

    position:absolute;

    inset:4px;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease;

    pointer-events:none;

}

.rain-winner.show{

    opacity:1;
    visibility:visible;

}

.rain-winner-name{

    color:#fff;

    font-size:13px;
    font-weight:800;

    letter-spacing:.3px;

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

    max-width:90%;

}

/* ===========================
   CANCEL
=========================== */

.rain-cancel{

    position:absolute;
    inset:4px;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:4px;

    transform: translateY(14px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        transform .25s ease;

    pointer-events:none;

}

.rain-cancel.show{

    opacity:1;
    visibility:visible;

    transform: translateY(14px);

}


.rain-cancel-title{

    color:#ff3b30;

    font-size:15px;

    font-weight:800;

    letter-spacing:.3px;

    text-shadow:0 0 8px rgba(255,59,48,.35);

}

.rain-cancel-text{

    color:#8f97a3;

    font-size:11px;

    font-weight:600;

}

/* ===========================
   FINAL DETAILS
=========================== */



@keyframes rainPulse{

    0%{
        transform:scale(.9);
        opacity:.7;
    }

    50%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(.9);
        opacity:.7;
    }

}

.rain-title,
.rain-value{
    font-family:Manrope,Inter,sans-serif;
}

.rain-title{
    text-shadow:none;
}

.rain-value{
    letter-spacing:.35px;
}

.rain-progress-fill{
    transition:width 1s linear;
}

.rain-close{
    position:absolute;

    top:6px;
    right:6px;

    width:18px;
    height:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:transparent;

    color:rgba(255,255,255,.30);

    font-size:10px;
    font-weight:900;

    cursor:pointer;

    transition:.18s;

    z-index:50;
}

.rain-close:hover{
    background:rgba(255,255,255,.06);
    color:#fff;
}


@keyframes eggTopOpen{

    from{
        transform:translate(-50%,-50%);
        opacity:1;
    }

    to{
        transform:translate(-50%,-95%) rotate(-18deg);
        opacity:1;
    }

}

@keyframes eggBottomOpen{

    from{
        transform:translate(-50%,-50%);
        opacity:1;
    }

    to{
        transform:translate(-50%,-5%) rotate(18deg);
        opacity:1;
    }

}

@keyframes skinPop{

    from{
        transform:translate(-50%,-50%) scale(.4);
        opacity:0;
    }

    to{
        transform:translate(-50%,-62%) scale(1);
        opacity:1;
    }

}