/*
====================================================
239 Underground
Livestream Module
====================================================
*/

:root{

    --primary:#00c8ff;
    --secondary:#a100ff;
    --live:#ff1b1b;

    --background:#0a0a0a;

    --card:#151515;

    --text:#ffffff;

    --muted:#bfbfbf;

    --radius:18px;

}


/* ===========================
   Section
=========================== */

.yt-live-section{

    max-width:1200px;

    margin:60px auto;

    padding:20px;

}


/* ===========================
   Live Badge
=========================== */

.yt-live-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:var(--live);

    color:white;

    padding:12px 24px;

    border-radius:50px;

    font-weight:bold;

    font-size:18px;

    margin-bottom:20px;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,0,0,.8);

    }

    70%{

        box-shadow:0 0 0 20px rgba(255,0,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,0,0,0);

    }

}


/* ===========================
   Title
=========================== */

.yt-title{

    color:white;

    font-size:2.2rem;

    margin-bottom:25px;

    text-align:center;

}


/* ===========================
   Video Player
=========================== */

.yt-player{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:var(--radius);

    background:black;

    box-shadow:

        0 0 25px rgba(0,200,255,.45),

        0 0 50px rgba(161,0,255,.35);

}

.yt-player iframe{

    width:100%;

    height:100%;

    border:none;

}


/* ===========================
   Viewer Stats
=========================== */

.yt-meta{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin:25px 0;

}

.yt-stat{

    background:var(--card);

    color:white;

    padding:12px 20px;

    border-radius:12px;

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

}


/* ===========================
   Description
=========================== */

.yt-description{

    color:var(--muted);

    line-height:1.8;

    max-width:900px;

    margin:30px auto;

    text-align:left;

}


/* ===========================
   Chat
=========================== */

.yt-chat{

    margin-top:35px;

    width:100%;

    height:650px;

}

.yt-chat iframe{

    width:100%;

    height:100%;

    border:none;

    border-radius:var(--radius);

}


/* ===========================
   Offline
=========================== */

.yt-offline,
.yt-upcoming{

    background:var(--card);

    border-radius:var(--radius);

    padding:40px;

    text-align:center;

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

}


/* ===========================
   Thumbnail
=========================== */

.yt-thumbnail{

    width:100%;

    max-width:900px;

    border-radius:var(--radius);

    margin:25px auto;

    display:block;

}


/* ===========================
   Button
=========================== */

.yt-watch-button{

    display:inline-block;

    margin-top:25px;

    padding:14px 30px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    text-decoration:none;

    border-radius:50px;

    font-weight:bold;

    transition:.25s;

}

.yt-watch-button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 0 20px rgba(0,200,255,.6);

}

.yt-mobile-buttons{

    display:none;

    margin-top:25px;

}

.yt-mobile-btn{

    display:block;

    width:100%;

    padding:16px;

    margin-bottom:15px;

    text-align:center;

    text-decoration:none;

    color:white;

    font-weight:bold;

    border-radius:14px;

    background:linear-gradient(
        90deg,
        #00c8ff,
        #a100ff
    );

    transition:.25s;

}

.yt-mobile-btn:hover{

    transform:translateY(-2px);

}


/* ===========================
   Mobile
=========================== */

@media(max-width:992px){

.yt-title{

    font-size:1.8rem;

}

.yt-chat{

    height:500px;

}

}

@media(max-width:768px){

.yt-live-section{

    padding:15px;

}

.yt-title{

    font-size:1.5rem;

}

.yt-live-badge{

    font-size:16px;

}

.yt-meta{

    flex-direction:column;

    align-items:center;

}

.yt-chat{

    display:none;

}

.yt-mobile-buttons{

    display:block;

}

.yt-description{

    text-align:center;

}

}

@media(max-width:480px){

.yt-title{

    font-size:1.3rem;

}

.yt-live-badge{

    padding:10px 18px;

}

.yt-watch-button{

    width:100%;

    text-align:center;

}

}