* { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      background: #000;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .shaka-video-container {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .video-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    video {
      width: 100%;
      height: 100%;
      background: #000;
      object-fit: contain;
      transition: all 0.2s ease;
    }

    /* Aspect Ratio classes */
    video.ratio-fit { object-fit: contain; }
    video.ratio-stretch { object-fit: fill; }
    video.ratio-full { object-fit: cover; }

    .shaka-spinner-container,
    .shaka-spinner,
    .shaka-spinner-svg {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }

    .error-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }
    .error-modal.hidden { display: none !important; }

    .error-content {
      background: #222;
      border-radius: 15px;
      padding: 25px;
      max-width: 500px;
      width: 90%;
      text-align: center;
      color: white;
    }
    .error-content h3 { color: #ff6b6b; margin-bottom: 15px; }
    .channel-list { display:none; }

    .close-btn {
      background: #ff4444;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }

    /* ASPECT RATIO BUTTON - FORCED ALWAYS ON TOP */
    .ratio-toggle {
      position: fixed !important;
      top: 20px !important;
      right: 20px !important;
      z-index: 999999999 !important; /* Extremely high z-index */
      background: rgba(0, 0, 0, 0.9) !important;
      color: white !important;
      border: 2px solid #ff4444 !important;
      padding: 12px 24px !important;
      border-radius: 30px !important;
      font-size: 16px !important;
      font-weight: bold !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      backdrop-filter: blur(10px) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.7) !important;
      pointer-events: auto !important;
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      transform: none !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    }

    .ratio-toggle:hover {
      background: #ff4444 !important;
      transform: scale(1.1) !important;
    }

    /* Ratio mode colors */
    .ratio-toggle.fit { background: #4CAF50 !important; border-color: #4CAF50 !important; }
    .ratio-toggle.stretch { background: #FF9800 !important; border-color: #FF9800 !important; }
    .ratio-toggle.full { background: #2196F3 !important; border-color: #2196F3 !important; }

    /* FULLSCREEN OVERRIDE - FORCE BUTTON TO TOP */
    :fullscreen .ratio-toggle,
    :-webkit-full-screen .ratio-toggle,
    :-moz-full-screen .ratio-toggle,
    :-ms-fullscreen .ratio-toggle {
      display: block !important;
      position: fixed !important;
      top: 20px !important;
      right: 20px !important;
      z-index: 999999999 !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      background: rgba(0, 0, 0, 0.9) !important;
    }

    /* Disable any pointer events on player container that might block button */
    .shaka-video-container {
      pointer-events: auto !important;
    }

    /* Make sure controls don't block button */
    .shaka-controls-container {
      z-index: 999999998 !important;
      pointer-events: auto !important;
    }

    /* Ensure button is clickable through any overlays */
    .ratio-toggle {
      pointer-events: auto !important;
    }

    /* Notification styling */
    .ratio-notification {
      position: fixed !important;
      top: 80px !important;
      right: 20px !important;
      background: rgba(0,0,0,0.95) !important;
      color: white !important;
      padding: 12px 24px !important;
      border-radius: 30px !important;
      z-index: 999999999 !important;
      font-size: 16px !important;
      font-weight: bold !important;
      border-left: 4px solid #ff4444 !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.7) !important;
      animation: fadeOut 2s ease forwards;
      max-width: 300px;
      text-align: center;
      pointer-events: none;
      backdrop-filter: blur(10px) !important;
    }

    @keyframes fadeOut {
      0% { opacity: 1; transform: translateX(0); }
      70% { opacity: 1; transform: translateX(0); }
      100% { opacity: 0; transform: translateX(20px); }
    }

    /* Add a semi-transparent background to body in fullscreen to debug */
    :fullscreen body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 999999990;
    }
  


.adb {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.adbs {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
  text-align: center;
  max-width: 400px;
  width: 90%;
}
@keyframes glow {
  from { text-shadow: 0 0 0px #ff0000; }
  to { text-shadow: 0 0 1px #ff0000; }
}
.adbs h3 {
  color: #d00;
  font-size: 24px;
  margin-bottom: 15px;
}
.adbs p {
  font-size: 16px;
  color: #333;
}