body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            font-family: system-ui, -apple-system, sans-serif;
            user-select: none;
            -webkit-user-select: none;
        }

        /*
        .shaka-video-container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 90%;
            background: #000;
        }
        */

        .shaka-video-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;     /* ✅ FORCE 16:9 */
  max-height: 100%;
  object-fit: contain;      /* crop nahi hoga */
  margin: auto;
  display: block;
        }
        
        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Hide default overlays to prevent glitches */
        .shaka-play-button-container,
        .shaka-spinner-container { 
            display: none !important; 
        }
        
        /* Disable Native Controls */
        video::-webkit-media-controls {
            display: none !important;
        }

        /* --- CUSTOM SETTINGS MENU (For Multi-Quality MP4) --- */
        .custom-settings-menu {
            position: absolute;
            bottom: 60px;
            right: 20px;
            background: rgba(20, 20, 20, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px;
            display: none; /* Hidden by default */
            flex-direction: column;
            gap: 5px;
            z-index: 5000;
            width: 180px;
            backdrop-filter: blur(10px);
        }
        .custom-settings-menu.active { display: flex; }
        
        .quality-btn {
            background: transparent;
            border: none;
            color: white;
            padding: 10px;
            text-align: left;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            transition: background 0.2s;
        }
        .quality-btn:hover { background: rgba(255, 255, 255, 0.1); }
        .quality-btn.active-q { color: #00e5ff; font-weight: bold; }
        .menu-header {
            font-size: 12px; color: #aaa; margin-bottom: 5px; padding-left: 5px; border-bottom: 1px solid #333; padding-bottom: 5px;
        }

        /* --- LIVE BADGE --- */
        #liveBadge {
            position: absolute;
            top: 20px; left: 20px;
            background: red; color: white;
            padding: 4px 10px; border-radius: 4px;
            font-weight: bold; font-size: 14px;
            z-index: 1001; display: none;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
            pointer-events: none;
        }

        /* --- Custom Center Controls --- */
        .custom-center-controls {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            display: flex; align-items: center; gap: 40px;
            z-index: 10;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .hide-controls .custom-center-controls {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Shaka Controls Hide override */
        .hide-controls .shaka-controls-container {
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .center-btn {
            background: none; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
        }
        .center-btn:active { transform: scale(0.9); }

        .icon-rewind, .icon-forward { font-size: 45px; color: #ffeb3b; }
        .icon-play {
            font-size: 70px; color: #ffffff;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%; padding: 5px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255,255,255,0.3);
        }

        /* Bottom Bar Colors */
        .shaka-rewind-button, .shaka-fast-forward-button { color: #00e5ff !important; }
        .shaka-language-button { display: inline-flex !important; }

        /* --- Resume Popup --- */
        #resumePopup {
            position: absolute; inset: 0;
            background: rgba(0,0,0,0.85);
            display: none; justify-content: center; align-items: center;
            z-index: 2000; color: white;
            backdrop-filter: blur(5px);
        }
        .resume-box {
            background: #1a1a1a; padding: 25px 35px;
            border-radius: 12px; text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
            max-width: 320px;
        }
        .resume-btn {
            padding: 10px 20px; border: none; border-radius: 6px;
            font-weight: bold; cursor: pointer; margin: 15px 5px 0 5px;
            color: white; font-size: 14px;
        }
        .btn-yes { background: #00c853; }
        .btn-no { background: #ff1744; }
        .timer-text { font-size: 12px; color: #aaa; margin-top: 15px; }

        /* --- Telegram Logo --- */
        #telegram-logo {
            position: absolute; top: 15px; right: 15px; z-index: 9999;
            opacity: 1; transition: opacity 0.4s ease;
        }
        #telegram-logo img { width: 50px; height: 50px; }
        .hide-controls #telegram-logo { opacity: 0; pointer-events: none; }

        .iframe-wrapper {
            position: fixed; inset: 0; background: black; z-index: 99999; display: none;
        }
        .iframe-wrapper iframe { width: 100%; height: 100%; border: 0; }
        
        .tg-banner {
            position: absolute; top: 60px; left: 20px;
            background: linear-gradient(135deg, #1da1f2, #0077b5);
            border-radius: 12px; padding: 10px 16px;
            display: flex; align-items: center; color: white;
            text-decoration: none; z-index: 1000;
            font-size: 14px; font-weight: 600;
            transition: opacity 0.3s;
        }
        .hide-controls .tg-banner { opacity: 0; pointer-events: none; }
        .tg-icon img { width: 20px; height: 20px; margin-right: 8px; }

        /* Extra Button for Custom Quality (Only visible for Multi-MP4) */
        .custom-quality-btn {
            background: none; border: none; color: white; cursor: pointer;
            display: none; /* Hidden by default */
            align-items: center; justify-content: center;
        }

        @media (max-width: 768px) {
            .icon-rewind, .icon-forward { font-size: 35px; }
            .icon-play { font-size: 55px; }
        }



/* ===============================
   INFO SLIDER – BELOW CONTROL BAR
================================*/
.info-slider{
    position:absolute;
    bottom:0; /* 👈 controls ke bilkul neeche */ /* center ke liye ye use karo :- calc(50% + 65px);   /* 👈 center controls ke niche */
    left:0;
    margin-bottom: 5;
    width:100%;
    height:26px;
    overflow:hidden;
    background:rgba(248, 2, 2, 0.75);
    border-top:1px solid rgba(255,255,255,.12);
    z-index:20;
    pointer-events:none;
}

/* Controls hide hone par slider bhi hide */
.hide-controls .info-slider{
    opacity:0;
}

/* Scrolling text */
.info-track{
    display:flex;
    align-items:center;
    height:100%;
    gap:60px;
    padding-left:100%;
    width:max-content;
    animation:infoScroll 25s linear infinite;
}

.info-track span{
    color:#ffffff;
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
    text-shadow:0 0 4px rgba(255,234,0,.6);
}

/* Smooth marquee */
@keyframes infoScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-100%); }
}

/* Mobile */
@media(max-width:768px){
    .info-slider{
        bottom:-22px;   /* 📱 mobile fix */
        height:24px;
    }
    .info-track span{
        font-size:11.5px;
    }
}


        /* --- NEW TOP HEADER (TITLE & LIVE BADGE) --- */
        /* kuwal text true */
        .top-header-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            box-sizing: border-box;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 2005; /* Above everything */
            transition: opacity 0.3s ease;
            pointer-events: none; /* Allows click through to container */
        }

        /* Hide header when controls are hidden */
        .hide-controls .top-header-bar {
            opacity: 0;
        }

        .live-badge-btn {
            background: red;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 700;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
            text-transform: uppercase;
            cursor: default;
            pointer-events: auto; /* Enable clicking specifically on this button */
            border: 1px solid red;
            transition: all 0.2s;
            box-shadow: 0 0 5px rgba(255,0,0,0.5);
        }

        /* Style for when user is behind live edge (Go Live) */
        .live-badge-btn.go-live-mode {
            background: rgba(0, 0, 0, 0.6);
            border-color: #fff;
            color: #fff;
            cursor: pointer;
        }
        .live-badge-btn.go-live-mode:hover {
            background: #fff;
            color: #000;
        }

        .video-title-text {
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: auto;
        }

        /* Hide old static badge */
        #liveBadge { display: none !important; }


/* 📝 Force subtitles visibility */
/* kuwal text true */
.shaka-text-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.shaka-text-container span {
  font-size: 16px !important;
  text-shadow: 0 0 4px black;
}

/* ===============================
   ASPECT RATIO MENU
   new change 9625 true
================================*/
.aspect-menu{
  position:absolute;
  bottom:70px;
  right:80px;
  background:rgba(20,20,20,.95);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:6px;
  display:none;
  flex-direction:column;
  z-index:9999;
  backdrop-filter:blur(10px);
}

.aspect-menu button{
  background:none;
  border:none;
  color:white;
  padding:8px 12px;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  border-radius:4px;
}

.aspect-menu button:hover{
  background:rgba(255,255,255,.1);
}
.aspect-menu button.active{
  color:#00e5ff;
  font-weight:600;
}

/* ===============================
   TITLE INFO BAR (DATE • TIME • BATTERY)
   new change battery-animate true
================================ */

.video-info-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
  font-size:12px;
  color:#e0e0e0;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  pointer-events:none;
}

.video-info-line span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* ⚡ Charging animation */
.battery-charging{
  color:#00e676;
  animation:chargePulse 1.2s infinite;
}

@keyframes chargePulse{
  0%{opacity:0.4}
  50%{opacity:1}
  100%{opacity:0.4}
}

/* 🔴 Low battery */
.battery-low{
  color:#ff1744;
  font-weight:600;
  animation:lowBlink 1s infinite;
}

@keyframes lowBlink{
  0%,100%{opacity:1}
  50%{opacity:0.4}
}

/* 📱 Mobile / Portrait */
@media(max-width:768px){
  .video-info-line{
    font-size:11px;
  }
}

/* 🖥 Fullscreen / Landscape */
:fullscreen .video-info-line{
  font-size:13px;
}
        

 #streamSelector{
  position:absolute;
  left:15px;
  top:30%;
  transform:translateY(-50%);
  z-index:4000;
  /* background:rgba(0,0,0,0.65); */  
  border-radius:10px;
  padding:6px;
  /* backdrop-filter:blur(6px); */    
}
#streamSelect{
  background:red;
  color:#fff;
  border:2px solid yellow;
  padding:7px 10px;
  border-radius:6px;
  font-size:13px;
}


/* Hide selector when controls hidden */
.hide-controls #streamSelector{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

/* Show selector when controls visible */
#streamSelector{
  opacity:1;
  pointer-events:auto;
  transition:opacity .3s ease;
}


