/* =========================================================
 * 壹码中特 - 静态复刻样式
 * 说明：全部使用 rem 单位（html font-size 由 JS 按 800px 基准、
 *       视口实际宽度等比计算，无上限），1rem = 视口宽度的 1/8
 *       因此手机 / 平板 / PC 均为等比缩放的全屏自适应布局
 * ========================================================= */

/* ---------- 全局重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul { list-style: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

html {
  max-width: 100%;
}
/* 横向滚动兜底放 body：若同时设于 html（overflow-x:hidden 传播视口）会使
   position:sticky 吸顶失效（滚动祖先判定异常）；body 裁切同样杜绝横向滚动条 */
body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 0.26rem;
  color: #333;
  /* 浅蓝背景（对齐原站 main 背景色） */
  background: #c4d5ff;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 居中容器：8rem（800px）宽居中 */
.page-wrapper {
  width: 8rem;
  max-width: 800px;
  margin: 0 auto;
}

/* 内容主列：灰底 + 金色左右边框（对齐原站 .conten） */
.page {
  width: 100%;
  margin: 0 auto;
  background: #f0f0f0;
  border-left: 1px solid #f9b520;
  border-right: 1px solid #f9b520;
}

.loading-tip {
  text-align: center;
  color: #999;
  padding: 0.3rem 0;
  font-size: 0.24rem;
}

/* =========================================================
 * 2. 头部横幅（完整显示，不裁剪）
 * ========================================================= */
