/* 对照 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; }

/* 三个彩种并排时（澳门 / 快乐8 / 香港），按钮窄了，字和图标跟着缩 */
.home-nav--n1 a { font-size: clamp(18px, 6vw, 30px); }
.home-nav--n2 a { font-size: clamp(17px, 5.4vw, 28px); }
.home-nav--n3 a { font-size: clamp(14px, 4.2vw, 22px); gap: 3px; white-space: nowrap; }
.home-nav--n3 a img { width: 1.2em; height: 1.2em; }

/* 顶部紧凑开奖条 */
.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__label i a { color: inherit; text-decoration: none; }

.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; }

/* 开奖流程里还没轮到的号码：灰底，顶上是阶段文案里的一个字
   （一个球一个字，七个球连起来是「香港天天乐开奖」这样一句）。
   字号比号码小一档 —— 汉字比两位数字宽，用同样的字号在窄屏上会顶到边。

   必须动起来：七个灰块杵在那儿一动不动，看着就是页面卡死了，
   而这一段恰恰要让人觉得「正在开」。做法是一个挨一个地起伏，
   延迟由 app.js 按球的次序给（--wait-delay），像一道波扫过去。 */
.kj-ball--wait {
  background: var(--ball-none);
  color: #fff;
  animation: ballWait 1.5s ease-in-out infinite;
  animation-delay: var(--wait-delay, 0s);
}

.kj-ball--wait h2 { font-size: clamp(19px, 5.8vw, 30px); }
.kj-ball--wait .whsx { color: #888; }

@keyframes ballWait {
  0%, 100% { background: #9c9c9c; transform: translateY(0); }
  50%      { background: #bcbcbc; transform: translateY(-3px); text-shadow: 0 0 10px rgba(255, 255, 255, .55); }
}

/* 刚开出来的那一个：从灰球位置弹一下再落定，配一圈金光。
   没有这个的话，号码是「悄悄换上去」的，正好错过的人根本没感觉。 */
.kj-ball--pop { animation: ballPop .5s cubic-bezier(.2, 1.5, .4, 1); }

@keyframes ballPop {
  0%   { transform: scale(.55) translateY(-6px); filter: brightness(2.2); box-shadow: 0 0 0 0 rgba(255, 214, 102, .9); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); filter: none; box-shadow: 0 0 0 14px rgba(255, 214, 102, 0); }
}

/* 顶部那条窄，起伏会显得晃 —— 只让底色亮暗呼吸 */
.kj-strip__cell--wait {
  animation: stripWait 1.5s ease-in-out infinite;
  animation-delay: var(--wait-delay, 0s);
}

@keyframes stripWait {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.28); }
}

.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(11.5px, 3.4vw, 19px); }
.kjbox__foot-l { flex: 1; min-width: 0; }
/* 一行「澳门第265期: 09月22日 星期二 21点32分」。字号随屏宽缩（上面 clamp），
   375px 上正好放下；再窄万一放不下，宁可省略号也不换行：换了行卡片会忽高忽低地跳。 */
.kjbox__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

/* 往期开奖卡：标题中间那格写「往期」，和最新一期的倒计时位置对齐 */
.kjbox__past-tag { color: #999; font-weight: normal; font-size: .8em; }

.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; }

/* 行内生肖小图 #马#：高度跟着所在那行的字号走，混排时不会把行撑高 */
.zxs { white-space: nowrap; }

.zx {
  display: inline-block;
  width: 1.55em;
  height: 1.55em;
  margin: -.35em .04em;          /* 负上下外边距：图比字高，靠这个把行高压回去 */
  vertical-align: middle;
  object-fit: contain;
}

