/* 横屏/全屏按钮 */
.landscape-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    z-index: 15; /* 在视频之上，但在封面之下(如果可以点击的话，通常封面隐藏后可见) */
    display: none; /* 初始隐藏，播放后显示 */
    border: 1px solid rgba(255,255,255,0.3);
}

/* 强制横屏样式 (CSS Rotation Fallback) */
.video-container.force-landscape {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh; /* 宽度设为视口高度 */
    height: 100vw; /* 高度设为视口宽度 */
    z-index: 9999;
    background-color: #000;
    /* 旋转中心设为屏幕中心 */
    transform-origin: center center; 
    /* 旋转90度并在位置上修正 */
    transform: rotate(90deg) translate((50vh - 50vw), (50vh - 50vw)); 
    /* 注意：transform的具体偏移可能需要根据具体设备细调，
       或者使用 simpler approach: 
       top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 100vh; height: 100vw; 
    */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 使用更稳健的居中旋转方案覆盖上面的 */
.video-container.force-landscape {
    /* 微信/鸿蒙修复：使用 fixed 定位脱离文档流，并强制最高层级 */
    position: fixed !important;
    width: 100vh;
    height: 100vw;
    top: 50%;
    left: 50%;
    /* 使用 translate3d 开启 GPU 加速，防止闪烁 */
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
    z-index: 99999;
    background: #000;
}

/* 修复微信下视频可能撑不开的问题 */
.video-container.force-landscape video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}