/* 视频元素基础样式 */
video {
  outline: none;
  transition: all 0.3s ease;
}

/* 隐藏可能重复或不需要的控制元素 */
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* 隐藏音量控制 */
video::-webkit-media-controls-mute-button {
  display: none !important;
}

video::-webkit-media-controls-volume-slider-container {
  display: none !important;
}

video::-webkit-media-controls-volume-slider {
  display: none !important;
}

/* 隐藏全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* 隐藏画中画按钮 */
video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
}

/* 隐藏所有其他可能的按钮 */
video::-internal-media-controls-overflow-button {
  display: none !important;
}

video::-webkit-media-controls-panel-container {
  justify-content: flex-start !important;
}

/* 强制隐藏右侧所有元素 */
video::-webkit-media-controls-enclosure > * {
  margin-right: 0 !important;
}

/* 视频控制条美化 - WebKit浏览器 */
video::-webkit-media-controls-enclosure {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 70%, transparent 100%);
  border-radius: 0 0 12px 12px;
  padding: 8px 12px;
}

video::-webkit-media-controls-panel {
  background: transparent;
  padding: 4px 0;
}

/* 播放按钮美化 */
video::-webkit-media-controls-play-button {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  margin-left: 8px;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

video::-webkit-media-controls-play-button:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}

/* 隐藏进度条 */
video::-webkit-media-controls-timeline {
  display: none !important;
}

/* 隐藏时间显示 */
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}



/* Firefox 浏览器样式 */
video::-moz-media-controls {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
  border-radius: 0 0 12px 12px;
}

/* 视频悬停效果 */
video:hover {
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  video::-webkit-media-controls-play-button {
    width: 40px;
    height: 40px;
    margin-left: 8px;
  }
  
  video::-webkit-media-controls-timeline {
    margin: 0 8px;
    height: 5px;
  }
  
  video::-webkit-media-controls-current-time-display,
  video::-webkit-media-controls-time-remaining-display {
    font-size: 11px;
  }
  

}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  video::-webkit-media-controls-timeline {
    height: 7px;
  }
  
  video::-webkit-media-controls-current-time-display,
  video::-webkit-media-controls-time-remaining-display {
    font-size: 14px;
  }
}