/* --- 3‑second play notice --- */
#playNotice{
  position:absolute;bottom: 50%;left:50%;
  transform:translateX(-50%);
  
  background:rgba(252, 6, 6, 0.85);color:#fff;
  padding:15px 30px;border-radius:var(--radius);
  font-size:30px;display:none;z-index:6;
  animation: fade 3s forwards;
}
@keyframes fade{
  0%{opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0}
}

    :root{
      --bg:#0d1117;--fg:#e6e6e6;--accent:#00b4d8;--danger:#ff5959;
      --bar-h:6px;--btn:#1e293b;--btn-h:#334155;--radius:8px;
    }
    #videoTitleTxt {
      font-size: 22px;
      margin-top: 10px;
     margin-left: 30px;
      font-weight: bold;
      margin-bottom: 20px;
      background: linear-gradient(45deg, #FF6B6B, #4ECDC4,#33f702,#f7077f );
    -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    #backBtn {
  position: fixed;
  top: 15px;
  left: 10px;
  font-size: 16px;
  padding: 8px 12px;
  background: #eb0202;
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius);
  z-index: 10000;
  transition: background 0.3s;
  font-weight: bold;
}
  #videoLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 242, 242, 0.0);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: sans-serif;
}

.spinner {
  position: relative;
  width: 120px;
  height: 120px;
}

.spinner img {
  width: 80px;
  background: #ffffff;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  border: 5px solid red;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 1;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.load-text {
  margin-top: 20px;
  font-size: 18px;
}

   

#backBtn:hover {
  background: var(--btn-h);
}

    *{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
    body{background:var(--bg);color:var(--fg);display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}
    #playerContainer{width:100%;max-width:960px;background:#000;border-radius:var(--radius);overflow:hidden}
    video{width:100%;height:auto;max-height:85vh;background:#000}
    /* Initial play overlay */
    #initialPopup{position:absolute;padding:6px 15px;margin-bottom: 15px;margin-top: 60px; inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
    #initialPopup button{background:#eb0202;border:0;color:hsla(239, 100%, 48%, 0.966); padding:8px 30px;border-radius:30cm;font-size:20px;cursor:pointer}
   
    /* Telegram popup */
    #telegramPopup{position:absolute;bottom:20px;right:20px;background:rgba(0,0,0,.8);padding:16px 20px;border-radius:var(--radius);display:none;flex-direction:column;align-items:center;gap:10px;z-index:5}
    #telegramPopup a{color:#fff;text-decoration:none;background:var(--accent);padding:8px 18px;border-radius:var(--radius)}
    #telegramPopup button{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;position:absolute;top:6px;right:10px}
    /* Controls */
 #controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #111;
  padding: 10px;
  border-top: 2px solid #222;
  font-family: sans-serif;
  color: var(--fg);
}


.controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Buttons */
#playToggle, #fsToggle, #skipBack, #skipFwd, #shareBtn {
  background: var(--btn);
  border: 0;
  color: var(--fg);
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
}

#playToggle:hover, #fsToggle:hover, #skipBack:hover, #skipFwd:hover, #shareBtn:hover {
  background: var(--btn-h);
}

/* Volume & quality */
#vol {
  width: 60px;
}

#qualitySel {
  background: var(--btn);
  color: var(--fg);
  border: 0;
  padding: 4px;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Bottom: Progress + Time */
.controls-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#progress {
  flex: 1;
  height: var(--bar-h);
  max-width: 90%;
  background: #333;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
}

#progressFilled {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius);
  width: 0%;
}

#timeDisp {
  font-size: 11px;
  width: 12%;
  text-align: center;
}

/* Responsive for mobile */

/* Responsive */


  @media (max-width: 400px) {
     .controls {
        flex-direction: column;
        align-items: stretch;
      }
      .controls input[type=range] {
        width: 100%;
      }
      .popup-box {
        font-size: 14px;
        padding: 16px;
      }
  
  #playerContainer {
    position: relative;  /* ✅ Allow natural flow */
    width: 100%;
    background: black;
    margin-bottom: 20px;
  }

  video {
    width: 100%;
    max-height:300px;
  }



   

#timeDisp {
  font-size: 11px;
  width: 22%;
  text-align: center;
}

   

    #initialPopup{position:absolute;margin-left: 20px; margin-right: 20px;margin-bottom: 500px; margin-top: 40px; inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
         #playNotice{
  position:absolute;bottom: 50%;left:50%;
  transform:translateX(-50%);
  
  background:rgba(252, 6, 6, 0.85);color:#fff;
  padding:8px 15px;border-radius:var(--radius);
  font-size:18px;display:none;z-index:6;
  animation: fade 3s forwards;
}
 #backBtn {
    font-size: 14px;
    padding: 6px 10px;
  }
  
  }

  @media (max-width: 600px) {
     .controls {
        flex-direction: column;
        align-items: stretch;
      }
      .controls input[type=range] {
        width: 100%;
      }
      .popup-box {
        font-size: 14px;
        padding: 16px;
      }
  
  #playerContainer {
    position: relative;  /* ✅ Allow natural flow */
    width: 100%;
    background: black;
    margin-bottom: 20px;
  }

  video {
    width: 100%;
    max-height:600px;
  }



   

#timeDisp {
  font-size: 11px;
  width: 22%;
  text-align: center;
}

   

    #initialPopup{position:absolute;margin-left: 20px; margin-right: 20px;margin-bottom: 500px; margin-top: 40px; inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
         #playNotice{
  position:absolute;bottom: 50%;left:50%;
  transform:translateX(-50%);
  
  background:rgba(252, 6, 6, 0.85);color:#fff;
  padding:8px 15px;border-radius:var(--radius);
  font-size:18px;display:none;z-index:6;
  animation: fade 3s forwards;
}
 #backBtn {
    font-size: 14px;
    padding: 6px 10px;
  }
  #controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #111;
  padding: 10px;
  border-top: 2px solid #222;
  font-family: sans-serif;
  color: var(--fg);
}


.controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Buttons */
 #skipBack, #skipFwd, #shareBtn {
  background: var(--btn);
  border: 0;
  color: var(--fg);
  padding: 4px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
}
#playToggle, #fsToggle{
  background: var(--btn);
  border: 0;
  color: var(--fg);
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 11px;
}
#vol {
  width: 40px;
}

  
  }