:root {
    --theme-red: #a71818;
    --theme-gold: #f4d03f;
    --bg-color: #f8f1e5;
    --banner-bg: #eee;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: var(--bg-color);
    background-image: url('images/bg_1.jpg');
    /* 使用cover模式确保背景填满整个屏幕，保持图片比例，可能会裁剪边缘 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    /* 确保背景图片在移动端也能正确显示 */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.95) 0%, rgba(220, 20, 60, 0.95) 50%, rgba(255, 69, 0, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-content {
    text-align: center;
    color: #FFD700;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.loading-spinner {
    border: 5px solid rgba(255, 215, 0, 0.2);
    border-top: 5px solid #ffd700;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Player Styles */
.player-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-container {
    width: 100%;
    height: 100%;
    position: relative;
}

#J_prismPlayer {
    width: 100%;
    height: 100%;
}

/* Decorations */
.decoration {
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Removed border, background-color, etc. for cleaner icon look */
}

/* Specific Icons */
.top-left { 
    top: 10px; 
    left: 10px; 
    background-image: url('images/decorations/lantern.svg');
}
.top-right { 
    top: 10px; 
    right: 10px; 
    background-image: url('images/decorations/firecracker.svg');
}
.bottom-left { 
    bottom: 10px; 
    left: 10px; 
    background-image: url('images/decorations/luckybag.svg');
}
.bottom-right { 
    bottom: 10px; 
    right: 10px; 
    background-image: url('images/decorations/redpacket.svg');
}

/* Decoration pseudo-element removal (no more "Ma" text) */
.decoration::after {
    content: none;
}

.lantern-group,
.firecracker-group {
    position: fixed;
    z-index: 1200;
    pointer-events: none;
}

.lantern-group.top-left {
    top: 8px;
    left: 12px;
}

.lantern-group.top-right {
    top: 8px;
    right: 12px;
}

.lantern-group .rope {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 40px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--theme-gold) 0%, rgba(244,208,63,0.3) 100%);
}

.lantern-group .lantern {
    position: relative;
    top: 36px;
    width: 60px;
    height: 90px;
    transform-origin: top center;
    animation: sway 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(244,208,63,0.6));
}

.lantern-group .lantern img {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes sway {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg); }
}

.firecracker-group.bottom-left {
    bottom: 18px;
    left: 18px;
}

.firecracker-group.bottom-right {
    bottom: 18px;
    right: 18px;
}

.firecracker-group .firecracker {
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 0 6px rgba(220,20,60,0.6));
}

.firecracker-group .firecracker img {
    width: 100%;
    height: 100%;
    display: block;
}

.firecracker-group .fuse {
    position: absolute;
    bottom: 64px;
    left: 60%;
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, #ffcc00 0%, #ff6600 100%);
    transform-origin: left center;
    animation: fuse-burn 2s linear infinite;
    box-shadow: 0 0 6px rgba(255, 165, 0, 0.8);
}

@keyframes fuse-burn {
    0% { width: 22px; opacity: 1; }
    70% { width: 6px; opacity: 1; }
    100% { width: 0px; opacity: 0; }
}

.firecracker-group .explosion {
    position: absolute;
    bottom: 62px;
    left: calc(60% + 0px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,230,150,1) 30%, rgba(255,140,0,0.9) 60%, rgba(255,0,0,0.6) 100%);
    transform: translate(-50%, 50%) scale(0.2);
    opacity: 0;
    animation: boom 2s linear infinite;
    animation-delay: 1.8s;
    box-shadow: 0 0 12px rgba(255,215,0,0.9), 0 0 24px rgba(255,69,0,0.6);
}

@keyframes boom {
    0% { transform: translate(-50%, 50%) scale(0.2); opacity: 0; }
    5% { opacity: 1; }
    25% { transform: translate(-50%, 50%) scale(1.6); opacity: 1; }
    40% { transform: translate(-50%, 50%) scale(0.8); opacity: 0.8; }
    55% { transform: translate(-50%, 50%) scale(1.3); opacity: 0.6; }
    70% { transform: translate(-50%, 50%) scale(0.6); opacity: 0.4; }
    100% { transform: translate(-50%, 50%) scale(0.2); opacity: 0; }
}

/* PC 端视口适配容器：仅 PC 下生效，根据屏幕缩放整页以完整显示 */
.pc-viewport-fit {
    width: 100%;
    min-height: 100vh;
}
.pc-scale-inner {
    width: 100%;
}

