/* ==========================================
   STORY PANEL
========================================== */

#story-stats{
    display:none;
}

/* #story-modes{
    display:none;
} */

.story-panel{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:900;
}

.story-panel-cover{

    position:relative;

    width:70%;
max-width:380px;
    /* aspect-ratio:16/9;

    max-height:220px; */

    /* overflow:hidden;

    border-radius:18px; */

 margin:12px auto;
}
.story-cover-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;
display:none;
}

.panel-preview-btn{

      width:45px;

    height:45px;

    font-size:1rem;

  
    border-radius:50%;

    border:none;

    background:#e63946;

    color:#fff;
  
    cursor:pointer;

    pointer-events:auto;

    box-shadow:
        0 0 0 rgba(230,57,70,.7);

    animation:playPulse 1.8s infinite;

}

@keyframes playPulse{

    0%{

        box-shadow:
            0 0 0 0 rgba(230,57,70,.65);

    }

    70%{

        box-shadow:
            0 0 0 16px rgba(230,57,70,0);

    }

    100%{

        box-shadow:
             0 0 20px rgba(230,57,70,.45);

    }
}

.panel-preview-btn:hover{

    transform:scale(1.08);

}
.story-panel-hero{

  /* display:none; */
   
  width:80%;

    max-width:520px;

    margin:20px auto;


}

  
.story-panel-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.5);

    backdrop-filter:blur(4px);
}

.story-panel-box{

    position:relative;

    width:min(900px,94vw);

    max-height:82vh;

    overflow-y:auto;

    overflow-x:hidden;

   background:transparent;

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

    border-radius:26px;

    z-index:2;

    box-shadow:
        0 20px 60px rgba(0,0,0,.55);

}

.story-panel-cover img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}

@media (max-width:768px){

    .panel-preview-btn{

        width:36px;

        height:32px;

        font-size:1rem;

    }

}
.story-panel-series{

    font-size:.72rem;

    opacity:.85;

    margin-bottom:6px;

}
.story-series-icon{
    display:inline-flex;
    cursor:pointer;
    animation-name:laviHeadMove;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    transform-origin:center bottom;
}


@keyframes laviHeadMove{

    0%,80%,100%{
        transform:rotate(0deg);
    }

    83%{
        transform:rotate(-15deg);
    }

    86%{
        transform:rotate(12deg);
    }

    89%{
        transform:rotate(-8deg);
    }

    92%{
        transform:rotate(0deg);
    }

}

.story-experience-header{

    text-align:center;

    padding:18px 18px 10px;

}

.story-experience-title{

    margin:0;

    font-size:1.15rem;

    font-weight:700;

    color:#fff;

}

.story-experience-subtitle{

    margin-top:8px;

    font-size:.88rem;

    line-height:1.7;

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

}

.story-action .action-level{

    opacity:.75;

}

.story-action .action-level span{

    font-size:10px !important;

}

.story-action .action-title span{

    font-size:15px !important;
    font-weight:700;

}



/* ==========================
   STORY LOCK PANEL
========================== */

.story-lock-panel{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(8px);

    z-index:999999;

}

.story-lock-box{

    width:min(92%,420px);

    background:rgba(25,25,35,.96);

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

    border-radius:26px;

    padding:28px;

    text-align:center;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

   position:relative;
}

.lock-icon{

    font-size:56px;

    margin-bottom:14px;

}

#lockTitle{

    font-size:24px;

    color:#fff;

    margin-bottom:10px;

}

#lockText{

    color:#bdbdc7;

    line-height:1.8;

    margin-bottom:20px;

}

#lockNeedLevel{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:#cd7f32;

    color:#fff;

    font-weight:bold;

    margin-bottom:22px;

}

#lockUpgradeBtn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:14px;

    margin-bottom:12px;

    cursor:pointer;

    font-size:16px;

}

#lockGiftBtn{

    width:100%;

    padding:14px;

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

    background:transparent;

    color:#fff;

    border-radius:14px;

    cursor:pointer;

}

.lock-close{

    position:absolute;

    top:16px;

    right:16px;

    border:none;

    background:transparent;

    color:#fff;

    font-size:22px;

    cursor:pointer;

}

