@charset "UTF-8";
/* ==========================================================================
   lhc2230 一比一复刻：原站样式表逐字拼接
   1) style.css        —— 原站外部样式表，未改一字
   2) inline-index.css —— 原站首页内联 <style> 块（按文档顺序），未改一字
   图片引用 ../images/* 已随包提供，路径与原始一致。
   ========================================================================== */
@charset "utf-8";
html {
    background-size: 100%;
    background: url("../images/b-g.jpg") no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

body {
    max-width: 720px;
    margin: 0 auto;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    font-weight: bold;
    transition: all 0.3s ease;
    /* APP安全區域適配（劉海屏/水滴屏） */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* iOS兼容寫法 */
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

.header {
    position: fixed;
    z-index: 99;
    width: 100%;
    max-width: 720px;
    height: 133px;
}

.logo img {
    width: 100%;
    max-width: 720px;
    height: 85px;
    display: block;
}

.logo-box {
    height: 84px;
}

.header .bank {
    position: absolute;
    top: 25%;
    right: 20px;
    width: 100px;
    height: 40px;
}

.header .bank a {
    display: block;
    color: #fff;
    font-size: 12pt;
    text-align: center;
}

.banner {
    padding-top: 0px;
    max-width: 720px;
    height: 192px;
}

.banner2 {
    padding-top: 0px;
    max-width: 720px;
    height: 192px;
}

.banner img {
    width: 100%;
}

.tips {
    height: 40px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding-left: 64px;
    padding-right: 22px;
    line-height: 40px;
    color: #1565c0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.2);
    transition: all 0.3s ease;
}

.tips:hover {
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.center-1 {
    background: #ffffff;
    padding-bottom: 12px;
}

.center-1 table {
    border: solid 3px rgba(74, 144, 226, 0.3);
    width: 95%;
    margin: auto;
    box-shadow: 
        0 10px 30px rgba(74, 144, 226, 0.35),
        0 5px 15px rgba(74, 144, 226, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -1px 3px rgba(74, 144, 226, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(248, 251, 255, 0.5) 50%, rgba(240, 248, 255, 0.5) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.center-1 table::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.5), transparent);
}

.center-1 table:hover {
    box-shadow: 
        0 15px 40px rgba(74, 144, 226, 0.45),
        0 8px 20px rgba(74, 144, 226, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 251, 255, 0.6) 50%, rgba(240, 248, 255, 0.6) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.center-1 td {
    font-size: 22px;
    height: 50px;
    border-right: 1px solid rgba(74, 144, 226, 0.2);
    border-bottom: 1px solid rgba(74, 144, 226, 0.2);
    text-align: center;
    transition: all 0.3s ease;
}

.center-1 td:hover {
    background-color: rgba(74, 144, 226, 0.05);
}

/* 二十四碼錶格特殊樣式 - 中間列可換行 */
.haoma-table td:nth-child(2) {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5;
    padding: 8px 5px;
    font-size: 18px;
}

.haoma-table tr {
    height: auto !important;
}

/* 移動端二十四碼樣式優化 */
@media (max-width: 768px) {
    .haoma-table td:nth-child(2) {
        font-size: 14px;
        padding: 6px 3px;
        line-height: 1.4;
    }
}

.bbs {
    background: #ffffff;
}

.bbs-box {
    width: 95%;
    margin: auto;
    position: relative;
    box-shadow: 
        0 8px 25px rgba(74, 144, 226, 0.3),
        0 4px 12px rgba(74, 144, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    margin-top: 12px;
    padding-bottom: 12px;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 2px solid rgba(74, 144, 226, 0.15);
}

.bbs-box:hover {
    box-shadow: 
        0 12px 35px rgba(74, 144, 226, 0.4),
        0 6px 18px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.line-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../images/7.jpg) repeat-x center / auto 100%;
    height: 12px;
}

.line-bottom {
    top: auto;
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
    background: url(../images/7.jpg) repeat-x center / auto 100%;
    height: 12px;
}

.line-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 100%;
    background: url(../images/8.jpg) repeat-y center / 100% auto;
}

.line-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: url(../images/8.jpg) repeat-y center / 100% auto;
}

.bbs-box table {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 249, 255, 0.5) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
}

.bbs-box tr {
    height: 40px;
    text-align: center;
}

.bbs-box a:hover {
    text-decoration: underline;
    color: #4facfe;
    transition: all 0.3s ease;
}

.bbs-box td a {
    color: #666;
    font-size: 24px;
    text-align: Center;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.bbs-box td a:hover {
    color: #4facfe;
    transform: scale(1.05);
}

.bbs-box td {
    line-height: 40px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    transition: all 0.3s ease;
}

.bbs-box td:hover {
    background-color: rgba(74, 144, 226, 0.05);
}

.qs-red {
    display: inline-block;
    width: 70px;
    height: 30px;
    line-height: 30px;
    border-radius: 18px;
    background: linear-gradient(145deg, #4facfe 0%, #3f9cee 50%, #00f2fe 100%);
    color: #fff;
    box-shadow: 
        0 6px 18px rgba(79, 172, 254, 0.45),
        0 3px 10px rgba(79, 172, 254, 0.35),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.qs-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.qs-red:hover::before {
    left: 100%;
}

.qs-red:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 10px 25px rgba(79, 172, 254, 0.6),
        0 5px 15px rgba(79, 172, 254, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.qs-red:active {
    transform: translateY(-1px) scale(1);
    box-shadow: 
        0 4px 12px rgba(79, 172, 254, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.center-2 {
    background: url(../images/bg_09.jpg) no-repeat center / 100% 100%;
    padding-bottom: 12px;
}

.center-2 table {
    width: 95%;
    margin: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(230, 245, 255, 0.85) 100%);
    padding: 2px;
    margin-bottom: 4px;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(74, 144, 226, 0.25);
    transition: all 0.3s ease;
}

.center-2 table:hover {
    box-shadow: 0 5px 20px rgba(74, 144, 226, 0.35);
}

.center-2-onetd {
    border-right: 2px solid #fff;
    width: 70px;
    text-align: center;
    color: #ff2a48;
    height: 85px;
}

.center-2-onetd span {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background: linear-gradient(145deg, #667eea 0%, #5a8cee 50%, #4facfe 100%);
    border-radius: 18px;
    box-shadow: 
        0 5px 15px rgba(102, 126, 234, 0.4),
        0 2px 8px rgba(102, 126, 234, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.center-2-onetd span::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.center-2-onetd span:hover::before {
    left: 100%;
}

.center-2-onetd span:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(102, 126, 234, 0.5),
        0 4px 12px rgba(102, 126, 234, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.center-2-twotd {
    text-align: center;
    color: #ff2a48;
    height: 40px;
}

.center-2-threetd {
    text-align: center;
    color: #ff2a48;
    height: 85px;
    width: 60px;
}

.center-bottom {
    background: #fff;
    padding: 10px 0;
}

.sxsx {
    background: none;
    padding: 0 8px;
}

.top-title {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #c41a1a;
    padding: 10px 0 6px;
    letter-spacing: 2px;
    border-bottom: 2px solid #c41a1a;
    margin: 0 8px 4px;
}

.sxdz {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sxsx ul {
    padding: 0;
}

.sxdz li {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 7px 10px;
    border-bottom: 1px dashed #e8e8e8;
}

.sxdz li:last-child {
    border-bottom: none;
}

.sx-name {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #c41a1a;
    margin-right: 10px;
    flex-shrink: 0;
}

/* 波色區域 */
.bose-section {
    padding: 0 8px;
    margin-top: 6px;
}

.bose-title {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #c41a1a;
    padding: 10px 0 6px;
    letter-spacing: 2px;
    border-bottom: 2px solid #c41a1a;
    margin: 0 8px 4px;
}

.bose-row {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px dashed #e8e8e8;
}

.bose-row:last-child {
    border-bottom: none;
}

.bose-label {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    margin-right: 10px;
    flex-shrink: 0;
}

.bose-label-red { background: #d63422; }
.bose-label-blue { background: #1a6fc4; }
.bose-label-green { background: #1a9e3f; }

.bg_red {
    background: linear-gradient(145deg, #ff6b6b 0%, #f55a6f 50%, #ee5a6f 100%);
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 16px;
    padding: 3px;
    box-shadow: 
        0 4px 12px rgba(238, 90, 111, 0.4),
        0 2px 6px rgba(238, 90, 111, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg_red:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 6px 18px rgba(238, 90, 111, 0.5),
        0 3px 10px rgba(238, 90, 111, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.bg_blue {
    background: linear-gradient(145deg, #4facfe 0%, #3f9cee 50%, #00f2fe 100%);
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 16px;
    padding: 3px;
    box-shadow: 
        0 4px 12px rgba(79, 172, 254, 0.4),
        0 2px 6px rgba(79, 172, 254, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg_blue:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 6px 18px rgba(79, 172, 254, 0.5),
        0 3px 10px rgba(79, 172, 254, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.bg_green {
    background: linear-gradient(145deg, #43e97b 0%, #3ee38a 50%, #38f9d7 100%);
    text-align: center;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 16px;
    padding: 3px;
    box-shadow: 
        0 4px 12px rgba(67, 233, 123, 0.4),
        0 2px 6px rgba(67, 233, 123, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bg_green:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 6px 18px rgba(67, 233, 123, 0.5),
        0 3px 10px rgba(67, 233, 123, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

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

.contentblock-table th {
    display: none;
}

.font {
    display: none;
}

.contentblock-table {
    width: 100%;
    margin: 0;
}

.contentblock-table tr {
    height: auto;
    border-bottom: none;
}

.contentblock-table span {
    margin: 10px
}

.history-content .contentblock-table td:nth-child(2) {
    line-height: 30px;
    padding-left: 5px;
}

.footer {
    background-color: #f5f4f1;
}

.footer p {
    color: #16137b;
    padding: 0px 20px 10px 20px;
    font-size: 16px;
    margin: 0;
}

.bbscenter {
    background: url(../images/bg_03.jpg) no-repeat center / 100% 100%;
    padding-bottom: 10px;
}

@media screen and (max-width: 720px) {
    .header {
        height: 90px;
    }
    .logo-box {
        height: 45px;
    }
    .logo img {
        height: 44px;
    }
    .banner {
        padding-top: 44px;
        height: 100px;
    }
    .banner2 {
        padding-top: 10px;
        height: 100px;
    }
    .header .bank {
        top: 10%;
        right: 10px;
        width: 60px;
        height: 35px;
    }
    .sxdz li {
        padding: 5px 8px;
    }
    .sx-name {
        font-size: 13px;
        min-width: 24px;
        margin-right: 6px;
    }
    .bose-row {
        padding: 5px 8px;
        flex-wrap: wrap;
    }
    .bose-label {
        font-size: 11px;
        min-width: 30px;
        margin-right: 6px;
        margin-bottom: 2px;
    }
    .top-title, .bose-title {
        font-size: 13px;
        letter-spacing: 1px;
    }
    .bg_red {
        border-radius: 3px;
        font-weight: normal;
        font-size: 10px;
    }
    .bg_blue {
        border-radius: 3px;
        font-weight: normal;
        font-size: 10px;
    }
    .bg_green {
        border-radius: 3px;
        font-weight: normal;
        font-size: 10px;
    }
    .center-1 td {
        font-size: 18px;
    }
    .center-1 table {
        width: 85%;
    }
    .bbs-box table {
        font-size: 14px;
    }
    .bbs-box {
        width: 85%;
    }
    .qs-red {
        width: 50px;
        height: 30px;
        font-size: 15px;
    }
    .bbs-box td a {
        font-size: 18px;
    }
    .tkfont td a {
        font-size: 16px;
    }
}

.bg-yellow {
            background-color: yellow;
            color: red;
        }
        .select-top {
            background: #a79587;
            text-align: center;
            height: 52px;
            padding-top: 4px;
        }

        .select-top ul {
            list-style: none;
            margin: 0;
            width: 100%;
            padding: 0;
            display: flex;
        }

        .select-top li {
            float: left;
            flex: 1;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-family: Yahei;
            cursor: pointer;
            border-radius: 12px;
            background: #9f9286;
            margin: 3px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        
        /* 選中狀態的動畫效果 */
        .select-top li.tab-active {
            animation: tabPulse 2s ease-in-out infinite;
        }
        
        /* 跑馬燈光效動畫 */
        .select-top li.tab-active::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 100%;
            height: 200%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 255, 0.6),
                rgba(255, 255, 255, 0.3),
                transparent
            );
            animation: marqueeSweep 2.5s linear infinite;
            transform: skewX(-20deg);
            z-index: 3;
        }
        
        /* 流動邊框效果 */
        .select-top li.tab-active::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(
                45deg,
                #ff6b6b,
                #4ecdc4,
                #45b7d1,
                #f7d794,
                #ff6b6b
            );
            background-size: 300% 300%;
            border-radius: 12px;
            z-index: -1;
            animation: borderFlow 3s linear infinite;
            filter: blur(4px);
        }
        
        /* 內部漸變流動 */
        .select-top li.tab-active {
            background: linear-gradient(
                -45deg,
                #667eea,
                #5a8cee,
                #4facfe,
                #667eea
            ) !important;
            background-size: 200% 200% !important;
            animation: gradientShift 3s ease infinite, tabPulse 2s ease-in-out infinite !important;
        }
        
        @keyframes marqueeSweep {
            0% {
                left: -100%;
            }
            100% {
                left: 200%;
            }
        }
        
        @keyframes borderFlow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        @keyframes tabPulse {
            0%, 100% {
                box-shadow: 
                    0 8px 20px rgba(102, 126, 234, 0.45),
                    0 4px 12px rgba(102, 126, 234, 0.35),
                    inset 0 2px 4px rgba(255, 255, 255, 0.3),
                    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
            }
            50% {
                box-shadow: 
                    0 12px 30px rgba(102, 126, 234, 0.6),
                    0 6px 18px rgba(102, 126, 234, 0.5),
                    inset 0 2px 4px rgba(255, 255, 255, 0.5),
                    inset 0 -2px 6px rgba(0, 0, 0, 0.2),
                    0 0 40px rgba(102, 126, 234, 0.4);
            }
        }

        .select-top a {
            color: #7a573e;
        }
		.ziliao span {
            background: linear-gradient(145deg, #ffeb3b 0%, #fdd835 100%);
            color: #d32f2f;
            font-weight: 800;
            font-size: 100%;
            padding: 2px 8px;
            border-radius: 6px;
            box-shadow: 
                0 2px 8px rgba(255, 235, 59, 0.4),
                0 1px 4px rgba(255, 235, 59, 0.3),
                inset 0 1px 2px rgba(255, 255, 255, 0.7),
                inset 0 -1px 3px rgba(253, 216, 53, 0.3);
            border: 2px solid rgba(255, 235, 59, 0.7);
            text-shadow: 
                0 1px 1px rgba(255, 255, 255, 0.8),
                0 1px 2px rgba(0, 0, 0, 0.1);
            display: inline-block;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            position: relative;
        }
        
        .ziliao span::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(145deg, rgba(255, 235, 59, 0.2), rgba(255, 235, 59, 0.1));
            border-radius: 10px;
            z-index: -1;
            filter: blur(4px);
            opacity: 0.6;
        }
        
        @keyframes highlightPulse {
            0%, 100% {
                box-shadow: 
                    0 2px 8px rgba(255, 235, 59, 0.4),
                    0 1px 4px rgba(255, 235, 59, 0.3),
                    inset 0 1px 2px rgba(255, 255, 255, 0.7),
                    inset 0 -1px 3px rgba(253, 216, 53, 0.3);
            }
            50% {
                box-shadow: 
                    0 3px 10px rgba(255, 235, 59, 0.5),
                    0 2px 6px rgba(255, 235, 59, 0.4),
                    inset 0 1px 2px rgba(255, 255, 255, 0.8),
                    inset 0 -1px 3px rgba(253, 216, 53, 0.4);
            }
        }
        
        .ziliao span:hover {
            transform: scale(1.05) translateY(-1px);
            box-shadow: 
                0 4px 12px rgba(255, 235, 59, 0.55),
                0 2px 6px rgba(255, 235, 59, 0.45),
                inset 0 1px 2px rgba(255, 255, 255, 0.85),
                inset 0 -1px 3px rgba(253, 216, 53, 0.4);
            border-color: rgba(255, 235, 59, 0.85);
        }
        
        .ziliao span:hover::after {
            filter: blur(6px);
            opacity: 0.8;
        }
/*內容標題*/
.conbiao,
  .conbiaoimg {
    max-width: 720px;
    position: relative;
    color: white; 
    text-align: center; 
    padding: 28px; 
	background-size: 100% 100%;
  }
  .conbiao {
    background-image: url("../images/biao.jpg");
  
    background-position: center;
  }
  .conbiaoimg {
    background-image: url("../images/biaoimg.jpg");
   
    background-position: center;
  }
  .biaotext {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    font-size: 28px;
    margin: 12px;
    letter-spacing: 1px;
    padding-left: 15px;
    padding-right: 1px;
  }
@media screen and (max-width: 700px){
.conbiao,.conbiaoimg {
    padding: 20px;
  }	
 	
.biaotext {
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    font-size: 16px;
    margin: 12px;
    letter-spacing: 1px;
    padding-left: 9px;
    padding-right: 0px;
	} 	
} 
	
/*圖庫*/
.juzhong{
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
width: 100px;
height: 100px;} 

#idhovertree {
position: absolute;
}


.tango {
 display: none;
 }
.tan iframe {
position: fixed;
z-index: 99999993;
width: 100%;
height:100%;
left: 0;
top: 0;
border: medium none;
background-color:rgb(255,255,255);
}
.lishi {
    text-decoration: none;
    color: #000000;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    font-weight: bold;
    border-radius: 8px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
}

.lishi:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(67, 233, 123, 0.5);
}

/* 全局增強效果 */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

* {
    -webkit-tap-highlight-color: transparent;
    /* 優化觸摸體驗 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 允許輸入框選擇文字 */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* 優化滾動性能（已合併到上面的html規則） */

/* 防止iOS長按彈出菜單 */
a, button, img {
    -webkit-touch-callout: none;
}

/* APP專用優化 */
body {
    /* 防止過度滾動（橡皮筋效果）- 可選 */
    overscroll-behavior: contain;
    -webkit-overscroll-behavior: contain;
}

/* 確保固定定位在APP中正常工作 */
.header {
    position: -webkit-sticky;
    position: sticky;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 優化動畫性能 */
.pop_body, .select-top li, .qs-red, .bg_red, .bg_blue, .bg_green {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 懸停時的選項卡效果 */
.select-top li {
    cursor: pointer;
}

.select-top li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
    z-index: 1;
}

.select-top li:hover::before {
    left: 100%;
}

.select-top li img,
.select-top li font {
    position: relative;
    z-index: 2;
}

.select-top li:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* 彈窗層次效果 */
#jinfang {
    animation: fadeInBg 0.3s ease-out;
}

@keyframes fadeInBg {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

/* 小屏手機優化（iPhone SE等） */
@media screen and (max-width: 375px) {
    .pop_body {
        width: 95%;
        max-width: 350px;
    }
    
    .tk_btn button {
        padding: 10px 30px;
        font-size: 15px;
    }
    
    .center-1 td {
        font-size: 16px;
    }
    
    .bbs-box td a {
        font-size: 16px;
    }
    
    body {
        font-size: 14px;
    }
}

/* 超大屏手機/平板優化 */
@media screen and (min-width: 768px) {
    body {
        max-width: 720px;
    }
}

/* 回到頂部按鈕 */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.back-to-top:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 移動端優化 */
@media screen and (max-width: 768px) {
    .back-to-top {
        bottom: 60px;
        right: 15px;
        width: 44px;
        height: 44px;
    }
}
/* 允許全部資料表格文字選擇和複製 */
.center-1 table,
.center-1 table *,
.bbs-box table,
.bbs-box table * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}



/* ===== 原站首页内联样式（文档顺序） ===== */

        /* 快速導航樣式 */
        .quick-nav {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            padding: 10px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 0 0 12px 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 0;
        }
        
        /* 讓最後一個按鈕拉長佔滿整行 */
        .quick-nav-item:last-child:nth-child(5n+1) {
            grid-column: 1 / 6;
        }
        
        .quick-nav-item {
            background: #ffffff;
            border: 2px solid #c8102e;
            border-radius: 8px;
            padding: 6px 5px;
            text-align: center;
            font-size: 13px;
            font-weight: bold;
            color: #c8102e;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 2px 8px rgba(200, 16, 46, 0.15);
            position: relative;
            overflow: hidden;
            min-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .quick-nav-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #c8102e 0%, #a00d26 100%);
            opacity: 0;
            transition: opacity 0.25s ease;
            z-index: 0;
        }
        
        .quick-nav-item span {
            position: relative;
            z-index: 1;
        }
        
        .quick-nav-item:hover {
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(200, 16, 46, 0.3);
            border-color: #c8102e;
        }
        
        .quick-nav-item:hover::before {
            opacity: 1;
        }
        
        .quick-nav-item:active {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(200, 16, 46, 0.25);
        }
        
        /* 移動端適配 */
        @media (max-width: 480px) {
            .quick-nav {
                gap: 6px;
                padding: 8px;
            }
            
            .quick-nav-item {
                padding: 5px 4px;
                font-size: 12px;
                min-height: 30px;
            }
        }
        
        @media (max-width: 360px) {
            .quick-nav-item {
                font-size: 11px;
                padding: 4px 3px;
                min-height: 28px;
            }
        }
        
        /* 調整header高度以容納快速導航 */
        .header {
            height: auto !important;
        }

        /* 開獎區域手機端高度 */
        @media (max-width: 768px) {
            .kjq iframe {
                height: 240px !important;
            }
        }
        
        /* 移動端優化：調整字體大小以適應屏幕 */
        @media (max-width: 600px) {
            .select-top li {
                padding: 3px 4px;
            }
            .select-top li font {
                font-size: 13px;
            }
            .select-top li img {
                width: 26px !important;
                margin-right: 3px;
            }
        }
        
        @media (max-width: 450px) {
            .select-top li {
                padding: 3px 3px;
            }
            .select-top li font {
                font-size: 12px;
            }
            .select-top li img {
                width: 24px !important;
                margin-right: 2px;
            }
        }
        
        @media (max-width: 380px) {
            .select-top li {
                padding: 2px 2px;
            }
            .select-top li font {
                font-size: 11px;
            }
            .select-top li img {
                width: 22px !important;
                margin-right: 2px;
            }
        }
        
        @media (max-width: 340px) {
            .select-top li {
                padding: 2px 2px;
            }
            .select-top li font {
                font-size: 10px;
            }
            .select-top li img {
                width: 20px !important;
                margin-right: 1px;
            }
        }
        
        /* 重新加載按鈕樣式 */
        .reload-btn {
            position: fixed;
            right: 15px;
            top: 60px;
            width: 36px;
            height: 36px;
            background: linear-gradient(145deg, #ff6b6b 0%, #ee5a6f 100%);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 
                0 4px 12px rgba(255, 107, 107, 0.4),
                0 2px 6px rgba(238, 90, 111, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 99999;
        }
        
        .reload-btn:hover {
            transform: scale(1.1);
            box-shadow: 
                0 6px 18px rgba(255, 107, 107, 0.5),
                0 3px 10px rgba(238, 90, 111, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.4),
                inset 0 -2px 4px rgba(0, 0, 0, 0.25);
            background: linear-gradient(145deg, #ee5a6f 0%, #d84a5f 100%);
        }
        
        .reload-btn:active {
            transform: scale(0.95);
            box-shadow: 
                0 2px 8px rgba(255, 107, 107, 0.3),
                inset 0 3px 6px rgba(0, 0, 0, 0.3);
        }
        
        .reload-btn svg {
            width: 16px;
            height: 16px;
            fill: white;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
            transition: transform 0.6s ease;
        }
        
        .reload-btn:hover svg {
            transform: rotate(180deg);
        }
        
        .reload-btn.rotating svg {
            animation: rotate-animation 0.8s ease-in-out;
        }
        
        @keyframes rotate-animation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* 移動端適配 */
        @media (max-width: 768px) {
            .reload-btn {
                width: 30px;
                height: 30px;
                right: 10px;
                top: 10px;
                opacity: 0.5;
                transition: top 0.3s ease, opacity 0.3s ease;
                box-shadow: 
                    0 3px 10px rgba(255, 107, 107, 0.4),
                    0 2px 5px rgba(238, 90, 111, 0.3),
                    inset 0 1px 3px rgba(255, 255, 255, 0.3),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
            }
            
            .reload-btn:hover {
                background: linear-gradient(145deg, #ee5a6f 0%, #d84a5f 100%);
                box-shadow: 
                    0 4px 12px rgba(255, 107, 107, 0.5),
                    0 2px 8px rgba(238, 90, 111, 0.4),
                    inset 0 1px 3px rgba(255, 255, 255, 0.4),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
            }
            
            .reload-btn svg {
                width: 14px;
                height: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .reload-btn {
                width: 28px;
                height: 28px;
                right: 8px;
                top: 8px;
            }

            .reload-btn svg {
                width: 13px;
                height: 13px;
            }
        }

        @media (max-width: 360px) {
            .reload-btn {
                width: 26px;
                height: 26px;
                right: 8px;
                top: 8px;
            }

            .reload-btn svg {
                width: 12px;
                height: 12px;
            }
        }

        /* 滾動後下移 */
        @media (max-width: 768px) {
            .reload-btn.scrolled {
                top: 80px;
            }
            .reload-btn.hidden {
                opacity: 0;
                pointer-events: none;
            }
            .back-to-top.show {
                opacity: 0.5;
            }
        }
        /* 三彩種資料區標題 - 春節中國風 */
        body[data-cai] .biaotext {
            bottom: -10px !important;
            position: relative !important;
            z-index: 2 !important;
            margin: 0 8px !important;
            border-radius: 6px !important;
            padding: 8px 14px !important;
            letter-spacing: 2px !important;
            font-weight: bold !important;
            background:
                repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(255,215,0,0.08) 8px, rgba(255,215,0,0.08) 10px),
                repeating-linear-gradient(0deg, transparent 0px, transparent 8px, rgba(255,215,0,0.08) 8px, rgba(255,215,0,0.08) 10px),
                linear-gradient(135deg, #B71C1C 0%, #8B0000 100%) !important;
            border: 3px solid #D4A017 !important;
            outline: 2px solid #8B0000 !important;
            outline-offset: -6px !important;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
            box-shadow: 0 4px 12px rgba(139,0,0,0.4), inset 0 0 15px rgba(255,215,0,0.06) !important;
        }
        body[data-cai="am"] .biaotext { color: #FFD700 !important; }
        body[data-cai="am2300"] .biaotext { color: #ADFF2F !important; }
        body[data-cai="xg"] .biaotext { color: #B0E0FF !important; }
        /* 切換按鈕邊框跟隨資料區顏色 */
        body[data-cai="am"] .select-top li.tab-active { border-color: #2196F3 !important; }
        body[data-cai="am2300"] .select-top li.tab-active { border-color: #FF9800 !important; }
        body[data-cai="xg"] .select-top li.tab-active { border-color: #9C27B0 !important; }
        body.festive[data-cai="am"] .select-top li.tab-active { border-color: #FFD700 !important; }
        body.festive[data-cai="am2300"] .select-top li.tab-active { border-color: #ADFF2F !important; }
        body.festive[data-cai="xg"] .select-top li.tab-active { border-color: #B0E0FF !important; }

        body.festive[data-cai="am"] .center-1 table,
        body.festive[data-cai="am"] .bbs-box { border: 4px solid #FFD700 !important; }
        body.festive[data-cai="am2300"] .center-1 table,
        body.festive[data-cai="am2300"] .bbs-box { border: 4px solid #ADFF2F !important; }
        body.festive[data-cai="xg"] .center-1 table,
        body.festive[data-cai="xg"] .bbs-box { border: 4px solid #B0E0FF !important; }
        body.festive[data-cai="am"] .center-1,
        body.festive[data-cai="am"] .bbs { background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%) !important; }
        body.festive[data-cai="am2300"] .center-1,
        body.festive[data-cai="am2300"] .bbs { background: linear-gradient(135deg, #f1ffd4 0%, #e8ffc1 100%) !important; }
        body.festive[data-cai="xg"] .center-1,
        body.festive[data-cai="xg"] .bbs { background: linear-gradient(135deg, #e3f2fd 0%, #d6ecff 100%) !important; }
        body.festive[data-cai="am"] .quick-nav-item { border-color: #FFD700 !important; color: #cf1322 !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(207,19,34,0.15) !important; }
        body.festive[data-cai="am2300"] .quick-nav-item { border-color: #ADFF2F !important; color: #cf1322 !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(207,19,34,0.15) !important; }
        body.festive[data-cai="xg"] .quick-nav-item { border-color: #B0E0FF !important; color: #cf1322 !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(207,19,34,0.15) !important; }
    

/* ==== block ==== */

        /* ========== 春節喜慶主題（除夕至正月十五） ========== */

        /* 頁面背景 */
        body.festive {
            background: linear-gradient(180deg, #fef8f0 0%, #fdecd0 50%, #fce4c0 100%) !important;
            background-attachment: fixed !important;
        }

        /* 頂部選項卡區域 */
        .select-top {
            background: rgba(167, 149, 135, 0.8) !important;
        }
        .lottery-title-text {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 0;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            line-height: 1;
        }
        .lottery-title-text img {
            width: 30px;
            height: 30px;
            display: block;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }
        body.festive .select-top {
            background: linear-gradient(145deg, rgba(139,37,0,0.8) 0%, rgba(107,26,0,0.8) 100%) !important;
        }

        /* 選項卡按鈕 - 未選中 */
        body.festive .select-top li {
            background: linear-gradient(145deg, #a03020 0%, #8b2500 100%) !important;
            border: 1px solid rgba(250, 173, 20, 0.3);
        }

        /* 選項卡按鈕 - 選中態（覆蓋JS設置的inline樣式） */
        body.festive .select-top li.tab-active {
            background: linear-gradient(-45deg, #cf1322, #a8071a, #cf1322, #a8071a) !important;
            background-size: 200% 200% !important;
            border: 2px solid #faad14 !important;
            box-shadow: 0 0 20px rgba(250, 173, 20, 0.4), 0 4px 12px rgba(168, 7, 26, 0.4), inset 0 2px 4px rgba(255,255,255,0.2) !important;
        }

        body.festive .select-top li.tab-active::before {
            background: linear-gradient(90deg, transparent, rgba(250, 219, 20, 0.4), transparent) !important;
        }

        body.festive .select-top li.tab-active::after {
            background: linear-gradient(90deg, transparent, rgba(250, 219, 20, 0.3), rgba(255,255,255,0.5), rgba(250, 219, 20, 0.3), transparent) !important;
        }

        @keyframes festiveTabPulse {
            0%, 100% {
                box-shadow: 0 0 15px rgba(250, 173, 20, 0.3), 0 4px 12px rgba(168, 7, 26, 0.3), inset 0 2px 4px rgba(255,255,255,0.2);
            }
            50% {
                box-shadow: 0 0 30px rgba(250, 173, 20, 0.5), 0 6px 18px rgba(168, 7, 26, 0.5), inset 0 2px 4px rgba(255,255,255,0.3), 0 0 40px rgba(250, 173, 20, 0.3);
            }
        }

        body.festive .select-top li.tab-active {
            animation: gradientShift 3s ease infinite, festiveTabPulse 2s ease-in-out infinite !important;
        }

        /* 快速導航 */
        body.festive .quick-nav {
            box-shadow: 0 4px 12px rgba(168, 7, 26, 0.1) !important;
        }

        body.festive .quick-nav-item {
            background: linear-gradient(145deg, #fff5e6, #ffe0b8) !important;
            box-shadow: 0 2px 8px rgba(212, 162, 78, 0.2) !important;
        }

        body.festive .quick-nav-item::before {
            background: linear-gradient(135deg, #cf1322 0%, #a8071a 100%) !important;
        }

        body.festive .quick-nav-item:hover {
            color: #fadb14 !important;
            border-color: #faad14 !important;
            box-shadow: 0 6px 16px rgba(168, 7, 26, 0.3) !important;
        }

        /* 公告欄 */
        body.festive .tips {
            background: linear-gradient(135deg, #fef6ec 0%, #fdefd6 100%) !important;
            color: #cf1322 !important;
            border: 1px solid #e8c07a;
            box-shadow: 0 2px 10px rgba(212, 162, 78, 0.2) !important;
        }

        /* 刷新按鈕 */
        body.festive .reload-btn {
            background: linear-gradient(145deg, #cf1322 0%, #a8071a 100%) !important;
            border: 2px solid rgba(250, 173, 20, 0.5) !important;
            box-shadow: 0 4px 12px rgba(168, 7, 26, 0.4), 0 2px 6px rgba(168, 7, 26, 0.3), inset 0 2px 4px rgba(255,255,255,0.2) !important;
        }

        body.festive .reload-btn:hover {
            background: linear-gradient(145deg, #a8071a 0%, #820612 100%) !important;
            box-shadow: 0 6px 18px rgba(168, 7, 26, 0.5), 0 3px 10px rgba(168, 7, 26, 0.4) !important;
        }

        /* 數據表格 */
        body.festive .center-1 table {
            border: 3px solid rgba(212, 162, 78, 0.5) !important;
            background: linear-gradient(145deg, rgba(255, 248, 240, 0.6) 0%, rgba(253, 239, 214, 0.6) 100%) !important;
            box-shadow: 0 10px 30px rgba(168, 7, 26, 0.12), 0 5px 15px rgba(212, 162, 78, 0.2), inset 0 2px 4px rgba(255,255,255,0.9) !important;
        }

        body.festive .center-1 table::before {
            background: linear-gradient(90deg, transparent, rgba(250, 173, 20, 0.5), transparent) !important;
        }

        body.festive .center-1 table:hover {
            box-shadow: 0 15px 40px rgba(168, 7, 26, 0.18), 0 8px 20px rgba(212, 162, 78, 0.3), inset 0 2px 4px rgba(255,255,255,1) !important;
        }

        body.festive .center-1 td {
            border-right-color: rgba(212, 162, 78, 0.2) !important;
            border-bottom-color: rgba(212, 162, 78, 0.2) !important;
        }

        body.festive .center-1 td:hover {
            background-color: rgba(250, 173, 20, 0.06) !important;
        }

        /* 資料高亮標籤 */
        body.festive .ziliao span {
            background: linear-gradient(145deg, #cf1322 0%, #a8071a 100%) !important;
            color: #fadb14 !important;
            border: 2px solid rgba(250, 173, 20, 0.6) !important;
            box-shadow: 0 2px 8px rgba(168, 7, 26, 0.35), inset 0 1px 2px rgba(255,255,255,0.15) !important;
            text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
        }

        body.festive .ziliao span::after {
            background: linear-gradient(145deg, rgba(168, 7, 26, 0.15), rgba(250, 173, 20, 0.1)) !important;
        }

        body.festive .ziliao span:hover {
            box-shadow: 0 4px 12px rgba(168, 7, 26, 0.45), inset 0 1px 2px rgba(255,255,255,0.2) !important;
            border-color: rgba(250, 173, 20, 0.8) !important;
        }

        /* 標題欄 */
        body.festive .conbiao,
        body.festive .conbiaoimg {
            position: relative;
        }

        body.festive .conbiao::after,
        body.festive .conbiaoimg::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #faad14, #cf1322, #faad14, #cf1322, #faad14);
            background-size: 200% 100%;
            animation: festiveBar 4s linear infinite;
        }

        @keyframes festiveBar {
            0% { background-position: 0% 0; }
            100% { background-position: 200% 0; }
        }

        /* BBS區域 */
        body.festive .bbs-box {
            border: 2px solid rgba(212, 162, 78, 0.4) !important;
            box-shadow: 0 8px 25px rgba(168, 7, 26, 0.1), 0 4px 12px rgba(212, 162, 78, 0.2), inset 0 1px 0 rgba(255,255,255,0.8) !important;
        }

        body.festive .bbs-box:hover {
            box-shadow: 0 12px 35px rgba(168, 7, 26, 0.15), 0 6px 18px rgba(212, 162, 78, 0.3), inset 0 1px 0 rgba(255,255,255,1) !important;
        }

        body.festive .bbs-box table {
            background: linear-gradient(135deg, rgba(255, 248, 240, 0.5) 0%, rgba(253, 239, 214, 0.5) 100%) !important;
        }

        body.festive .bbs-box td {
            border-color: rgba(212, 162, 78, 0.2) !important;
        }

        body.festive .bbs-box td:hover {
            background-color: rgba(250, 173, 20, 0.06) !important;
        }

        body.festive .bbs-box td a {
            color: #8c4a1a !important;
        }

        body.festive .bbs-box td a:hover {
            color: #cf1322 !important;
        }

        /* 按鈕樣式 */
        body.festive .qs-red {
            background: linear-gradient(145deg, #cf1322 0%, #a8071a 50%, #e84749 100%) !important;
            box-shadow: 0 6px 18px rgba(168, 7, 26, 0.4), 0 3px 10px rgba(168, 7, 26, 0.3), inset 0 1px 2px rgba(255,255,255,0.3) !important;
            border: 2px solid rgba(250, 173, 20, 0.4) !important;
        }

        body.festive .qs-red:hover {
            box-shadow: 0 10px 25px rgba(168, 7, 26, 0.5), 0 5px 15px rgba(168, 7, 26, 0.4) !important;
        }

        /* 生肖對照區域 */
        body.festive .center-bottom {
            background: linear-gradient(180deg, #fffdf8 0%, #fff8ee 100%) !important;
        }

        body.festive .top-title,
        body.festive .bose-title {
            color: #cf1322 !important;
            border-bottom-color: #cf1322 !important;
        }

        body.festive .sx-name {
            color: #cf1322 !important;
        }

        body.festive .sxdz li,
        body.festive .bose-row {
            border-bottom-color: rgba(212, 162, 78, 0.3) !important;
        }

        /* 頁腳 */
        body.festive .footer {
            background: linear-gradient(145deg, #fef8f0, #fdefd6) !important;
        }

        body.festive .footer p {
            color: #8c4a1a !important;
        }

        /* 回到頂部按鈕 */
        body.festive .back-to-top {
            background: rgba(168, 7, 26, 0.7) !important;
            border: 1px solid rgba(250, 173, 20, 0.4) !important;
        }

        body.festive .back-to-top:hover {
            background: rgba(168, 7, 26, 0.85) !important;
        }

        /* 彈窗背景 - 春節煙花夜空 */
        body.popup-cny #jinfang {
            background: linear-gradient(180deg, #0a0015 0%, #1a0005 30%, #2d0a0a 60%, #0a0015 100%) !important;
        }

        /* 彈窗背景 - 非春節按季節切換 */
        body.popup-normal.popup-season-spring #jinfang {
            background: linear-gradient(180deg, #1a0a12 0%, #2d1020 30%, #1f0815 60%, #120510 100%) !important;
        }

        body.popup-normal.popup-season-summer #jinfang {
            background: linear-gradient(180deg, #05080f 0%, #0a1225 40%, #0d0f1a 70%, #050810 100%) !important;
        }

        body.popup-normal.popup-season-autumn #jinfang {
            background: linear-gradient(180deg, #1a0e05 0%, #2a1508 35%, #1f1005 65%, #100800 100%) !important;
        }

        body.popup-normal.popup-season-winter #jinfang {
            background: linear-gradient(180deg, #080d18 0%, #0f1828 40%, #0a1220 70%, #060a15 100%) !important;
        }

        /* 彈窗內容區域 */
        body.popup-cny .pop_body,
        body.popup-normal .pop_body {
            background: linear-gradient(180deg, #fef8f0 0%, #fdefd6 100%) !important;
            border: 2px solid #d4a24e !important;
            box-shadow: 0 20px 60px rgba(168, 7, 26, 0.4), 0 10px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }

        /* 彈窗標題欄 */
        body.popup-cny .pop_body > div:first-child,
        body.popup-normal .pop_body > div:first-child {
            background: linear-gradient(145deg, #cf1322 0%, #a8071a 50%, #8b0000 100%) !important;
            border-bottom: 2px solid #faad14 !important;
            box-shadow: 0 4px 15px rgba(168, 7, 26, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important;
        }

        /* 彈窗標題文字 */
        body.popup-cny .pop_body > div:first-child span,
        body.popup-normal .pop_body > div:first-child span {
            color: #fadb14 !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
        }

        /* 彈窗關閉按鈕 */
        body.popup-cny .pop_body > div:first-child button,
        body.popup-normal .pop_body > div:first-child button {
            border-color: rgba(250, 173, 20, 0.5) !important;
        }

        /* 彈窗確認按鈕 */
        body.popup-cny .tk_btn .confirm,
        body.popup-normal .tk_btn .confirm {
            background: linear-gradient(145deg, #cf1322 0%, #a8071a 100%) !important;
            border: 2px solid rgba(250, 173, 20, 0.5) !important;
            color: #fadb14 !important;
            box-shadow: 0 4px 12px rgba(168, 7, 26, 0.3) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }
    

/* ==== block ==== */

   #jinfang{
       background: rgba(0, 0, 0, 0.5); 
       position: fixed;
       top: 0;
       left: 0; 
       bottom: 0; 
       width: 100%; 
       height: 100%; 
       z-index: 1000;
       display: none;
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
   } 
   .pop_body{
       background: #f2f2f2;
       text-align: center; 
       position: fixed; 
       top: 50%; 
       left: 50%; 
       transform: translateX(-50%) translateY(-50%);
       width: 85%;
       max-width: 420px;
       max-height: 70vh;
       border-radius: 16px;
       font-size: 14px;
       box-shadow: 
           0 20px 60px rgba(0, 0, 0, 0.3),
           0 10px 30px rgba(0, 0, 0, 0.2),
           0 5px 15px rgba(0, 0, 0, 0.15),
           inset 0 1px 0 rgba(255, 255, 255, 0.9);
       border: 1px solid rgba(0, 0, 0, 0.1);
       overflow: hidden;
       animation: popInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
       display: flex;
       flex-direction: column;
   }
   @keyframes popInScale {
       0% {
           opacity: 0;
           transform: translateX(-50%) translateY(-50%) scale(0.8);
       }
       100% {
           opacity: 1;
           transform: translateX(-50%) translateY(-50%) scale(1);
       }
   } 
   .pop_body p{
       color: gray; 
       padding: 3px; 
       text-align: left; 
       padding-left: 80px; 
       font-size: 11px;
   }
   
   /* 彈窗內容區域可滾動 */
   .pop_body > div:last-child {
       overflow-y: auto;
       overflow-x: hidden;
       max-height: calc(70vh - 36px);
   }
   
   /* 移動端適配 */
   @media (max-width: 480px) {
       .pop_body {
           width: 80%;
           max-width: 340px;
           max-height: 65vh;
           font-size: 12px;
       }
       
       .pop_body p {
           padding-left: 60px;
           font-size: 10px;
       }
       
       .pop_body > div:last-child {
           max-height: calc(65vh - 36px);
       }
   }
   
   @media (max-width: 360px) {
       .pop_body {
           width: 75%;
           max-width: 300px;
           max-height: 60vh;
       }
       
       .pop_body p {
           padding-left: 50px;
           font-size: 9px;
       }
       
       .pop_body > div:last-child {
           max-height: calc(60vh - 36px);
       }
   } 
   .outline{ 
       text-shadow: #f00 1px 0 0, #f00 0 1px 0, #f00 -1px 0 0, #f00 0 -1px 0; 
       -webkit-text-shadow: #f00 1px 0 0,#f00 0 1px 0,#f00 -1px 0 0,#f00 0 -1px 0; 
       -moz-text-shadow: #f00 1px 0 0,#f00 0 1px 0,#f00 -1px 0 0,#f00 0 -1px 0; 
       color: #F90; 
       font-size: 16px; 
       font-weight: bold; 
       letter-spacing: 1px;
   }
   
   @media (max-width: 480px) {
       .outline {
           font-size: 14px;
           letter-spacing: 0.5px;
       }
   } 
   .tk_btn{
       border-top: 1px solid rgba(62, 142, 136, 0.3);
       margin-top: 8px;
       padding: 8px 0 4px 0;
   } 
   .tk_btn button{
       margin: 0 auto; 
       padding: 8px 30px; 
       font-weight: 700; 
       border: 0;
       border-radius: 8px;
       box-shadow: 
           0 6px 18px rgba(233, 30, 99, 0.45),
           0 3px 10px rgba(233, 30, 99, 0.35),
           0 1px 4px rgba(233, 30, 99, 0.25),
           inset 0 2px 0 rgba(255, 255, 255, 0.4),
           inset 0 -2px 4px rgba(0, 0, 0, 0.15);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       cursor: pointer;
       background: linear-gradient(145deg, #e91e63 0%, #d81b60 100%);
       color: #fff;
       font-size: 14px;
       outline: none;
       border: 2px solid rgba(233, 30, 99, 0.4);
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
       letter-spacing: 0.5px;
   }
   
   @media (max-width: 480px) {
       .tk_btn {
           margin-top: 6px;
           padding: 6px 0 3px 0;
       }
       
       .tk_btn button {
           padding: 6px 20px;
           font-size: 12px;
       }
   }
   .tk_btn button:hover{
       transform: translateY(-3px);
       box-shadow: 
           0 8px 25px rgba(233, 30, 99, 0.5),
           0 4px 15px rgba(233, 30, 99, 0.4),
           0 2px 8px rgba(233, 30, 99, 0.3),
           inset 0 2px 0 rgba(255, 255, 255, 0.5),
           inset 0 -2px 4px rgba(0, 0, 0, 0.2);
       background: linear-gradient(145deg, #d81b60 0%, #c2185b 100%);
   }
   .tk_btn button:active {
       transform: translateY(0);
       box-shadow: 
           0 3px 12px rgba(233, 30, 99, 0.4),
           0 1px 6px rgba(233, 30, 99, 0.3),
           inset 0 3px 6px rgba(0, 0, 0, 0.2);
   }
   .confirm{
       background: linear-gradient(145deg, #e91e63, #d81b60);
   } 
   .btn0{
       background-color: #EEEEEE;
   } 
   .tk_btn a{
       display: block; 
       width: 100%;
   }
   /* 彈窗內容樣式增強 */
   .pop_body span[style*="color"] {
       font-weight: 700 !important;
       text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
   }
   .pop_body font[style*="color:#ff"] {
       font-weight: 800 !important;
       text-shadow: 0 1px 3px rgba(255, 0, 0, 0.3) !important;
   }
   

/* ==== block ==== */

   /* 金幣飄落 */
  @keyframes coinFall{0%{transform:translateY(-20px) rotateY(0deg);opacity:1}100%{transform:translateY(95px) rotateY(720deg);opacity:0}}
   .cj-fw{position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:3;background:radial-gradient(circle at 35% 35%,#fff176,#ffd54f 40%,#f9a825 100%);box-shadow:0 0 4px rgba(255,213,79,0.6)}
  .cj-fw:nth-child(3){top:10%;left:10%;animation:coinFall 2.2s ease-in infinite}
  .cj-fw:nth-child(4){top:5%;left:30%;animation:coinFall 2.6s ease-in 0.4s infinite}
  .cj-fw:nth-child(5){top:8%;right:25%;animation:coinFall 2s ease-in 0.8s infinite}
  .cj-fw:nth-child(6){top:12%;right:10%;animation:coinFall 2.4s ease-in 0.2s infinite}
  .cj-fw:nth-child(7){top:3%;left:20%;animation:coinFall 2.8s ease-in 1s infinite}
  .cj-fw:nth-child(8){top:6%;right:18%;animation:coinFall 2.1s ease-in 0.6s infinite}
  .cj-fw:nth-child(9){top:15%;right:35%;animation:coinFall 2.5s ease-in 1.2s infinite}
  .cj-fw:nth-child(10){top:2%;left:40%;animation:coinFall 2.3s ease-in 0.3s infinite}
  .cj-fw:nth-child(11){top:9%;left:48%;animation:coinFall 2.15s ease-in 0.9s infinite}
  .cj-fw:nth-child(12){top:4%;left:62%;animation:coinFall 2.45s ease-in 0.15s infinite}
  .cj-fw:nth-child(13){top:11%;right:42%;animation:coinFall 2.05s ease-in 0.55s infinite}
  .cj-fw:nth-child(14){top:7%;right:6%;animation:coinFall 2.35s ease-in 1.05s infinite}
   /* 卡片入場 */
   @keyframes cjCardIn{0%{transform:rotateY(90deg) scale(0.8);opacity:0}60%{transform:rotateY(-5deg) scale(1.02);opacity:1}100%{transform:rotateY(0) scale(1);opacity:1}}
   @keyframes cjBorderFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
   @keyframes cjTitlePop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
   @keyframes cjTagSlide{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
   @keyframes cjGlow{0%,100%{box-shadow:0 6px 20px rgba(183,28,28,0.4),0 0 12px rgba(255,213,79,0.15)}50%{box-shadow:0 8px 28px rgba(183,28,28,0.5),0 0 25px rgba(255,213,79,0.35)}}
   #cj-banner{animation:cjCardIn 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards, cjGlow 3s 0.8s ease-in-out infinite;perspective:800px}
   #cj-banner-title{animation:cjTitlePop 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both}
   .cj-tag-ani{animation:cjTagSlide 0.5s ease-out both}
   #cj-tag1{animation-delay:0.6s}
   #cj-tag2{animation-delay:0.75s}
   #cj-tag3{animation-delay:0.9s}
   .cj-deco{display:inline-block;color:#ffd54f;text-shadow:0 0 10px rgba(255,213,79,0.7);animation:cjDecoSpin 3s ease-in-out infinite}
   @keyframes cjDecoSpin{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(15deg) scale(1.2)}75%{transform:rotate(-15deg) scale(1.2)}}