/* 全屏模式下的容器和视频样式 */
/* 使用 !important 确保覆盖 Tailwind 的类 */

.container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 全屏时隐藏非视频元素 */
.container:fullscreen > *:not(.aspect-video),
.container:-webkit-full-screen > *:not(.aspect-video) {
    display: none !important;
}

/* 全屏时让视频容器撑满 */
.container:fullscreen .aspect-video,
.container:-webkit-full-screen .aspect-video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.container:fullscreen video,
.container:-webkit-full-screen video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    object-fit: contain !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* 针对直接对 video 进行全屏的情况（如 iOS Safari） */
video:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: #000 !important;
}

video:fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: #000 !important;
}

/* 兼容 iOS 即使它不使用标准 fullscreen API */
video::-webkit-media-controls-panel {
    display: flex !important;
}