.site-header {
  position: relative;
  overflow: hidden;
  font-size: 0;
}
.header-img {
  width: 100%;
  height: auto;
  display: block;
}
.header-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
/* 金紫渐变描边艺术字（主标题与页头域名共用同一套配色/描边/投影） */
.header-name,
.header-domain {
  font-weight: 900;
  background: linear-gradient(180deg, #ffd700 20%, #ff9d00 55%, #b266e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 描边 + 投影模拟原站艺术字 */
  -webkit-text-stroke: 0.02rem #6b2fa0;
  filter: drop-shadow(0.03rem 0.03rem 0 #3d1a66);
}
.header-name {
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}
/* 页头域名（配置表 yuming，main.js fillHeaderDomain 填充）：同款艺术字，字号仅略小于主标题 */
.header-domain {
  display: none;
  margin-top: 0.02rem;
  font-size: 0.58rem;
  letter-spacing: 0.06rem;
  -webkit-text-stroke: 0.015rem #6b2fa0;
  filter: drop-shadow(0.025rem 0.025rem 0 #3d1a66);
}

/* =========================================================
 * 3. 通知动图横幅（只显示 GIF，无红底黄边）
 * ========================================================= */
.notice-bar {
  font-size: 0; /* 消除图片底部间隙 */
}
.notice-gif {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
 * 4. 三色分类导航
 * ========================================================= */
.lottery-tabs {
  display: flex;
}
.lottery-tabs li {
  flex: 1;
  text-align: center;
  color: #fff;
  padding: 0.12rem 0;
  font-size: 0.24rem;
  line-height: 1.5;
  position: relative;
  cursor: pointer;
  user-select: none;
  /* 标题垂直居中；min-height 保持原「名称行+时间行」总高，去掉时间后色条高度不变 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.9rem;
}
/* active 标签底部彩色指示条（对齐原站 .caifu-data-tab.is-active:after） */
.lottery-tabs li.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  background: #2ecc71;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}
.lottery-tabs .tab-name { font-weight: bold; display: block; }
.tab-blue   { background: linear-gradient(135deg, #4e9eff 0%, #3b7dd6 100%); }
.tab-purple { background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%); }
.tab-green  { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
.tab-red    { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }

/* =========================================================
 * 5.0 彩种切换：视频直播面板（带 video 配置的彩种；iframe 懒加载，默认隐藏）
 * ========================================================= */
.video-panel {
  display: none;
  /* 白底卡片，与 .draw-section（实时开奖区）同款观感 */
  background: #fff;
  margin: 0.12rem 0.1rem;
  border-radius: 0.08rem;
  overflow: hidden;
  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
  /* 高度与实时开奖区卡片一致（rem 等比缩放，全屏宽统一） */
  height: 2.6rem;
}
.video-panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
 * 5. 开奖区（白底卡片）
 * ========================================================= */
.draw-section {
  background: #fff;
  margin: 0.12rem 0.1rem;
  padding: 0.16rem 0.2rem;
  border-radius: 0.08rem;
  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
}

.draw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}
.draw-title { font-size: 0.28rem; font-weight: bold; }
.draw-title .period-red { color: #e21f2c; } /* 期号红色 */
.draw-history { color: #e21f2c; font-size: 0.28rem; font-weight: bold; text-decoration: none; } /* 历史记录入口（指向 history.html） */

/* 号码球行 */
.draw-balls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0.2rem;
  gap: 0.1rem;
  flex-wrap: wrap;
}
.ball-item { text-align: center; }
/* 实心彩色球：纯色渐变 + 白字（对齐原站） */
.ball {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.32rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.7rem;
  position: relative;
  box-shadow: inset 0 -0.06rem 0.1rem rgba(0,0,0,0.25),
              inset 0 0.04rem 0.06rem rgba(255,255,255,0.35),
              0 0.04rem 0.1rem rgba(0,0,0,0.2);
}
/* 球面高光 */
.ball .ball-shine {
  position: absolute;
  top: 0.06rem;
  left: 0.12rem;
  width: 0.22rem;
  height: 0.12rem;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: rotate(-30deg);
}
/* 号码文字在球中心 */
.ball .ball-num {
  position: relative;
}
/* 波色 */
.ball-red   { background: radial-gradient(circle at 35% 30%, #ff7a80, #e21f2c 60%, #a01020 100%); }
.ball-blue  { background: radial-gradient(circle at 35% 30%, #6db3ff, #1a7fff 60%, #0a4fa0 100%); }
.ball-green { background: radial-gradient(circle at 35% 30%, #7aee94, #2ecc40 60%, #1a8a2a 100%); }
/* 球下方"五行/生肖"标注 */
.ball-label { margin-top: 0.1rem; font-size: 0.22rem; font-weight: bold; color: #333; }
/* 红色加号 */
.ball-plus {
  align-self: center;
  color: #e21f2c;
  font-size: 0.4rem;
  font-weight: 900;
  padding-bottom: 0.3rem;
}

.draw-next {
  display: flex;
  justify-content: center;
  align-items: center;
}
.draw-next-text { font-size: 0.28rem; font-weight: bold; }
.draw-next-text .period-red { color: #e21f2c; }
/* =========================================================
 * 5.1 开奖直播：状态徽标 / 占位球 / 揭晓动画
 * ========================================================= */
/* “开奖中”红标闪烁 */
.draw-state {
  display: inline-block;
  margin-left: 0.06rem;
  padding: 0.01rem 0.12rem;
  border-radius: 0.2rem;
  font-size: 0.2rem;
  font-weight: bold;
  vertical-align: 0.03rem;
  color: #fff;
  background: #e21f2c;
  animation: state-blink 1s steps(2) infinite;
}
@keyframes state-blink { 50% { opacity: 0.45; } }
/* 待揭晓的暗灰占位球 */
.ball-pending {
  background: radial-gradient(circle at 35% 30%, #d9d9d9, #a8a8a8 60%, #808080 100%);
  box-shadow: inset 0 -0.06rem 0.1rem rgba(0,0,0,0.2);
}
.ball-pending .ball-num { color: rgba(255,255,255,0.8); }
/* 正在揭晓的球位：金色光晕脉冲（节奏灯） */
.ball-pending.lit {
  animation: pending-pulse 0.8s ease-in-out infinite;
  box-shadow: inset 0 -0.06rem 0.1rem rgba(0,0,0,0.2),
              0 0 0.14rem rgba(255, 190, 40, 0.6);
}
@keyframes pending-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
/* 新号码揭晓：弹入动画（每秒轮询时仅刚揭晓的那颗触发） */
.ball-in {
  animation: ball-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes ball-pop {
  0%   { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* =========================================================
 * 6. 红色推广横幅
 * ========================================================= */
.promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: #d90000;
  padding: 0.14rem 0.06rem;
  overflow: hidden;
}
.promo-badge {
  background: linear-gradient(135deg, #ffb700, #ff8a00);
  color: #d90000;
  font-size: 0.3rem;
  font-weight: 900;
  padding: 0.04rem 0.12rem;
  border-radius: 0.06rem;
}
.promo-text  { color: #ffe600; font-size: 0.32rem; font-weight: 900; }
.promo-gold  { color: #ffe600; font-size: 0.4rem; font-weight: 900; }
.promo-text2 { color: #ffe600; font-size: 0.3rem; font-weight: 900; }

/* =========================================================
 * 7. “全网至尊好料”横幅
 * ========================================================= */
.zhizun-banner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(180deg, #b80000 0%, #8b0000 100%);
  padding: 0.2rem 0.15rem;
}
/* 金色书法感大字 */
.zhizun-big {
  font-size: 0.58rem;
  font-weight: 900;
  font-family: "KaiTi", "STKaiti", serif;
  color: #ffd700;
  letter-spacing: 0.06rem;
  text-shadow: 0.03rem 0.03rem 0 #7a0000, 0 0 0.15rem rgba(255, 215, 0, 0.5);
}
/* 右侧黄框小字 */
.zhizun-small {
  color: #ffe600;
  font-size: 0.24rem;
  font-weight: bold;
  border: 0.03rem solid #ffe600;
  border-radius: 0.08rem;
  padding: 0.06rem 0.12rem;
  text-align: center;
  line-height: 1.4;
}

/* =========================================================
 * 通用：白底卡片区块（分类/高手/心水/玉女/绝杀等）
 * ========================================================= */
.block {
  background: #fff;
  margin: 0.12rem 0.1rem;
  border-radius: 0.08rem;
  overflow: hidden;
  box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
}

/* =========================================================
 * 通用：黄色渐变分类标题栏（两端 CSS 金色装饰替代原站龙纹图）
 * ========================================================= */
.cat-title {
  position: relative;
  background: linear-gradient(180deg, #fff9c4 0%, #ffe600 50%, #ffd000 100%);
  text-align: center;
  padding: 0.14rem 1rem;
  font-size: 0.28rem;
  font-weight: 900;
  color: #222;
  border-top: 0.02rem solid #ffcc00;
  border-bottom: 0.02rem solid #e0a800;
}
.cat-title .cat-name { color: #e21f2c; } /* 《分类名》红色 */
/* 两端金色圆珠装饰 */
.cat-title::before,
.cat-title::after  { right: 0.25rem; }

/* 玩法规则说明行（分类标题与最新一期资料之间）：小字黑字，明显小于预测资料正文（.24rem） */
.cat-note {
  text-align: center;
  padding: 0.1rem 0.15rem 0.08rem;
  font-size: 0.18rem;
  color: #000;
  line-height: 1.6;
  background: #fff8e1; /* 淡黄底与黄色标题条衔接 */
  border-bottom: 0.01rem solid #eee;
  /* 说明单元（两波/五段的数字块）flex 流式网格：行内放满自动换行、整行居中 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.04rem 0.1rem;
}
/* 数字单元不折行，避免长串在行中随机断开 */
.cat-note .cn-cell {
  white-space: nowrap;
}
/* 独占整行的单元（如“红波：…”整波数字一行） */
.cat-note .cn-line {
  flex-basis: 100%;
}
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe98a, #d4a017 70%);
  box-shadow: 0 0 0.08rem rgba(180, 130, 0, 0.6);
}
.cat-title::before { left: 0.25rem; }
.cat-title::after  { right: 0.25rem; }

/* =========================================================
 * 8. 高手资料列表
 * ========================================================= */
.gaoshou-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.16rem 0.1rem;
  border-bottom: 0.01rem solid #eee; /* 行间细灰线 */
  font-size: 0.28rem;
}
.gaoshou-row:last-child { border-bottom: none; }
.gs-period { color: #1a4bff; font-weight: bold; }
.gs-author { color: #000; font-weight: bold; }
.gs-predict { color: #e21f2c; font-weight: bold; }
/* 黄色圆角徽章 */
.gs-badge {
  background: linear-gradient(135deg, #ffd84d, #ffb700);
  color: #a05000;
  font-size: 0.22rem;
  font-weight: bold;
  border-radius: 0.2rem;
  padding: 0.04rem 0.16rem;
  margin-left: auto;
}
/* 卡片行整体可点：手指光标 + 轻按反馈 */
.gaoshou-row { cursor: pointer; }
.gaoshou-row:active { background: #fdf3d8; }

/* 高手玩法明细弹窗（点击卡片行打开；z 高于吸顶导航条 950） */
.gs-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem;
}
body.gs-lock { overflow: hidden; } /* 弹窗打开时锁页面滚动 */
.gs-modal {
  background: #fff;
  border-radius: 0.12rem;
  width: 92%;
  max-width: 7.2rem;
  max-height: 86%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.35);
}
.gs-modal-head {
  position: relative;
  background: linear-gradient(180deg, #fff8e0, #ffefc0);
  border-bottom: 0.01rem solid #ffd000;
  border-radius: 0.12rem 0.12rem 0 0;
  padding: 0.12rem 0.5rem 0.1rem 0.14rem;
}
.gs-modal-title {
  color: #e21f2c;
  font-size: 0.3rem;
  font-weight: bold;
  line-height: 1.3;
}
.gs-modal-sub {
  color: #a05000;
  font-size: 0.22rem;
  margin-top: 0.02rem;
}
.gs-modal-close {
  position: absolute;
  right: 0.08rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.46rem;
  height: 0.46rem;
  border: none;
  border-radius: 50%;
  background: rgba(160, 80, 0, 0.12);
  color: #a05000;
  font-size: 0.32rem;
  line-height: 0.42rem;
  text-align: center;
  cursor: pointer;
}
.gs-modal-close:active { background: #ffe9b0; }
.gs-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.08rem 0;
}
/* 手机端弹窗：字号触控保底（≤640px 停用 rem 等比缩小） */
@media (max-width: 640px) {
  .gs-modal-title { font-size: 16px; }
  .gs-modal-sub { font-size: 12px; }
  .gs-modal-close { font-size: 18px; }
}

/* =========================================================
 * 9. 心水贴士（深绿面板）
 * ========================================================= */
.xinshui-panel {
  background: linear-gradient(180deg, #123d17 0%, #1d5c25 60%, #123d17 100%);
  padding: 0.3rem 0.2rem;
}
.xs-period {
  text-align: center;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
  margin-bottom: 0.15rem;
}
.xs-lottery {
  text-align: center;
  font-size: 0.4rem;
  font-weight: 900;
  color: #ffd700;
  letter-spacing: 0.1rem;
  border: 0.02rem solid #c9a24b;
  border-radius: 0.1rem;
  padding: 0.1rem;
  margin: 0 auto 0.25rem;
  max-width: 5.5rem;
  text-shadow: 0 0 0.1rem rgba(255, 215, 0, 0.4);
}
/* 绿色圆角文本框 */
.xs-tips {
  background: #0c2f10;
  border: 0.02rem solid #3d8b45;
  border-radius: 0.12rem;
  color: #d8f0da;
  font-size: 0.26rem;
  line-height: 1.9;
  padding: 0.2rem;
  margin-bottom: 0.25rem;
}
.xs-tips .hl { color: #ffe600; font-weight: bold; background: none; } /* 关键字黄色高亮 */
/* 主/防/博 行 */
.xs-bet {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  color: #fff;
  font-size: 0.28rem;
  margin-bottom: 0.25rem;
}
.xs-circle {
  display: inline-block;
  width: 0.56rem;
  height: 0.56rem;
  line-height: 0.52rem;
  text-align: center;
  border-radius: 50%;
  border: 0.03rem solid #fff;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.08);
}
.xs-circle.c-blue { color: #4da3ff; border-color: #4da3ff; }
.xs-circle.c-red  { color: #ff5b5b; border-color: #ff5b5b; }
/* 橙色圆角“家禽”标签 */
.xs-tag {
  background: linear-gradient(135deg, #ff9d2e, #ff7a00);
  color: #fff;
  border-radius: 0.1rem;
  padding: 0.06rem 0.2rem;
  font-weight: bold;
}
/* 雙數旺/單數旺 行 */
.xs-wang {
  text-align: center;
  color: #fff;
  font-size: 0.28rem;
  line-height: 2;
}
.xs-wang .nums { color: #ffe600; font-weight: bold; letter-spacing: 0.05rem; }

/* =========================================================
 * 10. 玉女心经
 * ========================================================= */
.yunv-img { width: 100%; }
.yunv-badges {
  display: flex;
  justify-content: space-around;
  padding: 0.15rem 0.1rem;
  background: #fff8e1;
}
.yunv-badge {
  font-size: 0.24rem;
  font-weight: bold;
  border-radius: 0.2rem;
  padding: 0.06rem 0.18rem;
  color: #fff;
}
.yb-gold   { background: linear-gradient(135deg, #ffb700, #ff8a00); }
.yb-orange { background: linear-gradient(135deg, #ff7043, #f4511e); }
.yb-blue   { background: linear-gradient(135deg, #42a5f5, #1e88e5); }

.yunv-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 内容过长时整体换行，保持整齐 */
  gap: 0.1rem;
  padding: 0.14rem 0.1rem;
  border-bottom: 0.01rem solid #eee;
  font-size: 0.26rem;
}
/* 期号段与结果段各为整体不拆不缩；数据段允许收缩，
   折行断点仅限码号间 wbr（号码整体不裂） */
.yunv-row > .yv-period,
.yunv-row > .yv-result,
.yunv-row > .yv-tail { white-space: nowrap; flex-shrink: 0; }
.yunv-row > .yv-data { min-width: 0; }
.yunv-row:last-child { border-bottom: none; }
.yunv-row.won { background: #fff3c4; } /* 命中行（特码在 6 肖 8 码内）浅黄背景 */
.yv-period { color: #1a4bff; font-weight: bold; }
.yv-data { color: #e21f2c; font-weight: bold; }
.yv-result.wait { color: #00a03c; font-weight: bold; }           /* 待开 绿色 */
.yv-result.hit  { background: #ffe600; color: #a05000; font-weight: bold; padding: 0 0.08rem; border-radius: 0.06rem; } /* 已开 黄色高亮（json 兜底无判定行） */
/* 已开判定尾段：开: 与结果/准错同段不拆（准=黄底、错=红字，复用全局 cr-* 样式） */
.yv-tail { display: inline-flex; align-items: center; gap: 0.04rem; }

/* =========================================================
 * 11. 分类资料区
 * ========================================================= */
.cat-row {
  text-align: center;
  padding: 0.14rem 0.15rem;
  border-bottom: 0.01rem solid #eee;
  /* 0.24rem：绝杀十码（10 号码）等长行在 800px 基准下可整行单行；
     更长（16 码+）仍允许折行，断点仅在号码间 wbr */
  font-size: 0.24rem;
  line-height: 1.6;
  /* 内容过长时允许换行，换行后仍居中保持整齐 */
  overflow-wrap: anywhere;
  word-break: break-all;
}
.cat-row:last-child { border-bottom: none; }
.cat-row.won { background: #fff3c4; } /* 命中行（status=win，含绝杀“杀对”）浅黄背景 */
/* 长码中特类（36/24/16 码中特）：flex 三段式——期号（左列）与开奖（右列）均相对
   数据块垂直居中，消除“期号在左上、开奖沉右下”的斜线观感；
   数据块在 .cr-body 内水平居中，.cr-data 为 inline-block 保持块内各行同列起点 */
.cat-row.al-left { display: flex; text-align: left; }
.cat-row.al-left > .cr-period { flex: 0 0 auto; margin-right: 0.06rem; display: flex; align-items: center; }
.cat-row.al-left > .cr-body { flex: 1 1 auto; min-width: 0; text-align: center; }
.cat-row.al-left .cr-data { display: inline-block; text-align: left; }
.cat-row.al-left > .cr-tail { flex: 0 1 auto; align-self: center; padding-left: 0.06rem; }
/* 窄屏尽量不换行：期号段与“开:结果 准/错/待”尾段各为整体不拆，
   放不下时整段下移；【数据】内不带碎断，换行点仅限码号间 wbr */
.cat-row > .cr-period { white-space: nowrap; }
/* 数据/尾部在长码行内嵌于 .cr-body，用后代选择器同时覆盖两种结构 */
.cat-row .cr-tail { white-space: nowrap; }
.cat-row .cr-data { overflow-wrap: normal; word-break: normal; white-space: normal; }
.cr-period { color: #1a4bff; font-weight: bold; }  /* 期号+分类名 蓝色 */
.cr-data   { color: #e21f2c; font-weight: bold; }  /* 【数据】红色 */
.cr-kai    { color: #000; font-weight: bold; }     /* 开: 黑色 */
/* 结果：准=黄色底高亮；错=红字；待开(發00)=蓝字 */
.cr-result.win  { background: #ffe600; color: #8a5a00; font-weight: bold; padding: 0 0.06rem; border-radius: 0.04rem; }
.cr-result.lose { color: #e21f2c; font-weight: bold; }
.cr-result.wait { color: #1a4bff; font-weight: bold; }
/* 平特肖多命中：开: 后并列的“生肖+号码”chip 之间留间距，互不粘连 */
.cat-row .cr-tail .cr-result + .cr-result { margin-left: 0.05rem; }
.cr-status.win  { color: #b8860b; font-weight: bold; } /* 准 黄字 */
.cr-status.lose { color: #e21f2c; font-weight: bold; } /* 错 红字 */
.cr-status.pending { color: #999; font-weight: bold; } /* 待开 灰字（当天未开奖期） */
/* 数据内匹配字符的黄色底高亮 */
.hl { background: #ffe600; border-radius: 0.04rem; padding: 0 0.02rem; }

/* 间歇装饰横幅 */
.deco-banner { width: 100%; margin: 0.1rem 0; }

/* =========================================================
 * 12. 绝杀专区表格
 * ========================================================= */
.killzone-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.26rem;
  text-align: center;
}
.killzone-table th {
  color: #fff;
  font-weight: bold;
  padding: 0.14rem 0.04rem;
}
.kz-th-period { background: #1a4bff; } /* 期数 蓝底 */
.kz-th-kill   { background: #e21f2c; } /* 杀肖/杀合/杀半头 红底 */
.kz-th-result { background: #00a03c; } /* 开奖 绿底 */
.killzone-table td {
  background: #fff;
  border: 0.01rem solid #ddd; /* 白底灰边 */
  padding: 0.12rem 0.04rem;
  font-weight: bold;
}
/* 命中杀项的格子红底白字高亮 */
.killzone-table td.kz-hit { background: #e21f2c; color: #fff; }

/* =========================================================
 * 13/14/15. 底部三个表格区
 * ========================================================= */
/* 紫蓝渐变标题栏 */
.section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  text-align: center;
  font-size: 0.28rem;
  font-weight: bold;
  padding: 0.18rem;
}
.round-top { border-radius: 0.08rem 0.08rem 0 0; }
.round-all { border-radius: 0.08rem; }

/* --- 生肖表 --- */
.zodiac-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}
.zodiac-table td { text-align: center; padding: 0.06rem 0.02rem; }
.zd-head {
  background: #ffd700;
  font-size: 0.28rem;
  font-weight: 900;
  padding: 0.12rem 0;
}
/* 波色小球 */
.zd-ball {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.24rem;
  font-weight: bold;
}
.zd-ball.ball-red   { background: #e21f2c; box-shadow: none; }
.zd-ball.ball-blue  { background: #1a7fff; box-shadow: none; }
.zd-ball.ball-green { background: #2ecc40; box-shadow: none; }

/* --- 五行号码 --- */
.wx-row {
  padding: 0.16rem 0.2rem;
  font-size: 0.28rem;
  font-weight: bold;
  color: #fff;
}
.wx-jin  { background: linear-gradient(135deg, #ffd700, #ffa500); } /* 金 橙黄 */
.wx-mu   { background: linear-gradient(135deg, #56ab2f, #a8e063); } /* 木 绿 */
.wx-shui { background: linear-gradient(135deg, #0099f7, #00d4ff); } /* 水 蓝 */
.wx-huo  { background: linear-gradient(135deg, #ff512f, #dd2476); } /* 火 红 */
.wx-tu   { background: linear-gradient(135deg, #8b4513, #d2691e); } /* 土 棕 */
/* 大小数行：深色底两半 */
.wx-daxiao { display: flex; border-radius: 0 0 0.12rem 0.12rem; overflow: hidden; }
.wx-daxiao div {
  flex: 1;
  background: linear-gradient(135deg, #2c3e50, #34495e);
  text-align: center;
  padding: 0.14rem;
  color: #fff;
  font-size: 0.28rem;
  font-weight: bold;
}
.wx-daxiao em { color: #ffd700; font-style: normal; } /* 黄字 */

/* --- 生肖属性表 --- */
.sx-attrs { padding: 0.1rem; }
.sx-row {
  display: flex;
  gap: 0.1rem;
  margin-top: 0.1rem;
}
.sx-badge {
  flex: 1;
  background: #fff;
  text-align: center;
  border: 0.02rem solid #ddd;
  border-radius: 0.12rem;
  padding: 0.12rem 0.04rem;
  font-size: 0.24rem;
  font-weight: bold;
}
.sx-large { min-width: 45%; }
.sx-red    { border-color: #ff5252; color: #ff5252; }
.sx-blue   { border-color: #2196f3; color: #2196f3; }
.sx-green  { border-color: #4caf50; color: #4caf50; }
.sx-yellow { border-color: #ffc107; color: #ff9800; }

/* =========================================================
 * 16. 右侧悬浮按钮
 * ========================================================= */
.float-btns {
  position: fixed;
  right: 0.15rem;
  bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 900;
}
/* 金色圆形按钮 */
.float-btn {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: none;
  background: #f9b520;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.25);
}

/* =========================================================
 * 17. 顶部资料导航（可收起全量网格目录：导航项 = 全部预测资料区块标题）
 *    导航共 56 项：高手资料 / 心水贴士 / 玉女心经 / 52 个分类区块 / 绝杀专区。
 *    控制条：左「收起导航」右「展开导航」职责固定、始终同排显示，
 *    目录默认收起（localStorage 记忆）；7 列网格展开时卡片式浅金修饰。
 * ========================================================= */
.top-nav {
  width: 100%;
  background: #fff;
  border-bottom: 0.02rem solid #ffd000;
}
/* 收起态：网格整体隐藏，仅留控制条 */
.top-nav.collapsed .top-nav-scroll { display: none; }
/* 吸顶态（JS 于页头横幅完全滚出视口后追加 .stuck）：
   fixed 相对视口贴顶常驻，须与居中容器同宽（8rem）并水平居中；
   未吸顶前条随文档流滚动——页头横幅（龙头）从条下方完整滚过
   不被遮挡，横幅离开视口后条才贴顶；吸顶态展开目录时整块
   （控制条+网格）固定在视口顶部，下拉到页面中部也能看到目录 */
.top-nav.stuck {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8rem;
  max-width: 100%;
  z-index: 950; /* 高于内容区块与悬浮按钮（900）之下无冲突 */
}
/* 占位元素：仅吸顶态（fixed 脱离文档流）由 JS 同步高度防内容被遮；
   非吸顶态高度恒 0（条在文档流中正常占位，不产生额外空隙） */
.top-nav-spacer { display: block; }
/* 目录控制条：浅金渐变底，标题居中，收起/展开按钮浮于左右两端 */
.top-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff8e0, #ffefc0);
  border-bottom: 0.01rem solid #ffd000;
}
.top-nav-title {
  font-size: 0.22rem;
  font-weight: bold;
  letter-spacing: 0.12rem;
  line-height: 1.4;
  color: #a05000;
  padding: 0.05rem 1.2rem 0.06rem; /* 两侧留出按钮空间，视觉仍居中 */
}
.nav-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #a05000;
  font-size: 0.2rem;
  line-height: 1.4;
  padding: 0.04rem 0.1rem;
  border-radius: 0.05rem;
  cursor: pointer;
}
.nav-toggle:active { background: #ffe9b0; }
#navCollapseBtn { left: 0.04rem; }
#navExpandBtn { right: 0.04rem; }
/* 左右按钮职责固定、始终同排显示：左「收起导航」收起目录，右「展开导航」展开目录 */
/* 项容器：7 列等宽网格自动换行；米色底衬出白色卡片间隙 */
.top-nav-scroll {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  min-width: 0;
  background: #fdf6e3;
  padding: 0.03rem;
}
.top-nav-item {
  flex: 0 0 calc(14.2857% - 0.06rem); /* 7 列等分，扣除左右边距 */
  box-sizing: border-box;
  margin: 0.03rem;
  border-radius: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  color: #4d3f22;
  font-size: 0.19rem;
  line-height: 1.35;
  padding: 0.05rem 0;
  background: #fff;
  border: 0.01rem solid #f0dfae;
}
.top-nav-item:active { background: #fff3c4; }
/* 当前所在资料区块：金渐变底 + 深棕红字高亮（目录滚动出视口后高亮无碍） */
.top-nav-item.active {
  background: linear-gradient(180deg, #ffe600, #ffc400);
  border-color: #f0b000;
  color: #7a3d00;
  font-weight: bold;
  box-shadow: 0 0.02rem 0.05rem rgba(240, 176, 0, 0.45);
}
/* 左右箭头：全量展示后已无滚动目标，隐藏 */

.nav-arrow { display: none; }

/* 手机端目录（≤640px）：停用 rem 等比缩小（390px 屏下 0.19rem 仅 9.3px、
 * 卡高 19px，难以点按），改用 px + vw 保底：字号 ~12px、卡片高 ~39px */
@media (max-width: 640px) {
  .top-nav-title {
    font-size: 14px;
    letter-spacing: 0.16em;
    line-height: 1.3;
    padding: 4px 96px 5px; /* 两侧预留按钮空间，标题视觉居中 */
  }
  .nav-toggle {
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 10px;
  }
  .top-nav-scroll {
    padding: 3px;
  }
  .top-nav-item {
    flex: 0 0 calc(14.2857% - 3px);
    margin: 1.5px;
    border-radius: 5px;
    font-size: clamp(10px, 3.1vw, 12.5px);
    line-height: 1.25;
    padding: 7px 0; /* 较上一版矮一截（卡高 ~33px），整体更紧凑 */
  }
}