/* ========== 全局样式（兼容PC/移动端） ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Source Han Sans CN", sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body {
    /*background-color: #f5f5f5;*/
    max-width: 750px; /* PC端最大宽度，复刻移动端视觉 */
    margin: 0 auto;   /* PC端居中 */
}
/* 响应式适配：大屏PC端优化 */
@media (min-width: 750px) {
    body {
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background-color: #fff;
    }
    .number-item {
        margin-left: 15px;
    }
}

/* ========== 1. Tab切换样式 ========== */
.tab-header {
    display: flex;
    width: 100%;
    height: 45px;
    line-height: 45px;
}
.tab-header-hk {
    margin-left: 1px;
}
.tab-item {
    flex: 1;
    text-align: center;
    font-size: clamp(16px, 3vw, 18px);
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
.tab-item.active {
    background-color: #2d7cd7;
}
.tab-item:not(.active) {
    background-color: #5aa1f5;
}
.tab-item:hover {
    opacity: 0.9;
}

/* ========== 2. 开奖直播Banner ========== */
/*.live-banner {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, #2c292d, #320620);
    color: #fff;
    text-align: center;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: bold;
    padding: 15px 0;
    letter-spacing: 2px;
}*/

.banner-img {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, #2c292d, #320620);
    color: #fff;
    text-align: center;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: bold;
    letter-spacing: 2px;
}

/* ========== 3. 开奖号码区域（重点修改） ========== */

.num-wrap {
    position: relative;  /* 作为数字定位的参考容器 */
    display: inline-block; /* 容器宽度自适应图片，不占满整行 */
}
.num-wrap .bg-img {
    display: block; /* 消除图片默认的底部空隙 */
    width: 100%; /* 可选：让图片适配容器，也可设固定宽高如80px */
}
.num-wrap .num {
    /* 绝对定位：脱离文档流，基于num-wrap定位 */
    position: absolute;
    top: 50%;    /* 先让数字顶部对齐图片垂直中点 */
    left: 50%;   /* 先让数字左侧对齐图片水平中点 */
    transform: translate(-50%, -50%); /* 向左、向上平移自身50%，实现精准居中 */

    /* 可选：优化数字样式（适配圆形图片） */
    color: #060505;    /* 白色数字，对比更明显 */
    font-size: 16px;/* 数字大小，可自定义 */
    font-weight: bold;
    /*text-shadow: 0 1px 2px rgba(0,0,0,0.5);*/ /* 加阴影更清晰 */
}

.number-area {
    padding: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
}
.lottery-card {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px;
}
.lottery-header {
    font-size: clamp(12px, 2.5vw, 18px);
    color: #F94628;
    margin-bottom: 0;
    /* 核心修改：从横向row改为纵向column */
    display: flex;
    flex-direction: column; /* 上下排列 */
    align-items: center; /* 左对齐，flex-start 可选center居中 */
    gap: 0px; /* 上下间距，可调整 */
    white-space: nowrap;
    /* 新增：给开奖标题区域预留足够宽度，避免挤压号码 */
    min-width: clamp(63.5px, 17vw, 150px);
}

.lottery-period {
    font-weight: bold;
    color: #000000; /* 浅灰色，区分标题 */
    font-size: clamp(12px, 2vw, 18px); /* 比彩票名称小一号 */
    margin-top: 1px !important;
}
.number-list {
    display: flex;
    /*flex: 1 1 calc((100% - 63px) / 8);*/
    gap: clamp(10px, 2vw, 18px);;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.number-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
}

.wait {
    width: clamp(28px, 4.5vw, 40px);
    height: clamp(35px, 4.5vw, 50px);
    border-radius: 8px;
    margin-top: 0 !important;
    font-weight: bold;
    background-color: #b7b4b4;
}

.number-item-te{
    color: red;
    font-size: clamp(16px, 4.5vw, 25px);
    font-weight: bold;
}

.number-item-te1 {
    text-shadow: 0 1px 2px #f71304; /* 加阴影更清晰 */
}
.number-item-te2 {
    text-shadow: 0 1px 2px #0f4bac; /* 加阴影更清晰 */
}
.number-item-te3 {
    text-shadow: 0 1px 2px rgb(0, 153, 0); /* 加阴影更清晰 */
}

.number-item .num-wrap {
    width: clamp(28px, 4.5vw, 36px);
    height: clamp(28px, 4.5vw, 36px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 4px ;
}
.number-item .num {
    font-family: 'Arial',sans-serif;
    font-size: clamp(15px, 2.6vw, 20px);
    line-height: 1;
    z-index: 9999;
}
.number-item .zodiac {
    font-size: clamp(14px, 2.4vw, 18px);
    margin-top: 0;
    color: #000;
    font-weight: 500;
}
/* 号码颜色映射（仅作用于数字圆形背景） */
.color1 .num-wrap { background-color: #FF2728; } /* 红 */
.color2 .num-wrap { background-color: #0000FF; } /* 蓝 */
.color3 .num-wrap { background-color: rgb(0, 153, 0); } /* 绿 */
.number-item:hover {
    transform: scale(1.05);
}

/*.log-list a {
    text-decoration: none;
    color: #FF2728;
    !* 让a标签变成块级元素，才能设置居中 *!
    display: block;
    text-align: center; !* 水平居中 *!
    !* 如需垂直居中，需给a标签设置line-height并匹配p标签高度 *!
    !*line-height: 40px;*!
}
.log-list {
    width: 100%;
    !*height: 40px;*!
    !*background: #f5f5f5;*!
    margin-top: 10px;
    padding: 0;
}*/

/* 核心：父容器 - 左右布局 + 50%宽度 + 水平居中 */
.nav-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    /* 关键1：设置宽度为父元素的50% */
    width: 80%;
    /* 关键2：水平居中（上下margin可自定义，左右必须auto） */
    margin: 0 50px;
    /* 可选：加个边框方便你看到div的范围，可删除 */
    /*border: 1px solid #eee;
    border-radius: 4px;*/
}

.nav-box span {
    margin: 0;
    padding: 0;
}

/* a标签：扩大点击作用域 */
.nav-box a {
    display: block;
    padding: 5px 30px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    background-color: #4292EF;
    /*background-image: linear-gradient(to right, #5d9ef7, #EEEEEE);*/
    border-color: #4292EF;
    border-radius: 5px;
}

.nav-box a:hover {
    background-color: #4292EF;
    color: #166666;
}


/* ========== 4. 推荐资料区域（重构：支持富文本+广告） ========== */
.recommend-container {
    width: 100%;
    margin: 5px 0;
    /*padding: 0 2px;*/
}
.recommend-item {
    border-radius: 8px; /* 圆角 */
    margin-top:10px;
    width: 100%;
    /*color: #FFFFFF;*/
    padding: 2px;
    /*margin: 5px 0;*/
    border-radius: 5px;
    background-image: linear-gradient(to right, #4292EF, #5aa1f5, #60a6f7, #4e98ec, #569ff5, #5aa2f5, #4292EF);
    /* 富文本基础样式 */
    font-size: clamp(14px, 3vw, 16px);
    line-height: 1.6;
}

/* 区分澳门/香港推荐资料背景 */
/*.recommend-item.macau {
    background-color: #000;
}
.recommend-item.hk {
    background-color: #2C3E50;
}*/
/* 富文本样式适配 */
.recommend-item h4 {
    font-size: clamp(16px, 3.5vw, 18px);
    margin-bottom: 8px;
    font-weight: bold;
}
.recommend-item p {
    margin-bottom: 10px;
}
.recommend-item .ad-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 8px;
    display: block;
}

/* ========== 5. 统计数据区域 ========== */
.stat-container {
    /*padding: 10px;*/
    background-color: #fff;
}
.stat-module {
    /*margin-bottom: 20px;*/
    border-bottom: 1px solid #eee;
    /*padding: 10px;*/
}
.stat-module:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 10px;
}
.stat-title {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: bold;
    color: #333;
}
.period-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}
.period-wrap span {
    font-size: clamp(14px, 2.5vw, 16px);
    color: #666;
}
.period-input {
    width: clamp(50px, 10vw, 60px);
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: clamp(14px, 2.5vw, 16px);
    transition: border-color 0.2s;
}
.period-input:focus {
    border-color: #409EFF;
    outline: none;
}
.stat-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 5px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(14px, 2.5vw, 16px);
}
.legend-color {
    width: 15px;
    height: 15px;
    border-radius: 2px;
}
/* 图例颜色定义 */
.legend-color.single { background-color: #409EFF; }        /* 单数 */
.legend-color.double { background-color: #FF7D00; }       /* 双数 */
.legend-color.tail { background-color: #409EFF; }         /* 尾数 */
.legend-color.big { background-color: #409EFF; }          /* 大数 */
.legend-color.small { background-color: #FF7D00; }        /* 小数 */
.legend-color.blue-wave { background-color: #0000FF; }    /* 蓝波 */
.legend-color.red-wave { background-color: #FF0000; }     /* 红波 */
.legend-color.green-wave { background-color: rgb(0, 153, 0); }   /* 绿波 */
.legend-color.combine-single { background-color: #409EFF;}/* 合数单 */
.legend-color.combine-double { background-color: #FF7D00;}/* 合数双 */
.legend-color.head-single { background-color: #409EFF; }  /* 单双头-单 */
.legend-color.head-double { background-color: #FF7D00; }  /* 单双头-双 */

/* 图表容器 */
.chart-wrap {
    width: 100%;
}
.chart-container {
    width: 100%;
    height: clamp(200px, 30vw, 250px);
}

/* 生肖统计样式 */
.zodiac-stats {
    margin: 5px 10px;
    display: flex;
    flex-wrap: wrap;
    /*gap: 12px;*/
    justify-content: flex-start;
}
.zodiac-items {
    width: 110px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.zodiac-icon {
    width: clamp(30px, 7vw, 36px);
    height: clamp(30px, 7vw, 36px);
    line-height: clamp(30px, 7vw, 36px);
    text-align: center;
    font-size: clamp(14px, 2.5vw, 16px);
    border-radius: 50%;
    background-color: #f0f0f0;
}
.zodiac-text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    font-variant-numeric: tabular-nums;
}

.zodiac-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}
.zodiac-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.zodiac-count {
    width: 3.5em;              /* ⭐关键：固定3位空间 */
    font-variant-numeric: tabular-nums; /* ⭐等宽数字 */
    color: #419eff;
}
.zodiac-name {
    min-width: 16px;
}

/* ========== 加载/错误状态样式 ========== */
.loading-dot {
    color: #666;
    display: inline-block;
    animation: dotLoading 1.5s infinite;
}
@keyframes dotLoading {
    0% { content: "加载中."; }
    33% { content: "加载中.."; }
    66% { content: "加载中..."; }
}
.loading-skeleton {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.skeleton-item {
    width: clamp(45px, 8vw, 50px);
    height: clamp(45px, 8vw, 50px);
    border-radius: 50%;
    background-color: #eee;
    animation: skeletonLoading 1.5s infinite alternate;
}


.zodiac-skeleton .skeleton-item {
    border-radius: 4px;
    width: clamp(80px, 15vw, 100px);
    height: 30px;
}
@keyframes skeletonLoading {
    0% { opacity: 0.5; }
    100% { opacity: 0.8; }
}
.error-tip {
    text-align: center;
    padding: 20px;
    color: #d81e06;
    font-size: clamp(14px, 2.5vw, 16px);
}
.reload-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: #409EFF;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
    font-size: clamp(14px, 2.5vw, 16px);
}

/* 推荐资料加载骨架屏 */
.recommend-skeleton {
    width: 100%;
    height: 120px;
    background-color: #FFFFFF;
    margin-bottom: 8px;
    border-radius: 4px;
    animation: skeletonLoading 1.5s infinite alternate;
}

/* ========== 波色走势表格（调整后） ========== */
.wave-trend-container {
    border-radius: 8px; /* 圆角 */
    background-color: #fff;
    /*padding: 10px;*/
    overflow: visible;

    border: solid #4292EF;
    border-width: 2px 4px 2px 4px;
    margin-bottom: 10px;
}
/* 标题+年份选择栏 */
.wave-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background-image: 
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, #ffffff 100%),
    linear-gradient(to right, #4292EF, #5aa1f5, #60a6f7, #4e98ec, #569ff5, #5aa2f5, #4292EF);
    height: 38px;
    padding: 0 10px;
}
.wave-trend-title {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    margin: 0;
}
/* 年份选择按钮样式 */
.year-select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: clamp(12px, 2vw, 14px);
    background-color: #f9f9f9;
    cursor: pointer;
}
.year-select:focus {
    outline: none;
    border-color: #409EFF;
}
/* 走势表格（移除期数、表头数字） */
.wave-trend-table {
    width: 100%;
    border-collapse: collapse;
    /* 取消最小宽度，适配换行 */
    min-width: unset;
}
.wave-trend-table th,
.wave-trend-table td {
    border: 1px solid #eee;
    padding: 1px 1px;
    text-align: center;
    font-size: clamp(12px, 2vw, 14px);
    /* 每列固定宽度，最多6行 */
    max-height: calc(6 * (6px*2 + 14px)); /* 6行的高度（内边距+字体） */
    overflow: hidden;
}
.wave-trend-table th {
    display: none; /* 隐藏表头数字列 */
}
/* 波色单元格样式 */
.td-red { color: #ff0303; font-weight: bold; }
.td-green { color: rgb(0, 153, 0); font-weight: bold; }
.td-blue { color: #0674ea; font-weight: bold; }
.td-yellow { color: #dbd140; font-weight: bold; }
.td-soil { color: #f79e03; font-weight: bold; }
/* 查看更多按钮 */
.more-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    margin-top: 10px;
    text-align: center;
    background-color: #f6f7f9;
    color: #4c4b4b;
    border: none;
    border-radius: 4px;
    font-size: clamp(14px, 2.5vw, 16px);
    cursor: pointer;
}
.more-btn:hover {
    background-color: #acbfd4;
}

.detail-table td {
    width: 25px;      /* 固定列宽 */
    max-width: 40px;  /* 最大宽度不超过40px */
    min-width: 25px;  /* 最小宽度保证一致 */
    padding: 8px 2px; /* 减小左右内边距，列更紧凑 */
}



/* 全局初始化 */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft Yahei", sans-serif;
    background-color: #fff;
    color: #333;
    padding: 20px;
}*/

/* 容器：PC端定宽居中，移动端自适应 */
.container {
    max-width: 750px; /* 匹配图片宽度比例 */
    /*margin: 0 auto;*/
    width: 100%;
    padding: 20px;
    background-color: #FFFFFF;
}

/* 标题样式 */
.main-title {
    font-size: clamp(18px, 5vw, 24px); /* 响应式字体 */
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.sub-title {
    font-size: clamp(14px, 3vw, 18px);
    color: #666;
    margin-bottom: 20px;
}

/* 生肖列表样式 */
.zodiac-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 行间距 */
}

/* 每行生肖项 */
.zodiac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* 生肖图标容器 */
.zodiac-icon {
    width: clamp(30px, 8vw, 40px);
    height: clamp(30px, 8vw, 40px);
    background-color: #f8f8f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* 防止压缩 */
}

.zodiac-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* 生肖文字（如：马[冲鼠]） */
.zodiac-text {
    font-size: clamp(14px, 4vw, 18px);
    /*width: clamp(80px, 20vw, 100px);*/
    flex-shrink: 0;
}

/* 数字圆点样式 */
.number-dots {
    display: flex;
    gap: clamp(8px, 2.1vw, 12px);
    flex: 1; /* 占满剩余宽度 */
    flex-wrap: wrap;
    margin-left: 12px;
}

.number-dots-color {
    gap: clamp(5px, 1.1vw, 8px);
}

.dot {
    width: clamp(20px, 4vw, 28px);
    height: clamp(20px, 4vw, 28px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: normal;
}

.dot-color {
    width: clamp(16px, 3vw, 26px);
    height: clamp(16px, 3vw, 26px);
    font-size: clamp(10px, 3vw, 14px);
}

/* 数字颜色定义（和图片完全一致） */
.red { background-color: #ff0303; }
.blue { background-color: #0674ea; }
.green { background-color: rgb(0, 153, 0); }

.adv-div{
    padding: 0 !important;
    margin: 0 !important;
}
.adv-div img {
    margin-bottom: 2px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 等比裁剪，填满容器 */
}


/* 移动端微调 */
@media (max-width: 375px) {
    .number-dots {
        gap: 8px;
    }
    .dot {
        width: clamp(24px, 6vw, 30px);
        height: clamp(24px, 6vw, 30px);
    }
}