/* ==========================================
   Storyline
========================================== */
.storyline-section{
    width:100%;
    margin:16px 0;
}

.storyline-container{
    width:100%;
}

.storyline-list{
    display:flex;
    align-items:flex-start;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 16px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /*direction:ltr;*/
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    direction:rtl;
}

.storyline-list::-webkit-scrollbar{
    display:none;
}

/* ==========================================
   Storyline item
========================================== */
.storyline-item{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:90px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    scroll-snap-align:start;
    transition:transform .18s ease,
    opacity .18s ease;
}

.storyline-item:active{
    transform:scale(.94);
    opacity:.85;
}

.storyline-item:focus{
    outline:none;
}

@media (hover:hover){
    .storyline-item:hover{
        transform:translateY(-2px);
    }
}

/* ==========================================
   Storyline title
========================================== */
.storyline-title{
    margin-top:8px;
    margin-bottom: 24px;
    color: #fff;
    width:100%;
    font-size:12px;
    line-height:16px;
    font-weight:300;
    text-align:center;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
    word-break:break-word;
    direction:rtl;
}

/* ==========================================
   Storyline image-wrapper
========================================== */
.storyline-image-wrapper{
    width:66px;
    height:66px;
    border-radius:50%;
    overflow:hidden;
    background:#1d1d1d;
    padding:2px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.storyline-image{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

/* ==========================================
   Storyline Ring
========================================== */
.storyline-ring{
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.storyline-ring.unseen{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #3b82f6 100%
        );
}

.storyline-ring.seen{
        background:linear-gradient(
        135deg,
        #5B6173,
        #7B8193
    );
}

.story-count{
    position:absolute;
    bottom:-2px;
    left:50%;
    transform:translateX(-50%);
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:10px;
    background:#ff2d55;
    color:#fff;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #111;
}