/* 链接组（站长推荐那类）：参考站用的是浅绿底 */
.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;
  /* 字号跟着屏宽走。--lk-size 由后台那个「字号」设置写进来（见 app.js 的 blockBox），
     没设就用下面这个值。放不下的那一行由 app.js 的 fitLinks 单独缩小到刚好一行，
     所以默认可以给大一点，短的行不用跟着长的一起变小。 */
  font-size: var(--lk-size, clamp(15px, 5vw, 25px));
  font-weight: bold;
  color: var(--fc, #c00);
  border-bottom: 1px solid #eee;
  /* 再长也只占一行：缩到下限还放不下就截断，不让它换行破版 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.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--n1 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);
}

/* ==================== 宫格图标（参考站澳门页那一大片方格） ====================
   一排四格，每格：圆角白边卡片 + 方图 + 底部黄条名称。图上自带字的话名称可以不填。 */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px;
  background: #1da548;
}
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 14px;
  background: #fff;
  color: #0a2fd6;
  text-decoration: none;
  transition: transform .12s;
}
.tile:active { transform: scale(.96); }
.tile__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tile__name {
  display: block;
  padding: 2px 0;
  background: #f7f23a;
  text-align: center;
  font-size: clamp(14px, 4.6vw, 26px);
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== 按期图片（挂牌 / 跑狗图） ==================== */
.issues { background: #fff; }
.issues__tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: #dbdbdb;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.issues__tabs::-webkit-scrollbar { display: none; }
.issues__tab {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.issues__tab.is-on { background: #f00; }
.issues__pane { padding: 4px; }
.issues__img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.issues__text { padding: 6px 4px; font-size: 17px; line-height: 1.6; color: #222; text-align: left; }

/* 点图看大图 */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
  animation: viewerIn .18s ease-out;
}
.viewer img { max-width: 100%; max-height: 100%; }
@keyframes viewerIn { from { opacity: 0; } to { opacity: 1; } }

/* ==================== 链接宫格（图库那种一排三个的文字链接） ==================== */
.linkgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #eee;
}
.linkgrid__item {
  display: block;
  padding: 10px 2px;
  background: #fff;
  text-align: center;
  font-size: var(--lk-size, 18px);
  font-weight: 700;
  color: var(--fc, #c00);
  text-decoration: none;
}

/* ==================== 参考站样式的资料内容 ==================== */
/* {#色:文字} 自定义颜色；带底色的那种左右留一点空，和参考站的黄底红字一样 */
.cc--bg { padding: 0 1px; }
/* [图:…] 文字中间的小图：和字一样高，稍微大一点点 */
img.inl { height: 1.5em; width: auto; vertical-align: middle; margin: 0 1px; }

/* 「当前为XX页面」那种整块底色的文字条 */
.textblock--bar { padding: 6px 4px; font-size: 22px; font-weight: 900; letter-spacing: 1px; background-image: none; }

/* 牢记网址框（参考站「最新网址 · 一定要记好」） */
.notice {
  padding: 10px 6px 12px;
  text-align: center;
  background: linear-gradient(180deg, #f7e7b9 0%, #dcb96a 55%, #c89b45 100%);
  border-radius: 6px;
  color: #fff;
  font-weight: 900;
}
.notice__pill {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffbe6, #ffe9a6);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 0 0 2px #f3c24a;
  color: #e60000;
  font-size: clamp(17px, 5.2vw, 24px);
}
.notice__big {
  font-size: clamp(22px, 7.4vw, 34px);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.notice__big .cc { text-shadow: none; }
.notice__small {
  font-size: clamp(15px, 4.6vw, 22px);
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ==================== 资料区对齐参考站（手机 375 宽实测） ====================
   参考站：标题 19px / 高 38px；表格字号 14.7px 加粗、行高 30px、单元格不留内边距、
   1px 灰边、白底不隔行变色、文字居中。字号跟着屏宽等比放大，桌面上封顶。
   放在文件最后，盖掉前面几套（包括 520px 以下那一档）。 */
.list-title {
  display: block;
  min-height: 38px;
  padding: 2px 6px;
  line-height: 33px;
  font-size: clamp(19px, 5.07vw, 32px);
  text-shadow: 0 0 10px #e5e5e5;
  border-bottom: 1px solid #738e9f;
  background-image: linear-gradient(rgba(0, 0, 0, 0), #f7f3f3);
}
.dltable { font-size: clamp(14.6px, 3.91vw, 24px); font-weight: 700; }
.dltable td {
  height: 30px;
  padding: 0;
  line-height: 1.3;
  border: 1px solid #c0c0c0;
  text-align: center;
}
/* 最外侧左右不画边框：参考站也看不到那两条，还能多出 2px，长行刚好放得下 */
.dltable td:first-child { border-left: 0; }
.dltable td:last-child { border-right: 0; }
.cc--bg { padding: 0; }
.dltable tr:nth-child(even) { background: var(--alt, var(--row-alt)); }
.dltable tr:not(.dltable__span) td:first-child:not(:only-child),
.dltable tr:not(.dltable__span) td:not(:first-child) {
  text-align: center;
  color: inherit;
  padding: 0;
  letter-spacing: 0;
}
@media screen and (max-width: 520px) {
  .dltable { font-size: clamp(14.6px, 3.91vw, 24px); }
  .dltable td { padding: 0; line-height: 1.3; }
  .dltable tr:not(.dltable__span) td:first-child:not(:only-child) { padding-right: 0; }
}

/* 板块设了「靠左」 */
.dltable.is-left td,
.dltable.is-left tr:not(.dltable__span) td:first-child:not(:only-child),
.dltable.is-left tr:not(.dltable__span) td:not(:first-child) { text-align: left; }
.linkgroup.is-left a, .textblock.is-left { text-align: left; }

/* 链接列表里上了底色的行（参考站的绿底广告行）：黑字，和参考站一样 */
.linkgroup a[style*="background"] { color: var(--fc, #000); text-shadow: none; border-bottom-color: #fff; }

/* ============ 板块样式（后台「板块类型」和每个板块的「样式」里设的） ============ */
/* 隔行底色 */
.linkgroup.has-alt a:nth-child(even),
.linkgrid.has-alt .linkgrid__item:nth-child(even) { background: var(--alt); }
/* 设了字号：这几种元素本来各自写死了大小，改成跟着板块走 */
.has-fs .tile__name, .has-fs .issues__text, .has-fs .notice__pill, .has-fs .notice__small { font-size: 1em; }
.has-fs .notice__big { font-size: 1.4em; }
/* 链接行样式：白色按钮（参考站「期期推荐 · 高手免费资料」那种一条条圆角按钮） */
.linkgroup--btn { background: #fff; padding: 2px 4px; }
.linkgroup--btn a {
  height: 40px;
  line-height: 38px;
  margin: 4px 0;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #e8e8e8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  color: var(--fc, #111);
  text-shadow: none;
}
.linkgroup--btn a:last-child { border-bottom: 1px solid #c8c8c8; }
/* 纯白：去掉绿底 */
.linkgroup--plain { background: #fff; }
.linkgroup--plain a { text-shadow: none; }

/* ============ 资料内页（p.html） ============
   内页是从首页新标签页打开的：浏览器的后退键是灰的，手机上也没有返回手势可用，
   所以顶部必须有一条明确的回去的路。 */
.detail-back {
  margin-left: auto;
  align-self: center;
  flex: none;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.detail-back:active { background: rgba(255, 255, 255, .18); }

.detail-miss { padding: 14px 6px; text-align: center; line-height: 2; }
.detail-miss a { color: #0000ff; text-decoration: underline; margin-left: 6px; }

/* 能点的链接行（挂了内页或网址）：鼠标移上去 / 手指按住时，整行文字下面出一条红色横线，
   一眼看出这一行点得进去。没挂地址的行（a 没有 href）不出，免得误以为能点。 */
.linkgroup a[href]:hover, .linkgroup a[href]:active, .linkgroup a[href]:focus-visible,
.linkgrid a[href]:hover, .linkgrid a[href]:active, .linkgrid a[href]:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--hc, #e00);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* 整行（连同原来的黑字）变成这一行【】的颜色，--hc 由 app.js 的 hoverColor 按行写上。
   里面那几段自带颜色的字是行内样式，要 !important 才盖得过 */
.linkgroup a[href]:hover, .linkgroup a[href]:hover *,
.linkgroup a[href]:active, .linkgroup a[href]:active *,
.linkgrid a[href]:hover, .linkgrid a[href]:hover *,
.linkgrid a[href]:active, .linkgrid a[href]:active * { color: var(--hc, #e00) !important; }
.linkgroup a[href], .linkgrid a[href] { cursor: pointer; }

/* ============ 板块的几种闪烁（后台「闪烁效果」下拉里选） ============ */
/* 标题闪：红 ↔ 金，一秒一跳 */
.bk-title .list-title { animation: bkTitle 1s steps(1, end) infinite; }
@keyframes bkTitle {
  0%, 49% { color: #d00000; }
  50%, 100% { color: #c8901a; }
}
/* 彩色字闪：内容里上了颜色的字（号码、【】）一亮一暗 */
.bk-text .cc, .bk-text .c-red, .bk-text .c-blue, .bk-text .c-hl { animation: bkText 1s steps(1, end) infinite; }
@keyframes bkText {
  0%, 59% { opacity: 1; }
  60%, 100% { opacity: .25; }
}
/* 标题金光扫过 */
.bk-glow .list-title { position: relative; overflow: hidden; }
.bk-glow .list-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: bkGlow 2.6s linear infinite;
}
@keyframes bkGlow {
  0% { background-position: 130% 0; }
  70%, 100% { background-position: -40% 0; }
}
/* 整块呼吸：轻轻亮暗，不晃眼 */
.bk-breath { animation: bkBreath 1.8s ease-in-out infinite; }
@keyframes bkBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}