/* INTRO OVERLAY */
.intro-overlay{
  position:fixed;
  inset:0;
  /* background:rgba(0,0,0,.85); */
  z-index:99999;
  display:none;
  justify-content:center;
  align-items:center;
}

.intro-box{
  /* background:#111;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px; */
  padding:25px 30px;
  max-width:320px;
  text-align:center;
  /* box-shadow:0 0 30px rgba(0,0,0,.8); */
}

.intro-text{
  color: yellow;
  font-size:14px;
  line-height:1.6;
  margin-bottom:20px;
}

.intro-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#aaa;
}

.intro-next{
  background:#00c853;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  color:white;
  font-weight:600;
  cursor:pointer;
}

.intro-skip{
  background:none;
  border:1px solid #777;
  padding:7px 14px;
  border-radius:6px;
  color:#ccc;
  margin-right:8px;
  cursor:pointer;
}


/* Brightness overlay */
#brightnessOverlay{
  position:absolute;
  inset:0;
  background:black;
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:opacity .05s linear;
}

/* Gesture Indicator */
.gesture-indicator{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:120px;
  height:120px;
  background:rgba(0,0,0,.55);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:14px;
  z-index:30;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.gesture-indicator .material-icons-round{
  font-size:42px;
  margin-bottom:6px;
}

.gesture-left{ left:20px; }
.gesture-right{ right:20px; }

.hide-controls .gesture-indicator.active{
  opacity:1;
}


/* ======================================
   JIO HOTSTAR RIGHT OVERLAY (VIDEO FRONT)
====================================== */

#jioHotstarRight{
  position:absolute;
  top:22px;
  right:22px;                 /* 👉 RIGHT SIDE */
  display:flex;
  flex-direction:column;      /* TOP → BOTTOM */
  align-items:flex-end;
  gap:4px;
  pointer-events:none;
  z-index:1500;               /* video ke upar, controls ke niche */
}

