/* ==========================================
   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{

aspect-ratio:16/9;

width:100%;

max-height:240px;

overflow:hidden;

border-radius:18px;

}
.story-panel-cover{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    max-height:220px;

    overflow:hidden;

    border-radius:18px;


}
.story-cover-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events: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:100%;

    object-fit:cover;

    display:block;

}

@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-icon{

    font-size:30px;

}

.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:15px;

    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;

}

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

    margin-top:10px;

    margin-bottom:28px;

}

.story-panel-summary p{

    text-align:center;

    line-height:1.9;

    font-size:17px;

    color:#f5f5f5;

}
.story-actions{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:12px;

}

.story-action{

width:100%;

min-height:140px;

}

.story-action:hover{

    transform:translateY(-6px) scale(1.02);

}
/* -----------اندازه ایکون اشتراکها -------------- */
/* .story-action .action-icon{

    font-size:42px;

    margin-top:6px; */

}
/* - فونت  عنوان اشتراکها -------- */
.story-action .action-title{

    font-size:17px;

    font-weight:700;

    line-height:1.7;

}

---------سطح اشتراک--------------
.story-action .action-level{

    font-size:13px;

    opacity:.85;

    font-weight:700;

}
/* -----رنگ هر اشتراک ---------- */
.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 ACTIONS SIZE
========================== */

.story-panel-box .story-action{

    min-height:90px;

    padding:10px 12px;

    flex-direction:row;

    justify-content:flex-start;

    gap:14px;

}


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

    font-size:32px;

    width:45px;

}


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

    font-size:15px;

    text-align:right;

    flex:1;

}


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

    font-size:12px;

}
@media (max-width:768px){

.story-action{

    min-height:85px;
    padding:10px 8px;

}

.story-action .action-icon{

    font-size:18px !important;

}

.story-action .action-title{

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

}

.story-action .action-level{

    font-size:11px !important;

}

}