/* 对照 https://mzao3vvs.iswpxt.app:2026 的真实样式还原
   设计变量取自原站 style1.css 与开奖组件 amhk.html 的计算样式 */

:root {
  /* 波色（取自原站 amhk.html 的上色逻辑） */
  --ball-red: #e71607;
  --ball-blue: #2389e9;
  --ball-green: #1fb61d;
  --ball-none: #999999;

  /* 版面 */
  --page-bg: #f4f4f4;
  --max-w: 720px;
  --gold: linear-gradient(to right, #ebcd92, #bfa573, #e2cba1, #d6bc87, #e2cba1, #bfa573, #ebcd92);
  --tab-active: #dcc087;
  --tab-idle: #eeeeee;
  --tab-idle-text: #dc0000;
  --title-line: #738e9f;
  --title-shadow: #b99b5f;
  --accent-green: #35a44a;
  --label-yellow: #ffec3d;
  --row-alt: #e9f7ea;
}

* { box-sizing: border-box; }

/* 注意：这里**故意不做** prefers-reduced-motion 降级。
   闪烁和扫光是这个站的设计语言，后台「发布前预览」必须和访客真机看到的
   一模一样 —— 如果预览机开了「减少动态效果」而访客没开，预览就成了
   另一个页面，调出来的效果对不上。 */

/* hidden 必须真的藏住。
   浏览器自带的是 [hidden]{display:none}，权重比任何类选择器都低 ——
   .logo-bar / .home-nav / .backup-bar 这些自己写了 display:flex 的元素，
   加了 hidden 也照样显示。页面上那几条「空条」就是这么来的。 */
[hidden] { display: none !important; }

html {
  background: var(--page-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: var(--max-w);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, Helvetica, sans-serif;
  color: #000;
  background: var(--page-bg);
  font-size: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

img { border: 0; max-width: 100%; }
a { text-decoration: none; }

/* ============================ 备用域名条 ============================ */
/* 放在最顶部、深色底，目的是让用户一眼看到并记住/截图，
   主域名失效时还能找回来。不做成链接，纯展示。 */

.backup-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 7px 10px;
  background: #1a1a1a;
  color: #ffd97a;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}
.backup-bar__tip { color: #fff; opacity: .85; font-size: 14px; }
.backup-bar__d {
  color: #ffd97a;
  letter-spacing: .5px;
  user-select: all;          /* 点一下就能整段选中，方便复制 */
}

/* ============================ 固定头部 ============================ */

.djxgam {
  position: static;   /* 不再吸顶：随页面滚动，不固定 */
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--page-bg);
}

/* LOGO 区：左财神爷 + 右站名域名。
   背景 = 深红渐变 + 金线菱格暗纹 + 中心暖光，三层叠出质感，不引外部图。 */
/* LOGO 区：财神爷贴左，文案紧挨着它、整组靠左。
   财神爷图已抠成透明底，所以这里的底色可以随便调，不用再迁就图片。 */
.logo-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 10px 2px 2px;
  background-color: #8a231f;
  background-image: linear-gradient(180deg, #962a25, #7c1c19);
}

.logo-fig { flex: 0 0 auto; width: clamp(56px, 17vw, 104px); line-height: 0; }
.logo-fig img { width: 100%; display: block; }
.logo-fig:empty { display: none; }

/* 文案紧挨财神爷，整组靠左 */
.logo-copy { flex: 1 1 auto; min-width: 0; text-align: left; }

.logo-text {
  font-size: clamp(34px, 11.4vw, 66px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 3px;
  color: #f2c67f;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  white-space: nowrap;
}

/* 域名行比站名深一档，拉开层次 */
.logo-sub {
  margin-top: 1px;
  font-size: clamp(17px, 5.5vw, 33px);
  font-weight: bold;
  letter-spacing: 2px;
  color: #cf9a58;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  white-space: nowrap;
}

/* 文字 LOGO 闪烁：浅金 ↔ 亮金，深枣红底上依然醒目 */
.ad-blink-text { animation: logoBlink 1.1s ease-in-out infinite; }

@keyframes logoBlink {
  0%, 100% { color: #f2c67f; text-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
  50% { color: #fff0c8; text-shadow: 0 2px 5px rgba(0, 0, 0, .5), 0 0 18px rgba(255, 205, 120, .95); }
}

/* 澳门 / 香港 切换 */
.home-nav { display: flex; padding: 4px 0; gap: 6px; }

.home-nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 0;
  border-radius: 40px;
  background: var(--tab-idle);
  color: var(--tab-idle-text);
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-nav a.active { background: var(--tab-active); color: #fff; }
.home-nav a img { width: 32px; height: 32px; }

/* 顶部紧凑开奖条 */
.kj-strip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #fff;
  font-weight: 700;
}

/* 没有开奖数据时不留一条白边 —— 页面上不该出现任何空着的框 */
.kj-strip:empty { display: none; }

.kj-strip__label {
  flex: 0 0 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  line-height: 1.25;
  background: #fff;
}

.kj-strip__label b { color: #000; }
.kj-strip__label i { font-style: normal; background: var(--label-yellow); color: #d00; padding: 0 2px; }

.kj-strip__cells { flex: 1; display: flex; }

.kj-strip__cell {
  flex: 1;
  text-align: center;
  color: #fff;
  padding: 1px 0 2px;
  border-left: 1px solid #fff;
}

.kj-strip__cell u { display: block; font-size: clamp(20px, 6.3vw, 28px); font-weight: 900; font-family: Tahoma, Geneva, sans-serif; text-decoration: none; }
.kj-strip__cell s { display: block; font-size: clamp(17px, 5.4vw, 24px); background: #fff; color: #000; text-decoration: none; }

.kj-strip__cell--refresh { background: var(--label-yellow); color: #d00; display: flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1.1; flex: 0 0 34px; }

/* ============================ 通用卡片 ============================ */

.box {
  margin: 5px 0;
  border-radius: 5px;
  overflow: hidden;
  background-image: var(--gold);
}

.pad { padding: 2px; }

.list-title {
  /* 以前是「固定 50px 高 + 单行 + 省略号」，标题一长就被切成
     「内幕资料（六尾1…」。改成可换行、高度自适应，一个字都不少。 */
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  line-height: 1.25;
  font-size: clamp(18px, 5.2vw, 25px);
  text-align: center;
  border-bottom: 1px solid var(--title-line);
  text-shadow: 1px 4px 1px var(--title-shadow);
  color: #000;
  font-weight: bold;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;

  /* 金色扫光：一条高光斜着扫过标题条，静止时就是原来的浅金渐变 */
  position: relative;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 243, 196, .95) 50%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(rgba(0, 0, 0, 0), #f7f3f3);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  animation: titleSheen 4.5s linear infinite;
}

@keyframes titleSheen {
  0%   { background-position: 130% 0, 0 0; }
  55%  { background-position: -40% 0, 0 0; }
  100% { background-position: -40% 0, 0 0; }
}

/* 号码和生肖轻微呼吸，让整页「活」起来但不晃眼 */
.dltable .c-red { animation: numPulse 1.6s ease-in-out infinite; }
@keyframes numPulse {
  0%, 100% { color: #d00; text-shadow: none; }
  50%      { color: #ff2a17; text-shadow: 0 0 8px rgba(255, 60, 40, .45); }
}

/* 开奖卡标题现在是后台可改的一句话，可能比原来那句长。
   通用 .list-title 是「单行 + 省略号」，长了就被切掉 —— 这一条允许换行。 */
#kjTitle {
  height: auto;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  line-height: 1.25;
  white-space: normal;
  font-size: clamp(17px, 5vw, 25px);
}

.news-box { padding: 2px 0; }

.riqi {
  font-size: clamp(15px, 4.4vw, 19px);
  text-align: center;
  font-weight: bold;
  margin: 5px 0;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.hilite { color: #d00; }

/* ============================ 开奖卡片 ============================ */

.kjbox {
  background: #fff;
  padding: 8px;
  font-size: 20px;
  color: #333;
}

.kjbox + .kjbox { border-top: 2px dotted #ccc; }

.kjbox__tit {
  display: flex;
  align-items: center;
  height: 23px;
  line-height: 23px;
  font-size: 21px;
}

.kjbox__tit-m { flex: 1; text-align: center; font-weight: bold; }
.kjbox__tit-r a, .kj-font-red { color: #f00; }
.kjbox__count { font-variant-numeric: tabular-nums; }

.kjbox__con { display: flex; margin: 8px 0; }

.kj-ball {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 78px;
  border-radius: 4px;
  margin-right: 6px;
  background: var(--ball-none);
  color: #000;
}

.kj-ball:last-child { margin-right: 0; }
.kj-ball--red { background: var(--ball-red); color: #fff; }
.kj-ball--blue { background: var(--ball-blue); color: #fff; }
.kj-ball--green { background: var(--ball-green); color: #fff; }

.kj-ball h2 {
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: 1;
  font-size: clamp(26px, 8.4vw, 42px);
  font-weight: 900;
  font-family: Tahoma, Geneva, sans-serif;
}

.kj-ball .whsx {
  display: inline-block;
  height: 27px;
  line-height: 27px;
  margin-top: 6px;
  padding: 0 5px;
  border-radius: 2px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  background: #fff;
}

.kj-add {
  display: flex;
  align-items: center;
  margin-right: 6px;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

.kjbox__foot { display: flex; align-items: center; gap: 6px; font-size: clamp(15px, 4.3vw, 19px); }
.kjbox__foot-l { flex: 1; white-space: nowrap; }

.kjbox__refresh {
  flex: 0 0 auto;
  background: #f5a623;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: bold;
  font-family: inherit;
}

/* ============================ 广告 ============================ */

.adslot { line-height: 0; }
.adslot:empty { display: none; }
.adslot > * + * { margin-top: 4px; }
.adslot a, .adslot .ad-static { display: block; line-height: 0; }
.adslot img { width: 100%; display: block; }

/* ============ 复合横幅：CSS 背景 + 可替换人物图 + 真文本 ============
   三层分离：换人物图不影响排版，文字任意分辨率都锐利，背景不引外部图。 */

.ad-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: clamp(96px, 27vw, 170px);
  padding: 12px 14px;
  overflow: hidden;
}

/* 兜底底色写在基类上，下面按位置定制的规则会自然覆盖它。
   （不能用 :not([class*="ad-banner--"])：前端给每条横幅都拼了位置类名，
   那个选择器永远命中不了，等于没写。）
   以前没有兜底，落在没做过配色的位置上的复合横幅是透明的 ——
   渲染出来一片白，夹在红金绿的横幅中间特别扎眼。 */
.ad-banner {
  background-color: #8a231f;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 214, 140, .10) 0 16px, rgba(255, 255, 255, 0) 16px 38px),
    linear-gradient(180deg, #a8302a, #6f1714);
}

/* 文案区留出安全边距，避免像之前那样压到边框上 */
.ad-banner__copy {
  flex: 1 1 auto;
  min-width: 0;
  z-index: 1;
  font-weight: 900;
  line-height: 1.12;
  font-size: clamp(26px, 8.6vw, 56px);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 3px 6px rgba(0, 0, 0, .5);
}

/* 人物图按宽度定尺寸：用 height 控制的话 flex 会拿图片固有宽度当基准，
   把文案区挤成竖排 */
/* 选择器权重要压过 `.adslot img { width:100% }`，否则人物图会被撑满整条 */
.adslot img.ad-banner__fig,
.ad-banner__fig {
  flex: 0 0 auto;
  align-self: flex-end;
  width: clamp(74px, 23vw, 150px);
  height: auto;
  margin-bottom: -12px;
  display: block;
  filter: drop-shadow(-4px 2px 8px rgba(0, 0, 0, .35));
}

/* 主视觉横幅 1：绿金叶饰图。原图里的金色宋体已抹掉，文案改用 DOM 文本 */
.ad-banner--banner_2 {
  position: relative;
  padding: 0;
  aspect-ratio: 1280 / 418;
  min-height: 0;
  background-color: #0f4c34;
}

.adslot .ad-banner--banner_2 > img.ad-banner__fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: none;
  z-index: 0;
}

/* 文案压在原文字位置（原图 x 109-728 / 1280 ≈ 8.5%~57%） */
.ad-banner--banner_2 > .ad-banner__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding-left: 8%;
  padding-right: 42%;
  font-size: clamp(26px, 8.6vw, 56px);
  letter-spacing: 2px;
  white-space: nowrap;
  color: #f0c674;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  /* 深绿底：金 ↔ 亮金，和图里的叶饰同色系 */
  --seg-a: #f0c674;
  --seg-b: #fff2cc;
}

/* 主视觉横幅 2：整张照片当底，文案用 DOM 文本叠上去 ——
   这样字体跟其他广告位一致，图片仍由 Ads_Config 驱动（可换、带指纹）。 */
.ad-banner--banner_3 {
  position: relative;
  padding: 0;
  aspect-ratio: 1280 / 418;
  min-height: 0;
  background-color: #b3120b;
}

/* 权重要压过通用的 `.adslot img.ad-banner__fig`(0,2,1)，这里用 (0,3,1) */
.adslot .ad-banner--banner_3 > img.ad-banner__fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: none;
  z-index: 0;
}

/* 文案整体右移贴近手（但不碰到），顺便盖住抹字后残留的那点痕迹。
   右侧留白＝手的位置，别让字压到手上。 */
.ad-banner--banner_3 > .ad-banner__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding-left: 13%;
  padding-right: 48%;
  font-size: clamp(26px, 8.6vw, 56px);
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

/* 主视觉横幅 4：红底双马图。原图金/白文字已抹掉，文案改用 DOM 文本居中排两行 */
.ad-banner--banner_5 {
  position: relative;
  padding: 0;
  aspect-ratio: 1280 / 418;
  min-height: 0;
  background-color: #b3120b;
}

.adslot .ad-banner--banner_5 > img.ad-banner__fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: none;
  z-index: 0;
}

/* 两侧留白＝马的位置，文案居中 */
.ad-banner--banner_5 > .ad-banner__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 0 21%;
  text-align: center;
  font-size: clamp(24px, 7.6vw, 50px);
  line-height: 1.18;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  /* 红底：白 ↔ 金，和原图那两种字色呼应 */
  --seg-a: #ffffff;
  --seg-b: #ffdf7a;
}

/* 第二行（域名）小一档 */
.ad-banner--banner_5 > .ad-banner__copy > .rt-line + .rt-line {
  font-size: .58em;
  letter-spacing: 1px;
}

/* 主视觉横幅 3：礼盒图。底图是白/金浅色，文字要用深色才看得清 */
.ad-banner--banner_4 {
  position: relative;
  padding: 0;
  aspect-ratio: 1280 / 418;
  min-height: 0;
  background-color: #f2f2f2;
}

.adslot .ad-banner--banner_4 > img.ad-banner__fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  filter: none;
  z-index: 0;
}

/* 文案压在左侧留白处，右边让开人物与礼盒 */
.ad-banner--banner_4 > .ad-banner__copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding-left: 8%;
  padding-right: 45%;
  font-size: clamp(24px, 7.8vw, 50px);
  letter-spacing: 1px;
  white-space: nowrap;
  color: #c00000;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
  /* 浅底：闪烁用深红 ↔ 金，呼应图里的金色光带 */
  --seg-a: #c00000;
  --seg-b: #c8901a;
}

/* 只闪这一段（&天天乐&），底色深浅由所在横幅决定 */
.c-blink {
  color: var(--seg-a, #ffe14d);
  animation: segBlink 1s steps(1, end) infinite;
}

@keyframes segBlink {
  0%, 49% { color: var(--seg-a, #ffe14d); }
  50%, 100% { color: var(--seg-b, #ffffff); }
}

/* 文字广告条
   参考站的细长条都是饱和色块 + 金/白描边字，没有白底的。
   斜纹用 repeating-linear-gradient 画，不引外部图，CSP 与离线渲染都不受影响。 */

.ad-text {
  /* 默认底色。放在基类里，下面按位置定制的配色会自然覆盖它 ——
     以前写成 .ad-text:not([class*="ad-text--"])，而前端给每条文字广告
     都拼了位置类名，那个选择器永远命中不了，等于没有兜底：
     落在没做过配色的位置上就是透明的，白底上一行黄字根本看不清。 */
  /* 站点整体是红金调，兜底色也用红金 —— 以前是紫色，落在没做过配色的
     位置上（横幅 1~5）就是一条紫条夹在红绿金中间，一眼就看出来不是一套。 */
  background-color: #8a231f;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 214, 140, .12) 0 14px, rgba(255, 255, 255, 0) 14px 34px),
    linear-gradient(180deg, #a8302a, #6f1714);
  position: relative;
  display: block;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
  padding: 11px 8px;
  font-size: clamp(17px, 5.1vw, 25px);
  color: #ffe14d;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
  /* 深底默认的闪烁配色，浅底位置在下面单独覆盖 */
  --blink-a: #ffe14d;
  --blink-b: #ffffff;
}

/* 「牢记域名」条幅：暖金底深红字，对应参考站 720×130 那一条 */
.ad-text--notice_banner {
  padding: 17px 8px;
  font-size: clamp(21px, 6.6vw, 33px);
  background-color: #ffe98a;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 13px),
    linear-gradient(180deg, #fff6bf, #ffd869);
  color: #b3120b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  --blink-a: #b3120b;
  --blink-b: #1147d1;
}

/* 细长条 ad_1：深红渐变 */
/* 细长条 ad_1：深红 + 斜纹 */
.ad-text--middle_ad_1 {
  background-color: #cf2118;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 14px, rgba(255, 255, 255, 0) 14px 34px),
    linear-gradient(180deg, #ef4136, #a90f08);
}

/* 细长条 ad_2：深蓝渐变 */
/* 细长条 ad_2：深蓝 + 网点 */
.ad-text--middle_ad_2 {
  background-color: #14549e;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .20) 1px, transparent 1.6px),
    linear-gradient(180deg, #2277d6, #0b3d7a);
  background-size: 9px 9px, auto;
}

/* 底部条：墨绿渐变 */
/* 底部条：墨绿 + 人字纹 */
.ad-text--bottom_ad {
  background-color: #227a3c;
  background-image:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .13) 0 3px, transparent 3px 15px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .13) 0 3px, transparent 3px 15px),
    linear-gradient(180deg, #34a853, #14622c);
}

/* 兜底：没单独配色的位置也不留白底 */

/* 仅字体变色闪烁（不整块明暗跳动），配色随所在位置的底色走 */
.ad-blink-color { animation: adColorBlink 1.1s steps(1, end) infinite; }

@keyframes adColorBlink {
  0%, 49% { color: var(--blink-a); }
  50%, 100% { color: var(--blink-b); }
}

/* 变色时盖掉行内标记的固定色，保证整条一起闪 */
.ad-blink-color .c-red,
.ad-blink-color .c-blue { color: inherit; }

/* 闪烁广告：整块明暗呼吸 */
.ad-blink { animation: adBlink 1s steps(1, end) infinite; }

@keyframes adBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .35; }
}

/* 闪烁边框（用于文字/宫格类广告） */
.ad-blink-ring { animation: adRing .8s ease-in-out infinite alternate; }

@keyframes adRing {
  from { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
  to { box-shadow: 0 0 0 3px rgba(255, 0, 0, .85); }
}



/* ============================ 资料表格 ============================ */

.dltable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  /* 不再 break-all：号码不会从数字中间断开（如 17 被拆成 1/7）。
     中文按正常规则折行，超长连写串才在必要时断。 */
  word-break: keep-all;      /* 「12」绝不会被拆成 1 和 2 */
  overflow-wrap: break-word; /* 只有真放不下的超长连写串才断 */
}

.dltable td {
  border: 1px solid #fff;
  padding: 8px 7px;
  vertical-align: middle;
  line-height: 1.65;
}
.dltable tr:nth-child(even) { background: var(--row-alt); }
/* 通栏提示行（参考站的"买码之前先上…"那种） */
.dltable__span td { background: #eafbe6; color: #000; }

/* 多列行的首列是期数/标签（如「203期 20码」「204期㈤肖」），不换行、压窄、
   靠左，把剩余宽度让给号码列。号码列左对齐、字距略放，按空格整段换行，
   再也不会从数字中间断开。 */
.dltable tr:not(.dltable__span) td:first-child:not(:only-child) {
  /* 这里以前是 white-space:nowrap + width:1%。后果是第一列把宽度吃光、
     第二列被挤成一条窄缝，「（06 18 01 13 09 21）」只能一个数字一行，
     整块高到两百多像素。改成让浏览器按内容自然分配宽度。 */
  text-align: left;
  color: #333;
  padding-right: 10px;
}
.dltable tr:not(.dltable__span) td:not(:first-child) {
  text-align: left;
  letter-spacing: .3px;
}

/* 行内高亮：*红* ~黄底~ !蓝! */
.c-red { color: #d00; }
.c-blue { color: #1147d1; }
.c-hl { background: var(--label-yellow); color: #c00; padding: 0 2px; border-radius: 2px; }
/* 局部缩小：用 em 跟随所在容器字号，换地方用也不会脱节 */
.c-sm { font-size: .6em; }
/* `//` 拆出的行 */
.rt-line { display: block; }

/* 链接组（站长推荐那类）：参考站用的是浅绿底 */
.linkgroup {
  background-color: #d8f3d0;
  background-image: linear-gradient(180deg, #e6f9e0, #c9ecbe);
}

.linkgroup a {
  display: block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 21px;
  font-weight: bold;
  color: #c00;
  border-bottom: 1px solid #eee;
}

.linkgroup a:last-child { border-bottom: 0; }
.linkgroup a { border-bottom-color: rgba(0, 0, 0, .1); }

/* ==================== 属性知识表（对照参考站 sx.html） ====================
   版式照搬参考站，但字号按本站的排版走：正文 20px 与资料表格 / 文本块一致，
   分区标题 21px，参考站那套 14px 在本站里会明显偏小。 */

.attr {
  background: #fff;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
  text-align: center;
}

/* 分区标题：浅灰通栏 */
.attr__head {
  background: #f1f1f1;
  font-size: 21px;
  line-height: 42px;
  font-weight: bold;
}

/* 十二生肖号码对照：宽屏三列，窄屏两列
   —— 字号放大后 5 个号码块在 1/3 宽度里放不下，会折行 */
.attr__zodiac {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #d8ccb4;
  border-top: 0;
  padding: 6px 0;
}

.attr__z { padding: 6px 0; }
.attr__z-name {
  line-height: 34px;
  white-space: nowrap;
}

/* 生肖小图：原图 50×50，夹在生肖名与[冲 X]之间，和参考站同一位置 */
.attr__z-icon {
  width: 32px;
  height: 32px;
  margin: 0 2px;
  vertical-align: middle;
  display: inline-block;
}

/* 号码小方块 */
.attr-nums { line-height: 30px; }

.attr-chip {
  display: inline-block;
  min-width: 24px;
  height: 26px;
  line-height: 26px;
  margin: 1px 2px;
  padding: 0 3px;
  color: #fff;
  font-size: 17px;
  vertical-align: middle;
}

.attr-chip--red { background: #ff0000; }
.attr-chip--blue { background: #3366ff; }
.attr-chip--green { background: #009933; }
.attr-chip--gray { background: #999999; }

/* 五行 / 波色 / 合数单双：左侧标签 + 右侧号码，号码左对齐 */
.attr__row {
  display: flex;
  align-items: center;
  border: 1px solid #d8ccb4;
  border-top: 0;
  padding: 6px 0;
}

.attr__label {
  flex: 0 0 66px;
  text-align: center;
  font-weight: bold;
}

.attr__row .attr-nums {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding-right: 4px;
}

/* 生肖属性：一行一条 */
.attr__prop {
  border: 1px solid #d8ccb4;
  border-top: 0;
  padding: 7px 6px;
  line-height: 1.45;
}

.attr__prop-label { color: #3366ff; }

@media (max-width: 430px) {
  .attr__zodiac { grid-template-columns: repeat(2, 1fr); }
}

/* 纯文本块 */
.textblock {
  background-color: #fdf6e3;
  background-image: linear-gradient(180deg, #fffdf5, #f7ecd2);
  padding: 11px 8px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
}

/* ============================ 历史开奖 ============================ */

.hist { background: #fff; }

.hist__head {
  display: flex;
  background: #f0e2c2;
  font-size: 18px;
  font-weight: bold;
  padding: 6px 6px;
  border-bottom: 1px solid #ddd;
}

.hist__head span:first-child { flex: 0 0 96px; }

.hist__row {
  display: flex;
  align-items: center;
  padding: 5px 6px;
  border-bottom: 1px solid #eee;
}

.hist__row:nth-child(even) { background: var(--row-alt); }

.hist__meta { flex: 0 0 96px; font-size: 17px; font-weight: bold; font-variant-numeric: tabular-nums; }
.hist__meta em { display: block; font-style: normal; font-size: 15px; color: #666; font-weight: normal; }
.hist__balls { flex: 1; display: flex; gap: 3px; }

.hist__balls .kj-ball { height: 50px; margin-right: 0; border-radius: 3px; }
.hist__balls .kj-ball h2 { font-size: 23px; line-height: 23px; }
.hist__balls .kj-ball .whsx { font-size: 16px; height: 20px; line-height: 20px; margin-top: 2px; padding: 0 3px; }
.hist__balls .kj-add { font-size: 23px; margin-right: 0; }

/* ============================ 状态 ============================ */

.skeleton {
  background: linear-gradient(90deg, #e6e6e6 25%, #f2f2f2 37%, #e6e6e6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  height: 130px;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}



/* 「暂无开奖数据」这类空状态。加载失败不再显示提示，所以没有按钮样式了 */
.error { background: #fff; padding: 22px 14px; text-align: center; font-size: 19px; color: #666; }

.site-foot {
  padding: 14px 12px calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  color: #6b6b6b;
  font-size: 15px;
  line-height: 1.7;
}
.site-foot p { margin: 2px 0; }
.site-foot__note { color: #8a231f; }
.site-foot__copy { font-size: 14px; color: #8a8a8a; letter-spacing: .3px; }

.foot-note { text-align: center; font-size: 16px; color: #fff; padding: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* 小屏收敛 */
@media (max-width: 360px) {
  .home-nav a { font-size: 28px; }
  .kj-ball h2 { font-size: 31px; }
  .kj-ball .whsx { font-size: 20px; }
  .list-title { font-size: 21px; }
  .dltable { font-size: 18px; }
}

/* 手机上把资料表再收紧一档：20px 的字 + 8px 内边距，一行 19 个号码要折三行，
   整块高度轻松过 180px，一屏放不下两条。字号和行距各降一档后矮 25% 左右。 */
@media screen and (max-width: 520px) {
  .dltable { font-size: 17px; }
  .dltable td { padding: 4px 6px; line-height: 1.35; }
  .dltable tr:not(.dltable__span) td:first-child:not(:only-child) { padding-right: 8px; }
}

/* 横幅 3、横幅 4 紧挨着中部那条红金横幅，三块全红看着像一坨。各给一套配色错开。 */
.ad-text--banner_3 {
  background-color: #14549e;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 14px, rgba(255,255,255,0) 14px 34px),
    linear-gradient(180deg, #2a74c8, #0d3a70);
  color: #ffe14d;
}
.ad-text--banner_4 {
  background-color: #227a3c;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 14px, rgba(255,255,255,0) 14px 34px),
    linear-gradient(180deg, #2f9a4d, #145a2c);
  color: #fff3c4;
}

/* 窄屏保险：号码行是 flex，子项默认 min-width:auto，内容撑不下时不肯收缩，
   于是最后一颗球被挤出屏幕。这里允许收缩，并把固定的期数列改成弹性宽度。 */
.kj-ball, .kj-strip__cell, .hist__balls > * { min-width: 0; }
.kjbox__con, .hist__balls { min-width: 0; }

@media screen and (max-width: 420px) {
  .kj-ball { margin-right: 4px; height: 68px; }
  .kj-ball h2 { font-size: clamp(22px, 7.4vw, 34px); }
  .hist__meta { flex: 0 0 62px; }
  .hist__head span:first-child { flex: 0 0 62px; }
}

/* 纯色文字条幅太平：加一道金色细线和内侧高光，边缘立起来 */
.ad-text {
  border-top: 2px solid rgba(255, 214, 122, .55);
  border-bottom: 2px solid rgba(0, 0, 0, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              inset 0 -10px 22px rgba(0, 0, 0, .18);
}