.story-panel-episode{
    display:none;
}
.story-panel-summary h3{
    display:none;
}
.story-experience-header{
    display:none;
}

/* عنوان مجموعه */
.story-panel-series{

    text-align:center;

    font-size:13px;

    color:#c6b3ff;

    font-weight:600;

    opacity:.9;

    margin-bottom:6px;

}

/* عنوان داستان */
.story-panel-info h2{

    text-align:center;

    font-size:22px;

    font-weight:800;

    color:#ffffff;

    line-height:1.5;

    margin-bottom:12px;
 padding-top:8px;
}

/* متن خلاصه */
.story-panel-summary{

   
 margin-top:6px;

    margin-bottom:20px;
}

.story-panel-summary p{

    text-align:center;

    line-height:1.8;

    font-size:15px;

    color:#f5f5f5;

}
.story-actions{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:12px;

}

/* -----رنگ هر اشتراک ---------- */
.story-action.free{

    background:#233b2d;

}

.story-action.bronze{

    background:#3d2b1f;

}

.story-action.silver{

    background:#30333a;

}

.story-action.gold{

    background:#4a3b12;

}
.action-desc{
    font-size:13px;
    line-height:1.7;
    opacity:.75;
    margin-top:6px;
}
.action-btn{

    margin-top:10px;

    padding:8px 16px;

    border-radius:999px;

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

    font-size:13px;

    font-weight:700;

}





/* خط جداکننده */

.story-panel-box .story-action .action-divider{

    width:85%;

    height:1px;

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

}





/* دکمه */

.story-panel-box .story-action .action-btn{

    padding:7px 25px;

    border-radius:30px;

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

    font-size:13px;

    font-weight:700;

}




@media (max-width:768px){

.story-panel-box .story-action{

    width:100%;

    min-height:125px;

    padding:12px;

}
.story-panel-box .story-action .action-icon{

    font-size:20px;

}

.story-panel-box .story-action .action-title{

    font-size:13px;
    line-height:1.4;

}

.story-panel-box .story-action .action-level{

    font-size:11px;

}

.lock-bronze{

    border-color:#cd7f32;

    box-shadow:0 0 25px rgba(205,127,50,.35);

}

.lock-silver{

    border-color:#cfd2d6;

    box-shadow:0 0 25px rgba(220,220,220,.28);

}

.lock-gold{

    border-color:#ffd700;

    box-shadow:0 0 28px rgba(255,215,0,.35);

}
.story-panel-box > #panelTitle{

    text-align:center;

    font-size:22px;

    font-weight:800;

    color:#fff;

    line-height:1.5;

    margin-bottom:10px;

}
.story-panel-back{

    position:absolute;

    top:1px;

    right:18px;

    z-index:100;

    color:#ff3b3b;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    font-weight:bold;

    cursor:pointer;

    backdrop-filter:blur(8px);

    background:transparent;

    border:none;

    text-decoration:none;

    transition:.3s;

    animation:backArrowBounce .8s ease-in-out infinite alternate;

}

.story-panel-back:hover{

    color:#ff6666;

    transform:scale(1.12);

}

@keyframes backArrowBounce{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(8px);
    }

}
  .story-action .action-btn{

    position:relative;

    overflow:hidden;

    margin-top:10px;

    padding:10px 22px;

    border-radius:999px;

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

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;

    font-weight:700;

    transition:.3s;

    animation:buttonFloat 2.2s ease-in-out infinite;

}

/* برق */

.story-action .action-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:skewX(-25deg);

    animation:buttonShine 2.8s linear infinite;

}

/* هاور */

.story-action .action-btn:hover{

    transform:scale(1.06);

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

}

/* حرکت */

@keyframes buttonFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

}

/* برق */

@keyframes buttonShine{

    from{
        left:-120%;
    }

    to{
        left:170%;
    }

}

 .story-action.bronze .action-btn::before{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(205,127,50,.85),
        transparent
    );

}

.story-action.silver .action-btn::before{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(230,230,230,.95),
        transparent
    );

}

.story-action.gold .action-btn::before{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,215,0,.95),
        transparent
    );

}