/* 页脚版权：兼容手机端和 PC 端，固定于视口底部 */
.cctv-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 10px 16px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.cctv-footer a,
.cctv-footer a:link,
.cctv-footer a:visited,
.cctv-footer-link,
.cctv-footer-link:link,
.cctv-footer-link:visited {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
}
.cctv-footer a:hover,
.cctv-footer-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: underline !important;
}

/* Main Container */
.main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 对联使用固定位置，不需要stretch */
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    height: 100vh; /* Full height */
}

/* 移动端设备：对联始终隐藏（避免全屏退出后因横屏视口宽度导致误显示） */
body.is-mobile .couplet {
    display: none !important;
}

/* Couplets (PC) */
.couplet {
    /* 宽度通过JavaScript动态设置，基于直播画面高度和2:7宽高比 */
    margin: 0 10px;
    border-radius: 14px;
    /* 对联位置通过JavaScript动态调整，使其与top-banner底部对齐 */
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    /* 确保容器有最小宽度，避免flex导致宽度为0 */
    min-width: 0;
    flex-shrink: 0;
    /* 确保容器有内容时能正确显示 */
    display: block;
}

.left-couplet {
    background-image: url('images/left.jpg');
    /* 对联图片背景 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.right-couplet {
    background-image: url('images/right.jpg');
    /* 对联图片背景 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.couplet::before,
.couplet::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 8px;
    background: linear-gradient(90deg, rgba(244,208,63,0) 0%, rgba(244,208,63,0.9) 50%, rgba(244,208,63,0) 100%);
    box-shadow: 0 0 8px rgba(244,208,63,0.5);
}

.couplet::before {
    top: 10px;
}

.couplet::after {
    bottom: 10px;
}

.couplet-content {
    position: relative;
    z-index: 1;
}

.couplet-text {
    text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(244,208,63,0.4);
    background: linear-gradient(180deg, #fff4c1 0%, #f4d03f 50%, #d9a10f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    height: 100%; /* Fill container */
    align-items: center; /* PC端内容居中 */
}

/* 手机端：包裹层不设固定宽高，禁止横向滚动，全屏退出后仍保持移动端布局 */
body.is-mobile .pc-viewport-fit,
body.is-mobile .pc-scale-inner {
    max-width: 100%;
    overflow-x: hidden;
}
body.is-mobile .pc-scale-inner {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
}

