/* 開獎視頻頁样式（PC + 移動端共用，目標站 macaujc.com 直播區） */

.tv-div {
    position: relative;
    width: 100%;
    max-width: 980px;
    min-height: 120px;
    margin: 16px auto;
    background: #111;
    overflow: hidden;
    box-sizing: border-box;
}

/* 未到直播時間的提示覆蓋層 */
.video_cover_info {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    padding: 40px 16px;
    word-break: break-all;
}

/* 視頻 / 畫布 / 動畫 iframe 統一鋪滿 tv-div 寬度 */
.tv-div video.centeredVideo,
.tv-div canvas.centeredVideo,
.tv-div video,
.tv-div #liveIframe {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    border: 0;
    background: #000;
}

/* 聲音開關圖標（右下角） */
.voice {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    cursor: pointer;
    z-index: 20;
}

.voice svg {
    display: block;
    padding: 8px;
    box-sizing: border-box;
}

/* 靜音狀態斜線 */
.xiegang {
    display: none;
    position: absolute;
    left: 4px;
    top: 18px;
    width: 32px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
}

/* 線路切換按鈕 */
.switch_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 10px;
    background: #111;
}

.switch_btn .sw-btn {
    display: inline-block;
    border: 1px solid #555;
    color: #ddd;
    background: #222;
    font-size: 13px;
    padding: 4px 14px;
    border-radius: 16px;
    cursor: pointer;
    user-select: none;
}

.switch_btn .sw-btn.on {
    background: #1a3d96;
    border-color: #1a3d96;
    color: #fff;
}

/* ===== 回放縮略圖格 ===== */
.video_cover_par {
    width: 270px;
    margin: 14px 0;
    text-align: center;
}

.video_cover {
    width: 100%;
    height: 200px;
    background: #c5c2c9 url(/img/repeat.png) center / cover no-repeat;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video_cover img.play {
    width: 68px;
    height: 68px;
}

.video_expect_number {
    font-size: 14px;
    color: #333;
    margin-top: 8px;
}

.video_expect_number .seconde_span {
    color: #d21e1e;
    font-weight: 700;
}

/* ===== PC（≥900px）：直播區固定 980x640 居中 ===== */
@media (min-width: 900px) {
    .tv-div {
        width: 980px;
        margin: 20px auto;
    }
    .tv-div video.centeredVideo,
    .tv-div canvas.centeredVideo,
    .tv-div #liveIframe {
        width: 980px;
        height: 640px;
    }
    .video_cover_info {
        padding: 240px 30px;
        font-size: 18px;
    }
}

/* ===== 移動端（≤899px）：等比縮放 ===== */
@media (max-width: 899px) {
    .tv-div {
        min-height: 60px;
        margin: 10px auto;
    }
    .video_cover_par {
        width: 46%;
    }
    .video_cover {
        height: 120px;
    }
    .video_cover img.play {
        width: 40px;
        height: 40px;
    }
    .video_expect_number {
        font-size: 12px;
    }
}

/* ===== 刮獎：本期號碼灰顯 + 首個回放封面蓋灰塊「刮一刮」（對齊目標站） ===== */
.pc-scratched .block-lump,
.pc-scratched .block-lump-circle {
    background: #c9c9c9 !important;
    color: #c9c9c9 !important;
}

.pc-scratched .zodiac {
    visibility: hidden;
}

.video_cover_par.pc-scratched .video_cover {
    background: #c5c2c9;
}

.video_cover_par.pc-scratched .video_cover img.play {
    visibility: hidden;
}

.video_cover_par.pc-scratched .video_cover:after {
    content: "刮一刮";
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
}

/* ===== 右列刮獎（读秒下方，蓝色文字+眼睛，对齐目标站） ===== */
.oc-scratch { margin-top: 16px; text-align: center; }
.oc-scratch .scratch-toggle { margin: 0; }

/* ===== 開獎視頻标题行：标题左、年份+期号搜索右（对齐目标站） ===== */
.vd-find {
    display: flex; align-items: center; justify-content: space-between;
    width: 1162px; box-sizing: border-box;
    border: 1px solid #ddd; border-bottom: 0;
    padding: 12px 16px; margin-top: 20px; background: #fff;
}
.vd-find-title { font-weight: bolder; font-size: 16px; }
.vd-find-tools { display: flex; align-items: center; gap: 12px; }
.vd-find-tools .find-input {
    display: flex; align-items: center;
    border: 1px solid #ddd; border-radius: 18px;
    padding: 4px 12px; background: #fff;
}
.vd-find-tools .expect_value {
    border: 0; outline: none; width: 110px;
    font-size: 14px; background: transparent;
}
.vd-find-tools .query_expect { width: 20px; height: 20px; cursor: pointer; }
@media (max-width: 899px) {
    .vd-find { width: 100%; }
}

/* ===== 回放弹窗视频铺满 ===== */
#video .backV { width: 100%; max-width: 920px; height: auto; display: block; margin: 0 auto; background: #000; }