/* Common text style */
#jioHotstarRight .txt{
  font-weight:800;
  letter-spacing:.4px;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  animation:colorShift 3s linear infinite;
}

/* JioHotstar (TOP) */
#jioHotstarRight .hotstar{
  font-size:20px;
  color:#00e5ff;
}

/* LIVE (BOTTOM) */
#jioHotstarRight .live{
  font-size:13px;
  color:#ff1744;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(0,0,0,0.45);
}

/* 🌈 Colour changing animation */
@keyframes colorShift{
  0%   { filter:hue-rotate(0deg); }
  50%  { filter:hue-rotate(180deg); }
  100% { filter:hue-rotate(360deg); }
}

/* 📱 Portrait / Mobile */
@media(max-width:768px){
  #jioHotstarRight{
    top:14px;
    right:14px;
  }
  #jioHotstarRight .hotstar{
    font-size:17px;
  }
  #jioHotstarRight .live{
    font-size:12px;
  }
}

/* 🖥 Landscape / Fullscreen */
:fullscreen #jioHotstarRight{
  top:18px;
  right:70px;
}



/* ===============================
   #7777 STREAM LIST SYSTEM true
================================*/

.stream-open-btn{
  color: yellow;
  font-weight:700;
  margin-top:4px;
  cursor:pointer;
  pointer-events:auto;
}

#streamDrawer{
  position:fixed;
  inset:0;
  background: white;
  z-index:999999;
  display:none;
  flex-direction:column;
}

.drawer-header{
  display:flex;
  gap:8px;
  padding:12px;
  background: green;
  align-items:center;
}

.drawer-header input,
.drawer-header select{
  padding:8px;
  border-radius:6px;
  border:none;
}

.drawer-header input{
  flex:1;
}

.drawer-header button{
  background:red;
  color:white;
  border:none;
  padding:8px 12px;
  border-radius:6px;
}

#streamChannelList{
  flex:1;
  overflow-y:auto;
  padding:10px;
}

.stream-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-bottom:1px solid #222;
  cursor:pointer;
}

.stream-item img{
  width:50px;
  height:50px;
  border-radius:6px;
}

.stream-item:hover{
  background: red;
}

/* 10 sec back text */
.back10-text{
  position:absolute;
  left:15px;
  bottom:70px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
}

.hide-controls .back10-text{
  opacity:0;
  pointer-events:none;
}