/* 手机设备在任何视口宽度下都使用移动端布局（含横屏/全屏退出后） */
body.is-mobile .pc-viewport-fit {
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
}
body.is-mobile .main-container {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
body.is-mobile .center-content {
    margin: 0 !important;
    width: 100% !important;
}
body.is-mobile .live-area {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vw * 9 / 16) !important;
    padding-bottom: 0 !important;
    flex: 0 0 auto !important;
}
body.is-mobile .banner-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* PC端视口适配：仅非手机设备且宽屏时生效，整页缩放以完整显示（避免手机横屏误用） */
@media screen and (min-width: 769px) {
    body:not(.is-mobile) .pc-viewport-fit {
        position: relative;
        width: 100vw;
        height: 100vh;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    body:not(.is-mobile) .pc-scale-inner {
        width: 1400px;
        height: 1200px;
        flex-shrink: 0;
        transform-origin: center center;
        /* transform 由 JS 根据视口计算并设置 */
    }
    body:not(.is-mobile) .pc-viewport-fit .main-container {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 20px 0;
    }
}

/* PC端banner居中 */
@media screen and (min-width: 769px) {
    .banner-container {
        margin-left: auto;
        margin-right: auto;
    }
}

/* 标题：PC端和手机端都显示，样式一致 */
.mobile-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(90deg, #8B0000 0%, #DC143C 50%, #8B0000 100%);
    color: #FFD700;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    z-index: 5;
}

/* Banners */
.banner-container {
    width: 100%;
    /* 高度通过JavaScript动态设置，基于屏幕宽度 * 3/5 */
    /* 背景设置为透明，让body的背景图显示在留白区域 */
    background-color: transparent;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0; /* Prevent shrinking */
}

.bottom-banner {
    margin-top: 20px;
    margin-bottom: 0;
}

.banner-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.banner-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* background-size和background-position通过JavaScript动态设置 */
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.banner-slide.active {
    opacity: 1;
}

/* Live Area */
.live-area {
    width: 100%;
    background-color: #000;
    flex: 1; /* Take remaining space */
    min-height: 0; /* Allow shrinking if needed, but flex:1 usually handles it */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 8px;
}

/* PC端直播区域固定16:9宽高比，最大宽度1200px */
@media screen and (min-width: 769px) {
    .live-area {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        /* 16:9宽高比：高度 = 宽度 * 9/16 */
        height: 0;
        padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
        position: relative;
        flex: 0 0 auto;
    }
    
    .player-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Countdown Timer */
.countdown-container {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, rgba(167, 24, 24, 0.95) 0%, rgba(139, 13, 13, 0.95) 100%);
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    display: none; /* PC端默认隐藏 */
}

.countdown-title {
    font-size: 24px;
    font-weight: bold;
    color: #f4d03f;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(244, 208, 63, 0.5);
    letter-spacing: 2px;
}

.countdown-time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.countdown-number {
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #f4d03f;
    box-shadow: 0 0 15px rgba(244, 208, 63, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    min-width: 70px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-size: 16px;
    color: #f4d03f;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.countdown-separator {
    font-size: 36px;
    font-weight: bold;
    color: #f4d03f;
    text-shadow: 0 0 10px rgba(244, 208, 63, 0.6);
    margin: 0 5px;
}

.countdown-date {
    font-size: 18px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    body {
        overflow: hidden; /* Also prevent scrolling on mobile if fitting to screen */
        /* 移动端背景图片：使用bg_1.jpg，确保填满屏幕 */
        background-image: url('images/bg_1.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        /* 移动端不使用fixed，避免在某些浏览器中出现问题 */
        background-attachment: scroll;
        /* 确保背景图片在移动端也能正确显示 */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    .decoration {
        width: 60px;
        height: 60px;
        border: none;
    }
    
    .top-left { top: 5px; left: 5px; }
    .top-right { top: 5px; right: 5px; }
    .bottom-left { bottom: 5px; left: 5px; }
    .bottom-right { bottom: 5px; right: 5px; }

    .main-container {
        flex-direction: column;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .couplet {
        display: none;
    }

    .center-content {
        margin: 0;
        width: 100%;
    }

    .mobile-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 15px 20px;
        background: linear-gradient(90deg, #8B0000 0%, #DC143C 50%, #8B0000 100%);
        color: #FFD700;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
        z-index: 5;
    }

    .banner-container {
        flex: 0 0 auto; /* 固定高度区域，不参与剩余空间分配 */
        /* 宽度占满屏幕，高度按宽高比 5:2 = 宽度 * 2/5 */
        width: 100%;
        max-width: 100%;
        height: calc(100vw * 2 / 5); /* 5:2 宽高比，100vw 仅此处用于比例计算 */
        margin: 0;
        border-radius: 0;
        /* 背景透明，显示body的背景图 */
        background-color: transparent;
    }
    
    .banner-wrapper {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .banner-slide {
        width: 100% !important;
        height: 100% !important;
        /* background-size和background-position通过JavaScript动态设置 */
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .live-area {
        width: 100%;
        /* Calculation: 100vw * (9/16) */
        height: calc(100vw * 9 / 16); 
        flex: 0 0 auto; /* Fixed height based on calc */
        border-radius: 0;
        /* 去除手机端焦点产生的黄色虚线边框，避免右侧缺失的 outline 显示 */
        outline: none;
        box-shadow: none;
    }
    .live-area:focus,
    .live-area:focus-within {
        outline: none;
        box-shadow: none;
    }
    
    .bottom-banner {
        margin-top: 0;
    }

    .lantern-group .lantern {
        width: 44px;
        height: 66px;
        top: 28px;
    }

    .lantern-group .rope {
        height: 28px;
    }

    .firecracker-group .firecracker {
        width: 54px;
        height: 54px;
    }

    .firecracker-group .fuse {
        bottom: 50px;
        left: 55%;
    }

    .firecracker-group .explosion {
        bottom: 48px;
        left: calc(55% + 0px);
    }

    /* 手机端倒计时样式 */
    .countdown-container {
        display: block; /* 手机端显示 */
        padding: 15px 10px;
        margin: 15px 0;
    }

    .countdown-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .countdown-time {
        gap: 5px;
        margin-bottom: 12px;
    }

    .countdown-item {
        min-width: 50px;
    }

    .countdown-number {
        font-size: 32px;
        padding: 8px 12px;
        min-width: 50px;
        border-width: 1.5px;
    }

    .countdown-label {
        font-size: 12px;
        margin-top: 3px;
    }

    .countdown-separator {
        font-size: 24px;
        margin: 0 2px;
    }

    .countdown-date {
        font-size: 14px;
    }
}