/* Player fullscreen fix untuk Chrome 68 / Android TV lama */
.player-screen {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.player-screen.active {
    display: flex !important;
}

#youtubePlayer,
#localPlayer,
.player-screen iframe,
.player-screen .media-layer {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    display: block;
    background: #000 !important;
}

#youtubePlayer,
.player-screen iframe {
    z-index: 5 !important;
}

#localPlayer {
    z-index: 4 !important;
}
.tv-topbar{
    position:absolute;
    top:4px;
    left:20px;
    right:20px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    pointer-events:none;
    z-index:2147483650!important;
}
.tv-outlet-name{
    font-size:clamp(14px,1.4vw,24px);
    font-weight:900;
    letter-spacing:.12em;
    color:var(--accent,#f0d978);
    text-shadow:0 2px 8px #000}
.tv-room-name{
    margin-top:4px;
    font-size:clamp(20px,2.2vw,38px);
    font-weight:900;
    text-shadow:0 2px 10px #000}
.tv-countdown{
    padding:6px 18px;
    
    border:1px solid rgba(255,255,255,.28);
    border-radius:14px;
    background:rgba(0,0,0,.62);
    /*font-size:clamp(23px,3vw,52px);*/
    font-size:clamp(20px,2.2vw,38px);
    font-weight:900;
    font-variant-numeric:tabular-nums;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}


    
.now-playing-card {
    position: absolute;
    z-index: 20;
    left: 20px;
    bottom: 82px;

    width: min(75vw, 1000px);
    max-width: calc(100vw - 40px);

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

    padding: 13px 18px;

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

    background: rgba(0, 0, 0, .64);
    backdrop-filter: blur(8px);

    text-align: left;
    overflow: hidden;
}

/* Bagian yang membungkus small dan judul */
.now-playing-card > div {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.now-playing-card i {
    flex: 0 0 auto;
    font-size: 30px;
    color: var(--accent, #f0d978);
}

.now-playing-card small {
    display: block;
    color: #bfc9c3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.now-playing-card #nowTitle {
    display: inline-block;

    width: max-content;
    min-width: 100%;

    margin-top: 4px;

    font-size: clamp(17px, 2vw, 32px);
    font-weight: 900;

    white-space: nowrap;

    animation: titleScroll 14s linear infinite;
}

@keyframes titleScroll {
    0%,
    12% {
        transform: translateX(0);
    }

    88%,
    100% {
        transform: translateX(-75%);
    }
}  
    
    .player-notice{
        position:absolute;
        z-index:30;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%) scale(.9);
        padding:18px 26px;
        border-radius:16px;
        background:rgba(0,0,0,.78);
        font-size:clamp(20px,2.6vw,42px);
        font-weight:900;
        opacity:0;transition:.25s
        
    }
    .player-notice.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
    .running-text{
    position:absolute;
    z-index:18;

    top:0;
    left:0;
    right:0;

    height:clamp(60px,6vw,110px);

    display:none;
    align-items:center;

    overflow:hidden;
    white-space:nowrap;

    /*border-top:2px solid var(--border, rgba(255,255,255,.2));

    
    background:linear-gradient(
        90deg,
        var(--primary-dark, #2b0d5c),
        var(--primary, #015d35),
        var(--accent, #0aa86a)
    );

    color:var(--gold, #ffffff);*/
    color:#fff;
    font-size:clamp(23px,3vw,52px);
    line-height:76px;
    font-weight:900;

    box-shadow:
        0 -8px 28px rgba(0,0,0,.28);
}
@media (min-width:1280px){
    .running-text::before{
        font-size:36px;
    }
}

@media (min-width:1920px){
    .running-text::before{
        font-size:48px;
    }
}
.running-text-track{
    position:absolute;
    left:160px;      /* mulai setelah logo */
    right:220px;     /* berhenti sebelum timer */
    top:0;
    bottom:0;

    overflow:hidden;
}
.running-text-track::before{
    content:attr(data-text);

    display:inline-block;
    white-space:nowrap;

    padding-left:100%;

    animation:tv-marquee 22s linear infinite;
}
.running-text.show{
    display:flex;
}

.running-text::before{
    content:attr(data-text);

    display:inline-block;
    min-width:100%;

    padding-left:100vw;

    color:inherit;
    font-size:clamp(23px,3vw,52px);
    line-height:76px;

    text-shadow: 0 2px 4px rgba(0,0,0,.75);

    animation:tv-marquee 22s linear infinite;
}

@keyframes tv-marquee{
    to{
        transform:translateX(-100%);
    }
}

#videoTime {
    margin-bottom: 4px;
    color: var(--accent, #f0d978);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
}
.video-time{

    position:absolute;

    bottom:20px;
    right:20px;

    padding:6px 12px;

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

    color:#fff;

    font-size:18px;

    border-radius:8px;

    font-weight:bold;

    z-index:999;
}